verben-authentication-ui 1.0.19 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/lib/components/role-control/role-control.component.mjs +30 -26
- package/fesm2022/verben-authentication-ui-src-lib-components-role-control.mjs +29 -25
- package/fesm2022/verben-authentication-ui-src-lib-components-role-control.mjs.map +1 -1
- package/package.json +7 -7
- package/src/lib/components/role-control/role-control.component.d.ts +3 -2
|
@@ -276,30 +276,6 @@ class RoleControlComponent {
|
|
|
276
276
|
}
|
|
277
277
|
async ngOnInit() {
|
|
278
278
|
const mockData = this.getMockRoles();
|
|
279
|
-
const roles = await this.getAllRoles();
|
|
280
|
-
const contextsRes = await this.getSavedContexts();
|
|
281
|
-
if (this.isGlobal) {
|
|
282
|
-
if (contextsRes) {
|
|
283
|
-
this.roleContextsStore = contextsRes;
|
|
284
|
-
this.roleActionsStore = contextsRes.flatMap((x) => x.RoleActions);
|
|
285
|
-
const authConfig = contextsRes.map((x) => {
|
|
286
|
-
return {
|
|
287
|
-
Name: x.Name,
|
|
288
|
-
Actions: x.RoleActions.map((y) => {
|
|
289
|
-
return y.Name;
|
|
290
|
-
}),
|
|
291
|
-
};
|
|
292
|
-
});
|
|
293
|
-
this.sourceData = authConfig;
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
else {
|
|
297
|
-
this.sourceData = this.authService.authorizationConfig;
|
|
298
|
-
}
|
|
299
|
-
if (roles) {
|
|
300
|
-
this.setUpMappedData(roles);
|
|
301
|
-
this.setUpCardData();
|
|
302
|
-
}
|
|
303
279
|
this.searchTerm$
|
|
304
280
|
.pipe(debounceTime(this.searchDebounceTime)) // Adjust debounce time here (in ms)
|
|
305
281
|
.subscribe(async (searchTerm) => {
|
|
@@ -307,6 +283,34 @@ class RoleControlComponent {
|
|
|
307
283
|
this.updateFiltersAndSorts(true);
|
|
308
284
|
});
|
|
309
285
|
}
|
|
286
|
+
async ngOnChanges(changes) {
|
|
287
|
+
if (changes['application'] && this.application) {
|
|
288
|
+
const roles = await this.getAllRoles();
|
|
289
|
+
const contextsRes = await this.getSavedContexts();
|
|
290
|
+
if (this.isGlobal) {
|
|
291
|
+
if (contextsRes) {
|
|
292
|
+
this.roleContextsStore = contextsRes;
|
|
293
|
+
this.roleActionsStore = contextsRes.flatMap((x) => x.RoleActions);
|
|
294
|
+
const authConfig = contextsRes.map((x) => {
|
|
295
|
+
return {
|
|
296
|
+
Name: x.Name,
|
|
297
|
+
Actions: x.RoleActions.map((y) => {
|
|
298
|
+
return y.Name;
|
|
299
|
+
}),
|
|
300
|
+
};
|
|
301
|
+
});
|
|
302
|
+
this.sourceData = authConfig;
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
else {
|
|
306
|
+
this.sourceData = this.authService.authorizationConfig;
|
|
307
|
+
}
|
|
308
|
+
if (roles) {
|
|
309
|
+
this.setUpMappedData(roles);
|
|
310
|
+
this.setUpCardData();
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
310
314
|
async getSavedContexts() {
|
|
311
315
|
if (!this.isGlobal || !this.application) {
|
|
312
316
|
return undefined;
|
|
@@ -1840,7 +1844,7 @@ class RoleControlComponent {
|
|
|
1840
1844
|
}, this.pageState);
|
|
1841
1845
|
}
|
|
1842
1846
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: i1.AuthorizationService }, { token: RoleControlService }, { token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i3.FormBuilder }, { token: i1.EnvironmentService }, { token: i1.ImportService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1843
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <div\n *ngIf=\"this.cardContextHistory.length > 0\"\n class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n >\n <div class=\"flex gap-2 flex-1 context-banner-content\">\n <div\n class=\"context-content items-center flex gap-2\"\n *ngFor=\"let context of this.cardContextHistory; index as i\"\n >\n <div class=\"context-main-content-container flex gap-4\">\n <span class=\"context-caption font-bold text-[#404040]\">{{\n context.data.ChildrenType &&\n context.data.ChildrenType == childPermissionRef\n ? context.data.Name\n : context.title\n }}</span>\n <span\n *ngIf=\"i == this.cardContextHistory.length - 1\"\n class=\"context-subcaption\"\n >{{ this.getCardSubCaption(context) }}</span\n >\n </div>\n <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n </div>\n </div>\n <div class=\"flex justify-end\">\n <verben-svg\n (click)=\"closeDetails()\"\n class=\"cursor-pointer\"\n icon=\"close-circle-full\"\n [width]=\"20\"\n [height]=\"20\"\n ></verben-svg>\n </div>\n </div>\n\n <div\n *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n class=\"nested-top-container flex gap-2 items-center\"\n >\n <div class=\"flex items-center gap-2 px-2\">\n <input\n [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [ngModel]=\"isAllSelected(this.cardData[0])\"\n (click)=\"\n $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n \"\n />\n\n <span class=\"font-semibold\">Select All</span>\n </div>\n <div\n [ngClass]=\"{ focused: isInputFocused }\"\n tabindex=\"0\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n class=\"search-section flex\"\n >\n <span class=\"search-icon flex\">\n <verben-svg\n icon=\"search\"\n stroke=\"#64748b\"\n [width]=\"15\"\n [height]=\"15\"\n ></verben-svg>\n </span>\n <div class=\"search-input-container\">\n <input\n [(ngModel)]=\"searchContext\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n placeholder=\"Search...\"\n class=\"search-input\"\n />\n </div>\n </div>\n </div>\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: this.cardContextHistory.length == 0,\n isColumn: this.cardContextHistory.length == 0,\n isFilter: this.cardContextHistory.length == 0,\n isSort: this.cardContextHistory.length == 0,\n isExport:\n this.cardContextHistory.length == 0 &&\n (!permissionConfig || permissionConfig.Actions['Export']),\n isSelect: this.cardContextHistory.length == 0,\n isCreate:\n this.cardContextHistory.length == 0 &&\n (!permissionConfig || permissionConfig.Actions['Create']),\n isToggle: this.cardContextHistory.length == 0,\n isImport:\n this.cardContextHistory.length == 0 &&\n (!permissionConfig || permissionConfig.Actions['Import'])\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [isTableView]=\"false\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n (onSearchChange)=\"handleSearch($event)\"\n >\n <div class=\"mt-2\" table-content>\n <lib-data-table\n [dataKey]=\"'Id'\"\n #dt\n [data]=\"data\"\n [columns]=\"visibleColumnDef\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"select\">\n <ng-template\n #cell\n let-isSelected=\"isSelected\"\n let-toggleRowSelection=\"toggleRowSelection\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"isSelected\"\n (change)=\"toggleRowSelection()\"\n />\n </ng-template>\n <ng-template\n #header\n let-allRowsSelected=\"allRowsSelected\"\n let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"allRowsSelected()\"\n [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\"\n />\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"updatedAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"name\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value.Name }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-updateData=\"updateData\"\n let-value\n >\n <div class=\"width-max\">\n <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container libColumn=\"actions\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <verben-pop-Up\n #popup\n [customStyles]=\"{ 'z-index': '99' }\"\n [enableMouseLeave]=\"false\"\n >\n <verben-svg\n class=\"cursor-pointer actions-icon\"\n dropdown-trigger\n icon=\"list\"\n ></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div\n *ngIf=\"\n !permissionConfig || permissionConfig.Actions['Create']\n \"\n (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n class=\"pop-up-value cursor-pointer\"\n >\n Edit\n </div>\n <div\n (click)=\"viewDetailsFromTable(value)\"\n class=\"pop-up-value cursor-pointer\"\n >\n View Details\n </div>\n <div class=\"pop-up-value cursor-pointer\">View Users</div>\n </div>\n </verben-pop-Up>\n <!-- <div class=\"flex gap-4 items-center\">\n <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n class=\"cursor-pointer\"></verben-svg>\n <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n <span class=\"view-links view-users\">view users</span>\n </div> -->\n </ng-template>\n <ng-template\n #cellEdit\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <div class=\"flex gap-2 items-center\">\n <verben-svg\n icon=\"tick\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"tableSaveRole(value, toggleRowEdit)\"\n ></verben-svg>\n <verben-svg\n (click)=\"restoreCache(value); toggleRowEdit()\"\n icon=\"close-no-circle\"\n [width]=\"15\"\n [height]=\"15\"\n ></verben-svg>\n <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n <verben-svg\n icon=\"cardViewAlt\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"editValue(value)\"\n ></verben-svg>\n </div>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n #vdcv\n dataId=\"Id\"\n border=\"5px\"\n [cardDataList]=\"\n this.cardContextHistory.length > 0 ? filteredData : cardData\n \"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n >\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"\n this.cardContextHistory.length > 0 ? filteredData : cardData\n \"\n >\n <ng-template #card let-item>\n <div\n (click)=\"roleCardClicked(item)\"\n *ngIf=\"\n item.data.ChildrenType &&\n item.data.ChildrenType == childPermissionRef\n \"\n class=\"flex cursor-pointer h-[max-content]\"\n >\n <verben-svg\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"\n item.children && item.children.length\n ? 'visible'\n : 'invisible'\n \"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.data.Name }}\n </h3>\n <span\n class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\"\n >\n {{ getCardSubCaption(item) }}\n </span>\n </div>\n\n <div\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"flex items-end h-[100%]\"\n >\n <p\n (click)=\"viewDetails(item); $event.stopPropagation()\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n >\n view details\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"\n !item.data.ChildrenType ||\n item.data.ChildrenType !== childPermissionRef\n \"\n class=\"flex h-[max-content]\"\n >\n <verben-svg\n [ngClass]=\"\n item.children && item.children.length\n ? 'visible'\n : 'invisible'\n \"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"toggleChildren(item)\"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input\n *ngIf=\"item.data?.Selected != undefined\"\n [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [(ngModel)]=\"item.data.Selected\"\n (click)=\"\n $event.preventDefault(); this.saveRoleDynamic(item)\n \"\n />\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.title }}\n </h3>\n <span\n class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\"\n >\n {{ getCardSubCaption(item) }}\n </span>\n </div>\n\n <div\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"flex items-end h-[100%]\"\n >\n <p\n (click)=\"viewDetails(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n >\n view details\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #cardChild let-index=\"index\" let-item>\n <div class=\"flex gap-2 items-start h-[max-content]\">\n <input\n [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [ngModel]=\"isAllSelected(item)\"\n (click)=\"\n $event.preventDefault(); this.saveAllRoleDynamic(item)\n \"\n />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input\n *ngIf=\"item.data?.Selected != undefined\"\n [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [(ngModel)]=\"item.data.Selected\"\n (click)=\"\n $event.preventDefault(); this.saveRoleDynamic(item)\n \"\n />\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.title }}\n </h3>\n <span\n class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\"\n >\n {{ getCardSubCaption(item) }}\n </span>\n </div>\n\n <div\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"flex items-end h-[100%]\"\n >\n <p\n (click)=\"viewDetailsChild(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n >\n view details\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n <verben-right-card-data-view\n *ngIf=\"this.cardContextHistory.length == 0\"\n >\n <ng-template #parent>\n <div\n *ngIf=\"this.currentData\"\n class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n >\n <verbena-input\n name=\"Name\"\n label=\"Name\"\n (ngModelChange)=\"updateTable()\"\n [(ngModel)]=\"this.currentData.data.Name\"\n />\n\n <!-- buttons -->\n <div class=\"flex justify-between bottom-8 left-0 right-0\">\n <div></div>\n <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n <div class=\"flex gap-3\">\n <verbena-button\n class=\"verben-switch-button\"\n (click)=\"goToTableView()\"\n text=\"Switch To Table\"\n ></verbena-button>\n <verbena-button\n class=\"verben-primary-button\"\n (click)=\"this.saveRole()\"\n text=\"Save\"\n ></verbena-button>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-right-card-data-view>\n <!-- <verben-right-card-data-view>\n yeshhhhhh\n </verben-right-card-data-view> -->\n\n <verben-card-data-view-footer\n *ngIf=\"this.cardContextHistory.length == 0\"\n >\n <div class=\"flex gap-2 justify-between\">\n <div\n *ngIf=\"\n !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n \"\n class=\"message-log-button-container flex justify-between\"\n >\n <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button> -->\n </div>\n <div\n class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\"\n >\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n (filtersApplied)=\"onFilterUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div import-content>\n <lib-data-import\n [previewColumns]=\"visibleColumnDef\"\n title=\"role\"\n (importEventData)=\"onComplete($event)\"\n [columnTemplates]=\"columnTemplates()\"\n >\n </lib-data-import>\n </div>\n <div export-content>\n <lib-data-xport\n [useImportKey]=\"true\"\n [columns]=\"visibleColumnDef\"\n [data]=\"data\"\n [dataQueryFunction]=\"exportFiltersAndSorts\"\n >\n </lib-data-xport>\n <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export> -->\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button> -->\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #ffe681}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i5.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i5.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i5.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i5.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i5.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i5.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i5.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i5.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i5.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
|
|
1847
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <div\n *ngIf=\"this.cardContextHistory.length > 0\"\n class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n >\n <div class=\"flex gap-2 flex-1 context-banner-content\">\n <div\n class=\"context-content items-center flex gap-2\"\n *ngFor=\"let context of this.cardContextHistory; index as i\"\n >\n <div class=\"context-main-content-container flex gap-4\">\n <span class=\"context-caption font-bold text-[#404040]\">{{\n context.data.ChildrenType &&\n context.data.ChildrenType == childPermissionRef\n ? context.data.Name\n : context.title\n }}</span>\n <span\n *ngIf=\"i == this.cardContextHistory.length - 1\"\n class=\"context-subcaption\"\n >{{ this.getCardSubCaption(context) }}</span\n >\n </div>\n <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n </div>\n </div>\n <div class=\"flex justify-end\">\n <verben-svg\n (click)=\"closeDetails()\"\n class=\"cursor-pointer\"\n icon=\"close-circle-full\"\n [width]=\"20\"\n [height]=\"20\"\n ></verben-svg>\n </div>\n </div>\n\n <div\n *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n class=\"nested-top-container flex gap-2 items-center\"\n >\n <div class=\"flex items-center gap-2 px-2\">\n <input\n [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [ngModel]=\"isAllSelected(this.cardData[0])\"\n (click)=\"\n $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n \"\n />\n\n <span class=\"font-semibold\">Select All</span>\n </div>\n <div\n [ngClass]=\"{ focused: isInputFocused }\"\n tabindex=\"0\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n class=\"search-section flex\"\n >\n <span class=\"search-icon flex\">\n <verben-svg\n icon=\"search\"\n stroke=\"#64748b\"\n [width]=\"15\"\n [height]=\"15\"\n ></verben-svg>\n </span>\n <div class=\"search-input-container\">\n <input\n [(ngModel)]=\"searchContext\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n placeholder=\"Search...\"\n class=\"search-input\"\n />\n </div>\n </div>\n </div>\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: this.cardContextHistory.length == 0,\n isColumn: this.cardContextHistory.length == 0,\n isFilter: this.cardContextHistory.length == 0,\n isSort: this.cardContextHistory.length == 0,\n isExport:\n this.cardContextHistory.length == 0 &&\n (!permissionConfig || permissionConfig.Actions['Export']),\n isSelect: this.cardContextHistory.length == 0,\n isCreate:\n this.cardContextHistory.length == 0 &&\n (!permissionConfig || permissionConfig.Actions['Create']),\n isToggle: this.cardContextHistory.length == 0,\n isImport:\n this.cardContextHistory.length == 0 &&\n (!permissionConfig || permissionConfig.Actions['Import'])\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [isTableView]=\"false\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n (onSearchChange)=\"handleSearch($event)\"\n >\n <div class=\"mt-2\" table-content>\n <lib-data-table\n [dataKey]=\"'Id'\"\n #dt\n [data]=\"data\"\n [columns]=\"visibleColumnDef\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"select\">\n <ng-template\n #cell\n let-isSelected=\"isSelected\"\n let-toggleRowSelection=\"toggleRowSelection\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"isSelected\"\n (change)=\"toggleRowSelection()\"\n />\n </ng-template>\n <ng-template\n #header\n let-allRowsSelected=\"allRowsSelected\"\n let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"allRowsSelected()\"\n [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\"\n />\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"updatedAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"name\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value.Name }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-updateData=\"updateData\"\n let-value\n >\n <div class=\"width-max\">\n <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container libColumn=\"actions\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <verben-pop-Up\n #popup\n [customStyles]=\"{ 'z-index': '99' }\"\n [enableMouseLeave]=\"false\"\n >\n <verben-svg\n class=\"cursor-pointer actions-icon\"\n dropdown-trigger\n icon=\"list\"\n ></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div\n *ngIf=\"\n !permissionConfig || permissionConfig.Actions['Create']\n \"\n (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n class=\"pop-up-value cursor-pointer\"\n >\n Edit\n </div>\n <div\n (click)=\"viewDetailsFromTable(value)\"\n class=\"pop-up-value cursor-pointer\"\n >\n View Details\n </div>\n <div class=\"pop-up-value cursor-pointer\">View Users</div>\n </div>\n </verben-pop-Up>\n <!-- <div class=\"flex gap-4 items-center\">\n <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n class=\"cursor-pointer\"></verben-svg>\n <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n <span class=\"view-links view-users\">view users</span>\n </div> -->\n </ng-template>\n <ng-template\n #cellEdit\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <div class=\"flex gap-2 items-center\">\n <verben-svg\n icon=\"tick\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"tableSaveRole(value, toggleRowEdit)\"\n ></verben-svg>\n <verben-svg\n (click)=\"restoreCache(value); toggleRowEdit()\"\n icon=\"close-no-circle\"\n [width]=\"15\"\n [height]=\"15\"\n ></verben-svg>\n <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n <verben-svg\n icon=\"cardViewAlt\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"editValue(value)\"\n ></verben-svg>\n </div>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n #vdcv\n dataId=\"Id\"\n border=\"5px\"\n [cardDataList]=\"\n this.cardContextHistory.length > 0 ? filteredData : cardData\n \"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n >\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"\n this.cardContextHistory.length > 0 ? filteredData : cardData\n \"\n >\n <ng-template #card let-item>\n <div\n (click)=\"roleCardClicked(item)\"\n *ngIf=\"\n item.data.ChildrenType &&\n item.data.ChildrenType == childPermissionRef\n \"\n class=\"flex cursor-pointer h-[max-content]\"\n >\n <verben-svg\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"\n item.children && item.children.length\n ? 'visible'\n : 'invisible'\n \"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.data.Name }}\n </h3>\n <span\n class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\"\n >\n {{ getCardSubCaption(item) }}\n </span>\n </div>\n\n <div\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"flex items-end h-[100%]\"\n >\n <p\n (click)=\"viewDetails(item); $event.stopPropagation()\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n >\n view details\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"\n !item.data.ChildrenType ||\n item.data.ChildrenType !== childPermissionRef\n \"\n class=\"flex h-[max-content]\"\n >\n <verben-svg\n [ngClass]=\"\n item.children && item.children.length\n ? 'visible'\n : 'invisible'\n \"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"toggleChildren(item)\"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input\n *ngIf=\"item.data?.Selected != undefined\"\n [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [(ngModel)]=\"item.data.Selected\"\n (click)=\"\n $event.preventDefault(); this.saveRoleDynamic(item)\n \"\n />\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.title }}\n </h3>\n <span\n class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\"\n >\n {{ getCardSubCaption(item) }}\n </span>\n </div>\n\n <div\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"flex items-end h-[100%]\"\n >\n <p\n (click)=\"viewDetails(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n >\n view details\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n <ng-template #cardChild let-index=\"index\" let-item>\n <div class=\"flex gap-2 items-start h-[max-content]\">\n <input\n [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [ngModel]=\"isAllSelected(item)\"\n (click)=\"\n $event.preventDefault(); this.saveAllRoleDynamic(item)\n \"\n />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input\n *ngIf=\"item.data?.Selected != undefined\"\n [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\"\n class=\"mt-1 cursor-pointer\"\n [(ngModel)]=\"item.data.Selected\"\n (click)=\"\n $event.preventDefault(); this.saveRoleDynamic(item)\n \"\n />\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.title }}\n </h3>\n <span\n class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\"\n >\n {{ getCardSubCaption(item) }}\n </span>\n </div>\n\n <div\n *ngIf=\"item.children && item.children.length > 0\"\n class=\"flex items-end h-[100%]\"\n >\n <p\n (click)=\"viewDetailsChild(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n >\n view details\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n <verben-right-card-data-view\n *ngIf=\"this.cardContextHistory.length == 0\"\n >\n <ng-template #parent>\n <div\n *ngIf=\"this.currentData\"\n class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n >\n <verbena-input\n name=\"Name\"\n label=\"Name\"\n (ngModelChange)=\"updateTable()\"\n [(ngModel)]=\"this.currentData.data.Name\"\n />\n\n <!-- buttons -->\n <div class=\"flex justify-between bottom-8 left-0 right-0\">\n <div></div>\n <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n <div class=\"flex gap-3\">\n <verbena-button\n class=\"verben-switch-button\"\n (click)=\"goToTableView()\"\n text=\"Switch To Table\"\n ></verbena-button>\n <verbena-button\n class=\"verben-primary-button\"\n (click)=\"this.saveRole()\"\n text=\"Save\"\n ></verbena-button>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-right-card-data-view>\n <!-- <verben-right-card-data-view>\n yeshhhhhh\n </verben-right-card-data-view> -->\n\n <verben-card-data-view-footer\n *ngIf=\"this.cardContextHistory.length == 0\"\n >\n <div class=\"flex gap-2 justify-between\">\n <div\n *ngIf=\"\n !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n \"\n class=\"message-log-button-container flex justify-between\"\n >\n <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button> -->\n </div>\n <div\n class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\"\n >\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n (filtersApplied)=\"onFilterUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div import-content>\n <lib-data-import\n [previewColumns]=\"visibleColumnDef\"\n title=\"role\"\n (importEventData)=\"onComplete($event)\"\n [columnTemplates]=\"columnTemplates()\"\n >\n </lib-data-import>\n </div>\n <div export-content>\n <lib-data-xport\n [useImportKey]=\"true\"\n [columns]=\"visibleColumnDef\"\n [data]=\"data\"\n [dataQueryFunction]=\"exportFiltersAndSorts\"\n >\n </lib-data-xport>\n <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export> -->\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button> -->\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #ffe681}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i5.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i5.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i5.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i5.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i5.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i5.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i5.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i5.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i5.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
|
|
1844
1848
|
}
|
|
1845
1849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
|
|
1846
1850
|
type: Component,
|