verben-workflow-ui 0.5.78 → 0.5.80

package/fesm2022/verben-workflow-ui-src-lib-components-form-group.mjs

@@ -11,7 +11,9 @@ import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from 'verben-workflow-ui/src/lib/pipes';
 import { FormControlerModule } from 'verben-workflow-ui/src/lib/components/form-control';
+import { SharedModule } from 'verben-workflow-ui/src/lib/shared';
 
 const baseStyle = {
     width: '100%',
@@ -96,6 +98,11 @@ class FormsService {
                 header: 'VALIDATED',
                 accessorKey: 'IsValidated',
             },
+            {
+                id: 'entity',
+                header: 'ENTITY',
+                accessorKey: 'Entity',
+            },
             {
                 id: 'actions',
                 header: 'ACTIONS',
@@ -177,6 +184,8 @@ class FormGroupComponent {
     currentSorts = [];
     searchTerm$ = new Subject();
     statusOptions = Object.values(Status);
+    eavEntities = [];
+    workflowAPI = '';
     users = [];
     visibleColumns = [];
     filterArray = [
@@ -266,9 +275,15 @@ class FormGroupComponent {
             name: typeof col.header === 'string' ? col.header : col.id,
             type: DataFilterType.Bool,
         }));
+        this.workflowAPI = this.envSvc.environment.WorkFlowAPI;
     }
     async ngOnInit() {
         this.getForms();
+        this.getEAVEntities().then((res) => {
+            if (res) {
+                this.eavEntities = res;
+            }
+        });
     }
     async getAllTaskUsers() {
         this.utilService.sendBI(true);
@@ -319,7 +334,10 @@ class FormGroupComponent {
         else {
             this.data = result;
         }
-        this.data.forEach((x) => (x.id = x.Id));
+        this.data.forEach((x) => {
+            x.Id = x.Code;
+            x.id = x.Id;
+        });
         this.skip += this.pageSize;
         this.hasMore = this.skip < this.pageState.Total;
         this.setUpCardData();
@@ -437,8 +455,9 @@ class FormGroupComponent {
                     const itemIndex = this.data.findIndex((x) => x == this.currentData?.data);
                     if (itemIndex > -1) {
                         this.data[itemIndex].Name = formResult.Name;
-                        this.data[itemIndex].Id = formResult.Id;
-                        this.data[itemIndex].id = formResult.id;
+                        this.data[itemIndex].Code = formResult.Code;
+                        this.data[itemIndex].Id = formResult.Code;
+                        this.data[itemIndex].id = formResult.Code;
                         this.data[itemIndex].DataState = formResult.DataState;
                         this.data[itemIndex].Description = formResult.Description;
                         this.data[itemIndex].IsValidated = formResult.IsValidated;
@@ -454,7 +473,7 @@ class FormGroupComponent {
         row.IsValidated = newValue;
         console.log(row);
     }
-    async tableSaveUser(form, callBack) {
+    async tableSaveFormGroup(form, callBack) {
         form.DataState =
             form.DataState == ObjectState.New ? ObjectState.New : ObjectState.Changed;
         form.Id = form.DataState == ObjectState.New ? '' : form.Id;
@@ -471,8 +490,9 @@ class FormGroupComponent {
                 const itemIndex = this.data.findIndex((x) => x == form);
                 if (itemIndex > -1) {
                     this.data[itemIndex].Name = formResult.Name;
-                    this.data[itemIndex].Id = formResult.Id;
-                    this.data[itemIndex].id = formResult.id;
+                    this.data[itemIndex].Code = formResult.Code;
+                    this.data[itemIndex].Id = formResult.Code;
+                    this.data[itemIndex].id = formResult.Code;
                     this.data[itemIndex].DataState = formResult.DataState;
                     this.data[itemIndex].Description = formResult.Description;
                     this.data[itemIndex].IsValidated = formResult.IsValidated;
@@ -486,7 +506,7 @@ class FormGroupComponent {
     }
     updateTable() {
         this.data = this.data.map((x) => x);
-        console.log(this.data);
+        //console.log(this.data);
     }
     onFieldCountChange(value, source) {
         source.Workflow = value;
@@ -526,6 +546,10 @@ class FormGroupComponent {
             else {
                 this.pageState = res;
                 var result = res.Result;
+                result.forEach((x) => {
+                    x.Id = x.Code;
+                    x.id = x.Id;
+                });
                 this.data = result;
                 this.setUpCardData();
             }
@@ -652,6 +676,10 @@ class FormGroupComponent {
         else {
             this.pageState = res;
             var result = res.Result;
+            result.forEach((x) => {
+                x.Id = x.Code;
+                x.id = x.Id;
+            });
             this.data = result;
             this.setUpCardData();
         }
@@ -666,6 +694,10 @@ class FormGroupComponent {
         else {
             this.pageState = res;
             var result = res.Result;
+            result.forEach((x) => {
+                x.Id = x.Code;
+                x.id = x.Id;
+            });
             this.data = result;
             this.setUpCardData();
             // this.setUpCardDataExtra(this.data)
@@ -734,12 +766,37 @@ class FormGroupComponent {
             document.body.removeChild(link);
         }
     }
+    async getEAVEntities() {
+        this.utilService.sendBI(true);
+        const res = await this.server.get(`GetEAVEntity/0/0`);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    }
+    async publishEAV(entity) {
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`PublishEAV`, entity);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            this.utilService.showInfo('Extensions Published Successfully');
+            // var result = (res as PagedResult<EAVEntity>).Result;
+            // return result;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormGroupComponent, deps: [{ token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i1.EnvironmentService }, { token: i3.Router }, { token: FormsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormGroupComponent, selector: "lib-form-group", inputs: { path: "path", application: "application", pageSize: "pageSize" }, outputs: { onViewProcessClicked: "onViewProcessClicked" }, 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 }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n\n    <verben-data-view #vdv [viewState]=\"{\n        isSearch: true,\n        isColumn: true,\n        isFilter: true,\n        isSort: true,\n        isExport: true,\n        isSelect: true,\n        isCreate: true,\n        isToggle:true,\n        \n      }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n      [searchValue]=\"searchTerm\"\n      (onSearchChange)=\"onSearch($event)\"\n      [showFilterChild]=\"showFilter\"\n      [showSortChild]=\"showSort\"\n      [showColumnChild]=\"showColumn\"\n      [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnTableCount\" [selectedSortCount]=\"selectedSortTableCount\"\n      [selectedFilterTableCount]=\"selectedFilterTableCount\" (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n      >\n      <div class=\"mt-2\" table-content>\n        <lib-data-table #dt [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=\"name\">\n            <ng-template #cell let-row=\"row\" let-value>\n              {{value.Name}}\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n               <verbena-input inputContainerClass=\"w-fit\" [(ngModel)]=\"row.Name\"></verbena-input>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"workflow\">\n            <ng-template #cell let-row=\"row\" let-value>\n              {{value}}\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n               <verbena-input  inputContainerClass=\"w-fit\" [(ngModel)]=\"row.Workflow\"></verbena-input>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"description\">\n            <ng-template #cell let-row=\"row\" let-value>\n              {{value}}\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n               <verbena-input inputContainerClass=\"w-fit\" [(ngModel)]=\"row.Description\"></verbena-input>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"isValidated\">\n            <ng-template #cell let-row=\"row\" let-value>\n              <verben-svg *ngIf=\"value===true\" [icon]=\"'check'\"></verben-svg>\n              <verben-svg *ngIf=\"value===false\" [icon]=\"'error'\"></verben-svg>\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n              <verbena-switch [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"row.IsValidated\"></verbena-switch>\n            </ng-template>\n            \n        </ng-container>\n      \n          <ng-container libColumn=\"actions\">\n            <ng-template #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" 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)=\"navigateToFields(row)\" class=\"pop-up-value cursor-pointer\">View Fields</div>\n                  <div (click)=\"toggleRowEdit()\" class=\"pop-up-value cursor-pointer\">Edit</div>\n                  <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n                </div>\n              </verben-pop-Up>\n            </ng-template>\n            <ng-template #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n              <div class=\"flex gap-2 items-center\">\n                <verben-svg icon=\"check\" [width]=\"15\" [height]=\"15\"\n                  (click)=\"tableSaveUser(value, toggleRowEdit)\"></verben-svg>\n                <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n                <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"goToCardView(value)\"></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 borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n          rbgColor=\"var(--vbn-color-surface-alt)\" 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)=\"userCardClicked(item)\" 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                          <div class=\"flex justify-between\">\n                            <div>\n                              <h3 class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\">{{\n                                item.data.Name\n                                }}</h3>\n                              <span class=\"flex mt-2 items-center gap-1\">\n                                <span class=\"!text-[10px] font-light text-[var(--vbn-color-on-primary)]\">Description:</span> <span\n                                  class=\"!text-[12px] font-semibold\">{{item.data.Description}}</span>\n                              </span>\n                            </div>\n                          \n                               <div>\n                                <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                                  >Work Flow</span\n                                >\n                                <p class=\"!text-[12px]\">{{ item.data.Workflow }}</p>\n                              </div>\n                          </div>\n                         \n                        </div>\n  \n                        <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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            <ng-template #parent>\n              <div *ngIf=\"this.currentData\"\n                class=\"flex flex-col rounded-xl h-full  w-full relative gap-6\">\n                <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                  [(ngModel)]=\"currentData.data.Name\" />\n                <verbena-input name=\"Description\" label=\"Description\" (ngModelChange)=\"updateTable()\"\n                  [(ngModel)]=\"currentData.data.Description\" />\n                <verbena-input  name=\"Workflow\" label=\"Work Flow\" [(ngModel)]='currentData.data.Workflow' />\n                 <div>\n                  <p class=\"mb-2\">Validate</p>\n                   <verbena-switch [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"currentData.data.IsValidated\"></verbena-switch>\n               \n                 </div>\n                <!-- <div class=\"flex flex-col gap-1\">\n                  <div>Status</div>\n                  <verben-drop-down width=\"100%\" placeholder=\"Change Status\" [(options)]=\"statusOptions\"\n                    [(ngModel)]=\"this.currentData.data.Status\">\n                  </verben-drop-down>\n                </div> -->\n  \n                <!-- buttons -->\n                <div class=\"flex  justify-between w-full 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 *ngIf=\"currentData.data.DataState !=='New'\" class=\"verben-switch-button\"\n                      (click)=\"navigateToFields(currentData.data)\"\n                      text=\"View Fields\"></verbena-button>\n                    <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                      text=\"Switch To Table\"></verbena-button>\n                    <verbena-button class=\"verben-primary-button\" (click)=\"this.saveFormGroup()\" 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>\n            <div class=\"flex gap-2 justify-between\">\n              <div *ngIf=\"!vdcv.hasCurrentItem()\" class=\"message-log-button-container flex justify-between\">\n                <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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 (resetFilter)=\"getForms()\" (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n          borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n          primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" [columns]=\"visibleColumns\"\n          [displayedColumns]=\"5\"></verben-visible-column>\n      </div>\n      <div filter-content>\n        <verben-table-filter (resetSortData)=\"getForms()\"  (filtersApplied)=\"onFilterApplied($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n          borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n          primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" tertiaryColor=\"var(--vbn-color-on-primary)\" [filterOptions]=\"filterArray\"\n          [maxFilterLength]=\"3\"></verben-table-filter>\n      </div>\n      <div  sort-content>\n        <verben-sort-table (resetSortData)=\"getForms()\" (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n          borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n          primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" tertiaryColor=\"var(--vbn-color-on-primary)\" [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      \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]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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>", styles: [".view-links{font-size:14px!important;color:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i6.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i6.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i6.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: i6.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "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: i6.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i6.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i6.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i6.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i6.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i6.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i6.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: i6.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: i6.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: i6.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data", "dataFetchUrl", "dataQueryParameters"], outputs: ["exportDataEvent"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormGroupComponent, selector: "lib-form-group", inputs: { path: "path", application: "application", pageSize: "pageSize" }, outputs: { onViewProcessClicked: "onViewProcessClicked" }, 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 }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [searchValue]=\"searchTerm\"\n    (onSearchChange)=\"onSearch($event)\"\n    [showFilterChild]=\"showFilter\"\n    [showSortChild]=\"showSort\"\n    [showColumnChild]=\"showColumn\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnTableCount\"\n    [selectedSortCount]=\"selectedSortTableCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\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=\"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-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Name\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"workflow\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Workflow\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"description\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Description\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"isValidated\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsValidated\"\n            ></verbena-switch>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"entity\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{\n              row.Entity\n                | asyncLabel: \"EAVEntity\" : \"Entity\" : workflowAPI\n                | async\n            }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verben-drop-down\n              width=\"100%\"\n              placeholder=\"Select Entity\"\n              [showClear]=\"true\"\n              [filter]=\"true\"\n              [(options)]=\"eavEntities\"\n              optionLabel=\"Entity\"\n              optionValue=\"Code\"\n              [(ngModel)]=\"row.Entity\"\n            >\n            </verben-drop-down>\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              [customStyles]=\"{ 'z-index': '99' }\"\n              [dropdownOpen]=\"isDropdownOpen(row)\"\n              [enableMouseLeave]=\"false\"\n              (close)=\"onClose()\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                (click)=\"openDropdown(row)\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  (click)=\"navigateToFields(row)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Fields\n                </div>\n                <div\n                  (click)=\"toggleRowEdit()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n              </div>\n            </verben-pop-Up>\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=\"check\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveFormGroup(value, toggleRowEdit)\"\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)=\"goToCardView(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=\"var(--vbn-color-surface-alt)\"\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)=\"userCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\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\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                        <div class=\"flex justify-between\">\n                          <div>\n                            <h3\n                              class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\"\n                            >\n                              {{ item.data.Name }}\n                            </h3>\n                            <span class=\"flex mt-2 items-center gap-1\">\n                              <span\n                                class=\"!text-[10px] font-light text-[var(--vbn-color-on-primary)]\"\n                                >Description:</span\n                              >\n                              <span class=\"!text-[12px] font-semibold\">{{\n                                item.data.Description\n                              }}</span>\n                            </span>\n                          </div>\n\n                          <div>\n                            <span\n                              class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                              >Work Flow</span\n                            >\n                            <p class=\"!text-[12px]\">{{ item.data.Workflow }}</p>\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full relative gap-6\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"currentData.data.Name\"\n              />\n              <verbena-input\n                name=\"Description\"\n                label=\"Description\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"currentData.data.Description\"\n              />\n              <verbena-input\n                name=\"Workflow\"\n                label=\"Work Flow\"\n                [(ngModel)]=\"currentData.data.Workflow\"\n              />\n\n              <div class=\"flex flex-col gap-1\">\n                <div>Entity</div>\n                <verben-drop-down\n                  width=\"100%\"\n                  placeholder=\"Select Entity\"\n                  [showClear]=\"true\"\n                  [filter]=\"true\"\n                  [(options)]=\"eavEntities\"\n                  optionLabel=\"Entity\"\n                  optionValue=\"Code\"\n                  [(ngModel)]=\"currentData.data.Entity\"\n                >\n                </verben-drop-down>\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <div>Validate</div>\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsValidated\"\n                ></verbena-switch>\n              </div>\n              <!-- <div class=\"flex flex-col gap-1\">\n                  <div>Status</div>\n                  <verben-drop-down width=\"100%\" placeholder=\"Change Status\" [(options)]=\"statusOptions\"\n                    [(ngModel)]=\"this.currentData.data.Status\">\n                  </verben-drop-down>\n                </div> -->\n\n              <!-- buttons -->\n              <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n                <div>\n                  <verbena-button\n                    *ngIf=\"\n                      currentData.data.Entity &&\n                      currentData.data.Entity.trim().length > 0\n                    \"\n                    class=\"verben-switch-button\"\n                    (click)=\"publishEAV(currentData.data)\"\n                    text=\"Publish Extension\"\n                  ></verbena-button>\n                </div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    *ngIf=\"currentData.data.DataState !== 'New'\"\n                    class=\"verben-switch-button\"\n                    (click)=\"navigateToFields(currentData.data)\"\n                    text=\"View Fields\"\n                  ></verbena-button>\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.saveFormGroup()\"\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          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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        (resetFilter)=\"getForms()\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (resetSortData)=\"getForms()\"\n        (filtersApplied)=\"onFilterApplied($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (resetSortData)=\"getForms()\"\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\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]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i6.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i6.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i6.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: i6.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "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: i6.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i6.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i6.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i6.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i6.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i6.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: i6.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: i6.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: i6.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data", "dataFetchUrl", "dataQueryParameters"], outputs: ["exportDataEvent"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "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: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AsyncLabelPipe, name: "asyncLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-group', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n\n    <verben-data-view #vdv [viewState]=\"{\n        isSearch: true,\n        isColumn: true,\n        isFilter: true,\n        isSort: true,\n        isExport: true,\n        isSelect: true,\n        isCreate: true,\n        isToggle:true,\n        \n      }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n      [searchValue]=\"searchTerm\"\n      (onSearchChange)=\"onSearch($event)\"\n      [showFilterChild]=\"showFilter\"\n      [showSortChild]=\"showSort\"\n      [showColumnChild]=\"showColumn\"\n      [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnTableCount\" [selectedSortCount]=\"selectedSortTableCount\"\n      [selectedFilterTableCount]=\"selectedFilterTableCount\" (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\"\n      >\n      <div class=\"mt-2\" table-content>\n        <lib-data-table #dt [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=\"name\">\n            <ng-template #cell let-row=\"row\" let-value>\n              {{value.Name}}\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n               <verbena-input inputContainerClass=\"w-fit\" [(ngModel)]=\"row.Name\"></verbena-input>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"workflow\">\n            <ng-template #cell let-row=\"row\" let-value>\n              {{value}}\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n               <verbena-input  inputContainerClass=\"w-fit\" [(ngModel)]=\"row.Workflow\"></verbena-input>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"description\">\n            <ng-template #cell let-row=\"row\" let-value>\n              {{value}}\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n               <verbena-input inputContainerClass=\"w-fit\" [(ngModel)]=\"row.Description\"></verbena-input>\n            </ng-template>\n          </ng-container>\n          <ng-container libColumn=\"isValidated\">\n            <ng-template #cell let-row=\"row\" let-value>\n              <verben-svg *ngIf=\"value===true\" [icon]=\"'check'\"></verben-svg>\n              <verben-svg *ngIf=\"value===false\" [icon]=\"'error'\"></verben-svg>\n            </ng-template>\n            <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n              <verbena-switch [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"row.IsValidated\"></verbena-switch>\n            </ng-template>\n            \n        </ng-container>\n      \n          <ng-container libColumn=\"actions\">\n            <ng-template #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" 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)=\"navigateToFields(row)\" class=\"pop-up-value cursor-pointer\">View Fields</div>\n                  <div (click)=\"toggleRowEdit()\" class=\"pop-up-value cursor-pointer\">Edit</div>\n                  <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n                </div>\n              </verben-pop-Up>\n            </ng-template>\n            <ng-template #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n              <div class=\"flex gap-2 items-center\">\n                <verben-svg icon=\"check\" [width]=\"15\" [height]=\"15\"\n                  (click)=\"tableSaveUser(value, toggleRowEdit)\"></verben-svg>\n                <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n                <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"goToCardView(value)\"></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 borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n          rbgColor=\"var(--vbn-color-surface-alt)\" 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)=\"userCardClicked(item)\" 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                          <div class=\"flex justify-between\">\n                            <div>\n                              <h3 class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\">{{\n                                item.data.Name\n                                }}</h3>\n                              <span class=\"flex mt-2 items-center gap-1\">\n                                <span class=\"!text-[10px] font-light text-[var(--vbn-color-on-primary)]\">Description:</span> <span\n                                  class=\"!text-[12px] font-semibold\">{{item.data.Description}}</span>\n                              </span>\n                            </div>\n                          \n                               <div>\n                                <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                                  >Work Flow</span\n                                >\n                                <p class=\"!text-[12px]\">{{ item.data.Workflow }}</p>\n                              </div>\n                          </div>\n                         \n                        </div>\n  \n                        <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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            <ng-template #parent>\n              <div *ngIf=\"this.currentData\"\n                class=\"flex flex-col rounded-xl h-full  w-full relative gap-6\">\n                <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                  [(ngModel)]=\"currentData.data.Name\" />\n                <verbena-input name=\"Description\" label=\"Description\" (ngModelChange)=\"updateTable()\"\n                  [(ngModel)]=\"currentData.data.Description\" />\n                <verbena-input  name=\"Workflow\" label=\"Work Flow\" [(ngModel)]='currentData.data.Workflow' />\n                 <div>\n                  <p class=\"mb-2\">Validate</p>\n                   <verbena-switch [onColor]=\"'var(--vbn-color-text)'\" [(ngModel)]=\"currentData.data.IsValidated\"></verbena-switch>\n               \n                 </div>\n                <!-- <div class=\"flex flex-col gap-1\">\n                  <div>Status</div>\n                  <verben-drop-down width=\"100%\" placeholder=\"Change Status\" [(options)]=\"statusOptions\"\n                    [(ngModel)]=\"this.currentData.data.Status\">\n                  </verben-drop-down>\n                </div> -->\n  \n                <!-- buttons -->\n                <div class=\"flex  justify-between w-full 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 *ngIf=\"currentData.data.DataState !=='New'\" class=\"verben-switch-button\"\n                      (click)=\"navigateToFields(currentData.data)\"\n                      text=\"View Fields\"></verbena-button>\n                    <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                      text=\"Switch To Table\"></verbena-button>\n                    <verbena-button class=\"verben-primary-button\" (click)=\"this.saveFormGroup()\" 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>\n            <div class=\"flex gap-2 justify-between\">\n              <div *ngIf=\"!vdcv.hasCurrentItem()\" class=\"message-log-button-container flex justify-between\">\n                <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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 (resetFilter)=\"getForms()\" (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n          borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n          primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" [columns]=\"visibleColumns\"\n          [displayedColumns]=\"5\"></verben-visible-column>\n      </div>\n      <div filter-content>\n        <verben-table-filter (resetSortData)=\"getForms()\"  (filtersApplied)=\"onFilterApplied($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n          borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n          primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" tertiaryColor=\"var(--vbn-color-on-primary)\" [filterOptions]=\"filterArray\"\n          [maxFilterLength]=\"3\"></verben-table-filter>\n      </div>\n      <div  sort-content>\n        <verben-sort-table (resetSortData)=\"getForms()\" (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid var(--vbn-color-primary)'\"\n          borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n          primaryColor=\"var(--vbn-color-primary)\" secondaryColor=\"var(--vbn-color-border-focus)\" tertiaryColor=\"var(--vbn-color-on-primary)\" [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      \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]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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>", styles: [".view-links{font-size:14px!important;color:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"] }]
+            args: [{ selector: 'lib-form-group', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [searchValue]=\"searchTerm\"\n    (onSearchChange)=\"onSearch($event)\"\n    [showFilterChild]=\"showFilter\"\n    [showSortChild]=\"showSort\"\n    [showColumnChild]=\"showColumn\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnTableCount\"\n    [selectedSortCount]=\"selectedSortTableCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\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=\"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-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Name\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"workflow\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Workflow\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"description\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Description\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"isValidated\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsValidated\"\n            ></verbena-switch>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"entity\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{\n              row.Entity\n                | asyncLabel: \"EAVEntity\" : \"Entity\" : workflowAPI\n                | async\n            }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <verben-drop-down\n              width=\"100%\"\n              placeholder=\"Select Entity\"\n              [showClear]=\"true\"\n              [filter]=\"true\"\n              [(options)]=\"eavEntities\"\n              optionLabel=\"Entity\"\n              optionValue=\"Code\"\n              [(ngModel)]=\"row.Entity\"\n            >\n            </verben-drop-down>\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              [customStyles]=\"{ 'z-index': '99' }\"\n              [dropdownOpen]=\"isDropdownOpen(row)\"\n              [enableMouseLeave]=\"false\"\n              (close)=\"onClose()\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                (click)=\"openDropdown(row)\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  (click)=\"navigateToFields(row)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Fields\n                </div>\n                <div\n                  (click)=\"toggleRowEdit()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <!-- <div class=\"pop-up-value cursor-pointer\">Delete</div> -->\n              </div>\n            </verben-pop-Up>\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=\"check\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveFormGroup(value, toggleRowEdit)\"\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)=\"goToCardView(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=\"var(--vbn-color-surface-alt)\"\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)=\"userCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\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\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                        <div class=\"flex justify-between\">\n                          <div>\n                            <h3\n                              class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\"\n                            >\n                              {{ item.data.Name }}\n                            </h3>\n                            <span class=\"flex mt-2 items-center gap-1\">\n                              <span\n                                class=\"!text-[10px] font-light text-[var(--vbn-color-on-primary)]\"\n                                >Description:</span\n                              >\n                              <span class=\"!text-[12px] font-semibold\">{{\n                                item.data.Description\n                              }}</span>\n                            </span>\n                          </div>\n\n                          <div>\n                            <span\n                              class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                              >Work Flow</span\n                            >\n                            <p class=\"!text-[12px]\">{{ item.data.Workflow }}</p>\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full relative gap-6\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"currentData.data.Name\"\n              />\n              <verbena-input\n                name=\"Description\"\n                label=\"Description\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"currentData.data.Description\"\n              />\n              <verbena-input\n                name=\"Workflow\"\n                label=\"Work Flow\"\n                [(ngModel)]=\"currentData.data.Workflow\"\n              />\n\n              <div class=\"flex flex-col gap-1\">\n                <div>Entity</div>\n                <verben-drop-down\n                  width=\"100%\"\n                  placeholder=\"Select Entity\"\n                  [showClear]=\"true\"\n                  [filter]=\"true\"\n                  [(options)]=\"eavEntities\"\n                  optionLabel=\"Entity\"\n                  optionValue=\"Code\"\n                  [(ngModel)]=\"currentData.data.Entity\"\n                >\n                </verben-drop-down>\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <div>Validate</div>\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsValidated\"\n                ></verbena-switch>\n              </div>\n              <!-- <div class=\"flex flex-col gap-1\">\n                  <div>Status</div>\n                  <verben-drop-down width=\"100%\" placeholder=\"Change Status\" [(options)]=\"statusOptions\"\n                    [(ngModel)]=\"this.currentData.data.Status\">\n                  </verben-drop-down>\n                </div> -->\n\n              <!-- buttons -->\n              <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n                <div>\n                  <verbena-button\n                    *ngIf=\"\n                      currentData.data.Entity &&\n                      currentData.data.Entity.trim().length > 0\n                    \"\n                    class=\"verben-switch-button\"\n                    (click)=\"publishEAV(currentData.data)\"\n                    text=\"Publish Extension\"\n                  ></verbena-button>\n                </div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    *ngIf=\"currentData.data.DataState !== 'New'\"\n                    class=\"verben-switch-button\"\n                    (click)=\"navigateToFields(currentData.data)\"\n                    text=\"View Fields\"\n                  ></verbena-button>\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.saveFormGroup()\"\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          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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        (resetFilter)=\"getForms()\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (resetSortData)=\"getForms()\"\n        (filtersApplied)=\"onFilterApplied($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (resetSortData)=\"getForms()\"\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\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]=\"'var(--vbn-color-text-muted)'\" [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-surface)'\"\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:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i1.EnvironmentService }, { type: i3.Router }, { type: FormsService }], propDecorators: { path: [{
                 type: Input
             }], cardDataView: [{
@@ -1303,7 +1360,7 @@ class FormFieldsComponent {
             this.cardDataView.clearData();
         }
         this.data = [...this.data];
-        this.utilService.showInfo("Property removed");
+        this.utilService.showInfo('Property removed');
     }
     async saveAllProperties() {
         if (!this.data || this.data.length === 0)
@@ -1314,24 +1371,28 @@ class FormFieldsComponent {
             prop.MaxValue = Number(prop.MaxValue);
             prop.MinValue = Number(prop.MinValue);
             prop.Options = Array.isArray(prop.Options)
-                ? prop.Options.join(",")
-                : prop.Options ?? "";
-            prop.Value = prop.Value ?? "";
+                ? prop.Options.join(',')
+                : (prop.Options ?? '');
+            prop.Value = prop.Value ?? '';
         });
         const invalid = form.Properties.find((p) => !p.Name || p.Name.trim().length === 0);
         if (invalid) {
-            this.utilService.showInfo("Name cannot be empty");
+            this.utilService.showInfo('Name cannot be empty');
             return;
         }
         form.DataState = ObjectState.Changed;
         this.utilService.sendBI(true);
-        const res = await this.server.post("SaveFormEntities", [form], this.envSvc.environment.WorkFlowAPI);
+        const res = await this.server.post('SaveFormEntities', [form], this.envSvc.environment.WorkFlowAPI);
         this.utilService.sendBI(false);
         if (res instanceof ErrorResponse) {
-            this.utilService.showError("An error occurred while saving");
+            this.utilService.showError('An error occurred while saving');
         }
         else {
-            this.utilService.showSuccess("Form properties saved successfully");
+            this.utilService.showSuccess('Form properties saved successfully');
+            const result = res;
+            if (result.length > 0) {
+                this.data[0].DataState = result[0].DataState;
+            }
         }
     }
     async saveViaTable(row, callBack) {
@@ -1729,12 +1790,25 @@ class FormFieldsComponent {
             document.body.removeChild(link);
         }
     }
+    async publishEAV(entity) {
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`PublishEAV`, entity);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            this.utilService.showInfo('Extensions Published Successfully');
+            // var result = (res as PagedResult<EAVEntity>).Result;
+            // return result;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldsComponent, deps: [{ token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i2.FormBuilder }, { token: i1.EnvironmentService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: FormsFieldService }, { token: i5.Location }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormFieldsComponent, selector: "lib-form-fields", inputs: { path: "path", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime" }, outputs: { onViewProcessClicked: "onViewProcessClicked" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<header\n  class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n>\n  <div class=\"flex items-center gap-10\">\n    <h4 class=\"font-semibold\">{{ formName }}</h4>\n    <span class=\"flex items-center gap-1\">\n      Ref ID:\n      <span>{{ Id }}</span>\n    </span>\n  </div>\n  <div class=\"flex gap-3 items-center\">\n    <verbena-button\n      [pd]=\"'6px'\"\n      class=\"verben-primary-button\"\n      (click)=\"saveAllProperties()\"\n      text=\"Save All\"\n    ></verbena-button>\n    <verben-svg\n      (click)=\"goBack()\"\n      class=\"cursor-pointer\"\n      [width]=\"17\"\n      [height]=\"17\"\n      [icon]=\"'close'\"\n    ></verben-svg>\n  </div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [showSortChild]=\"showSort\"\n    [showColumnChild]=\"showColumn\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnTableCount\"\n    [selectedSortCount]=\"selectedSortTableCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    [showFilterChild]=\"showFilter\"\n    [searchValue]=\"searchTerm\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"onSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        #dt\n        [data]=\"data[0].Properties\"\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=\"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-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Name\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"propertyName\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ row.PropertyName }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              (keydown)=\"onKeyDown($event, row)\"\n              (paste)=\"onPaste($event, row)\"\n              (input)=\"onInput($event, row)\"\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.PropertyName\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"minValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              [ngModel]=\"getStringValue(row, 'MinValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MinValue')\"\n              inputContainerClass=\"w-[130px]\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"maxValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              inputContainerClass=\"w-[130px]\"\n              [ngModel]=\"getStringValue(row, 'MaxValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MaxValue')\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"defaultValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'text'\"\n              inputContainerClass=\"w-[130px]\"\n              [(ngModel)]=\"row.DefaultValue\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"dataType\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <div class=\"flex flex-col gap-1\">\n              <verben-drop-down\n                width=\"100%\"\n                placeholder=\"Change Data Type\"\n                [(options)]=\"dataType\"\n                [(ngModel)]=\"row.DataType\"\n              >\n              </verben-drop-down>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isRequired\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsRequired\"\n            ></verbena-switch>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isReadOnly\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsReadOnly\"\n            ></verbena-switch>\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              [customStyles]=\"{ 'z-index': '99' }\"\n              [dropdownOpen]=\"openDropdownId === row.id\"\n              [enableMouseLeave]=\"false\"\n              (close)=\"onClose()\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                (click)=\"openDropdown(row)\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div\n                class=\"pop-up-content flex flex-col\"\n                *ngIf=\"openDropdownId === row.Id\"\n                dropdown-content\n              >\n                <div\n                  (click)=\"toggleRowEdit()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"deleteProperty(row.Id)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Delete\n                </div>\n              </div>\n            </verben-pop-Up>\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=\"check\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"saveViaTable(row, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"toggleRowEdit(); deleteProperty(row.Id)\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(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=\"var(--vbn-color-surface-alt)\"\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=\"id\"\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)=\"userCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\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\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                        <div class=\"flex justify-between mr-4\">\n                          <div>\n                            <h3\n                              class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\"\n                            >\n                              {{ item.data.Name }}\n                            </h3>\n                            <span class=\"flex items-center gap-1 mt-2\">\n                              <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                                >Data Type:</span\n                              >\n                              <span class=\"!text-[13px] font-bold\">{{\n                                item.data.DataType\n                              }}</span>\n                            </span>\n                          </div>\n\n                          <div>\n                            <!-- <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                              >Default Value:</span\n                            >\n                            <p class=\"!text-[12px]\">\n                              {{ item.data.DefaultValue }}\n                            </p> -->\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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          <ng-template #parent>\n            <div\n              *ngIf=\"currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full relative gap-6\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                [(ngModel)]=\"currentData.data.Name\"\n              />\n              <verbena-input\n                name=\"Name\"\n                label=\"Property Name\"\n                (keydown)=\"onKeyDown($event, currentData.data)\"\n                (paste)=\"onPaste($event, currentData.data)\"\n                (input)=\"onInput($event, currentData.data)\"\n                [(ngModel)]=\"currentData.data.PropertyName\"\n              />\n              <div class=\"flex flex-col gap-1\">\n                <div>Data Type</div>\n                <verben-drop-down\n                  width=\"100%\"\n                  placeholder=\"Change Data Type\"\n                  [(options)]=\"dataType\"\n                  [(ngModel)]=\"currentData.data.DataType\"\n                  (ngModelChange)=\"onDropDownChange($event)\"\n                >\n                </verben-drop-down>\n              </div>\n\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'SingleSelection' ||\n                  currentData.data.DataType === 'MultiSelection'\n                \"\n              >\n                <p class=\"mb-2\">Enter Options</p>\n                <verben-chip\n                  [placeholder]=\"'Enter Options'\"\n                  [(ngModel)]=\"chipArray\"\n                  (onChange)=\"onChipChange($event)\"\n                ></verben-chip>\n              </div>\n              <div>\n                <verbena-input\n                  [placeHolder]=\"'Enter default text'\"\n                  [(ngModel)]=\"currentData.data.DefaultValue\"\n                  name=\"DefaultValue\"\n                  label=\"Default Value (optional)\"\n                />\n              </div>\n              <div>\n                <p class=\"mb-2\">Required</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsRequired\"\n                ></verbena-switch>\n              </div>\n              <div>\n                <p class=\"mb-2\">Read Only</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsReadOnly\"\n                ></verbena-switch>\n              </div>\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'Number' ||\n                  currentData.data.DataType === 'Text'\n                \"\n                class=\"flex flex-col gap-6\"\n              >\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"minValue\"\n                  label=\"Min Value\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MinValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MinValue')\n                  \"\n                />\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"maxValue\"\n                  label=\"Max Value\"\n                  (ngModelChange)=\"updateTable()\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MaxValue')\n                  \"\n                />\n              </div>\n              <!-- buttons -->\n              <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n                <verbena-button\n                  (click)=\"deleteProperty(currentData.data.Id)\"\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></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 class=\"verben-primary-button\" (click)=\"saveUser()\" text=\"Save\"></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          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'var(--vbn-color-text-muted)'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'var(--vbn-color-surface)'\"\n                [text]=\"'Delete'\"\n              >\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            </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        (resetFilter)=\"getProperties(Id, showColumn)\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (resetSortData)=\"getProperties(Id, showFilter)\"\n        (filtersApplied)=\"onFilterApplied($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (resetSortData)=\"getProperties(Id, showSort)\"\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export\n        [data]=\"data[0].Properties\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\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\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'var(--vbn-color-text-muted)'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'var(--vbn-color-surface)'\"\n        [text]=\"'Delete'\"\n      >\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<!-- <div class=\"w-[400px] bg-white p-4 shadow-lg border\">\n  <form-control  [dataType]=\"dataType2\" [formProperties]=\"data[0].Properties\"></form-control>\n</div> -->\n", styles: [".view-links{font-size:14px!important;color:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i6.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i6.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i6.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: i6.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "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: i6.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i6.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i6.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i6.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i6.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.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: i6.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: i6.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: i6.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data", "dataFetchUrl", "dataQueryParameters"], outputs: ["exportDataEvent"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "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: i6.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i6.ChipComponent, selector: "verben-chip", inputs: ["width", "placeholder", "max", "styleClass", "separator", "disabled", "required", "invalidMessage", "errorPosition"], outputs: ["onChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormFieldsComponent, selector: "lib-form-fields", inputs: { path: "path", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime" }, outputs: { onViewProcessClicked: "onViewProcessClicked" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<header\n  class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 mb-2 bg-[#D4A00773]\"\n>\n  <div class=\"flex items-center gap-10\">\n    <h4 class=\"font-semibold\">{{ formName }}</h4>\n    <span class=\"flex items-center gap-1\">\n      Ref ID:\n      <span>{{ Id }}</span>\n    </span>\n  </div>\n  <div class=\"flex gap-3 items-center\">\n    <verbena-button\n      *ngIf=\"\n        data.length > 0 && data[0].Entity && data[0].Entity.trim().length > 0\n      \"\n      [pd]=\"'6px'\"\n      class=\"verben-switch-button\"\n      (click)=\"publishEAV(data[0])\"\n      text=\"Publish Extension\"\n    ></verbena-button>\n    <verbena-button\n      [pd]=\"'6px'\"\n      class=\"verben-primary-button\"\n      (click)=\"saveAllProperties()\"\n      text=\"Save All\"\n    ></verbena-button>\n    <verben-svg\n      (click)=\"goBack()\"\n      class=\"cursor-pointer\"\n      [width]=\"17\"\n      [height]=\"17\"\n      [icon]=\"'close'\"\n    ></verben-svg>\n  </div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [showSortChild]=\"showSort\"\n    [showColumnChild]=\"showColumn\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnTableCount\"\n    [selectedSortCount]=\"selectedSortTableCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    [showFilterChild]=\"showFilter\"\n    [searchValue]=\"searchTerm\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"onSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        #dt\n        [data]=\"data[0].Properties\"\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=\"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-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Name\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"propertyName\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ row.PropertyName }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              (keydown)=\"onKeyDown($event, row)\"\n              (paste)=\"onPaste($event, row)\"\n              (input)=\"onInput($event, row)\"\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.PropertyName\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"minValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              [ngModel]=\"getStringValue(row, 'MinValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MinValue')\"\n              inputContainerClass=\"w-[130px]\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"maxValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              inputContainerClass=\"w-[130px]\"\n              [ngModel]=\"getStringValue(row, 'MaxValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MaxValue')\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"defaultValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'text'\"\n              inputContainerClass=\"w-[130px]\"\n              [(ngModel)]=\"row.DefaultValue\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"dataType\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <div class=\"flex flex-col gap-1\">\n              <verben-drop-down\n                width=\"100%\"\n                placeholder=\"Change Data Type\"\n                [(options)]=\"dataType\"\n                [(ngModel)]=\"row.DataType\"\n              >\n              </verben-drop-down>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isRequired\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsRequired\"\n            ></verbena-switch>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isReadOnly\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsReadOnly\"\n            ></verbena-switch>\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              [customStyles]=\"{ 'z-index': '99' }\"\n              [dropdownOpen]=\"openDropdownId === row.id\"\n              [enableMouseLeave]=\"false\"\n              (close)=\"onClose()\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                (click)=\"openDropdown(row)\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div\n                class=\"pop-up-content flex flex-col\"\n                *ngIf=\"openDropdownId === row.Id\"\n                dropdown-content\n              >\n                <div\n                  (click)=\"toggleRowEdit()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"deleteProperty(row.Id)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Delete\n                </div>\n              </div>\n            </verben-pop-Up>\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=\"check\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"saveViaTable(row, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"toggleRowEdit(); deleteProperty(row.Id)\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(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=\"var(--vbn-color-surface-alt)\"\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=\"id\"\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)=\"userCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\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\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                        <div class=\"flex justify-between mr-4\">\n                          <div>\n                            <h3\n                              class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\"\n                            >\n                              {{ item.data.Name }}\n                            </h3>\n                            <span class=\"flex items-center gap-1 mt-2\">\n                              <span\n                                class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                                >Data Type:</span\n                              >\n                              <span class=\"!text-[13px] font-bold\">{{\n                                item.data.DataType\n                              }}</span>\n                            </span>\n                          </div>\n\n                          <div>\n                            <!-- <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                              >Default Value:</span\n                            >\n                            <p class=\"!text-[12px]\">\n                              {{ item.data.DefaultValue }}\n                            </p> -->\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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          <ng-template #parent>\n            <div\n              *ngIf=\"currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full relative gap-6\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                [(ngModel)]=\"currentData.data.Name\"\n              />\n              <verbena-input\n                name=\"Name\"\n                label=\"Property Name\"\n                (keydown)=\"onKeyDown($event, currentData.data)\"\n                (paste)=\"onPaste($event, currentData.data)\"\n                (input)=\"onInput($event, currentData.data)\"\n                [(ngModel)]=\"currentData.data.PropertyName\"\n              />\n              <div class=\"flex flex-col gap-1\">\n                <div>Data Type</div>\n                <verben-drop-down\n                  width=\"100%\"\n                  placeholder=\"Change Data Type\"\n                  [(options)]=\"dataType\"\n                  [(ngModel)]=\"currentData.data.DataType\"\n                  (ngModelChange)=\"onDropDownChange($event)\"\n                >\n                </verben-drop-down>\n              </div>\n\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'SingleSelection' ||\n                  currentData.data.DataType === 'MultiSelection'\n                \"\n              >\n                <p class=\"mb-2\">Enter Options</p>\n                <verben-chip\n                  [placeholder]=\"'Enter Options'\"\n                  [(ngModel)]=\"chipArray\"\n                  (onChange)=\"onChipChange($event)\"\n                ></verben-chip>\n              </div>\n              <div>\n                <verbena-input\n                  [placeHolder]=\"'Enter default text'\"\n                  [(ngModel)]=\"currentData.data.DefaultValue\"\n                  name=\"DefaultValue\"\n                  label=\"Default Value (optional)\"\n                />\n              </div>\n              <div>\n                <p class=\"mb-2\">Required</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsRequired\"\n                ></verbena-switch>\n              </div>\n              <div>\n                <p class=\"mb-2\">Read Only</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsReadOnly\"\n                ></verbena-switch>\n              </div>\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'Number' ||\n                  currentData.data.DataType === 'Text'\n                \"\n                class=\"flex flex-col gap-6\"\n              >\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"minValue\"\n                  label=\"Min Value\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MinValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MinValue')\n                  \"\n                />\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"maxValue\"\n                  label=\"Max Value\"\n                  (ngModelChange)=\"updateTable()\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MaxValue')\n                  \"\n                />\n              </div>\n              <!-- buttons -->\n              <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n                <verbena-button\n                  (click)=\"deleteProperty(currentData.data.Id)\"\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></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 class=\"verben-primary-button\" (click)=\"saveUser()\" text=\"Save\"></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          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'var(--vbn-color-text-muted)'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'var(--vbn-color-surface)'\"\n                [text]=\"'Delete'\"\n              >\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            </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        (resetFilter)=\"getProperties(Id, showColumn)\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (resetSortData)=\"getProperties(Id, showFilter)\"\n        (filtersApplied)=\"onFilterApplied($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (resetSortData)=\"getProperties(Id, showSort)\"\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export\n        [data]=\"data[0].Properties\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\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\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'var(--vbn-color-text-muted)'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'var(--vbn-color-surface)'\"\n        [text]=\"'Delete'\"\n      >\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<!-- <div class=\"w-[400px] bg-white p-4 shadow-lg border\">\n  <form-control  [dataType]=\"dataType2\" [formProperties]=\"data[0].Properties\"></form-control>\n</div> -->\n", styles: [".view-links{font-size:14px!important;color:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i6.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i6.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i6.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: i6.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "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: i6.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i6.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i6.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i6.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i6.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.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: i6.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: i6.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: i6.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data", "dataFetchUrl", "dataQueryParameters"], outputs: ["exportDataEvent"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "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: i6.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i6.ChipComponent, selector: "verben-chip", inputs: ["width", "placeholder", "max", "styleClass", "separator", "disabled", "required", "invalidMessage", "errorPosition"], outputs: ["onChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-fields', template: "<header\n  class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n>\n  <div class=\"flex items-center gap-10\">\n    <h4 class=\"font-semibold\">{{ formName }}</h4>\n    <span class=\"flex items-center gap-1\">\n      Ref ID:\n      <span>{{ Id }}</span>\n    </span>\n  </div>\n  <div class=\"flex gap-3 items-center\">\n    <verbena-button\n      [pd]=\"'6px'\"\n      class=\"verben-primary-button\"\n      (click)=\"saveAllProperties()\"\n      text=\"Save All\"\n    ></verbena-button>\n    <verben-svg\n      (click)=\"goBack()\"\n      class=\"cursor-pointer\"\n      [width]=\"17\"\n      [height]=\"17\"\n      [icon]=\"'close'\"\n    ></verben-svg>\n  </div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [showSortChild]=\"showSort\"\n    [showColumnChild]=\"showColumn\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnTableCount\"\n    [selectedSortCount]=\"selectedSortTableCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    [showFilterChild]=\"showFilter\"\n    [searchValue]=\"searchTerm\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"onSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        #dt\n        [data]=\"data[0].Properties\"\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=\"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-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Name\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"propertyName\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ row.PropertyName }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              (keydown)=\"onKeyDown($event, row)\"\n              (paste)=\"onPaste($event, row)\"\n              (input)=\"onInput($event, row)\"\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.PropertyName\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"minValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              [ngModel]=\"getStringValue(row, 'MinValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MinValue')\"\n              inputContainerClass=\"w-[130px]\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"maxValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              inputContainerClass=\"w-[130px]\"\n              [ngModel]=\"getStringValue(row, 'MaxValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MaxValue')\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"defaultValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'text'\"\n              inputContainerClass=\"w-[130px]\"\n              [(ngModel)]=\"row.DefaultValue\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"dataType\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <div class=\"flex flex-col gap-1\">\n              <verben-drop-down\n                width=\"100%\"\n                placeholder=\"Change Data Type\"\n                [(options)]=\"dataType\"\n                [(ngModel)]=\"row.DataType\"\n              >\n              </verben-drop-down>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isRequired\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsRequired\"\n            ></verbena-switch>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isReadOnly\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsReadOnly\"\n            ></verbena-switch>\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              [customStyles]=\"{ 'z-index': '99' }\"\n              [dropdownOpen]=\"openDropdownId === row.id\"\n              [enableMouseLeave]=\"false\"\n              (close)=\"onClose()\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                (click)=\"openDropdown(row)\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div\n                class=\"pop-up-content flex flex-col\"\n                *ngIf=\"openDropdownId === row.Id\"\n                dropdown-content\n              >\n                <div\n                  (click)=\"toggleRowEdit()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"deleteProperty(row.Id)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Delete\n                </div>\n              </div>\n            </verben-pop-Up>\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=\"check\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"saveViaTable(row, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"toggleRowEdit(); deleteProperty(row.Id)\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(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=\"var(--vbn-color-surface-alt)\"\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=\"id\"\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)=\"userCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\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\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                        <div class=\"flex justify-between mr-4\">\n                          <div>\n                            <h3\n                              class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\"\n                            >\n                              {{ item.data.Name }}\n                            </h3>\n                            <span class=\"flex items-center gap-1 mt-2\">\n                              <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                                >Data Type:</span\n                              >\n                              <span class=\"!text-[13px] font-bold\">{{\n                                item.data.DataType\n                              }}</span>\n                            </span>\n                          </div>\n\n                          <div>\n                            <!-- <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                              >Default Value:</span\n                            >\n                            <p class=\"!text-[12px]\">\n                              {{ item.data.DefaultValue }}\n                            </p> -->\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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          <ng-template #parent>\n            <div\n              *ngIf=\"currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full relative gap-6\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                [(ngModel)]=\"currentData.data.Name\"\n              />\n              <verbena-input\n                name=\"Name\"\n                label=\"Property Name\"\n                (keydown)=\"onKeyDown($event, currentData.data)\"\n                (paste)=\"onPaste($event, currentData.data)\"\n                (input)=\"onInput($event, currentData.data)\"\n                [(ngModel)]=\"currentData.data.PropertyName\"\n              />\n              <div class=\"flex flex-col gap-1\">\n                <div>Data Type</div>\n                <verben-drop-down\n                  width=\"100%\"\n                  placeholder=\"Change Data Type\"\n                  [(options)]=\"dataType\"\n                  [(ngModel)]=\"currentData.data.DataType\"\n                  (ngModelChange)=\"onDropDownChange($event)\"\n                >\n                </verben-drop-down>\n              </div>\n\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'SingleSelection' ||\n                  currentData.data.DataType === 'MultiSelection'\n                \"\n              >\n                <p class=\"mb-2\">Enter Options</p>\n                <verben-chip\n                  [placeholder]=\"'Enter Options'\"\n                  [(ngModel)]=\"chipArray\"\n                  (onChange)=\"onChipChange($event)\"\n                ></verben-chip>\n              </div>\n              <div>\n                <verbena-input\n                  [placeHolder]=\"'Enter default text'\"\n                  [(ngModel)]=\"currentData.data.DefaultValue\"\n                  name=\"DefaultValue\"\n                  label=\"Default Value (optional)\"\n                />\n              </div>\n              <div>\n                <p class=\"mb-2\">Required</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsRequired\"\n                ></verbena-switch>\n              </div>\n              <div>\n                <p class=\"mb-2\">Read Only</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsReadOnly\"\n                ></verbena-switch>\n              </div>\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'Number' ||\n                  currentData.data.DataType === 'Text'\n                \"\n                class=\"flex flex-col gap-6\"\n              >\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"minValue\"\n                  label=\"Min Value\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MinValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MinValue')\n                  \"\n                />\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"maxValue\"\n                  label=\"Max Value\"\n                  (ngModelChange)=\"updateTable()\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MaxValue')\n                  \"\n                />\n              </div>\n              <!-- buttons -->\n              <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n                <verbena-button\n                  (click)=\"deleteProperty(currentData.data.Id)\"\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></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 class=\"verben-primary-button\" (click)=\"saveUser()\" text=\"Save\"></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          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'var(--vbn-color-text-muted)'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'var(--vbn-color-surface)'\"\n                [text]=\"'Delete'\"\n              >\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            </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        (resetFilter)=\"getProperties(Id, showColumn)\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (resetSortData)=\"getProperties(Id, showFilter)\"\n        (filtersApplied)=\"onFilterApplied($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (resetSortData)=\"getProperties(Id, showSort)\"\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export\n        [data]=\"data[0].Properties\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\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\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'var(--vbn-color-text-muted)'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'var(--vbn-color-surface)'\"\n        [text]=\"'Delete'\"\n      >\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<!-- <div class=\"w-[400px] bg-white p-4 shadow-lg border\">\n  <form-control  [dataType]=\"dataType2\" [formProperties]=\"data[0].Properties\"></form-control>\n</div> -->\n", styles: [".view-links{font-size:14px!important;color:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"] }]
+            args: [{ selector: 'lib-form-fields', template: "<header\n  class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 mb-2 bg-[#D4A00773]\"\n>\n  <div class=\"flex items-center gap-10\">\n    <h4 class=\"font-semibold\">{{ formName }}</h4>\n    <span class=\"flex items-center gap-1\">\n      Ref ID:\n      <span>{{ Id }}</span>\n    </span>\n  </div>\n  <div class=\"flex gap-3 items-center\">\n    <verbena-button\n      *ngIf=\"\n        data.length > 0 && data[0].Entity && data[0].Entity.trim().length > 0\n      \"\n      [pd]=\"'6px'\"\n      class=\"verben-switch-button\"\n      (click)=\"publishEAV(data[0])\"\n      text=\"Publish Extension\"\n    ></verbena-button>\n    <verbena-button\n      [pd]=\"'6px'\"\n      class=\"verben-primary-button\"\n      (click)=\"saveAllProperties()\"\n      text=\"Save All\"\n    ></verbena-button>\n    <verben-svg\n      (click)=\"goBack()\"\n      class=\"cursor-pointer\"\n      [width]=\"17\"\n      [height]=\"17\"\n      [icon]=\"'close'\"\n    ></verben-svg>\n  </div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: true,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [showSortChild]=\"showSort\"\n    [showColumnChild]=\"showColumn\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnTableCount\"\n    [selectedSortCount]=\"selectedSortTableCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    [showFilterChild]=\"showFilter\"\n    [searchValue]=\"searchTerm\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"onSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        #dt\n        [data]=\"data[0].Properties\"\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=\"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-value\n          >\n            <verbena-input\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.Name\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"propertyName\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ row.PropertyName }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              (keydown)=\"onKeyDown($event, row)\"\n              (paste)=\"onPaste($event, row)\"\n              (input)=\"onInput($event, row)\"\n              inputContainerClass=\"w-fit\"\n              [(ngModel)]=\"row.PropertyName\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"minValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              [ngModel]=\"getStringValue(row, 'MinValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MinValue')\"\n              inputContainerClass=\"w-[130px]\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"maxValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'number'\"\n              inputContainerClass=\"w-[130px]\"\n              [ngModel]=\"getStringValue(row, 'MaxValue')\"\n              (valueChange)=\"convertToInt($event, row, 'MaxValue')\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"defaultValue\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-input\n              [type]=\"'text'\"\n              inputContainerClass=\"w-[130px]\"\n              [(ngModel)]=\"row.DefaultValue\"\n            ></verbena-input>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"dataType\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <div class=\"flex flex-col gap-1\">\n              <verben-drop-down\n                width=\"100%\"\n                placeholder=\"Change Data Type\"\n                [(options)]=\"dataType\"\n                [(ngModel)]=\"row.DataType\"\n              >\n              </verben-drop-down>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isRequired\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsRequired\"\n            ></verbena-switch>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"isReadOnly\">\n          <ng-template #cell let-row=\"row\" let-value>\n            <verben-svg *ngIf=\"value === true\" [icon]=\"'check'\"></verben-svg>\n            <verben-svg *ngIf=\"value === false\" [icon]=\"'error'\"></verben-svg>\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-value\n          >\n            <verbena-switch\n              [onColor]=\"'var(--vbn-color-text)'\"\n              [(ngModel)]=\"row.IsReadOnly\"\n            ></verbena-switch>\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              [customStyles]=\"{ 'z-index': '99' }\"\n              [dropdownOpen]=\"openDropdownId === row.id\"\n              [enableMouseLeave]=\"false\"\n              (close)=\"onClose()\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                (click)=\"openDropdown(row)\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div\n                class=\"pop-up-content flex flex-col\"\n                *ngIf=\"openDropdownId === row.Id\"\n                dropdown-content\n              >\n                <div\n                  (click)=\"toggleRowEdit()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"deleteProperty(row.Id)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Delete\n                </div>\n              </div>\n            </verben-pop-Up>\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=\"check\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"saveViaTable(row, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"toggleRowEdit(); deleteProperty(row.Id)\"\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"goToCardView(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=\"var(--vbn-color-surface-alt)\"\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=\"id\"\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)=\"userCardClicked(item)\"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\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\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                        <div class=\"flex justify-between mr-4\">\n                          <div>\n                            <h3\n                              class=\"my-0 font-bold text-[var(--vbn-color-on-primary)] leading-[19.5px]\"\n                            >\n                              {{ item.data.Name }}\n                            </h3>\n                            <span class=\"flex items-center gap-1 mt-2\">\n                              <span\n                                class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                                >Data Type:</span\n                              >\n                              <span class=\"!text-[13px] font-bold\">{{\n                                item.data.DataType\n                              }}</span>\n                            </span>\n                          </div>\n\n                          <div>\n                            <!-- <span class=\"!text-[10px] text-[var(--vbn-color-on-primary)]\"\n                              >Default Value:</span\n                            >\n                            <p class=\"!text-[12px]\">\n                              {{ item.data.DefaultValue }}\n                            </p> -->\n                          </div>\n                        </div>\n                      </div>\n\n                      <!-- <div class=\"flex items-end h-[100%]\">\n                          <span class=\"enum-val {{item.data.Status}}\">{{item.data.Status}}</span>\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          <ng-template #parent>\n            <div\n              *ngIf=\"currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full relative gap-6\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                [(ngModel)]=\"currentData.data.Name\"\n              />\n              <verbena-input\n                name=\"Name\"\n                label=\"Property Name\"\n                (keydown)=\"onKeyDown($event, currentData.data)\"\n                (paste)=\"onPaste($event, currentData.data)\"\n                (input)=\"onInput($event, currentData.data)\"\n                [(ngModel)]=\"currentData.data.PropertyName\"\n              />\n              <div class=\"flex flex-col gap-1\">\n                <div>Data Type</div>\n                <verben-drop-down\n                  width=\"100%\"\n                  placeholder=\"Change Data Type\"\n                  [(options)]=\"dataType\"\n                  [(ngModel)]=\"currentData.data.DataType\"\n                  (ngModelChange)=\"onDropDownChange($event)\"\n                >\n                </verben-drop-down>\n              </div>\n\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'SingleSelection' ||\n                  currentData.data.DataType === 'MultiSelection'\n                \"\n              >\n                <p class=\"mb-2\">Enter Options</p>\n                <verben-chip\n                  [placeholder]=\"'Enter Options'\"\n                  [(ngModel)]=\"chipArray\"\n                  (onChange)=\"onChipChange($event)\"\n                ></verben-chip>\n              </div>\n              <div>\n                <verbena-input\n                  [placeHolder]=\"'Enter default text'\"\n                  [(ngModel)]=\"currentData.data.DefaultValue\"\n                  name=\"DefaultValue\"\n                  label=\"Default Value (optional)\"\n                />\n              </div>\n              <div>\n                <p class=\"mb-2\">Required</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsRequired\"\n                ></verbena-switch>\n              </div>\n              <div>\n                <p class=\"mb-2\">Read Only</p>\n\n                <verbena-switch\n                  [onColor]=\"'var(--vbn-color-text)'\"\n                  [(ngModel)]=\"currentData.data.IsReadOnly\"\n                ></verbena-switch>\n              </div>\n              <div\n                *ngIf=\"\n                  currentData.data.DataType === 'Number' ||\n                  currentData.data.DataType === 'Text'\n                \"\n                class=\"flex flex-col gap-6\"\n              >\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"minValue\"\n                  label=\"Min Value\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MinValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MinValue')\n                  \"\n                />\n                <verbena-input\n                  [type]=\"'number'\"\n                  name=\"maxValue\"\n                  label=\"Max Value\"\n                  (ngModelChange)=\"updateTable()\"\n                  [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\"\n                  (valueChange)=\"\n                    convertToInt($event, currentData.data, 'MaxValue')\n                  \"\n                />\n              </div>\n              <!-- buttons -->\n              <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n                <verbena-button\n                  (click)=\"deleteProperty(currentData.data.Id)\"\n                  class=\"verben-delete-button\"\n                  text=\"Delete\"\n                ></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 class=\"verben-primary-button\" (click)=\"saveUser()\" text=\"Save\"></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          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <verbena-button\n                [fontWeight]=\"'bold'\"\n                [bgColor]=\"'var(--vbn-color-text-muted)'\"\n                [borderRadius]=\"'4px'\"\n                [textColor]=\"'var(--vbn-color-surface)'\"\n                [text]=\"'Delete'\"\n              >\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            </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        (resetFilter)=\"getProperties(Id, showColumn)\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (resetSortData)=\"getProperties(Id, showFilter)\"\n        (filtersApplied)=\"onFilterApplied($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (resetSortData)=\"getProperties(Id, showSort)\"\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid var(--vbn-color-primary)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"var(--vbn-color-primary)\"\n        secondaryColor=\"var(--vbn-color-border-focus)\"\n        tertiaryColor=\"var(--vbn-color-on-primary)\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export\n        [data]=\"data[0].Properties\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\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\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'var(--vbn-color-text-muted)'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'var(--vbn-color-surface)'\"\n        [text]=\"'Delete'\"\n      >\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<!-- <div class=\"w-[400px] bg-white p-4 shadow-lg border\">\n  <form-control  [dataType]=\"dataType2\" [formProperties]=\"data[0].Properties\"></form-control>\n</div> -->\n", styles: [".view-links{font-size:14px!important;color:var(--vbn-color-border-focus);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}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:var(--vbn-color-surface);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 var(--vbn-color-primary)}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:var(--vbn-color-success-bg);color:var(--vbn-color-success)}.enum-val.InActive{background-color:#ffdfdf;color:var(--vbn-color-error)}.toggle-container{width:53px;padding:1px;color:var(--vbn-color-surface);height:22px;position:relative;background-color:var(--vbn-color-text);border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:var(--vbn-color-surface);border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i2.FormBuilder }, { type: i1.EnvironmentService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: FormsFieldService }, { type: i5.Location }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { path: [{
                 type: Input
             }], fileInput: [{
@@ -1848,7 +1922,8 @@ class FormGroupLibModule {
             SortTableModule,
             DataExportModule,
             VerbenaInputModule,
-            FormsFieldLibModule, i3.RouterModule], exports: [FormGroupComponent] });
+            FormsFieldLibModule,
+            SharedModule, i3.RouterModule], exports: [FormGroupComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormGroupLibModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -1866,6 +1941,7 @@ class FormGroupLibModule {
             DataExportModule,
             VerbenaInputModule,
             FormsFieldLibModule,
+            SharedModule,
             RouterModule.forChild(appRoutes)] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormGroupLibModule, decorators: [{
@@ -1890,6 +1966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         DataExportModule,
                         VerbenaInputModule,
                         FormsFieldLibModule,
+                        SharedModule,
                         RouterModule.forChild(appRoutes),
                     ],
                     exports: [FormGroupComponent],