@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
@@ -3619,6 +3619,8 @@ if (false) {
3619
3619
  IStripUnitContentData.prototype.secondaryHeading;
3620
3620
  /** @type {?} */
3621
3621
  IStripUnitContentData.prototype.viewMoreUrl;
3622
+ /** @type {?|undefined} */
3623
+ IStripUnitContentData.prototype.request;
3622
3624
  }
3623
3625
  var ContentStripWithTabsLibComponent = /** @class */ (function (_super) {
3624
3626
  __extends(ContentStripWithTabsLibComponent, _super);
@@ -8052,7 +8054,7 @@ var CardsComponent = /** @class */ (function (_super) {
8052
8054
  CardsComponent.decorators = [
8053
8055
  { type: Component, args: [{
8054
8056
  selector: 'sb-uic-cards',
8055
- 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",
8057
+ 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",
8056
8058
  styles: [""]
8057
8059
  }] }
8058
8060
  ];
@@ -9119,7 +9121,7 @@ var CardWideComponent = /** @class */ (function () {
9119
9121
  { type: Component, args: [{
9120
9122
  selector: 'sb-uic-card-wide',
9121
9123
  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",
9122
- 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}}"]
9124
+ 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}}"]
9123
9125
  }] }
9124
9126
  ];
9125
9127
  /** @nocollapse */
@@ -9325,7 +9327,30 @@ if (false) {
9325
9327
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9326
9328
  */
9327
9329
  var CardWideV2Component = /** @class */ (function () {
9328
- function CardWideV2Component() {
9330
+ function CardWideV2Component(snackBar, events, translate, langtranslations, configSvc) {
9331
+ var _this = this;
9332
+ this.snackBar = snackBar;
9333
+ this.events = events;
9334
+ this.translate = translate;
9335
+ this.langtranslations = langtranslations;
9336
+ this.configSvc = configSvc;
9337
+ this.isCardLoading = false;
9338
+ this.contentData = new EventEmitter();
9339
+ this.isCardFlipped = false;
9340
+ this.showFlip = false;
9341
+ this.widgetType = 'df';
9342
+ this.widgetSubType = 'sdf';
9343
+ this.langtranslations.languageSelectedObservable.subscribe((/**
9344
+ * @return {?}
9345
+ */
9346
+ function () {
9347
+ if (localStorage.getItem('websiteLanguage')) {
9348
+ _this.translate.setDefaultLang('en');
9349
+ /** @type {?} */
9350
+ var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
9351
+ _this.translate.use(lang);
9352
+ }
9353
+ }));
9329
9354
  }
9330
9355
  /**
9331
9356
  * @return {?}
@@ -9334,18 +9359,146 @@ var CardWideV2Component = /** @class */ (function () {
9334
9359
  * @return {?}
9335
9360
  */
9336
9361
  function () {
9362
+ /** @type {?} */
9363
+ var instanceConfig = this.configSvc.instanceConfig;
9364
+ if (instanceConfig) {
9365
+ this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
9366
+ this.sourceLogos = instanceConfig.sources;
9367
+ this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
9368
+ }
9369
+ else {
9370
+ this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
9371
+ this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
9372
+ }
9373
+ };
9374
+ /**
9375
+ * @return {?}
9376
+ */
9377
+ CardWideV2Component.prototype.showSnackbar = /**
9378
+ * @return {?}
9379
+ */
9380
+ function () {
9381
+ if (this.showIntranetContent) {
9382
+ this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
9383
+ }
9384
+ else if (!this.isLiveOrMarkForDeletion) {
9385
+ this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
9386
+ }
9387
+ };
9388
+ /**
9389
+ * @param {?} contentData
9390
+ * @return {?}
9391
+ */
9392
+ CardWideV2Component.prototype.getRedirectUrlData = /**
9393
+ * @param {?} contentData
9394
+ * @return {?}
9395
+ */
9396
+ function (contentData) {
9397
+ this.contentData.emit(contentData);
9398
+ };
9399
+ /**
9400
+ * @return {?}
9401
+ */
9402
+ CardWideV2Component.prototype.raiseTelemetry = /**
9403
+ * @return {?}
9404
+ */
9405
+ function () {
9406
+ // if(this.forPreview){
9407
+ // return
9408
+ // }
9409
+ this.events.raiseInteractTelemetry({
9410
+ type: 'click',
9411
+ subType: this.widgetType + "-" + this.widgetSubType,
9412
+ id: camelCase(this.widgetData.content.primaryCategory) + "-card",
9413
+ }, {
9414
+ id: this.widgetData.content.identifier,
9415
+ type: this.widgetData.content.primaryCategory,
9416
+ //context: this.widgetData.context,
9417
+ rollup: {},
9418
+ ver: "" + this.widgetData.content.version + '',
9419
+ }, {
9420
+ pageIdExt: camelCase(this.widgetData.content.primaryCategory) + "-card",
9421
+ module: camelCase(this.widgetData.content.primaryCategory),
9422
+ });
9337
9423
  };
9338
9424
  CardWideV2Component.decorators = [
9339
9425
  { type: Component, args: [{
9340
9426
  selector: 'sb-uic-card-wide-v2',
9341
- template: "<p>card-wide-v2 works!</p>\n",
9342
- styles: [""]
9427
+ 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",
9428
+ 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}}"]
9343
9429
  }] }
9344
9430
  ];
9345
9431
  /** @nocollapse */
9346
- CardWideV2Component.ctorParameters = function () { return []; };
9432
+ CardWideV2Component.ctorParameters = function () { return [
9433
+ { type: MatSnackBar },
9434
+ { type: EventService },
9435
+ { type: TranslateService },
9436
+ { type: MultilingualTranslationsService },
9437
+ { type: ConfigurationsService$1 }
9438
+ ]; };
9439
+ CardWideV2Component.propDecorators = {
9440
+ widgetData: [{ type: Input }],
9441
+ isLiveOrMarkForDeletion: [{ type: Input }],
9442
+ showIntranetContent: [{ type: Input }],
9443
+ isIntranetAllowedSettings: [{ type: Input }],
9444
+ isCardLoading: [{ type: Input }],
9445
+ contentData: [{ type: Output }]
9446
+ };
9347
9447
  return CardWideV2Component;
9348
9448
  }());
9449
+ if (false) {
9450
+ /** @type {?} */
9451
+ CardWideV2Component.prototype.widgetData;
9452
+ /** @type {?} */
9453
+ CardWideV2Component.prototype.isLiveOrMarkForDeletion;
9454
+ /** @type {?} */
9455
+ CardWideV2Component.prototype.showIntranetContent;
9456
+ /** @type {?} */
9457
+ CardWideV2Component.prototype.isIntranetAllowedSettings;
9458
+ /** @type {?} */
9459
+ CardWideV2Component.prototype.isCardLoading;
9460
+ /** @type {?} */
9461
+ CardWideV2Component.prototype.contentData;
9462
+ /** @type {?} */
9463
+ CardWideV2Component.prototype.isCardFlipped;
9464
+ /** @type {?} */
9465
+ CardWideV2Component.prototype.defaultThumbnail;
9466
+ /** @type {?} */
9467
+ CardWideV2Component.prototype.sourceLogos;
9468
+ /** @type {?} */
9469
+ CardWideV2Component.prototype.defaultSLogo;
9470
+ /** @type {?} */
9471
+ CardWideV2Component.prototype.showFlip;
9472
+ /** @type {?} */
9473
+ CardWideV2Component.prototype.widgetType;
9474
+ /** @type {?} */
9475
+ CardWideV2Component.prototype.widgetSubType;
9476
+ /**
9477
+ * @type {?}
9478
+ * @private
9479
+ */
9480
+ CardWideV2Component.prototype.snackBar;
9481
+ /**
9482
+ * @type {?}
9483
+ * @private
9484
+ */
9485
+ CardWideV2Component.prototype.events;
9486
+ /**
9487
+ * @type {?}
9488
+ * @private
9489
+ */
9490
+ CardWideV2Component.prototype.translate;
9491
+ /**
9492
+ * @type {?}
9493
+ * @private
9494
+ */
9495
+ CardWideV2Component.prototype.langtranslations;
9496
+ /**
9497
+ * @type {?}
9498
+ * @private
9499
+ */
9500
+ CardWideV2Component.prototype.configSvc;
9501
+ }
9349
9502
 
9350
9503
  /**
9351
9504
  * @fileoverview added by tsickle
@@ -9480,6 +9633,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9480
9633
  this.competencySvc = competencySvc;
9481
9634
  this.router = router;
9482
9635
  this.cardDisplayCount = 3;
9636
+ this.dynamicAlignPills = 'center';
9483
9637
  this.emptyResponse = new EventEmitter();
9484
9638
  this.loadCometency = false;
9485
9639
  this.loadCompetencyArea = false;
@@ -9497,7 +9651,6 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9497
9651
  * @return {?}
9498
9652
  */
9499
9653
  function () {
9500
- this.getCompetencyArea();
9501
9654
  this.getAllCompetencies();
9502
9655
  // this.competencyData = this.objectData
9503
9656
  // this.filter(this.currentFilter)
@@ -9682,6 +9835,8 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9682
9835
  function (response) {
9683
9836
  _this.allcompetencyTheme = {};
9684
9837
  if (response && response.result && response.result.competency) {
9838
+ _this.originalCompetencyArray = response.result.competency;
9839
+ _this.getCompetencyArea();
9685
9840
  response.result.competency.forEach((/**
9686
9841
  * @param {?} element
9687
9842
  * @return {?}
@@ -9714,7 +9869,8 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9714
9869
  */
9715
9870
  function (value, addFilter) {
9716
9871
  return __awaiter(this, void 0, void 0, function () {
9717
- var request, response, error_2;
9872
+ var request, response, competencyThemeData_1, error_2;
9873
+ var _this = this;
9718
9874
  return __generator(this, function (_a) {
9719
9875
  switch (_a.label) {
9720
9876
  case 0:
@@ -9744,7 +9900,28 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9744
9900
  response = _a.sent();
9745
9901
  if (response && response.results) {
9746
9902
  if (response.results.result.facets) {
9747
- this.competencyTheme = response.results.result.facets[0].values;
9903
+ competencyThemeData_1 = response.results.result.facets[0].values;
9904
+ this.originalCompetencyArray.forEach((/**
9905
+ * @param {?} element
9906
+ * @return {?}
9907
+ */
9908
+ function (element) {
9909
+ if (element.name.toLowerCase() === value) {
9910
+ _this.competencyTheme = competencyThemeData_1.filter((/**
9911
+ * @param {?} ele1
9912
+ * @return {?}
9913
+ */
9914
+ function (ele1) {
9915
+ return element.children.find((/**
9916
+ * @param {?} ele2
9917
+ * @return {?}
9918
+ */
9919
+ function (ele2) { return ele2.name.toLowerCase() === ele1.name.toLowerCase(); }));
9920
+ }));
9921
+ _this.showAllTheme = [{ name: 'Show all', showAll: false }];
9922
+ _this.competencyThemeLength = 6;
9923
+ }
9924
+ }));
9748
9925
  this.resetViewMore();
9749
9926
  }
9750
9927
  this.loadCometency = false;
@@ -9795,7 +9972,6 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9795
9972
  * @return {?}
9796
9973
  */
9797
9974
  function (event) {
9798
- debugger;
9799
9975
  this.showAllTheme[0]['showAll'] = !event.showAll;
9800
9976
  this.competencyThemeLength = event.showAll ? this.competencyTheme.length : 6;
9801
9977
  this.showAllTheme[0]['name'] = event.showAll ? 'Show less' : 'Show all';
@@ -9814,7 +9990,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9814
9990
  CompetencyPassbookComponent.decorators = [
9815
9991
  { type: Component, args: [{
9816
9992
  selector: 'sb-uic-competency-passbook',
9817
- 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>",
9993
+ 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>",
9818
9994
  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}"]
9819
9995
  }] }
9820
9996
  ];
@@ -9829,6 +10005,9 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9829
10005
  objectData: [{ type: Input }],
9830
10006
  providerId: [{ type: Input }],
9831
10007
  cardDisplayCount: [{ type: Input }],
10008
+ dynamicClass: [{ type: Input }],
10009
+ dynamicColor: [{ type: Input }],
10010
+ dynamicAlignPills: [{ type: Input }],
9832
10011
  emptyResponse: [{ type: Output }]
9833
10012
  };
9834
10013
  return CompetencyPassbookComponent;
@@ -9841,12 +10020,20 @@ if (false) {
9841
10020
  /** @type {?} */
9842
10021
  CompetencyPassbookComponent.prototype.cardDisplayCount;
9843
10022
  /** @type {?} */
10023
+ CompetencyPassbookComponent.prototype.dynamicClass;
10024
+ /** @type {?} */
10025
+ CompetencyPassbookComponent.prototype.dynamicColor;
10026
+ /** @type {?} */
10027
+ CompetencyPassbookComponent.prototype.dynamicAlignPills;
10028
+ /** @type {?} */
9844
10029
  CompetencyPassbookComponent.prototype.emptyResponse;
9845
10030
  /** @type {?} */
9846
10031
  CompetencyPassbookComponent.prototype.loadCometency;
9847
10032
  /** @type {?} */
9848
10033
  CompetencyPassbookComponent.prototype.loadCompetencyArea;
9849
10034
  /** @type {?} */
10035
+ CompetencyPassbookComponent.prototype.originalCompetencyArray;
10036
+ /** @type {?} */
9850
10037
  CompetencyPassbookComponent.prototype.competencyArea;
9851
10038
  /** @type {?} */
9852
10039
  CompetencyPassbookComponent.prototype.selectedValue;
@@ -9880,6 +10067,9 @@ var PillsComponent = /** @class */ (function () {
9880
10067
  function PillsComponent() {
9881
10068
  this.isLoading = false;
9882
10069
  this.pillClick = new EventEmitter();
10070
+ this.dynamicClass = '';
10071
+ this.dynamicColor = '';
10072
+ this.requiredTitlecase = true;
9883
10073
  }
9884
10074
  /**
9885
10075
  * @return {?}
@@ -9903,8 +10093,8 @@ var PillsComponent = /** @class */ (function () {
9903
10093
  PillsComponent.decorators = [
9904
10094
  { type: Component, args: [{
9905
10095
  selector: 'sb-uic-pills',
9906
- 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",
9907
- 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}"]
10096
+ 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",
10097
+ 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}"]
9908
10098
  }] }
9909
10099
  ];
9910
10100
  /** @nocollapse */
@@ -9913,7 +10103,10 @@ var PillsComponent = /** @class */ (function () {
9913
10103
  pillsData: [{ type: Input }],
9914
10104
  selectedValue: [{ type: Input }],
9915
10105
  isLoading: [{ type: Input }],
9916
- pillClick: [{ type: Output }]
10106
+ pillClick: [{ type: Output }],
10107
+ dynamicClass: [{ type: Input }],
10108
+ dynamicColor: [{ type: Input }],
10109
+ requiredTitlecase: [{ type: Input }]
9917
10110
  };
9918
10111
  return PillsComponent;
9919
10112
  }());
@@ -9926,6 +10119,12 @@ if (false) {
9926
10119
  PillsComponent.prototype.isLoading;
9927
10120
  /** @type {?} */
9928
10121
  PillsComponent.prototype.pillClick;
10122
+ /** @type {?} */
10123
+ PillsComponent.prototype.dynamicClass;
10124
+ /** @type {?} */
10125
+ PillsComponent.prototype.dynamicColor;
10126
+ /** @type {?} */
10127
+ PillsComponent.prototype.requiredTitlecase;
9929
10128
  }
9930
10129
 
9931
10130
  /**