@sunbird-cb/consumption 0.0.17 → 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 (26) hide show
  1. package/bundles/sunbird-cb-consumption.umd.js +213 -14
  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/cards/card-wide/card-wide.component.js +1 -1
  6. package/esm2015/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +160 -6
  7. package/esm2015/lib/_common/cards/cards.component.js +2 -2
  8. package/esm2015/lib/_common/competency-passbook/competency-passbook.component.js +39 -5
  9. package/esm2015/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +3 -1
  10. package/esm2015/lib/_common/pills/pills.component.js +16 -4
  11. package/esm5/lib/_common/cards/card-wide/card-wide.component.js +1 -1
  12. package/esm5/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +163 -6
  13. package/esm5/lib/_common/cards/cards.component.js +2 -2
  14. package/esm5/lib/_common/competency-passbook/competency-passbook.component.js +40 -6
  15. package/esm5/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +3 -1
  16. package/esm5/lib/_common/pills/pills.component.js +16 -4
  17. package/fesm2015/sunbird-cb-consumption.js +209 -13
  18. package/fesm2015/sunbird-cb-consumption.js.map +1 -1
  19. package/fesm5/sunbird-cb-consumption.js +213 -14
  20. package/fesm5/sunbird-cb-consumption.js.map +1 -1
  21. package/lib/_common/cards/card-wide-v2/card-wide-v2.component.d.ts +28 -2
  22. package/lib/_common/competency-passbook/competency-passbook.component.d.ts +4 -0
  23. package/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.d.ts +1 -0
  24. package/lib/_common/pills/pills.component.d.ts +3 -0
  25. package/package.json +1 -1
  26. 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);
@@ -8258,7 +8260,7 @@
8258
8260
  CardsComponent.decorators = [
8259
8261
  { type: core.Component, args: [{
8260
8262
  selector: 'sb-uic-cards',
8261
- 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",
8262
8264
  styles: [""]
8263
8265
  }] }
8264
8266
  ];
@@ -9325,7 +9327,7 @@
9325
9327
  { type: core.Component, args: [{
9326
9328
  selector: 'sb-uic-card-wide',
9327
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",
9328
- 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}}"]
9329
9331
  }] }
9330
9332
  ];
9331
9333
  /** @nocollapse */
@@ -9531,7 +9533,30 @@
9531
9533
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9532
9534
  */
9533
9535
  var CardWideV2Component = /** @class */ (function () {
9534
- function CardWideV2Component() {
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
+ }));
9535
9560
  }
9536
9561
  /**
9537
9562
  * @return {?}
@@ -9540,18 +9565,146 @@
9540
9565
  * @return {?}
9541
9566
  */
9542
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
+ });
9543
9629
  };
9544
9630
  CardWideV2Component.decorators = [
9545
9631
  { type: core.Component, args: [{
9546
9632
  selector: 'sb-uic-card-wide-v2',
9547
- template: "<p>card-wide-v2 works!</p>\n",
9548
- styles: [""]
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}}"]
9549
9635
  }] }
9550
9636
  ];
9551
9637
  /** @nocollapse */
9552
- CardWideV2Component.ctorParameters = function () { return []; };
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
+ };
9553
9653
  return CardWideV2Component;
9554
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
+ }
9555
9708
 
9556
9709
  /**
9557
9710
  * @fileoverview added by tsickle
@@ -9686,6 +9839,7 @@
9686
9839
  this.competencySvc = competencySvc;
9687
9840
  this.router = router;
9688
9841
  this.cardDisplayCount = 3;
9842
+ this.dynamicAlignPills = 'center';
9689
9843
  this.emptyResponse = new core.EventEmitter();
9690
9844
  this.loadCometency = false;
9691
9845
  this.loadCompetencyArea = false;
@@ -9703,7 +9857,6 @@
9703
9857
  * @return {?}
9704
9858
  */
9705
9859
  function () {
9706
- this.getCompetencyArea();
9707
9860
  this.getAllCompetencies();
9708
9861
  // this.competencyData = this.objectData
9709
9862
  // this.filter(this.currentFilter)
@@ -9888,6 +10041,8 @@
9888
10041
  function (response) {
9889
10042
  _this.allcompetencyTheme = {};
9890
10043
  if (response && response.result && response.result.competency) {
10044
+ _this.originalCompetencyArray = response.result.competency;
10045
+ _this.getCompetencyArea();
9891
10046
  response.result.competency.forEach((/**
9892
10047
  * @param {?} element
9893
10048
  * @return {?}
@@ -9920,7 +10075,8 @@
9920
10075
  */
9921
10076
  function (value, addFilter) {
9922
10077
  return __awaiter(this, void 0, void 0, function () {
9923
- var request, response, error_2;
10078
+ var request, response, competencyThemeData_1, error_2;
10079
+ var _this = this;
9924
10080
  return __generator(this, function (_a) {
9925
10081
  switch (_a.label) {
9926
10082
  case 0:
@@ -9950,7 +10106,28 @@
9950
10106
  response = _a.sent();
9951
10107
  if (response && response.results) {
9952
10108
  if (response.results.result.facets) {
9953
- 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
+ }));
9954
10131
  this.resetViewMore();
9955
10132
  }
9956
10133
  this.loadCometency = false;
@@ -10001,7 +10178,6 @@
10001
10178
  * @return {?}
10002
10179
  */
10003
10180
  function (event) {
10004
- debugger;
10005
10181
  this.showAllTheme[0]['showAll'] = !event.showAll;
10006
10182
  this.competencyThemeLength = event.showAll ? this.competencyTheme.length : 6;
10007
10183
  this.showAllTheme[0]['name'] = event.showAll ? 'Show less' : 'Show all';
@@ -10020,7 +10196,7 @@
10020
10196
  CompetencyPassbookComponent.decorators = [
10021
10197
  { type: core.Component, args: [{
10022
10198
  selector: 'sb-uic-competency-passbook',
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>",
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>",
10024
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}"]
10025
10201
  }] }
10026
10202
  ];
@@ -10035,6 +10211,9 @@
10035
10211
  objectData: [{ type: core.Input }],
10036
10212
  providerId: [{ type: core.Input }],
10037
10213
  cardDisplayCount: [{ type: core.Input }],
10214
+ dynamicClass: [{ type: core.Input }],
10215
+ dynamicColor: [{ type: core.Input }],
10216
+ dynamicAlignPills: [{ type: core.Input }],
10038
10217
  emptyResponse: [{ type: core.Output }]
10039
10218
  };
10040
10219
  return CompetencyPassbookComponent;
@@ -10047,12 +10226,20 @@
10047
10226
  /** @type {?} */
10048
10227
  CompetencyPassbookComponent.prototype.cardDisplayCount;
10049
10228
  /** @type {?} */
10229
+ CompetencyPassbookComponent.prototype.dynamicClass;
10230
+ /** @type {?} */
10231
+ CompetencyPassbookComponent.prototype.dynamicColor;
10232
+ /** @type {?} */
10233
+ CompetencyPassbookComponent.prototype.dynamicAlignPills;
10234
+ /** @type {?} */
10050
10235
  CompetencyPassbookComponent.prototype.emptyResponse;
10051
10236
  /** @type {?} */
10052
10237
  CompetencyPassbookComponent.prototype.loadCometency;
10053
10238
  /** @type {?} */
10054
10239
  CompetencyPassbookComponent.prototype.loadCompetencyArea;
10055
10240
  /** @type {?} */
10241
+ CompetencyPassbookComponent.prototype.originalCompetencyArray;
10242
+ /** @type {?} */
10056
10243
  CompetencyPassbookComponent.prototype.competencyArea;
10057
10244
  /** @type {?} */
10058
10245
  CompetencyPassbookComponent.prototype.selectedValue;
@@ -10086,6 +10273,9 @@
10086
10273
  function PillsComponent() {
10087
10274
  this.isLoading = false;
10088
10275
  this.pillClick = new core.EventEmitter();
10276
+ this.dynamicClass = '';
10277
+ this.dynamicColor = '';
10278
+ this.requiredTitlecase = true;
10089
10279
  }
10090
10280
  /**
10091
10281
  * @return {?}
@@ -10109,8 +10299,8 @@
10109
10299
  PillsComponent.decorators = [
10110
10300
  { type: core.Component, args: [{
10111
10301
  selector: 'sb-uic-pills',
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",
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}"]
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}"]
10114
10304
  }] }
10115
10305
  ];
10116
10306
  /** @nocollapse */
@@ -10119,7 +10309,10 @@
10119
10309
  pillsData: [{ type: core.Input }],
10120
10310
  selectedValue: [{ type: core.Input }],
10121
10311
  isLoading: [{ type: core.Input }],
10122
- pillClick: [{ type: core.Output }]
10312
+ pillClick: [{ type: core.Output }],
10313
+ dynamicClass: [{ type: core.Input }],
10314
+ dynamicColor: [{ type: core.Input }],
10315
+ requiredTitlecase: [{ type: core.Input }]
10123
10316
  };
10124
10317
  return PillsComponent;
10125
10318
  }());
@@ -10132,6 +10325,12 @@
10132
10325
  PillsComponent.prototype.isLoading;
10133
10326
  /** @type {?} */
10134
10327
  PillsComponent.prototype.pillClick;
10328
+ /** @type {?} */
10329
+ PillsComponent.prototype.dynamicClass;
10330
+ /** @type {?} */
10331
+ PillsComponent.prototype.dynamicColor;
10332
+ /** @type {?} */
10333
+ PillsComponent.prototype.requiredTitlecase;
10135
10334
  }
10136
10335
 
10137
10336
  /**