@sunbird-cb/consumption 0.0.15 → 0.0.17

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 (37) hide show
  1. package/bundles/sunbird-cb-consumption.umd.js +226 -33
  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 +128 -0
  8. package/esm2015/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +23 -0
  9. package/esm2015/lib/_common/cards/cards.module.js +15 -3
  10. package/esm2015/lib/_common/competency-passbook/competency-passbook.component.js +7 -2
  11. package/esm2015/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +3 -3
  12. package/esm2015/lib/_common/data-points/data-points.component.js +3 -3
  13. package/esm2015/lib/_common/pills/pills.component.js +1 -1
  14. package/esm2015/lib/_common/user-content-rating/user-content-rating-lib.component.js +7 -1
  15. package/esm2015/sunbird-cb-consumption.js +24 -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 +131 -0
  19. package/esm5/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +29 -0
  20. package/esm5/lib/_common/cards/cards.module.js +15 -3
  21. package/esm5/lib/_common/competency-passbook/competency-passbook.component.js +7 -2
  22. package/esm5/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +3 -3
  23. package/esm5/lib/_common/data-points/data-points.component.js +3 -3
  24. package/esm5/lib/_common/pills/pills.component.js +1 -1
  25. package/esm5/lib/_common/user-content-rating/user-content-rating-lib.component.js +7 -1
  26. package/esm5/sunbird-cb-consumption.js +24 -22
  27. package/fesm2015/sunbird-cb-consumption.js +196 -14
  28. package/fesm2015/sunbird-cb-consumption.js.map +1 -1
  29. package/fesm5/sunbird-cb-consumption.js +204 -13
  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-mdo-channel/card-mdo-channel.component.d.ts +19 -0
  33. package/lib/_common/cards/card-wide-v2/card-wide-v2.component.d.ts +5 -0
  34. package/lib/_common/competency-passbook/competency-passbook.component.d.ts +1 -0
  35. package/package.json +1 -1
  36. package/sunbird-cb-consumption.d.ts +23 -21
  37. package/sunbird-cb-consumption.metadata.json +1 -1
@@ -5555,7 +5555,7 @@
5555
5555
  // console.log('calling after - response, ', response)
5556
5556
  if (response && response.results) {
5557
5557
  // console.log('calling after-- ')
5558
- if (response.results.result.content) {
5558
+ if (response.results.result.content && response.results.result.content.length) {
5559
5559
  this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
5560
5560
  }
5561
5561
  else {
@@ -5611,7 +5611,7 @@
5611
5611
  // console.log('calling after - response, ', response)
5612
5612
  if (response && response.results) {
5613
5613
  // console.log('calling after-- ')
5614
- if (response.results.result.content) {
5614
+ if (response.results.result.content && response.results.result.content.length) {
5615
5615
  this.processStrip(strip, this.transformContentsToWidgets(response.results.result.content, strip), 'done', calculateParentStatus, response.viewMoreUrl);
5616
5616
  }
5617
5617
  else {
@@ -6542,8 +6542,8 @@
6542
6542
  DataPointsComponent.decorators = [
6543
6543
  { type: core.Component, args: [{
6544
6544
  selector: 'sb-uic-data-points',
6545
- template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak }\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow'\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
6546
- styles: [".white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}"]
6545
+ template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak && !last}\">\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <img class=\"objIcon\" [src]=\"obj.icon\" [style.color]=\"obj?.iconColor\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow'\">\n <div class=\"flex gap-4\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"melement-div {{obj?.background}} flex-item\" [style.background]=\"obj?.background\" >\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"mobjIcon\" [src]=\"obj.icon\">\n </div>\n <div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n <div class=\"top-container\">\n <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n <div *ngFor=\"let item of chunk\">\n <div class=\"flex-item\">\n <div class=\"flex flex-row gap-5 infra-element-div\">\n <div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"!(item && item.value)\">0</div>\n <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\" *ngIf=\"(item && item.value)\">\n {{item?.value | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleFlexeRow'\">\n <div class=\"flex\">\n <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n <div class=\"singleFlexeRow-div flex-item\">\n <div class=\"flex flex-row gap-3\">\n <div>\n <img [style.color]=\"obj?.iconColor\" class=\"singleFlexeRowIcon\" [src]=\"obj.icon\">\n </div>\n <div class=\"flex flex-col\">\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"!(obj && obj.value)\">0</div>\n <div [style.color]=\"obj?.valueColor\" class=\"singleFlexeRowHeader pb-2\" *ngIf=\"(obj && obj.value)\">\n {{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n </div>\n <div [style.color]=\"obj?.labelColor\" class=\"singleFlexeRowDescription\">{{obj?.label}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<!-- skeleton loaders -->\n\n<ng-container>\n <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n <div class=\"element-div linebreak\" >\n <div class=\"flex flex-row gap-3 items-top\">\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n [height]=\"'32px'\"></sb-uic-skeleton-loader>\n </div>\n <div>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n [height]=\"'24px'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n",
6546
+ styles: [".white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.singleFlexeRow-div{padding:16px;border-radius:15px}.singleFlexeRowHeader{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:left}.singleFlexeRowDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.singleFlexeRowIcon{width:24px;height:24px}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}"]
6547
6547
  }] }
6548
6548
  ];
6549
6549
  /** @nocollapse */
@@ -7994,6 +7994,7 @@
7994
7994
  */
7995
7995
  var AnnouncementsComponent = /** @class */ (function () {
7996
7996
  function AnnouncementsComponent() {
7997
+ this.openDialog = new core.EventEmitter();
7997
7998
  }
7998
7999
  /**
7999
8000
  * @return {?}
@@ -8016,23 +8017,38 @@
8016
8017
  item.expanded = !item.expanded;
8017
8018
  }
8018
8019
  };
8020
+ /**
8021
+ * @return {?}
8022
+ */
8023
+ AnnouncementsComponent.prototype.openAnnouncements = /**
8024
+ * @return {?}
8025
+ */
8026
+ function () {
8027
+ this.openDialog.emit(true);
8028
+ };
8019
8029
  AnnouncementsComponent.decorators = [
8020
8030
  { type: core.Component, args: [{
8021
8031
  selector: 'sb-uic-announcements',
8022
- template: "<p>announcements works!</p>\n<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}}"]
8032
+ 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>",
8033
+ 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
8034
  }] }
8025
8035
  ];
8026
8036
  /** @nocollapse */
8027
8037
  AnnouncementsComponent.ctorParameters = function () { return []; };
8028
8038
  AnnouncementsComponent.propDecorators = {
8029
- objectData: [{ type: core.Input }]
8039
+ objectData: [{ type: core.Input }],
8040
+ layoutType: [{ type: core.Input }],
8041
+ openDialog: [{ type: core.Output }]
8030
8042
  };
8031
8043
  return AnnouncementsComponent;
8032
8044
  }());
8033
8045
  if (false) {
8034
8046
  /** @type {?} */
8035
8047
  AnnouncementsComponent.prototype.objectData;
8048
+ /** @type {?} */
8049
+ AnnouncementsComponent.prototype.layoutType;
8050
+ /** @type {?} */
8051
+ AnnouncementsComponent.prototype.openDialog;
8036
8052
  }
8037
8053
 
8038
8054
  /**
@@ -8047,6 +8063,7 @@
8047
8063
  declarations: [AnnouncementsComponent],
8048
8064
  imports: [
8049
8065
  common.CommonModule,
8066
+ material.MatIconModule,
8050
8067
  SkeletonLoaderLibModule
8051
8068
  ],
8052
8069
  exports: [AnnouncementsComponent],
@@ -9383,6 +9400,159 @@
9383
9400
  CardWideComponent.prototype.configSvc;
9384
9401
  }
9385
9402
 
9403
+ /**
9404
+ * @fileoverview added by tsickle
9405
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9406
+ */
9407
+ var CardMDOChannelComponent = /** @class */ (function () {
9408
+ function CardMDOChannelComponent(events, translate, langtranslations, configSvc) {
9409
+ var _this = this;
9410
+ this.events = events;
9411
+ this.translate = translate;
9412
+ this.langtranslations = langtranslations;
9413
+ this.configSvc = configSvc;
9414
+ this.userData = new core.EventEmitter();
9415
+ this.widgetType = '';
9416
+ this.widgetSubType = '';
9417
+ this.langtranslations.languageSelectedObservable.subscribe((/**
9418
+ * @return {?}
9419
+ */
9420
+ function () {
9421
+ if (localStorage.getItem('websiteLanguage')) {
9422
+ _this.translate.setDefaultLang('en');
9423
+ /** @type {?} */
9424
+ var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
9425
+ _this.translate.use(lang);
9426
+ }
9427
+ }));
9428
+ }
9429
+ /**
9430
+ * @return {?}
9431
+ */
9432
+ CardMDOChannelComponent.prototype.ngOnInit = /**
9433
+ * @return {?}
9434
+ */
9435
+ function () {
9436
+ /** @type {?} */
9437
+ var instanceConfig = this.configSvc.instanceConfig;
9438
+ if (instanceConfig) {
9439
+ this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
9440
+ this.sourceLogos = instanceConfig.sources;
9441
+ this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
9442
+ }
9443
+ else {
9444
+ this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
9445
+ this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
9446
+ }
9447
+ };
9448
+ /**
9449
+ * @return {?}
9450
+ */
9451
+ CardMDOChannelComponent.prototype.raiseTelemetry = /**
9452
+ * @return {?}
9453
+ */
9454
+ function () {
9455
+ // if(this.forPreview){
9456
+ // return
9457
+ // }
9458
+ this.events.raiseInteractTelemetry({
9459
+ type: 'click',
9460
+ subType: this.widgetType + "-" + this.widgetSubType,
9461
+ id: lodash.camelCase(this.widgetData.content.userId) + "-card",
9462
+ }, {
9463
+ id: this.widgetData.content.userId,
9464
+ // type: this.widgetData.user.primaryCategory,
9465
+ //context: this.widgetData.context,
9466
+ rollup: {},
9467
+ }, {
9468
+ pageIdExt: lodash.camelCase('user') + "-card",
9469
+ module: lodash.camelCase('user'),
9470
+ });
9471
+ };
9472
+ CardMDOChannelComponent.decorators = [
9473
+ { type: core.Component, args: [{
9474
+ selector: 'sb-uic-card-mdo-channel',
9475
+ 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>",
9476
+ 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}"]
9477
+ }] }
9478
+ ];
9479
+ /** @nocollapse */
9480
+ CardMDOChannelComponent.ctorParameters = function () { return [
9481
+ { type: utilsV2.EventService },
9482
+ { type: core$1.TranslateService },
9483
+ { type: utilsV2.MultilingualTranslationsService },
9484
+ { type: utilsV2.ConfigurationsService }
9485
+ ]; };
9486
+ CardMDOChannelComponent.propDecorators = {
9487
+ widgetData: [{ type: core.Input }],
9488
+ userData: [{ type: core.Output }]
9489
+ };
9490
+ return CardMDOChannelComponent;
9491
+ }());
9492
+ if (false) {
9493
+ /** @type {?} */
9494
+ CardMDOChannelComponent.prototype.widgetData;
9495
+ /** @type {?} */
9496
+ CardMDOChannelComponent.prototype.userData;
9497
+ /** @type {?} */
9498
+ CardMDOChannelComponent.prototype.defaultThumbnail;
9499
+ /** @type {?} */
9500
+ CardMDOChannelComponent.prototype.sourceLogos;
9501
+ /** @type {?} */
9502
+ CardMDOChannelComponent.prototype.defaultSLogo;
9503
+ /** @type {?} */
9504
+ CardMDOChannelComponent.prototype.widgetType;
9505
+ /** @type {?} */
9506
+ CardMDOChannelComponent.prototype.widgetSubType;
9507
+ /**
9508
+ * @type {?}
9509
+ * @private
9510
+ */
9511
+ CardMDOChannelComponent.prototype.events;
9512
+ /**
9513
+ * @type {?}
9514
+ * @private
9515
+ */
9516
+ CardMDOChannelComponent.prototype.translate;
9517
+ /**
9518
+ * @type {?}
9519
+ * @private
9520
+ */
9521
+ CardMDOChannelComponent.prototype.langtranslations;
9522
+ /**
9523
+ * @type {?}
9524
+ * @private
9525
+ */
9526
+ CardMDOChannelComponent.prototype.configSvc;
9527
+ }
9528
+
9529
+ /**
9530
+ * @fileoverview added by tsickle
9531
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9532
+ */
9533
+ var CardWideV2Component = /** @class */ (function () {
9534
+ function CardWideV2Component() {
9535
+ }
9536
+ /**
9537
+ * @return {?}
9538
+ */
9539
+ CardWideV2Component.prototype.ngOnInit = /**
9540
+ * @return {?}
9541
+ */
9542
+ function () {
9543
+ };
9544
+ CardWideV2Component.decorators = [
9545
+ { type: core.Component, args: [{
9546
+ selector: 'sb-uic-card-wide-v2',
9547
+ template: "<p>card-wide-v2 works!</p>\n",
9548
+ styles: [""]
9549
+ }] }
9550
+ ];
9551
+ /** @nocollapse */
9552
+ CardWideV2Component.ctorParameters = function () { return []; };
9553
+ return CardWideV2Component;
9554
+ }());
9555
+
9386
9556
  /**
9387
9557
  * @fileoverview added by tsickle
9388
9558
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -9392,7 +9562,15 @@
9392
9562
  }
9393
9563
  CardsModule.decorators = [
9394
9564
  { type: core.NgModule, args: [{
9395
- declarations: [CardResourceComponent, CardsComponent, CardPortraitComponent, CardUserComponent, CardLandscapeComponent, CardWideComponent],
9565
+ declarations: [
9566
+ CardResourceComponent,
9567
+ CardsComponent, CardPortraitComponent,
9568
+ CardUserComponent,
9569
+ CardLandscapeComponent,
9570
+ CardWideComponent,
9571
+ CardMDOChannelComponent,
9572
+ CardWideV2Component
9573
+ ],
9396
9574
  imports: [
9397
9575
  common.CommonModule,
9398
9576
  material.MatCardModule,
@@ -9413,7 +9591,9 @@
9413
9591
  CardPortraitComponent,
9414
9592
  CardLandscapeComponent,
9415
9593
  CardUserComponent,
9416
- CardWideComponent
9594
+ CardWideComponent,
9595
+ CardMDOChannelComponent,
9596
+ CardWideV2Component
9417
9597
  ],
9418
9598
  },] }
9419
9599
  ];
@@ -9505,6 +9685,7 @@
9505
9685
  this.contentSvc = contentSvc;
9506
9686
  this.competencySvc = competencySvc;
9507
9687
  this.router = router;
9688
+ this.cardDisplayCount = 3;
9508
9689
  this.emptyResponse = new core.EventEmitter();
9509
9690
  this.loadCometency = false;
9510
9691
  this.loadCompetencyArea = false;
@@ -9820,6 +10001,7 @@
9820
10001
  * @return {?}
9821
10002
  */
9822
10003
  function (event) {
10004
+ debugger;
9823
10005
  this.showAllTheme[0]['showAll'] = !event.showAll;
9824
10006
  this.competencyThemeLength = event.showAll ? this.competencyTheme.length : 6;
9825
10007
  this.showAllTheme[0]['name'] = event.showAll ? 'Show less' : 'Show all';
@@ -9838,7 +10020,7 @@
9838
10020
  CompetencyPassbookComponent.decorators = [
9839
10021
  { type: core.Component, args: [{
9840
10022
  selector: 'sb-uic-competency-passbook',
9841
- 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>",
10023
+ 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-{{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\" (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>",
9842
10024
  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}"]
9843
10025
  }] }
9844
10026
  ];
@@ -9852,6 +10034,7 @@
9852
10034
  CompetencyPassbookComponent.propDecorators = {
9853
10035
  objectData: [{ type: core.Input }],
9854
10036
  providerId: [{ type: core.Input }],
10037
+ cardDisplayCount: [{ type: core.Input }],
9855
10038
  emptyResponse: [{ type: core.Output }]
9856
10039
  };
9857
10040
  return CompetencyPassbookComponent;
@@ -9862,6 +10045,8 @@
9862
10045
  /** @type {?} */
9863
10046
  CompetencyPassbookComponent.prototype.providerId;
9864
10047
  /** @type {?} */
10048
+ CompetencyPassbookComponent.prototype.cardDisplayCount;
10049
+ /** @type {?} */
9865
10050
  CompetencyPassbookComponent.prototype.emptyResponse;
9866
10051
  /** @type {?} */
9867
10052
  CompetencyPassbookComponent.prototype.loadCometency;
@@ -9925,7 +10110,7 @@
9925
10110
  { type: core.Component, args: [{
9926
10111
  selector: 'sb-uic-pills',
9927
10112
  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",
9928
- styles: [".competency-chip{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}"]
10113
+ 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}"]
9929
10114
  }] }
9930
10115
  ];
9931
10116
  /** @nocollapse */
@@ -10346,6 +10531,12 @@
10346
10531
  else {
10347
10532
  _this.emptyResponse.emit(true);
10348
10533
  }
10534
+ }), (/**
10535
+ * @param {?} _error
10536
+ * @return {?}
10537
+ */
10538
+ function (_error) {
10539
+ _this.emptyResponse.emit(true);
10349
10540
  }));
10350
10541
  };
10351
10542
  /**
@@ -10992,28 +11183,30 @@
10992
11183
  exports.WIDGET_REGISTRATION_LIB_CONFIG = WIDGET_REGISTRATION_LIB_CONFIG;
10993
11184
  exports.ɵa = ContentStripWithTabsLibComponent;
10994
11185
  exports.ɵb = WidgetContentService;
10995
- exports.ɵba = PipePublicURLModule;
10996
- exports.ɵbb = PipePublicURL;
10997
- exports.ɵbc = DisplayContentTypeLibModule;
10998
- exports.ɵbd = DisplayContentTypeLibComponent;
10999
- exports.ɵbe = DefaultThumbnailModule;
11000
- exports.ɵbf = DefaultThumbnailDirective;
11001
- exports.ɵbg = PipeDurationTransformModule;
11002
- exports.ɵbh = PipeDurationTransformPipe;
11003
- exports.ɵbi = CompetencyPassbookComponent;
11004
- exports.ɵbj = CompetencyPassbookService;
11005
- exports.ɵbk = PillsModule;
11006
- exports.ɵbl = PillsComponent;
11007
- exports.ɵbm = UserContentRatingLibComponent;
11008
- exports.ɵbn = ScrollableItemDirective;
11009
- exports.ɵbo = RatingService;
11010
- exports.ɵbp = UserContentRatingLibService;
11011
- exports.ɵbq = AvatarPhotoLibModule;
11012
- exports.ɵbr = AvatarPhotoLibComponent;
11013
- exports.ɵbs = MyHammerConfig$1;
11014
- exports.ɵbt = SlidersNgContentLibModule;
11015
- exports.ɵbu = SlidersNgContentLibComponent;
11016
- exports.ɵbv = ScrollableItemModule;
11186
+ exports.ɵba = CardMDOChannelComponent;
11187
+ exports.ɵbb = CardWideV2Component;
11188
+ exports.ɵbc = PipePublicURLModule;
11189
+ exports.ɵbd = PipePublicURL;
11190
+ exports.ɵbe = DisplayContentTypeLibModule;
11191
+ exports.ɵbf = DisplayContentTypeLibComponent;
11192
+ exports.ɵbg = DefaultThumbnailModule;
11193
+ exports.ɵbh = DefaultThumbnailDirective;
11194
+ exports.ɵbi = PipeDurationTransformModule;
11195
+ exports.ɵbj = PipeDurationTransformPipe;
11196
+ exports.ɵbk = CompetencyPassbookComponent;
11197
+ exports.ɵbl = CompetencyPassbookService;
11198
+ exports.ɵbm = PillsModule;
11199
+ exports.ɵbn = PillsComponent;
11200
+ exports.ɵbo = UserContentRatingLibComponent;
11201
+ exports.ɵbp = ScrollableItemDirective;
11202
+ exports.ɵbq = RatingService;
11203
+ exports.ɵbr = UserContentRatingLibService;
11204
+ exports.ɵbs = AvatarPhotoLibModule;
11205
+ exports.ɵbt = AvatarPhotoLibComponent;
11206
+ exports.ɵbu = MyHammerConfig$1;
11207
+ exports.ɵbv = SlidersNgContentLibModule;
11208
+ exports.ɵbw = SlidersNgContentLibComponent;
11209
+ exports.ɵbx = ScrollableItemModule;
11017
11210
  exports.ɵc = WidgetUserService;
11018
11211
  exports.ɵd = MultilingualTranslationsService;
11019
11212
  exports.ɵe = ConfigurationsService;