@churchillliving/se-ui-toolkit 6.53.215 → 6.53.217
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/bundles/churchillliving-se-ui-toolkit.umd.js +15 -10
- package/bundles/churchillliving-se-ui-toolkit.umd.js.map +1 -1
- package/churchillliving-se-ui-toolkit.metadata.json +1 -1
- package/esm2015/lib/components/base/form/form.component.js +3 -3
- package/esm2015/lib/components/base/grid/grid.component.js +10 -7
- package/esm2015/lib/components/base/header/header.component.js +2 -2
- package/esm2015/lib/components/shared/global-filters/global-filters.component.js +4 -2
- package/fesm2015/churchillliving-se-ui-toolkit.js +15 -10
- package/fesm2015/churchillliving-se-ui-toolkit.js.map +1 -1
- package/package.json +1 -1
|
@@ -5752,18 +5752,21 @@
|
|
|
5752
5752
|
// invoke multiSelection click event
|
|
5753
5753
|
GridComponent.prototype.multiCheckBoxOnclick = function (rowInfo, event, singleSelection) {
|
|
5754
5754
|
if (singleSelection === void 0) { singleSelection = false; }
|
|
5755
|
-
var _a, _b, _c, _d;
|
|
5755
|
+
var _a, _b, _c, _d, _e;
|
|
5756
|
+
console.log('aa: ', event === null || event === void 0 ? void 0 : event.target);
|
|
5757
|
+
console.log('bb: ', (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.ariaChecked);
|
|
5758
|
+
console.log('cc: ', rowInfo);
|
|
5756
5759
|
if (!singleSelection) {
|
|
5757
|
-
if (Array.isArray(rowInfo) && (rowInfo === null || rowInfo === void 0 ? void 0 : rowInfo.length) > 0 && ((
|
|
5760
|
+
if (Array.isArray(rowInfo) && (rowInfo === null || rowInfo === void 0 ? void 0 : rowInfo.length) > 0 && ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.ariaChecked)) {
|
|
5758
5761
|
this.checklist = __spreadArray([], __read(rowInfo));
|
|
5759
5762
|
}
|
|
5760
|
-
else if (Array.isArray(rowInfo) && ((
|
|
5763
|
+
else if (Array.isArray(rowInfo) && ((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.ariaChecked) == null) {
|
|
5761
5764
|
this.checklist = [];
|
|
5762
5765
|
}
|
|
5763
|
-
if (!Array.isArray(rowInfo) && ((
|
|
5766
|
+
if (!Array.isArray(rowInfo) && ((_d = event === null || event === void 0 ? void 0 : event.target) === null || _d === void 0 ? void 0 : _d.ariaChecked) && !this.checklist.some(function (row) { return row.id == rowInfo.id; })) {
|
|
5764
5767
|
this.checklist.push(rowInfo);
|
|
5765
5768
|
}
|
|
5766
|
-
else if (((
|
|
5769
|
+
else if (((_e = event === null || event === void 0 ? void 0 : event.target) === null || _e === void 0 ? void 0 : _e.ariaChecked) == null) {
|
|
5767
5770
|
if (this.checklist.some(function (row) { return (row === null || row === void 0 ? void 0 : row.id) == rowInfo.id; })) {
|
|
5768
5771
|
var index = this.checklist.findIndex(function (row) { return (row === null || row === void 0 ? void 0 : row.id) == (rowInfo === null || rowInfo === void 0 ? void 0 : rowInfo.id); });
|
|
5769
5772
|
this.checklist.splice(index, 1);
|
|
@@ -5840,7 +5843,7 @@
|
|
|
5840
5843
|
GridComponent.decorators = [
|
|
5841
5844
|
{ type: i0.Component, args: [{
|
|
5842
5845
|
selector: 'se-grid',
|
|
5843
|
-
template: "<p-confirmDialog\n [style]=\"{ width: '50vw' }\"\n *ngIf=\"useInlineCRUD\"\n key=\"handleInlineCRUD\"\n></p-confirmDialog>\n<p-confirmDialog\n [style]=\"{ width: '50vw' }\"\n *ngIf=\"columnActions.length > 0\"\n key=\"handlecolumnActions\"\n></p-confirmDialog>\n<div class=\"p-mb-2 p-d-flex p-ai-center\"\n *ngIf=\"\n allowColumnToggle ||\n rowActions.length > 0 ||\n useInlineCRUD ||\n allowExportToExcel ||\n allowExportToPdf ||\n clearGridFilter\n \"\n>\n<!-- button for apply filterValue on Grid -->\n <button\n *ngIf=\"filtering && !hideFilter\"\n pButton\n type=\"button\"\n icon=\"pi pi-search\"\n (click)=\"applyGirdFilterBtn()\"\n [class]=\"\n searchGridFilter ? 'p-button-success p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n \"\n></button>\n\n<!-- button for clear filterValue on Grid -->\n <button\n *ngIf=\"filtering && !hideFilter\"\n pButton\n id=\"clearGridFilterValuesButton\"\n type=\"button\"\n icon=\"pi pi-replay\"\n (click)=\"cleargridFiltersValue()\"\n [class]=\"\n clearGridFilter ? 'p-button-danger p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n \"\n></button>\n\n<!-- button for edit all grid at once -->\n<!-- <button\n pButton\n *ngIf=\"hideEditAllRowsBtn && editAllRows\"\n id=\"editBtnGlobalvalues\"\n type=\"button\"\n [label]=\"'Edit'\"\n class=\"p-mr-2 ui-button-info\"\n icon=\"pi pi-pencil\"\n [class]=\"editRowPermission ? '' : 'p-disabled'\"\n (click)=\"editAllRowsAtOnce()\"\n ></button> -->\n\n <!-- button for save all grid at once -->\n <button\n pButton\n *ngIf=\"editAllRows && editRowPermission\"\n id=\"saveAllGridValues\"\n icon=\"pi pi-check\"\n [label]=\"'Save'\"\n [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-2 ui-button-info'\"\n type=\"button\"\n (click)=\"saveAllRowsAtOnce()\"\n ></button>\n\n <!-- button for cancel all grid at once -->\n <button\n pButton\n *ngIf=\"editAllRows\"\n id=\"editBtnGlobalvalues\"\n type=\"button\"\n [label]=\"'Cancel'\"\n icon=\"pi pi-times\"\n class=\"p-mr-2 ui-button-info\"\n (click)=\"cancelAllRowsAtOnce()\"\n ></button>\n\n <!-- header Button for multiSelect on Grid -->\n <span *ngIf=\"allowColumnToggle\">\n <p-multiSelect\n [showToggleAll]=\"false\"\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\n optionLabel=\"header\"\n selectedItemsLabel=\"{0} columns selected\"\n [style]=\"{ minWidth: '200px' }\"\n placeholder=\"Choose Columns\"\n >\n </p-multiSelect>\n </span>\n\n <!-- <button\n pButton\n *ngIf=\"showRefreshBtn\"\n type=\"button\"\n [label]=\"'Refresh'\"\n icon=\"pi pi-refresh\"\n (click)=\"refresh()\"\n class=\"ui-button-info p-mr-2\"\n></button> -->\n\n <!-- header Button for Adding new Row on Grid -->\n <button\n pButton\n *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\"\n type=\"button\"\n [label]=\"'Add'\"\n pAddRow\n [table]=\"componentTableRef\"\n [newRow]=\"newGridRow\"\n [id]=\"dataKey\"\n pTooltip=\"Add New Row\"\n tooltipPosition=\"bottom\"\n icon=\"pi pi-plus\"\n class=\"ui-button-info p-mr-2 p-ml-2\"\n (click)=\"addNewRow(newGridRow, true)\"\n pRipple\n ></button>\n \n<!-- header Button for Excel File on Grid -->\n<button\n *ngIf=\"allowExportToExcel\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-excel\"\n (click)=\"exportExcel()\"\n class=\"p-button-success p-mt-0 p-mx-2\"\n pTooltip=\"Export to Excel\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n\n<!-- header Button for PDF File on Grid -->\n<button\n *ngIf=\"allowExportToPdf\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-pdf\"\n (click)=\"exportPdf()\"\n class=\"p-button-warning p-mr-2\"\n pTooltip=\"Export to Pdf\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n</div>\n\n<p-table\n *ngIf=\"!isGridHidden\"\n id=\"my-table\"\n [value]=\"rowsData\"\n [columns]=\"selectedColumns\"\n sortMode=\"multiple\"\n [lazy]=\"useServerSideEvents\"\n [paginator]=\"pagination\"\n [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\n [rows]=\"defaultRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"setPaginationLength\"\n [showCurrentPageReport]=\"showCurrentPageReport\"\n currentPageReportTemplate=\"Showing {first} to {last} of {{\n totalRecords\n }} entries\"\n [loading]=\"autoLoadData && !setGridRefreshTime ? loading : false\"\n (onSort)=\"sortDisabled ?? handleSortChange($event)\"\n (onFilter)=\"handleFilterChange($event)\"\n (onLazyLoad)=\"autoLoadData ? handleServerSideEvents($event) : ''\"\n (onPage)=\"handleServerSidePagination($event)\"\n #dt\n [dataKey]=\"dataKey\"\n [(selection)]=\"selectedRows\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n editMode=\"row\"\n [editingRowKeys]=\"editingRowKeys\"\n [autoLayout]=\"true\"\n [rowHover]=\"rowHover\"\n [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\"\n>\n <!-- header Button for Action on Grid -->\n <div\n *ngIf=\"rowActions.length > 0 && rowActions.length > 0\"\n class=\"p-d-flex p-jc-end\"\n >\n <span *ngFor=\"let rowAction of rowActions\">\n <button\n pButton\n type=\"button\"\n [label]=\"rowAction.title\"\n [class]=\"rowAction.class\"\n (click)=\"rowAction.onClick(selectedRows)\"\n ></button>\n </span>\n </div>\n\n <!-- header columns on Grid -->\n <ng-template pTemplate=\"header\" let-cols>\n <tr>\n <!-- <th *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\" style=\"justify-content: center\">\n <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n <span class=\"flex-grow-1 p-mr-2\"> {{allowSelectionHeader}} </span>\n <p-tableHeaderCheckbox\n *ngIf=\"selectionType === 'multiple'\"\n binary=\"true\"\n (click)=\"multiCheckBoxOnclick(rowsData, $event)\"\n ></p-tableHeaderCheckbox>\n </div>\n </th> -->\n <th *ngIf=\"allowSelection && selectionType === 'single'\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n Select\n </th>\n <th\n *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n >\n Actions\n </th>\n <th\n *ngFor=\"let column of cols\"\n [pSortableColumn]=\"column.field\"\n [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n [style]=\"column?.type === 'multiple' ? 'justify-content: center' : column.style\"\n >\n <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n <span [class]=\"column?.type === 'multiple' ? 'flex-grow-1 p-mr-2' : 'flex-grow-1'\">{{ column.header }}</span>\n <p-tableHeaderCheckbox\n *ngIf=\"column?.type === 'multiple'\"\n binary=\"true\"\n (click)=\"multiCheckBoxOnclick(rowsData, $event)\"\n ></p-tableHeaderCheckbox>\n <span *ngIf=\"column.isRequired && column?.type !== 'multiple'\">*</span>\n <p-sortIcon\n *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n [field]=\"column.field\"\n ></p-sortIcon>\n </div>\n </th>\n <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n </tr>\n <tr *ngIf=\"filtering && !hideFilter\">\n <!-- <th *ngIf=\"allowSelection\">\n <p-tableHeaderCheckbox\n *ngIf=\"selectionType === 'multiple'\"\n (click)=\"multiCheckBoxOnclick(rowsData)\"\n ></p-tableHeaderCheckbox>\n </th> -->\n <th *ngIf=\"allowSelection && selectionType === 'single'\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th> \n <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n </th>\n <th\n *ngFor=\"let column of cols\"\n [ngSwitch]=\"column?.filter?.type\"\n [style]=\"column.style\"\n [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\"\n >\n <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n <!-- Text input on Header For Filter-->\n <p-columnFilter\n [type]=\"'text'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <input\n type=\"text\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n pInputText\n />\n </ng-template>\n </p-columnFilter>\n\n <!-- Numeric input on Header For Filter-->\n <p-columnFilter\n [type]=\"'numeric'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'numeric_input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-inputNumber\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onBlur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n ></p-inputNumber>\n </ng-template>\n </p-columnFilter>\n\n <!-- lookup input on Header For Filter-->\n <p-columnFilter\n [type]=\"'text'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'lookup_input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <div class=\"close-icon-wrapper\">\n <input\n id=\"lookUp_filter\"\n autocomplete=\"off\"\n type=\"text\"\n [(ngModel)]=\"column.value\"\n (click)=\"setFilterLookup(column)\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n pInputText\n />\n <div><button *ngIf=\"column.value\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column)\"></button></div>\n </div>\n </ng-template>\n </p-columnFilter>\n\n <!-- checkbox on Header For Filter-->\n <p-columnFilter\n type=\"boolean\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'checkbox'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-checkbox\n [binary]=\"true\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onChange)=\"setFilterFocusOut(column, filter, $event)\"\n (click)=\"clickCheckBoxFilter(column)\"\n (keydown)=\"backspaceEvent($event, column)\"\n >\n </p-checkbox>\n </ng-template>\n </p-columnFilter>\n\n <!-- multiSelect on Header For Filter-->\n <p-columnFilter\n [field]=\"column.field\"\n matchMode=\"in\"\n [showMenu]=\"false\"\n *ngSwitchCase=\"'multi-select'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-multiSelect\n [ngModel]=\"value\"\n [options]=\"column.filter.data || []\"\n (onChange)=\"filter($event.value)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n placeholder=\"Any\"\n optionLabel=\"label\"\n >\n </p-multiSelect>\n </ng-template>\n </p-columnFilter>\n\n <!-- dropdown on Header For Filter-->\n <p-columnFilter\n [field]=\"column.field\"\n matchMode=\"in\"\n [showMenu]=\"false\"\n *ngSwitchCase=\"'dropdown'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-dropdown\n [showClear]=\"true\"\n [placeholder]=\"'Select'\"\n [filter]=\"column.allowSearch\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n [options]=\"column.filter.data || []\"\n (onChange)=\"searchDropdownFilter(filter, $event, column)\"\n ></p-dropdown>\n </ng-template>\n </p-columnFilter>\n\n <!-- calendar on Header For Filter-->\n <p-columnFilter\n [field]=\"column.field\"\n matchMode=\"in\"\n [showMenu]=\"false\"\n *ngSwitchCase=\"'calendar'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-calendar\n [placeholder]=\"'Select-Date'\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n appendTo=\"body\"\n (onSelect)=\"selectDate(column)\"\n [inputId]=\"column.field\"\n hourFormat=\"12\"\n (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n [showButtonBar]=\"true\"\n (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (onClearClick)=\"backspaceEvent($event, column)\"\n >\n </p-calendar>\n </ng-template>\n </p-columnFilter>\n\n <!-- Default Filter For Header -->\n <p-columnFilter\n [type]=\"\n column.type && column.type !== 'link' ? column.type : 'text'\n \"\n [field]=\"column.field\"\n display=\"menu\"\n *ngSwitchDefault\n >\n </p-columnFilter>\n </span>\n </th>\n <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n </tr>\n </ng-template>\n\n <!-- Body columns on Grid -->\n <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n <tr\n [ngClass]=\"row.highlightrow ? 'highlighted-row' : ''\"\n [class]=\"wordWrap ? '' : 'noWrap'\"\n (click)=\"!editing && handleRowClick(row)\"\n [pEditableRow]=\"row\"\n #gridRow\n [id]=\"row[dataKey]\"\n >\n <td *ngIf=\"allowSelection && selectionType === 'single'\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n <p-tableRadioButton\n [value]=\"row\"\n *ngIf=\"selectionType === 'single'\"\n (click)=\"multiCheckBoxOnclick(row, $event, true)\"\n ></p-tableRadioButton>\n <!-- <p-tableCheckbox\n [value]=\"row\"\n *ngIf=\"selectionType === 'multiple'\"\n (click)=\"multiCheckBoxOnclick(row, $event)\"\n ></p-tableCheckbox> -->\n </td>\n\n <!-- first actions column -->\n <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i\n [title]=\"action.tooltip\"\n [class]=\"action.icon\"\n (click)=\"handleActionClick($event, action, row)\"\n ></i>\n </span>\n </td>\n <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class=\"setActionColumnWidth\">\n <se-grid-row-actions\n [editing]=\"editing\"\n [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\"\n [hideDeleteBtn]=\"hideDeleteBtn\"\n [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\"\n (onRowEditInitBtn)=\"onRowEditInit($event)\"\n (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\"\n >\n </se-grid-row-actions>\n </span>\n </td>\n\n <!-- Grid Rows Data Bindings Start -->\n <td\n *ngFor=\"let column of selectedColumns\"\n [ngSwitch]=\"column.type\"\n [style]=\"column.style\"\n >\n <!-- Multiple Boolean column on Grid -->\n <span *ngSwitchCase=\"'multiple'\">\n <!-- <p-tableRadioButton\n [value]=\"row\"\n *ngIf=\"selectionType === 'single'\"\n (click)=\"multiCheckBoxOnclick(row, $event, true)\"\n ></p-tableRadioButton> -->\n <p-tableCheckbox\n [value]=\"row\"\n (click)=\"multiCheckBoxOnclick(row, $event)\"\n ></p-tableCheckbox>\n </span>\n\n <!-- Boolean column on Grid -->\n <span *ngSwitchCase=\"'boolean'\">\n <td *ngIf=\"!editing\">\n <p-checkbox\n [disabled]=\"true\"\n [binary]=\"true\"\n (click)=\"selectedRow(row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n [(ngModel)]=\"\n row[column.field] &&\n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y')\n ? checked\n : unChecked\n \"\n >\n </p-checkbox>\n </td>\n <td *ngIf=\"editing\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for edit checkBox -->\n <p-checkbox\n (click)=\"onClickEvent(column, row)\"\n (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n [disabled]=\"allowDisabled(column,row)\"\n [binary]=\"true\"\n [(ngModel)]=\"\n row[column.field] &&\n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y')\n ? editModeChecked\n : editModeunCkecked\n \"\n (blur)=\"onFocusOutEvent(column, row)\"\n ></p-checkbox>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ row[column.field] }}\n </ng-template>\n </p-cellEditor>\n </td>\n </span>\n\n <!-- link column on Grid -->\n <span *ngSwitchCase=\"'link'\">\n <!-- link column for HyperLink Case -->\n <span *ngIf=\"column.allowSave === false\">\n <span\n *ngIf=\"column.target !== '_self'\"\n (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\"\n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\"\n >\n <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n <span\n *ngIf=\"column.target === '_self'\"\n (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\"\n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\"\n >\n <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n </span>\n <!-- link column for Edit Case -->\n <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n <input\n *ngIf=\"!row.isNew\"\n pInputText\n (click)=\"onClickEvent(column, row)\"\n type=\"text\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\"\n />\n <input\n pInputText\n *ngIf=\"row.isNew\"\n type=\"text\"\n (click)=\"onClickEvent(column, row)\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\"\n />\n </span>\n <span *ngIf=\"column.editable === false\" \n [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n {{\n setConditionBaseValue(row, column)\n }}\n </span>\n <span *ngIf=\"column.editLink === false\">\n <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span>\n <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n\n <!-- Iframe column on Grid -->\n <span *ngSwitchCase=\"'iframe'\">\n <span\n class=\"custom-link\"\n (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\"\n [title]=\"\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText\n ? column.displayText\n : row[column.field]\n \"\n >\n {{\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText ? column.displayText : row[column.field]\n }}\n </span>\n </span>\n\n <!-- dialog column on Grid -->\n <span *ngSwitchCase=\"'dialog'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span\n *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\"\n [title]=\"setConditionBaseValue(row, column)\"\n >\n <span *ngIf=\"column.editable === true\">\n <input\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n type=\"text\"\n pInputText\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [name]=\"row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n />\n </span>\n <span\n *ngIf=\"\n column.editable === false || column.editable === undefined\n \"\n [class]=\"\n allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\n \"\n (click)=\"openGridDialog(column, row)\"\n >\n {{ !column.displayText && row.isNew ? '' : setConditionBaseValue(row, column) }}\n </span>\n </span>\n\n <span\n *ngIf=\"row[column.field + '_secondType'] === 'date'\"\n [title]=\"\n row[column.field]\n | date: (column.format ? column.format : 'MM/dd/YY')\n \"\n >\n <p-calendar\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\"\n hourFormat=\"12\"\n [showTime]=\"column.showTime\"\n (click)=\"onClickEvent(column, row)\"\n [timeOnly]=\"column.timeOnly\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n ></p-calendar>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n [class]=\"row.disabled == false ? 'custom-link' : column.editable === false ? 'custom-link' : allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\"\n (click)=\"openGridDialog(column, row)\"\n *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n [title]=\"setConditionBaseValue(row, column)\"\n >\n {{ setConditionBaseValue(row, column) }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- lookup Input column on Grid -->\n <span *ngSwitchCase=\"'lookup_input'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <div class=\"close-icon-wrapper\">\n <input\n readonly\n type=\"text\"\n pInputText\n [(ngModel)]=\"(column.disabled || column.editable === false) && column.displayField ? row[column.displayField] : typeOf(row[column.field]) === 'object' ?\n row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [name]=\"row[column.field]\"\n (keyup.tab)=\"selectLookupField(column, row)\"\n [disabled]=\"allowDisabled(column,row)\"\n (click)=\"selectLookupField(column, row)\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n \t(blur)=\"onFocusOutEvent(column, row)\"\n />\n <div *ngIf=\"!allowDisabled(column,row)\"><button *ngIf=\"row[column.field] && typeOf(row[column.field]) === 'object'\n ? row[column.field].text\n : row[column.field] && !column.disabled\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column,row)\"></button></div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"column.linkId\">\n <a [href]=\"row[column.field + '_obj']?.hyperlink\" [target]=\"column.target === '_self' ? '' : '_blank'\"> \n {{\n typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text : row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n }}\n </a>\n </span>\n <span\n *ngIf=\"!column.linkId\"\n [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n (click)=\"openLookupHyperlink(column, row)\"\n >\n {{\n typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text : row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- Numeric Input column on Grid -->\n <span *ngSwitchCase=\"'numeric'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for Currency && Decimal && Percent -->\n <span class=\"input-number\">\n <p-inputNumber\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [class]=\"\n column.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [showButtons]=\"!column.format ? true : false\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [name]=\"column.field\"\n [disabled]=\"allowDisabled(column,row)\"\n (ngModelChange)=\"onChangeEvent(column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\"\n [mode]=\"\n column.format &&\n column.format.type === 'currency'\n ? 'currency'\n : 'decimal'\n \"\n [currency]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.currency\n ? column.format.formatParams.currency\n : 'USD'\n \"\n [locale]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.locale\n ? column.format.formatParams.locale\n : 'en-US'\n \"\n [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n [suffix]=\"\n column.format &&\n column.format.type === 'percent' && !column?.format?.formatParams?.allowCalculate \n ? '%'\n : ''\n \"\n >\n </p-inputNumber>\n </span>\n <ng-template #locked_field\n ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template\n >\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n [title]=\"setNumericFormat(column, row)\">\n {{\n setNumericFormat(column, row)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n \n <!-- Button column on Grid -->\n <span [title]=\"column.value ? column.value : column.icon\">\n <div *ngSwitchCase=\"'add_button'\">\n <button *ngIf=\"!row.hidegridbtn\"\n pButton\n type=\"button\"\n [icon]=\"row[column.field]?.action?.icon ? row[column.field]?.action?.icon : column.icon\"\n [name]=\"column.header\"\n class=\"merge-btn\"\n [disabled]=\"allowDisabled(column,row)\"\n [label]=\"row[column.field]?.action?.displayText ? row[column.field]?.action?.displayText : column.value\"\n [ngStyle]=\"{\n background: column.color ? column.color : ''\n }\"\n (click)=\"onClickButton(column, row)\"\n ></button>\n </div>\n </span>\n\n <!-- Date column on Grid -->\n <span\n *ngSwitchCase=\"'date'\"\n [title]=\"setConditionBaseValue(row,column)\"\n >\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-calendar\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\"\n hourFormat=\"12\"\n [defaultDate]=\"defaultDate\"\n [stepMinute] = \"column.minutesInterval ? column.minutesInterval : 1\"\n [showTime]=\"column.showTime\"\n [timeOnly]=\"column.timeOnly\"\n [dateFormat]=\"column.format ? column.format : calendarFormat\"\n (keyup)=\"calenderInputValue(column, row)\"\n (onShow)=\"onClickEvent(column, row)\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n ></p-calendar>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ setConditionBaseValue(row,column) }}\n </ng-template>\n </p-cellEditor>\n </span>\n <span *ngSwitchDefault>\n <span [ngSwitch]=\"column.type\">\n <!-- Dropdown column on Grid -->\n <span\n *ngSwitchCase=\"'dropdown'\"\n [class]=\"dropdownInput ? '' : 'output-dropdown'\"\n [title]=\"\n setDropdwonReadOnlyValue(row, column)\n \"\n >\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-dropdown\n *ngIf=\"!row[column.field]?.action?.hidden\"\n [options]=\"\n row[column.field+'_data']\n ? row[column.field+'_data']\n : column.data\n \"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n [placeholder]=\"row[column.displayField]\n ? row[column.displayField]\n : row[column.field] ? row[column.field] : 'Select'\"\n [showClear]=\"row[column.field] ? true : false\"\n [optionLabel]=\"column.optionLabel\"\n (click)=\"onClickEvent(column, row)\"\n [optionValue]=\"column.optionValue\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (onChange)=\"onChangeEvent(column, row)\"\n [filter]=\"column.allowSearch\"\n ></p-dropdown>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"!row[column.field]?.action?.hidden\">\n {{\n setDropdwonReadOnlyValue(row, column)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- MultiSelect column on Grid -->\n <span *ngSwitchCase=\"'multi-select'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-multiSelect\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n type=\"text\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n [options]=\"column.data\"\n [optionLabel]=\"column.optionLabel\"\n [optionValue]=\"column.optionValue\"\n (onChange)=\"onChangeEvent(column, row)\"\n (onPanelShow)=\"showOption(column, row)\"\n (click)=\"onClickEvent(column, row)\"\n [appendTo]=\"'body'\"\n (blur)=\"onFocusOutEvent(column, row)\"\n >\n </p-multiSelect>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n [title]=\"\n row[column.displayField]\n ? row[column.displayField]\n : setMultiSelectData(column, row[column.field])\n \"\n >\n {{\n row[column.displayField]\n ? row[column.displayField] :\n setMultiSelectData(column, row[column.field])\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- AutoComplete Search -->\n <span\n *ngSwitchCase=\"'AutoComplete'\"\n >\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-autoComplete\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [name]=\"column.header\"\n [suggestions]=\"column.data\"\n [field]=\"column.displayField\"\n [(ngModel)]=\"row[column.field]?.action && row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : typeOf(row[column.field]) === 'object' && row[column.field]?.text ? row[column.field]?.text : row[column.field]\" \n [dropdown]=\"column.showOption\"\n (onChange)=\"onChangeEvent(column, row)\"\n (click)=\"onClickEvent(column, row)\"\n (completeMethod)=\"autoSearch($event, column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\"\n [disabled]=\"allowDisabled(column,row)\"\n [multiple]=\"true\"\n (keydown.enter)=\"onAutoCompleteFocusOut($event, column)\"\n >\n </p-autoComplete>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"row[column.field] && row[column.field][0] && row[column.field][0][column.displayField]\">\n <span *ngFor=\"let value of row[column.field]; let i = index\">\n {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ? value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n </span>\n </span>\n </ng-template>\n </p-cellEditor>\n </span> \n <!-- Add Generate Report Button -->\n <span *ngSwitchCase=\"'report'\"> \n <p-cellEditor> \n <ng-template pTemplate=\"output\">\n <se-generate-report-btn [repId]=\"column.reportId\" [params]=\"column.params\" [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <span *ngSwitchDefault>\n <!-- Input column on Grid -->\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <input\n pInputText\n type=\"text\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : typeOf(row[column.field]) === 'object' && (row[column.field]?.action || row[column.field]?.text) ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\"\n (click)=\"onClickButton(column, row)\"\n *ngIf=\"column.field !== dataKey; else locked_field\"\n />\n <ng-template #locked_field\n ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template\n >\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n (click)=\"onClickEvent(column, row)\"\n [title]=\"\n column.displayText ? column.displayText : \n row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n \"\n >\n {{\n row[column.field]?.action ? row[column.field]?.text : column.displayText ? column.displayText : \n row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n </span>\n </td>\n <!-- Grid Rows Data Bindings End -->\n\n <!-- Action column on Grid -->\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i\n [title]=\"action.tooltip\"\n [class]=\"action.icon\"\n (click)=\"handleActionClick($event, action, row)\"\n ></i>\n </span>\n </td>\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class='setActionColumnWidth'>\n <se-grid-row-actions\n [editing]=\"editing\"\n [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\"\n [hideDeleteBtn]=\"hideDeleteBtn\"\n [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\"\n (onRowEditInitBtn)=\"onRowEditInit($event)\"\n (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\"\n >\n </se-grid-row-actions>\n </span>\n </td>\n </tr>\n </ng-template>\n\n <!-- Footer columns on Grid -->\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"aggregateFooter\">\n <td *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngFor=\"let outerColumn of selectedColumns\" [style]=\"outerColumn.style\">\n <div *ngFor=\"let innerColumn of selectedColumns\">\n <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n <div *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field.toLowerCase() === outerColumn.field.toLowerCase()) || aggr.displayField && aggr.displayField.toLowerCase() === outerColumn.field.toLowerCase())\">\n <div [innerHTML]=\"aggr.aggrValue\">\n </div>\n </div>\n </div>\n </div>\n </td>\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n </tr>\n </ng-template>\n\n <!-- Footer for Empty Message columns on Grid -->\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td [attr.colspan]=\"selectedColumns?.length + 1\">No records found.</td>\n </tr>\n </ng-template>\n</p-table>\n",
|
|
5846
|
+
template: "<p-confirmDialog\n [style]=\"{ width: '50vw' }\"\n *ngIf=\"useInlineCRUD\"\n key=\"handleInlineCRUD\"\n></p-confirmDialog>\n<p-confirmDialog\n [style]=\"{ width: '50vw' }\"\n *ngIf=\"columnActions.length > 0\"\n key=\"handlecolumnActions\"\n></p-confirmDialog>\n<div class=\"p-mb-2 p-d-flex p-ai-center\"\n *ngIf=\"\n allowColumnToggle ||\n rowActions.length > 0 ||\n useInlineCRUD ||\n allowExportToExcel ||\n allowExportToPdf ||\n clearGridFilter\n \"\n>\n<!-- button for apply filterValue on Grid -->\n <button\n *ngIf=\"filtering && !hideFilter\"\n pButton\n type=\"button\"\n icon=\"pi pi-search\"\n (click)=\"applyGirdFilterBtn()\"\n [class]=\"\n searchGridFilter ? 'p-button-success p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n \"\n></button>\n\n<!-- button for clear filterValue on Grid -->\n <button\n *ngIf=\"filtering && !hideFilter\"\n pButton\n id=\"clearGridFilterValuesButton\"\n type=\"button\"\n icon=\"pi pi-replay\"\n (click)=\"cleargridFiltersValue()\"\n [class]=\"\n clearGridFilter ? 'p-button-danger p-mr-2 p-ml-1' : 'hide-clear-filter-button'\n \"\n></button>\n\n<!-- button for edit all grid at once -->\n<!-- <button\n pButton\n *ngIf=\"hideEditAllRowsBtn && editAllRows\"\n id=\"editBtnGlobalvalues\"\n type=\"button\"\n [label]=\"'Edit'\"\n class=\"p-mr-2 ui-button-info\"\n icon=\"pi pi-pencil\"\n [class]=\"editRowPermission ? '' : 'p-disabled'\"\n (click)=\"editAllRowsAtOnce()\"\n ></button> -->\n\n <!-- button for save all grid at once -->\n <button\n pButton\n *ngIf=\"editAllRows && editRowPermission\"\n id=\"saveAllGridValues\"\n icon=\"pi pi-check\"\n [label]=\"'Save'\"\n [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'p-mr-2 ui-button-info'\"\n type=\"button\"\n (click)=\"saveAllRowsAtOnce()\"\n ></button>\n\n <!-- button for cancel all grid at once -->\n <button\n pButton\n *ngIf=\"editAllRows\"\n id=\"editBtnGlobalvalues\"\n type=\"button\"\n [label]=\"'Cancel'\"\n icon=\"pi pi-times\"\n class=\"p-mr-2 ui-button-info\"\n (click)=\"cancelAllRowsAtOnce()\"\n ></button>\n\n <!-- header Button for multiSelect on Grid -->\n <span *ngIf=\"allowColumnToggle\">\n <p-multiSelect\n [showToggleAll]=\"false\"\n [options]=\"columns\"\n [(ngModel)]=\"selectedColumns\"\n optionLabel=\"header\"\n selectedItemsLabel=\"{0} columns selected\"\n [style]=\"{ minWidth: '200px' }\"\n placeholder=\"Choose Columns\"\n >\n </p-multiSelect>\n </span>\n\n <!-- <button\n pButton\n *ngIf=\"showRefreshBtn\"\n type=\"button\"\n [label]=\"'Refresh'\"\n icon=\"pi pi-refresh\"\n (click)=\"refresh()\"\n class=\"ui-button-info p-mr-2\"\n></button> -->\n\n <!-- header Button for Adding new Row on Grid -->\n <button\n pButton\n *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\"\n type=\"button\"\n [label]=\"'Add'\"\n pAddRow\n [table]=\"componentTableRef\"\n [newRow]=\"newGridRow\"\n [id]=\"dataKey\"\n pTooltip=\"Add New Row\"\n tooltipPosition=\"bottom\"\n icon=\"pi pi-plus\"\n class=\"ui-button-info p-mr-2 p-ml-2\"\n (click)=\"addNewRow(newGridRow, true)\"\n pRipple\n ></button>\n \n<!-- header Button for Excel File on Grid -->\n<button\n *ngIf=\"allowExportToExcel\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-excel\"\n (click)=\"exportExcel()\"\n class=\"p-button-success p-mt-0 p-mx-2\"\n pTooltip=\"Export to Excel\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n\n<!-- header Button for PDF File on Grid -->\n<button\n *ngIf=\"allowExportToPdf\"\n type=\"button\"\n pButton\n icon=\"pi pi-file-pdf\"\n (click)=\"exportPdf()\"\n class=\"p-button-warning p-mr-2\"\n pTooltip=\"Export to Pdf\"\n tooltipPosition=\"bottom\"\n pRipple\n></button>\n</div>\n\n<p-table\n *ngIf=\"!isGridHidden\"\n id=\"my-table\"\n [value]=\"rowsData\"\n [columns]=\"selectedColumns\"\n sortMode=\"multiple\"\n [lazy]=\"useServerSideEvents\"\n [paginator]=\"pagination\"\n [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\n [rows]=\"defaultRows\"\n [totalRecords]=\"totalRecords\"\n [rowsPerPageOptions]=\"setPaginationLength\"\n [showCurrentPageReport]=\"showCurrentPageReport\"\n currentPageReportTemplate=\"Showing {first} to {last} of {{\n totalRecords\n }} entries\"\n [loading]=\"autoLoadData && !setGridRefreshTime ? loading : false\"\n (onSort)=\"sortDisabled ?? handleSortChange($event)\"\n (onFilter)=\"handleFilterChange($event)\"\n (onLazyLoad)=\"autoLoadData ? handleServerSideEvents($event) : ''\"\n (onPage)=\"handleServerSidePagination($event)\"\n #dt\n [dataKey]=\"dataKey\"\n [(selection)]=\"selectedRows\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n editMode=\"row\"\n [editingRowKeys]=\"editingRowKeys\"\n [autoLayout]=\"true\"\n [rowHover]=\"rowHover\"\n [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\"\n>\n <!-- header Button for Action on Grid -->\n <div\n *ngIf=\"rowActions.length > 0 && rowActions.length > 0\"\n class=\"p-d-flex p-jc-end\"\n >\n <span *ngFor=\"let rowAction of rowActions\">\n <button\n pButton\n type=\"button\"\n [label]=\"rowAction.title\"\n [class]=\"rowAction.class\"\n (click)=\"rowAction.onClick(selectedRows)\"\n ></button>\n </span>\n </div>\n\n <!-- header columns on Grid -->\n <ng-template pTemplate=\"header\" let-cols>\n <tr>\n <!-- <th *ngIf=\"allowSelection\" [ngStyle]=\"{ width: selectionColumnWidth }\" style=\"justify-content: center\">\n <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n <span class=\"flex-grow-1 p-mr-2\"> {{allowSelectionHeader}} </span>\n <p-tableHeaderCheckbox\n *ngIf=\"selectionType === 'multiple'\"\n binary=\"true\"\n (click)=\"multiCheckBoxOnclick(rowsData, $event)\"\n ></p-tableHeaderCheckbox>\n </div>\n </th> -->\n <th *ngIf=\"allowSelection && selectionType === 'single'\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n Select\n </th>\n <th\n *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n >\n Actions\n </th>\n <th\n *ngFor=\"let column of cols\"\n [pSortableColumn]=\"column.field\"\n [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n [style]=\"column?.type === 'multiple' ? 'justify-content: center' : column.style\"\n >\n <div style=\"display: flex;align-items: center;white-space: nowrap;\">\n <span [class]=\"column?.type === 'multiple' ? 'flex-grow-1 p-mr-2' : 'flex-grow-1'\">{{ column.header }}</span>\n <p-tableHeaderCheckbox\n *ngIf=\"column?.type === 'multiple'\"\n binary=\"true\"\n (click)=\"multiCheckBoxOnclick(rowsData, $event)\"\n ></p-tableHeaderCheckbox>\n <span *ngIf=\"column.isRequired && column?.type !== 'multiple'\">*</span>\n <p-sortIcon\n *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n [field]=\"column.field\"\n ></p-sortIcon>\n </div>\n </th>\n <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n </tr>\n <tr *ngIf=\"filtering && !hideFilter\">\n <!-- <th *ngIf=\"allowSelection\">\n <p-tableHeaderCheckbox\n *ngIf=\"selectionType === 'multiple'\"\n (click)=\"multiCheckBoxOnclick(rowsData)\"\n ></p-tableHeaderCheckbox>\n </th> -->\n <th *ngIf=\"allowSelection && selectionType === 'single'\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th> \n <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n </th>\n <th\n *ngFor=\"let column of cols\"\n [ngSwitch]=\"column?.filter?.type\"\n [style]=\"column.style\"\n [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\"\n >\n <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n <!-- Text input on Header For Filter-->\n <p-columnFilter\n [type]=\"'text'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <input\n type=\"text\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n pInputText\n />\n </ng-template>\n </p-columnFilter>\n\n <!-- Numeric input on Header For Filter-->\n <p-columnFilter\n [type]=\"'numeric'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'numeric_input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-inputNumber\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onBlur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n ></p-inputNumber>\n </ng-template>\n </p-columnFilter>\n\n <!-- lookup input on Header For Filter-->\n <p-columnFilter\n [type]=\"'text'\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'lookup_input'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <div class=\"close-icon-wrapper\">\n <input\n id=\"lookUp_filter\"\n autocomplete=\"off\"\n type=\"text\"\n [(ngModel)]=\"column.value\"\n (click)=\"setFilterLookup(column)\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"\n pInputText\n />\n <div><button *ngIf=\"column.value\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column)\"></button></div>\n </div>\n </ng-template>\n </p-columnFilter>\n\n <!-- checkbox on Header For Filter-->\n <p-columnFilter\n type=\"boolean\"\n [field]=\"column.field\"\n *ngSwitchCase=\"'checkbox'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-checkbox\n [binary]=\"true\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onChange)=\"setFilterFocusOut(column, filter, $event)\"\n (click)=\"clickCheckBoxFilter(column)\"\n (keydown)=\"backspaceEvent($event, column)\"\n >\n </p-checkbox>\n </ng-template>\n </p-columnFilter>\n\n <!-- multiSelect on Header For Filter-->\n <p-columnFilter\n [field]=\"column.field\"\n matchMode=\"in\"\n [showMenu]=\"false\"\n *ngSwitchCase=\"'multi-select'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-multiSelect\n [ngModel]=\"value\"\n [options]=\"column.filter.data || []\"\n (onChange)=\"filter($event.value)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n placeholder=\"Any\"\n optionLabel=\"label\"\n >\n </p-multiSelect>\n </ng-template>\n </p-columnFilter>\n\n <!-- dropdown on Header For Filter-->\n <p-columnFilter\n [field]=\"column.field\"\n matchMode=\"in\"\n [showMenu]=\"false\"\n *ngSwitchCase=\"'dropdown'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-dropdown\n [showClear]=\"true\"\n [placeholder]=\"'Select'\"\n [filter]=\"column.allowSearch\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n [options]=\"column.filter.data || []\"\n (onChange)=\"searchDropdownFilter(filter, $event, column)\"\n ></p-dropdown>\n </ng-template>\n </p-columnFilter>\n\n <!-- calendar on Header For Filter-->\n <p-columnFilter\n [field]=\"column.field\"\n matchMode=\"in\"\n [showMenu]=\"false\"\n *ngSwitchCase=\"'calendar'\"\n >\n <ng-template\n pTemplate=\"filter\"\n let-value\n let-filter=\"filterCallback\"\n >\n <p-calendar\n [placeholder]=\"'Select-Date'\"\n [(ngModel)]=\"column.value\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n appendTo=\"body\"\n (onSelect)=\"selectDate(column)\"\n [inputId]=\"column.field\"\n hourFormat=\"12\"\n (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n [showButtonBar]=\"true\"\n (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\"\n (onClearClick)=\"backspaceEvent($event, column)\"\n >\n </p-calendar>\n </ng-template>\n </p-columnFilter>\n\n <!-- Default Filter For Header -->\n <p-columnFilter\n [type]=\"\n column.type && column.type !== 'link' ? column.type : 'text'\n \"\n [field]=\"column.field\"\n display=\"menu\"\n *ngSwitchDefault\n >\n </p-columnFilter>\n </span>\n </th>\n <th *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n </tr>\n </ng-template>\n\n <!-- Body columns on Grid -->\n <ng-template pTemplate=\"body\" let-row let-editing=\"editing\" let-ri=\"rowIndex\">\n <tr\n [ngClass]=\"row.highlightrow ? 'highlighted-row' : ''\"\n [class]=\"wordWrap ? '' : 'noWrap'\"\n (click)=\"!editing && handleRowClick(row)\"\n [pEditableRow]=\"row\"\n #gridRow\n [id]=\"row[dataKey]\"\n >\n <td *ngIf=\"allowSelection && selectionType === 'single'\" [ngStyle]=\"{ width: selectionColumnWidth }\">\n <p-tableRadioButton\n [value]=\"row\"\n *ngIf=\"selectionType === 'single'\"\n (click)=\"multiCheckBoxOnclick(row, $event, true)\"\n ></p-tableRadioButton>\n <!-- <p-tableCheckbox\n [value]=\"row\"\n *ngIf=\"selectionType === 'multiple'\"\n (click)=\"multiCheckBoxOnclick(row, $event)\"\n ></p-tableCheckbox> -->\n </td>\n\n <!-- first actions column -->\n <td *ngIf=\"setActionColumnAsFirst && columnActions.length > 0\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i\n [title]=\"action.tooltip\"\n [class]=\"action.icon\"\n (click)=\"handleActionClick($event, action, row)\"\n ></i>\n </span>\n </td>\n <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class=\"setActionColumnWidth\">\n <se-grid-row-actions\n [editing]=\"editing\"\n [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\"\n [hideDeleteBtn]=\"hideDeleteBtn\"\n [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\"\n (onRowEditInitBtn)=\"onRowEditInit($event)\"\n (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\"\n >\n </se-grid-row-actions>\n </span>\n </td>\n\n <!-- Grid Rows Data Bindings Start -->\n <td\n *ngFor=\"let column of selectedColumns\"\n [ngSwitch]=\"column.type\"\n [style]=\"column.style\"\n >\n <!-- Multiple Boolean column on Grid -->\n <span *ngSwitchCase=\"'multiple'\">\n <!-- <p-tableRadioButton\n [value]=\"row\"\n *ngIf=\"selectionType === 'single'\"\n (click)=\"multiCheckBoxOnclick(row, $event, true)\"\n ></p-tableRadioButton> -->\n <p-tableCheckbox\n [value]=\"row\"\n (click)=\"multiCheckBoxOnclick(row, $event)\"\n ></p-tableCheckbox>\n </span>\n\n <!-- Boolean column on Grid -->\n <span *ngSwitchCase=\"'boolean'\">\n <td *ngIf=\"!editing\">\n <p-checkbox\n [disabled]=\"true\"\n [binary]=\"true\"\n (click)=\"selectedRow(row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n [(ngModel)]=\"\n row[column.field] &&\n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y')\n ? checked\n : unChecked\n \"\n >\n </p-checkbox>\n </td>\n <td *ngIf=\"editing\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for edit checkBox -->\n <p-checkbox\n (click)=\"onClickEvent(column, row)\"\n (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n [disabled]=\"allowDisabled(column,row)\"\n [binary]=\"true\"\n [(ngModel)]=\"\n row[column.field] &&\n (row[column.field].toString() === '1' ||\n row[column.field].toString().toLowerCase() === 'true' ||\n row[column.field].toString().toLowerCase() === 'y')\n ? editModeChecked\n : editModeunCkecked\n \"\n (blur)=\"onFocusOutEvent(column, row)\"\n ></p-checkbox>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ row[column.field] }}\n </ng-template>\n </p-cellEditor>\n </td>\n </span>\n\n <!-- link column on Grid -->\n <span *ngSwitchCase=\"'link'\">\n <!-- link column for HyperLink Case -->\n <span *ngIf=\"column.allowSave === false\">\n <span\n *ngIf=\"column.target !== '_self'\"\n (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\"\n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\"\n >\n <a [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n <span\n *ngIf=\"column.target === '_self'\"\n (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\"\n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\"\n >\n <a [href]=\"row[column.field + '_obj']?.hyperlink\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n </span>\n <!-- link column for Edit Case -->\n <span *ngIf=\"column.allowSave || column.allowSave === undefined\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n <input\n *ngIf=\"!row.isNew\"\n pInputText\n (click)=\"onClickEvent(column, row)\"\n type=\"text\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\"\n />\n <input\n pInputText\n *ngIf=\"row.isNew\"\n type=\"text\"\n (click)=\"onClickEvent(column, row)\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\"\n />\n </span>\n <span *ngIf=\"column.editable === false\" \n [class]=\"allowDisabled(column,row) ? 'disable-link' : 'hyperlink'\">\n {{\n setConditionBaseValue(row, column)\n }}\n </span>\n <span *ngIf=\"column.editLink === false\">\n <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span>\n <a (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" target=\"_blank\" \n [class]=\"column.editable === false ? '' : allowDisabled(column,row) ? 'disable-link' : ''\">\n {{\n setConditionBaseValue(row, column)\n }}\n </a>\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n\n <!-- Iframe column on Grid -->\n <span *ngSwitchCase=\"'iframe'\">\n <span\n class=\"custom-link\"\n (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\"\n [title]=\"\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText\n ? column.displayText\n : row[column.field]\n \"\n >\n {{\n row[column.field + '_obj'] &&\n (row[column.field + '_obj'].displayText === null || row[column.field + '_obj'].displayText === '')\n ? row[column.field] : row[column.field + '_obj']?.displayText\n ? row[column.field + '_obj'].displayText\n : column.displayText ? column.displayText : row[column.field]\n }}\n </span>\n </span>\n\n <!-- dialog column on Grid -->\n <span *ngSwitchCase=\"'dialog'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <span\n *ngIf=\"row[column.field + '_secondType'] !== 'date' && !row.hidegridbtn\"\n [title]=\"setConditionBaseValue(row, column)\"\n >\n <span *ngIf=\"column.editable === true\">\n <input\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n type=\"text\"\n pInputText\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [name]=\"row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n />\n </span>\n <span\n *ngIf=\"\n column.editable === false || column.editable === undefined\n \"\n [class]=\"\n allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\n \"\n (click)=\"openGridDialog(column, row)\"\n >\n {{ !column.displayText && row.isNew ? '' : setConditionBaseValue(row, column) }}\n </span>\n </span>\n\n <span\n *ngIf=\"row[column.field + '_secondType'] === 'date'\"\n [title]=\"\n row[column.field]\n | date: (column.format ? column.format : 'MM/dd/YY')\n \"\n >\n <p-calendar\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\"\n hourFormat=\"12\"\n [showTime]=\"column.showTime\"\n (click)=\"onClickEvent(column, row)\"\n [timeOnly]=\"column.timeOnly\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n ></p-calendar>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n [class]=\"row.disabled == false ? 'custom-link' : column.editable === false ? 'custom-link' : allowDisabled(column,row) ? 'disable-link custom-link' : 'custom-link'\"\n (click)=\"openGridDialog(column, row)\"\n *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n [title]=\"setConditionBaseValue(row, column)\"\n >\n {{ setConditionBaseValue(row, column) }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- lookup Input column on Grid -->\n <span *ngSwitchCase=\"'lookup_input'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <div class=\"close-icon-wrapper\">\n <input\n readonly\n type=\"text\"\n pInputText\n [(ngModel)]=\"(column.disabled || column.editable === false) && column.displayField ? row[column.displayField] : typeOf(row[column.field]) === 'object' ?\n row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [name]=\"row[column.field]\"\n (keyup.tab)=\"selectLookupField(column, row)\"\n [disabled]=\"allowDisabled(column,row)\"\n (click)=\"selectLookupField(column, row)\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n \t(blur)=\"onFocusOutEvent(column, row)\"\n />\n <div *ngIf=\"!allowDisabled(column,row)\"><button *ngIf=\"row[column.field] && typeOf(row[column.field]) === 'object'\n ? row[column.field].text\n : row[column.field] && !column.disabled\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(column,row)\"></button></div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"column.linkId\">\n <a [href]=\"row[column.field + '_obj']?.hyperlink\" [target]=\"column.target === '_self' ? '' : '_blank'\"> \n {{\n typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text : row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n }}\n </a>\n </span>\n <span\n *ngIf=\"!column.linkId\"\n [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n (click)=\"openLookupHyperlink(column, row)\"\n >\n {{\n typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.text : row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- Numeric Input column on Grid -->\n <span *ngSwitchCase=\"'numeric'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <!-- for Currency && Decimal && Percent -->\n <span class=\"input-number\">\n <p-inputNumber\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [class]=\"\n column.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [showButtons]=\"!column.format ? true : false\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [name]=\"column.field\"\n [disabled]=\"allowDisabled(column,row)\"\n (ngModelChange)=\"onChangeEvent(column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\"\n [mode]=\"\n column.format &&\n column.format.type === 'currency'\n ? 'currency'\n : 'decimal'\n \"\n [currency]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.currency\n ? column.format.formatParams.currency\n : 'USD'\n \"\n [locale]=\"\n column.format &&\n column.format.type === 'currency' &&\n column.format.formatParams &&\n column.format.formatParams.locale\n ? column.format.formatParams.locale\n : 'en-US'\n \"\n [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n [suffix]=\"\n column.format &&\n column.format.type === 'percent' && !column?.format?.formatParams?.allowCalculate \n ? '%'\n : ''\n \"\n >\n </p-inputNumber>\n </span>\n <ng-template #locked_field\n ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template\n >\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n [title]=\"setNumericFormat(column, row)\">\n {{\n setNumericFormat(column, row)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n \n <!-- Button column on Grid -->\n <span [title]=\"column.value ? column.value : column.icon\">\n <div *ngSwitchCase=\"'add_button'\">\n <button *ngIf=\"!row.hidegridbtn\"\n pButton\n type=\"button\"\n [icon]=\"row[column.field]?.action?.icon ? row[column.field]?.action?.icon : column.icon\"\n [name]=\"column.header\"\n class=\"merge-btn\"\n [disabled]=\"allowDisabled(column,row)\"\n [label]=\"row[column.field]?.action?.displayText ? row[column.field]?.action?.displayText : column.value\"\n [ngStyle]=\"{\n background: column.color ? column.color : ''\n }\"\n (click)=\"onClickButton(column, row)\"\n ></button>\n </div>\n </span>\n\n <!-- Date column on Grid -->\n <span\n *ngSwitchCase=\"'date'\"\n [title]=\"setConditionBaseValue(row,column)\"\n >\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-calendar\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty ' + column.field + row[dataKey] : column.field + row[dataKey]\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\"\n hourFormat=\"12\"\n [defaultDate]=\"defaultDate\"\n [stepMinute] = \"column.minutesInterval ? column.minutesInterval : 1\"\n [showTime]=\"column.showTime\"\n [timeOnly]=\"column.timeOnly\"\n [dateFormat]=\"column.format ? column.format : calendarFormat\"\n (keyup)=\"calenderInputValue(column, row)\"\n (onShow)=\"onClickEvent(column, row)\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n [showButtonBar]=\"!column.timeOnly\"\n ></p-calendar>\n </ng-template>\n <ng-template pTemplate=\"output\">\n {{ setConditionBaseValue(row,column) }}\n </ng-template>\n </p-cellEditor>\n </span>\n <span *ngSwitchDefault>\n <span [ngSwitch]=\"column.type\">\n <!-- Dropdown column on Grid -->\n <span\n *ngSwitchCase=\"'dropdown'\"\n [class]=\"dropdownInput ? '' : 'output-dropdown'\"\n [title]=\"\n setDropdwonReadOnlyValue(row, column)\n \"\n >\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-dropdown\n *ngIf=\"!row[column.field]?.action?.hidden\"\n [options]=\"\n row[column.field+'_data']\n ? row[column.field+'_data']\n : column.data\n \"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n [placeholder]=\"row[column.displayField]\n ? row[column.displayField]\n : row[column.field] ? row[column.field] : 'Select'\"\n [showClear]=\"row[column.field] ? true : false\"\n [optionLabel]=\"column.optionLabel\"\n (click)=\"onClickEvent(column, row)\"\n [optionValue]=\"column.optionValue\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (onChange)=\"onChangeEvent(column, row)\"\n [filter]=\"column.allowSearch\"\n ></p-dropdown>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"!row[column.field]?.action?.hidden\">\n {{\n setDropdwonReadOnlyValue(row, column)\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- MultiSelect column on Grid -->\n <span *ngSwitchCase=\"'multi-select'\">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-multiSelect\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n type=\"text\"\n [(ngModel)]=\"typeOf(row[column.field]) === 'object' && row[column.field]?.action ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n [options]=\"column.data\"\n [optionLabel]=\"column.optionLabel\"\n [optionValue]=\"column.optionValue\"\n (onChange)=\"onChangeEvent(column, row)\"\n (onPanelShow)=\"showOption(column, row)\"\n (click)=\"onClickEvent(column, row)\"\n [appendTo]=\"'body'\"\n (blur)=\"onFocusOutEvent(column, row)\"\n >\n </p-multiSelect>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n [title]=\"\n row[column.displayField]\n ? row[column.displayField]\n : setMultiSelectData(column, row[column.field])\n \"\n >\n {{\n row[column.displayField]\n ? row[column.displayField] :\n setMultiSelectData(column, row[column.field])\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <!-- AutoComplete Search -->\n <span\n *ngSwitchCase=\"'AutoComplete'\"\n >\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-autoComplete\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [name]=\"column.header\"\n [suggestions]=\"column.data\"\n [field]=\"column.displayField\"\n [(ngModel)]=\"row[column.field]?.action && row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : typeOf(row[column.field]) === 'object' && row[column.field]?.text ? row[column.field]?.text : row[column.field]\" \n [dropdown]=\"column.showOption\"\n (onChange)=\"onChangeEvent(column, row)\"\n (click)=\"onClickEvent(column, row)\"\n (completeMethod)=\"autoSearch($event, column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\"\n [disabled]=\"allowDisabled(column,row)\"\n [multiple]=\"true\"\n (keydown.enter)=\"onAutoCompleteFocusOut($event, column)\"\n >\n </p-autoComplete>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"row[column.field] && row[column.field][0] && row[column.field][0][column.displayField]\">\n <span *ngFor=\"let value of row[column.field]; let i = index\">\n {{ row[column.field] && row[column.field].length > 1 ? row[column.field].length -1 === i ? value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n </span>\n </span>\n </ng-template>\n </p-cellEditor>\n </span> \n <!-- Add Generate Report Button -->\n <span *ngSwitchCase=\"'report'\"> \n <p-cellEditor> \n <ng-template pTemplate=\"output\">\n <se-generate-report-btn [repId]=\"column.reportId\" [params]=\"column.params\" [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n </ng-template>\n </p-cellEditor>\n </span>\n\n <span *ngSwitchDefault>\n <!-- Input column on Grid -->\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <input\n pInputText\n type=\"text\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [(ngModel)]=\"row.undefined ? '' : allowDisabled(column,row) && row[column.displayField] ? row[column.displayField] : typeOf(row[column.field]) === 'object' && (row[column.field]?.action || row[column.field]?.text) ? row[column.field]?.action?.displayField?.toLowerCase() ?\n row[row[column.field]?.action?.displayField.toLowerCase()] : row[column.field]?.text : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\"\n (click)=\"onClickButton(column, row)\"\n *ngIf=\"column.field !== dataKey; else locked_field\"\n />\n <ng-template #locked_field\n ><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template\n >\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span\n (click)=\"onClickEvent(column, row)\"\n [title]=\"\n column.displayText ? column.displayText : \n row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n \"\n >\n {{\n row[column.field]?.action ? row[column.field]?.text : column.displayText ? column.displayText : \n row[column.displayField]\n ? row[column.displayField]\n : row[column.field]\n }}\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n </span>\n </td>\n <!-- Grid Rows Data Bindings End -->\n\n <!-- Action column on Grid -->\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && columnActions.length > 0\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i\n [title]=\"action.tooltip\"\n [class]=\"action.icon\"\n (click)=\"handleActionClick($event, action, row)\"\n ></i>\n </span>\n </td>\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\" [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class='setActionColumnWidth'>\n <se-grid-row-actions\n [editing]=\"editing\"\n [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\"\n [hideDeleteBtn]=\"hideDeleteBtn\"\n [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\"\n (onRowEditInitBtn)=\"onRowEditInit($event)\"\n (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\"\n (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\"\n >\n </se-grid-row-actions>\n </span>\n </td>\n </tr>\n </ng-template>\n\n <!-- Footer columns on Grid -->\n <ng-template pTemplate=\"footer\">\n <tr *ngIf=\"aggregateFooter\">\n <td *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngFor=\"let outerColumn of selectedColumns\" [style]=\"outerColumn.style\">\n <div *ngFor=\"let innerColumn of selectedColumns\">\n <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n <div *ngIf=\"aggr.aggrValue?.length && ((!aggr.displayField && innerColumn.field.toLowerCase() === outerColumn.field.toLowerCase()) || aggr.displayField && aggr.displayField.toLowerCase() === outerColumn.field.toLowerCase())\">\n <div [innerHTML]=\"aggr.aggrValue\">\n </div>\n </div>\n </div>\n </div>\n </td>\n <td *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n </tr>\n </ng-template>\n\n <!-- Footer for Empty Message columns on Grid -->\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td [attr.colspan]=\"selectedColumns?.length + 1\">No records found.</td>\n </tr>\n </ng-template>\n</p-table>\n",
|
|
5844
5847
|
styles: [".action-btn{margin-right:10px;cursor:pointer}:host ::ng-deep .two-action-btn{flex:0!important;flex-basis:6%!important}:host ::ng-deep .three-action-btn{flex:0!important;flex-basis:8%!important}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .horizontal-scroll .p-datatable{position:relative;width:calc(100vw - 263px);overflow:auto;height:calc(100vh - 134px)}:host ::ng-deep .horizontal-scroll .p-datatable th,:host ::ng-deep .horizontal-scroll .p-datatable td{min-width:150px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:0 1rem!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td span{vertical-align:middle}:host ::ng-deep td[ng-reflect-ng-switch=multi-select] span{overflow:visible!important}:host ::ng-deep td[ng-reflect-ng-switch=dropdown] span{overflow:visible!important}:host ::ng-deep .input-number{border:0;border-radius:2px;padding:5px 0}:host ::ng-deep .input-number input{border:0;padding:0 10px 0 0;outline:none!important;box-shadow:none!important}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:12px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .hide-filter-icon .p-column-filter-menu-button{display:none}.disable-link{color:#e4b7b8;pointer-events:none;text-decoration:underline;opacity:.5}.hyperlink{color:#cc7272;text-decoration:underline;cursor:pointer}.custom-link{color:#205dcf;cursor:pointer;font-size:12px}.setActionColumnWidth{display:flex}.noWrap td span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}.highlighted-row{background-color:#dee2e6!important}td[ng-reflect-ng-switch=AutoComplete] span{overflow:visible!important}.hide-clear-filter-button{display:none!important}#hide-border{border-bottom:0!important}p-celleditor p-inputnumber{border:0}.merge-btn{margin-top:2px;line-height:14px}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
|
|
5845
5848
|
},] }
|
|
5846
5849
|
];
|
|
@@ -7435,8 +7438,8 @@
|
|
|
7435
7438
|
FormComponent.decorators = [
|
|
7436
7439
|
{ type: i0.Component, args: [{
|
|
7437
7440
|
selector: 'se-form',
|
|
7438
|
-
template: "<p-confirmDialog [style]=\"{ width: '50vw' }\" key=\"cancelButton\" ></p-confirmDialog>\n<form *ngIf=\"!isFormHidden && form\">\n <div *ngIf=\"loading\">\n <p-progressSpinner class=\"progress-spinner p-progress-spinner-circle custom-spinner\"></p-progressSpinner>\n </div>\n <div class=\"p-d-flex p-flex-wrap container w-100 my-5\">\n <span [ngClass]=\"{ 'fixed-height': stickyActions }\">\n <div *ngFor=\"let formSection of form.formSections\" [class]=\"!formSection.hidden ? 'card w-100' : ''\">\n <span (click)=\"clickedSection(formSection)\">\n <div *ngIf=\"!formSection ? '' : sectionDisabled(formSection)\">\n <div *ngIf=\"!formSection.hidden\" [class]=\"formSection.class\">\n <p-accordion>\n <p-accordionTab [selected]=\"formSection.expanded === false ? false : true\"\n [disabled]=\"formSection.accordionDisabled\" [ngClass]=\"!formSection.showAccordion ? 'hide-accordian' : ''\">\n <p-header>\n <i [class]=\"formSection.icon\" class=\"p-mr-1 p-pl-2\"></i><span class=\"p-pl-4\">{{ formSection.name\n }}</span>\n </p-header>\n\n <div class=\"p-d-flex p-ai-center p-col\">\n <label *ngIf=\"!formSection.showAccordion\" for=\"name\" class=\"p-mb-0 p-d-flex p-ai-center p-mr-3\">\n <i [class]=\"formSection.icon\" class=\"p-mr-1\"></i>\n <b> {{ formSection.name }} </b>\n </label>\n\n <div\n *ngFor=\"let link of formSection.links\"\n [class]=\"formSection.disabled ? 'disabled-link' : ''\"\n >\n <label\n class=\"p-mr-3\"\n [class]=\"link.name ? 'custom-link' : ''\"\n (click)=\"link.onClick()\"\n >\n {{ link.name }}\n </label>\n </div>\n </div>\n\n <div class=\"p-d-flex p-flex-wrap\">\n <div\n [class]=\"formField.column\n ? 'p-col-' + formField.column + setClassName(formField)\n : form.column\n ? 'p-col-' + form.column + setClassName(formField)\n : 'p-col-12 p-md-3 p-d-flex p-flex-column' + setClassName(formField)\"\n [ngClass]=\"formField.control === 'break_line' ? 'break-line' : ''\"\n *ngFor=\"let formField of formSection.fields; let formFieldIndex = index\"\n >\n <!-- labelControl Hyperlink on Lookup Control Field-->\n <div *ngIf=\"formField.label?.labelControl\">\n <div\n class=\"link-label custom-link p-mt-1\"\n *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target !== '_iframe'\"\n >\n <a\n class=\"pl-2\"\n tabindex=\"-1\"\n (click)=\"formField.onClick ? onClickEvent(formField) : '' \"\n [target]=\"formField.label.labelControl?.hyperlink?.target\"\n [href]=\"formField.label.labelControl?.hyperlink?.link\"\n [title]=\"formField.label.name\"\n >\n {{ formField.label.name }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n <div\n class=\"link-label custom-link p-mt-1\"\n *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target === '_iframe'\"\n >\n <a\n class=\"pl-2\"\n tabindex=\"-1\"\n (click)=\"loadLabelControlIFrame(formField)\"\n [title]=\"formField.label.name\"\n >\n {{ formField.label.name }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n <!-- labelControl on addTextbox -->\n <div\n class=\"link-label custom-link p-mt-1\"\n *ngIf=\"formField.label && formField.label.labelControl && formField.label.labelControl.lookupControl\"\n >\n <a\n tabindex=\"-1\"\n [class]=\"formField.label.disabled ? 'disable-label-control' : 'pl-2'\"\n (click)=\"selectLookupLabel(formField)\"\n [title]=\"formField.label.name\"\n >\n {{ formField.label.name }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n </div>\n <div [ngSwitch]=\"formField.control\">\n\n <!-- Spacer Control -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.SPACER\"\n >\n <span [class]=\"formField.column? 'p-col-' +formField.column : ''\"></span>\n </div>\n </span>\n\n <!-- Input TextArea -->\n <span *ngIf=\"!formField.hidden\">\n\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.TEXTAREA\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <textarea\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n pInputTextarea\n [rows]=\"formField.row ? formField.row : 1 \"\n (change)=\"onChangeEvent(formField)\"\n (click)=\"handleClickEvent(formField)\"\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n [disabled]=\"formField.disabled\"\n [ngStyle]=\"{height: formField.height ? formField.height : ''}\"\n (blur)=\"onFocusOutEvent(formField)\"\n ></textarea>\n </div>\n </span>\n\n <!-- Text Input -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.INPUT\"\n >\n <span\n [class]=\"formField.disabled && !formField.showBottomBorder ? 'disabled-link' : ''\"\n >\n <label\n *ngIf=\"!formField.label.labelControl\"\n [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n (click)=\"formField.label.onClick && formField.label.onClick()\"\n [title]=\"formField.label && typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\"\n >\n {{\n formField.label && typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n <span *ngIf=\"formField.isPassword\"> \n <i *ngIf=\"formField.textType=='password';else hideButton\" class=\"pi pi-eye\" (click)=\"changePasswordType(formField)\"></i>\n <ng-template #hideButton>\n <i class=\"pi pi-eye-slash\" (click)=\"changePasswordType(formField)\"></i>\n </ng-template>\n </span>\n </label>\n </span>\n <input\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\"\n [id]=\"formField.showBottomBorder ? 'remove-boder' : ''\"\n [type]=\"formField.textType ? formField.textType : 'text'\"\n pInputText\n [(ngModel)]=\"\n formField.value &&\n typeOf(formField.value) === 'object'\n ? formField.value.text\n : formField.value\n \"\n (change)=\"onChangeEvent(formField)\"\n [name]=\"formField.field ? formField.field : formField.label\"\n (click)=\"handleClickEvent(formField)\"\n [disabled]=\"formField.disabled\"\n (blur)=\"onFocusOutEvent(formField)\"\n />\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- Number Input -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.NUMERIC\"\n >\n <label\n [class]=\"\n formField.label.onClick ? 'custom-link' : ''\n \"\n (click)=\"\n formField.label.onClick &&\n formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\"\n >\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <!-- for Currency && number && Decimal && Percent -->\n <span\n class=\"input-number\"\n >\n <p-inputNumber\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n (ngModelChange)=\"onChangeEvent(formField)\"\n (click)=\"selectLookupField(formField)\"\n [disabled]=\"formField.disabled\"\n (onBlur)=\"onFocusOutEvent(formField)\"\n [mode]=\"\n formField.format &&\n formField.format.type === 'currency'\n ? 'currency'\n : 'decimal'\n \"\n [currency]=\"\n formField.format &&\n formField.format.type === 'currency' &&\n formField.format.formatParams &&\n formField.format.formatParams.currency\n ? formField.format.formatParams.currency\n : 'USD'\n \"\n [locale]=\"formField.format &&\n formField.format.type === 'currency' &&\n formField.format.formatParams &&\n formField.format.formatParams.locale\n ? formField.format.formatParams.locale\n : 'en-US'\n \"\n [minFractionDigits]=\"\n formField.format &&\n formField.format.formatParams &&\n formField.format.formatParams.digitsInfo\n ? formField.format.formatParams.digitsInfo\n : formField.format &&\n (formField.format.type === 'decimal' || formField.format.type === 'currency')\n ? '2'\n : '0'\n \"\n [suffix]=\"\n formField.format &&\n formField.format.type === 'percent' && !formField?.format?.formatParams?.allowCalculate\n ? '%'\n : ''\n \"\n >\n </p-inputNumber>\n </span>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n <span *ngIf=\"formField.required\"> * </span>\n </div>\n </span>\n\n <!-- Password Input -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.PASSWORD\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <input\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n type=\"password\"\n (click)=\"handleClickEvent(formField)\"\n (change)=\"onChangeEvent(formField)\"\n pInputText\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n (blur)=\"onFocusOutEvent(formField)\"\n />\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n <span *ngIf=\"formField.required\"> * </span>\n </div>\n </span>\n\n <!-- Checkbox -->\n <span [class]=\"formField.class\" *ngIf=\"!formField.hidden\">\n <div class=\"p-0 p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n <label *ngIf=\"!formField.label.labelControl\"\n [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \" [title]=\"formField.label &&\n typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\">{{\n formField.label &&\n typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <p-checkbox\n class=\"p-d-flex p-ai-center\"\n [binary]=\"true\"\n [name]=\"formField.field\"\n (click)=\"onClickEvent(formField)\"\n (change)=\"onChangeEvent(formField)\"\n [(ngModel)]=\"formField.value\"\n [disabled]=\"formField.disabled\"\n (onChange)=\"onFocusOutEvent(formField)\"\n >\n </p-checkbox>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- Calendar -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n <span\n [class]=\"formField.disabled ? 'disabled-link' : ''\"\n >\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n <p-calendar\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty ' + formField.field\n : 'form-control '+ formField.field\n \"\n [showButtonBar]=\"true\"\n [todayButtonStyleClass]=\"formField.timeOnly ? 'hide-today-btn' : ''\"\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n [disabled]=\"formField.disabled\" hourFormat=\"12\"\n [defaultDate]=\"defaultDate\"\n [stepMinute] = \"formField.minutesInterval ? formField.minutesInterval : 1\"\n [showTime]=\"formField.showTime\"\n (onShow)=\"setCalenderDate(formField)\"\n [timeOnly]=\"formField.timeOnly\"\n [view]=\"formField.monthOnly ? 'month' : 'date' \"\n (click)=\"handleClickEvent(formField)\"\n [dateFormat]=\"formField.format ? formField.format.type : calendarFormat\"\n (ngModelChange)=\"calendarChangeValue(formField)\"\n (onInput)=\"calenderInputValue(formField)\"\n (onClose)=\"onFocusOutEvent(formField)\">\n </p-calendar>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- Dropdown -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.DROPDOWN\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField && !formField.label?.labelControl\">*</span>\n </label>\n <p-dropdown\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n autocomplete=\"off\"\n [styleClass]='formField.field'\n [placeholder]=\"formField.value\"\n [options]=\"formField.data\"\n [filter]=\"formField.allowSearch\"\n [(ngModel)]=\"formField.value\"\n [optionLabel]=\"formField.optionLabel\"\n [optionValue]=\"formField.optionValue\"\n [name]=\"formField.field\"\n (keyup.Tab)=\"tabFocusEvent(formField)\"\n (click)=\"clearDropdownValue(formField)\"\n [disabled]=\"formField.disabled\"\n (onBlur)=\"onFocusOutEvent(formField)\"\n [showClear]=\"formField.value ? true : false\"\n (onChange)=\"onClearValue(formField, $event)\"\n [autoDisplayFirst]=\"formField.value > 0 ? true : false\"\n >\n </p-dropdown>\n <span\n *ngIf=\"\n !formField?.isValid &&\n !formField.hidden\n \"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- AutoComplete Search -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.AUTOCOMPLETE\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n (click)=\"formField.label.onClick && formField.label.onClick()\" [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <span class=\"p-fluid\">\n <p-autoComplete\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [suggestions]=\"formField.data\"\n [(ngModel)]=\"formField.value\"\n (onChange)=\"onChangeEvent(formField)\"\n (click)=\"handleClickEvent(formField)\"\n (completeMethod)=\"autoSearch($event, formField)\"\n [dropdown]=\"formField.showOption\"\n [field]=\"formField.displayField\"\n [name]=\"formField.label\"\n [multiple]=\"true\"\n [disabled]=\"formField.disabled\"\n (onBlur)=\"onFocusOutEvent(formField)\">\n </p-autoComplete>\n </span>\n </div>\n </span>\n\n <!-- Multi-select -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <p-multiSelect\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [(ngModel)]=\"formField.value\"\n [options]=\"formField.data\"\n optionLabel=\"label\"\n optionValue=\"value\" [appendTo]=\"'body'\"\n [name]=\"formField.field\"\n (onChange)=\"onChangeEvent(formField)\"\n (click)=\"formField.onClick ? formField.onClick() : ''\"\n [disabled]=\"formField.disabled\" (blur)=\"onFocusOutEvent(formField)\">\n </p-multiSelect>\n </div>\n </span>\n\n <!-- Hyperlink-->\n <span *ngIf=\"!formField.hidden\">\n <div\n [class]=\"\n formField.disabled\n ? 'disabled-link'\n : 'link-label custom-link'\n \"\n [title]=\"formField.label\"\n *ngSwitchCase=\"dynamicCase.HYPERLINK\"\n >\n <div\n *ngIf=\"\n formField.hyperlink &&\n formField.hyperlink.component\n \"\n (click)=\"hyperlinkDialog(formField)\"\n >\n {{ formField.label }}\n </div>\n <div\n [class]=\"\n formField.disabled\n ? 'disabled-link'\n : 'link-label custom-link'\n \"\n *ngIf=\"\n formField.hyperlink &&\n formField.hyperlink.target !== '_iframe' &&\n !formField.hyperlink.component\n \"\n >\n <a\n class=\"pl-2\"\n tabindex=\"-1\"\n [href]=\"sanitizeUrl(formField.hyperlink?.link)\"\n [target]=\"formField.hyperlink?.target\"\n (click)=\"handleClickEvent(formField)\"\n [title]=\"formField.label\"\n >\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n <div\n *ngIf=\"\n formField.hyperlink &&\n formField.hyperlink.target === '_iframe' &&\n !formField.hyperlink.component\n \"\n >\n <a class=\"pl-2\" tabindex=\"-1\" (click)=\"loadIFrame(formField)\">\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n </div>\n </span>\n\n <!-- Lookup Control Field -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.LOOKUP_INPUT\">\n <span\n [class]=\"formField.disabled ? 'disabled-link' : ''\"\n >\n <label\n *ngIf=\"!formField.label.labelControl\"\n [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n (click)=\"formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\">\n {{\n typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n <div class=\"close-icon-wrapper\">\n <input\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n type=\"text\" pInputText [(ngModel)]=\"formField.value && typeOf(formField.value) === 'object'\n ? formField.value.text\n : formField.value\"\n autocomplete=\"off\"\n [id]=\"formField.field\"\n [name]=\"formField.field\"\n (click)=\"selectLookupField(formField)\"\n [disabled]=\"formField.disabled\"\n (keyup.Tab)=\"selectLookupField(formField)\"\n readonly\n (keydown)=\"$event.preventDefault()\"\n />\n <div><button *ngIf=\"formField.value && !formField.disabled\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(formField)\"></button></div>\n </div>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- File Upload Field -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.FILE_UPLOAD\"\n >\n <span\n [class]=\"\n formField.disabled ? 'disabled-link' : ''\n \"\n >\n <label [title]=\"formField.label\">\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n <se-file-upload\n [allowMultiple]=\"formField.selectMultipleFiles\"\n [acceptFileTypes]=\"formField.SetfileTypes\"\n [fields]=\"formField\"\n (fileUrl)=\"setFileUrls($event)\"\n (uploadFileOnReturn)=\"fileOnchangeEvent()\"\n ></se-file-upload>\n <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n formField.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Display Card field -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.CARD\"\n >\n <span\n [class]=\"\n formField.disabled ? 'disabled-link' : ''\n \"\n >\n <label [title]=\"formField.label\">\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n\n <se-card\n [card]=\"formField.card\"\n [setCardData]=\"setCardData\"\n (selectedCard)=\"selectedCardClickEvent($event)\"\n ></se-card>\n\n <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n formField.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Note Detail Field -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.NOTE_FIELD\">\n <div [class]=\"formField.disabled\n ? 'disabled-link'\n : 'link-label custom-link'\n \"\n >\n <span class=\"pl-2\" (click)=\"\n !formField.disabled\n ? handleNoteFieldDialog(formField)\n : ''\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">{{formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label}}\n <span *ngIf=\"formField.requiredField\">*</span>\n </span>\n </div>\n </div>\n </span>\n\n <!-- Dynamic Component Container-->\n <span *ngIf=\"!formField.hidden\">\n <div id=\"{{formSection.name}}-{{formFieldIndex}}\"\n #dynamicComponentContainer\n *ngSwitchCase=\"dynamicCase.COMPONENT\"\n ></div>\n </span>\n\n <!-- Header component-->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.SECTION_HEADER\">\n <label [class]=\"formField.class\">\n <b> {{ formField.label }} </b>\n </label>\n </div>\n </span>\n\n <!-- Add OnClick Button -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.ADD_BUTTON\">\n <button\n pButton\n type=\"button\"\n [icon]=\"formField.icon\"\n [label]=\"formField.label\"\n [disabled]=\"formField.disabled\"\n [ngStyle]=\"{background: formField.color ? formField.color : ''}\"\n (click)=\"onClickEvent(formField)\"\n ></button>\n </div>\n </span>\n <!-- Add Generate Report Button -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.REPORT\"> \n <se-generate-report-btn [repId]=\"formField.reportId\" [params]=\"formField.params\" [showDialog]=\"formField.showDialog\"></se-generate-report-btn>\n </div>\n </span>\n \n\n <!-- Add Input Switch -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.SWITCH\">\n <div>\n <label [title]=\"formField.label\">\n {{ formField.label }}\n </label>\n </div>\n <p-inputSwitch\n [name]=\"formField.label ? formField.label: 'switch'\"\n [(ngModel)]=\"formField.value\"\n [disabled]=\"formField.disabled\"\n (click)=\"onClickEvent(formField)\"\n ></p-inputSwitch>\n </div>\n </span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n </div>\n </div>\n </span>\n\n </div>\n </span>\n\n <!-- save and close buttons -->\n <div\n class=\"p-col-12 p-d-flex p-jc-end\"\n [ngClass]=\"{ sticky: stickyActions }\"\n >\n <!-- save button -->\n <button\n *ngIf=\"!hideSaveButton\"\n [disabled]=\"isFormDisabled\"\n pButton\n type=\"button\"\n icon=\"pi pi-check\"\n label=\"Save\"\n class=\"p-button-success\"\n (click)=\"onSaveForm()\"\n ></button>\n\n <!-- close button -->\n <button\n *ngIf=\"!hideCancelButton\"\n [disabled]=\"isFormDisabled\"\n (click)=\"onCancelForm()\"\n pButton type=\"button\"\n icon=\"pi pi-times\"\n label=\"Cancel\"\n class=\"p-button-danger p-ml-3\"\n ></button>\n\n <!-- dynamic buttons -->\n <button *ngFor=\"let button of formButtons\" \n pButton type=\"button\"\n [label]=\"button.label\"\n [icon]=\"button.icon ? button.icon : ''\"\n class=\"p-button-info p-ml-3\"\n (click)=\"onNewButtonClick(button)\"\n >\n </button>\n </div>\n </div>\n</form>\n",
|
|
7439
|
-
styles: ["*{font-family:\"Lato\",sans-serif}.fa-solid,.fa-light,.fa-regular,.fa-thin,.fa-duotone{font-family:\"Font Awesome 6 Pro\"!important}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.break-line{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .toast-error{background:black!important}:host ::ng-deep .p-float-label label{margin-top:-.5rem!important}:host ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:0}:host ::ng-deep .hide-accordian .p-accordion-header{display:none}:host ::ng-deep .input-number{border:0;border-radius:2px}:host ::ng-deep .input-number input{border:0;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:10.8px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .close-icon-wrapper{position:relative}:host ::ng-deep div[ng-reflect-ng-switch=lookup_input] span .close-icon-wrapper input{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;cursor:pointer}:host ::ng-deep .hide-today-btn{visibility:hidden}label{margin:0 0 5px}span,textarea{width:100%}.error{color:red}.link-label{display:flex;align-items:center;height:39px;margin-top:22px}.link-label a{color:#4e87f1;cursor:pointer;font-size:12px;text-decoration:none}.custom-link{color:#4e87f1;cursor:pointer;font-size:12px}.label-custom-link{font-size:12px}.hidden{display:none!important}.sticky{width:calc(100% - 260px);position:fixed;bottom:0;right:0}.fixed-height{height:calc(100vh - 65px)}.disabled-link label{pointer-events:none;opacity:.9}.disabled-link a,.disabled-link span,.disabled-link div{pointer-events:none;opacity:.5}.disabled-link div{color:#636363}.disable-label-control{pointer-events:none}#remove-boder{border:none!important}input[type=text]{cursor:pointer}.progress-spinner{position:fixed;z-index:999;height:60px;width:60px;overflow:show;margin:auto;top:0;left:0;bottom:0;right:0}.progress-spinner:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000026}.p-dialog{position:absolute!important}:host ::ng-deep .custom-spinner .p-progress-spinner-circle{stroke:#000!important}:host ::ng-deep .p-progress-spinner{height:60px!important;width:60px!important}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
|
|
7441
|
+
template: "<p-confirmDialog [style]=\"{ width: '50vw' }\" key=\"cancelButton\" ></p-confirmDialog>\n<form *ngIf=\"!isFormHidden && form\">\n <div *ngIf=\"loading\">\n <p-progressSpinner class=\"progress-spinner p-progress-spinner-circle custom-spinner\"></p-progressSpinner>\n </div>\n <div class=\"p-d-flex p-flex-wrap container w-100 my-5\">\n <span [ngClass]=\"{ 'fixed-height': stickyActions }\">\n <div *ngFor=\"let formSection of form.formSections\" [class]=\"!formSection.hidden ? 'card w-100' : ''\">\n <span (click)=\"clickedSection(formSection)\">\n <div *ngIf=\"!formSection ? '' : sectionDisabled(formSection)\">\n <div *ngIf=\"!formSection.hidden\" [class]=\"formSection.class\">\n <p-accordion>\n <p-accordionTab [selected]=\"formSection.expanded === false ? false : true\"\n [disabled]=\"formSection.accordionDisabled\" [ngClass]=\"!formSection.showAccordion ? 'hide-accordian' : ''\">\n <p-header>\n <i [class]=\"formSection.icon\" class=\"p-mr-1 p-pl-2\"></i><span class=\"p-pl-4\">{{ formSection.name\n }}</span>\n </p-header>\n\n <div class=\"p-d-flex p-ai-center p-col\">\n <label *ngIf=\"!formSection.showAccordion\" for=\"name\" class=\"p-mb-0 p-d-flex p-ai-center p-mr-3\">\n <i [class]=\"formSection.icon\" class=\"p-mr-1\"></i>\n <b> {{ formSection.name }} </b>\n </label>\n\n <div\n *ngFor=\"let link of formSection.links\"\n [class]=\"formSection.disabled ? 'disabled-link' : ''\"\n >\n <label\n class=\"p-mr-3\"\n [class]=\"link.name ? 'custom-link' : ''\"\n (click)=\"link.onClick()\"\n >\n {{ link.name }}\n </label>\n </div>\n </div>\n\n <div class=\"p-d-flex p-flex-wrap\">\n <div\n [class]=\"formField.column\n ? 'p-col-' + formField.column + setClassName(formField)\n : form.column\n ? 'p-col-' + form.column + setClassName(formField)\n : 'p-col-12 p-md-3 p-d-flex p-flex-column' + setClassName(formField)\"\n [ngClass]=\"formField.control === 'break_line' ? 'break-line' : ''\"\n *ngFor=\"let formField of formSection.fields; let formFieldIndex = index\"\n >\n <!-- labelControl Hyperlink on Lookup Control Field-->\n <div *ngIf=\"formField.label?.labelControl\">\n <div\n class=\"link-label custom-link p-mt-1\"\n *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target !== '_iframe'\"\n >\n <a\n class=\"pl-2\"\n tabindex=\"-1\"\n (click)=\"formField.onClick ? onClickEvent(formField) : '' \"\n [target]=\"formField.label.labelControl?.hyperlink?.target\"\n [href]=\"formField.label.labelControl?.hyperlink?.link\"\n [title]=\"formField.label.name\"\n >\n {{ formField.label.name }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n <div\n class=\"link-label custom-link p-mt-1\"\n *ngIf=\"formField.label?.labelControl.hyperlink && formField.label?.labelControl.hyperlink.target === '_iframe'\"\n >\n <a\n class=\"pl-2\"\n tabindex=\"-1\"\n (click)=\"loadLabelControlIFrame(formField)\"\n [title]=\"formField.label.name\"\n >\n {{ formField.label.name }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n <!-- labelControl on addTextbox -->\n <div\n class=\"link-label custom-link p-mt-1\"\n *ngIf=\"formField.label && formField.label.labelControl && formField.label.labelControl.lookupControl\"\n >\n <a\n tabindex=\"-1\"\n [class]=\"formField.label.disabled ? 'disable-label-control' : 'pl-2'\"\n (click)=\"selectLookupLabel(formField)\"\n [title]=\"formField.label.name\"\n >\n {{ formField.label.name }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n </div>\n <div [ngSwitch]=\"formField.control\">\n\n <!-- Spacer Control -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.SPACER\"\n >\n <span [class]=\"formField.column? 'p-col-' +formField.column : ''\"></span>\n </div>\n </span>\n\n <!-- Input TextArea -->\n <span *ngIf=\"!formField.hidden\">\n\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.TEXTAREA\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <textarea\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n pInputTextarea\n [rows]=\"formField.row ? formField.row : 1 \"\n (change)=\"onChangeEvent(formField)\"\n (click)=\"handleClickEvent(formField)\"\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n [disabled]=\"formField.disabled\"\n [ngStyle]=\"{height: formField.height ? formField.height : ''}\"\n (blur)=\"onFocusOutEvent(formField)\"\n ></textarea>\n </div>\n </span>\n\n <!-- Text Input -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.INPUT\"\n >\n <span\n [class]=\"formField.disabled && !formField.showBottomBorder ? 'disabled-link' : ''\"\n >\n <label\n *ngIf=\"!formField.label.labelControl\"\n [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n (click)=\"formField.label.onClick && formField.label.onClick()\"\n [title]=\"formField.label && typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\"\n >\n {{\n formField.label && typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n <span *ngIf=\"formField.isPassword\"> \n <i *ngIf=\"formField.textType=='password';else hideButton\" class=\"pi pi-eye\" (click)=\"changePasswordType(formField)\"></i>\n <ng-template #hideButton>\n <i class=\"pi pi-eye-slash\" (click)=\"changePasswordType(formField)\"></i>\n </ng-template>\n </span>\n </label>\n </span>\n <input\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\"\n [id]=\"formField.showBottomBorder ? 'remove-boder' : ''\"\n [type]=\"formField.textType ? formField.textType : 'text'\"\n pInputText\n [(ngModel)]=\"\n formField.value &&\n typeOf(formField.value) === 'object'\n ? formField.value.text\n : formField.value\n \"\n (change)=\"onChangeEvent(formField)\"\n [name]=\"formField.field ? formField.field : formField.label\"\n (click)=\"handleClickEvent(formField)\"\n [disabled]=\"formField.disabled\"\n (blur)=\"onFocusOutEvent(formField)\"\n />\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- Number Input -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.NUMERIC\"\n >\n <label\n [class]=\"\n formField.label.onClick ? 'custom-link' : ''\n \"\n (click)=\"\n formField.label.onClick &&\n formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\"\n >\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <!-- for Currency && number && Decimal && Percent -->\n <span\n class=\"input-number\"\n >\n <p-inputNumber\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n (ngModelChange)=\"onChangeEvent(formField)\"\n (click)=\"selectLookupField(formField)\"\n [disabled]=\"formField.disabled\"\n (onBlur)=\"onFocusOutEvent(formField)\"\n [mode]=\"\n formField.format &&\n formField.format.type === 'currency'\n ? 'currency'\n : 'decimal'\n \"\n [currency]=\"\n formField.format &&\n formField.format.type === 'currency' &&\n formField.format.formatParams &&\n formField.format.formatParams.currency\n ? formField.format.formatParams.currency\n : 'USD'\n \"\n [locale]=\"formField.format &&\n formField.format.type === 'currency' &&\n formField.format.formatParams &&\n formField.format.formatParams.locale\n ? formField.format.formatParams.locale\n : 'en-US'\n \"\n [minFractionDigits]=\"\n formField.format &&\n formField.format.formatParams &&\n formField.format.formatParams.digitsInfo\n ? formField.format.formatParams.digitsInfo\n : formField.format &&\n (formField.format.type === 'decimal' || formField.format.type === 'currency')\n ? '2'\n : '0'\n \"\n [suffix]=\"\n formField.format &&\n formField.format.type === 'percent' && !formField?.format?.formatParams?.allowCalculate\n ? '%'\n : ''\n \"\n >\n </p-inputNumber>\n </span>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n <span *ngIf=\"formField.required\"> * </span>\n </div>\n </span>\n\n <!-- Password Input -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.PASSWORD\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <input\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n type=\"password\"\n (click)=\"handleClickEvent(formField)\"\n (change)=\"onChangeEvent(formField)\"\n pInputText\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n (blur)=\"onFocusOutEvent(formField)\"\n />\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n <span *ngIf=\"formField.required\"> * </span>\n </div>\n </span>\n\n <!-- Checkbox -->\n <span [class]=\"formField.class\" *ngIf=\"!formField.hidden\">\n <div class=\"p-0 p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n <label *ngIf=\"!formField.label.labelControl\"\n [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \" [title]=\"formField.label &&\n typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\">{{\n formField.label &&\n typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <p-checkbox\n class=\"p-d-flex p-ai-center\"\n [binary]=\"true\"\n [name]=\"formField.field\"\n (click)=\"onClickEvent(formField)\"\n (change)=\"onChangeEvent(formField)\"\n [(ngModel)]=\"formField.value\"\n [disabled]=\"formField.disabled\"\n (onChange)=\"onFocusOutEvent(formField)\"\n >\n </p-checkbox>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- Calendar -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n <span\n [class]=\"formField.disabled ? 'disabled-link' : ''\"\n >\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n <p-calendar\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty ' + formField.field\n : 'form-control '+ formField.field\n \"\n [showButtonBar]=\"true\"\n [todayButtonStyleClass]=\"formField.timeOnly ? 'hide-today-btn' : ''\"\n [(ngModel)]=\"formField.value\"\n [name]=\"formField.field\"\n [disabled]=\"formField.disabled\" hourFormat=\"12\"\n [defaultDate]=\"defaultDate\"\n [stepMinute] = \"formField.minutesInterval ? formField.minutesInterval : 1\"\n [showTime]=\"formField.showTime\"\n (onShow)=\"setCalenderDate(formField)\"\n [timeOnly]=\"formField.timeOnly\"\n [view]=\"formField.monthOnly ? 'month' : 'date' \"\n (click)=\"handleClickEvent(formField)\"\n [dateFormat]=\"formField.format ? formField.format : calendarFormat\"\n (ngModelChange)=\"calendarChangeValue(formField)\"\n (onInput)=\"calenderInputValue(formField)\"\n (onClose)=\"onFocusOutEvent(formField)\">\n </p-calendar>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- Dropdown -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.DROPDOWN\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField && !formField.label?.labelControl\">*</span>\n </label>\n <p-dropdown\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n autocomplete=\"off\"\n [styleClass]='formField.field'\n [placeholder]=\"formField.value\"\n [options]=\"formField.data\"\n [filter]=\"formField.allowSearch\"\n [(ngModel)]=\"formField.value\"\n [optionLabel]=\"formField.optionLabel\"\n [optionValue]=\"formField.optionValue\"\n [name]=\"formField.field\"\n (keyup.Tab)=\"tabFocusEvent(formField)\"\n (click)=\"clearDropdownValue(formField)\"\n [disabled]=\"formField.disabled\"\n (onBlur)=\"onFocusOutEvent(formField)\"\n [showClear]=\"formField.value ? true : false\"\n (onChange)=\"onClearValue(formField, $event)\"\n [autoDisplayFirst]=\"formField.value > 0 ? true : false\"\n >\n </p-dropdown>\n <span\n *ngIf=\"\n !formField?.isValid &&\n !formField.hidden\n \"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- AutoComplete Search -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.AUTOCOMPLETE\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n (click)=\"formField.label.onClick && formField.label.onClick()\" [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <span class=\"p-fluid\">\n <p-autoComplete\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [suggestions]=\"formField.data\"\n [(ngModel)]=\"formField.value\"\n (onChange)=\"onChangeEvent(formField)\"\n (click)=\"handleClickEvent(formField)\"\n (completeMethod)=\"autoSearch($event, formField)\"\n [dropdown]=\"formField.showOption\"\n [field]=\"formField.displayField\"\n [name]=\"formField.label\"\n [multiple]=\"true\"\n [disabled]=\"formField.disabled\"\n (onBlur)=\"onFocusOutEvent(formField)\">\n </p-autoComplete>\n </span>\n </div>\n </span>\n\n <!-- Multi-select -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n <label [class]=\"formField.label.onClick ? 'custom-link' : ''\" (click)=\"\n formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"formField.label.onClick\n ? formField.label.name\n : formField.label\">\n {{\n formField.label.onClick\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n <p-multiSelect\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n [(ngModel)]=\"formField.value\"\n [options]=\"formField.data\"\n optionLabel=\"label\"\n optionValue=\"value\" [appendTo]=\"'body'\"\n [name]=\"formField.field\"\n (onChange)=\"onChangeEvent(formField)\"\n (click)=\"formField.onClick ? formField.onClick() : ''\"\n [disabled]=\"formField.disabled\" (blur)=\"onFocusOutEvent(formField)\">\n </p-multiSelect>\n </div>\n </span>\n\n <!-- Hyperlink-->\n <span *ngIf=\"!formField.hidden\">\n <div\n [class]=\"\n formField.disabled\n ? 'disabled-link'\n : 'link-label custom-link'\n \"\n [title]=\"formField.label\"\n *ngSwitchCase=\"dynamicCase.HYPERLINK\"\n >\n <div\n *ngIf=\"\n formField.hyperlink &&\n formField.hyperlink.component\n \"\n (click)=\"hyperlinkDialog(formField)\"\n >\n {{ formField.label }}\n </div>\n <div\n [class]=\"\n formField.disabled\n ? 'disabled-link'\n : 'link-label custom-link'\n \"\n *ngIf=\"\n formField.hyperlink &&\n formField.hyperlink.target !== '_iframe' &&\n !formField.hyperlink.component\n \"\n >\n <a\n class=\"pl-2\"\n tabindex=\"-1\"\n [href]=\"sanitizeUrl(formField.hyperlink?.link)\"\n [target]=\"formField.hyperlink?.target\"\n (click)=\"handleClickEvent(formField)\"\n [title]=\"formField.label\"\n >\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n <div\n *ngIf=\"\n formField.hyperlink &&\n formField.hyperlink.target === '_iframe' &&\n !formField.hyperlink.component\n \"\n >\n <a class=\"pl-2\" tabindex=\"-1\" (click)=\"loadIFrame(formField)\">\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </a>\n </div>\n </div>\n </span>\n\n <!-- Lookup Control Field -->\n <span *ngIf=\"!formField.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"dynamicCase.LOOKUP_INPUT\">\n <span\n [class]=\"formField.disabled ? 'disabled-link' : ''\"\n >\n <label\n *ngIf=\"!formField.label.labelControl\"\n [class]=\"formField.label.onClick ? 'custom-link' : ''\"\n (click)=\"formField.label.onClick && formField.label.onClick()\n \"\n [title]=\"typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\">\n {{\n typeOf(formField.label) === 'object'\n ? formField.label.name\n : formField.label\n }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n <div class=\"close-icon-wrapper\">\n <input\n [class]=\"\n formField.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \"\n type=\"text\" pInputText [(ngModel)]=\"formField.value && typeOf(formField.value) === 'object'\n ? formField.value.text\n : formField.value\"\n autocomplete=\"off\"\n [id]=\"formField.field\"\n [name]=\"formField.field\"\n (click)=\"selectLookupField(formField)\"\n [disabled]=\"formField.disabled\"\n (keyup.Tab)=\"selectLookupField(formField)\"\n readonly\n (keydown)=\"$event.preventDefault()\"\n />\n <div><button *ngIf=\"formField.value && !formField.disabled\" icon=\"pi pi-times\" pButton type=\"button\" (click)=\"lookupClearValue(formField)\"></button></div>\n </div>\n <span\n *ngIf=\"!formField?.isValid\"\n class=\"error\"\n >{{ formField.errorMessage }}</span\n >\n </div>\n </span>\n\n <!-- File Upload Field -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.FILE_UPLOAD\"\n >\n <span\n [class]=\"\n formField.disabled ? 'disabled-link' : ''\n \"\n >\n <label [title]=\"formField.label\">\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n <se-file-upload\n [allowMultiple]=\"formField.selectMultipleFiles\"\n [acceptFileTypes]=\"formField.SetfileTypes\"\n [fields]=\"formField\"\n (fileUrl)=\"setFileUrls($event)\"\n (uploadFileOnReturn)=\"fileOnchangeEvent()\"\n ></se-file-upload>\n <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n formField.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Display Card field -->\n <span *ngIf=\"!formField.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"dynamicCase.CARD\"\n >\n <span\n [class]=\"\n formField.disabled ? 'disabled-link' : ''\n \"\n >\n <label [title]=\"formField.label\">\n {{ formField.label }}\n <span *ngIf=\"formField.requiredField\">*</span>\n </label>\n </span>\n\n <se-card\n [card]=\"formField.card\"\n [setCardData]=\"setCardData\"\n (selectedCard)=\"selectedCardClickEvent($event)\"\n ></se-card>\n\n <span *ngIf=\"showfileUploadError\" class=\"error\">{{\n formField.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Note Detail Field -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.NOTE_FIELD\">\n <div [class]=\"formField.disabled\n ? 'disabled-link'\n : 'link-label custom-link'\n \"\n >\n <span class=\"pl-2\" (click)=\"\n !formField.disabled\n ? handleNoteFieldDialog(formField)\n : ''\n \"\n [title]=\"formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label\">{{formField.label.labelControl\n ? ''\n : formField.label.onClick\n ? formField.label.name\n : formField.label}}\n <span *ngIf=\"formField.requiredField\">*</span>\n </span>\n </div>\n </div>\n </span>\n\n <!-- Dynamic Component Container-->\n <span *ngIf=\"!formField.hidden\">\n <div id=\"{{formSection.name}}-{{formFieldIndex}}\"\n #dynamicComponentContainer\n *ngSwitchCase=\"dynamicCase.COMPONENT\"\n ></div>\n </span>\n\n <!-- Header component-->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.SECTION_HEADER\">\n <label [class]=\"formField.class\">\n <b> {{ formField.label }} </b>\n </label>\n </div>\n </span>\n\n <!-- Add OnClick Button -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.ADD_BUTTON\">\n <button\n pButton\n type=\"button\"\n [icon]=\"formField.icon\"\n [label]=\"formField.label\"\n [disabled]=\"formField.disabled\"\n [ngStyle]=\"{background: formField.color ? formField.color : ''}\"\n (click)=\"onClickEvent(formField)\"\n ></button>\n </div>\n </span>\n <!-- Add Generate Report Button -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.REPORT\"> \n <se-generate-report-btn [repId]=\"formField.reportId\" [params]=\"formField.params\" [showDialog]=\"formField.showDialog\"></se-generate-report-btn>\n </div>\n </span>\n \n\n <!-- Add Input Switch -->\n <span *ngIf=\"!formField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.SWITCH\">\n <div>\n <label [title]=\"formField.label\">\n {{ formField.label }}\n </label>\n </div>\n <p-inputSwitch\n [name]=\"formField.label ? formField.label: 'switch'\"\n [(ngModel)]=\"formField.value\"\n [disabled]=\"formField.disabled\"\n (click)=\"onClickEvent(formField)\"\n ></p-inputSwitch>\n </div>\n </span>\n </div>\n </div>\n </div>\n </p-accordionTab>\n </p-accordion>\n </div>\n </div>\n </span>\n\n </div>\n </span>\n\n <!-- save and close buttons -->\n <div\n class=\"p-col-12 p-d-flex p-jc-end\"\n [ngClass]=\"{ sticky: stickyActions }\"\n >\n <!-- save button -->\n <button\n *ngIf=\"!hideSaveButton\"\n [disabled]=\"isFormDisabled\"\n pButton\n type=\"button\"\n icon=\"pi pi-check\"\n label=\"Save\"\n class=\"p-button-success\"\n (click)=\"onSaveForm()\"\n ></button>\n\n <!-- close button -->\n <button\n *ngIf=\"!hideCancelButton\"\n [disabled]=\"isFormDisabled\"\n (click)=\"onCancelForm()\"\n pButton type=\"button\"\n icon=\"pi pi-times\"\n label=\"Cancel\"\n class=\"p-button-danger p-ml-3\"\n ></button>\n\n <!-- dynamic buttons -->\n <button *ngFor=\"let button of formButtons\" \n pButton type=\"button\"\n [label]=\"button.label\"\n [icon]=\"button.icon ? button.icon : ''\"\n class=\"p-button-info p-ml-3\"\n (click)=\"onNewButtonClick(button)\"\n >\n </button>\n </div>\n </div>\n</form>\n",
|
|
7442
|
+
styles: ["*{font-family:\"Lato\",sans-serif}.fa-solid,.fa-light,.fa-regular,.fa-thin,.fa-duotone{font-family:\"Font Awesome 6 Pro\"!important}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.break-line{width:100%}:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .toast-error{background:black!important}:host ::ng-deep .p-float-label label{margin-top:-.5rem!important}:host ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:0}:host ::ng-deep .hide-accordian .p-accordion-header{display:none}:host ::ng-deep .input-number{border:0;border-radius:2px}:host ::ng-deep .input-number input{border:0;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:10.8px;border:0;background-color:#eee}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .close-icon-wrapper{position:relative}:host ::ng-deep div[ng-reflect-ng-switch=lookup_input] span .close-icon-wrapper input{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;text-overflow:ellipsis;cursor:pointer}:host ::ng-deep .hide-today-btn{visibility:hidden}label{margin:0 0 5px}span,textarea{width:100%}.error{color:red}.link-label{display:flex;align-items:center;height:39px;margin-top:22px}.link-label a{color:#4e87f1;cursor:pointer;font-size:12px;text-decoration:none}.custom-link{color:#4e87f1;cursor:pointer;font-size:12px}.label-custom-link{font-size:12px}.hidden{display:none!important}.sticky{width:calc(100% - 260px);position:fixed;bottom:0;right:0}.fixed-height{height:calc(100vh - 65px)}.disabled-link label{pointer-events:none;opacity:.9}.disabled-link a,.disabled-link span,.disabled-link div{pointer-events:none;opacity:.5}.disabled-link div{color:#636363}.disable-label-control{pointer-events:none}#remove-boder{border:none!important}input[type=text]{cursor:pointer}.progress-spinner{position:fixed;z-index:999;height:60px;width:60px;overflow:show;margin:auto;top:0;left:0;bottom:0;right:0}.show-today-btn{background:rgba(33,150,243,.04);color:#2196f3;border-color:transparent}.progress-spinner:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000026}.p-dialog{position:absolute!important}:host ::ng-deep .custom-spinner .p-progress-spinner-circle{stroke:#000!important}:host ::ng-deep .p-progress-spinner{height:60px!important;width:60px!important}.close-icon-wrapper{position:relative}.close-icon-wrapper input{width:100%}.close-icon-wrapper button{position:absolute;right:5px;top:6px;width:25px;height:25px;background:unset;color:#777;border:0}\n"]
|
|
7440
7443
|
},] }
|
|
7441
7444
|
];
|
|
7442
7445
|
/** @nocollapse */
|
|
@@ -8107,7 +8110,7 @@
|
|
|
8107
8110
|
HeaderComponent.decorators = [
|
|
8108
8111
|
{ type: i0.Component, args: [{
|
|
8109
8112
|
selector: 'se-header',
|
|
8110
|
-
template: "<div *ngIf=\"!isHeaderHidden && headers\" class=\"card p-sticky p-m-2\">\n <div class=\"header-list p-p-1 p-d-flex\">\n <div\n [class]=\"'p-md-' + headerField.column + ' p-sm-6 p-col-12 p-py-0'\"\n class=\"header-list-item p-jc-center\"\n *ngFor=\"let headerField of headers.fields\"\n >\n <div [ngSwitch]=\"headerField.control\">\n <!-- For Dropdown -->\n <span *ngIf=\"!headerField.hidden\">\n <div\n class=\"p-d-flex p-flex-wrap p-jc-center p-ai-center\"\n *ngSwitchCase=\"dynamicCase.DROPDOWN\"\n >\n <b\n ><label for=\"\">{{ headerField.label }}</label></b\n >\n <p-dropdown\n [placeholder]=\"headerField.label\"\n [options]=\"headerField.data\"\n [(ngModel)]=\"headerField.value\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n >\n </p-dropdown>\n </div>\n </span>\n \n <!-- For label -->\n <span *ngIf=\"!headerField.hidden\">\n <div\n class=\"p-d-flex p-flex-wrap p-jc-center p-ai-center\"\n *ngSwitchCase=\"dynamicCase.LABEL\"\n >\n <b\n ><label for=\"\">{{ headerField.label }}</label></b\n >\n <!-- for value -->\n <Span *ngIf=\"!headerField.format\">\n <label for=\"\">{{ headerField.value }}</label> \n </Span>\n\n <!-- for currency -->\n <span\n *ngIf=\"\n headerField.format && headerField.format.type === 'currency'\n \"\n >\n <label>{{\n headerField.value\n | currency\n : (headerField.format.formatParams &&\n headerField.format.formatParams.currency\n ? headerField.format.formatParams.currency\n : 'USD')\n }}</label>\n </span>\n\n <!-- for percent -->\n <span *ngIf=\"headerField.format && headerField.format.type === 'percent'\">\n <label >{{ headerField.value }}%</label>\n </span>\n\n <!-- for decimal -->\n <span\n *ngIf=\"\n headerField.format && headerField.format.type === 'decimal'\n \"\n >\n <label>{{\n headerField.value\n | number\n : (headerField.format.formatParams &&\n headerField.format.formatParams.digitsInfo\n ? '2.' +\n headerField.format.formatParams.digitsInfo +\n '-8'\n : '2.2-8')\n }}</label>\n </span>\n </div>\n </span>\n\n <!-- Text Input -->\n <span *ngIf=\"!headerField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.INPUT\">\n <b\n ><label for=\"\">{{ headerField.label }}</label></b\n >\n <input\n class=\"p-mr-2 form-control\"\n type=\"text\"\n pInputText\n [(ngModel)]=\"headerField.value\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n />\n </div>\n </span>\n\n <!-- Number Input -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.NUMERIC\">\n <label>{{ headerField.label }}</label>\n <input\n class=\"flex-grow-1 p-mr-2 form-control\"\n type=\"number\"\n pInputText\n [(ngModel)]=\"headerField.value\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n />\n </div>\n </span>\n\n <!-- Checkbox -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n <label>{{ headerField.label }}</label>\n <p-checkbox\n class=\"p-d-flex p-ai-center\"\n [(ngModel)]=\"headerField.value\"\n binary=\"true\"\n ></p-checkbox>\n </div>\n </span>\n\n <!-- Calendar -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n <label>{{ headerField.label }}</label>\n <p-calendar\n class=\"flex-grow-1 p-mr-2\"\n [placeholder]=\"headerField.label\"\n [showButtonBar]=\"true\"\n [(ngModel)]=\"headerField.value\"\n hourFormat=\"12\"\n dataType=\"string\"\n [timeOnly]=\"headerField.timeOnly\"\n [showTime]=\"headerField.showTime\"\n [dateFormat]=\"headerField.format ? headerField.format.dateType : 'mm/dd/yy'\"\n >\n </p-calendar>\n </div>\n </span>\n\n <!-- Multi-select -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n <label>{{ headerField.label }}</label>\n <p-multiSelect\n [(ngModel)]=\"headerField.value\"\n [options]=\"headerField.data\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n >\n </p-multiSelect>\n </div>\n </span>\n\n <!-- Button -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.BUTTON\">\n <button\n pButton\n pRipple\n type=\"button\"\n label=\"{{ headerField.label }}\"\n class=\"{{ headerField.class }}\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n ></button>\n </div>\n </span>\n </div>\n </div>\n </div>\n</div>\n",
|
|
8113
|
+
template: "<div *ngIf=\"!isHeaderHidden && headers\" class=\"card p-sticky p-m-2\">\n <div class=\"header-list p-p-1 p-d-flex\">\n <div\n [class]=\"'p-md-' + headerField.column + ' p-sm-6 p-col-12 p-py-0'\"\n class=\"header-list-item p-jc-center\"\n *ngFor=\"let headerField of headers.fields\"\n >\n <div [ngSwitch]=\"headerField.control\">\n <!-- For Dropdown -->\n <span *ngIf=\"!headerField.hidden\">\n <div\n class=\"p-d-flex p-flex-wrap p-jc-center p-ai-center\"\n *ngSwitchCase=\"dynamicCase.DROPDOWN\"\n >\n <b\n ><label for=\"\">{{ headerField.label }}</label></b\n >\n <p-dropdown\n [placeholder]=\"headerField.label\"\n [options]=\"headerField.data\"\n [(ngModel)]=\"headerField.value\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n >\n </p-dropdown>\n </div>\n </span>\n \n <!-- For label -->\n <span *ngIf=\"!headerField.hidden\">\n <div\n class=\"p-d-flex p-flex-wrap p-jc-center p-ai-center\"\n *ngSwitchCase=\"dynamicCase.LABEL\"\n >\n <b\n ><label for=\"\">{{ headerField.label }}</label></b\n >\n <!-- for value -->\n <Span *ngIf=\"!headerField.format\">\n <label for=\"\">{{ headerField.value }}</label> \n </Span>\n\n <!-- for currency -->\n <span\n *ngIf=\"\n headerField.format && headerField.format.type === 'currency'\n \"\n >\n <label>{{\n headerField.value\n | currency\n : (headerField.format.formatParams &&\n headerField.format.formatParams.currency\n ? headerField.format.formatParams.currency\n : 'USD')\n }}</label>\n </span>\n\n <!-- for percent -->\n <span *ngIf=\"headerField.format && headerField.format.type === 'percent'\">\n <label >{{ headerField.value }}%</label>\n </span>\n\n <!-- for decimal -->\n <span\n *ngIf=\"\n headerField.format && headerField.format.type === 'decimal'\n \"\n >\n <label>{{\n headerField.value\n | number\n : (headerField.format.formatParams &&\n headerField.format.formatParams.digitsInfo\n ? '2.' +\n headerField.format.formatParams.digitsInfo +\n '-8'\n : '2.2-8')\n }}</label>\n </span>\n </div>\n </span>\n\n <!-- Text Input -->\n <span *ngIf=\"!headerField.hidden\">\n <div *ngSwitchCase=\"dynamicCase.INPUT\">\n <b\n ><label for=\"\">{{ headerField.label }}</label></b\n >\n <input\n class=\"p-mr-2 form-control\"\n type=\"text\"\n pInputText\n [(ngModel)]=\"headerField.value\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n />\n </div>\n </span>\n\n <!-- Number Input -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.NUMERIC\">\n <label>{{ headerField.label }}</label>\n <input\n class=\"flex-grow-1 p-mr-2 form-control\"\n type=\"number\"\n pInputText\n [(ngModel)]=\"headerField.value\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n />\n </div>\n </span>\n\n <!-- Checkbox -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CHECKBOX\">\n <label>{{ headerField.label }}</label>\n <p-checkbox\n class=\"p-d-flex p-ai-center\"\n [(ngModel)]=\"headerField.value\"\n binary=\"true\"\n ></p-checkbox>\n </div>\n </span>\n\n <!-- Calendar -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.CALENDAR\">\n <label>{{ headerField.label }}</label>\n <p-calendar\n class=\"flex-grow-1 p-mr-2\"\n [placeholder]=\"headerField.label\"\n [showButtonBar]=\"true\"\n [showButtonBar]=\"!headerField.timeOnly\"\n [(ngModel)]=\"headerField.value\"\n hourFormat=\"12\"\n dataType=\"string\"\n [timeOnly]=\"headerField.timeOnly\"\n [showTime]=\"headerField.showTime\"\n [dateFormat]=\"headerField.format ? headerField.format.dateType : 'mm/dd/yy'\"\n >\n </p-calendar>\n </div>\n </span>\n\n <!-- Multi-select -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.MULTISELECT\">\n <label>{{ headerField.label }}</label>\n <p-multiSelect\n [(ngModel)]=\"headerField.value\"\n [options]=\"headerField.data\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [appendTo]=\"'body'\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n >\n </p-multiSelect>\n </div>\n </span>\n\n <!-- Button -->\n <span *ngIf=\"!headerField.hidden\">\n <div class=\"p-col-12 p-0\" *ngSwitchCase=\"dynamicCase.BUTTON\">\n <button\n pButton\n pRipple\n type=\"button\"\n label=\"{{ headerField.label }}\"\n class=\"{{ headerField.class }}\"\n (click)=\"headerField.onClick ? headerField.onClick() : ''\"\n ></button>\n </div>\n </span>\n </div>\n </div>\n </div>\n</div>\n",
|
|
8111
8114
|
styles: ["*{font-family:\"Lato\",sans-serif}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.header-list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0 10px}.header-list-item{font-size:16px;display:flex;align-items:center;justify-content:center;margin:0;padding:0 5px;text-align:center;position:relative}.header-list-item:after{content:\"\";border-right:1px solid rgba(0,0,0,.2);width:0px;height:20px;display:block;position:absolute;top:calc(50% - 10px);right:0}.header-list-item:last-child:after{display:none}.header-list-item b{margin-right:15px}.card.p-sticky{position:sticky;z-index:1;top:0;background:#eee}\n"]
|
|
8112
8115
|
},] }
|
|
8113
8116
|
];
|
|
@@ -9249,6 +9252,8 @@
|
|
|
9249
9252
|
this.datePicker.hideOverlay();
|
|
9250
9253
|
var id = document.getElementById(globalFilter.displayText);
|
|
9251
9254
|
id.focus();
|
|
9255
|
+
this.datePicker.overlayVisible = false;
|
|
9256
|
+
this.datePicker.datepickerClick = true;
|
|
9252
9257
|
};
|
|
9253
9258
|
SeGlobalFilterComponent.prototype.filterInput = function () {
|
|
9254
9259
|
this.showInput = !this.showInput;
|
|
@@ -9280,7 +9285,7 @@
|
|
|
9280
9285
|
SeGlobalFilterComponent.decorators = [
|
|
9281
9286
|
{ type: i0.Component, args: [{
|
|
9282
9287
|
selector: 'se-global-filters',
|
|
9283
|
-
template: "<div class=\"p-d-flex p-flex-wrap p-flex-row row\">\n <div\n [class]=\"globalFilter.hidden ? '' : globalFilter.column ? 'p-col-' + globalFilter.column : 'p-col-3'\"\n *ngFor=\"let globalFilter of globalFilters\"\n >\n <div [ngSwitch]=\"globalFilter.type\">\n <!-- Calender control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CALENDAR\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-ai-center\">\n <p-calendar\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText: 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n [placeholder]=\"'Select-Date'\"\n [(ngModel)]=\"globalFilter.value\"\n (keyup.enter)=\"applyFilters()\"\n (onSelect)=\"selectDate(globalFilter, true)\"\n [inputId]=\"globalFilter.field\"\n [dateFormat]=\"calendarFormat\"\n (onClose)=\"onFocusOutEvent(globalFilter)\"\n appendTo=\"body\"\n [showButtonBar]=\"true\"\n [disabled]=\"globalFilter.disabled\"\n (keyup)=\"calendarFocusEvent(globalFilter)\"\n >\n </p-calendar>\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Calender Range -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.CALENDAR_RANGE\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-ai-center\">\n <button\n pButton\n type=\"button\"\n [disabled]=\"globalFilter.disabled\"\n [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n class=\"custom-btn\"\n (click)=\"showPrevious(globalFilter)\"\n label=\"Previous {{\n globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n }} <<\"\n ></button>\n <label class=\"size-10\"\n >\n <span [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"></span>\n <span *ngIf=\"globalFilter.prefix===true || globalFilter.prefix===undefined\">\n {{ globalFilter.labelText ? globalFilter.labelText : '' }}\n </span>\n {{\n startDate\n | date\n : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n }}\n to\n {{\n endDate\n | date\n : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n }}\n <span *ngIf=\"globalFilter.prefix===false\">\n {{ globalFilter.labelText ? globalFilter.labelText : ''}}\n </span></label\n >\n <button\n pButton\n type=\"button\"\n [disabled]=\"globalFilter.disabled\"\n [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n class=\"custom-btn\"\n (click)=\"showNext(globalFilter)\"\n label=\"Next {{\n globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n }} >>\"\n ></button>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Checkbox Control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CHECKBOX\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <p-checkbox\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty': 'p-d-flex p-ai-center'\"\n [binary]=\"true\"\n (keyup.enter)=\"applyFilters()\"\n [(ngModel)]=\"globalFilter.value\"\n [disabled]=\"globalFilter.disabled\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n ></p-checkbox>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Spacer Control -->\n <span *ngIf=\"!globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.SPACER\"\n >\n <span\n [class]=\"\n globalFilter.column\n ? 'p-col-' + globalFilter.column\n : ''\n \"\n ></span>\n </div>\n </span>\n\n <!-- Dropdown Control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DROPDOWN\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <p-dropdown\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"globalFilter.value\"\n [name]=\"globalFilter.displayText\"\n [showClear]=\"true\"\n [styleClass]=\"globalFilter.field\"\n (keyup.Tab)=\"tabFocusEvent(globalFilter)\"\n [placeholder]=\"globalFilter.displayText\"\n [options]=\"globalFilter.data || []\"\n [optionLabel]=\"globalFilter.optionLabel\"\n [optionValue]=\"globalFilter.optionValue\"\n [filter]=\"globalFilter.allowSearch\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n (keyup.enter)=\"applyFilters()\"\n [disabled]=\"globalFilter.disabled\"\n ></p-dropdown>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Input control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.INPUT\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-flex-nowrap align-items-center\">\n <input\n type=\"text\"\n pInputText\n [(ngModel)]=\"globalFilter.value\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1'\"\n (keyup.enter)=\"applyFilters()\"\n (blur)=\"onFocusOutEvent(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n class=\"form-control\"\n />\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- NumericInput control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.NUMERICINPUT\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex flex-nowrap align-items-center\">\n <input\n type=\"number\"\n pInputText\n [(ngModel)]=\"globalFilter.value\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n (keyup.enter)=\"applyFilters()\"\n (blur)=\"onFocusOutEvent(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n class=\"form-control\"\n />\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n \n <!-- Date Range Control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DATE_RANGE\">\n <label for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-ai-center\">\n <p-calendar \n #rangeCalendar\n [showButtonBar]=\"true\"\n todayButtonStyleClass=\"p-d-none\"\n clearButtonStyleClass=\"p-ml-auto\"\n [inputId]=\"globalFilter.displayText\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText : 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n [(ngModel)]=\"globalFilter.value\" \n selectionMode=\"range\" \n appendTo=\"body\"\n (onSelect)=\"selectDate(globalFilter, true)\"\n [dateFormat]=\"calendarFormat\"\n (onClickOutside)=\"setDateRangeFilterValue(globalFilter)\"\n (onBlur)=\"setDateRangeFilterValue(globalFilter)\"\n (keyup)=\"calendarFocusEvent(globalFilter, $event)\"\n (onClearClick)=\"clearDateRangeValue(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n (keyup.enter)=\"applyFilters(true, globalFilter)\"\n ></p-calendar>\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Numeric Range control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.NUMERIC_RANGE\"\n >\n <label for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex\">\n <div class=\"p-d-flex flex-nowrap align-items-center p-mr-2\">\n <p-inputNumber\n [showButtons]=\"false\"\n [(ngModel)]=\"globalFilter.value\"\n [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n (onBlur)=\"setNumericRangeValueFrom(globalFilter)\"\n (keyup.enter)=\"setNumericRangeValueFrom(globalFilter,true)\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 grow-1 input-number'\"\n [disabled]=\"globalFilter.disabled\"\n >\n </p-inputNumber>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n <span class=\"to-numeric\">To</span>\n <div class=\"p-d-flex flex-nowrap align-items-center\">\n <p-inputNumber\n [showButtons]=\"false\"\n [(ngModel)]=\"globalFilter.valueTwo\"\n [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1 input-number'\"\n (onBlur)=\"setNumericRangeValueTwo(globalFilter)\"\n (keyup.enter)=\"setNumericRangeValueTwo(globalFilter,true)\"\n [disabled]=\"globalFilter.disabled\"\n >\n </p-inputNumber>\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- MultiSelect control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.MULTISELECT\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <p-multiSelect\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"globalFilter.value\"\n [options]=\"globalFilter.data\"\n optionLabel=\"label\"\n (keyup.enter)=\"applyFilters()\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n optionValue=\"value\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n [appendTo]=\"'body'\"\n [disabled]=\"globalFilter.disabled\"\n ></p-multiSelect>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Lookup Control Field -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.LOOKUP_INPUT\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <input\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"globalFilter.field\"\n type=\"text\"\n pInputText\n [(ngModel)]=\"globalFilter.value\"\n (blur)=\"onFocusOutEvent(globalFilter)\"\n [name]=\"globalFilter.field\"\n (keyup.enter)=\"applyFilters()\"\n (click)=\"selectLookupField(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n class=\"form-control\"\n />\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n </div>\n </div>\n</div>\n\n<!-- Apply button -->\n\n<button\n*ngIf=\"searchGlobalFilterBtn\"\npButton\ntype=\"button\"\nicon=\"pi pi-search\"\nid=\"globalSearchbtn\"\n(click)=\"applyFilters()\"\nclass=\"p-button-success align-globalFilter-btn p-mb-2\"\n></button>\n\n<!-- Close button -->\n<button\n*ngIf=\"clearGlobalFilterBtn\"\npButton\nid=\"clearGlobalFilterBtn\"\ntype=\"button\"\nicon=\"pi pi-replay\"\n(click)=\"clearFilters()\"\n[class]=\"hideClearFilterBtn ? 'p-button-success p-mb-2 align-globalFilter-btn' : 'hide-Global-clear-filter-button'\"\n></button>\n",
|
|
9288
|
+
template: "<div class=\"p-d-flex p-flex-wrap p-flex-row row\">\n <div\n [class]=\"globalFilter.hidden ? '' : globalFilter.column ? 'p-col-' + globalFilter.column : 'p-col-3'\"\n *ngFor=\"let globalFilter of globalFilters\"\n >\n <div [ngSwitch]=\"globalFilter.type\">\n <!-- Calender control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CALENDAR\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-ai-center\">\n <p-calendar\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText: 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n [placeholder]=\"'Select-Date'\"\n [(ngModel)]=\"globalFilter.value\"\n (keyup.enter)=\"applyFilters()\"\n (onSelect)=\"selectDate(globalFilter, true)\"\n [inputId]=\"globalFilter.field\"\n [dateFormat]=\"calendarFormat\"\n (onClose)=\"onFocusOutEvent(globalFilter)\"\n appendTo=\"body\"\n [showButtonBar]=\"true\"\n [disabled]=\"globalFilter.disabled\"\n (keyup)=\"calendarFocusEvent(globalFilter)\"\n >\n </p-calendar>\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Calender Range -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.CALENDAR_RANGE\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-ai-center\">\n <button\n pButton\n type=\"button\"\n [disabled]=\"globalFilter.disabled\"\n [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n class=\"custom-btn\"\n (click)=\"showPrevious(globalFilter)\"\n label=\"Previous {{\n globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n }} <<\"\n ></button>\n <label class=\"size-10\"\n >\n <span [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"></span>\n <span *ngIf=\"globalFilter.prefix===true || globalFilter.prefix===undefined\">\n {{ globalFilter.labelText ? globalFilter.labelText : '' }}\n </span>\n {{\n startDate\n | date\n : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n }}\n to\n {{\n endDate\n | date\n : (globalFilter.format ? globalFilter.format : 'MM/dd/yyyy')\n }}\n <span *ngIf=\"globalFilter.prefix===false\">\n {{ globalFilter.labelText ? globalFilter.labelText : ''}}\n </span></label\n >\n <button\n pButton\n type=\"button\"\n [disabled]=\"globalFilter.disabled\"\n [ngStyle]=\"{ background: globalFilter.color ? globalFilter.color : ''}\"\n class=\"custom-btn\"\n (click)=\"showNext(globalFilter)\"\n label=\"Next {{\n globalFilter.dayRange ? globalFilter.dayRange : 'Week'\n }} >>\"\n ></button>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Checkbox Control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.CHECKBOX\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <p-checkbox\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty': 'p-d-flex p-ai-center'\"\n [binary]=\"true\"\n (keyup.enter)=\"applyFilters()\"\n [(ngModel)]=\"globalFilter.value\"\n [disabled]=\"globalFilter.disabled\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n ></p-checkbox>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Spacer Control -->\n <span *ngIf=\"!globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.SPACER\"\n >\n <span\n [class]=\"\n globalFilter.column\n ? 'p-col-' + globalFilter.column\n : ''\n \"\n ></span>\n </div>\n </span>\n\n <!-- Dropdown Control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DROPDOWN\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <p-dropdown\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"globalFilter.value\"\n [name]=\"globalFilter.displayText\"\n [showClear]=\"true\"\n [styleClass]=\"globalFilter.field\"\n (keyup.Tab)=\"tabFocusEvent(globalFilter)\"\n [placeholder]=\"globalFilter.displayText\"\n [options]=\"globalFilter.data || []\"\n [optionLabel]=\"globalFilter.optionLabel\"\n [optionValue]=\"globalFilter.optionValue\"\n [filter]=\"globalFilter.allowSearch\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n (keyup.enter)=\"applyFilters()\"\n [disabled]=\"globalFilter.disabled\"\n ></p-dropdown>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Input control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.INPUT\">\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-flex-nowrap align-items-center\">\n <input\n type=\"text\"\n pInputText\n [(ngModel)]=\"globalFilter.value\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1'\"\n (keyup.enter)=\"applyFilters()\"\n (blur)=\"onFocusOutEvent(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n class=\"form-control\"\n />\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- NumericInput control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.NUMERICINPUT\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex flex-nowrap align-items-center\">\n <input\n type=\"number\"\n pInputText\n [(ngModel)]=\"globalFilter.value\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n (keyup.enter)=\"applyFilters()\"\n (blur)=\"onFocusOutEvent(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n class=\"form-control\"\n />\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n \n <!-- Date Range Control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div class=\"p-d-flex p-flex-column\" *ngSwitchCase=\"fiterTypes.DATE_RANGE\">\n <label for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex p-ai-center\">\n <p-calendar \n #rangeCalendar\n [showButtonBar]=\"true\"\n [inputId]=\"globalFilter.displayText\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty ' + globalFilter.displayText : 'p-flex-grow-1 p-mr-2 grow-1 ' + globalFilter.displayText\"\n [(ngModel)]=\"globalFilter.value\" \n selectionMode=\"range\" \n appendTo=\"body\"\n (onSelect)=\"selectDate(globalFilter, true)\"\n [dateFormat]=\"calendarFormat\"\n (onClickOutside)=\"setDateRangeFilterValue(globalFilter)\"\n (onBlur)=\"setDateRangeFilterValue(globalFilter)\"\n (keyup)=\"calendarFocusEvent(globalFilter, $event)\"\n (onClearClick)=\"clearDateRangeValue(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n (keyup.enter)=\"applyFilters(true, globalFilter)\"\n ></p-calendar>\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Numeric Range control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.NUMERIC_RANGE\"\n >\n <label for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <div class=\"p-d-flex\">\n <div class=\"p-d-flex flex-nowrap align-items-center p-mr-2\">\n <p-inputNumber\n [showButtons]=\"false\"\n [(ngModel)]=\"globalFilter.value\"\n [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n (onBlur)=\"setNumericRangeValueFrom(globalFilter)\"\n (keyup.enter)=\"setNumericRangeValueFrom(globalFilter,true)\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 grow-1 input-number'\"\n [disabled]=\"globalFilter.disabled\"\n >\n </p-inputNumber>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n <span class=\"to-numeric\">To</span>\n <div class=\"p-d-flex flex-nowrap align-items-center\">\n <p-inputNumber\n [showButtons]=\"false\"\n [(ngModel)]=\"globalFilter.valueTwo\"\n [minFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n [maxFractionDigits]=\"globalFilter?.format?.type === 'decimal' ? globalFilter.format?.formatParams?.digitsInfo ? globalFilter.format?.formatParams?.digitsInfo : '2' : '0'\"\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : 'flex-grow-1 p-mr-2 grow-1 input-number'\"\n (onBlur)=\"setNumericRangeValueTwo(globalFilter)\"\n (keyup.enter)=\"setNumericRangeValueTwo(globalFilter,true)\"\n [disabled]=\"globalFilter.disabled\"\n >\n </p-inputNumber>\n <span *ngIf=\"globalFilter.filtering\">\n <se-filter-menu [globalFilter]=\"globalFilter\"></se-filter-menu>\n </span>\n </div>\n </div>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- MultiSelect control -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.MULTISELECT\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <p-multiSelect\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"globalFilter.value\"\n [options]=\"globalFilter.data\"\n optionLabel=\"label\"\n (keyup.enter)=\"applyFilters()\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n optionValue=\"value\"\n (onChange)=\"onFocusOutEvent(globalFilter)\"\n [appendTo]=\"'body'\"\n [disabled]=\"globalFilter.disabled\"\n ></p-multiSelect>\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n\n <!-- Lookup Control Field -->\n <span [hidden]=\"globalFilter.hidden\">\n <div\n class=\"p-d-flex p-flex-column\"\n *ngSwitchCase=\"fiterTypes.LOOKUP_INPUT\"\n >\n <label class=\"size-10\" for=\"basic\">{{ globalFilter.displayText }}\n <span *ngIf=\"globalFilter.requiredField\">*</span>\n </label>\n <input\n [class]=\"globalFilter.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"globalFilter.field\"\n type=\"text\"\n pInputText\n [(ngModel)]=\"globalFilter.value\"\n (blur)=\"onFocusOutEvent(globalFilter)\"\n [name]=\"globalFilter.field\"\n (keyup.enter)=\"applyFilters()\"\n (click)=\"selectLookupField(globalFilter)\"\n [disabled]=\"globalFilter.disabled\"\n class=\"form-control\"\n />\n <span *ngIf=\"globalFilter.errorMessage && globalFilter.errorMessage.length > 0\" class=\"error\">{{\n globalFilter.errorMessage\n }}</span>\n </div>\n </span>\n </div>\n </div>\n</div>\n\n<!-- Apply button -->\n\n<button\n*ngIf=\"searchGlobalFilterBtn\"\npButton\ntype=\"button\"\nicon=\"pi pi-search\"\nid=\"globalSearchbtn\"\n(click)=\"applyFilters()\"\nclass=\"p-button-success align-globalFilter-btn p-mb-2\"\n></button>\n\n<!-- Close button -->\n<button\n*ngIf=\"clearGlobalFilterBtn\"\npButton\nid=\"clearGlobalFilterBtn\"\ntype=\"button\"\nicon=\"pi pi-replay\"\n(click)=\"clearFilters()\"\n[class]=\"hideClearFilterBtn ? 'p-button-success p-mb-2 align-globalFilter-btn' : 'hide-Global-clear-filter-button'\"\n></button>\n",
|
|
9284
9289
|
styles: ["*{font-family:\"Lato\",sans-serif}.pi{font-family:\"primeicons\"}#toast-container{background:black}.grow-1{flex-grow:1}.w-100{width:100%}.size-10{font-size:10px}.center-content{width:100%!important}.custom-link{color:#4e87f1;cursor:pointer;text-decoration:none}.center-content+app-sidebar{position:relative}.row{margin-left:-.5rem;margin-right:-.5rem}p-calendar{display:flex;justify-content:stretch}p-checkbox{height:42px}.p-dialog .p-dialog-content{overflow:visible!important}:host ::ng-deep input,:host ::ng-deep p-calendar,:host ::ng-deep .p-calendar,:host ::ng-deep .p-dropdown,:host ::ng-deep .p-multiselect{width:100%}:host ::ng-deep .custom-btn button{background:#efefef;border:#eee;border-radius:0;padding:5px 15px;font-size:12px;color:#585858;margin:0 5px}:host ::ng-deep .custom-btn button:hover{background-color:#dad5d5;color:#000}:host ::ng-deep .input-number{border:0;border-radius:2px;padding:5px 6px}:host ::ng-deep .input-number input{margin:-8px -23px -8px -8px;border:0;padding-right:10px;border-radius:3px}:host ::ng-deep .input-number button{color:#2d2d2d;width:15px;height:6;border:0;background-color:#fff}:host ::ng-deep .input-number button:hover{color:#2d2d2d;background-color:#ddd}:host ::ng-deep .input-number button span{font-size:12px}:host ::ng-deep .input-number .p-inputnumber-button-group{visibility:hidden}:host ::ng-deep .input-number:hover .p-inputnumber-button-group{visibility:visible}:host ::ng-deep .to-numeric{font-size:13px;margin:3px;color:#636363;padding-top:4px}.error{color:red}.hide-Global-clear-filter-button{display:none}.align-globalFilter-btn{float:left;margin:10px 5px 0 0}\n"]
|
|
9285
9290
|
},] }
|
|
9286
9291
|
];
|