@churchillliving/se-ui-toolkit 6.53.490 → 6.53.492

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.
Files changed (9) hide show
  1. package/bundles/churchillliving-se-ui-toolkit.umd.js +56 -47
  2. package/bundles/churchillliving-se-ui-toolkit.umd.js.map +1 -1
  3. package/churchillliving-se-ui-toolkit.metadata.json +1 -1
  4. package/esm2015/lib/components/base/grid/grid.component.js +3 -2
  5. package/esm2015/lib/components/base/menu-bar/menu-bar.component.js +55 -47
  6. package/fesm2015/churchillliving-se-ui-toolkit.js +56 -47
  7. package/fesm2015/churchillliving-se-ui-toolkit.js.map +1 -1
  8. package/lib/components/base/menu-bar/menu-bar.component.d.ts +7 -1
  9. package/package.json +1 -1
package/bundles/churchillliving-se-ui-toolkit.umd.js CHANGED
@@ -6286,6 +6286,7 @@
6286
6286
  GridComponent.prototype.lookupClearValue = function (column, row) {
6287
6287
  if (row) {
6288
6288
  column.displayField ? row[column.displayField] = '' : '';
6289
+ row[column.field + '_obj'].text ? row[column.field + '_obj'].text = '' : '';
6289
6290
  row[column.field] = '';
6290
6291
  }
6291
6292
  else {
@@ -6340,7 +6341,7 @@
6340
6341
  { type: i0.Component, args: [{
6341
6342
  selector: 'se-grid',
6342
6343
  template: "<div class=\"grid-component-wrapper\">\n<p-confirmDialog [style]=\"{ width: '50vw' }\" *ngIf=\"useInlineCRUD\" key=\"handleInlineCRUD\"></p-confirmDialog>\n<p-confirmDialog class=\"grid-component-confirm-dialog\" *ngIf=\"columnActions.length > 0\"\n key=\"handlecolumnActions\"></p-confirmDialog>\n<div class=\"p-mb-2 p-ai-center global-filter-buttons-wrapper\">\n\n <!-- button for apply value on Grid -->\n <button *ngIf=\"filtering && !hideFilter\" pButton type=\"button\" icon=\"pi pi-search\" (click)=\"applyGirdFilterBtn()\"\n [class]=\"\n searchGridFilter ? 'p-button-success apply-filter-btn filter-btn' : 'hide-clear-filter-button apply-filter-btn filter-btn'\n \"></button>\n\n <!-- button for clear value on Grid -->\n <button *ngIf=\"filtering && !hideFilter\" pButton id=\"clearGridFilterValuesButton\" type=\"button\"\n icon=\"pi pi-replay\" (click)=\"cleargridFiltersValue()\" [class]=\"\n clearGridFilter ? 'filter-btn' : 'hide-clear-filter-button filter-btn'\n \" class='global-refresh global-btn'\n ></button>\n\n <!-- button for save all grid at once -->\n <button pButton *ngIf=\"editAllRows && editRowPermission\" id=\"saveAllGridValues\"\n icon=\"pi pi-check\" [label]=\"'Save'\"\n [class]=\"hideGridSaveButton ? 'hide-clear-filter-button' : 'ui-button-info'\" type=\"button\"\n (click)=\"saveAllRowsAtOnce()\"></button>\n\n <!-- button for cancel all grid at once -->\n <button pButton *ngIf=\"editAllRows && !hideGridCancelButton\" id=\"editBtnGlobalvalues\" type=\"button\" [label]=\"'Cancel'\"\n icon=\"pi pi-times\" class=\"ui-button-info\" (click)=\"cancelAllRowsAtOnce()\"></button>\n\n <!-- header Button for multiSelect on Grid -->\n <span *ngIf=\"allowColumnToggle\">\n <p-multiSelect [showToggleAll]=\"false\" [options]=\"columns\" [(ngModel)]=\"selectedColumns\" optionLabel=\"header\"\n selectedItemsLabel=\"{0} columns selected\" class=\"grid-component-multiselect-header-button\" placeholder=\"Choose Columns\">\n </p-multiSelect>\n </span>\n\n <!-- header Button for Adding new Row on Grid -->\n <button pButton *ngIf=\"useInlineCRUD && addRowPermission && !hideAddBtn\" type=\"button\" [label]=\"'Add'\" pAddRow\n [table]=\"componentTableRef\" [newRow]=\"newGridRow\" [id]=\"dataKey\" pTooltip=\"Add New Row\" tooltipPosition=\"bottom\"\n icon=\"pi pi-plus\" class=\"ui-button-info global-add-btn\" (click)=\"addNewRow(newGridRow, true)\" pRipple></button>\n\n <div *ngFor=\"let reportButton of reportButtons\" class=\"ui-button-info p-mr-2 p-ml-2\">\n <se-generate-report-btn *ngIf =\"!reportButton.hidden\"[repId]=\"reportButton.reportId\" [label]=\"reportButton.label\" [params]=\"reportButton.params\"\n [showDialog]=\"reportButton.showDialog\"></se-generate-report-btn>\n </div>\n\n <!-- header Button for Excel File on Grid -->\n <button *ngIf=\"allowExportToExcel\" type=\"button\" pButton icon=\"pi pi-file-excel\" (click)=\"exportExcel()\"\n class=\"p-button-success\" pTooltip=\"Export to Excel\" tooltipPosition=\"bottom\" pRipple></button>\n\n <!-- header Button for PDF File on Grid -->\n <button *ngIf=\"allowExportToPdf\" type=\"button\" pButton icon=\"pi pi-file-pdf\" (click)=\"exportPdf()\"\n class=\"p-button-warning p-mr-2 p-ml-2\" pTooltip=\"Export to Pdf\" tooltipPosition=\"bottom\" pRipple></button>\n <ng-content></ng-content>\n</div>\n\n<p-table *ngIf=\"!isGridHidden\" id=\"my-table\" [value]=\"rowsData\" [columns]=\"selectedColumns\" sortMode=\"multiple\"\n [lazy]=\"useServerSideEvents\" [paginator]=\"pagination\" [alwaysShowPaginator]=\"pagination && totalRecords > 0\" [class]=\"pagination || !rowsData.length ? 'pagination' : ''\"\n class=\"grid-component-main-table\"\n [rows]=\"defaultRows\" [totalRecords]=\"totalRecords\" [rowsPerPageOptions]=\"setPaginationLength\"\n [showCurrentPageReport]=\"showCurrentPageReport\" currentPageReportTemplate=\"Showing {first} to {last} of {{\n totalRecords\n }} entries\" [loading]=\"autoLoadData && !setGridRefreshTime ? loading : false\"\n (onSort)=\"sortDisabled ?? handleSortChange($event)\" (onFilter)=\"handleFilterChange($event)\"\n (onLazyLoad)=\"autoLoadData ? handleServerSideEvents($event) : ''\" (onPage)=\"handleServerSidePagination($event)\" #dt\n [dataKey]=\"dataKey\" [(selection)]=\"selectedRows\" selectionMode=\"multiple\" [scrollable]=\"scrollable\" \n [tableStyle]=\"{ 'max-height': scrollHeight }\"\n editMode=\"row\" [editingRowKeys]=\"editingRowKeys\" [autoLayout]=\"true\" [rowHover]=\"rowHover\"\n [ngClass]=\"{'horizontal-scroll': horizontalScroll === true ? true : false}\">\n <!-- [scrollHeight]=\"scrollHeight\" -->\n <!-- header Button for Action on Grid -->\n <div *ngIf=\"rowActions.length > 0 && rowActions.length > 0\" class=\"p-d-flex p-jc-end\">\n <span *ngFor=\"let rowAction of rowActions\">\n <button pButton type=\"button\" [label]=\"rowAction.title\" [class]=\"rowAction.class\"\n (click)=\"rowAction.onClick(selectedRows)\"></button>\n </span>\n </div>\n\n <!-- header columns on Grid -->\n <ng-template pTemplate=\"header\" let-cols>\n <tr>\n <th *ngIf=\"allowSelection && selectionType === 'multiple'\" class=\"grid-component-selection\">\n <div class=\"grid-component-table-header-inner-div-2\n table-header-inner-div div-last-inner-html-is-icon\">\n <span class=\"flex-grow-1\"> {{allowSelectionHeader}} </span>\n <p-tableHeaderCheckbox *ngIf=\"selectionType === 'multiple'\" binary=\"true\"\n (click)=\"multiCheckBoxOnclick(rowsData, $event)\"></p-tableHeaderCheckbox>\n </div>\n </th>\n <th *ngIf=\"allowSelection && selectionType === 'single'\" \n class=\"grid-component-selection\">\n Select\n </th>\n <th\n *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n Actions\n </th>\n <th *ngFor=\"let column of cols\" [pSortableColumn]=\"column.field\"\n [class]=\"column.type === 'boolean' ? 'checkbox-th' : ''\"\n [pSortableColumnDisabled]=\"sortDisabled && useServerSideEvents ? true : column.sorting === false\"\n class=\"column?.type === 'multiple' ? 'grid-component-select-th-column-type-multiple' : ''\">\n <div class=\"grid-component-table-header-inner-div-1 table-header-inner-div div-last-inner-html-is-icon\"> \n <span [class]=\"'flex-grow-1'\">{{ column.header }}</span>\n <span *ngIf=\"column.isRequired\" class=\"grid-component required-star\">*</span>\n <p-sortIcon *ngIf=\"column.sorting !== false && column?.type !== 'multiple'\"\n [field]=\"column.field\"></p-sortIcon>\n </div>\n </th>\n <th\n *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">Actions</th>\n </tr>\n <tr *ngIf=\"filtering && !hideFilter\">\n <th *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></th>\n <th *ngIf=\"setActionColumnAsFirst && !disabledSaveBtn\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n </th>\n <th *ngFor=\"let column of cols\" [ngSwitch]=\"column?.filter?.type\" [style]=\"column.style\"\n [class]=\"hideFilterOptions ? 'hide-table-filter' : ''\">\n <span *ngIf=\"column.filtering !== false\" [class]=\"column.filter?.showFilter ? '' : 'hide-filter-icon'\">\n <!-- Text input on Header For Filter-->\n <p-columnFilter [type]=\"'text'\" [field]=\"column.field\" *ngSwitchCase=\"'input'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <input type=\"text\" [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\" pInputText />\n </ng-template>\n </p-columnFilter>\n\n <!-- Numeric input on Header For Filter-->\n <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\" *ngSwitchCase=\"'numeric_input'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-inputNumber [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onBlur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n (keyup)=\"removingFilters($event, column)\"></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 grid-component lookup-filter-wrapper\">\n <div class=\"lookup-filter-input-wrapper\"> \n <input\n id=\"lookUp_filter\"\n class=\"grid-component lookup-filter\"\n autocomplete=\"off\"\n type=\"text\"\n [(ngModel)]=\"column.filterValue\"\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> \n <div><button\n *ngIf=\"column.filterValue\"\n icon=\"pi pi-times\"\n pButton\n type=\"button\"\n (click)=\"lookupClearValue(column)\"\n ></button></div>\n </div>\n </ng-template>\n </p-columnFilter>\n\n <!-- checkbox on Header For Filter-->\n <p-columnFilter type=\"boolean\" [field]=\"column.field\" *ngSwitchCase=\"'checkbox'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-checkbox [binary]=\"true\" [disabled]=\"column.disabled\" [(ngModel)]=\"column.filterValue\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\"\n (onChange)=\"setFilterFocusOut(column, filter, $event)\" (click)=\"clickCheckBoxFilter(column)\"\n (keydown)=\"backspaceEvent($event, column)\">\n </p-checkbox>\n </ng-template>\n </p-columnFilter>\n\n <!-- multiSelect on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'multi-select'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-multiSelect [ngModel]=\"column.filterValue\" [options]=\"column.filter.data || []\" (onChange)=\"filter($event.value)\"\n (blur)=\"setFilterFocusOut(column, filter, $event)\" (keydown)=\"backspaceEvent($event, column)\"\n placeholder=\"Any\" optionLabel=\"label\">\n </p-multiSelect>\n </ng-template>\n </p-columnFilter>\n\n <!-- dropdown on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'dropdown'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-dropdown [showClear]=\"true\" [placeholder]=\"'Select'\" [filter]=\"column.allowSearch\"\n [(ngModel)]=\"column.filterValue\" (keyup.enter)=\"applyDropdownFilter(filter, $event)\"\n [options]=\"column.filter.data || []\"\n (onChange)=\"searchDropdownFilter(filter, $event, column)\"></p-dropdown>\n </ng-template>\n </p-columnFilter>\n\n <!-- calendar on Header For Filter-->\n <p-columnFilter [field]=\"column.field\" matchMode=\"in\" [showMenu]=\"false\" *ngSwitchCase=\"'calendar'\">\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\n <p-calendar [placeholder]=\"'Select-Date'\" [(ngModel)]=\"column.filterValue\"\n (keyup.enter)=\"applyEnterEvent(filter, $event, column)\" appendTo=\"body\" (onSelect)=\"selectDate(column)\"\n [inputId]=\"column.field\" hourFormat=\"12\" (keyup.backspace)=\"removeNullCalendar(column, filter, $event)\"\n [showButtonBar]=\"true\" (onClose)=\"setFilterFocusOut(column, filter, $event)\"\n (keydown)=\"backspaceEvent($event, column)\" (onClearClick)=\"backspaceEvent($event, column)\">\n </p-calendar>\n </ng-template>\n </p-columnFilter>\n\n <!-- Default Filter For Header -->\n <p-columnFilter [type]=\"\n column.type && column.type !== 'link' ? column.type : 'text'\n \" [field]=\"column.field\" display=\"menu\" *ngSwitchDefault>\n </p-columnFilter>\n </span>\n </th>\n <th\n *ngIf=\"!setActionColumnAsFirst && !disabledSaveBtn && columns?.length > 0 && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [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 [ngClass]=\"row?.highlightrow ? 'highlighted-row' : ''\"\n [class]=\"wordWrap ? 'p-selectable-row' : 'noWrap p-selectable-row'\" (click)=\"!editing && handleRowClick(row)\"\n [pEditableRow]=\"row\" #gridRow [id]=\"row[dataKey]\">\n <td *ngIf=\"allowSelection\" class=\"grid-component-selection\">\n <p-tableRadioButton [value]=\"row\" *ngIf=\"selectionType === 'single'\"\n (click)=\"multiCheckBoxOnclick(row , $event, true)\"></p-tableRadioButton>\n <p-tableCheckbox [value]=\"row\" *ngIf=\"selectionType === 'multiple'\"\n (click)=\"multiCheckBoxOnclick(row, $event)\"></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 [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n </span>\n </td>\n <td *ngIf=\"setActionColumnAsFirst && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class=\"setActionColumnWidth\">\n <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\">\n </se-grid-row-actions>\n </span>\n </td>\n\n <!-- Grid Rows Data Bindings Start -->\n <td *ngFor=\"let column of selectedColumns\" [ngSwitch]=\"column.type\" >\n\n <!-- Boolean column on Grid -->\n <span *ngSwitchCase=\"'boolean'\">\n <td *ngIf=\"!editing\">\n <p-checkbox [disabled]=\"!column.allowEdit ?? true\" [binary]=\"true\" (click)=\"onClickEvent(column, row)\"\n (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\" (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 ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n ? Checked\n : unChecked\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 (click)=\"onClickEvent(column, row)\" (ngModelChange)=\"checkBoxChangeEvent($event, column, row)\"\n [disabled]=\"allowDisabled(column,row)\" [binary]=\"true\" [(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 ( row[column.field].text && (row[column.field]?.text?.toString() === '1' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'true' ||\n row[column.field]?.text?.toString()?.toLowerCase() === 'y')))\n ? editModeChecked\n : editModeunCkecked\n \" (blur)=\"onFocusOutEvent(column, row)\"></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 *ngIf=\"column.target !== '_self'\" (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\" class=\"custom-link\"\n [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n <a [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" target=\"_blank\">\n <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.action?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n \n </span>\n <span *ngIf=\"column.target === '_self'\" (click)=\"onClickEvent(column, row)\"\n [title]=\"setConditionBaseValue(row, column)\"class=\"custom-link\"\n [class]=\" allowDisabled(column,row) ? 'disabled-link' : ''\">\n\n <a [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]='column.target'>\n <i *ngIf=\"column.icon &&!row[column.field+'_obj']?.hideFieldValue; else noIcon\" [class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n\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\n *ngIf=\"(column.editable === true || column.editable === undefined) && (column.editLink === true || column.editLink === undefined)\">\n <input *ngIf=\"!row.isNew\" pInputText (click)=\"onClickEvent(column, row)\" type=\"text\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"row[column.field+'_obj']?.hideFieldValue ? '' : row[column.field+'_obj']?.displayField?.toLowerCase() ?\n row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\" />\n <input pInputText *ngIf=\"row.isNew\" type=\"text\" (click)=\"onClickEvent(column, row)\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" (blur)=\"onFocusOutEvent(column, row)\"\n (change)=\"onChangeEvent(column, row)\" />\n </span>\n <span *ngIf=\"column.editable === false\" >\n <a class=\"custom-link\" (click)=\"onClickEvent(column, row)\" [href]=\"row[column.field + '_obj']?.hyperlink\" [target]='column.target'\n [class]=\"allowDisabled(column,row) ? 'disabled-link' : ''\">\n <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n \n </a>\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) ? 'disabled-link' : ''\">\n <i *ngIf=\"column.icon && !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n \n </a>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span class=\"custom-link\" [class]=\"column.editable === false || allowDisabled(column,row) ? 'disabled-link' : ''\">\n <a (click)=\"onClickEvent(column, row)\" [href]=\"column.disabled?'':row[column.field + '_obj']?.hyperlink\" [target]=\"column.target\"\n >\n <i *ngIf=\"column.icon&& !row[column.field+'_obj']?.hideFieldValue; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\n {{\n row[column.field+'_obj']?.hideFieldValue?'':\n setConditionBaseValue(row, column)\n }}\n </ng-template>\n </a>\n\n </span>\n </ng-template>\n </p-cellEditor>\n </span>\n </span>\n\n <!-- Iframe column on Grid -->\n <span *ngSwitchCase=\"'iframe'\">\n <span class=\"custom-link\" (click)=\"gridIFrame(column, row[column.field + '_obj']?.hyperlink, row)\" [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 <i *ngIf=\"column.icon; else noIcon\"[class]=\"column.icon\"></i>\n <ng-template #noIcon>\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 </ng-template>\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 && !row[column.field+'_obj']?.hideFieldValue\">\n <input\n readonly\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n type=\"text\"\n pInputText\n (click)=\"selectLookupField(column, row)\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n row[row[column.field+'_obj']?.displayField?.toLowerCase()] : \n 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=\"column.editable === false || column.editable === undefined\n \" class=\"custom-link\"\n [class]=\"\n allowDisabled(column,row) ? 'disabled-link' : ''\n \" (click)=\"openGridDialog(column, row)\">\n\n <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n <ng-template #noIcon>{{ (!column.displayText && row.isNew ) || row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column)\n }}</ng-template>\n\n\n </span>\n </span>\n\n <span *ngIf=\"row[column.field + '_secondType'] === 'date'\" [title]=\"\n row[column.field]\n | date: (column.format ? column.format : 'MM/dd/YY')\n \">\n <p-calendar [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\" hourFormat=\"12\" [showTime]=\"column.showTime\" (click)=\"onClickEvent(column, row)\"\n [timeOnly]=\"column.timeOnly\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ?\n row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"></p-calendar>\n </span>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span class=\"custom-link\"\n [class]=\"row.disabled || allowDisabled(column,row) ? 'disabled-link' : ''\"\n (click)=\"openGridDialog(column, row)\" *ngIf=\"!row[column.field + '_secondType'] && !row.hidegridbtn\"\n [title]=\"setConditionBaseValue(row, column)\">\n <i *ngIf=\"(column.icon || row[column.field+'_obj']?.icon) && !row[column.field+'_obj']?.hideFieldValue ; else noIcon\" [class]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"></i>\n <ng-template #noIcon>{{ row[column.field+'_obj']?.hideFieldValue ? '' : setConditionBaseValue(row, column) }}</ng-template>\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 readonly type=\"text\" pInputText\n [(ngModel)]=\"row[column.field+'_obj']?.action && row[column.field+'_obj']?.action?.displayField ?\n row[row[column.field+'_obj']?.action?.displayField?.toLowerCase()] :\n typeOf(row[column.field+'_obj']) === 'object' && row[column.field+'_obj']?.text?.text ? row[column.field+'_obj']?.text?.text : \n column.displayField ? row[column.displayField] : row[column.field]\n \"\n (keyup.tab)=\"selectLookupField(column, row)\" [disabled]=\"allowDisabled(column,row)\"\n (click)=\"selectLookupField(column, row)\" [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\"\n [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\" (blur)=\"onFocusOutEvent(column, row)\" />\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\"\n (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 setLookupReadOnlyValue(row, column)\n }}\n </a>\n </span>\n <span *ngIf=\"!column.linkId\" [class]=\"column.component && column.editLink === true ? 'custom-link' : ''\"\n (click)=\"openLookupHyperlink(column, row)\">\n {{\n setLookupReadOnlyValue(row, column)\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 [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" [class]=\"\n column.errorMessage\n ? 'ng-invalid ng-dirty'\n : 'form-control'\n \" [showButtons]=\"!column.format ? true : false\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField?.toLowerCase()] : row[column.field]\" [name]=\"column.field\"\n [disabled]=\"allowDisabled(column,row)\" (ngModelChange)=\"onChangeEvent(column, row)\"\n (onBlur)=\"onFocusOutEvent(column, row)\" [mode]=\"\n column.format &&\n column.format.type === 'currency'\n ? 'currency'\n : 'decimal'\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 \" [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 \" [minFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\"\n [maxFractionDigits]=\"column.format ? setNumericMinMxFraction(column) : '0'\" [suffix]=\"\n column.format &&\n column.format.type === 'percent' && \n '%'\n \n \">\n </p-inputNumber>\n </span>\n <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span [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>\n <div *ngSwitchCase=\"'add_button'\">\n <button *ngIf=\"!row.hidegridbtn\" pButton type=\"button\"\n [icon]=\"row[column.field+'_obj']?.icon ? row[column.field+'_obj']?.icon : column.icon\"\n [name]=\"column.header\" class=\"merge-btn\" [disabled]=\"allowDisabled(column,row)\"\n [label]=\"row[column.field+'_obj']?.displayText ? row[column.field+'_obj']?.displayText : column.value\"\n class=\"grid-component-grid-add-btn\" (click)=\"onClickButton(column, row)\"></button>\n </div>\n </span>\n\n <!-- Date column on Grid -->\n <span *ngSwitchCase=\"'date'\" [title]=\"setConditionBaseValue(row,column)\">\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' : ''\" (onClose)=\"onFocusOutEvent(column, row)\"\n [appendTo]=\"'body'\" hourFormat=\"12\" [defaultDate]=\"defaultDate\"\n [stepMinute]=\"column.minutesInterval ? column.minutesInterval : 1\" [showTime]=\"column.showTime\"\n [timeOnly]=\"column.timeOnly\" [dateFormat]=\"column.format ? column.format.type : calendarFormat\"\n (keyup)=\"calenderInputValue(column, row)\" (onShow)=\"onClickEvent(column, row)\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n [showButtonBar]=\"!column.timeOnly\"></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 *ngSwitchCase=\"'dropdown'\" [class]=\"dropdownInput ? '' : 'output-dropdown'\" [title]=\"\n setDropdwonReadOnlyValue(row, column)\n \">\n <p-cellEditor>\n <ng-template pTemplate=\"input\">\n <p-dropdown *ngIf=\"!row[column.field+'_obj']?.hidden\" [options]=\"\n row[column.field+'_data']\n ? row[column.field+'_data']\n : column.data\n \"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\" [placeholder]=\"row[column.displayField]\n ? row[column.displayField]\n : row[column.field] ? row[column.field] : 'Select'\" [showClear]=\"row[column.field] ? true : false\"\n [optionLabel]=\"column.optionLabel\" (click)=\"onClickEvent(column, row)\"\n [optionValue]=\"column.optionValue\" [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" (blur)=\"onFocusOutEvent(column, row)\"\n (onChange)=\"onChangeEvent(column, row)\" [filter]=\"column.allowSearch\"></p-dropdown>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span *ngIf=\"!row[column.field+'_obj']?.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 [class]=\"column.errorMessage ? 'ng-invalid ng-dirty' : ''\"\n [id]=\"allowDisabled(column,row) ? 'hide-border' : ''\" type=\"text\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField?.toLowerCase() ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n row[column.field]\" [disabled]=\"allowDisabled(column,row)\"\n [options]=\"column.data\" [optionLabel]=\"column.optionLabel\" [optionValue]=\"column.optionValue\"\n (onChange)=\"onChangeEvent(column, row)\" (onPanelShow)=\"showOption(column, row)\"\n (click)=\"onClickEvent(column, row)\" [appendTo]=\"'body'\" (blur)=\"onFocusOutEvent(column, row)\">\n </p-multiSelect>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span [title]=\"\n row[column.displayField]\n ? row[column.displayField]\n : setMultiSelectData(column, row[column.field])\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 *ngSwitchCase=\"'AutoComplete'\">\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 (onSelect)=\"autoCompleteSelectedValue(row, column, $event)\"\n [field]=\"column.optionLabel ? column.optionLabel?.toLowerCase() : column.displayField ? column.displayField?.toLowerCase() : column.field?.toLowerCase()\"\n [(ngModel)]=\"row[column.field+'_obj']?.displayField ? row[row[column.field+'_obj']?.displayField.toLowerCase()] :\n typeOf(row[column.field]) === 'object' && row[column.field]?.text ?\n row[column.field]?.text :\n row[column.field]\"\n [dropdown]=\"column.showOption\" \n (ngModelChange)=\"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, row)\">\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 ?\n value[column.displayField] : value[column.displayField] + ';' : value[column.displayField] }}\n </span>\n </span>\n <span *ngIf=\"row[column.field] && row[column.field][0] && row[column.field][0][column.field] && !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 ?\n value[column.field] : value[column.field] + ';' : value[column.field] }}\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\" [label]=\"column.label\" [params]=\"column.params\"\n [showDialog]=\"column.showDialog\"></se-generate-report-btn>\n </ng-template>\n <ng-template pTemplate=\"input\">\n <se-generate-report-btn [repId]=\"column.reportId\" [label]=\"column.label\" [params]=\"column.params\"\n [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 pInputText type=\"text\" [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] : row[column.field]\"\n [disabled]=\"allowDisabled(column,row)\"\n (blur)=\"onFocusOutEvent(column, row)\" (change)=\"onChangeEvent(column, row)\"\n (click)=\"onClickButton(column, row)\" *ngIf=\"column.field !== dataKey; else locked_field\" />\n <ng-template #locked_field><span *ngIf=\"!row.isNew\" [title]=\"row[column.field]\">\n {{ row[column.field] }}\n </span></ng-template>\n </ng-template>\n <ng-template pTemplate=\"output\">\n <span (click)=\"onClickEvent(column, row)\" [title]=\"\n setTextBoxReadOnlyValue(row, column)\n \">\n {{\n setTextBoxReadOnlyValue(row, column)\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\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\">\n <span class=\"action-btn\" *ngFor=\"let action of columnActions\">\n <i [title]=\"action.tooltip\" [class]=\"action.icon\" (click)=\"handleActionClick($event, action, row)\"></i>\n </span>\n </td>\n <td\n *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\">\n <span class='setActionColumnWidth'>\n <se-grid-row-actions [editing]=\"editing\" [editRowPermission]=\"editRowPermission\"\n [deleteRowPermission]=\"deleteRowPermission\" [hideDeleteBtn]=\"hideDeleteBtn\" [hideEditBtn]=\"hideEditBtn\"\n [row]=\"row\" (onRowEditInitBtn)=\"onRowEditInit($event)\" (deleteRecordBtn)=\"deleteRecord($event)\"\n (onRowEditSaveBtn)=\"onRowEditSave($event)\" (onRowEditCancelBtn)=\"onRowEditCancel($event, ri)\"\n [editAllRows]=\"editAllRows\">\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\n *ngIf=\"setActionColumnAsFirst && (columnActions.length > 0 || (useInlineCRUD && (deleteRowPermission || editRowPermission)))\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngIf=\"allowSelection\" [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"></td>\n <td *ngFor=\"let outerColumn of selectedColumns\" class=\"grid-component-outer-column\">\n <div *ngFor=\"let innerColumn of selectedColumns\">\n <div *ngFor=\"let aggr of innerColumn?.aggregate\">\n <div\n *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\n *ngIf=\"!setActionColumnAsFirst && columns?.length > 0 && useInlineCRUD && (deleteRowPermission || editRowPermission)\"\n [class]=\"inEditMode ? 'three-action-btn' : 'two-action-btn'\"\n [ngClass]=\"disabledSaveBtn ? 'hide-clear-filter-button' : ''\"></td>\n </tr>\n </ng-template>\n\n <!-- Footer for Empty Message columns on Grid -->\n <ng-template pTemplate=\"emptymessage\">\n <tr class=\"grid-component no-records-found\">\n <td [attr.colspan]=\"selectedColumns?.length + 1\">{{totalRecords==0? 'No records found':''}}</td>\n </tr>\n </ng-template>\n</p-table>\n</div>",
6343
- styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .filter-btn{margin-right:5px}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .p-column-filter-menu-button{display:none}.disabled-link,.disabled-link a,.disabled-link label,.disabled-link span,.disabled-link div,.disable-label-control,.disabled-link.custom-link,.disabled-link.custom-link a,.disabled-link.custom-link label,.disabled-link.custom-link span,.disabled-link.custom-link div,.disable-label-control.custom-link{pointer-events:none;color:#83baf8}.custom-link{color:#205dcf;font-size:12px}.custom-link:not(.disabled-link){cursor:pointer}.mr-2{margin-right:10px;display:block}.highlighted-row{background-color:#dee2e6!important}.hide-clear-filter-button{display:none!important}\n"]
6344
+ styles: [":host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-column-filter-clear-button{display:none}:host ::ng-deep .apply-filter-btn{float:unset!important}:host ::ng-deep .hide-table-filter .pi-filter:before{display:none}:host ::ng-deep .hide-filter-icon .p-column-filter-menu-button{display:none}.disabled-link,.disabled-link a,.disabled-link label,.disabled-link span,.disabled-link div,.disable-label-control,.disabled-link.custom-link,.disabled-link.custom-link a,.disabled-link.custom-link label,.disabled-link.custom-link span,.disabled-link.custom-link div,.disable-label-control.custom-link{pointer-events:none;color:#83baf8}.custom-link{color:#205dcf;font-size:12px}.custom-link:not(.disabled-link){cursor:pointer}.mr-2{margin-right:10px;display:block}.highlighted-row{background-color:#dee2e6!important}.hide-clear-filter-button{display:none!important}\n"]
6344
6345
  },] }
6345
6346
  ];
6346
6347
  /** @nocollapse */
@@ -8272,7 +8273,11 @@
8272
8273
  this.router = router;
8273
8274
  this.hiddenPanelMenu = true;
8274
8275
  this.onClickEvent = new i0.EventEmitter();
8276
+ this.menuBarItemsTop = [];
8277
+ this.menuBarItemsBottom = [];
8275
8278
  this.menuBarItems = [];
8279
+ this.totalItems = 0;
8280
+ this.hiddenItems = 0;
8276
8281
  this.toggleMenu = false;
8277
8282
  this.roles = [];
8278
8283
  this.isMenubarHidden = false;
@@ -8290,7 +8295,8 @@
8290
8295
  this.roles = this.authService.getUserRoles();
8291
8296
  // apply user role permissions
8292
8297
  this.applyUserPermissions();
8293
- this.menuBarItems = this.menuItems.map(function (x) { return (Object.assign(Object.assign({}, x), { style: x.hidden ? { display: 'none' } : x.style })); });
8298
+ this.menuBarItemsTop = this.menuItemsTop.map(function (x) { return (Object.assign(Object.assign({}, x), { style: x.hidden ? { display: 'none' } : x.style })); });
8299
+ this.menuBarItemsBottom = this.menuItemsBottom.map(function (x) { return (Object.assign(Object.assign({}, x), { style: x.hidden ? { display: 'none' } : x.style })); });
8294
8300
  };
8295
8301
  MenuBarComponent.prototype.toggleSidebar = function () {
8296
8302
  this.toggleMenu = !this.toggleMenu;
@@ -8302,59 +8308,61 @@
8302
8308
  };
8303
8309
  // apply user role permissions
8304
8310
  MenuBarComponent.prototype.applyUserPermissions = function () {
8311
+ if (this.menuItemsTop || this.menuBarItemsBottom) {
8312
+ this.menuItemsTop ? this.setUserPermissionsBasedOnMenuItemsList(this.menuItemsTop) : '';
8313
+ this.menuItemsBottom ? this.setUserPermissionsBasedOnMenuItemsList(this.menuItemsBottom) : '';
8314
+ this.isMenubarHidden = this.totalItems > 0 && this.totalItems === this.hiddenItems;
8315
+ }
8316
+ };
8317
+ MenuBarComponent.prototype.setUserPermissionsBasedOnMenuItemsList = function (menuItems) {
8305
8318
  var _this = this;
8306
- if (this.menuItems) {
8307
- var totalItems_1 = 0;
8308
- var hiddenItems_1 = 0;
8309
- this.menuItems.forEach(function (menu) {
8310
- if (menu.items) {
8311
- menu.items.forEach(function (item) {
8312
- var permissions = item.permissions;
8313
- if (!permissions)
8314
- permissions = menu.permissions;
8315
- var hasValidEditPermission = false;
8316
- if (permissions && permissions.length > 0) {
8317
- permissions.forEach(function (permission) {
8318
- var isValid = false;
8319
- if (permission.roles && permission.roles.length > 0) {
8320
- permission.roles.forEach(function (role) {
8321
- if (!isValid && _this.roles && _this.roles.includes(role)) {
8322
- isValid = true;
8323
- }
8324
- });
8325
- if (permission.type === exports.EPermissionType.VIEW) {
8326
- if (isValid) {
8327
- hasValidEditPermission = true;
8328
- item.disabled = false;
8329
- item.hidden = false;
8330
- }
8331
- else {
8332
- item.hidden = true;
8333
- }
8319
+ menuItems.forEach(function (menu) {
8320
+ if (menu.items) {
8321
+ menu.items.forEach(function (item) {
8322
+ var permissions = item.permissions;
8323
+ if (!permissions)
8324
+ permissions = menu.permissions;
8325
+ var hasValidEditPermission = false;
8326
+ if (permissions && permissions.length > 0) {
8327
+ permissions.forEach(function (permission) {
8328
+ var isValid = false;
8329
+ if (permission.roles && permission.roles.length > 0) {
8330
+ permission.roles.forEach(function (role) {
8331
+ if (!isValid && _this.roles && _this.roles.includes(role)) {
8332
+ isValid = true;
8333
+ }
8334
+ });
8335
+ if (permission.type === exports.EPermissionType.VIEW) {
8336
+ if (isValid) {
8337
+ hasValidEditPermission = true;
8338
+ item.disabled = false;
8339
+ item.hidden = false;
8340
+ }
8341
+ else {
8342
+ item.hidden = true;
8334
8343
  }
8335
8344
  }
8336
- });
8337
- }
8338
- totalItems_1++;
8339
- if (item.hidden) {
8340
- item.style = { display: 'none' };
8341
- hiddenItems_1++;
8342
- }
8343
- });
8344
- // if all items of menu is hidden then hide menu as well
8345
- menu.hidden =
8346
- menu.items.length === menu.items.filter(function (x) { return x.hidden; }).length;
8347
- }
8348
- });
8349
- this.isMenubarHidden = totalItems_1 > 0 && totalItems_1 === hiddenItems_1;
8350
- }
8345
+ }
8346
+ });
8347
+ }
8348
+ _this.totalItems++;
8349
+ if (item.hidden) {
8350
+ item.style = { display: 'none' };
8351
+ _this.hiddenItems++;
8352
+ }
8353
+ });
8354
+ // if all items of menu is hidden then hide menu as well
8355
+ menu.hidden =
8356
+ menu.items.length === menu.items.filter(function (x) { return x.hidden; }).length;
8357
+ }
8358
+ });
8351
8359
  };
8352
8360
  return MenuBarComponent;
8353
8361
  }());
8354
8362
  MenuBarComponent.decorators = [
8355
8363
  { type: i0.Component, args: [{
8356
8364
  selector: 'se-menu-bar',
8357
- template: "<div class=\"wrapper menu-bar-wrapper main-menu-bar menu-bar-component\" *ngIf=\"hiddenPanelMenu\">\n <div\n *ngIf=\"!isMenubarHidden\"\n class=\"p-p-0 sidebar\"\n [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n >\n <!-- [style]=\"{ backgroundColor: menuBackColor }\" -->\n <div class=\"p-d-flex p-ai-center toggle-btn\">\n <p-avatar\n pBadge\n (click)=\"clickEvent()\"\n icon=\"pi pi-user\"\n size=\"xlarge\"\n shape=\"circle\"\n class=\"p-pr-3\"\n [title]=\"toolTip\"\n ></p-avatar>\n <button class=\"toggle-btn hover-scale\" (click)=\"toggleSidebar()\">\n <i\n class=\"pi pi-fw toggle-icon\" \n [ngClass]=\"toggleMenu ? 'pi-chevron-right' : 'pi-chevron-left'\"\n ></i>\n \n <span>{{ menuTitle }}</span>\n </button>\n </div>\n <nav\n class=\"navbar navbar-expand-lg p-p-0 grow-1\"\n [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n >\n <p-panelMenu [model]=\"menuBarItems\" class=\"menuSidebar\"></p-panelMenu>\n </nav>\n <div class=\"nav-footer p-m-2\" [innerHtml]=\"menuFooter\"></div>\n </div>\n</div>\n",
8365
+ template: "<div class=\"wrapper menu-bar-wrapper main-menu-bar menu-bar-component\" *ngIf=\"hiddenPanelMenu\">\n <div\n *ngIf=\"!isMenubarHidden\"\n class=\"p-p-0 sidebar\"\n [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n >\n <!-- [style]=\"{ backgroundColor: menuBackColor }\" -->\n <div class=\"p-d-flex p-ai-center toggle-btn\">\n <p-avatar\n pBadge\n (click)=\"clickEvent()\"\n icon=\"pi pi-user\"\n size=\"xlarge\"\n shape=\"circle\"\n class=\"p-pr-3\"\n [title]=\"toolTip\"\n ></p-avatar>\n <button class=\"toggle-btn hover-scale\" (click)=\"toggleSidebar()\">\n <i\n class=\"pi pi-fw toggle-icon\" \n [ngClass]=\"toggleMenu ? 'pi-chevron-right' : 'pi-chevron-left'\"\n ></i>\n \n <span>{{ menuTitle }}</span>\n </button>\n </div>\n <nav\n class=\"navbar navbar-expand-lg p-p-0 grow-1\"\n [ngClass]=\"toggleMenu ? 'hide-nav' : ''\"\n >\n <div class=\"main-menu-menus-wrapper\">\n <div class=\"top-menu-main-menu-wrapper\">\n <p-panelMenu [model]=\"menuBarItemsTop\" class=\"menuSidebar first\"></p-panelMenu>\n </div>\n <div class=\"bottom-menu-main-menu-wrapper\">\n <p-panelMenu [model]=\"menuBarItemsBottom\" class=\"menuSidebar second\"></p-panelMenu>\n </div>\n </div>\n </nav>\n <div class=\"nav-footer p-m-2\" [innerHtml]=\"menuFooter\"></div>\n </div>\n</div>\n",
8358
8366
  styles: [".wrapper{position:relative;z-index:1}.hide-nav .p-menuitem-text,.hide-nav .p-panelmenu-icon,.hide-nav+.nav-footer{display:none;opacity:0}.toggle-icon{position:absolute;right:5px;z-index:9}\n"]
8359
8367
  },] }
8360
8368
  ];
@@ -8367,7 +8375,8 @@
8367
8375
  MenuBarComponent.propDecorators = {
8368
8376
  hiddenPanelMenu: [{ type: i0.Input }],
8369
8377
  toolTip: [{ type: i0.Input }],
8370
- menuItems: [{ type: i0.Input }],
8378
+ menuItemsTop: [{ type: i0.Input }],
8379
+ menuItemsBottom: [{ type: i0.Input }],
8371
8380
  menuFooter: [{ type: i0.Input }],
8372
8381
  menuTitle: [{ type: i0.Input }],
8373
8382
  onClickEvent: [{ type: i0.Output }]