verben-workflow-ui 0.5.37 → 0.5.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/lib/components/form-group/form-fields/form-fields.component.mjs +3 -4
- package/esm2022/src/lib/components/my-queue/my-queue.component.mjs +3 -3
- package/esm2022/src/lib/components/my-queue/my-queue.facade.mjs +2 -2
- package/esm2022/src/lib/components/tasks/tasks.component.mjs +3 -3
- package/fesm2022/verben-workflow-ui-src-lib-components-form-group.mjs +2 -3
- package/fesm2022/verben-workflow-ui-src-lib-components-form-group.mjs.map +1 -1
- package/fesm2022/verben-workflow-ui-src-lib-components-my-queue.mjs +3 -3
- package/fesm2022/verben-workflow-ui-src-lib-components-my-queue.mjs.map +1 -1
- package/fesm2022/verben-workflow-ui-src-lib-components-tasks.mjs +2 -2
- package/fesm2022/verben-workflow-ui-src-lib-components-tasks.mjs.map +1 -1
- package/package.json +35 -35
- package/styles/styles.css +35 -4
|
@@ -11,7 +11,6 @@ import * as i5 from '@angular/common';
|
|
|
11
11
|
import { CommonModule } from '@angular/common';
|
|
12
12
|
import * as i2 from '@angular/forms';
|
|
13
13
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
14
|
-
import * as i7 from 'verben-workflow-ui/src/lib/components/form-control';
|
|
15
14
|
import { FormControlerModule } from 'verben-workflow-ui/src/lib/components/form-control';
|
|
16
15
|
|
|
17
16
|
const baseStyle = {
|
|
@@ -1716,11 +1715,11 @@ class FormFieldsComponent {
|
|
|
1716
1715
|
}
|
|
1717
1716
|
}
|
|
1718
1717
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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 });
|
|
1719
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\">\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 [pd]=\"'6px'\" class=\"verben-primary-button\" (click)=\"saveAllProperties()\" text=\"Save All\"></verbena-button>\n <verben-svg (click)=\"goBack()\" class=\"cursor-pointer\" [width]=\"17\" [height]=\"17\" [icon]=\"'close'\"></verben-svg>\n</div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\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 }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [showSortChild]=\"showSort\" [showColumnChild]=\"showColumn\"\n [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnTableCount\" [selectedSortCount]=\"selectedSortTableCount\"\n [selectedFilterTableCount]=\"selectedFilterTableCount\" [showFilterChild]=\"showFilter\" [searchValue]=\"searchTerm\"\n (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"onSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table #dt [data]=\"data[0].Properties\" [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=\"propertyName\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ row.PropertyName }}\n </ng-template>\n <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input (keydown)=\"onKeyDown($event, row)\"\n (paste)=\"onPaste($event, row)\"\n (input)=\"onInput($event, row)\" inputContainerClass=\"w-fit\" [(ngModel)]=\"row.PropertyName\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" [ngModel]=\"getStringValue(row, 'MinValue')\"\n (valueChange)=\"convertToInt($event, row, 'MinValue')\" inputContainerClass=\"w-[130px]\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" inputContainerClass=\"w-[130px]\" [ngModel]=\"getStringValue(row, 'MaxValue')\"\n (valueChange)=\"convertToInt($event, row, 'MaxValue')\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'text'\" inputContainerClass=\"w-[130px]\"\n [(ngModel)]=\"row.DefaultValue\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <div class=\"flex flex-col gap-1\">\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"row.DataType\">\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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"row.IsRequired\"></verbena-switch>\n </ng-template>\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]=\"openDropdownId===row.id\"\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\" *ngIf=\"openDropdownId===row.Id\" dropdown-content>\n <div (click)=\"toggleRowEdit()\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"deleteProperty(row.Id)\" 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)=\"saveViaTable(row, toggleRowEdit)\"></verben-svg>\n <verben-svg (click)=\"toggleRowEdit(); deleteProperty(row.Id)\" 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=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"id\"\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 mr-4\">\n <div>\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">\n {{ item.data.Name }}\n </h3>\n <span class=\"flex items-center gap-1 mt-2\">\n <span class=\"!text-[10px] text-[#404040]\">Data Type:</span>\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-[#404040]\">Default Value:</span>\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 *ngIf=\"currentData\" class=\"flex flex-col rounded-xl h-full w-full relative gap-6\">\n <verbena-input name=\"Name\" label=\"Name\" \n \n [(ngModel)]=\"currentData.data.Name\" />\n <verbena-input name=\"Name\" label=\"Property Name\" (keydown)=\"onKeyDown($event, currentData.data)\"\n (paste)=\"onPaste($event, currentData.data)\"\n (input)=\"onInput($event, currentData.data)\"\n \n [(ngModel)]=\"currentData.data.PropertyName\" />\n <div class=\"flex flex-col gap-1\">\n <div>Data Type</div>\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"currentData.data.DataType\" (ngModelChange)=\"onDropDownChange($event)\">\n </verben-drop-down>\n </div>\n\n <div *ngIf=\"currentData.data.DataType==='SingleSelection' || currentData.data.DataType==='MultiSelection'\">\n <p class=\"mb-2\">Enter Options</p>\n <verben-chip [placeholder]=\"'Enter Options'\" [(ngModel)]=\"chipArray\" (onChange)=\"onChipChange($event)\"></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 />\n \n \n </div>\n <div>\n <p class=\"mb-2\">Required</p>\n\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"currentData.data.IsRequired\"></verbena-switch>\n </div>\n <div *ngIf=\"currentData.data.DataType==='Number'||currentData.data.DataType==='Text' \" class=\" flex flex-col gap-6\">\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 <verbena-input [type]=\"'number'\" name=\"maxValue\" label=\"Max Value\" (ngModelChange)=\"updateTable()\"\n [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\" (valueChange)=\"\n convertToInt($event, currentData.data, 'MaxValue')\n \" />\n </div>\n <!-- buttons -->\n <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n <verbena-button (click)=\"deleteProperty(currentData.data.Id)\" class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n text=\"Switch To Table\"></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 *ngIf=\"!vdcv.hasCurrentItem()\" class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\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)=\"getProperties(Id, showColumn)\" (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (resetSortData)=\"getProperties(Id, showFilter)\" (filtersApplied)=\"onFilterApplied($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (resetSortData)=\"getProperties(Id, showSort)\" (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data[0].Properties\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n<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:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::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:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;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: ["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", "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", "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", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "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: ["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: i7.FormControlComponent, selector: "form-control", inputs: ["dataType", "value", "boolInputType", "formProperties"] }, { kind: "component", type: i6.ChipComponent, selector: "verben-chip", inputs: ["width", "placeholder", "max", "styleClass", "separator", "disabled", "required", "invalidMessage", "errorPosition"], outputs: ["onChange"] }] });
|
|
1718
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\">\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 [pd]=\"'6px'\" class=\"verben-primary-button\" (click)=\"saveAllProperties()\" text=\"Save All\"></verbena-button>\n <verben-svg (click)=\"goBack()\" class=\"cursor-pointer\" [width]=\"17\" [height]=\"17\" [icon]=\"'close'\"></verben-svg>\n</div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\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 }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [showSortChild]=\"showSort\" [showColumnChild]=\"showColumn\"\n [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnTableCount\" [selectedSortCount]=\"selectedSortTableCount\"\n [selectedFilterTableCount]=\"selectedFilterTableCount\" [showFilterChild]=\"showFilter\" [searchValue]=\"searchTerm\"\n (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"onSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table #dt [data]=\"data[0].Properties\" [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=\"propertyName\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ row.PropertyName }}\n </ng-template>\n <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input (keydown)=\"onKeyDown($event, row)\"\n (paste)=\"onPaste($event, row)\"\n (input)=\"onInput($event, row)\" inputContainerClass=\"w-fit\" [(ngModel)]=\"row.PropertyName\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" [ngModel]=\"getStringValue(row, 'MinValue')\"\n (valueChange)=\"convertToInt($event, row, 'MinValue')\" inputContainerClass=\"w-[130px]\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" inputContainerClass=\"w-[130px]\" [ngModel]=\"getStringValue(row, 'MaxValue')\"\n (valueChange)=\"convertToInt($event, row, 'MaxValue')\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'text'\" inputContainerClass=\"w-[130px]\"\n [(ngModel)]=\"row.DefaultValue\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <div class=\"flex flex-col gap-1\">\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"row.DataType\">\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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"row.IsRequired\"></verbena-switch>\n </ng-template>\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]=\"openDropdownId===row.id\"\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\" *ngIf=\"openDropdownId===row.Id\" dropdown-content>\n <div (click)=\"toggleRowEdit()\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"deleteProperty(row.Id)\" 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)=\"saveViaTable(row, toggleRowEdit)\"></verben-svg>\n <verben-svg (click)=\"toggleRowEdit(); deleteProperty(row.Id)\" 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=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"id\"\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 mr-4\">\n <div>\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">\n {{ item.data.Name }}\n </h3>\n <span class=\"flex items-center gap-1 mt-2\">\n <span class=\"!text-[10px] text-[#404040]\">Data Type:</span>\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-[#404040]\">Default Value:</span>\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 *ngIf=\"currentData\" class=\"flex flex-col rounded-xl h-full w-full relative gap-6\">\n <verbena-input name=\"Name\" label=\"Name\" \n \n [(ngModel)]=\"currentData.data.Name\" />\n <verbena-input name=\"Name\" label=\"Property Name\" (keydown)=\"onKeyDown($event, currentData.data)\"\n (paste)=\"onPaste($event, currentData.data)\"\n (input)=\"onInput($event, currentData.data)\"\n \n [(ngModel)]=\"currentData.data.PropertyName\" />\n <div class=\"flex flex-col gap-1\">\n <div>Data Type</div>\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"currentData.data.DataType\" (ngModelChange)=\"onDropDownChange($event)\">\n </verben-drop-down>\n </div>\n\n <div *ngIf=\"currentData.data.DataType==='SingleSelection' || currentData.data.DataType==='MultiSelection'\">\n <p class=\"mb-2\">Enter Options</p>\n <verben-chip [placeholder]=\"'Enter Options'\" [(ngModel)]=\"chipArray\" (onChange)=\"onChipChange($event)\"></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 />\n \n \n </div>\n <div>\n <p class=\"mb-2\">Required</p>\n\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"currentData.data.IsRequired\"></verbena-switch>\n </div>\n <div *ngIf=\"currentData.data.DataType==='Number'||currentData.data.DataType==='Text' \" class=\" flex flex-col gap-6\">\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 <verbena-input [type]=\"'number'\" name=\"maxValue\" label=\"Max Value\" (ngModelChange)=\"updateTable()\"\n [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\" (valueChange)=\"\n convertToInt($event, currentData.data, 'MaxValue')\n \" />\n </div>\n <!-- buttons -->\n <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n <verbena-button (click)=\"deleteProperty(currentData.data.Id)\" class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n text=\"Switch To Table\"></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 *ngIf=\"!vdcv.hasCurrentItem()\" class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\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)=\"getProperties(Id, showColumn)\" (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (resetSortData)=\"getProperties(Id, showFilter)\" (filtersApplied)=\"onFilterApplied($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (resetSortData)=\"getProperties(Id, showSort)\" (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data[0].Properties\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n<!-- <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:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::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:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;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: ["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", "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", "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", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "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: ["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"] }] });
|
|
1720
1719
|
}
|
|
1721
1720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldsComponent, decorators: [{
|
|
1722
1721
|
type: Component,
|
|
1723
|
-
args: [{ selector: 'lib-form-fields', template: "<header class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\">\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 [pd]=\"'6px'\" class=\"verben-primary-button\" (click)=\"saveAllProperties()\" text=\"Save All\"></verbena-button>\n <verben-svg (click)=\"goBack()\" class=\"cursor-pointer\" [width]=\"17\" [height]=\"17\" [icon]=\"'close'\"></verben-svg>\n</div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\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 }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [showSortChild]=\"showSort\" [showColumnChild]=\"showColumn\"\n [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnTableCount\" [selectedSortCount]=\"selectedSortTableCount\"\n [selectedFilterTableCount]=\"selectedFilterTableCount\" [showFilterChild]=\"showFilter\" [searchValue]=\"searchTerm\"\n (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"onSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table #dt [data]=\"data[0].Properties\" [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=\"propertyName\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ row.PropertyName }}\n </ng-template>\n <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input (keydown)=\"onKeyDown($event, row)\"\n (paste)=\"onPaste($event, row)\"\n (input)=\"onInput($event, row)\" inputContainerClass=\"w-fit\" [(ngModel)]=\"row.PropertyName\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" [ngModel]=\"getStringValue(row, 'MinValue')\"\n (valueChange)=\"convertToInt($event, row, 'MinValue')\" inputContainerClass=\"w-[130px]\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" inputContainerClass=\"w-[130px]\" [ngModel]=\"getStringValue(row, 'MaxValue')\"\n (valueChange)=\"convertToInt($event, row, 'MaxValue')\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'text'\" inputContainerClass=\"w-[130px]\"\n [(ngModel)]=\"row.DefaultValue\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <div class=\"flex flex-col gap-1\">\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"row.DataType\">\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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"row.IsRequired\"></verbena-switch>\n </ng-template>\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]=\"openDropdownId===row.id\"\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\" *ngIf=\"openDropdownId===row.Id\" dropdown-content>\n <div (click)=\"toggleRowEdit()\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"deleteProperty(row.Id)\" 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)=\"saveViaTable(row, toggleRowEdit)\"></verben-svg>\n <verben-svg (click)=\"toggleRowEdit(); deleteProperty(row.Id)\" 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=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"id\"\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 mr-4\">\n <div>\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">\n {{ item.data.Name }}\n </h3>\n <span class=\"flex items-center gap-1 mt-2\">\n <span class=\"!text-[10px] text-[#404040]\">Data Type:</span>\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-[#404040]\">Default Value:</span>\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 *ngIf=\"currentData\" class=\"flex flex-col rounded-xl h-full w-full relative gap-6\">\n <verbena-input name=\"Name\" label=\"Name\" \n \n [(ngModel)]=\"currentData.data.Name\" />\n <verbena-input name=\"Name\" label=\"Property Name\" (keydown)=\"onKeyDown($event, currentData.data)\"\n (paste)=\"onPaste($event, currentData.data)\"\n (input)=\"onInput($event, currentData.data)\"\n \n [(ngModel)]=\"currentData.data.PropertyName\" />\n <div class=\"flex flex-col gap-1\">\n <div>Data Type</div>\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"currentData.data.DataType\" (ngModelChange)=\"onDropDownChange($event)\">\n </verben-drop-down>\n </div>\n\n <div *ngIf=\"currentData.data.DataType==='SingleSelection' || currentData.data.DataType==='MultiSelection'\">\n <p class=\"mb-2\">Enter Options</p>\n <verben-chip [placeholder]=\"'Enter Options'\" [(ngModel)]=\"chipArray\" (onChange)=\"onChipChange($event)\"></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 />\n \n \n </div>\n <div>\n <p class=\"mb-2\">Required</p>\n\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"currentData.data.IsRequired\"></verbena-switch>\n </div>\n <div *ngIf=\"currentData.data.DataType==='Number'||currentData.data.DataType==='Text' \" class=\" flex flex-col gap-6\">\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 <verbena-input [type]=\"'number'\" name=\"maxValue\" label=\"Max Value\" (ngModelChange)=\"updateTable()\"\n [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\" (valueChange)=\"\n convertToInt($event, currentData.data, 'MaxValue')\n \" />\n </div>\n <!-- buttons -->\n <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n <verbena-button (click)=\"deleteProperty(currentData.data.Id)\" class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n text=\"Switch To Table\"></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 *ngIf=\"!vdcv.hasCurrentItem()\" class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\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)=\"getProperties(Id, showColumn)\" (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (resetSortData)=\"getProperties(Id, showFilter)\" (filtersApplied)=\"onFilterApplied($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (resetSortData)=\"getProperties(Id, showSort)\" (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data[0].Properties\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n<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:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::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:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;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"] }]
|
|
1722
|
+
args: [{ selector: 'lib-form-fields', template: "<header class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\">\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 [pd]=\"'6px'\" class=\"verben-primary-button\" (click)=\"saveAllProperties()\" text=\"Save All\"></verbena-button>\n <verben-svg (click)=\"goBack()\" class=\"cursor-pointer\" [width]=\"17\" [height]=\"17\" [icon]=\"'close'\"></verben-svg>\n</div>\n</header>\n<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\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 }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n [showSortChild]=\"showSort\" [showColumnChild]=\"showColumn\"\n [activeIconClass]=\"'my-active-icon-class'\" [selectedColumnCount]=\"selectedColumnTableCount\" [selectedSortCount]=\"selectedSortTableCount\"\n [selectedFilterTableCount]=\"selectedFilterTableCount\" [showFilterChild]=\"showFilter\" [searchValue]=\"searchTerm\"\n (viewChange)=\"onViewChange($event)\" (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"onSearch($event)\">\n <div class=\"mt-2\" table-content>\n <lib-data-table #dt [data]=\"data[0].Properties\" [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=\"propertyName\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ row.PropertyName }}\n </ng-template>\n <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input (keydown)=\"onKeyDown($event, row)\"\n (paste)=\"onPaste($event, row)\"\n (input)=\"onInput($event, row)\" inputContainerClass=\"w-fit\" [(ngModel)]=\"row.PropertyName\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" [ngModel]=\"getStringValue(row, 'MinValue')\"\n (valueChange)=\"convertToInt($event, row, 'MinValue')\" inputContainerClass=\"w-[130px]\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'number'\" inputContainerClass=\"w-[130px]\" [ngModel]=\"getStringValue(row, 'MaxValue')\"\n (valueChange)=\"convertToInt($event, row, 'MaxValue')\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-input [type]=\"'text'\" inputContainerClass=\"w-[130px]\"\n [(ngModel)]=\"row.DefaultValue\"></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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <div class=\"flex flex-col gap-1\">\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"row.DataType\">\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 #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"row.IsRequired\"></verbena-switch>\n </ng-template>\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]=\"openDropdownId===row.id\"\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\" *ngIf=\"openDropdownId===row.Id\" dropdown-content>\n <div (click)=\"toggleRowEdit()\" class=\"pop-up-value cursor-pointer\">Edit</div>\n <div (click)=\"deleteProperty(row.Id)\" 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)=\"saveViaTable(row, toggleRowEdit)\"></verben-svg>\n <verben-svg (click)=\"toggleRowEdit(); deleteProperty(row.Id)\" 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=\"#f5f6f9\" mg=\"0px\">\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"id\"\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 mr-4\">\n <div>\n <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">\n {{ item.data.Name }}\n </h3>\n <span class=\"flex items-center gap-1 mt-2\">\n <span class=\"!text-[10px] text-[#404040]\">Data Type:</span>\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-[#404040]\">Default Value:</span>\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 *ngIf=\"currentData\" class=\"flex flex-col rounded-xl h-full w-full relative gap-6\">\n <verbena-input name=\"Name\" label=\"Name\" \n \n [(ngModel)]=\"currentData.data.Name\" />\n <verbena-input name=\"Name\" label=\"Property Name\" (keydown)=\"onKeyDown($event, currentData.data)\"\n (paste)=\"onPaste($event, currentData.data)\"\n (input)=\"onInput($event, currentData.data)\"\n \n [(ngModel)]=\"currentData.data.PropertyName\" />\n <div class=\"flex flex-col gap-1\">\n <div>Data Type</div>\n <verben-drop-down width=\"100%\" placeholder=\"Change Data Type\" [(options)]=\"dataType\"\n [(ngModel)]=\"currentData.data.DataType\" (ngModelChange)=\"onDropDownChange($event)\">\n </verben-drop-down>\n </div>\n\n <div *ngIf=\"currentData.data.DataType==='SingleSelection' || currentData.data.DataType==='MultiSelection'\">\n <p class=\"mb-2\">Enter Options</p>\n <verben-chip [placeholder]=\"'Enter Options'\" [(ngModel)]=\"chipArray\" (onChange)=\"onChipChange($event)\"></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 />\n \n \n </div>\n <div>\n <p class=\"mb-2\">Required</p>\n\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"currentData.data.IsRequired\"></verbena-switch>\n </div>\n <div *ngIf=\"currentData.data.DataType==='Number'||currentData.data.DataType==='Text' \" class=\" flex flex-col gap-6\">\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 <verbena-input [type]=\"'number'\" name=\"maxValue\" label=\"Max Value\" (ngModelChange)=\"updateTable()\"\n [ngModel]=\"getStringValue(currentData.data, 'MaxValue')\" (valueChange)=\"\n convertToInt($event, currentData.data, 'MaxValue')\n \" />\n </div>\n <!-- buttons -->\n <div class=\"flex justify-between w-full bottom-8 left-0 right-0\">\n <verbena-button (click)=\"deleteProperty(currentData.data.Id)\" class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n <div class=\"flex gap-3\">\n <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n text=\"Switch To Table\"></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 *ngIf=\"!vdcv.hasCurrentItem()\" class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\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)=\"getProperties(Id, showColumn)\" (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter (resetSortData)=\"getProperties(Id, showFilter)\" (filtersApplied)=\"onFilterApplied($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table (resetSortData)=\"getProperties(Id, showSort)\" (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data[0].Properties\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n [text]=\"'Delete'\">\n </verbena-button>\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n<!-- <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:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::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:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;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"] }]
|
|
1724
1723
|
}], 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: [{
|
|
1725
1724
|
type: Input
|
|
1726
1725
|
}], fileInput: [{
|