@rangertechnologies/ngnxt 2.1.118 → 2.1.119
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/environments/version.mjs +5 -5
- package/esm2022/lib/components/datatable/datatable.component.mjs +4 -4
- package/esm2022/lib/pages/builder/properties/properties.component.mjs +3 -3
- package/fesm2022/rangertechnologies-ngnxt.mjs +9 -9
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.119.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.118.tgz +0 -0
|
@@ -5055,7 +5055,7 @@ class NxtDatatable {
|
|
|
5055
5055
|
this.objectColumns = this.columns.filter(column => column.type === 'object').map(column => column.fieldName);
|
|
5056
5056
|
this.fileColumns = this.columns.filter(column => column.type === 'file').map(column => column.fieldName);
|
|
5057
5057
|
this.inlineElement = Object.fromEntries(this.displayedColumns.map(key => [key, ""]));
|
|
5058
|
-
this.dropdownActionButton = this.actionButtonArray?.buttonArray.slice(this.actionButtonArray?.size);
|
|
5058
|
+
this.dropdownActionButton = this.actionButtonArray?.buttonArray ? this.actionButtonArray?.buttonArray.slice(this.actionButtonArray?.size) : [];
|
|
5059
5059
|
this.selection = new SelectionModel(true, []);
|
|
5060
5060
|
if (!this.totalRecords && this.data && this.isPagination) {
|
|
5061
5061
|
this.dataSource.data = this.data?.slice(0, 10);
|
|
@@ -5837,7 +5837,7 @@ class NxtDatatable {
|
|
|
5837
5837
|
this.fileEmit.emit(event);
|
|
5838
5838
|
}
|
|
5839
5839
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5840
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isSort: "isSort", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div> <!-- class=\"m-4\" -->\n <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n {{title}}\n </div>\n <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div>\n <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of displayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); isSort ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n {{ headerLabels[displayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"isSort\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of displayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"isEditable && selectedColumn === column\">\n <div *ngIf=\" column !== 'active'\">\n <div class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n *ngIf=\"hyperLinkColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{{{ '-' | getValue: element : column }} | date}} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column) }} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data?.file)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0\" class=\"\">\n No records/data found.\n </div>\n </div>\n </ng-container>\n\n <ng-template #loadingTemplate>\n <!--SKS15FEB25 Skeleton Loader -->\n <div class=\"skeleton-loader\">\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n </div>\n </div>\n </ng-template>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\" buttonType=\"btn btn-primary\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
|
|
5840
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isSort: "isSort", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div> <!-- class=\"m-4\" -->\n <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n {{title}}\n </div>\n <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div>\n <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of displayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); isSort ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n {{ headerLabels[displayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"isSort\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of displayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"isEditable && selectedColumn === column\">\n <div *ngIf=\" column !== 'active'\">\n <div class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n *ngIf=\"hyperLinkColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{{{ '-' | getValue: element : column }} | date}} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column) }} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data?.file)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\"\n #imgElement \n [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"> \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0\" class=\"\">\n No records/data found.\n </div>\n </div>\n </ng-container>\n\n <ng-template #loadingTemplate>\n <!--SKS15FEB25 Skeleton Loader -->\n <div class=\"skeleton-loader\">\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n </div>\n </div>\n </ng-template>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\" buttonType=\"btn btn-primary\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
|
|
5841
5841
|
}
|
|
5842
5842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
|
|
5843
5843
|
type: Component,
|
|
@@ -5856,7 +5856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5856
5856
|
MatTooltipModule,
|
|
5857
5857
|
GetValuePipe
|
|
5858
5858
|
// RowResizerDirective
|
|
5859
|
-
], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div> <!-- class=\"m-4\" -->\n <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n {{title}}\n </div>\n <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div>\n <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of displayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); isSort ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n {{ headerLabels[displayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"isSort\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of displayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"isEditable && selectedColumn === column\">\n <div *ngIf=\" column !== 'active'\">\n <div class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n *ngIf=\"hyperLinkColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{{{ '-' | getValue: element : column }} | date}} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column) }} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data?.file)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0\" class=\"\">\n No records/data found.\n </div>\n </div>\n </ng-container>\n\n <ng-template #loadingTemplate>\n <!--SKS15FEB25 Skeleton Loader -->\n <div class=\"skeleton-loader\">\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n </div>\n </div>\n </ng-template>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\" buttonType=\"btn btn-primary\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}\n"] }]
|
|
5859
|
+
], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div> <!-- class=\"m-4\" -->\n <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n {{title}}\n </div>\n <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div>\n <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #tableContainer\n (scroll)=\"onScroll(tableContainer)\">\n <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of displayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n [class.selected-column]=\"isEditable && selectedColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); isSort ? sortData(column) : ''\"\n (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"isEditable && selectedColumn === column\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column)\">\n \u2715\n </div>\n <div class=\"ellipsis\"\n [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n {{ headerLabels[displayedColumns.indexOf(column)] }}\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"isSort\" class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\"\n class=\"search-component position-absolute\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div\n *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\"\n style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of displayedColumns; let last = last; ellipsis\"\n class=\"table-cell body-color\"\n [class.selected-cell]=\"isEditable && selectedColumn === column\">\n <div *ngIf=\" column !== 'active'\">\n <div class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n *ngIf=\"hyperLinkColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{{{ '-' | getValue: element : column }} | date}} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column) }} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column) && !fileColumns?.includes(column)\"\n style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n <!-- {{ getValue(element,column) | date }} -->\n {{ ('-' | getValue: element : column) | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n <!-- {{ getValue(element,column) | time }} -->\n {{ ('-' | getValue: element : column) | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n <!-- {{ getValue(element,column)}} -->\n {{ '-' | getValue: element : column }}\n </ng-template>\n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n </div>\n <!-- SKS18MAR25 file column -->\n <div *ngIf=\"fileColumns?.includes(column)\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n class=\"popover-container\">\n <!-- Trigger -->\n <div class=\"hover-base\">\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Popover Content -->\n <div class=\"hover-content\">\n <div class=\"expenseCon\">\n <div *ngFor=\"let data of element[column]\">\n <div class=\"cursor-pointer expense-file\"\n (click)=\"expenseAttachment(data?.file)\">\n {{ data?.fileName }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn && editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n class=\"on-edit d-flex\">\n <input #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \"\n class=\"on-edit d-flex\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n #editColElement class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [readOnly]=\"element.editRow ? false : true\">\n <input\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n type=\"time\" class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [ngModel]=\"getValue(element,column)\"\n [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n [disabled]=\"element.editRow ? false : true\" />\n <div\n *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\"\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n <option [disabled]=\"element.editRow ? false : true\"\n *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement\n class=\"nxt-lop-input table-width\"\n style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n [class]=\"element.editRow ? 'input-box' : '' \"\n [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [ngModel]=\"getValue(element,column)\"\n (ngModelChange)=\"updateEdit(i,$event,element,column)\" [readOnly]=\"true\">\n </div>\n\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img *ngIf=\"button.iconSrc\"\n #imgElement \n [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"> \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div\n style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=btn.tooltip [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0\" class=\"\">\n No records/data found.\n </div>\n </div>\n </ng-container>\n\n <ng-template #loadingTemplate>\n <!--SKS15FEB25 Skeleton Loader -->\n <div class=\"skeleton-loader\">\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n </div>\n </div>\n </ng-template>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n viewBox=\"0 -960 960 960\" width=\"24\">\n <path\n d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"(editColumn?.length > 0 || tableSaveButton) && from != 'formBuilder'\" buttonType=\"btn btn-primary\"\n [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"Save\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}\n"] }]
|
|
5860
5860
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
|
|
5861
5861
|
type: Input
|
|
5862
5862
|
}], columns: [{
|
|
@@ -11854,14 +11854,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
11854
11854
|
/* tslint:disable */
|
|
11855
11855
|
const VERSION = {
|
|
11856
11856
|
"dirty": true,
|
|
11857
|
-
"raw": "
|
|
11858
|
-
"hash": "
|
|
11857
|
+
"raw": "a55142e-dirty",
|
|
11858
|
+
"hash": "a55142e",
|
|
11859
11859
|
"distance": null,
|
|
11860
11860
|
"tag": null,
|
|
11861
11861
|
"semver": null,
|
|
11862
|
-
"suffix": "
|
|
11862
|
+
"suffix": "a55142e-dirty",
|
|
11863
11863
|
"semverString": null,
|
|
11864
|
-
"version": "2.1.
|
|
11864
|
+
"version": "2.1.119"
|
|
11865
11865
|
};
|
|
11866
11866
|
/* tslint:enable */
|
|
11867
11867
|
|
|
@@ -13122,11 +13122,11 @@ class PropertiesComponent {
|
|
|
13122
13122
|
return path.split('.').reduce((obj, key) => obj?.[key], this.selectedElement);
|
|
13123
13123
|
}
|
|
13124
13124
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
13125
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n <!-- <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div> -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox'\" class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : selectedElement[prop.key])\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : getValueByPath(prop.key) ) : updateProperty(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"select-container\"\n [value]=\"selectedElement?.font\" (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n </div>\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"updateProperty('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"updateProperty(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input \n type=\"checkbox\" \n [checked]=\"getValueByPath(prop.key)\" \n (change)=\"onToggleChange(prop.key, $event)\" />\n </div>\n\n <!-- Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <label class=\"size-label\">Width</label>\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{ headerSelect ?\n bookId : selectedElement.id}}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-container\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"onSave()\">Save</button>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}input[type=checkbox],input[type=radio]{width:unset!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
13125
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n <!-- <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div> -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox'\" class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : selectedElement[prop.key])\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : getValueByPath(prop.key) ) : updateProperty(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"select-container\"\n [value]=\"selectedElement?.font\" (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n </div>\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"updateProperty('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"updateProperty(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input \n type=\"checkbox\" \n [checked]=\"getValueByPath(prop.key)\" \n (change)=\"onToggleChange(prop.key, $event)\" />\n </div>\n\n <!-- Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <label class=\"size-label\">Width</label>\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{ headerSelect ?\n bookId : selectedElement.id}}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-container\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
13126
13126
|
}
|
|
13127
13127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
13128
13128
|
type: Component,
|
|
13129
|
-
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n <!-- <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div> -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox'\" class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : selectedElement[prop.key])\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : getValueByPath(prop.key) ) : updateProperty(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"select-container\"\n [value]=\"selectedElement?.font\" (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n </div>\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"updateProperty('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"updateProperty(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input \n type=\"checkbox\" \n [checked]=\"getValueByPath(prop.key)\" \n (change)=\"onToggleChange(prop.key, $event)\" />\n </div>\n\n <!-- Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <label class=\"size-label\">Width</label>\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{ headerSelect ?\n bookId : selectedElement.id}}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-container\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"onSave()\">Save</button>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}input[type=checkbox],input[type=radio]{width:unset!important}\n"] }]
|
|
13129
|
+
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n <!-- <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div> -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox'\" class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : selectedElement[prop.key])\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : getValueByPath(prop.key) ) : updateProperty(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"select-container\"\n [value]=\"selectedElement?.font\" (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n </div>\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"updateProperty('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"updateProperty(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input \n type=\"checkbox\" \n [checked]=\"getValueByPath(prop.key)\" \n (change)=\"onToggleChange(prop.key, $event)\" />\n </div>\n\n <!-- Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <label class=\"size-label\">Width</label>\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <div style=\"font-size: 13px; padding:5px;border-radius:3px;background-color:#eff8ff;\"> id : {{ headerSelect ?\n bookId : selectedElement.id}}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n\n <!-- Radio Group -->\n <div *ngIf=\"prop.type === 'radio'\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement?.isRequired\" (change)=\"onRequiredChange(true)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement?.isRequired\" (change)=\"onRequiredChange(false)\"\n name=\"required\" class=\"radio-input\" />\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n\n <!-- AP 25FEB25 - handled options -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].value\" placeholder=\"Option {{ i + 1 }}\"\n class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"button-container\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}\n"] }]
|
|
13130
13130
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
|
|
13131
13131
|
type: Output
|
|
13132
13132
|
}], selectedElementType: [{
|