@sunbird-cb/consumption 0.0.16 → 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 (28) hide show
  1. package/bundles/sunbird-cb-consumption.umd.js +82 -30
  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-v2/card-wide-v2.component.js +23 -0
  9. package/esm2015/lib/_common/cards/cards.module.js +6 -3
  10. package/esm2015/lib/_common/competency-passbook/competency-passbook.component.js +7 -2
  11. package/esm2015/sunbird-cb-consumption.js +23 -22
  12. package/esm5/lib/_common/announcements/announcements.component.js +21 -5
  13. package/esm5/lib/_common/announcements/announcements.module.js +3 -1
  14. package/esm5/lib/_common/cards/card-mdo-channel/card-mdo-channel.component.js +3 -3
  15. package/esm5/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +29 -0
  16. package/esm5/lib/_common/cards/cards.module.js +6 -3
  17. package/esm5/lib/_common/competency-passbook/competency-passbook.component.js +7 -2
  18. package/esm5/sunbird-cb-consumption.js +23 -22
  19. package/fesm2015/sunbird-cb-consumption.js +54 -10
  20. package/fesm2015/sunbird-cb-consumption.js.map +1 -1
  21. package/fesm5/sunbird-cb-consumption.js +60 -9
  22. package/fesm5/sunbird-cb-consumption.js.map +1 -1
  23. package/lib/_common/announcements/announcements.component.d.ts +4 -1
  24. package/lib/_common/cards/card-wide-v2/card-wide-v2.component.d.ts +5 -0
  25. package/lib/_common/competency-passbook/competency-passbook.component.d.ts +1 -0
  26. package/package.json +1 -1
  27. package/sunbird-cb-consumption.d.ts +22 -21
  28. package/sunbird-cb-consumption.metadata.json +1 -1
@@ -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: "<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],
@@ -9455,8 +9472,8 @@
9455
9472
  CardMDOChannelComponent.decorators = [
9456
9473
  { type: core.Component, args: [{
9457
9474
  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}"]
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}"]
9460
9477
  }] }
9461
9478
  ];
9462
9479
  /** @nocollapse */
@@ -9509,6 +9526,33 @@
9509
9526
  CardMDOChannelComponent.prototype.configSvc;
9510
9527
  }
9511
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
+
9512
9556
  /**
9513
9557
  * @fileoverview added by tsickle
9514
9558
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -9524,7 +9568,8 @@
9524
9568
  CardUserComponent,
9525
9569
  CardLandscapeComponent,
9526
9570
  CardWideComponent,
9527
- CardMDOChannelComponent
9571
+ CardMDOChannelComponent,
9572
+ CardWideV2Component
9528
9573
  ],
9529
9574
  imports: [
9530
9575
  common.CommonModule,
@@ -9547,7 +9592,8 @@
9547
9592
  CardLandscapeComponent,
9548
9593
  CardUserComponent,
9549
9594
  CardWideComponent,
9550
- CardMDOChannelComponent
9595
+ CardMDOChannelComponent,
9596
+ CardWideV2Component
9551
9597
  ],
9552
9598
  },] }
9553
9599
  ];
@@ -9639,6 +9685,7 @@
9639
9685
  this.contentSvc = contentSvc;
9640
9686
  this.competencySvc = competencySvc;
9641
9687
  this.router = router;
9688
+ this.cardDisplayCount = 3;
9642
9689
  this.emptyResponse = new core.EventEmitter();
9643
9690
  this.loadCometency = false;
9644
9691
  this.loadCompetencyArea = false;
@@ -9954,6 +10001,7 @@
9954
10001
  * @return {?}
9955
10002
  */
9956
10003
  function (event) {
10004
+ debugger;
9957
10005
  this.showAllTheme[0]['showAll'] = !event.showAll;
9958
10006
  this.competencyThemeLength = event.showAll ? this.competencyTheme.length : 6;
9959
10007
  this.showAllTheme[0]['name'] = event.showAll ? 'Show less' : 'Show all';
@@ -9972,7 +10020,7 @@
9972
10020
  CompetencyPassbookComponent.decorators = [
9973
10021
  { type: core.Component, args: [{
9974
10022
  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>",
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>",
9976
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}"]
9977
10025
  }] }
9978
10026
  ];
@@ -9986,6 +10034,7 @@
9986
10034
  CompetencyPassbookComponent.propDecorators = {
9987
10035
  objectData: [{ type: core.Input }],
9988
10036
  providerId: [{ type: core.Input }],
10037
+ cardDisplayCount: [{ type: core.Input }],
9989
10038
  emptyResponse: [{ type: core.Output }]
9990
10039
  };
9991
10040
  return CompetencyPassbookComponent;
@@ -9996,6 +10045,8 @@
9996
10045
  /** @type {?} */
9997
10046
  CompetencyPassbookComponent.prototype.providerId;
9998
10047
  /** @type {?} */
10048
+ CompetencyPassbookComponent.prototype.cardDisplayCount;
10049
+ /** @type {?} */
9999
10050
  CompetencyPassbookComponent.prototype.emptyResponse;
10000
10051
  /** @type {?} */
10001
10052
  CompetencyPassbookComponent.prototype.loadCometency;
@@ -11133,28 +11184,29 @@
11133
11184
  exports.ɵa = ContentStripWithTabsLibComponent;
11134
11185
  exports.ɵb = WidgetContentService;
11135
11186
  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;
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;
11158
11210
  exports.ɵc = WidgetUserService;
11159
11211
  exports.ɵd = MultilingualTranslationsService;
11160
11212
  exports.ɵe = ConfigurationsService;