@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
@@ -3825,6 +3825,8 @@
3825
3825
  IStripUnitContentData.prototype.secondaryHeading;
3826
3826
  /** @type {?} */
3827
3827
  IStripUnitContentData.prototype.viewMoreUrl;
3828
+ /** @type {?|undefined} */
3829
+ IStripUnitContentData.prototype.request;
3828
3830
  }
3829
3831
  var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
3830
3832
  __extends(ContentStripWithTabsLibComponent, _super);
@@ -7994,6 +7996,7 @@
7994
7996
  */
7995
7997
  var AnnouncementsComponent = /** @class */ (function () {
7996
7998
  function AnnouncementsComponent() {
7999
+ this.openDialog = new core.EventEmitter();
7997
8000
  }
7998
8001
  /**
7999
8002
  * @return {?}
@@ -8016,23 +8019,38 @@
8016
8019
  item.expanded = !item.expanded;
8017
8020
  }
8018
8021
  };
8022
+ /**
8023
+ * @return {?}
8024
+ */
8025
+ AnnouncementsComponent.prototype.openAnnouncements = /**
8026
+ * @return {?}
8027
+ */
8028
+ function () {
8029
+ this.openDialog.emit(true);
8030
+ };
8019
8031
  AnnouncementsComponent.decorators = [
8020
8032
  { type: core.Component, args: [{
8021
8033
  selector: 'sb-uic-announcements',
8022
- 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>",
8023
- 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}}"]
8034
+ 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>",
8035
+ 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}}"]
8024
8036
  }] }
8025
8037
  ];
8026
8038
  /** @nocollapse */
8027
8039
  AnnouncementsComponent.ctorParameters = function () { return []; };
8028
8040
  AnnouncementsComponent.propDecorators = {
8029
- objectData: [{ type: core.Input }]
8041
+ objectData: [{ type: core.Input }],
8042
+ layoutType: [{ type: core.Input }],
8043
+ openDialog: [{ type: core.Output }]
8030
8044
  };
8031
8045
  return AnnouncementsComponent;
8032
8046
  }());
8033
8047
  if (false) {
8034
8048
  /** @type {?} */
8035
8049
  AnnouncementsComponent.prototype.objectData;
8050
+ /** @type {?} */
8051
+ AnnouncementsComponent.prototype.layoutType;
8052
+ /** @type {?} */
8053
+ AnnouncementsComponent.prototype.openDialog;
8036
8054
  }
8037
8055
 
8038
8056
  /**
@@ -8047,6 +8065,7 @@
8047
8065
  declarations: [AnnouncementsComponent],
8048
8066
  imports: [
8049
8067
  common.CommonModule,
8068
+ material.MatIconModule,
8050
8069
  SkeletonLoaderLibModule
8051
8070
  ],
8052
8071
  exports: [AnnouncementsComponent],
@@ -8241,7 +8260,7 @@
8241
8260
  CardsComponent.decorators = [
8242
8261
  { type: core.Component, args: [{
8243
8262
  selector: 'sb-uic-cards',
8244
- 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",
8263
+ 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",
8245
8264
  styles: [""]
8246
8265
  }] }
8247
8266
  ];
@@ -9308,7 +9327,7 @@
9308
9327
  { type: core.Component, args: [{
9309
9328
  selector: 'sb-uic-card-wide',
9310
9329
  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",
9311
- 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}}"]
9330
+ 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}}"]
9312
9331
  }] }
9313
9332
  ];
9314
9333
  /** @nocollapse */
@@ -9455,8 +9474,8 @@
9455
9474
  CardMDOChannelComponent.decorators = [
9456
9475
  { type: core.Component, args: [{
9457
9476
  selector: 'sb-uic-card-mdo-channel',
9458
- 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>",
9459
- 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}"]
9477
+ 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>",
9478
+ 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}"]
9460
9479
  }] }
9461
9480
  ];
9462
9481
  /** @nocollapse */
@@ -9509,6 +9528,184 @@
9509
9528
  CardMDOChannelComponent.prototype.configSvc;
9510
9529
  }
9511
9530
 
9531
+ /**
9532
+ * @fileoverview added by tsickle
9533
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9534
+ */
9535
+ var CardWideV2Component = /** @class */ (function () {
9536
+ function CardWideV2Component(snackBar, events, translate, langtranslations, configSvc) {
9537
+ var _this = this;
9538
+ this.snackBar = snackBar;
9539
+ this.events = events;
9540
+ this.translate = translate;
9541
+ this.langtranslations = langtranslations;
9542
+ this.configSvc = configSvc;
9543
+ this.isCardLoading = false;
9544
+ this.contentData = new core.EventEmitter();
9545
+ this.isCardFlipped = false;
9546
+ this.showFlip = false;
9547
+ this.widgetType = 'df';
9548
+ this.widgetSubType = 'sdf';
9549
+ this.langtranslations.languageSelectedObservable.subscribe((/**
9550
+ * @return {?}
9551
+ */
9552
+ function () {
9553
+ if (localStorage.getItem('websiteLanguage')) {
9554
+ _this.translate.setDefaultLang('en');
9555
+ /** @type {?} */
9556
+ var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
9557
+ _this.translate.use(lang);
9558
+ }
9559
+ }));
9560
+ }
9561
+ /**
9562
+ * @return {?}
9563
+ */
9564
+ CardWideV2Component.prototype.ngOnInit = /**
9565
+ * @return {?}
9566
+ */
9567
+ function () {
9568
+ /** @type {?} */
9569
+ var instanceConfig = this.configSvc.instanceConfig;
9570
+ if (instanceConfig) {
9571
+ this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
9572
+ this.sourceLogos = instanceConfig.sources;
9573
+ this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
9574
+ }
9575
+ else {
9576
+ this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
9577
+ this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
9578
+ }
9579
+ };
9580
+ /**
9581
+ * @return {?}
9582
+ */
9583
+ CardWideV2Component.prototype.showSnackbar = /**
9584
+ * @return {?}
9585
+ */
9586
+ function () {
9587
+ if (this.showIntranetContent) {
9588
+ this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
9589
+ }
9590
+ else if (!this.isLiveOrMarkForDeletion) {
9591
+ this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
9592
+ }
9593
+ };
9594
+ /**
9595
+ * @param {?} contentData
9596
+ * @return {?}
9597
+ */
9598
+ CardWideV2Component.prototype.getRedirectUrlData = /**
9599
+ * @param {?} contentData
9600
+ * @return {?}
9601
+ */
9602
+ function (contentData) {
9603
+ this.contentData.emit(contentData);
9604
+ };
9605
+ /**
9606
+ * @return {?}
9607
+ */
9608
+ CardWideV2Component.prototype.raiseTelemetry = /**
9609
+ * @return {?}
9610
+ */
9611
+ function () {
9612
+ // if(this.forPreview){
9613
+ // return
9614
+ // }
9615
+ this.events.raiseInteractTelemetry({
9616
+ type: 'click',
9617
+ subType: this.widgetType + "-" + this.widgetSubType,
9618
+ id: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
9619
+ }, {
9620
+ id: this.widgetData.content.identifier,
9621
+ type: this.widgetData.content.primaryCategory,
9622
+ //context: this.widgetData.context,
9623
+ rollup: {},
9624
+ ver: "" + this.widgetData.content.version + '',
9625
+ }, {
9626
+ pageIdExt: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
9627
+ module: lodash.camelCase(this.widgetData.content.primaryCategory),
9628
+ });
9629
+ };
9630
+ CardWideV2Component.decorators = [
9631
+ { type: core.Component, args: [{
9632
+ selector: 'sb-uic-card-wide-v2',
9633
+ 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",
9634
+ 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}}"]
9635
+ }] }
9636
+ ];
9637
+ /** @nocollapse */
9638
+ CardWideV2Component.ctorParameters = function () { return [
9639
+ { type: material.MatSnackBar },
9640
+ { type: utilsV2.EventService },
9641
+ { type: core$1.TranslateService },
9642
+ { type: MultilingualTranslationsService },
9643
+ { type: utilsV2.ConfigurationsService }
9644
+ ]; };
9645
+ CardWideV2Component.propDecorators = {
9646
+ widgetData: [{ type: core.Input }],
9647
+ isLiveOrMarkForDeletion: [{ type: core.Input }],
9648
+ showIntranetContent: [{ type: core.Input }],
9649
+ isIntranetAllowedSettings: [{ type: core.Input }],
9650
+ isCardLoading: [{ type: core.Input }],
9651
+ contentData: [{ type: core.Output }]
9652
+ };
9653
+ return CardWideV2Component;
9654
+ }());
9655
+ if (false) {
9656
+ /** @type {?} */
9657
+ CardWideV2Component.prototype.widgetData;
9658
+ /** @type {?} */
9659
+ CardWideV2Component.prototype.isLiveOrMarkForDeletion;
9660
+ /** @type {?} */
9661
+ CardWideV2Component.prototype.showIntranetContent;
9662
+ /** @type {?} */
9663
+ CardWideV2Component.prototype.isIntranetAllowedSettings;
9664
+ /** @type {?} */
9665
+ CardWideV2Component.prototype.isCardLoading;
9666
+ /** @type {?} */
9667
+ CardWideV2Component.prototype.contentData;
9668
+ /** @type {?} */
9669
+ CardWideV2Component.prototype.isCardFlipped;
9670
+ /** @type {?} */
9671
+ CardWideV2Component.prototype.defaultThumbnail;
9672
+ /** @type {?} */
9673
+ CardWideV2Component.prototype.sourceLogos;
9674
+ /** @type {?} */
9675
+ CardWideV2Component.prototype.defaultSLogo;
9676
+ /** @type {?} */
9677
+ CardWideV2Component.prototype.showFlip;
9678
+ /** @type {?} */
9679
+ CardWideV2Component.prototype.widgetType;
9680
+ /** @type {?} */
9681
+ CardWideV2Component.prototype.widgetSubType;
9682
+ /**
9683
+ * @type {?}
9684
+ * @private
9685
+ */
9686
+ CardWideV2Component.prototype.snackBar;
9687
+ /**
9688
+ * @type {?}
9689
+ * @private
9690
+ */
9691
+ CardWideV2Component.prototype.events;
9692
+ /**
9693
+ * @type {?}
9694
+ * @private
9695
+ */
9696
+ CardWideV2Component.prototype.translate;
9697
+ /**
9698
+ * @type {?}
9699
+ * @private
9700
+ */
9701
+ CardWideV2Component.prototype.langtranslations;
9702
+ /**
9703
+ * @type {?}
9704
+ * @private
9705
+ */
9706
+ CardWideV2Component.prototype.configSvc;
9707
+ }
9708
+
9512
9709
  /**
9513
9710
  * @fileoverview added by tsickle
9514
9711
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -9524,7 +9721,8 @@
9524
9721
  CardUserComponent,
9525
9722
  CardLandscapeComponent,
9526
9723
  CardWideComponent,
9527
- CardMDOChannelComponent
9724
+ CardMDOChannelComponent,
9725
+ CardWideV2Component
9528
9726
  ],
9529
9727
  imports: [
9530
9728
  common.CommonModule,
@@ -9547,7 +9745,8 @@
9547
9745
  CardLandscapeComponent,
9548
9746
  CardUserComponent,
9549
9747
  CardWideComponent,
9550
- CardMDOChannelComponent
9748
+ CardMDOChannelComponent,
9749
+ CardWideV2Component
9551
9750
  ],
9552
9751
  },] }
9553
9752
  ];
@@ -9639,6 +9838,8 @@
9639
9838
  this.contentSvc = contentSvc;
9640
9839
  this.competencySvc = competencySvc;
9641
9840
  this.router = router;
9841
+ this.cardDisplayCount = 3;
9842
+ this.dynamicAlignPills = 'center';
9642
9843
  this.emptyResponse = new core.EventEmitter();
9643
9844
  this.loadCometency = false;
9644
9845
  this.loadCompetencyArea = false;
@@ -9656,7 +9857,6 @@
9656
9857
  * @return {?}
9657
9858
  */
9658
9859
  function () {
9659
- this.getCompetencyArea();
9660
9860
  this.getAllCompetencies();
9661
9861
  // this.competencyData = this.objectData
9662
9862
  // this.filter(this.currentFilter)
@@ -9841,6 +10041,8 @@
9841
10041
  function (response) {
9842
10042
  _this.allcompetencyTheme = {};
9843
10043
  if (response && response.result && response.result.competency) {
10044
+ _this.originalCompetencyArray = response.result.competency;
10045
+ _this.getCompetencyArea();
9844
10046
  response.result.competency.forEach((/**
9845
10047
  * @param {?} element
9846
10048
  * @return {?}
@@ -9873,7 +10075,8 @@
9873
10075
  */
9874
10076
  function (value, addFilter) {
9875
10077
  return __awaiter(this, void 0, void 0, function () {
9876
- var request, response, error_2;
10078
+ var request, response, competencyThemeData_1, error_2;
10079
+ var _this = this;
9877
10080
  return __generator(this, function (_a) {
9878
10081
  switch (_a.label) {
9879
10082
  case 0:
@@ -9903,7 +10106,28 @@
9903
10106
  response = _a.sent();
9904
10107
  if (response && response.results) {
9905
10108
  if (response.results.result.facets) {
9906
- this.competencyTheme = response.results.result.facets[0].values;
10109
+ competencyThemeData_1 = response.results.result.facets[0].values;
10110
+ this.originalCompetencyArray.forEach((/**
10111
+ * @param {?} element
10112
+ * @return {?}
10113
+ */
10114
+ function (element) {
10115
+ if (element.name.toLowerCase() === value) {
10116
+ _this.competencyTheme = competencyThemeData_1.filter((/**
10117
+ * @param {?} ele1
10118
+ * @return {?}
10119
+ */
10120
+ function (ele1) {
10121
+ return element.children.find((/**
10122
+ * @param {?} ele2
10123
+ * @return {?}
10124
+ */
10125
+ function (ele2) { return ele2.name.toLowerCase() === ele1.name.toLowerCase(); }));
10126
+ }));
10127
+ _this.showAllTheme = [{ name: 'Show all', showAll: false }];
10128
+ _this.competencyThemeLength = 6;
10129
+ }
10130
+ }));
9907
10131
  this.resetViewMore();
9908
10132
  }
9909
10133
  this.loadCometency = false;
@@ -9972,7 +10196,7 @@
9972
10196
  CompetencyPassbookComponent.decorators = [
9973
10197
  { type: core.Component, args: [{
9974
10198
  selector: 'sb-uic-competency-passbook',
9975
- 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>",
10199
+ 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>",
9976
10200
  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}"]
9977
10201
  }] }
9978
10202
  ];
@@ -9986,6 +10210,10 @@
9986
10210
  CompetencyPassbookComponent.propDecorators = {
9987
10211
  objectData: [{ type: core.Input }],
9988
10212
  providerId: [{ type: core.Input }],
10213
+ cardDisplayCount: [{ type: core.Input }],
10214
+ dynamicClass: [{ type: core.Input }],
10215
+ dynamicColor: [{ type: core.Input }],
10216
+ dynamicAlignPills: [{ type: core.Input }],
9989
10217
  emptyResponse: [{ type: core.Output }]
9990
10218
  };
9991
10219
  return CompetencyPassbookComponent;
@@ -9996,12 +10224,22 @@
9996
10224
  /** @type {?} */
9997
10225
  CompetencyPassbookComponent.prototype.providerId;
9998
10226
  /** @type {?} */
10227
+ CompetencyPassbookComponent.prototype.cardDisplayCount;
10228
+ /** @type {?} */
10229
+ CompetencyPassbookComponent.prototype.dynamicClass;
10230
+ /** @type {?} */
10231
+ CompetencyPassbookComponent.prototype.dynamicColor;
10232
+ /** @type {?} */
10233
+ CompetencyPassbookComponent.prototype.dynamicAlignPills;
10234
+ /** @type {?} */
9999
10235
  CompetencyPassbookComponent.prototype.emptyResponse;
10000
10236
  /** @type {?} */
10001
10237
  CompetencyPassbookComponent.prototype.loadCometency;
10002
10238
  /** @type {?} */
10003
10239
  CompetencyPassbookComponent.prototype.loadCompetencyArea;
10004
10240
  /** @type {?} */
10241
+ CompetencyPassbookComponent.prototype.originalCompetencyArray;
10242
+ /** @type {?} */
10005
10243
  CompetencyPassbookComponent.prototype.competencyArea;
10006
10244
  /** @type {?} */
10007
10245
  CompetencyPassbookComponent.prototype.selectedValue;
@@ -10035,6 +10273,9 @@
10035
10273
  function PillsComponent() {
10036
10274
  this.isLoading = false;
10037
10275
  this.pillClick = new core.EventEmitter();
10276
+ this.dynamicClass = '';
10277
+ this.dynamicColor = '';
10278
+ this.requiredTitlecase = true;
10038
10279
  }
10039
10280
  /**
10040
10281
  * @return {?}
@@ -10058,8 +10299,8 @@
10058
10299
  PillsComponent.decorators = [
10059
10300
  { type: core.Component, args: [{
10060
10301
  selector: 'sb-uic-pills',
10061
- 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",
10062
- 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}"]
10302
+ 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",
10303
+ 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}"]
10063
10304
  }] }
10064
10305
  ];
10065
10306
  /** @nocollapse */
@@ -10068,7 +10309,10 @@
10068
10309
  pillsData: [{ type: core.Input }],
10069
10310
  selectedValue: [{ type: core.Input }],
10070
10311
  isLoading: [{ type: core.Input }],
10071
- pillClick: [{ type: core.Output }]
10312
+ pillClick: [{ type: core.Output }],
10313
+ dynamicClass: [{ type: core.Input }],
10314
+ dynamicColor: [{ type: core.Input }],
10315
+ requiredTitlecase: [{ type: core.Input }]
10072
10316
  };
10073
10317
  return PillsComponent;
10074
10318
  }());
@@ -10081,6 +10325,12 @@
10081
10325
  PillsComponent.prototype.isLoading;
10082
10326
  /** @type {?} */
10083
10327
  PillsComponent.prototype.pillClick;
10328
+ /** @type {?} */
10329
+ PillsComponent.prototype.dynamicClass;
10330
+ /** @type {?} */
10331
+ PillsComponent.prototype.dynamicColor;
10332
+ /** @type {?} */
10333
+ PillsComponent.prototype.requiredTitlecase;
10084
10334
  }
10085
10335
 
10086
10336
  /**
@@ -11133,28 +11383,29 @@
11133
11383
  exports.ɵa = ContentStripWithTabsLibComponent;
11134
11384
  exports.ɵb = WidgetContentService;
11135
11385
  exports.ɵba = CardMDOChannelComponent;
11136
- exports.ɵbb = PipePublicURLModule;
11137
- exports.ɵbc = PipePublicURL;
11138
- exports.ɵbd = DisplayContentTypeLibModule;
11139
- exports.ɵbe = DisplayContentTypeLibComponent;
11140
- exports.ɵbf = DefaultThumbnailModule;
11141
- exports.ɵbg = DefaultThumbnailDirective;
11142
- exports.ɵbh = PipeDurationTransformModule;
11143
- exports.ɵbi = PipeDurationTransformPipe;
11144
- exports.ɵbj = CompetencyPassbookComponent;
11145
- exports.ɵbk = CompetencyPassbookService;
11146
- exports.ɵbl = PillsModule;
11147
- exports.ɵbm = PillsComponent;
11148
- exports.ɵbn = UserContentRatingLibComponent;
11149
- exports.ɵbo = ScrollableItemDirective;
11150
- exports.ɵbp = RatingService;
11151
- exports.ɵbq = UserContentRatingLibService;
11152
- exports.ɵbr = AvatarPhotoLibModule;
11153
- exports.ɵbs = AvatarPhotoLibComponent;
11154
- exports.ɵbt = MyHammerConfig$1;
11155
- exports.ɵbu = SlidersNgContentLibModule;
11156
- exports.ɵbv = SlidersNgContentLibComponent;
11157
- exports.ɵbw = ScrollableItemModule;
11386
+ exports.ɵbb = CardWideV2Component;
11387
+ exports.ɵbc = PipePublicURLModule;
11388
+ exports.ɵbd = PipePublicURL;
11389
+ exports.ɵbe = DisplayContentTypeLibModule;
11390
+ exports.ɵbf = DisplayContentTypeLibComponent;
11391
+ exports.ɵbg = DefaultThumbnailModule;
11392
+ exports.ɵbh = DefaultThumbnailDirective;
11393
+ exports.ɵbi = PipeDurationTransformModule;
11394
+ exports.ɵbj = PipeDurationTransformPipe;
11395
+ exports.ɵbk = CompetencyPassbookComponent;
11396
+ exports.ɵbl = CompetencyPassbookService;
11397
+ exports.ɵbm = PillsModule;
11398
+ exports.ɵbn = PillsComponent;
11399
+ exports.ɵbo = UserContentRatingLibComponent;
11400
+ exports.ɵbp = ScrollableItemDirective;
11401
+ exports.ɵbq = RatingService;
11402
+ exports.ɵbr = UserContentRatingLibService;
11403
+ exports.ɵbs = AvatarPhotoLibModule;
11404
+ exports.ɵbt = AvatarPhotoLibComponent;
11405
+ exports.ɵbu = MyHammerConfig$1;
11406
+ exports.ɵbv = SlidersNgContentLibModule;
11407
+ exports.ɵbw = SlidersNgContentLibComponent;
11408
+ exports.ɵbx = ScrollableItemModule;
11158
11409
  exports.ɵc = WidgetUserService;
11159
11410
  exports.ɵd = MultilingualTranslationsService;
11160
11411
  exports.ɵe = ConfigurationsService;