@sunbird-cb/consumption 0.0.17 → 0.0.19

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 (33) hide show
  1. package/bundles/sunbird-cb-consumption.umd.js +305 -63
  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 +166 -6
  7. package/esm2015/lib/_common/cards/cards.component.js +35 -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/esm2015/public-api.js +2 -1
  12. package/esm2015/sunbird-cb-consumption.js +49 -50
  13. package/esm5/lib/_common/cards/card-wide/card-wide.component.js +1 -1
  14. package/esm5/lib/_common/cards/card-wide-v2/card-wide-v2.component.js +169 -6
  15. package/esm5/lib/_common/cards/cards.component.js +39 -2
  16. package/esm5/lib/_common/competency-passbook/competency-passbook.component.js +40 -6
  17. package/esm5/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.js +3 -1
  18. package/esm5/lib/_common/pills/pills.component.js +16 -4
  19. package/esm5/public-api.js +2 -1
  20. package/esm5/sunbird-cb-consumption.js +49 -50
  21. package/fesm2015/sunbird-cb-consumption.js +249 -14
  22. package/fesm2015/sunbird-cb-consumption.js.map +1 -1
  23. package/fesm5/sunbird-cb-consumption.js +257 -15
  24. package/fesm5/sunbird-cb-consumption.js.map +1 -1
  25. package/lib/_common/cards/card-wide-v2/card-wide-v2.component.d.ts +30 -2
  26. package/lib/_common/cards/cards.component.d.ts +3 -0
  27. package/lib/_common/competency-passbook/competency-passbook.component.d.ts +4 -0
  28. package/lib/_common/content-strip-with-tabs-lib/content-strip-with-tabs-lib.component.d.ts +1 -0
  29. package/lib/_common/pills/pills.component.d.ts +3 -0
  30. package/package.json +1 -1
  31. package/public-api.d.ts +1 -0
  32. package/sunbird-cb-consumption.d.ts +47 -48
  33. 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);
@@ -7996,6 +7998,13 @@ var CardsComponent = /** @class */ (function (_super) {
7996
7998
  * @return {?}
7997
7999
  */
7998
8000
  function () {
8001
+ var _this = this;
8002
+ this.cbPlanInterval = setInterval((/**
8003
+ * @return {?}
8004
+ */
8005
+ function () {
8006
+ _this.getCbPlanData();
8007
+ }), 1000);
7999
8008
  };
8000
8009
  Object.defineProperty(CardsComponent.prototype, "isLiveOrMarkForDeletion", {
8001
8010
  get: /**
@@ -8049,10 +8058,36 @@ var CardsComponent = /** @class */ (function (_super) {
8049
8058
  });
8050
8059
  });
8051
8060
  };
8061
+ /**
8062
+ * @return {?}
8063
+ */
8064
+ CardsComponent.prototype.getCbPlanData = /**
8065
+ * @return {?}
8066
+ */
8067
+ function () {
8068
+ /** @type {?} */
8069
+ var cbpList = {};
8070
+ if (localStorage.getItem('cbpData')) {
8071
+ /** @type {?} */
8072
+ var cbpListArr = JSON.parse(localStorage.getItem('cbpData') || '');
8073
+ if (cbpListArr && cbpListArr.length) {
8074
+ cbpListArr.forEach((/**
8075
+ * @param {?} data
8076
+ * @return {?}
8077
+ */
8078
+ function (data) {
8079
+ cbpList[data.identifier] = data;
8080
+ }));
8081
+ }
8082
+ this.cbPlanMapData = cbpList;
8083
+ // this.karmaPointLoading = false
8084
+ clearInterval(this.cbPlanInterval);
8085
+ }
8086
+ };
8052
8087
  CardsComponent.decorators = [
8053
8088
  { type: Component, args: [{
8054
8089
  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",
8090
+ 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-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></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 #cardWideV2Skeleton>\n <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n <sb-uic-card-wide-v2 [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\" [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
8091
  styles: [""]
8057
8092
  }] }
8058
8093
  ];
@@ -8073,6 +8108,10 @@ if (false) {
8073
8108
  CardsComponent.prototype.widgetData;
8074
8109
  /** @type {?} */
8075
8110
  CardsComponent.prototype.isIntranetAllowedSettings;
8111
+ /** @type {?} */
8112
+ CardsComponent.prototype.cbPlanMapData;
8113
+ /** @type {?} */
8114
+ CardsComponent.prototype.cbPlanInterval;
8076
8115
  /**
8077
8116
  * @type {?}
8078
8117
  * @private
@@ -9119,7 +9158,7 @@ var CardWideComponent = /** @class */ (function () {
9119
9158
  { type: Component, args: [{
9120
9159
  selector: 'sb-uic-card-wide',
9121
9160
  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}}"]
9161
+ 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
9162
  }] }
9124
9163
  ];
9125
9164
  /** @nocollapse */
@@ -9325,7 +9364,31 @@ if (false) {
9325
9364
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9326
9365
  */
9327
9366
  var CardWideV2Component = /** @class */ (function () {
9328
- function CardWideV2Component() {
9367
+ function CardWideV2Component(snackBar, events, translate, langtranslations, configSvc) {
9368
+ var _this = this;
9369
+ this.snackBar = snackBar;
9370
+ this.events = events;
9371
+ this.translate = translate;
9372
+ this.langtranslations = langtranslations;
9373
+ this.configSvc = configSvc;
9374
+ this.isCardLoading = false;
9375
+ this.contentData = new EventEmitter();
9376
+ this.isCardFlipped = false;
9377
+ this.acbpConstants = NsCardContent$1.ACBPConst;
9378
+ this.showFlip = false;
9379
+ this.widgetType = 'df';
9380
+ this.widgetSubType = 'sdf';
9381
+ this.langtranslations.languageSelectedObservable.subscribe((/**
9382
+ * @return {?}
9383
+ */
9384
+ function () {
9385
+ if (localStorage.getItem('websiteLanguage')) {
9386
+ _this.translate.setDefaultLang('en');
9387
+ /** @type {?} */
9388
+ var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
9389
+ _this.translate.use(lang);
9390
+ }
9391
+ }));
9329
9392
  }
9330
9393
  /**
9331
9394
  * @return {?}
@@ -9334,18 +9397,151 @@ var CardWideV2Component = /** @class */ (function () {
9334
9397
  * @return {?}
9335
9398
  */
9336
9399
  function () {
9400
+ /** @type {?} */
9401
+ var instanceConfig = this.configSvc.instanceConfig;
9402
+ if (instanceConfig) {
9403
+ this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
9404
+ this.sourceLogos = instanceConfig.sources;
9405
+ this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
9406
+ }
9407
+ else {
9408
+ this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
9409
+ this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
9410
+ }
9411
+ };
9412
+ /**
9413
+ * @return {?}
9414
+ */
9415
+ CardWideV2Component.prototype.showSnackbar = /**
9416
+ * @return {?}
9417
+ */
9418
+ function () {
9419
+ if (this.showIntranetContent) {
9420
+ this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
9421
+ }
9422
+ else if (!this.isLiveOrMarkForDeletion) {
9423
+ this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
9424
+ }
9425
+ };
9426
+ /**
9427
+ * @param {?} contentData
9428
+ * @return {?}
9429
+ */
9430
+ CardWideV2Component.prototype.getRedirectUrlData = /**
9431
+ * @param {?} contentData
9432
+ * @return {?}
9433
+ */
9434
+ function (contentData) {
9435
+ this.contentData.emit(contentData);
9436
+ };
9437
+ /**
9438
+ * @return {?}
9439
+ */
9440
+ CardWideV2Component.prototype.raiseTelemetry = /**
9441
+ * @return {?}
9442
+ */
9443
+ function () {
9444
+ // if(this.forPreview){
9445
+ // return
9446
+ // }
9447
+ this.events.raiseInteractTelemetry({
9448
+ type: 'click',
9449
+ subType: this.widgetType + "-" + this.widgetSubType,
9450
+ id: camelCase(this.widgetData.content.primaryCategory) + "-card",
9451
+ }, {
9452
+ id: this.widgetData.content.identifier,
9453
+ type: this.widgetData.content.primaryCategory,
9454
+ //context: this.widgetData.context,
9455
+ rollup: {},
9456
+ ver: "" + this.widgetData.content.version + '',
9457
+ }, {
9458
+ pageIdExt: camelCase(this.widgetData.content.primaryCategory) + "-card",
9459
+ module: camelCase(this.widgetData.content.primaryCategory),
9460
+ });
9337
9461
  };
9338
9462
  CardWideV2Component.decorators = [
9339
9463
  { type: Component, args: [{
9340
9464
  selector: 'sb-uic-card-wide-v2',
9341
- template: "<p>card-wide-v2 works!</p>\n",
9342
- styles: [""]
9465
+ template: "<ng-container *ngIf=\"!isCardLoading\">\n <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 main_icon ws-mat-default-text margin-right-xs\">video_library</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 <ng-template #cbpPlan let-data=\"data\">\n <div class=\"cbp-mark left-0 border-top-radius\">\n <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\" class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\" class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n </div>\n </ng-template>\n</ng-container>\n\n <ng-container *ngIf=\"isCardLoading\">\n <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n <div class=\"\">\n <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n </div>\n <mat-card-content class=\"mat-text-box\">\n <div class=\"course_widget flex margin-remove\">\n <div class=\"flex flex-end \">\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\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 <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n <!-- </p> -->\n </div>\n \n <div class=\"bottomsection\">\n <div class=\"flex w-full flex-wrap flex-middle\">\n <div class=\"course_logo_box mr-2\">\n <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <div class=\"flex flex-middle rating-session margin-top-xs\">\n <div class=\"flex flex-middle mr-2\">\n <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n </div>\n </div>\n </mat-card-content>\n </mat-card>\n </ng-container>",
9466
+ 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}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}"]
9343
9467
  }] }
9344
9468
  ];
9345
9469
  /** @nocollapse */
9346
- CardWideV2Component.ctorParameters = function () { return []; };
9470
+ CardWideV2Component.ctorParameters = function () { return [
9471
+ { type: MatSnackBar },
9472
+ { type: EventService },
9473
+ { type: TranslateService },
9474
+ { type: MultilingualTranslationsService },
9475
+ { type: ConfigurationsService$1 }
9476
+ ]; };
9477
+ CardWideV2Component.propDecorators = {
9478
+ widgetData: [{ type: Input }],
9479
+ isLiveOrMarkForDeletion: [{ type: Input }],
9480
+ showIntranetContent: [{ type: Input }],
9481
+ isIntranetAllowedSettings: [{ type: Input }],
9482
+ cbPlanMapData: [{ type: Input }],
9483
+ isCardLoading: [{ type: Input }],
9484
+ contentData: [{ type: Output }]
9485
+ };
9347
9486
  return CardWideV2Component;
9348
9487
  }());
9488
+ if (false) {
9489
+ /** @type {?} */
9490
+ CardWideV2Component.prototype.widgetData;
9491
+ /** @type {?} */
9492
+ CardWideV2Component.prototype.isLiveOrMarkForDeletion;
9493
+ /** @type {?} */
9494
+ CardWideV2Component.prototype.showIntranetContent;
9495
+ /** @type {?} */
9496
+ CardWideV2Component.prototype.isIntranetAllowedSettings;
9497
+ /** @type {?} */
9498
+ CardWideV2Component.prototype.cbPlanMapData;
9499
+ /** @type {?} */
9500
+ CardWideV2Component.prototype.isCardLoading;
9501
+ /** @type {?} */
9502
+ CardWideV2Component.prototype.contentData;
9503
+ /** @type {?} */
9504
+ CardWideV2Component.prototype.isCardFlipped;
9505
+ /** @type {?} */
9506
+ CardWideV2Component.prototype.acbpConstants;
9507
+ /** @type {?} */
9508
+ CardWideV2Component.prototype.defaultThumbnail;
9509
+ /** @type {?} */
9510
+ CardWideV2Component.prototype.sourceLogos;
9511
+ /** @type {?} */
9512
+ CardWideV2Component.prototype.defaultSLogo;
9513
+ /** @type {?} */
9514
+ CardWideV2Component.prototype.showFlip;
9515
+ /** @type {?} */
9516
+ CardWideV2Component.prototype.widgetType;
9517
+ /** @type {?} */
9518
+ CardWideV2Component.prototype.widgetSubType;
9519
+ /**
9520
+ * @type {?}
9521
+ * @private
9522
+ */
9523
+ CardWideV2Component.prototype.snackBar;
9524
+ /**
9525
+ * @type {?}
9526
+ * @private
9527
+ */
9528
+ CardWideV2Component.prototype.events;
9529
+ /**
9530
+ * @type {?}
9531
+ * @private
9532
+ */
9533
+ CardWideV2Component.prototype.translate;
9534
+ /**
9535
+ * @type {?}
9536
+ * @private
9537
+ */
9538
+ CardWideV2Component.prototype.langtranslations;
9539
+ /**
9540
+ * @type {?}
9541
+ * @private
9542
+ */
9543
+ CardWideV2Component.prototype.configSvc;
9544
+ }
9349
9545
 
9350
9546
  /**
9351
9547
  * @fileoverview added by tsickle
@@ -9480,6 +9676,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9480
9676
  this.competencySvc = competencySvc;
9481
9677
  this.router = router;
9482
9678
  this.cardDisplayCount = 3;
9679
+ this.dynamicAlignPills = 'center';
9483
9680
  this.emptyResponse = new EventEmitter();
9484
9681
  this.loadCometency = false;
9485
9682
  this.loadCompetencyArea = false;
@@ -9497,7 +9694,6 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9497
9694
  * @return {?}
9498
9695
  */
9499
9696
  function () {
9500
- this.getCompetencyArea();
9501
9697
  this.getAllCompetencies();
9502
9698
  // this.competencyData = this.objectData
9503
9699
  // this.filter(this.currentFilter)
@@ -9682,6 +9878,8 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9682
9878
  function (response) {
9683
9879
  _this.allcompetencyTheme = {};
9684
9880
  if (response && response.result && response.result.competency) {
9881
+ _this.originalCompetencyArray = response.result.competency;
9882
+ _this.getCompetencyArea();
9685
9883
  response.result.competency.forEach((/**
9686
9884
  * @param {?} element
9687
9885
  * @return {?}
@@ -9714,7 +9912,8 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9714
9912
  */
9715
9913
  function (value, addFilter) {
9716
9914
  return __awaiter(this, void 0, void 0, function () {
9717
- var request, response, error_2;
9915
+ var request, response, competencyThemeData_1, error_2;
9916
+ var _this = this;
9718
9917
  return __generator(this, function (_a) {
9719
9918
  switch (_a.label) {
9720
9919
  case 0:
@@ -9744,7 +9943,28 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9744
9943
  response = _a.sent();
9745
9944
  if (response && response.results) {
9746
9945
  if (response.results.result.facets) {
9747
- this.competencyTheme = response.results.result.facets[0].values;
9946
+ competencyThemeData_1 = response.results.result.facets[0].values;
9947
+ this.originalCompetencyArray.forEach((/**
9948
+ * @param {?} element
9949
+ * @return {?}
9950
+ */
9951
+ function (element) {
9952
+ if (element.name.toLowerCase() === value) {
9953
+ _this.competencyTheme = competencyThemeData_1.filter((/**
9954
+ * @param {?} ele1
9955
+ * @return {?}
9956
+ */
9957
+ function (ele1) {
9958
+ return element.children.find((/**
9959
+ * @param {?} ele2
9960
+ * @return {?}
9961
+ */
9962
+ function (ele2) { return ele2.name.toLowerCase() === ele1.name.toLowerCase(); }));
9963
+ }));
9964
+ _this.showAllTheme = [{ name: 'Show all', showAll: false }];
9965
+ _this.competencyThemeLength = 6;
9966
+ }
9967
+ }));
9748
9968
  this.resetViewMore();
9749
9969
  }
9750
9970
  this.loadCometency = false;
@@ -9795,7 +10015,6 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9795
10015
  * @return {?}
9796
10016
  */
9797
10017
  function (event) {
9798
- debugger;
9799
10018
  this.showAllTheme[0]['showAll'] = !event.showAll;
9800
10019
  this.competencyThemeLength = event.showAll ? this.competencyTheme.length : 6;
9801
10020
  this.showAllTheme[0]['name'] = event.showAll ? 'Show less' : 'Show all';
@@ -9814,7 +10033,7 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9814
10033
  CompetencyPassbookComponent.decorators = [
9815
10034
  { type: Component, args: [{
9816
10035
  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>",
10036
+ 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
10037
  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
10038
  }] }
9820
10039
  ];
@@ -9829,6 +10048,9 @@ var CompetencyPassbookComponent = /** @class */ (function () {
9829
10048
  objectData: [{ type: Input }],
9830
10049
  providerId: [{ type: Input }],
9831
10050
  cardDisplayCount: [{ type: Input }],
10051
+ dynamicClass: [{ type: Input }],
10052
+ dynamicColor: [{ type: Input }],
10053
+ dynamicAlignPills: [{ type: Input }],
9832
10054
  emptyResponse: [{ type: Output }]
9833
10055
  };
9834
10056
  return CompetencyPassbookComponent;
@@ -9841,12 +10063,20 @@ if (false) {
9841
10063
  /** @type {?} */
9842
10064
  CompetencyPassbookComponent.prototype.cardDisplayCount;
9843
10065
  /** @type {?} */
10066
+ CompetencyPassbookComponent.prototype.dynamicClass;
10067
+ /** @type {?} */
10068
+ CompetencyPassbookComponent.prototype.dynamicColor;
10069
+ /** @type {?} */
10070
+ CompetencyPassbookComponent.prototype.dynamicAlignPills;
10071
+ /** @type {?} */
9844
10072
  CompetencyPassbookComponent.prototype.emptyResponse;
9845
10073
  /** @type {?} */
9846
10074
  CompetencyPassbookComponent.prototype.loadCometency;
9847
10075
  /** @type {?} */
9848
10076
  CompetencyPassbookComponent.prototype.loadCompetencyArea;
9849
10077
  /** @type {?} */
10078
+ CompetencyPassbookComponent.prototype.originalCompetencyArray;
10079
+ /** @type {?} */
9850
10080
  CompetencyPassbookComponent.prototype.competencyArea;
9851
10081
  /** @type {?} */
9852
10082
  CompetencyPassbookComponent.prototype.selectedValue;
@@ -9880,6 +10110,9 @@ var PillsComponent = /** @class */ (function () {
9880
10110
  function PillsComponent() {
9881
10111
  this.isLoading = false;
9882
10112
  this.pillClick = new EventEmitter();
10113
+ this.dynamicClass = '';
10114
+ this.dynamicColor = '';
10115
+ this.requiredTitlecase = true;
9883
10116
  }
9884
10117
  /**
9885
10118
  * @return {?}
@@ -9903,8 +10136,8 @@ var PillsComponent = /** @class */ (function () {
9903
10136
  PillsComponent.decorators = [
9904
10137
  { type: Component, args: [{
9905
10138
  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}"]
10139
+ 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",
10140
+ 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
10141
  }] }
9909
10142
  ];
9910
10143
  /** @nocollapse */
@@ -9913,7 +10146,10 @@ var PillsComponent = /** @class */ (function () {
9913
10146
  pillsData: [{ type: Input }],
9914
10147
  selectedValue: [{ type: Input }],
9915
10148
  isLoading: [{ type: Input }],
9916
- pillClick: [{ type: Output }]
10149
+ pillClick: [{ type: Output }],
10150
+ dynamicClass: [{ type: Input }],
10151
+ dynamicColor: [{ type: Input }],
10152
+ requiredTitlecase: [{ type: Input }]
9917
10153
  };
9918
10154
  return PillsComponent;
9919
10155
  }());
@@ -9926,6 +10162,12 @@ if (false) {
9926
10162
  PillsComponent.prototype.isLoading;
9927
10163
  /** @type {?} */
9928
10164
  PillsComponent.prototype.pillClick;
10165
+ /** @type {?} */
10166
+ PillsComponent.prototype.dynamicClass;
10167
+ /** @type {?} */
10168
+ PillsComponent.prototype.dynamicColor;
10169
+ /** @type {?} */
10170
+ PillsComponent.prototype.requiredTitlecase;
9929
10171
  }
9930
10172
 
9931
10173
  /**
@@ -10967,5 +11209,5 @@ var UserContentRatingLibModule = /** @class */ (function () {
10967
11209
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
10968
11210
  */
10969
11211
 
10970
- export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, CardMDOChannelComponent as ɵba, CardWideV2Component as ɵbb, PipePublicURLModule as ɵbc, PipePublicURL as ɵbd, DisplayContentTypeLibModule as ɵbe, DisplayContentTypeLibComponent as ɵbf, DefaultThumbnailModule as ɵbg, DefaultThumbnailDirective as ɵbh, PipeDurationTransformModule as ɵbi, PipeDurationTransformPipe as ɵbj, CompetencyPassbookComponent as ɵbk, CompetencyPassbookService as ɵbl, PillsModule as ɵbm, PillsComponent as ɵbn, UserContentRatingLibComponent as ɵbo, ScrollableItemDirective as ɵbp, RatingService as ɵbq, UserContentRatingLibService as ɵbr, AvatarPhotoLibModule as ɵbs, AvatarPhotoLibComponent as ɵbt, MyHammerConfig$1 as ɵbu, SlidersNgContentLibModule as ɵbv, SlidersNgContentLibComponent as ɵbw, ScrollableItemModule as ɵbx, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CalenderDayComponent as ɵr, CommonStripComponent as ɵs, AnnouncementsComponent as ɵt, CardResourceComponent as ɵu, CardsComponent as ɵv, CardPortraitComponent as ɵw, CardUserComponent as ɵx, CardLandscapeComponent as ɵy, CardWideComponent as ɵz };
11212
+ export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, PipePublicURLModule as ɵbb, PipePublicURL as ɵbc, DisplayContentTypeLibModule as ɵbd, DisplayContentTypeLibComponent as ɵbe, DefaultThumbnailModule as ɵbf, DefaultThumbnailDirective as ɵbg, PipeDurationTransformModule as ɵbh, PipeDurationTransformPipe as ɵbi, CompetencyPassbookComponent as ɵbj, CompetencyPassbookService as ɵbk, PillsModule as ɵbl, PillsComponent as ɵbm, UserContentRatingLibComponent as ɵbn, ScrollableItemDirective as ɵbo, RatingService as ɵbp, UserContentRatingLibService as ɵbq, AvatarPhotoLibModule as ɵbr, AvatarPhotoLibComponent as ɵbs, MyHammerConfig$1 as ɵbt, SlidersNgContentLibModule as ɵbu, SlidersNgContentLibComponent as ɵbv, ScrollableItemModule as ɵbw, MultilingualTranslationsService as ɵc, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
10971
11213
  //# sourceMappingURL=sunbird-cb-consumption.js.map