verben-authentication-ui 0.7.1 → 0.7.3
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.
|
@@ -4633,6 +4633,7 @@ class RoleControlComponent {
|
|
|
4633
4633
|
cardContextHistoryData = [];
|
|
4634
4634
|
cardDataView;
|
|
4635
4635
|
dataView;
|
|
4636
|
+
popUp;
|
|
4636
4637
|
isGlobal = true;
|
|
4637
4638
|
serviceName = null;
|
|
4638
4639
|
application = null;
|
|
@@ -5038,6 +5039,7 @@ class RoleControlComponent {
|
|
|
5038
5039
|
const cardData = this.cardData.find((x) => x.data == data);
|
|
5039
5040
|
if (cardData) {
|
|
5040
5041
|
this.viewDetails(cardData);
|
|
5042
|
+
this.closePopUp();
|
|
5041
5043
|
}
|
|
5042
5044
|
}
|
|
5043
5045
|
viewDetails(context) {
|
|
@@ -5747,29 +5749,40 @@ class RoleControlComponent {
|
|
|
5747
5749
|
}
|
|
5748
5750
|
return returnArray;
|
|
5749
5751
|
}
|
|
5752
|
+
closePopUp() {
|
|
5753
|
+
if (this.popUp.dropdownOpen == true) {
|
|
5754
|
+
this.popUp.toggleDropdown();
|
|
5755
|
+
this.openDropdownId = null;
|
|
5756
|
+
this.onClose();
|
|
5757
|
+
}
|
|
5758
|
+
}
|
|
5750
5759
|
editValue(value) {
|
|
5751
5760
|
const card = this.cardData.find((x) => x.data.Id == value.Id);
|
|
5752
5761
|
if (card && this.cardDataView) {
|
|
5753
5762
|
this.dataView.toggleView();
|
|
5754
5763
|
card.selected = true;
|
|
5755
5764
|
this.currentData = this.cardDataView.onItemClick(card);
|
|
5765
|
+
this.closePopUp();
|
|
5756
5766
|
// if (this.currentData) {
|
|
5757
5767
|
// this.form.controls['Name'].setValue(this.currentData.data?.Name);
|
|
5758
5768
|
// }
|
|
5759
5769
|
}
|
|
5760
5770
|
}
|
|
5761
5771
|
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 });
|
|
5762
|
-
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" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <div *ngIf=\"this.cardContextHistory.length > 0\"\n class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n <div class=\"flex gap-2 flex-1 context-banner-content\">\n <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n <div class=\"context-main-content-container flex gap-4\">\n <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n <span *ngIf=\"i == this.cardContextHistory.length -1\"\n class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n </div>\n <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n </div>\n </div>\n <div class=\"flex justify-end\">\n <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n [height]=\"20\"></verben-svg>\n </div>\n </div>\n <verben-data-view #vdv [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,\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0,\n isToggle:this.cardContextHistory.length == 0,\n }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\">\n <ng-container libColumn=\"select\">\n <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n </ng-template>\n <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\">\n <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\" />\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\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-row=\"row\" let-value>\n <verben-pop-Up [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n icon=\"list\"></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div (click)=\"editValue(value)\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n <ng-template #card let-item>\n <div (click)=\"roleCardClicked(item)\"\n *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n class=\"flex cursor-pointer h-[max-content]\">\n <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.data.Name\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n class=\"flex h-[max-content]\">\n <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetailsChild(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n <ng-template #parent>\n <div *ngIf=\"this.currentData\"\n class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n [(ngModel)]=\"this.currentData.data.Name\" />\n\n <!-- buttons -->\n <div class=\"flex justify-between bottom-8 left-0 right-0\">\n <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"vdv.toggleView()\"\n text=\"Switch To Table\"></verbena-button>\n <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n </div>\n </div>\n </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n <div class=\"flex gap-2 justify-between\">\n <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n 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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></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\">Load more</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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i2.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: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["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: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i2.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
|
|
5772
|
+
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" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "popUp", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <div *ngIf=\"this.cardContextHistory.length > 0\"\n class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n <div class=\"flex gap-2 flex-1 context-banner-content\">\n <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n <div class=\"context-main-content-container flex gap-4\">\n <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n <span *ngIf=\"i == this.cardContextHistory.length -1\"\n class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n </div>\n <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n </div>\n </div>\n <div class=\"flex justify-end\">\n <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n [height]=\"20\"></verben-svg>\n </div>\n </div>\n <verben-data-view #vdv [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,\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0,\n isToggle:this.cardContextHistory.length == 0,\n }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\">\n <ng-container libColumn=\"select\">\n <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n </ng-template>\n <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\">\n <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\" />\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\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-row=\"row\" let-value>\n <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n icon=\"list\"></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div (click)=\"editValue(value)\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n <ng-template #card let-item>\n <div (click)=\"roleCardClicked(item)\"\n *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n class=\"flex cursor-pointer h-[max-content]\">\n <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.data.Name\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n class=\"flex h-[max-content]\">\n <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetailsChild(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n <ng-template #parent>\n <div *ngIf=\"this.currentData\"\n class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n [(ngModel)]=\"this.currentData.data.Name\" />\n\n <!-- buttons -->\n <div class=\"flex justify-between bottom-8 left-0 right-0\">\n <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"vdv.toggleView()\"\n text=\"Switch To Table\"></verbena-button>\n <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n </div>\n </div>\n </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n <div class=\"flex gap-2 justify-between\">\n <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n 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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></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\">Load more</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}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i2.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: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["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: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i2.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
|
|
5763
5773
|
}
|
|
5764
5774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
|
|
5765
5775
|
type: Component,
|
|
5766
|
-
args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <div *ngIf=\"this.cardContextHistory.length > 0\"\n class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n <div class=\"flex gap-2 flex-1 context-banner-content\">\n <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n <div class=\"context-main-content-container flex gap-4\">\n <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n <span *ngIf=\"i == this.cardContextHistory.length -1\"\n class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n </div>\n <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n </div>\n </div>\n <div class=\"flex justify-end\">\n <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n [height]=\"20\"></verben-svg>\n </div>\n </div>\n <verben-data-view #vdv [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,\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0,\n isToggle:this.cardContextHistory.length == 0,\n }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\">\n <ng-container libColumn=\"select\">\n <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n </ng-template>\n <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\">\n <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\" />\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\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-row=\"row\" let-value>\n <verben-pop-Up [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n icon=\"list\"></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div (click)=\"editValue(value)\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n <ng-template #card let-item>\n <div (click)=\"roleCardClicked(item)\"\n *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n class=\"flex cursor-pointer h-[max-content]\">\n <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.data.Name\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n class=\"flex h-[max-content]\">\n <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetailsChild(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n <ng-template #parent>\n <div *ngIf=\"this.currentData\"\n class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n [(ngModel)]=\"this.currentData.data.Name\" />\n\n <!-- buttons -->\n <div class=\"flex justify-between bottom-8 left-0 right-0\">\n <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"vdv.toggleView()\"\n text=\"Switch To Table\"></verbena-button>\n <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n </div>\n </div>\n </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n <div class=\"flex gap-2 justify-between\">\n <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n 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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></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\">Load more</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}\n"] }]
|
|
5776
|
+
args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <div *ngIf=\"this.cardContextHistory.length > 0\"\n class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n <div class=\"flex gap-2 flex-1 context-banner-content\">\n <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n <div class=\"context-main-content-container flex gap-4\">\n <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n <span *ngIf=\"i == this.cardContextHistory.length -1\"\n class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n </div>\n <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n </div>\n </div>\n <div class=\"flex justify-end\">\n <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n [height]=\"20\"></verben-svg>\n </div>\n </div>\n <verben-data-view #vdv [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,\n isSelect: this.cardContextHistory.length == 0,\n isCreate: this.cardContextHistory.length == 0,\n isToggle:this.cardContextHistory.length == 0,\n }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\">\n <ng-container libColumn=\"select\">\n <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n </ng-template>\n <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\">\n <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\" />\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\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-row=\"row\" let-value>\n <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [dropdownOpen]=\"isDropdownOpen(row)\"\n [enableMouseLeave]=\"false\" (close)=\"onClose()\">\n <verben-svg class=\"cursor-pointer actions-icon\" (click)=\"openDropdown(row)\" dropdown-trigger\n icon=\"list\"></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div (click)=\"editValue(value)\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</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-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n <ng-template #card let-item>\n <div (click)=\"roleCardClicked(item)\"\n *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n class=\"flex cursor-pointer h-[max-content]\">\n <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.data.Name\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n class=\"flex h-[max-content]\">\n <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetails(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"></div>\n <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n item.title\n }}</h3>\n <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n *ngIf=\"item.children && item.children.length > 0\">\n {{getCardSubCaption(item)}}\n </span>\n </div>\n\n <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n <p (click)=\"viewDetailsChild(item)\"\n class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n view details</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 *ngIf=\"this.cardContextHistory.length == 0\">\n <ng-template #parent>\n <div *ngIf=\"this.currentData\"\n class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n [(ngModel)]=\"this.currentData.data.Name\" />\n\n <!-- buttons -->\n <div class=\"flex justify-between bottom-8 left-0 right-0\">\n <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"vdv.toggleView()\"\n text=\"Switch To Table\"></verbena-button>\n <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n </div>\n </div>\n </div>\n\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 *ngIf=\"this.cardContextHistory.length == 0\">\n <div class=\"flex gap-2 justify-between\">\n <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n 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 {{vdcv.hasCurrentItem()?'flex-1':''}} 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\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></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\">Load more</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}\n"] }]
|
|
5767
5777
|
}], ctorParameters: () => [{ type: AuthorizationService }, { type: RoleControlService }, { type: UtilService }, { type: HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: EnvironmentService }], propDecorators: { cardDataView: [{
|
|
5768
5778
|
type: ViewChild,
|
|
5769
5779
|
args: ['vdcv']
|
|
5770
5780
|
}], dataView: [{
|
|
5771
5781
|
type: ViewChild,
|
|
5772
5782
|
args: ['vdv']
|
|
5783
|
+
}], popUp: [{
|
|
5784
|
+
type: ViewChild,
|
|
5785
|
+
args: ['popup']
|
|
5773
5786
|
}], isGlobal: [{
|
|
5774
5787
|
type: Input
|
|
5775
5788
|
}], serviceName: [{
|