@sunbird-cb/collection 1.0.36 → 1.0.38

package/fesm2015/sunbird-cb-collection.js

@@ -20765,10 +20765,11 @@ LeftMenuModule.decorators = [
 
 class OrgUserTableComponent {
     constructor() {
+        this.isSearchBar = true;
         this.eOnRowClick = new EventEmitter();
         this.eOnButtonClick = new EventEmitter();
         this.searchByEnterKey = new EventEmitter();
-        this.isSearchBar = true;
+        this.tagSelectedData = new EventEmitter();
         this.bodyHeight = document.body.clientHeight - 125;
         this.pageSize = 20;
         this.pageSizeOptions = [20, 30, 40];
@@ -20791,7 +20792,9 @@ class OrgUserTableComponent {
     ngOnChanges(data) {
         this.dataSource.data = get(data, 'data.currentValue');
         this.length = this.dataSource.data.length;
-        this.paginator.firstPage();
+        if (this.paginator) {
+            this.paginator.firstPage();
+        }
     }
     ngAfterViewInit() {
         if (this.data) {
@@ -20832,6 +20835,9 @@ class OrgUserTableComponent {
             if (this.tableData.needUserMenus) {
                 columns.push('Menu');
             }
+            if (this.tableData.cbpPlanMenu) {
+                columns.push('CBP Menu');
+            }
             return columns;
         }
         return '';
@@ -20864,12 +20870,30 @@ class OrgUserTableComponent {
     onSearchEnter(event) {
         this.searchByEnterKey.emit(event.target.value);
     }
+    tagSelectedItem(_item) {
+        this.tagSelectedData.emit(_item);
+    }
+    checkIfEnabled(_rowData, _item) {
+        if (_rowData.status.toLowerCase() === 'live' && _item.key === 'publishContent') {
+            return false;
+        }
+        if (_item.isMdoLeader) {
+            return true;
+        }
+        if (_item.isMdoAdmin && _rowData.createdBy === this.userId) {
+            return true;
+        }
+        if (_item.isMdoAdmin && _rowData.createdBy !== this.userId && _item.key === 'preivewContent') {
+            return true;
+        }
+        return false;
+    }
 }
 OrgUserTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ws-widget-org-user-table',
-                template: "<div class=\"example-container margin-top-m\">\r\n    <div class=\"example-loading-shade\"></div>\r\n\r\n    <div class=\"example-table-container\">\r\n        <div class=\"container\">\r\n            <div class=\"flex flex-1 custom\">\r\n                <div class=\"flex-1\">\r\n                    <div class=\"search\" *ngIf=\"isSearchBar\">\r\n                        <div class=rsearch>\r\n                            <mat-icon class=\"color-60 search-icon\">search</mat-icon>\r\n                            <input class=\"sinput color-60\" type=\"Standard\" label=\"\"\r\n                                (input)=\"applyFilter($event.target.value)\" (keydown.enter)=\"onSearchEnter($event)\"\r\n                                placeholder=\"Search\">\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"flex-2 margin-left-l position-rel\" *ngIf=\"isTrainingPlan && trainingTagList?.length > 0\">\r\n                    <a class=\"training-tag mat-button\" [ngClass]=\"{'margin-right-s': trainingTagList?.length > 0}\"\r\n                        *ngFor=\"let item of trainingTagList\">{{item}}</a>\r\n                    <button mat-icon-button class=\"training-filter-btn\">\r\n                        <mat-icon>filter_list</mat-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex-2 right-align\" *ngIf=\"isDownload || isConsumptionReport || isCreate\">\r\n                    <!-- <button type=\"button\" mat-button class=\"upload-btn\" *ngIf=\"isUpload\"\r\n                        (click)=\"onButtonClick('upload', $event)\">\r\n                        <mat-icon>vertical_align_top</mat-icon> File upload\r\n                    </button> -->\r\n                    <button type=\"button\" mat-button class=\"upload-btn\" *ngIf=\"isDownload\"\r\n                        (click)=\"onButtonClick('download', $event)\">\r\n                        <mat-icon>vertical_align_bottom</mat-icon> Users Report\r\n                    </button>\r\n                    <button type=\"button\" mat-button class=\"upload-btn\" *ngIf=\"isConsumptionReport\"\r\n                        (click)=\"onButtonClick('consumptionReport', $event)\">\r\n                        <mat-icon>vertical_align_bottom</mat-icon> Consumption Report\r\n                    </button>\r\n                    <button type=\"button\" mat-button class=\"create-btn\" *ngIf=\"isCreate\"\r\n                        (click)=\"onButtonClick('createUser', $event)\">\r\n                        Create new\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- </mat-form-field> -->\r\n        <mat-table #table matSort [ngStyle]=\"{'height': bodyHeight}\" [matSortActive]=\"tableData!.sortColumn\"\r\n            [matSortDirection]=\"tableData!.sortState\" [dataSource]=\"dataSource\"\r\n            class=\"example-table table1 responsiveTable\" *ngIf=\"dataSource.filteredData.length > 0\">\r\n\r\n            <ng-container matColumnDef=\"{{col.key}}\" *ngFor=\"let col of tableData!.columns\">\r\n                <mat-header-cell *matHeaderCellDef mat-sort-header class=\".h-400-r-14-l color-60\"> {{col.displayName}}\r\n                </mat-header-cell>\r\n                <mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\r\n                    <img *ngIf=\"col?.imageUrl\" src=\"{{element.posterImage}}\" class=\"pb-image\">\r\n                    <span *ngIf=\"col?.isList\" class=\"h-400-r-14-l color-87 textclass\">\r\n                        <div innerHTML=\"{{element[col.key]}}\"></div>\r\n                    </span>\r\n                    <span *ngIf=\"!col?.isList\" class=\"h-400-r-14-l color-87 textclass\">\r\n                        {{(col.key === 'dateCreatedOn' || col.key === 'dateUpdatedOn') ? (element[col.key] | date:'dd\r\n                        MMM yyy h:mm a') : element[col.key]}} {{col?.isList}}\r\n                    </span>\r\n                </mat-cell>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"Actions\" *ngIf=\"tableData!.actions && tableData!.actions.length > 0\">\r\n                <mat-header-cell *matHeaderCellDef class=\"clr-darkish-blue action-header\"> {{\r\n                    tableData!.actionColumnName || \"Actions\"}}\r\n                </mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"action-cell\">\r\n                    <div *ngFor=\"let ac of tableData!.actions\">\r\n                        <div *ngIf=\"ac.optional\">\r\n                            <ws-widget-app-button *ngIf=\"row[ac.optional_key] === ac.optional_Value\" [type]=\"ac.type\"\r\n                                [icon]=\"ac.icon\" [disabled]=\"ac.disabled || false\" [label]=\"ac.label\"\r\n                                (click)=\"buttonClick(ac.name,row)\"></ws-widget-app-button>\r\n                        </div>\r\n                        <div *ngIf=\"!ac.optional\">\r\n                            <ws-widget-app-button [type]=\"ac.type\" [icon]=\"ac.icon\" [label]=\"ac.label\"\r\n                                [disabled]=\"ac.disabled || false\" (click)=\"buttonClick(ac.name,row)\">\r\n                            </ws-widget-app-button>\r\n                        </div>\r\n                    </div>\r\n                </mat-cell>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"Menu\">\r\n                <mat-header-cell *matHeaderCellDef class=\"clr-darkish-blue action-header\">\r\n                    <!-- {{'Actions'}} -->\r\n                </mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"action-cell\">\r\n                    <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\r\n                        [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':row}\" class=\"action-btn\">\r\n                        <mat-icon>more_horiz</mat-icon>\r\n                    </button>\r\n                </mat-cell>\r\n            </ng-container>\r\n\r\n            <mat-header-row *matHeaderRowDef=\"getFinalColumns()\"></mat-header-row>\r\n\r\n            <mat-row *matRowDef=\"let row; columns: getFinalColumns();\" (click)=\"selection.toggle(row);\">\r\n            </mat-row>\r\n\r\n            <!-- <div *ngIf=\"dataSource.filteredData.length <= 0\">\r\n                <mat-row *matRowDef=\"let row; columns: getFinalColumns();\"\r\n                    (click)=\"selection.toggle(row); onRowClick(row)\">\r\n                    ssss\r\n                </mat-row>\r\n            </div> -->\r\n        </mat-table>\r\n        <div class=\"no-cbp-data\" *ngIf=\"dataSource.filteredData.length == 0 && isTrainingPlan\">\r\n            <div><img src=\"/assets/icons/no-data.svg\"></div>\r\n            <div class=\"mat-subheading-1 margin-remove\">No CBP plan created yet</div>\r\n            <div>Create a CBP plan to assign users.</div>\r\n            <div class=\"margin-top-m\">\r\n                <button mat-button type=\"button\" class=\"create-btn\"\r\n                    (click)=\"onButtonClick('createCbpPlan', $event)\">Create CBP</button>\r\n            </div>\r\n        </div>\r\n        <mat-card class=\"flex-1\" role=\"none\" *ngIf=\"dataSource.filteredData.length == 0 && !isTrainingPlan\">\r\n            <span class=\"mat-subtitle\">No data found</span>\r\n        </mat-card>\r\n    </div>\r\n    <!-- <div *ngIf=\"dataSource.filteredData.length <= 0\" class=\"h-600-s-20-m color-60 text-center\">No result found\r\n    </div> -->\r\n    <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\">\r\n    </mat-paginator>\r\n</div>\r\n\r\n<mat-menu #cardMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-rowData=\"data\">\r\n        <!-- <div > -->\r\n        <button (click)=\"buttonClick('editInfo',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\"\r\n            *ngIf=\"rowData.allowEditUser && showEditOnCondition\">\r\n            <mat-icon>edit</mat-icon> <span>Edit Info</span>\r\n        </button>\r\n        <button (click)=\"buttonClick('editInfo',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\" *ngIf=\"!showEditOnCondition\">\r\n            <mat-icon>edit</mat-icon> <span>Edit Info</span>\r\n        </button>\r\n        <button (click)=\"buttonClick('showOnKarma',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\r\n            <mat-icon>input</mat-icon> <span>Show on Karmayogi</span>\r\n        </button>\r\n        <!-- </div> -->\r\n        <!-- <div mat-menu-item> -->\r\n        <!-- <button (click)=\"rowData && rowData.blocked ? buttonClick('unblock',rowData): buttonClick('block',rowData)\"\r\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\r\n            aria-label=\"Analytics\">\r\n            <mat-icon>block</mat-icon><span>{{rowData && rowData.blocked ? 'Unblock user':'Block user' }}</span>\r\n        </button> -->\r\n        <!-- </div> -->\r\n        <!-- <div mat-menu-item> -->\r\n        <button *ngIf=\"userId != rowData.userId\"\r\n            (click)=\"rowData && rowData.active ? buttonClick('deactive',rowData): buttonClick('active',rowData)\"\r\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\r\n            aria-label=\"Analytics\">\r\n            <mat-icon>toggle_off_sharp</mat-icon>\r\n            <span>{{rowData && rowData.active? 'Deactivate user':'Activate user'}}</span>\r\n        </button>\r\n        <!-- </div> -->\r\n        <!-- <div mat-menu-item> -->\r\n        <!-- <button (click)=\"buttonClick('delete',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\r\n            <mat-icon>delete</mat-icon><span>Delete User</span>\r\n        </button> -->\r\n        <!-- </div> -->\r\n    </ng-template>\r\n</mat-menu>",
-                styles: [".card-minimal-container{position:relative}.card-minimal-container .card-link{width:265px;height:150px;display:block}.card-minimal-container .card-link .card-thumbnail{object-fit:contain;width:100%;height:100%}.card-minimal-container .card-overlay{position:absolute;bottom:4px;background-color:rgba(0,0,0,.55);color:#fff;padding:4px 12px;box-sizing:border-box;width:100%}.card-minimal-container .card-overlay .card-title{margin-bottom:-6px}.status-danger{width:16px;height:16px;position:absolute;border-radius:50%;top:16px;left:16px;pointer-events:auto;cursor:pointer;background:#ce3939}.card-space-saving-container{position:relative;width:265px;height:100%;box-sizing:border-box}.card-space-saving-container .progress-bar{display:block;width:calc(100% + 32px);margin-left:-16px;margin-top:-16px}.card-space-saving-container mat-card-content{margin:0 -4px;min-height:120px}.card-space-saving-container .card-img{height:150px;display:block}.card-space-saving-container .card-header-meta{margin-top:8px}.card-space-saving-container .title-text{display:block;margin:12px 0}.card-space-saving-container .flip-desc-text{position:relative;overflow:hidden;line-height:1.4em;height:5.6em;margin-bottom:36px}.card-space-saving-container .flip-actions{position:absolute;bottom:0;left:0;width:100%;padding:12px;box-sizing:border-box}.card-space-saving-container .flip-actions .source-name{margin-bottom:0;font-weight:400}.card-ford-container{padding:16px 16px 0;position:relative;width:220px;height:243px;overflow:hidden;box-sizing:border-box}.card-ford-container .progress-bar{display:block;width:calc(100% + 32px);margin-left:-16px;margin-top:-16px}.card-ford-container mat-card-content{margin:160px}.card-ford-container .card-img{height:125px;display:block;object-fit:contain}@media only screen and (max-width:599px){.card-ford-container{width:200px;height:240px}.card-ford-container .card-img{height:115px}}.card-ford-container .complexity{display:flex;font-size:14px}.card-ford-container .duration{height:1.6em;display:flex}.card-ford-container .duration .resource-type{order:3;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-ford-container .duration .duration-time{order:2;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-ford-container .title-text{margin:12px 0;position:relative;overflow:hidden;height:1.3em;line-height:1.3em;text-overflow:ellipsis;white-space:nowrap}.card-ford-container .mode-tag{border-radius:5px;color:#fff}.card-ford-container .description-text{position:relative;overflow:hidden;height:4.2em;line-height:1.4em}.card-ford-container .mat-chip-list-wrapper{padding:8px 0 16px!important}.card-ford-container .text-description-trim{overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:9;display:-webkit-box;-webkit-box-orient:vertical;text-align:justify}.card-standard-container{position:relative;width:268px;height:100%;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px #99999933}.card-standard-container .progress-bar{display:block;width:calc(100% + 30px);margin-left:-15px;display:flex;margin-top:62px;background:bisque}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{margin:0 -4px}.card-standard-container .card-img{min-width:269px;max-width:269px;display:block;object-fit:contain;border-top-left-radius:8px;border-top-right-radius:8px}.card-standard-container .complexity{padding-top:7px;display:flex;font-size:14px;line-height:27px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3}.card-standard-container .complexity .time-text{margin:0 5px 0 6px}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{margin:12px 0;position:relative;overflow:hidden;height:3.78em;line-height:1.89em}.card-standard-container .description-text{position:relative;overflow:hidden;height:5.7em;line-height:1.9em}.card-discussions-container{flex:1;display:flex;position:relative;height:100%;min-height:140px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px #99999933}.card-discussions-container .progress-bar{display:block;width:calc(100% + 30px);margin-left:-15px;display:flex;margin-top:62px;background:bisque}.card-discussions-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-discussions-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-discussions-container mat-card-content{margin:0 -4px;flex:1}.card-discussions-container .card-img{min-width:269px;max-width:269px;display:block;object-fit:contain;border-top-left-radius:8px;border-top-right-radius:8px}.card-discussions-container .complexity{padding-top:7px;display:flex;font-size:14px;line-height:27px;padding-bottom:10px}.card-discussions-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-discussions-container .complexity .duration{display:flex;margin-left:auto;order:3}.card-discussions-container .complexity .time-text{margin:0 5px 0 6px}.card-discussions-container .basic{margin:auto 0}.card-discussions-container .title-text{overflow:hidden}.card-discussions-container .description-text{position:relative;overflow:hidden;height:auto;line-height:1.9em}.card-basic-infomartion-container{position:relative;width:265px;height:100%;box-sizing:border-box;min-height:300px}.card-basic-infomartion-container .card-img{height:150px;display:block;margin-bottom:0!important;object-fit:contain}.card-basic-infomartion-container .source-name{margin-bottom:0;font-weight:400;line-height:1.25rem!important}.card-basic-infomartion-container .title-text{margin:12px 0 0;position:relative;overflow:hidden;height:2.6em;line-height:1.3em}.card-basic-infomartion-container .source-image{object-fit:contain;height:35px;width:55px;overflow:auto}.card-with-user-details-container{position:relative;width:265px;height:100%;box-sizing:border-box;min-height:270px}.card-with-user-details-container .card-img{height:150px;display:block;margin-bottom:0!important;object-fit:contain}.card-with-user-details-container .source-name{margin-bottom:0;font-weight:400}.card-with-user-details-container .title-text{margin:12px 0 0;position:relative;overflow:hidden;height:2.6em;line-height:1.3em}.card-with-user-details-container .author-image{margin-right:12px;height:44px;width:44px}.card-with-user-details-container .back-color{background-color:#7e0a80}.card-with-user-details-container .space-0{margin-top:0!important;padding-top:0!important;margin-bottom:0!important}.detail-button{position:absolute;top:12px;right:12px;z-index:1}.greyOut{filter:grayscale(1);opacity:.7;cursor:auto!important}.disableClick{pointer-events:none}.display-contents{display:contents}.title-truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.typeofc{width:101px;height:30px;border:1px solid;border-radius:8px;opacity:.4;align-items:center;justify-content:center;display:flex}.flex-9{flex:9}.center-right{align-items:center;justify-content:flex-end}.no-box{box-shadow:none!important}.table1{width:100%;display:flex;flex-direction:column}.textclass{word-break:break-word;margin:5px;cursor:pointer}.search{display:flex;flex:1}.lsearch{display:flex;flex:3}.rsearch{display:flex;position:relative;flex:1 1 auto}.sinput{width:315px;border-radius:4px;border:1px solid #d5d0d0;padding:9px 9px 9px 35px;margin-bottom:20px;margin-top:0;font:400 14px Lato}.searchText{display:flex;flex-direction:row-reverse;margin:23px 0 0 auto}.action-btn{border:none;background:0 0}mat-header-row{min-height:40px}.mat-header-cell{background-color:#f5f5f5}.container-balanced{max-width:99%;margin-left:auto!important;margin-right:auto!important}.flex-3{flex:3}.flex-1{flex:1}.flex-2{flex:2}.flex-4{flex:4}.flex-update{flex-direction:row}@media only screen and (max-width:599px){.card-ford-container .text-description-trim{-webkit-line-clamp:8}.flex-update{flex-direction:row}}.flex-custom{display:flex;flex-direction:column}@media only screen and (max-width:599px){.flex-custom-m{flex-direction:column}}.right-align{text-align:right}.create-btn{width:107px;background:#0075b7!important;color:#fff!important;font-family:Lato;font-weight:700;font-size:14px}.upload-btn{border:1px solid #dedede;border-radius:4px;margin:0 12px;color:#848484!important;font-family:Lato;font-weight:700;font-size:14px}.search-icon{position:absolute;top:9px;font-size:20px;left:10px}.example-container{display:flex;flex-direction:column;flex:1}.linkTextColor{color:#0074b6!important}.training-tag{background:#f5f5f5!important;border-radius:18px;border:1px solid rgba(0,0,0,.08);color:#000!important;font-weight:400;font-size:14px;min-width:101px}.position-rel{position:relative}.training-filter-btn{position:absolute;right:0;color:rgba(0,0,0,.6)}.pb-image{height:40px;width:64px;margin:10px 8px 10px 0}.no-cbp-data{width:250px;margin:0 auto;text-align:center}.no-cbp-data img{width:190px}.no-cbp-data .small-text{font-size:14px;color:rgba(0,0,0,.6)}"]
+                template: "<div class=\"example-container margin-top-m\">\r\n    <div class=\"example-loading-shade\"></div>\r\n\r\n    <div class=\"example-table-container\">\r\n        <div class=\"container\">\r\n            <div class=\"flex flex-1 custom\">\r\n                <div class=\"flex-1\">\r\n                    <div class=\"search\" *ngIf=\"isSearchBar\">\r\n                        <div class=rsearch>\r\n                            <mat-icon class=\"color-60 search-icon\">search</mat-icon>\r\n                            <input class=\"sinput color-60\" type=\"Standard\" label=\"\"\r\n                                (input)=\"applyFilter($event.target.value)\" (keydown.enter)=\"onSearchEnter($event)\"\r\n                                placeholder=\"Search\">\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"flex-2 margin-left-l position-rel\" *ngIf=\"isTrainingPlan && trainingTagList?.length > 0\">\r\n                    <a class=\"training-tag mat-button margin-right-s\" [ngClass]=\"{'selectTab': item.selected}\"\r\n                        *ngFor=\"let item of trainingTagList\" (click)=\"tagSelectedItem(item.value)\">{{item.name}}</a>\r\n                    <!-- <button mat-icon-button class=\"training-filter-btn\">\r\n                        <mat-icon>filter_list</mat-icon>\r\n                    </button> -->\r\n                </div>\r\n                <div class=\"flex-2 right-align\" *ngIf=\"isDownload || isConsumptionReport || isCreate\">\r\n                    <!-- <button type=\"button\" mat-button class=\"upload-btn\" *ngIf=\"isUpload\"\r\n                        (click)=\"onButtonClick('upload', $event)\">\r\n                        <mat-icon>vertical_align_top</mat-icon> File upload\r\n                    </button> -->\r\n                    <button type=\"button\" mat-button class=\"upload-btn\" *ngIf=\"isDownload\"\r\n                        (click)=\"onButtonClick('download', $event)\">\r\n                        <mat-icon>vertical_align_bottom</mat-icon> Users Report\r\n                    </button>\r\n                    <button type=\"button\" mat-button class=\"upload-btn\" *ngIf=\"isConsumptionReport\"\r\n                        (click)=\"onButtonClick('consumptionReport', $event)\">\r\n                        <mat-icon>vertical_align_bottom</mat-icon> Consumption Report\r\n                    </button>\r\n                    <button type=\"button\" mat-button class=\"create-btn\" *ngIf=\"isCreate\"\r\n                        (click)=\"onButtonClick('createUser', $event)\">\r\n                        Create new\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- </mat-form-field> -->\r\n        <mat-table #table matSort [ngStyle]=\"{'height': bodyHeight}\" [matSortActive]=\"tableData!.sortColumn\"\r\n            [matSortDirection]=\"tableData!.sortState\" [dataSource]=\"dataSource\"\r\n            class=\"example-table table1 responsiveTable\" *ngIf=\"dataSource.filteredData.length > 0\">\r\n\r\n            <ng-container matColumnDef=\"{{col.key}}\" *ngFor=\"let col of tableData!.columns\">\r\n                <mat-header-cell *matHeaderCellDef mat-sort-header class=\".h-400-r-14-l color-60\"> {{col.displayName}}\r\n                </mat-header-cell>\r\n                <mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\r\n                    <img *ngIf=\"col?.imageUrl\" src=\"{{element.posterImage}}\" class=\"pb-image\">\r\n                    <span *ngIf=\"col?.isList\" class=\"h-400-r-14-l color-87 textclass\">\r\n                        <div innerHTML=\"{{element[col.key]}}\"></div>\r\n                    </span>\r\n                    <span *ngIf=\"!col?.isList\" class=\"h-400-r-14-l color-87 textclass\">\r\n                        {{(col.key === 'dateCreatedOn' || col.key === 'dateUpdatedOn') ? (element[col.key] | date:'dd\r\n                        MMM yyy h:mm a') : element[col.key]}} {{col?.isList}}\r\n                    </span>\r\n                </mat-cell>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"Actions\" *ngIf=\"tableData!.actions && tableData!.actions.length > 0\">\r\n                <mat-header-cell *matHeaderCellDef class=\"clr-darkish-blue action-header\"> {{\r\n                    tableData!.actionColumnName || \"Actions\"}}\r\n                </mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"action-cell\">\r\n                    <div *ngFor=\"let ac of tableData!.actions\">\r\n                        <div *ngIf=\"ac.optional\">\r\n                            <ws-widget-app-button *ngIf=\"row[ac.optional_key] === ac.optional_Value\" [type]=\"ac.type\"\r\n                                [icon]=\"ac.icon\" [disabled]=\"ac.disabled || false\" [label]=\"ac.label\"\r\n                                (click)=\"buttonClick(ac.name,row)\"></ws-widget-app-button>\r\n                        </div>\r\n                        <div *ngIf=\"!ac.optional\">\r\n                            <ws-widget-app-button [type]=\"ac.type\" [icon]=\"ac.icon\" [label]=\"ac.label\"\r\n                                [disabled]=\"ac.disabled || false\" (click)=\"buttonClick(ac.name,row)\">\r\n                            </ws-widget-app-button>\r\n                        </div>\r\n                    </div>\r\n                </mat-cell>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"Menu\">\r\n                <mat-header-cell *matHeaderCellDef class=\"clr-darkish-blue action-header\">\r\n                    <!-- {{'Actions'}} -->\r\n                </mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"action-cell\">\r\n                    <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\r\n                        [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':row}\" class=\"action-btn\">\r\n                        <mat-icon>more_horiz</mat-icon>\r\n                    </button>\r\n                </mat-cell>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"CBP Menu\">\r\n                <mat-header-cell *matHeaderCellDef class=\"clr-darkish-blue action-header\">\r\n                    <!-- {{'Actions'}} -->\r\n                </mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"action-cell\">\r\n                    <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\r\n                        [matMenuTriggerFor]=\"cbpPlanCardMenu\" [matMenuTriggerData]=\"{'data':row}\" class=\"action-btn\">\r\n                        <mat-icon>more_horiz</mat-icon>\r\n                    </button>\r\n                </mat-cell>\r\n            </ng-container>\r\n\r\n            <mat-header-row *matHeaderRowDef=\"getFinalColumns()\"></mat-header-row>\r\n\r\n            <mat-row *matRowDef=\"let row; columns: getFinalColumns();\" (click)=\"selection.toggle(row);\">\r\n            </mat-row>\r\n\r\n            <!-- <div *ngIf=\"dataSource.filteredData.length <= 0\">\r\n                <mat-row *matRowDef=\"let row; columns: getFinalColumns();\"\r\n                    (click)=\"selection.toggle(row); onRowClick(row)\">\r\n                    ssss\r\n                </mat-row>\r\n            </div> -->\r\n        </mat-table>\r\n        <div class=\"no-cbp-data\" *ngIf=\"dataSource.filteredData.length === 0 && isTrainingPlan\">\r\n            <div><img src=\"/assets/images/no-content-data.svg\"></div>\r\n            <div class=\"mat-subheading-1 margin-remove\">No CBP plan created yet</div>\r\n            <div>Create a CBP plan to assign users.</div>\r\n            <div class=\"margin-top-m\">\r\n                <button mat-button type=\"button\" class=\"create-btn\"\r\n                    (click)=\"onButtonClick('createCbpPlan', $event)\">Create CBP</button>\r\n            </div>\r\n        </div>\r\n        <mat-card class=\"flex-1\" role=\"none\" *ngIf=\"dataSource.filteredData.length === 0 && !isTrainingPlan\">\r\n            <span class=\"mat-subtitle\">No data found</span>\r\n        </mat-card>\r\n    </div>\r\n    <!-- <div *ngIf=\"dataSource.filteredData.length <= 0\" class=\"h-600-s-20-m color-60 text-center\">No result found\r\n    </div> -->\r\n    <mat-paginator *ngIf=\"dataSource.filteredData.length > 0 && isTrainingPlan\" [length]=\"length\" [pageSize]=\"pageSize\"\r\n        [pageSizeOptions]=\"pageSizeOptions\">\r\n    </mat-paginator>\r\n    <mat-paginator *ngIf=\"!isTrainingPlan\" [length]=\"length\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\">\r\n    </mat-paginator>\r\n</div>\r\n\r\n<mat-menu #cardMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-rowData=\"data\">\r\n        <!-- <div > -->\r\n        <button (click)=\"buttonClick('editInfo',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\"\r\n            *ngIf=\"rowData.allowEditUser && showEditOnCondition\">\r\n            <mat-icon>edit</mat-icon> <span>Edit Info</span>\r\n        </button>\r\n        <button (click)=\"buttonClick('editInfo',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\" *ngIf=\"!showEditOnCondition\">\r\n            <mat-icon>edit</mat-icon> <span>Edit Info</span>\r\n        </button>\r\n        <button (click)=\"buttonClick('showOnKarma',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\r\n            <mat-icon>input</mat-icon> <span>Show on Karmayogi</span>\r\n        </button>\r\n        <!-- </div> -->\r\n        <!-- <div mat-menu-item> -->\r\n        <!-- <button (click)=\"rowData && rowData.blocked ? buttonClick('unblock',rowData): buttonClick('block',rowData)\"\r\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\r\n            aria-label=\"Analytics\">\r\n            <mat-icon>block</mat-icon><span>{{rowData && rowData.blocked ? 'Unblock user':'Block user' }}</span>\r\n        </button> -->\r\n        <!-- </div> -->\r\n        <!-- <div mat-menu-item> -->\r\n        <button *ngIf=\"userId != rowData.userId\"\r\n            (click)=\"rowData && rowData.active ? buttonClick('deactive',rowData): buttonClick('active',rowData)\"\r\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\r\n            aria-label=\"Analytics\">\r\n            <mat-icon>toggle_off_sharp</mat-icon>\r\n            <span>{{rowData && rowData.active? 'Deactivate user':'Activate user'}}</span>\r\n        </button>\r\n        <!-- </div> -->\r\n        <!-- <div mat-menu-item> -->\r\n        <!-- <button (click)=\"buttonClick('delete',rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\r\n            <mat-icon>delete</mat-icon><span>Delete User</span>\r\n        </button> -->\r\n        <!-- </div> -->\r\n    </ng-template>\r\n</mat-menu>\r\n\r\n<mat-menu #cbpPlanCardMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-rowData=\"data\">\r\n        <div *ngFor=\"let item of actionMenuItem\">\r\n            <button (click)=\"buttonClick(item.key,rowData)\" mat-menu-item name=\"channel-analytics-button\"\r\n                class=\"ws-mat-primary-text\" *ngIf=\"checkIfEnabled(rowData, item)\">\r\n                <mat-icon>{{item.icon}}</mat-icon> <span>{{item.name}}</span>\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n</mat-menu>",
+                styles: [".card-minimal-container{position:relative}.card-minimal-container .card-link{width:265px;height:150px;display:block}.card-minimal-container .card-link .card-thumbnail{object-fit:contain;width:100%;height:100%}.card-minimal-container .card-overlay{position:absolute;bottom:4px;background-color:rgba(0,0,0,.55);color:#fff;padding:4px 12px;box-sizing:border-box;width:100%}.card-minimal-container .card-overlay .card-title{margin-bottom:-6px}.status-danger{width:16px;height:16px;position:absolute;border-radius:50%;top:16px;left:16px;pointer-events:auto;cursor:pointer;background:#ce3939}.card-space-saving-container{position:relative;width:265px;height:100%;box-sizing:border-box}.card-space-saving-container .progress-bar{display:block;width:calc(100% + 32px);margin-left:-16px;margin-top:-16px}.card-space-saving-container mat-card-content{margin:0 -4px;min-height:120px}.card-space-saving-container .card-img{height:150px;display:block}.card-space-saving-container .card-header-meta{margin-top:8px}.card-space-saving-container .title-text{display:block;margin:12px 0}.card-space-saving-container .flip-desc-text{position:relative;overflow:hidden;line-height:1.4em;height:5.6em;margin-bottom:36px}.card-space-saving-container .flip-actions{position:absolute;bottom:0;left:0;width:100%;padding:12px;box-sizing:border-box}.card-space-saving-container .flip-actions .source-name{margin-bottom:0;font-weight:400}.card-ford-container{padding:16px 16px 0;position:relative;width:220px;height:243px;overflow:hidden;box-sizing:border-box}.card-ford-container .progress-bar{display:block;width:calc(100% + 32px);margin-left:-16px;margin-top:-16px}.card-ford-container mat-card-content{margin:160px}.card-ford-container .card-img{height:125px;display:block;object-fit:contain}@media only screen and (max-width:599px){.card-ford-container{width:200px;height:240px}.card-ford-container .card-img{height:115px}}.card-ford-container .complexity{display:flex;font-size:14px}.card-ford-container .duration{height:1.6em;display:flex}.card-ford-container .duration .resource-type{order:3;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-ford-container .duration .duration-time{order:2;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-ford-container .title-text{margin:12px 0;position:relative;overflow:hidden;height:1.3em;line-height:1.3em;text-overflow:ellipsis;white-space:nowrap}.card-ford-container .mode-tag{border-radius:5px;color:#fff}.card-ford-container .description-text{position:relative;overflow:hidden;height:4.2em;line-height:1.4em}.card-ford-container .mat-chip-list-wrapper{padding:8px 0 16px!important}.card-ford-container .text-description-trim{overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:9;display:-webkit-box;-webkit-box-orient:vertical;text-align:justify}.card-standard-container{position:relative;width:268px;height:100%;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px #99999933}.card-standard-container .progress-bar{display:block;width:calc(100% + 30px);margin-left:-15px;display:flex;margin-top:62px;background:bisque}.card-standard-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-standard-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-standard-container mat-card-content{margin:0 -4px}.card-standard-container .card-img{min-width:269px;max-width:269px;display:block;object-fit:contain;border-top-left-radius:8px;border-top-right-radius:8px}.card-standard-container .complexity{padding-top:7px;display:flex;font-size:14px;line-height:27px;padding-bottom:10px}.card-standard-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-standard-container .complexity .duration{display:flex;margin-left:auto;order:3}.card-standard-container .complexity .time-text{margin:0 5px 0 6px}.card-standard-container .basic{margin:auto 0}.card-standard-container .title-text{margin:12px 0;position:relative;overflow:hidden;height:3.78em;line-height:1.89em}.card-standard-container .description-text{position:relative;overflow:hidden;height:5.7em;line-height:1.9em}.card-discussions-container{flex:1;display:flex;position:relative;height:100%;min-height:140px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px #99999933}.card-discussions-container .progress-bar{display:block;width:calc(100% + 30px);margin-left:-15px;display:flex;margin-top:62px;background:bisque}.card-discussions-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-discussions-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-discussions-container mat-card-content{margin:0 -4px;flex:1}.card-discussions-container .card-img{min-width:269px;max-width:269px;display:block;object-fit:contain;border-top-left-radius:8px;border-top-right-radius:8px}.card-discussions-container .complexity{padding-top:7px;display:flex;font-size:14px;line-height:27px;padding-bottom:10px}.card-discussions-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-discussions-container .complexity .duration{display:flex;margin-left:auto;order:3}.card-discussions-container .complexity .time-text{margin:0 5px 0 6px}.card-discussions-container .basic{margin:auto 0}.card-discussions-container .title-text{overflow:hidden}.card-discussions-container .description-text{position:relative;overflow:hidden;height:auto;line-height:1.9em}.card-basic-infomartion-container{position:relative;width:265px;height:100%;box-sizing:border-box;min-height:300px}.card-basic-infomartion-container .card-img{height:150px;display:block;margin-bottom:0!important;object-fit:contain}.card-basic-infomartion-container .source-name{margin-bottom:0;font-weight:400;line-height:1.25rem!important}.card-basic-infomartion-container .title-text{margin:12px 0 0;position:relative;overflow:hidden;height:2.6em;line-height:1.3em}.card-basic-infomartion-container .source-image{object-fit:contain;height:35px;width:55px;overflow:auto}.card-with-user-details-container{position:relative;width:265px;height:100%;box-sizing:border-box;min-height:270px}.card-with-user-details-container .card-img{height:150px;display:block;margin-bottom:0!important;object-fit:contain}.card-with-user-details-container .source-name{margin-bottom:0;font-weight:400}.card-with-user-details-container .title-text{margin:12px 0 0;position:relative;overflow:hidden;height:2.6em;line-height:1.3em}.card-with-user-details-container .author-image{margin-right:12px;height:44px;width:44px}.card-with-user-details-container .back-color{background-color:#7e0a80}.card-with-user-details-container .space-0{margin-top:0!important;padding-top:0!important;margin-bottom:0!important}.detail-button{position:absolute;top:12px;right:12px;z-index:1}.greyOut{filter:grayscale(1);opacity:.7;cursor:auto!important}.disableClick{pointer-events:none}.display-contents{display:contents}.title-truncate{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.typeofc{width:101px;height:30px;border:1px solid;border-radius:8px;opacity:.4;align-items:center;justify-content:center;display:flex}.flex-9{flex:9}.center-right{align-items:center;justify-content:flex-end}.no-box{box-shadow:none!important}.table1{width:100%;display:flex;flex-direction:column}.textclass{word-break:break-word;margin:5px;cursor:pointer}.search{display:flex;flex:1}.lsearch{display:flex;flex:3}.rsearch{display:flex;position:relative;flex:1 1 auto}.sinput{width:315px;border-radius:4px;border:1px solid #d5d0d0;padding:9px 9px 9px 35px;margin-bottom:20px;margin-top:0;font:400 14px Lato}.searchText{display:flex;flex-direction:row-reverse;margin:23px 0 0 auto}.action-btn{border:none;background:0 0}mat-header-row{min-height:40px}.mat-header-cell{background-color:#f5f5f5}.container-balanced{max-width:99%;margin-left:auto!important;margin-right:auto!important}.flex-3{flex:3}.flex-1{flex:1}.flex-2{flex:2}.flex-4{flex:4}.flex-update{flex-direction:row}@media only screen and (max-width:599px){.card-ford-container .text-description-trim{-webkit-line-clamp:8}.flex-update{flex-direction:row}}.flex-custom{display:flex;flex-direction:column}@media only screen and (max-width:599px){.flex-custom-m{flex-direction:column}}.right-align{text-align:right}.create-btn{width:107px;background:#0075b7!important;color:#fff!important;font-family:Lato;font-weight:700;font-size:14px}.upload-btn{border:1px solid #dedede;border-radius:4px;margin:0 12px;color:#848484!important;font-family:Lato;font-weight:700;font-size:14px}.search-icon{position:absolute;top:9px;font-size:20px;left:10px}.example-container{display:flex;flex-direction:column;flex:1}.linkTextColor{color:#0074b6!important}.training-tag{background:#f5f5f5!important;border-radius:18px;border:1px solid rgba(0,0,0,.08);color:#000!important;font-weight:400;font-size:14px;min-width:101px}.position-rel{position:relative}.training-filter-btn{position:absolute;right:0;color:rgba(0,0,0,.6)}.pb-image{height:40px;width:64px;margin:10px 8px 10px 0}.no-cbp-data{width:250px;margin:0 auto;text-align:center}.no-cbp-data img{width:auto}.no-cbp-data .small-text{font-size:14px;color:rgba(0,0,0,.6)}.selectTab{border:1px solid #1b4ca1;background:rgba(0,116,182,.05)!important;color:#1b4ca1!important}"]
             }] }
 ];
 OrgUserTableComponent.ctorParameters = () => [];
@@ -20883,13 +20907,15 @@ OrgUserTableComponent.propDecorators = {
     userId: [{ type: Input }],
     isTrainingPlan: [{ type: Input }],
     trainingTagList: [{ type: Input }],
+    showEditOnCondition: [{ type: Input }],
+    isSearchBar: [{ type: Input }],
+    actionMenuItem: [{ type: Input }],
     clicked: [{ type: Output }],
     actionsClick: [{ type: Output }],
     eOnRowClick: [{ type: Output }],
     eOnButtonClick: [{ type: Output }],
     searchByEnterKey: [{ type: Output }],
-    showEditOnCondition: [{ type: Input }],
-    isSearchBar: [{ type: Input }],
+    tagSelectedData: [{ type: Output }],
     paginator: [{ type: ViewChild, args: [MatPaginator, { static: true },] }],
     matSort: [{ type: ViewChild, args: [MatSort$1, { static: false },] }]
 };
@@ -20903,13 +20929,15 @@ if (false) {
     OrgUserTableComponent.prototype.userId;
     OrgUserTableComponent.prototype.isTrainingPlan;
     OrgUserTableComponent.prototype.trainingTagList;
+    OrgUserTableComponent.prototype.showEditOnCondition;
+    OrgUserTableComponent.prototype.isSearchBar;
+    OrgUserTableComponent.prototype.actionMenuItem;
     OrgUserTableComponent.prototype.clicked;
     OrgUserTableComponent.prototype.actionsClick;
     OrgUserTableComponent.prototype.eOnRowClick;
     OrgUserTableComponent.prototype.eOnButtonClick;
     OrgUserTableComponent.prototype.searchByEnterKey;
-    OrgUserTableComponent.prototype.showEditOnCondition;
-    OrgUserTableComponent.prototype.isSearchBar;
+    OrgUserTableComponent.prototype.tagSelectedData;
     OrgUserTableComponent.prototype.bodyHeight;
     OrgUserTableComponent.prototype.displayedColumns;
     OrgUserTableComponent.prototype.dataSource;