@sunbird-cb/consumption 0.0.17 → 0.0.18

package/esm5/lib/_common/pills/pills.component.js

@@ -7,6 +7,9 @@ var PillsComponent = /** @class */ (function () {
     function PillsComponent() {
         this.isLoading = false;
         this.pillClick = new EventEmitter();
+        this.dynamicClass = '';
+        this.dynamicColor = '';
+        this.requiredTitlecase = true;
     }
     /**
      * @return {?}
@@ -30,8 +33,8 @@ var PillsComponent = /** @class */ (function () {
     PillsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-pills',
-                    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",
-                    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}"]
+                    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",
+                    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}"]
                 }] }
     ];
     /** @nocollapse */
@@ -40,7 +43,10 @@ var PillsComponent = /** @class */ (function () {
         pillsData: [{ type: Input }],
         selectedValue: [{ type: Input }],
         isLoading: [{ type: Input }],
-        pillClick: [{ type: Output }]
+        pillClick: [{ type: Output }],
+        dynamicClass: [{ type: Input }],
+        dynamicColor: [{ type: Input }],
+        requiredTitlecase: [{ type: Input }]
     };
     return PillsComponent;
 }());
@@ -54,5 +60,11 @@ if (false) {
     PillsComponent.prototype.isLoading;
     /** @type {?} */
     PillsComponent.prototype.pillClick;
+    /** @type {?} */
+    PillsComponent.prototype.dynamicClass;
+    /** @type {?} */
+    PillsComponent.prototype.dynamicColor;
+    /** @type {?} */
+    PillsComponent.prototype.requiredTitlecase;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlsbHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHN1bmJpcmQtY2IvY29uc3VtcHRpb24vIiwic291cmNlcyI6WyJsaWIvX2NvbW1vbi9waWxscy9waWxscy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0U7SUFXRTtRQUZTLGNBQVMsR0FBWSxLQUFLLENBQUE7UUFDekIsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUE7SUFDN0IsQ0FBQzs7OztJQUVqQixpQ0FBUTs7O0lBQVI7SUFDQSxDQUFDOzs7OztJQUNELHFDQUFZOzs7O0lBQVosVUFBYSxRQUFhO1FBQ3hCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFBO0lBQy9CLENBQUM7O2dCQWpCRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7b0JBQ3hCLHd6QkFBcUM7O2lCQUV0Qzs7Ozs7NEJBR0UsS0FBSztnQ0FDTCxLQUFLOzRCQUNMLEtBQUs7NEJBQ0wsTUFBTTs7SUFVVCxxQkFBQztDQUFBLEFBcEJELElBb0JDO1NBZlksY0FBYzs7O0lBRXpCLG1DQUF1Qjs7SUFDdkIsdUNBQTJCOztJQUMzQixtQ0FBbUM7O0lBQ25DLG1DQUE2QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2ItdWljLXBpbGxzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BpbGxzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGlsbHMuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBQaWxsc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KCkgcGlsbHNEYXRhOiBhbnlcbiAgQElucHV0KCkgc2VsZWN0ZWRWYWx1ZTogYW55XG4gIEBJbnB1dCgpIGlzTG9hZGluZzogYm9vbGVhbiA9IGZhbHNlXG4gIEBPdXRwdXQoKSBwaWxsQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKVxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICB9XG4gIHNlbGVjdGVkUGlsbChwaWxsRGF0YTogYW55KSB7XG4gICAgdGhpcy5waWxsQ2xpY2suZW1pdChwaWxsRGF0YSlcbiAgfVxuXG5cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGlsbHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHN1bmJpcmQtY2IvY29uc3VtcHRpb24vIiwic291cmNlcyI6WyJsaWIvX2NvbW1vbi9waWxscy9waWxscy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0U7SUFlRTtRQU5TLGNBQVMsR0FBWSxLQUFLLENBQUE7UUFDekIsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUE7UUFDcEMsaUJBQVksR0FBUSxFQUFFLENBQUE7UUFDdEIsaUJBQVksR0FBUSxFQUFFLENBQUE7UUFDdEIsc0JBQWlCLEdBQVksSUFBSSxDQUFBO0lBRTFCLENBQUM7Ozs7SUFFakIsaUNBQVE7OztJQUFSO0lBQ0EsQ0FBQzs7Ozs7SUFDRCxxQ0FBWTs7OztJQUFaLFVBQWEsUUFBYTtRQUN4QixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQTtJQUMvQixDQUFDOztnQkFyQkYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4Qix3bUNBQXFDOztpQkFFdEM7Ozs7OzRCQUdFLEtBQUs7Z0NBQ0wsS0FBSzs0QkFDTCxLQUFLOzRCQUNMLE1BQU07K0JBQ04sS0FBSzsrQkFDTCxLQUFLO29DQUNMLEtBQUs7O0lBV1IscUJBQUM7Q0FBQSxBQXhCRCxJQXdCQztTQW5CWSxjQUFjOzs7SUFFekIsbUNBQXVCOztJQUN2Qix1Q0FBMkI7O0lBQzNCLG1DQUFtQzs7SUFDbkMsbUNBQTZDOztJQUM3QyxzQ0FBK0I7O0lBQy9CLHNDQUErQjs7SUFDL0IsMkNBQTBDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYi11aWMtcGlsbHMnLFxuICB0ZW1wbGF0ZVVybDogJy4vcGlsbHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9waWxscy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFBpbGxzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKSBwaWxsc0RhdGE6IGFueVxuICBASW5wdXQoKSBzZWxlY3RlZFZhbHVlOiBhbnlcbiAgQElucHV0KCkgaXNMb2FkaW5nOiBib29sZWFuID0gZmFsc2VcbiAgQE91dHB1dCgpIHBpbGxDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpXG4gIEBJbnB1dCgpIGR5bmFtaWNDbGFzczogYW55ID0gJydcbiAgQElucHV0KCkgZHluYW1pY0NvbG9yOiBhbnkgPSAnJ1xuICBASW5wdXQoKSByZXF1aXJlZFRpdGxlY2FzZTogYm9vbGVhbiA9IHRydWVcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICB9XG4gIHNlbGVjdGVkUGlsbChwaWxsRGF0YTogYW55KSB7XG4gICAgdGhpcy5waWxsQ2xpY2suZW1pdChwaWxsRGF0YSlcbiAgfVxuXG5cbn1cbiJdfQ==

package/fesm2015/sunbird-cb-consumption.js

@@ -3235,6 +3235,8 @@ if (false) {
     IStripUnitContentData.prototype.secondaryHeading;
     /** @type {?} */
     IStripUnitContentData.prototype.viewMoreUrl;
+    /** @type {?|undefined} */
+    IStripUnitContentData.prototype.request;
 }
 class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
     /**
@@ -7060,7 +7062,7 @@ class CardsComponent extends WidgetBaseComponent {
 CardsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-cards',
-                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",
+                template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skelton'\" [ngTemplateOutlet]=\"cardWideV2Skelton\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skelton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n\n  <ng-template #cardUser>\n    <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n  </ng-template>\n",
                 styles: [""]
             }] }
 ];
@@ -8043,7 +8045,7 @@ CardWideComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-wide',
                 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",
-                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}}"]
+                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}}"]
             }] }
 ];
 /** @nocollapse */
@@ -8245,22 +8247,170 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CardWideV2Component {
-    constructor() { }
+    /**
+     * @param {?} snackBar
+     * @param {?} events
+     * @param {?} translate
+     * @param {?} langtranslations
+     * @param {?} configSvc
+     */
+    constructor(snackBar, events, translate, langtranslations, configSvc) {
+        this.snackBar = snackBar;
+        this.events = events;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.configSvc = configSvc;
+        this.isCardLoading = false;
+        this.contentData = new EventEmitter();
+        this.isCardFlipped = false;
+        this.showFlip = false;
+        this.widgetType = 'df';
+        this.widgetSubType = 'sdf';
+        this.langtranslations.languageSelectedObservable.subscribe((/**
+         * @return {?}
+         */
+        () => {
+            if (localStorage.getItem('websiteLanguage')) {
+                this.translate.setDefaultLang('en');
+                /** @type {?} */
+                const lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                this.translate.use(lang);
+            }
+        }));
+    }
     /**
      * @return {?}
      */
     ngOnInit() {
+        /** @type {?} */
+        const instanceConfig = this.configSvc.instanceConfig;
+        if (instanceConfig) {
+            this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
+            this.sourceLogos = instanceConfig.sources;
+            this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
+        }
+        else {
+            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
+    }
+    /**
+     * @return {?}
+     */
+    showSnackbar() {
+        if (this.showIntranetContent) {
+            this.snackBar.open('Content is only available in intranet', 'X', { duration: 2000 });
+        }
+        else if (!this.isLiveOrMarkForDeletion) {
+            this.snackBar.open('Content may be expired or deleted', 'X', { duration: 2000 });
+        }
+    }
+    /**
+     * @param {?} contentData
+     * @return {?}
+     */
+    getRedirectUrlData(contentData) {
+        this.contentData.emit(contentData);
+    }
+    /**
+     * @return {?}
+     */
+    raiseTelemetry() {
+        // if(this.forPreview){
+        //   return
+        // }
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: `${this.widgetType}-${this.widgetSubType}`,
+            id: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
+        }, {
+            id: this.widgetData.content.identifier,
+            type: this.widgetData.content.primaryCategory,
+            //context: this.widgetData.context,
+            rollup: {},
+            ver: `${this.widgetData.content.version}${''}`,
+        }, {
+            pageIdExt: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
+            module: camelCase(this.widgetData.content.primaryCategory),
+        });
     }
 }
 CardWideV2Component.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-wide-v2',
-                template: "<p>card-wide-v2 works!</p>\n",
-                styles: [""]
+                template: "<mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n    <div class=\"imageholder \">\n      <img mat-card-image class=\"margin-remove\"\n      [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon  | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n      [alt]=\"widgetData?.content?.name\">\n      <div class=\"source-div\" [hidden]=\"true\">\n        <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n          [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n      </div>\n      <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n        <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n        <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n      </div>\n      <!-- <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n        <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n          cbpData: cbPlanMapData[widgetData?.content?.identifier]\n        }}\"></ng-container>\n      </ng-container> -->\n    </div>\n    <mat-card-content class=\"mat-text-box\">\n      <div class=\"course_widget flex flex-between margin-remove\">\n        <div class=\"flex flex-end course_v2\">\n          <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n            <mat-icon  class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"Audio\" *ngIf=\"widgetData?.content?.mimeType === 'audio/mpeg'\">\n              mic</mat-icon>\n\n            <mat-icon  class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"Assessment\" *ngIf=\"widgetData?.content?.mimeType === 'application/json' || widgetData?.content?.mimeType === 'application/quiz'\">\n              assessment</mat-icon>\n\n            <mat-icon  class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"PDF\" *ngIf=\"widgetData?.content?.mimeType === 'application/pdf'\">\n              picture_as_pdf</mat-icon>\n\n            <mat-icon  class=\"mat-icon ws-mat-default-text margin-right-xs\" alt=\"Video\" *ngIf=\"widgetData?.content?.mimeType === 'video/mp4' || widgetData?.content?.mimeType === 'video/x-youtube' || widgetData?.content?.mimeType === 'application/x-mpegURL'\">\n              videocam</mat-icon>\n\n            <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\" alt=\"Course\"  *ngIf=\"widgetData?.content?.mimeType === 'application/vnd.ekstep.content-collection'\">\n              video_library\n            </mat-icon>\n\n            <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\" alt=\"HTML\"  *ngIf=\"widgetData?.content?.mimeType === 'application/vnd.ekstep.html-archive' || widgetData?.content?.mimeType === 'application/vnd.ekstep.ecml-archive' || widgetData?.content?.mimeType === 'text/x-url' || widgetData?.content?.mimeType === 'application/survey'\">\n              attachment\n            </mat-icon>\n\n            <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\" alt=\"Module\"  *ngIf=\"widgetData?.content?.mimeType === 'image/jpeg' || widgetData?.content?.mimeType === 'image/png'\">\n              image\n            </mat-icon>\n            <span class=\"ws-mat-black60-text font-normal mat-caption \">\n              {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n              <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n            </span>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"flex main_title_box\">\n        <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n          <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n            {{widgetData?.content?.name}}\n          </a>\n      </p>\n      </div>\n\n      <div class=\"bottomsection\">\n        <div class=\"flex w-full flex-wrap flex-middle provider\">\n          <div class=\"course_logo_box\">\n            <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n            [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n          </div>\n          <span class=\"org-text\">By&nbsp;\n            <!-- {{'cardcontentv2.by' | translate}}  -->\n            {{widgetData?.content?.organisation[0] }}</span>\n        </div>\n        <div class=\"flex flex-middle rating-session margin-top-xs\">\n          <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n            <mat-icon>star</mat-icon>\n            <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n          </div>\n          <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n          <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n            <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n          </ng-container>\n          <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n            <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n          </ng-container>\n        </div>\n      </div>\n    </mat-card-content>\n  </mat-card>\n",
+                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}}"]
             }] }
 ];
 /** @nocollapse */
-CardWideV2Component.ctorParameters = () => [];
+CardWideV2Component.ctorParameters = () => [
+    { type: MatSnackBar },
+    { type: EventService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService },
+    { type: ConfigurationsService$1 }
+];
+CardWideV2Component.propDecorators = {
+    widgetData: [{ type: Input }],
+    isLiveOrMarkForDeletion: [{ type: Input }],
+    showIntranetContent: [{ type: Input }],
+    isIntranetAllowedSettings: [{ type: Input }],
+    isCardLoading: [{ type: Input }],
+    contentData: [{ type: Output }]
+};
+if (false) {
+    /** @type {?} */
+    CardWideV2Component.prototype.widgetData;
+    /** @type {?} */
+    CardWideV2Component.prototype.isLiveOrMarkForDeletion;
+    /** @type {?} */
+    CardWideV2Component.prototype.showIntranetContent;
+    /** @type {?} */
+    CardWideV2Component.prototype.isIntranetAllowedSettings;
+    /** @type {?} */
+    CardWideV2Component.prototype.isCardLoading;
+    /** @type {?} */
+    CardWideV2Component.prototype.contentData;
+    /** @type {?} */
+    CardWideV2Component.prototype.isCardFlipped;
+    /** @type {?} */
+    CardWideV2Component.prototype.defaultThumbnail;
+    /** @type {?} */
+    CardWideV2Component.prototype.sourceLogos;
+    /** @type {?} */
+    CardWideV2Component.prototype.defaultSLogo;
+    /** @type {?} */
+    CardWideV2Component.prototype.showFlip;
+    /** @type {?} */
+    CardWideV2Component.prototype.widgetType;
+    /** @type {?} */
+    CardWideV2Component.prototype.widgetSubType;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideV2Component.prototype.snackBar;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideV2Component.prototype.events;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideV2Component.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideV2Component.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideV2Component.prototype.configSvc;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -8392,6 +8542,7 @@ class CompetencyPassbookComponent {
         this.competencySvc = competencySvc;
         this.router = router;
         this.cardDisplayCount = 3;
+        this.dynamicAlignPills = 'center';
         this.emptyResponse = new EventEmitter();
         this.loadCometency = false;
         this.loadCompetencyArea = false;
@@ -8406,7 +8557,6 @@ class CompetencyPassbookComponent {
      * @return {?}
      */
     ngOnInit() {
-        this.getCompetencyArea();
         this.getAllCompetencies();
         // this.competencyData = this.objectData
         // this.filter(this.currentFilter)
@@ -8549,6 +8699,8 @@ class CompetencyPassbookComponent {
         (response) => {
             this.allcompetencyTheme = {};
             if (response && response.result && response.result.competency) {
+                this.originalCompetencyArray = response.result.competency;
+                this.getCompetencyArea();
                 response.result.competency.forEach((/**
                  * @param {?} element
                  * @return {?}
@@ -8600,7 +8752,29 @@ class CompetencyPassbookComponent {
                 const response = yield this.callCompetencySearch(request);
                 if (response && response.results) {
                     if (response.results.result.facets) {
-                        this.competencyTheme = response.results.result.facets[0].values;
+                        /** @type {?} */
+                        let competencyThemeData = response.results.result.facets[0].values;
+                        this.originalCompetencyArray.forEach((/**
+                         * @param {?} element
+                         * @return {?}
+                         */
+                        (element) => {
+                            if (element.name.toLowerCase() === value) {
+                                this.competencyTheme = competencyThemeData.filter((/**
+                                 * @param {?} ele1
+                                 * @return {?}
+                                 */
+                                (ele1) => {
+                                    return element.children.find((/**
+                                     * @param {?} ele2
+                                     * @return {?}
+                                     */
+                                    (ele2) => ele2.name.toLowerCase() === ele1.name.toLowerCase()));
+                                }));
+                                this.showAllTheme = [{ name: 'Show all', showAll: false }];
+                                this.competencyThemeLength = 6;
+                            }
+                        }));
                         this.resetViewMore();
                     }
                     this.loadCometency = false;
@@ -8637,7 +8811,6 @@ class CompetencyPassbookComponent {
      * @return {?}
      */
     displayAllTheme(event) {
-        debugger;
         this.showAllTheme[0]['showAll'] = !event.showAll;
         this.competencyThemeLength = event.showAll ? this.competencyTheme.length : 6;
         this.showAllTheme[0]['name'] = event.showAll ? 'Show less' : 'Show all';
@@ -8653,7 +8826,7 @@ class CompetencyPassbookComponent {
 CompetencyPassbookComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-competency-passbook',
-                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>",
+                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>",
                 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}"]
             }] }
 ];
@@ -8668,6 +8841,9 @@ CompetencyPassbookComponent.propDecorators = {
     objectData: [{ type: Input }],
     providerId: [{ type: Input }],
     cardDisplayCount: [{ type: Input }],
+    dynamicClass: [{ type: Input }],
+    dynamicColor: [{ type: Input }],
+    dynamicAlignPills: [{ type: Input }],
     emptyResponse: [{ type: Output }]
 };
 if (false) {
@@ -8678,12 +8854,20 @@ if (false) {
     /** @type {?} */
     CompetencyPassbookComponent.prototype.cardDisplayCount;
     /** @type {?} */
+    CompetencyPassbookComponent.prototype.dynamicClass;
+    /** @type {?} */
+    CompetencyPassbookComponent.prototype.dynamicColor;
+    /** @type {?} */
+    CompetencyPassbookComponent.prototype.dynamicAlignPills;
+    /** @type {?} */
     CompetencyPassbookComponent.prototype.emptyResponse;
     /** @type {?} */
     CompetencyPassbookComponent.prototype.loadCometency;
     /** @type {?} */
     CompetencyPassbookComponent.prototype.loadCompetencyArea;
     /** @type {?} */
+    CompetencyPassbookComponent.prototype.originalCompetencyArray;
+    /** @type {?} */
     CompetencyPassbookComponent.prototype.competencyArea;
     /** @type {?} */
     CompetencyPassbookComponent.prototype.selectedValue;
@@ -8717,6 +8901,9 @@ class PillsComponent {
     constructor() {
         this.isLoading = false;
         this.pillClick = new EventEmitter();
+        this.dynamicClass = '';
+        this.dynamicColor = '';
+        this.requiredTitlecase = true;
     }
     /**
      * @return {?}
@@ -8734,8 +8921,8 @@ class PillsComponent {
 PillsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-pills',
-                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",
-                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}"]
+                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",
+                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}"]
             }] }
 ];
 /** @nocollapse */
@@ -8744,7 +8931,10 @@ PillsComponent.propDecorators = {
     pillsData: [{ type: Input }],
     selectedValue: [{ type: Input }],
     isLoading: [{ type: Input }],
-    pillClick: [{ type: Output }]
+    pillClick: [{ type: Output }],
+    dynamicClass: [{ type: Input }],
+    dynamicColor: [{ type: Input }],
+    requiredTitlecase: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
@@ -8755,6 +8945,12 @@ if (false) {
     PillsComponent.prototype.isLoading;
     /** @type {?} */
     PillsComponent.prototype.pillClick;
+    /** @type {?} */
+    PillsComponent.prototype.dynamicClass;
+    /** @type {?} */
+    PillsComponent.prototype.dynamicColor;
+    /** @type {?} */
+    PillsComponent.prototype.requiredTitlecase;
 }
 
 /**