@sunbird-cb/consumption 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/bundles/sunbird-cb-consumption.umd.js +289 -38
  2. package/bundles/sunbird-cb-consumption.umd.js.map +1 -1
  3. package/bundles/sunbird-cb-consumption.umd.min.js +1 -1
  4. package/bundles/sunbird-cb-consumption.umd.min.js.map +1 -1
  5. package/esm2015/lib/_common/announcements/announcements.component.js +20 -6
  6. package/esm2015/lib/_common/announcements/announcements.module.js +3 -1
  7. package/esm2015/lib/_common/cards/card-mdo-channel/card-mdo-channel.component.js +3 -3
  8. package/esm2015/lib/_common/cards/card-wide/card-wide.component.js +1 -1
  9. package/esm2015/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +177 -0
  10. package/esm2015/lib/_common/cards/cards.component.js +2 -2
  11. package/esm2015/lib/_common/cards/cards.module.js +6 -3
  12. package/esm2015/lib/_common/competency-passbook/competency-passbook.component.js +43 -4
  13. package/esm2015/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +3 -1
  14. package/esm2015/lib/_common/pills/pills.component.js +16 -4
  15. package/esm2015/sunbird-cb-consumption.js +23 -22
  16. package/esm5/lib/_common/announcements/announcements.component.js +21 -5
  17. package/esm5/lib/_common/announcements/announcements.module.js +3 -1
  18. package/esm5/lib/_common/cards/card-mdo-channel/card-mdo-channel.component.js +3 -3
  19. package/esm5/lib/_common/cards/card-wide/card-wide.component.js +1 -1
  20. package/esm5/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +186 -0
  21. package/esm5/lib/_common/cards/cards.component.js +2 -2
  22. package/esm5/lib/_common/cards/cards.module.js +6 -3
  23. package/esm5/lib/_common/competency-passbook/competency-passbook.component.js +44 -5
  24. package/esm5/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +3 -1
  25. package/esm5/lib/_common/pills/pills.component.js +16 -4
  26. package/esm5/sunbird-cb-consumption.js +23 -22
  27. package/fesm2015/sunbird-cb-consumption.js +257 -17
  28. package/fesm2015/sunbird-cb-consumption.js.map +1 -1
  29. package/fesm5/sunbird-cb-consumption.js +267 -17
  30. package/fesm5/sunbird-cb-consumption.js.map +1 -1
  31. package/lib/_common/announcements/announcements.component.d.ts +4 -1
  32. package/lib/_common/cards/card-wide-v2/card-wide-v2.component.d.ts +31 -0
  33. package/lib/_common/competency-passbook/competency-passbook.component.d.ts +5 -0
  34. package/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.d.ts +1 -0
  35. package/lib/_common/pills/pills.component.d.ts +3 -0
  36. package/package.json +1 -1
  37. package/sunbird-cb-consumption.d.ts +22 -21
  38. package/sunbird-cb-consumption.metadata.json +1 -1
@@ -3235,6 +3235,8 @@ if (false) {
3235
3235
  IStripUnitContentData.prototype.secondaryHeading;
3236
3236
  /** @type {?} */
3237
3237
  IStripUnitContentData.prototype.viewMoreUrl;
3238
+ /** @type {?|undefined} */
3239
+ IStripUnitContentData.prototype.request;
3238
3240
  }
3239
3241
  class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
3240
3242
  /**
@@ -6829,7 +6831,9 @@ CommonStripModule.decorators = [
6829
6831
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
6830
6832
  */
6831
6833
  class AnnouncementsComponent {
6832
- constructor() { }
6834
+ constructor() {
6835
+ this.openDialog = new EventEmitter();
6836
+ }
6833
6837
  /**
6834
6838
  * @return {?}
6835
6839
  */
@@ -6844,22 +6848,34 @@ class AnnouncementsComponent {
6844
6848
  item.expanded = !item.expanded;
6845
6849
  }
6846
6850
  }
6851
+ /**
6852
+ * @return {?}
6853
+ */
6854
+ openAnnouncements() {
6855
+ this.openDialog.emit(true);
6856
+ }
6847
6857
  }
6848
6858
  AnnouncementsComponent.decorators = [
6849
6859
  { type: Component, args: [{
6850
6860
  selector: 'sb-uic-announcements',
6851
- template: "<div class=\"w-full\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo \">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"key-list\">\n <div *ngFor=\"let item of objectData?.list; let i = index\">\n <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n </div>\n </div>\n </div> \n </div> \n </div>\n</div>",
6852
- styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{max-height:600px;overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
6861
+ template: "<div class=\"w-full\" *ngIf=\"layoutType === 'web'\">\n <div class=\"flex item-center key-logo\">\n <img class=\"\" [src]=\"objectData?.logoUrl\">\n </div>\n <div class=\"flex item-center key-logo \">\n <div class=\"key-heading\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n {{objectData?.title}}\n </div>\n </div>\n <div class=\"key-list-container\"\n [style.borderColor]=\"objectData?.panelborder\"\n [style.backgroundColor]=\"objectData?.panelBackground\">\n <div class=\"key-list\">\n <div *ngFor=\"let item of objectData?.list; let i = index\">\n <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n [style.borderColor]=\"objectData?.listItem?.border\"\n [style.backgroundColor]=\"objectData?.listItem?.background\">\n <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n </div>\n </div>\n </div> \n </div> \n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'mobile'\">\n <div class=\"flex item-center key-logo \">\n <div class=\"mob-key-heading\" (click)=\"openAnnouncements()\"\n [style.backgroundColor]=\"objectData?.header?.background\"\n [style.color]=\"objectData?.header?.color\">\n <div class=\"flex key-button gap-3\">\n <div>\n <img [src]=\"objectData?.mobileIcon\">\n </div>\n <div>{{objectData?.title}}</div> \n <div><mat-icon class=\"key-mob-icon\">arrow_forward_ios</mat-icon></div>\n </div> \n </div>\n </div>\n</div>",
6862
+ styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{max-height:600px;overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.mob-key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:7px 25px;border-radius:20px;animation:.9s infinite mobPaddingAnimation;cursor:pointer}.key-mob-icon{font-size:12px;width:12px;height:12px}.key-button{align-items:center;justify-content:center}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}@keyframes mobPaddingAnimation{0%,100%{padding:7px 25px}25%,75%{padding:7px 30px}50%{padding:7px 35px}}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
6853
6863
  }] }
6854
6864
  ];
6855
6865
  /** @nocollapse */
6856
6866
  AnnouncementsComponent.ctorParameters = () => [];
6857
6867
  AnnouncementsComponent.propDecorators = {
6858
- objectData: [{ type: Input }]
6868
+ objectData: [{ type: Input }],
6869
+ layoutType: [{ type: Input }],
6870
+ openDialog: [{ type: Output }]
6859
6871
  };
6860
6872
  if (false) {
6861
6873
  /** @type {?} */
6862
6874
  AnnouncementsComponent.prototype.objectData;
6875
+ /** @type {?} */
6876
+ AnnouncementsComponent.prototype.layoutType;
6877
+ /** @type {?} */
6878
+ AnnouncementsComponent.prototype.openDialog;
6863
6879
  }
6864
6880
 
6865
6881
  /**
@@ -6873,6 +6889,7 @@ AnnouncementsModule.decorators = [
6873
6889
  declarations: [AnnouncementsComponent],
6874
6890
  imports: [
6875
6891
  CommonModule,
6892
+ MatIconModule,
6876
6893
  SkeletonLoaderLibModule
6877
6894
  ],
6878
6895
  exports: [AnnouncementsComponent],
@@ -7045,7 +7062,7 @@ class CardsComponent extends WidgetBaseComponent {
7045
7062
  CardsComponent.decorators = [
7046
7063
  { type: Component, args: [{
7047
7064
  selector: 'sb-uic-cards',
7048
- 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",
7065
+ 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-skelton'\" [ngTemplateOutlet]=\"cardWideV2Skelton\"></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 #cardWideV2Skelton>\n <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n <sb-uic-card-wide-v2 [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",
7049
7066
  styles: [""]
7050
7067
  }] }
7051
7068
  ];
@@ -8028,7 +8045,7 @@ CardWideComponent.decorators = [
8028
8045
  { type: Component, args: [{
8029
8046
  selector: 'sb-uic-card-wide',
8030
8047
  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",
8031
- 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}}"]
8048
+ 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:147px;height:117px;border-radius:12px}}"]
8032
8049
  }] }
8033
8050
  ];
8034
8051
  /** @nocollapse */
@@ -8173,8 +8190,8 @@ class CardMDOChannelComponent {
8173
8190
  CardMDOChannelComponent.decorators = [
8174
8191
  { type: Component, args: [{
8175
8192
  selector: 'sb-uic-card-mdo-channel',
8176
- 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()\" 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-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData.content.name }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>",
8177
- 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:156px;height:156px;max-height:156px;margin:16px 8px;background:#7faeff!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:86px;max-height:86px;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:2;-webkit-box-orient:vertical;min-height:48px}"]
8193
+ 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/mdo-channels/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-center mat-subheading-2 title-text ws-mat-black-text\">\n {{ widgetData.content.name }}\n </div>\n </div>\n </div>\n </mat-card-content>\n </ng-container>\n </a>\n </ng-container>\n </div>\n</mat-card>",
8194
+ 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:156px;height:156px;max-height:156px;margin:0;background:#7faeff!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:86px;max-height:86px;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:2;-webkit-box-orient:vertical;min-height:48px}"]
8178
8195
  }] }
8179
8196
  ];
8180
8197
  /** @nocollapse */
@@ -8225,6 +8242,176 @@ if (false) {
8225
8242
  CardMDOChannelComponent.prototype.configSvc;
8226
8243
  }
8227
8244
 
8245
+ /**
8246
+ * @fileoverview added by tsickle
8247
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
8248
+ */
8249
+ class CardWideV2Component {
8250
+ /**
8251
+ * @param {?} snackBar
8252
+ * @param {?} events
8253
+ * @param {?} translate
8254
+ * @param {?} langtranslations
8255
+ * @param {?} configSvc
8256
+ */
8257
+ constructor(snackBar, events, translate, langtranslations, configSvc) {
8258
+ this.snackBar = snackBar;
8259
+ this.events = events;
8260
+ this.translate = translate;
8261
+ this.langtranslations = langtranslations;
8262
+ this.configSvc = configSvc;
8263
+ this.isCardLoading = false;
8264
+ this.contentData = new EventEmitter();
8265
+ this.isCardFlipped = false;
8266
+ this.showFlip = false;
8267
+ this.widgetType = 'df';
8268
+ this.widgetSubType = 'sdf';
8269
+ this.langtranslations.languageSelectedObservable.subscribe((/**
8270
+ * @return {?}
8271
+ */
8272
+ () => {
8273
+ if (localStorage.getItem('websiteLanguage')) {
8274
+ this.translate.setDefaultLang('en');
8275
+ /** @type {?} */
8276
+ const lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
8277
+ this.translate.use(lang);
8278
+ }
8279
+ }));
8280
+ }
8281
+ /**
8282
+ * @return {?}
8283
+ */
8284
+ ngOnInit() {
8285
+ /** @type {?} */
8286
+ const instanceConfig = this.configSvc.instanceConfig;
8287
+ if (instanceConfig) {
8288
+ this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
8289
+ this.sourceLogos = instanceConfig.sources;
8290
+ this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
8291
+ }
8292
+ else {
8293
+ this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
8294
+ this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
8295
+ }
8296
+ }
8297
+ /**
8298
+ * @return {?}
8299
+ */
8300
+ showSnackbar() {
8301
+ if (this.showIntranetContent) {
8302
+ this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
8303
+ }
8304
+ else if (!this.isLiveOrMarkForDeletion) {
8305
+ this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
8306
+ }
8307
+ }
8308
+ /**
8309
+ * @param {?} contentData
8310
+ * @return {?}
8311
+ */
8312
+ getRedirectUrlData(contentData) {
8313
+ this.contentData.emit(contentData);
8314
+ }
8315
+ /**
8316
+ * @return {?}
8317
+ */
8318
+ raiseTelemetry() {
8319
+ // if(this.forPreview){
8320
+ // return
8321
+ // }
8322
+ this.events.raiseInteractTelemetry({
8323
+ type: 'click',
8324
+ subType: `${this.widgetType}-${this.widgetSubType}`,
8325
+ id: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
8326
+ }, {
8327
+ id: this.widgetData.content.identifier,
8328
+ type: this.widgetData.content.primaryCategory,
8329
+ //context: this.widgetData.context,
8330
+ rollup: {},
8331
+ ver: `${this.widgetData.content.version}${''}`,
8332
+ }, {
8333
+ pageIdExt: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
8334
+ module: camelCase(this.widgetData.content.primaryCategory),
8335
+ });
8336
+ }
8337
+ }
8338
+ CardWideV2Component.decorators = [
8339
+ { type: Component, args: [{
8340
+ selector: 'sb-uic-card-wide-v2',
8341
+ template: "<mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n <div class=\"imageholder \">\n <img mat-card-image class=\"margin-remove\"\n [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n [alt]=\"widgetData?.content?.name\">\n <div class=\"source-div\" [hidden]=\"true\">\n <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n </div>\n <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n </div>\n <!-- <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n cbpData: cbPlanMapData[widgetData?.content?.identifier]\n }}\"></ng-container>\n </ng-container> -->\n </div>\n <mat-card-content class=\"mat-text-box\">\n <div class=\"course_widget flex flex-between margin-remove\">\n <div class=\"flex flex-end course_v2\">\n <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n <mat-icon class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"Audio\" *ngIf=\"widgetData?.content?.mimeType === 'audio/mpeg'\">\n mic</mat-icon>\n\n <mat-icon class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"Assessment\" *ngIf=\"widgetData?.content?.mimeType === 'application/json' || widgetData?.content?.mimeType === 'application/quiz'\">\n assessment</mat-icon>\n\n <mat-icon class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"PDF\" *ngIf=\"widgetData?.content?.mimeType === 'application/pdf'\">\n picture_as_pdf</mat-icon>\n\n <mat-icon class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"Video\" *ngIf=\"widgetData?.content?.mimeType === 'video/mp4' || widgetData?.content?.mimeType === 'video/x-youtube' || widgetData?.content?.mimeType === 'application/x-mpegURL'\">\n videocam</mat-icon>\n\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\" alt=\"Course\" *ngIf=\"widgetData?.content?.mimeType === 'application/vnd.ekstep.content-collection'\">\n video_library\n </mat-icon>\n\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\" alt=\"HTML\" *ngIf=\"widgetData?.content?.mimeType === 'application/vnd.ekstep.html-archive' || widgetData?.content?.mimeType === 'application/vnd.ekstep.ecml-archive' || widgetData?.content?.mimeType === 'text/x-url' || widgetData?.content?.mimeType === 'application/survey'\">\n attachment\n </mat-icon>\n\n <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\" alt=\"Module\" *ngIf=\"widgetData?.content?.mimeType === 'image/jpeg' || widgetData?.content?.mimeType === 'image/png'\">\n image\n </mat-icon>\n <span class=\"ws-mat-black60-text font-normal mat-caption \">\n {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"flex main_title_box\">\n <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n {{widgetData?.content?.name}}\n </a>\n </p>\n </div>\n\n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle provider\">\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\">By&nbsp;\n <!-- {{'cardcontentv2.by' | translate}} -->\n {{widgetData?.content?.organisation[0] }}</span>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n <mat-icon>star</mat-icon>\n <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n </div>\n <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n </ng-container>\n <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n </ng-container>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n",
8342
+ styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex}.card-wide-v2 .title-text{word-break:break-all;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:30px;height:30px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}"]
8343
+ }] }
8344
+ ];
8345
+ /** @nocollapse */
8346
+ CardWideV2Component.ctorParameters = () => [
8347
+ { type: MatSnackBar },
8348
+ { type: EventService },
8349
+ { type: TranslateService },
8350
+ { type: MultilingualTranslationsService },
8351
+ { type: ConfigurationsService$1 }
8352
+ ];
8353
+ CardWideV2Component.propDecorators = {
8354
+ widgetData: [{ type: Input }],
8355
+ isLiveOrMarkForDeletion: [{ type: Input }],
8356
+ showIntranetContent: [{ type: Input }],
8357
+ isIntranetAllowedSettings: [{ type: Input }],
8358
+ isCardLoading: [{ type: Input }],
8359
+ contentData: [{ type: Output }]
8360
+ };
8361
+ if (false) {
8362
+ /** @type {?} */
8363
+ CardWideV2Component.prototype.widgetData;
8364
+ /** @type {?} */
8365
+ CardWideV2Component.prototype.isLiveOrMarkForDeletion;
8366
+ /** @type {?} */
8367
+ CardWideV2Component.prototype.showIntranetContent;
8368
+ /** @type {?} */
8369
+ CardWideV2Component.prototype.isIntranetAllowedSettings;
8370
+ /** @type {?} */
8371
+ CardWideV2Component.prototype.isCardLoading;
8372
+ /** @type {?} */
8373
+ CardWideV2Component.prototype.contentData;
8374
+ /** @type {?} */
8375
+ CardWideV2Component.prototype.isCardFlipped;
8376
+ /** @type {?} */
8377
+ CardWideV2Component.prototype.defaultThumbnail;
8378
+ /** @type {?} */
8379
+ CardWideV2Component.prototype.sourceLogos;
8380
+ /** @type {?} */
8381
+ CardWideV2Component.prototype.defaultSLogo;
8382
+ /** @type {?} */
8383
+ CardWideV2Component.prototype.showFlip;
8384
+ /** @type {?} */
8385
+ CardWideV2Component.prototype.widgetType;
8386
+ /** @type {?} */
8387
+ CardWideV2Component.prototype.widgetSubType;
8388
+ /**
8389
+ * @type {?}
8390
+ * @private
8391
+ */
8392
+ CardWideV2Component.prototype.snackBar;
8393
+ /**
8394
+ * @type {?}
8395
+ * @private
8396
+ */
8397
+ CardWideV2Component.prototype.events;
8398
+ /**
8399
+ * @type {?}
8400
+ * @private
8401
+ */
8402
+ CardWideV2Component.prototype.translate;
8403
+ /**
8404
+ * @type {?}
8405
+ * @private
8406
+ */
8407
+ CardWideV2Component.prototype.langtranslations;
8408
+ /**
8409
+ * @type {?}
8410
+ * @private
8411
+ */
8412
+ CardWideV2Component.prototype.configSvc;
8413
+ }
8414
+
8228
8415
  /**
8229
8416
  * @fileoverview added by tsickle
8230
8417
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -8239,7 +8426,8 @@ CardsModule.decorators = [
8239
8426
  CardUserComponent,
8240
8427
  CardLandscapeComponent,
8241
8428
  CardWideComponent,
8242
- CardMDOChannelComponent
8429
+ CardMDOChannelComponent,
8430
+ CardWideV2Component
8243
8431
  ],
8244
8432
  imports: [
8245
8433
  CommonModule,
@@ -8262,7 +8450,8 @@ CardsModule.decorators = [
8262
8450
  CardLandscapeComponent,
8263
8451
  CardUserComponent,
8264
8452
  CardWideComponent,
8265
- CardMDOChannelComponent
8453
+ CardMDOChannelComponent,
8454
+ CardWideV2Component
8266
8455
  ],
8267
8456
  },] }
8268
8457
  ];
@@ -8352,6 +8541,8 @@ class CompetencyPassbookComponent {
8352
8541
  this.contentSvc = contentSvc;
8353
8542
  this.competencySvc = competencySvc;
8354
8543
  this.router = router;
8544
+ this.cardDisplayCount = 3;
8545
+ this.dynamicAlignPills = 'center';
8355
8546
  this.emptyResponse = new EventEmitter();
8356
8547
  this.loadCometency = false;
8357
8548
  this.loadCompetencyArea = false;
@@ -8366,7 +8557,6 @@ class CompetencyPassbookComponent {
8366
8557
  * @return {?}
8367
8558
  */
8368
8559
  ngOnInit() {
8369
- this.getCompetencyArea();
8370
8560
  this.getAllCompetencies();
8371
8561
  // this.competencyData = this.objectData
8372
8562
  // this.filter(this.currentFilter)
@@ -8509,6 +8699,8 @@ class CompetencyPassbookComponent {
8509
8699
  (response) => {
8510
8700
  this.allcompetencyTheme = {};
8511
8701
  if (response && response.result && response.result.competency) {
8702
+ this.originalCompetencyArray = response.result.competency;
8703
+ this.getCompetencyArea();
8512
8704
  response.result.competency.forEach((/**
8513
8705
  * @param {?} element
8514
8706
  * @return {?}
@@ -8560,7 +8752,29 @@ class CompetencyPassbookComponent {
8560
8752
  const response = yield this.callCompetencySearch(request);
8561
8753
  if (response && response.results) {
8562
8754
  if (response.results.result.facets) {
8563
- this.competencyTheme = response.results.result.facets[0].values;
8755
+ /** @type {?} */
8756
+ let competencyThemeData = response.results.result.facets[0].values;
8757
+ this.originalCompetencyArray.forEach((/**
8758
+ * @param {?} element
8759
+ * @return {?}
8760
+ */
8761
+ (element) => {
8762
+ if (element.name.toLowerCase() === value) {
8763
+ this.competencyTheme = competencyThemeData.filter((/**
8764
+ * @param {?} ele1
8765
+ * @return {?}
8766
+ */
8767
+ (ele1) => {
8768
+ return element.children.find((/**
8769
+ * @param {?} ele2
8770
+ * @return {?}
8771
+ */
8772
+ (ele2) => ele2.name.toLowerCase() === ele1.name.toLowerCase()));
8773
+ }));
8774
+ this.showAllTheme = [{ name: 'Show all', showAll: false }];
8775
+ this.competencyThemeLength = 6;
8776
+ }
8777
+ }));
8564
8778
  this.resetViewMore();
8565
8779
  }
8566
8780
  this.loadCometency = false;
@@ -8612,7 +8826,7 @@ class CompetencyPassbookComponent {
8612
8826
  CompetencyPassbookComponent.decorators = [
8613
8827
  { type: Component, args: [{
8614
8828
  selector: 'sb-uic-competency-passbook',
8615
- template: " <div class=\"competency-title\">{{objectData?.title}} \n <span class=\"competency-count\">\n ({{competencyStrength}})\n </span>\n</div>\n<div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"competencyArea\" \n [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n <!-- <div class=\"flex items-baseline\">\n <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n </div> -->\n </div>\n </div>\n <div class=\"flex flex-row pt-3 pb-3 description\">\n {{ allcompetencyTheme[obj.name]?.description }} \n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\">school</mat-icon>\n <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n {{ child.name }}\n </div>\n </ng-container>\n <div class=\"p-2 info-btn cursor-pointer\"\n *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View more\n </div>\n <div class=\"p-2 info-btn cursor-pointer\"\n *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View less\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"showAllTheme\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\">\n <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center w-full\">\n <div class=\"name w-full\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"pt-3 pb-3 description\">\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n <div class=\"no-of-contents\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n</ng-container>",
8829
+ template: " <div class=\"competency-title\" *ngIf=\"objectData?.title\">{{objectData?.title}} \n <span class=\"competency-count\">\n ({{competencyStrength}})\n </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center\">\n <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n <!-- <div class=\"flex items-baseline\">\n <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n </div> -->\n </div>\n </div>\n <div class=\"flex flex-row pt-3 pb-3 description\">\n {{ allcompetencyTheme[obj.name]?.description }} \n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\">school</mat-icon>\n <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n {{ child.name }}\n </div>\n </ng-container>\n <div class=\"p-2 info-btn cursor-pointer\"\n *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View more\n </div>\n <div class=\"p-2 info-btn cursor-pointer\"\n *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n View less\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n <div class=\"flex-1 flex-col\">\n <div class=\"competency-theme\"></div>\n <div class=\"details flex flex-col\">\n <div class=\"flex flex-col p-4\">\n <div class=\"flex flex-row cursor-pointer\">\n <div class=\"flex flex-row gap-2 items-center w-full\">\n <div class=\"name w-full\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n <div class=\"pt-3 pb-3 description\">\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-row gap-3 items-center\">\n <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n <div class=\"no-of-contents\"><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n </div>\n <div class=\"line mt-3 mt-2\"></div>\n <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div> \n </div>\n </div>\n </div>\n</div>\n</ng-container>",
8616
8830
  styles: [".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]
8617
8831
  }] }
8618
8832
  ];
@@ -8626,6 +8840,10 @@ CompetencyPassbookComponent.ctorParameters = () => [
8626
8840
  CompetencyPassbookComponent.propDecorators = {
8627
8841
  objectData: [{ type: Input }],
8628
8842
  providerId: [{ type: Input }],
8843
+ cardDisplayCount: [{ type: Input }],
8844
+ dynamicClass: [{ type: Input }],
8845
+ dynamicColor: [{ type: Input }],
8846
+ dynamicAlignPills: [{ type: Input }],
8629
8847
  emptyResponse: [{ type: Output }]
8630
8848
  };
8631
8849
  if (false) {
@@ -8634,12 +8852,22 @@ if (false) {
8634
8852
  /** @type {?} */
8635
8853
  CompetencyPassbookComponent.prototype.providerId;
8636
8854
  /** @type {?} */
8855
+ CompetencyPassbookComponent.prototype.cardDisplayCount;
8856
+ /** @type {?} */
8857
+ CompetencyPassbookComponent.prototype.dynamicClass;
8858
+ /** @type {?} */
8859
+ CompetencyPassbookComponent.prototype.dynamicColor;
8860
+ /** @type {?} */
8861
+ CompetencyPassbookComponent.prototype.dynamicAlignPills;
8862
+ /** @type {?} */
8637
8863
  CompetencyPassbookComponent.prototype.emptyResponse;
8638
8864
  /** @type {?} */
8639
8865
  CompetencyPassbookComponent.prototype.loadCometency;
8640
8866
  /** @type {?} */
8641
8867
  CompetencyPassbookComponent.prototype.loadCompetencyArea;
8642
8868
  /** @type {?} */
8869
+ CompetencyPassbookComponent.prototype.originalCompetencyArray;
8870
+ /** @type {?} */
8643
8871
  CompetencyPassbookComponent.prototype.competencyArea;
8644
8872
  /** @type {?} */
8645
8873
  CompetencyPassbookComponent.prototype.selectedValue;
@@ -8673,6 +8901,9 @@ class PillsComponent {
8673
8901
  constructor() {
8674
8902
  this.isLoading = false;
8675
8903
  this.pillClick = new EventEmitter();
8904
+ this.dynamicClass = '';
8905
+ this.dynamicColor = '';
8906
+ this.requiredTitlecase = true;
8676
8907
  }
8677
8908
  /**
8678
8909
  * @return {?}
@@ -8690,8 +8921,8 @@ class PillsComponent {
8690
8921
  PillsComponent.decorators = [
8691
8922
  { type: Component, args: [{
8692
8923
  selector: 'sb-uic-pills',
8693
- template: "<ng-container *ngIf=\"!isLoading\">\n <mat-chip-list >\n <ng-container *ngFor=\"let pill of pillsData\">\n <mat-chip class=\"competency-chip\" (click)=\"selectedPill(pill)\" \n [ngClass]=\"{'active': selectedValue === pill?.name}\">\n <span class=\"pill-name\">{{pill?.name | titlecase}} <span *ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n </mat-chip>\n </ng-container>\n </mat-chip-list>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let pill of [0,1,2]\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n</ng-container>\n",
8694
- styles: [".competency-chip{z-index:99999;padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent!important;cursor:pointer}.competency-chip .pill-name{color:#fff!important}.active{background-color:#1b4ca1!important}"]
8924
+ template: "<ng-container *ngIf=\"!isLoading\">\n <mat-chip-list >\n <ng-container *ngFor=\"let pill of pillsData\">\n <mat-chip class=\"competency-chip\" (click)=\"selectedPill(pill)\" [style.color]=\"dynamicColor\" [style.borderColor]=\"'#999999'\"\n [ngClass]=\"{'active': selectedValue === pill?.name}\">\n <span [style.color]=\"dynamicColor\" class=\"pill-name\" *ngIf=\"requiredTitlecase\">{{pill?.name | titlecase}} <span *ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n <span [style.color]=\"dynamicColor\" class=\"pill-name\" *ngIf=\"!requiredTitlecase\">{{pill?.name }} <span *ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n </mat-chip>\n </ng-container>\n </mat-chip-list>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let pill of [0,1,2]\">\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </ng-container>\n </div>\n</ng-container>\n",
8925
+ styles: [".competency-chip{z-index:999;padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent!important;cursor:pointer}.competency-chip .pill-name{color:#fff}.active{background-color:#1b4ca1!important}.active .pill-name{color:#fff!important}"]
8695
8926
  }] }
8696
8927
  ];
8697
8928
  /** @nocollapse */
@@ -8700,7 +8931,10 @@ PillsComponent.propDecorators = {
8700
8931
  pillsData: [{ type: Input }],
8701
8932
  selectedValue: [{ type: Input }],
8702
8933
  isLoading: [{ type: Input }],
8703
- pillClick: [{ type: Output }]
8934
+ pillClick: [{ type: Output }],
8935
+ dynamicClass: [{ type: Input }],
8936
+ dynamicColor: [{ type: Input }],
8937
+ requiredTitlecase: [{ type: Input }]
8704
8938
  };
8705
8939
  if (false) {
8706
8940
  /** @type {?} */
@@ -8711,6 +8945,12 @@ if (false) {
8711
8945
  PillsComponent.prototype.isLoading;
8712
8946
  /** @type {?} */
8713
8947
  PillsComponent.prototype.pillClick;
8948
+ /** @type {?} */
8949
+ PillsComponent.prototype.dynamicClass;
8950
+ /** @type {?} */
8951
+ PillsComponent.prototype.dynamicColor;
8952
+ /** @type {?} */
8953
+ PillsComponent.prototype.requiredTitlecase;
8714
8954
  }
8715
8955
 
8716
8956
  /**
@@ -9615,5 +9855,5 @@ UserContentRatingLibModule.decorators = [
9615
9855
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9616
9856
  */
9617
9857
 
9618
- export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, CardMDOChannelComponent as ɵba, PipePublicURLModule as ɵbb, PipePublicURL as ɵbc, DisplayContentTypeLibModule as ɵbd, DisplayContentTypeLibComponent as ɵbe, DefaultThumbnailModule as ɵbf, DefaultThumbnailDirective as ɵbg, PipeDurationTransformModule as ɵbh, PipeDurationTransformPipe as ɵbi, CompetencyPassbookComponent as ɵbj, CompetencyPassbookService as ɵbk, PillsModule as ɵbl, PillsComponent as ɵbm, UserContentRatingLibComponent as ɵbn, ScrollableItemDirective as ɵbo, RatingService as ɵbp, UserContentRatingLibService as ɵbq, AvatarPhotoLibModule as ɵbr, AvatarPhotoLibComponent as ɵbs, MyHammerConfig$1 as ɵbt, SlidersNgContentLibModule as ɵbu, SlidersNgContentLibComponent as ɵbv, ScrollableItemModule as ɵbw, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CalenderDayComponent as ɵr, CommonStripComponent as ɵs, AnnouncementsComponent as ɵt, CardResourceComponent as ɵu, CardsComponent as ɵv, CardPortraitComponent as ɵw, CardUserComponent as ɵx, CardLandscapeComponent as ɵy, CardWideComponent as ɵz };
9858
+ export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, CardMDOChannelComponent as ɵba, CardWideV2Component as ɵbb, PipePublicURLModule as ɵbc, PipePublicURL as ɵbd, DisplayContentTypeLibModule as ɵbe, DisplayContentTypeLibComponent as ɵbf, DefaultThumbnailModule as ɵbg, DefaultThumbnailDirective as ɵbh, PipeDurationTransformModule as ɵbi, PipeDurationTransformPipe as ɵbj, CompetencyPassbookComponent as ɵbk, CompetencyPassbookService as ɵbl, PillsModule as ɵbm, PillsComponent as ɵbn, UserContentRatingLibComponent as ɵbo, ScrollableItemDirective as ɵbp, RatingService as ɵbq, UserContentRatingLibService as ɵbr, AvatarPhotoLibModule as ɵbs, AvatarPhotoLibComponent as ɵbt, MyHammerConfig$1 as ɵbu, SlidersNgContentLibModule as ɵbv, SlidersNgContentLibComponent as ɵbw, ScrollableItemModule as ɵbx, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CalenderDayComponent as ɵr, CommonStripComponent as ɵs, AnnouncementsComponent as ɵt, CardResourceComponent as ɵu, CardsComponent as ɵv, CardPortraitComponent as ɵw, CardUserComponent as ɵx, CardLandscapeComponent as ɵy, CardWideComponent as ɵz };
9619
9859
  //# sourceMappingURL=sunbird-cb-consumption.js.map