verben-authentication-ui 1.0.2 → 1.0.4
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.
|
@@ -4923,6 +4923,24 @@ class RoleControlComponent {
|
|
|
4923
4923
|
}
|
|
4924
4924
|
return null; // Not found
|
|
4925
4925
|
}
|
|
4926
|
+
isAllSelected(item) {
|
|
4927
|
+
const parent = this.cardContextHistoryData.length > 0
|
|
4928
|
+
? this.findParent(this.cardContextHistoryData[0], item)
|
|
4929
|
+
: this.findParent(this.cardData, item);
|
|
4930
|
+
if (parent &&
|
|
4931
|
+
parent.data.ChildrenType &&
|
|
4932
|
+
parent.data.ChildrenType == ChildrenType.Action &&
|
|
4933
|
+
parent.data.RoleActions.some((y) => !y.Selected)) {
|
|
4934
|
+
return false;
|
|
4935
|
+
}
|
|
4936
|
+
if (parent &&
|
|
4937
|
+
parent.data.ChildrenType &&
|
|
4938
|
+
parent.data.ChildrenType == ChildrenType.Permission &&
|
|
4939
|
+
parent.data.RoleContexts.some((y) => !y.Selected)) {
|
|
4940
|
+
return false;
|
|
4941
|
+
}
|
|
4942
|
+
return true;
|
|
4943
|
+
}
|
|
4926
4944
|
isCheckboxDisabled(item) {
|
|
4927
4945
|
const parent = this.cardContextHistoryData.length > 0
|
|
4928
4946
|
? this.findParent(this.cardContextHistoryData[0], item)
|
|
@@ -5623,6 +5641,180 @@ class RoleControlComponent {
|
|
|
5623
5641
|
}
|
|
5624
5642
|
}
|
|
5625
5643
|
}
|
|
5644
|
+
async saveAllRoleDynamic(item) {
|
|
5645
|
+
if (this.isCheckboxDisabled(item)) {
|
|
5646
|
+
this.utilService.showInfo('Parent UI not selected');
|
|
5647
|
+
return;
|
|
5648
|
+
}
|
|
5649
|
+
var role = this.cardContextHistory.length > 0
|
|
5650
|
+
? this.cardContextHistory[0]
|
|
5651
|
+
: this.currentExpandedCard
|
|
5652
|
+
? this.currentExpandedCard
|
|
5653
|
+
: null;
|
|
5654
|
+
var cardDataRef = this.cardContextHistoryData.length > 0
|
|
5655
|
+
? this.cardContextHistoryData[0]
|
|
5656
|
+
: this.currentExpandedCard
|
|
5657
|
+
? this.cardData
|
|
5658
|
+
: null;
|
|
5659
|
+
// const isExpandedCard: boolean =
|
|
5660
|
+
// this.cardContextHistory.length > 0
|
|
5661
|
+
// ? false
|
|
5662
|
+
// : this.currentExpandedCard
|
|
5663
|
+
// ? true
|
|
5664
|
+
// : false;
|
|
5665
|
+
if (!role) {
|
|
5666
|
+
return;
|
|
5667
|
+
}
|
|
5668
|
+
if (role.data.Name.trim().length == 0) {
|
|
5669
|
+
this.utilService.showInfo('Role name cannot be empty');
|
|
5670
|
+
return;
|
|
5671
|
+
}
|
|
5672
|
+
const isAllSelected = this.isAllSelected(item);
|
|
5673
|
+
const parent = this.cardContextHistoryData.length > 0
|
|
5674
|
+
? this.findParent(this.cardContextHistoryData[0], item)
|
|
5675
|
+
: this.findParent(this.cardData, item);
|
|
5676
|
+
if (parent &&
|
|
5677
|
+
parent.data.ChildrenType &&
|
|
5678
|
+
parent.data.ChildrenType == ChildrenType.Action) {
|
|
5679
|
+
parent.data.RoleActions.forEach((x) => {
|
|
5680
|
+
x.Selected = !isAllSelected;
|
|
5681
|
+
});
|
|
5682
|
+
}
|
|
5683
|
+
if (parent &&
|
|
5684
|
+
parent.data.ChildrenType &&
|
|
5685
|
+
parent.data.ChildrenType == ChildrenType.Permission) {
|
|
5686
|
+
parent.data.RoleContexts.forEach((x) => {
|
|
5687
|
+
x.Selected = !isAllSelected;
|
|
5688
|
+
});
|
|
5689
|
+
}
|
|
5690
|
+
const mappedRole = this.getUpdatedRole(JSON.parse(JSON.stringify(role.data)));
|
|
5691
|
+
this.utilService.sendBI(true);
|
|
5692
|
+
const res = await this.server.post(`Role/SaveRoles`, [mappedRole]);
|
|
5693
|
+
this.utilService.sendBI(false);
|
|
5694
|
+
if (res instanceof ErrorResponse) {
|
|
5695
|
+
item.data.Selected = false;
|
|
5696
|
+
}
|
|
5697
|
+
else {
|
|
5698
|
+
this.utilService.showSuccess('Role saved successfully');
|
|
5699
|
+
const result = res;
|
|
5700
|
+
if (result.length > 0) {
|
|
5701
|
+
var roleResult = result[0];
|
|
5702
|
+
var mappedRoleSave = {
|
|
5703
|
+
...roleResult,
|
|
5704
|
+
ChildrenType: ChildrenType.Permission,
|
|
5705
|
+
RoleContexts: this.sourceData.map((config) => {
|
|
5706
|
+
const existingId = roleResult.RoleContexts.findIndex((y) => y.Name == config.Name);
|
|
5707
|
+
var context = {
|
|
5708
|
+
ChildrenType: ChildrenType.Action,
|
|
5709
|
+
Selected: existingId > -1 ? true : false,
|
|
5710
|
+
RoleActions: config.Actions.map((action) => {
|
|
5711
|
+
const existingAction = existingId > -1
|
|
5712
|
+
? roleResult.RoleContexts[existingId].RoleActions.findIndex((c) => c.Name == action)
|
|
5713
|
+
: -1;
|
|
5714
|
+
var act = {
|
|
5715
|
+
Selected: existingAction > -1 ? true : false,
|
|
5716
|
+
Name: action,
|
|
5717
|
+
Role: roleResult.Code,
|
|
5718
|
+
Context: '',
|
|
5719
|
+
id: existingAction > -1
|
|
5720
|
+
? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
|
|
5721
|
+
: '',
|
|
5722
|
+
Id: existingAction > -1
|
|
5723
|
+
? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
|
|
5724
|
+
: '',
|
|
5725
|
+
CreatedAt: new Date(),
|
|
5726
|
+
UpdatedAt: new Date(),
|
|
5727
|
+
DataState: ObjectState.New,
|
|
5728
|
+
TenantId: roleResult.TenantId,
|
|
5729
|
+
Code: existingAction > -1
|
|
5730
|
+
? roleResult.RoleContexts[existingId].RoleActions[existingAction].Code
|
|
5731
|
+
: '',
|
|
5732
|
+
ServiceName: existingAction > -1
|
|
5733
|
+
? roleResult.RoleContexts[existingId].RoleActions[existingAction].ServiceName
|
|
5734
|
+
: '',
|
|
5735
|
+
APIKey: existingAction > -1
|
|
5736
|
+
? roleResult.RoleContexts[existingId].RoleActions[existingAction].APIKey
|
|
5737
|
+
: this.envSvc.environment.APIKey,
|
|
5738
|
+
ApplicationRoleAction: this.getApplicationActionCode(action),
|
|
5739
|
+
};
|
|
5740
|
+
return act;
|
|
5741
|
+
}),
|
|
5742
|
+
Name: config.Name,
|
|
5743
|
+
Role: roleResult.Code,
|
|
5744
|
+
id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
|
|
5745
|
+
Id: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
|
|
5746
|
+
CreatedAt: new Date(),
|
|
5747
|
+
UpdatedAt: new Date(),
|
|
5748
|
+
DataState: ObjectState.New,
|
|
5749
|
+
TenantId: roleResult.TenantId,
|
|
5750
|
+
Code: existingId > -1 ? roleResult.RoleContexts[existingId].Code : '',
|
|
5751
|
+
ServiceName: existingId > -1
|
|
5752
|
+
? roleResult.RoleContexts[existingId].ServiceName
|
|
5753
|
+
: '',
|
|
5754
|
+
APIKey: existingId > -1
|
|
5755
|
+
? roleResult.RoleContexts[existingId].APIKey
|
|
5756
|
+
: this.envSvc.environment.APIKey,
|
|
5757
|
+
ApplicationRoleContext: this.getApplicationContextCode(config.Name),
|
|
5758
|
+
};
|
|
5759
|
+
return context;
|
|
5760
|
+
}),
|
|
5761
|
+
};
|
|
5762
|
+
const itemIndex = cardDataRef
|
|
5763
|
+
? cardDataRef.findIndex((x) => x.data == role?.data)
|
|
5764
|
+
: -1;
|
|
5765
|
+
if (itemIndex > -1) {
|
|
5766
|
+
this.data[itemIndex].Code = mappedRoleSave.Code;
|
|
5767
|
+
this.data[itemIndex].Id = mappedRoleSave.Code;
|
|
5768
|
+
this.data[itemIndex].DataState = mappedRoleSave.DataState;
|
|
5769
|
+
this.data[itemIndex].TenantId = mappedRoleSave.TenantId;
|
|
5770
|
+
this.data[itemIndex].ServiceName = mappedRoleSave.ServiceName;
|
|
5771
|
+
mappedRoleSave.RoleContexts.forEach((x, i) => {
|
|
5772
|
+
this.data[itemIndex].RoleContexts[i].Role = mappedRoleSave.Code;
|
|
5773
|
+
this.data[itemIndex].RoleContexts[i].Code = x.Code;
|
|
5774
|
+
this.data[itemIndex].RoleContexts[i].ServiceName = x.ServiceName;
|
|
5775
|
+
x.RoleActions.forEach((y, j) => {
|
|
5776
|
+
this.data[itemIndex].RoleContexts[i].RoleActions[j].Role =
|
|
5777
|
+
mappedRoleSave.Code;
|
|
5778
|
+
this.data[itemIndex].RoleContexts[i].RoleActions[j].Code = y.Code;
|
|
5779
|
+
this.data[itemIndex].RoleContexts[i].RoleActions[j].ServiceName =
|
|
5780
|
+
y.ServiceName;
|
|
5781
|
+
});
|
|
5782
|
+
});
|
|
5783
|
+
// this.data[itemIndex].RoleContexts = mappedRoleSave.RoleContexts;
|
|
5784
|
+
this.data = this.data.map((x) => x);
|
|
5785
|
+
// if (cardDataRef) {
|
|
5786
|
+
// console.log({
|
|
5787
|
+
// XDataIsHere: JSON.parse(JSON.stringify(cardDataRef)),
|
|
5788
|
+
// });
|
|
5789
|
+
// cardDataRef[itemIndex] = {
|
|
5790
|
+
// selected: cardDataRef[itemIndex].selected,
|
|
5791
|
+
// isChildrenExpanded: cardDataRef[itemIndex].isChildrenExpanded,
|
|
5792
|
+
// title: mappedRoleSave.Name,
|
|
5793
|
+
// data: mappedRoleSave,
|
|
5794
|
+
// body: [],
|
|
5795
|
+
// children: mappedRoleSave.RoleContexts.map((c) => {
|
|
5796
|
+
// return {
|
|
5797
|
+
// selected: false,
|
|
5798
|
+
// title: this.getFormattedName(c.Name),
|
|
5799
|
+
// data: c,
|
|
5800
|
+
// body: [],
|
|
5801
|
+
// children: c.RoleActions.map((a) => {
|
|
5802
|
+
// return {
|
|
5803
|
+
// selected: false,
|
|
5804
|
+
// title: this.getFormattedName(a.Name),
|
|
5805
|
+
// data: a,
|
|
5806
|
+
// body: [],
|
|
5807
|
+
// children: [],
|
|
5808
|
+
// };
|
|
5809
|
+
// }),
|
|
5810
|
+
// };
|
|
5811
|
+
// }),
|
|
5812
|
+
// };
|
|
5813
|
+
// }
|
|
5814
|
+
}
|
|
5815
|
+
}
|
|
5816
|
+
}
|
|
5817
|
+
}
|
|
5626
5818
|
saveDataAll() {
|
|
5627
5819
|
const roles = this.data.map((x) => {
|
|
5628
5820
|
return {
|
|
@@ -6013,11 +6205,11 @@ class RoleControlComponent {
|
|
|
6013
6205
|
this.tableCache.delete(cacheKey);
|
|
6014
6206
|
}
|
|
6015
6207
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: AuthorizationService }, { token: RoleControlService }, { token: UtilService }, { token: HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.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: "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 <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: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Export']),\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Create']),\n isToggle:this.cardContextHistory.length == 0,\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]=\"cardData\"\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]=\"cardData\"\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-item>\n <div class=\"flex h-[max-content]\">\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 export-content>\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}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i8.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: i8.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i8.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i8.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i8.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i8.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i8.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: i8.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: i8.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: "component", type: i8.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.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: i8.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: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
|
|
6208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.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: "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 <div\n *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n class=\"flex items-center gap-2 px-2\"\n >\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 <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: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Export']),\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Create']),\n isToggle:this.cardContextHistory.length == 0,\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]=\"cardData\"\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]=\"cardData\"\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 export-content>\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}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i8.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: i8.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i8.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i8.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i8.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i8.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i8.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: i8.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: i8.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: "component", type: i8.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.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: i8.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: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
|
|
6017
6209
|
}
|
|
6018
6210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
|
|
6019
6211
|
type: Component,
|
|
6020
|
-
args: [{ selector: 'lib-role-control', 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 <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: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Export']),\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Create']),\n isToggle:this.cardContextHistory.length == 0,\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]=\"cardData\"\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]=\"cardData\"\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-item>\n <div class=\"flex h-[max-content]\">\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 export-content>\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}\n"] }]
|
|
6212
|
+
args: [{ selector: 'lib-role-control', 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 <div\n *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n class=\"flex items-center gap-2 px-2\"\n >\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 <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: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Export']),\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Create']),\n isToggle:this.cardContextHistory.length == 0,\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]=\"cardData\"\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]=\"cardData\"\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 export-content>\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}\n"] }]
|
|
6021
6213
|
}], ctorParameters: () => [{ type: AuthorizationService }, { type: RoleControlService }, { type: UtilService }, { type: HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: EnvironmentService }], propDecorators: { cardDataView: [{
|
|
6022
6214
|
type: ViewChild,
|
|
6023
6215
|
args: ['vdcv']
|