@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
@@ -3235,6 +3235,8 @@ if (false) {
3235
3235
  IStripUnitContentData.prototype.secondaryHeading;
3236
3236
  /** @type {?} */
3237
3237
  IStripUnitContentData.prototype.viewMoreUrl;
3238
+ /** @type {?|undefined} */
3239
+ IStripUnitContentData.prototype.request;
3238
3240
  }
3239
3241
  class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
3240
3242
  /**
@@ -7022,6 +7024,12 @@ class CardsComponent extends WidgetBaseComponent {
7022
7024
  * @return {?}
7023
7025
  */
7024
7026
  ngOnInit() {
7027
+ this.cbPlanInterval = setInterval((/**
7028
+ * @return {?}
7029
+ */
7030
+ () => {
7031
+ this.getCbPlanData();
7032
+ }), 1000);
7025
7033
  }
7026
7034
  /**
7027
7035
  * @return {?}
@@ -7056,11 +7064,34 @@ class CardsComponent extends WidgetBaseComponent {
7056
7064
  });
7057
7065
  });
7058
7066
  }
7067
+ /**
7068
+ * @return {?}
7069
+ */
7070
+ getCbPlanData() {
7071
+ /** @type {?} */
7072
+ let cbpList = {};
7073
+ if (localStorage.getItem('cbpData')) {
7074
+ /** @type {?} */
7075
+ let cbpListArr = JSON.parse(localStorage.getItem('cbpData') || '');
7076
+ if (cbpListArr && cbpListArr.length) {
7077
+ cbpListArr.forEach((/**
7078
+ * @param {?} data
7079
+ * @return {?}
7080
+ */
7081
+ (data) => {
7082
+ cbpList[data.identifier] = data;
7083
+ }));
7084
+ }
7085
+ this.cbPlanMapData = cbpList;
7086
+ // this.karmaPointLoading = false
7087
+ clearInterval(this.cbPlanInterval);
7088
+ }
7089
+ }
7059
7090
  }
7060
7091
  CardsComponent.decorators = [
7061
7092
  { type: Component, args: [{
7062
7093
  selector: 'sb-uic-cards',
7063
- 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",
7094
+ 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",
7064
7095
  styles: [""]
7065
7096
  }] }
7066
7097
  ];
@@ -7079,6 +7110,10 @@ if (false) {
7079
7110
  CardsComponent.prototype.widgetData;
7080
7111
  /** @type {?} */
7081
7112
  CardsComponent.prototype.isIntranetAllowedSettings;
7113
+ /** @type {?} */
7114
+ CardsComponent.prototype.cbPlanMapData;
7115
+ /** @type {?} */
7116
+ CardsComponent.prototype.cbPlanInterval;
7082
7117
  /**
7083
7118
  * @type {?}
7084
7119
  * @private
@@ -8043,7 +8078,7 @@ CardWideComponent.decorators = [
8043
8078
  { type: Component, args: [{
8044
8079
  selector: 'sb-uic-card-wide',
8045
8080
  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",
8046
- 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}}"]
8081
+ 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}}"]
8047
8082
  }] }
8048
8083
  ];
8049
8084
  /** @nocollapse */
@@ -8245,22 +8280,176 @@ if (false) {
8245
8280
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
8246
8281
  */
8247
8282
  class CardWideV2Component {
8248
- constructor() { }
8283
+ /**
8284
+ * @param {?} snackBar
8285
+ * @param {?} events
8286
+ * @param {?} translate
8287
+ * @param {?} langtranslations
8288
+ * @param {?} configSvc
8289
+ */
8290
+ constructor(snackBar, events, translate, langtranslations, configSvc) {
8291
+ this.snackBar = snackBar;
8292
+ this.events = events;
8293
+ this.translate = translate;
8294
+ this.langtranslations = langtranslations;
8295
+ this.configSvc = configSvc;
8296
+ this.isCardLoading = false;
8297
+ this.contentData = new EventEmitter();
8298
+ this.isCardFlipped = false;
8299
+ this.acbpConstants = NsCardContent$1.ACBPConst;
8300
+ this.showFlip = false;
8301
+ this.widgetType = 'df';
8302
+ this.widgetSubType = 'sdf';
8303
+ this.langtranslations.languageSelectedObservable.subscribe((/**
8304
+ * @return {?}
8305
+ */
8306
+ () => {
8307
+ if (localStorage.getItem('websiteLanguage')) {
8308
+ this.translate.setDefaultLang('en');
8309
+ /** @type {?} */
8310
+ const lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
8311
+ this.translate.use(lang);
8312
+ }
8313
+ }));
8314
+ }
8249
8315
  /**
8250
8316
  * @return {?}
8251
8317
  */
8252
8318
  ngOnInit() {
8319
+ /** @type {?} */
8320
+ const instanceConfig = this.configSvc.instanceConfig;
8321
+ if (instanceConfig) {
8322
+ this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
8323
+ this.sourceLogos = instanceConfig.sources;
8324
+ this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
8325
+ }
8326
+ else {
8327
+ this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
8328
+ this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
8329
+ }
8330
+ }
8331
+ /**
8332
+ * @return {?}
8333
+ */
8334
+ showSnackbar() {
8335
+ if (this.showIntranetContent) {
8336
+ this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
8337
+ }
8338
+ else if (!this.isLiveOrMarkForDeletion) {
8339
+ this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
8340
+ }
8341
+ }
8342
+ /**
8343
+ * @param {?} contentData
8344
+ * @return {?}
8345
+ */
8346
+ getRedirectUrlData(contentData) {
8347
+ this.contentData.emit(contentData);
8348
+ }
8349
+ /**
8350
+ * @return {?}
8351
+ */
8352
+ raiseTelemetry() {
8353
+ // if(this.forPreview){
8354
+ // return
8355
+ // }
8356
+ this.events.raiseInteractTelemetry({
8357
+ type: 'click',
8358
+ subType: `${this.widgetType}-${this.widgetSubType}`,
8359
+ id: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
8360
+ }, {
8361
+ id: this.widgetData.content.identifier,
8362
+ type: this.widgetData.content.primaryCategory,
8363
+ //context: this.widgetData.context,
8364
+ rollup: {},
8365
+ ver: `${this.widgetData.content.version}${''}`,
8366
+ }, {
8367
+ pageIdExt: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
8368
+ module: camelCase(this.widgetData.content.primaryCategory),
8369
+ });
8253
8370
  }
8254
8371
  }
8255
8372
  CardWideV2Component.decorators = [
8256
8373
  { type: Component, args: [{
8257
8374
  selector: 'sb-uic-card-wide-v2',
8258
- template: "<p>card-wide-v2 works!</p>\n",
8259
- styles: [""]
8375
+ 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>",
8376
+ 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}"]
8260
8377
  }] }
8261
8378
  ];
8262
8379
  /** @nocollapse */
8263
- CardWideV2Component.ctorParameters = () => [];
8380
+ CardWideV2Component.ctorParameters = () => [
8381
+ { type: MatSnackBar },
8382
+ { type: EventService },
8383
+ { type: TranslateService },
8384
+ { type: MultilingualTranslationsService },
8385
+ { type: ConfigurationsService$1 }
8386
+ ];
8387
+ CardWideV2Component.propDecorators = {
8388
+ widgetData: [{ type: Input }],
8389
+ isLiveOrMarkForDeletion: [{ type: Input }],
8390
+ showIntranetContent: [{ type: Input }],
8391
+ isIntranetAllowedSettings: [{ type: Input }],
8392
+ cbPlanMapData: [{ type: Input }],
8393
+ isCardLoading: [{ type: Input }],
8394
+ contentData: [{ type: Output }]
8395
+ };
8396
+ if (false) {
8397
+ /** @type {?} */
8398
+ CardWideV2Component.prototype.widgetData;
8399
+ /** @type {?} */
8400
+ CardWideV2Component.prototype.isLiveOrMarkForDeletion;
8401
+ /** @type {?} */
8402
+ CardWideV2Component.prototype.showIntranetContent;
8403
+ /** @type {?} */
8404
+ CardWideV2Component.prototype.isIntranetAllowedSettings;
8405
+ /** @type {?} */
8406
+ CardWideV2Component.prototype.cbPlanMapData;
8407
+ /** @type {?} */
8408
+ CardWideV2Component.prototype.isCardLoading;
8409
+ /** @type {?} */
8410
+ CardWideV2Component.prototype.contentData;
8411
+ /** @type {?} */
8412
+ CardWideV2Component.prototype.isCardFlipped;
8413
+ /** @type {?} */
8414
+ CardWideV2Component.prototype.acbpConstants;
8415
+ /** @type {?} */
8416
+ CardWideV2Component.prototype.defaultThumbnail;
8417
+ /** @type {?} */
8418
+ CardWideV2Component.prototype.sourceLogos;
8419
+ /** @type {?} */
8420
+ CardWideV2Component.prototype.defaultSLogo;
8421
+ /** @type {?} */
8422
+ CardWideV2Component.prototype.showFlip;
8423
+ /** @type {?} */
8424
+ CardWideV2Component.prototype.widgetType;
8425
+ /** @type {?} */
8426
+ CardWideV2Component.prototype.widgetSubType;
8427
+ /**
8428
+ * @type {?}
8429
+ * @private
8430
+ */
8431
+ CardWideV2Component.prototype.snackBar;
8432
+ /**
8433
+ * @type {?}
8434
+ * @private
8435
+ */
8436
+ CardWideV2Component.prototype.events;
8437
+ /**
8438
+ * @type {?}
8439
+ * @private
8440
+ */
8441
+ CardWideV2Component.prototype.translate;
8442
+ /**
8443
+ * @type {?}
8444
+ * @private
8445
+ */
8446
+ CardWideV2Component.prototype.langtranslations;
8447
+ /**
8448
+ * @type {?}
8449
+ * @private
8450
+ */
8451
+ CardWideV2Component.prototype.configSvc;
8452
+ }
8264
8453
 
8265
8454
  /**
8266
8455
  * @fileoverview added by tsickle
@@ -8392,6 +8581,7 @@ class CompetencyPassbookComponent {
8392
8581
  this.competencySvc = competencySvc;
8393
8582
  this.router = router;
8394
8583
  this.cardDisplayCount = 3;
8584
+ this.dynamicAlignPills = 'center';
8395
8585
  this.emptyResponse = new EventEmitter();
8396
8586
  this.loadCometency = false;
8397
8587
  this.loadCompetencyArea = false;
@@ -8406,7 +8596,6 @@ class CompetencyPassbookComponent {
8406
8596
  * @return {?}
8407
8597
  */
8408
8598
  ngOnInit() {
8409
- this.getCompetencyArea();
8410
8599
  this.getAllCompetencies();
8411
8600
  // this.competencyData = this.objectData
8412
8601
  // this.filter(this.currentFilter)
@@ -8549,6 +8738,8 @@ class CompetencyPassbookComponent {
8549
8738
  (response) => {
8550
8739
  this.allcompetencyTheme = {};
8551
8740
  if (response && response.result && response.result.competency) {
8741
+ this.originalCompetencyArray = response.result.competency;
8742
+ this.getCompetencyArea();
8552
8743
  response.result.competency.forEach((/**
8553
8744
  * @param {?} element
8554
8745
  * @return {?}
@@ -8600,7 +8791,29 @@ class CompetencyPassbookComponent {
8600
8791
  const response = yield this.callCompetencySearch(request);
8601
8792
  if (response && response.results) {
8602
8793
  if (response.results.result.facets) {
8603
- this.competencyTheme = response.results.result.facets[0].values;
8794
+ /** @type {?} */
8795
+ let competencyThemeData = response.results.result.facets[0].values;
8796
+ this.originalCompetencyArray.forEach((/**
8797
+ * @param {?} element
8798
+ * @return {?}
8799
+ */
8800
+ (element) => {
8801
+ if (element.name.toLowerCase() === value) {
8802
+ this.competencyTheme = competencyThemeData.filter((/**
8803
+ * @param {?} ele1
8804
+ * @return {?}
8805
+ */
8806
+ (ele1) => {
8807
+ return element.children.find((/**
8808
+ * @param {?} ele2
8809
+ * @return {?}
8810
+ */
8811
+ (ele2) => ele2.name.toLowerCase() === ele1.name.toLowerCase()));
8812
+ }));
8813
+ this.showAllTheme = [{ name: 'Show all', showAll: false }];
8814
+ this.competencyThemeLength = 6;
8815
+ }
8816
+ }));
8604
8817
  this.resetViewMore();
8605
8818
  }
8606
8819
  this.loadCometency = false;
@@ -8637,7 +8850,6 @@ class CompetencyPassbookComponent {
8637
8850
  * @return {?}
8638
8851
  */
8639
8852
  displayAllTheme(event) {
8640
- debugger;
8641
8853
  this.showAllTheme[0]['showAll'] = !event.showAll;
8642
8854
  this.competencyThemeLength = event.showAll ? this.competencyTheme.length : 6;
8643
8855
  this.showAllTheme[0]['name'] = event.showAll ? 'Show less' : 'Show all';
@@ -8653,7 +8865,7 @@ class CompetencyPassbookComponent {
8653
8865
  CompetencyPassbookComponent.decorators = [
8654
8866
  { type: Component, args: [{
8655
8867
  selector: 'sb-uic-competency-passbook',
8656
- 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>",
8868
+ 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>",
8657
8869
  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}"]
8658
8870
  }] }
8659
8871
  ];
@@ -8668,6 +8880,9 @@ CompetencyPassbookComponent.propDecorators = {
8668
8880
  objectData: [{ type: Input }],
8669
8881
  providerId: [{ type: Input }],
8670
8882
  cardDisplayCount: [{ type: Input }],
8883
+ dynamicClass: [{ type: Input }],
8884
+ dynamicColor: [{ type: Input }],
8885
+ dynamicAlignPills: [{ type: Input }],
8671
8886
  emptyResponse: [{ type: Output }]
8672
8887
  };
8673
8888
  if (false) {
@@ -8678,12 +8893,20 @@ if (false) {
8678
8893
  /** @type {?} */
8679
8894
  CompetencyPassbookComponent.prototype.cardDisplayCount;
8680
8895
  /** @type {?} */
8896
+ CompetencyPassbookComponent.prototype.dynamicClass;
8897
+ /** @type {?} */
8898
+ CompetencyPassbookComponent.prototype.dynamicColor;
8899
+ /** @type {?} */
8900
+ CompetencyPassbookComponent.prototype.dynamicAlignPills;
8901
+ /** @type {?} */
8681
8902
  CompetencyPassbookComponent.prototype.emptyResponse;
8682
8903
  /** @type {?} */
8683
8904
  CompetencyPassbookComponent.prototype.loadCometency;
8684
8905
  /** @type {?} */
8685
8906
  CompetencyPassbookComponent.prototype.loadCompetencyArea;
8686
8907
  /** @type {?} */
8908
+ CompetencyPassbookComponent.prototype.originalCompetencyArray;
8909
+ /** @type {?} */
8687
8910
  CompetencyPassbookComponent.prototype.competencyArea;
8688
8911
  /** @type {?} */
8689
8912
  CompetencyPassbookComponent.prototype.selectedValue;
@@ -8717,6 +8940,9 @@ class PillsComponent {
8717
8940
  constructor() {
8718
8941
  this.isLoading = false;
8719
8942
  this.pillClick = new EventEmitter();
8943
+ this.dynamicClass = '';
8944
+ this.dynamicColor = '';
8945
+ this.requiredTitlecase = true;
8720
8946
  }
8721
8947
  /**
8722
8948
  * @return {?}
@@ -8734,8 +8960,8 @@ class PillsComponent {
8734
8960
  PillsComponent.decorators = [
8735
8961
  { type: Component, args: [{
8736
8962
  selector: 'sb-uic-pills',
8737
- 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",
8738
- 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}"]
8963
+ 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",
8964
+ 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}"]
8739
8965
  }] }
8740
8966
  ];
8741
8967
  /** @nocollapse */
@@ -8744,7 +8970,10 @@ PillsComponent.propDecorators = {
8744
8970
  pillsData: [{ type: Input }],
8745
8971
  selectedValue: [{ type: Input }],
8746
8972
  isLoading: [{ type: Input }],
8747
- pillClick: [{ type: Output }]
8973
+ pillClick: [{ type: Output }],
8974
+ dynamicClass: [{ type: Input }],
8975
+ dynamicColor: [{ type: Input }],
8976
+ requiredTitlecase: [{ type: Input }]
8748
8977
  };
8749
8978
  if (false) {
8750
8979
  /** @type {?} */
@@ -8755,6 +8984,12 @@ if (false) {
8755
8984
  PillsComponent.prototype.isLoading;
8756
8985
  /** @type {?} */
8757
8986
  PillsComponent.prototype.pillClick;
8987
+ /** @type {?} */
8988
+ PillsComponent.prototype.dynamicClass;
8989
+ /** @type {?} */
8990
+ PillsComponent.prototype.dynamicColor;
8991
+ /** @type {?} */
8992
+ PillsComponent.prototype.requiredTitlecase;
8758
8993
  }
8759
8994
 
8760
8995
  /**
@@ -9659,5 +9894,5 @@ UserContentRatingLibModule.decorators = [
9659
9894
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
9660
9895
  */
9661
9896
 
9662
- 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 };
9897
+ 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 };
9663
9898
  //# sourceMappingURL=sunbird-cb-consumption.js.map