@rangertechnologies/ngnxt 2.1.111 → 2.1.113

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -4828,7 +4828,7 @@ class NxtDatatable {
     renderer;
     dataService;
     changeService;
-    data; //  get data that to be displayed in a array
+    data = []; //  get data that to be displayed in a array
     columns = []; // Columns have a label, a column type, and filter details.
     withCheckBox; // get if with or without checkbox in table
     searchBar; // if it is true, the search bar will be displayed on table
@@ -4943,6 +4943,7 @@ class NxtDatatable {
         this.changeService = changeService;
     }
     ngOnChanges() {
+        this.dataSource = { data: [] }; // or use a proper data structure
         console.log("ngOnChanges is running");
         // SKS13MAR25 To get the data from data question
         if (this.from === 'ngNxt') {
@@ -4958,7 +4959,6 @@ class NxtDatatable {
                 this.isPagination = config.showPagination !== false;
                 this.actionButton = config.showActions !== false;
                 this.searchBar = config.showSearch !== false;
-                this.isPagination = config.itemsPerPage ? true : false;
                 this.pageSize = config.itemsPerPage || 5;
                 this.headerLabels = parsedMeta.slice(1).map(column => column.label);
                 this.displayedColumns = parsedMeta.slice(1).map(column => column.apiName);
@@ -5033,7 +5033,18 @@ class NxtDatatable {
                 }
             }
         }
-        this.dataSource = this.data;
+        // Ensure `this.data` is an array
+        if (!this.data || !Array.isArray(this.data)) {
+            console.warn('Data is not initialized or is not an array');
+            this.data = []; // Initialize as an empty array if it's not valid
+            return;
+        }
+        // Ensure `this.data` is not empty
+        if (this.data.length === 0) {
+            console.warn('Data is empty, waiting for data to be loaded');
+            return;
+        }
+        // Ensure `this.dataSource.data` is initialized
         //SKS15FEB25 Initialize this in your data fetch method
         this.originalData = [...this.data];
         this.sFilterData = [...this.data];
@@ -5044,7 +5055,7 @@ class NxtDatatable {
         this.pageSizeOptions = this.pagination?.pageSizeOptions ? this.pagination['pageSizeOptions'] : ['5', '10', '25', '50', '100', '200'];
         this.pagination === undefined ? this.configPagination = false : this.configPagination = true;
         this.isSort === undefined || this.isSort === false ? this.isSort = false : this.isSort = true;
-        this.isPagination === undefined || this.isPagination === false ? this.isPagination = false : this.isPagination = true;
+        this.isPagination === undefined || this.isPagination === true ? this.isPagination = true : this.isPagination = false;
         this.isNosIndicator === undefined || this.isNosIndicator === false ? this.isNosIndicator = false : this.isNosIndicator = true;
         this.selection = new SelectionModel(true, []);
         if (!this.totalRecords && this.data && this.isPagination) {
@@ -5106,6 +5117,7 @@ class NxtDatatable {
         }, 1500); // Waits 100ms for rendering
     }
     ngOnInit() {
+        this.dataSource = { data: [] }; // or use a proper data structure
         // SKS13MAR25 get data from question if from ngNxt
         if (this.from === 'ngNxt') {
             this.data = this.question?.input ? this.question?.input : [];
@@ -5120,7 +5132,6 @@ class NxtDatatable {
                 this.isPagination = config.showPagination !== false;
                 this.actionButton = config.showActions !== false;
                 this.searchBar = config.showSearch !== false;
-                this.isPagination = config.itemsPerPage ? true : false;
                 this.pageSize = config.itemsPerPage || 5;
                 this.headerLabels = parsedMeta.slice(1).map(column => column.label);
                 this.displayedColumns = parsedMeta.slice(1).map(column => column.apiName);
@@ -5203,7 +5214,7 @@ class NxtDatatable {
         this.isButtons === undefined || this.isButtons === false ? this.isButtons = false : this.isButtons = true;
         this.addInlineRecord === undefined || this.addInlineRecord === false ? this.addInlineRecord = false : this.addInlineRecord = true;
         this.isSort === undefined || this.isSort === false ? this.isSort = false : this.isSort = true;
-        this.isPagination === undefined || this.isPagination === false ? this.isPagination = false : this.isPagination = true;
+        this.isPagination === undefined || this.isPagination === true ? this.isPagination = true : this.isPagination = false;
         this.isNosIndicator === undefined || this.isNosIndicator === false ? this.isNosIndicator = false : this.isNosIndicator = true;
         this.isEditable === undefined || this.isEditable === false ? this.isEditable = false : this.isEditable = true;
         this.headerLabels = this.from !== 'ngNxt' ? this.columns.map(column => column.label) : this.headerLabels;
@@ -5772,7 +5783,7 @@ class NxtDatatable {
         this.emitTableDataValue(this.data);
     }
     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 });
-    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" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", 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 *ngIf=\"totalRecords || totalCount\" 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 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\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>                            \n                        <input class=\"medium-font\" 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)\" 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\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" 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\" 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\" (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 (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\" [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\"\n                                    (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\" [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)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\" 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 === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" 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\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path 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\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (change)=\"checkedData(data)\">\n                                                                        <div class=\"medium-font 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\" 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\" (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\"\n                                        (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\" class=\"table-cell body-color\" [class.selected-cell]=\"isEditable && selectedColumn === column\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                {{ element[column] | date }}\n                                              </ng-container>\n                                              <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                  {{ element[column] | time }}\n                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\n                                                {{ 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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" 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)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    {{ element[column] | date }}\n                                                  </ng-container>\n                                                  <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                      {{ element[column] | time }}\n                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\n                                                    {{ 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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path 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\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \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') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [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') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\"  [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\" [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\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\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\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{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 \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path 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\"/></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\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (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\" 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\" (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\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (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}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;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}\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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
+    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" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", 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 *ngIf=\"totalRecords || totalCount\" 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 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\" 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\" 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)\" 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\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" 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\" 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\" (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 (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\" [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\"\n                                    (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\" [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)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\" 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 === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" 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\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path 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\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (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\" 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\" (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\"\n                                        (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\" class=\"table-cell body-color\" [class.selected-cell]=\"isEditable && selectedColumn === column\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\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                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" 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)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\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                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path 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\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \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') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"getValue(element,column)\"  [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') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"getValue(element,column)\" (ngModelChange)=\"updateEdit(i,$event)\"  [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" (ngModelChange)=\"updateEdit(i,$event)\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                 (ngModelChange)=\"updateEdit(i,$event)\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"getValue(element,column)\" (ngModelChange)=\"updateEdit(i,$event)\" [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\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\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\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{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 \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path 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\"/></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\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (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\" 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\" (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\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (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}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;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}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
             type: Component,
@@ -5790,7 +5801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         EditColumnTypePipe,
                         MatTooltipModule
                         // RowResizerDirective
-                    ], 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 *ngIf=\"totalRecords || totalCount\" 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 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\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>                            \n                        <input class=\"medium-font\" 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)\" 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\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" 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\" 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\" (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 (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\" [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\"\n                                    (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\" [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)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\" 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 === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" 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\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path 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\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (change)=\"checkedData(data)\">\n                                                                        <div class=\"medium-font 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\" 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\" (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\"\n                                        (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\" class=\"table-cell body-color\" [class.selected-cell]=\"isEditable && selectedColumn === column\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                {{ element[column] | date }}\n                                              </ng-container>\n                                              <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                  {{ element[column] | time }}\n                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\n                                                {{ 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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" 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)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    {{ element[column] | date }}\n                                                  </ng-container>\n                                                  <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                      {{ element[column] | time }}\n                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\n                                                    {{ 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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path 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\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \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') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [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') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\"  [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" (ngModelChange)=\"updateEdit(i,$event)\" [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\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\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\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{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 \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path 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\"/></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\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (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\" 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\" (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\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (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}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;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}\n"] }]
+                    ], 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 *ngIf=\"totalRecords || totalCount\" 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 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\" 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\" 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)\" 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\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" 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\" 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\" (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 (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\" [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\"\n                                    (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\" [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)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\" 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 === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" 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\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path 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\" 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\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (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\" 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\" (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\"\n                                        (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\" class=\"table-cell body-color\" [class.selected-cell]=\"isEditable && selectedColumn === column\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\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                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" 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)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\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                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\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)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path 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\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \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') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"getValue(element,column)\"  [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') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"getValue(element,column)\" (ngModelChange)=\"updateEdit(i,$event)\"  [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" (ngModelChange)=\"updateEdit(i,$event)\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                 (ngModelChange)=\"updateEdit(i,$event)\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"getValue(element,column)\" (ngModelChange)=\"updateEdit(i,$event)\" [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\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path 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\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" 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\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\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\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path 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\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{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 \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path 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\"/></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\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (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\" 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\" (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\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (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}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;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}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -11826,14 +11837,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /* tslint:disable */
 const VERSION = {
     "dirty": true,
-    "raw": "edbbbf0-dirty",
-    "hash": "edbbbf0",
+    "raw": "ef57944-dirty",
+    "hash": "ef57944",
     "distance": null,
     "tag": null,
     "semver": null,
-    "suffix": "edbbbf0-dirty",
+    "suffix": "ef57944-dirty",
     "semverString": null,
-    "version": "2.1.109"
+    "version": "2.1.113"
 };
 /* tslint:enable */
 
@@ -12343,63 +12354,13 @@ class PropertiesComponent {
     bookId;
     book;
     activeTab = 'attributes';
-    //SKS13MAR25 Form data models for table
-    attributesData = {
-        tableName: 'Employee Details',
-        inputTextAlignment: 'Left',
-        tableScaleSize: '06 - Full Scale',
-        rowChoice: '',
-        quickActionTools: {
-            edit: false,
-            view: false,
-            delete: false
-        },
-        addRecordEvent: false,
-        tableScrollEventChoice: {
-            horizontal: false,
-            vertical: false
-        }
-    };
-    // SKS13MAR25 Form data models for table
-    propertyData = {
-        tabelId: 'Emp_Tabel_01',
-        inputTextAlignment: 'Left',
-        requiredField: false,
-        readOnly: false,
-        hideLabel: false,
-        disabled: false,
-        hideElements: false,
-        masking: false,
-        helpText: 'Enter help message here',
-        defaultValue: 'Default Value',
-        referenceAnchor: 'http://source/rangernxt_bio_data/74/d.doc',
-        controllingElements: false,
-        isDependence: false,
-        newLine: false
-    };
-    // SKS13MAR25 Form data models for table
-    appearanceData = {
-        selectFont: 'Left',
-        fontColor: '#28343E',
-        hexCode: '#28343E',
-        fontSize: '300 - Medium',
-        fontWidth: 'Left',
-        backgroundColor: '#E2E2E2',
-        backgroundHexCode: '#E2E2E2',
-        referenceAnchor: 'http://source/rangernxt_bio_data/74/d.doc',
-        blankSpace: false
-    };
     // SKS13MAR25 active tab select
     setActiveTab(tab) {
         this.activeTab = tab;
     }
     // SKS13MAR25 table property save
     onSave() {
-        console.log('Saving data:', {
-            attributes: this.attributesData,
-            property: this.propertyData,
-            appearance: this.appearanceData
-        });
+        console.log('Saving data:');
     }
     // SKS13MAR25 table property reset
     onCancel() {
@@ -12454,33 +12415,19 @@ class PropertiesComponent {
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 // errorMessage - Error Msg-follow all element properties
                 { label: 'Error Msg', placeholder: 'Enter Text ', type: 'text', key: 'errorMessage' },
-                { label: 'Font', type: 'select', key: 'font',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto'] },
-                { label: 'Weight', type: 'select', key: 'fontWeight',
+                {
+                    label: 'Font', type: 'select', key: 'font',
+                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                },
+                {
+                    label: 'Weight', type: 'select', key: 'fontWeight',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
                         { value: '600', label: '600-Semi Bold' },
                         { value: '700', label: '700-Bold' }
-                    ] },
-                // { label: 'Size', unit: 'PX', type: 'number', key: 'size'  },
-                // { label: 'Align', type: 'align', key: 'textAlign',
-                //   options: [
-                //     { value: 'left', icon: 'textalign-left' },
-                //     { value: 'center', icon: 'align-center' },
-                //     { value: 'right', icon: 'align-right' },
-                //     { value: 'justifyleft', icon: 'align-justifyleft' },
-                //     { value: 'justifyright', icon: 'align-justifyright' }
-                //   ] },
-                // { label: 'Style', type: 'style',key: 'styles',
-                //   options: [
-                //     { value: 'italic', icon: 'italic' },
-                //     { value: 'bold', icon: 'bold' },
-                //     { value: 'underline', icon: 'underline' },
-                //     { value: 'texticon', icon: 'texticon' },
-                //     { value: 'capitalize', icon: 'capitalize' },
-                //     { value: 'resize', icon: 'resize' }
-                //   ] },
+                    ]
+                },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' }
             ],
             fieldProps: [
@@ -12553,23 +12500,6 @@ class PropertiesComponent {
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
             ]
         },
-        // 'Time': {
-        //   elementProps: [
-        //     { label: 'Label', placeholder: 'Enter Text', type: 'text',key: 'label' },
-        //     { label: 'Place Holder', placeholder: 'Enter Text', type: 'text' , key: 'placeholder'},
-        //     { label: 'Help Text', placeholder: 'Enter Text', type: 'text',key: 'helpText' },
-        //     { label: '', type: 'toggleGroup', key: 'toggleOptions' },
-        //     { label: 'Field Size', type: 'fieldSize', key: 'size' },
-        //     { label: 'Error Msg', placeholder: 'Enter Text', type: 'text',key: 'errorMessage' },
-        //   ],
-        //   fieldProps: [
-        //     { label: 'Field Required', type: 'radio' },
-        //     { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
-        //     { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
-        //     { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
-        //     { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
-        //   ]
-        // },
         'Email': {
             elementProps: [
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
@@ -12588,20 +12518,132 @@ class PropertiesComponent {
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
             ]
         },
+        "Table": {
+            "elementProps": [
+                { "label": "tableName", "placeholder": "Employee Details", "type": "text", "key": "tableName" },
+                { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
+                { "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
+                { "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
+                {
+                    "label": "quickActionTools",
+                    "type": "group",
+                    "key": "quickActionTools",
+                    "children": [
+                        { "label": "edit", "type": "toggle", "key": "edit" },
+                        { "label": "view", "type": "toggle", "key": "view" },
+                        { "label": "delete", "type": "toggle", "key": "delete" }
+                    ]
+                },
+                { "label": "addRecordEvent", "type": "toggle", "key": "addRecordEvent" },
+                {
+                    "label": "tableScrollEventChoice",
+                    "type": "group",
+                    "key": "tableScrollEventChoice",
+                    "children": [
+                        { "label": "horizontal", "type": "toggle", "key": "horizontal" },
+                        { "label": "vertical", "type": "toggle", "key": "vertical" }
+                    ]
+                }
+            ],
+            "fieldProps": [
+                { "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
+                { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
+                { "label": "requiredField", "type": "toggle", "key": "requiredField" },
+                { "label": "readOnly", "type": "toggle", "key": "readOnly" },
+                { "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
+                { "label": "disabled", "type": "toggle", "key": "disabled" },
+                { "label": "hideElements", "type": "toggle", "key": "hideElements" },
+                { "label": "masking", "type": "toggle", "key": "masking" },
+                { "label": "helpText", "placeholder": "Enter help message here", "type": "text", "key": "helpText" },
+                { "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
+                { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
+                { "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
+                { "label": "isDependence", "type": "toggle", "key": "isDependence" },
+                { "label": "newLine", "type": "toggle", "key": "newLine" }
+            ],
+            "appearance": [
+                { "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
+                { "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
+                { "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
+                { "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
+                { "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
+                { "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
+                { "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
+                { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
+                { "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
+            ]
+        },
+        "TableColumn": {
+            "elementProps": [
+                { "label": "tableName", "placeholder": "Employee Details", "type": "text", "key": "tableName" },
+                { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
+                { "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
+                { "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
+                {
+                    "label": "quickActionTools",
+                    "type": "group",
+                    "key": "quickActionTools",
+                    "children": [
+                        { "label": "edit", "type": "toggle", "key": "edit" },
+                        { "label": "view", "type": "toggle", "key": "view" },
+                        { "label": "delete", "type": "toggle", "key": "delete" }
+                    ]
+                },
+                { "label": "addRecordEvent", "type": "toggle", "key": "addRecordEvent" },
+                {
+                    "label": "tableScrollEventChoice",
+                    "type": "group",
+                    "key": "tableScrollEventChoice",
+                    "children": [
+                        { "label": "horizontal", "type": "toggle", "key": "horizontal" },
+                        { "label": "vertical", "type": "toggle", "key": "vertical" }
+                    ]
+                }
+            ],
+            "fieldProps": [
+                { "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
+                { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
+                { "label": "requiredField", "type": "toggle", "key": "requiredField" },
+                { "label": "readOnly", "type": "toggle", "key": "readOnly" },
+                { "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
+                { "label": "disabled", "type": "toggle", "key": "disabled" },
+                { "label": "hideElements", "type": "toggle", "key": "hideElements" },
+                { "label": "masking", "type": "toggle", "key": "masking" },
+                { "label": "helpText", "placeholder": "Enter help message here", "type": "text", "key": "helpText" },
+                { "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
+                { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
+                { "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
+                { "label": "isDependence", "type": "toggle", "key": "isDependence" },
+                { "label": "newLine", "type": "toggle", "key": "newLine" }
+            ],
+            "appearance": [
+                { "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
+                { "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
+                { "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
+                { "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
+                { "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
+                { "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
+                { "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
+                { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
+                { "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
+            ]
+        },
         'File': {
             elementProps: [
                 { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
                 { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
                 { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
                 { label: 'Order', type: 'number', key: 'order' },
-                { label: 'Support Type', type: 'select', key: 'supportType', options: [
+                {
+                    label: 'Support Type', type: 'select', key: 'supportType', options: [
                         { label: 'Images (JPEG, PNG, GIF)', value: 'image/*', extensions: ['.jpg', '.jpeg', '.png', '.gif'] },
                         { label: 'Audio (MP3, WAV, AIFF)', value: 'audio/*', extensions: ['.mp3', '.wav', '.aiff'] },
                         { label: 'Video (MP4, AVI, HEVC)', value: 'video/*', extensions: ['.mp4', '.avi', '.hevc'] },
                         { label: 'Documents (DOC, DOCX, PPT, PDF)', value: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint', extensions: ['.doc', '.docx', '.ppt', '.pdf'] },
                         { label: 'Executables (EXE, BAD, SH)', value: 'application/x-msdownload,application/x-sh', extensions: ['.exe', '.bad', '.sh'] },
                         { label: 'Archives (ZIP, RAR, Git-hub)', value: 'application/zip,application/x-rar-compressed,application/x-git', extensions: ['.zip', '.rar', '.git'] }
-                    ] },
+                    ]
+                },
                 { label: '', type: 'toggleGroup', key: 'toggleOptions' },
                 { label: 'Field Size', type: 'fieldSize', key: 'size' },
                 { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
@@ -12771,56 +12813,7 @@ class PropertiesComponent {
                 { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
                 { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
             ]
-        },
-        'Table': {
-            elementProps: [
-                { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
-                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
-                { label: 'Order', type: 'number', key: 'order' },
-                { label: 'Field Size', type: 'fieldSize', key: 'size' },
-                { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' }
-            ],
-            fieldProps: [
-                { label: 'Field Required', type: 'radio' },
-                { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
-                { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
-                { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' },
-            ]
-        },
-        //   'Book': {
-        //     elementProps: [
-        //       { label: 'Label', placeholder: 'Enter Text', type: 'text',key: 'questionText' },
-        //       { label: 'Place Holder', placeholder: 'Enter Text', type: 'text' , key: 'question'},
-        //       { label: 'Help Text', placeholder: 'Enter Text', type: 'text',key: 'helpText' },
-        //       { label: '', type: 'toggleGroup', key: 'toggleOptions' },
-        //       { label: 'Field Size', type: 'fieldSize', key: 'size' },
-        //       { label: 'Error Msg', placeholder: 'Enter Text', type: 'text',key: 'errorMessage' },
-        //     ],
-        //     fieldProps: [
-        //       { label: 'Field Required', type: 'radio' },
-        //       { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
-        //       { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
-        //       { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
-        //       { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
-        //     ]
-        //   },
-        //   'Button': {
-        //     elementProps: [
-        //       { label: 'Label', placeholder: 'Enter Text', type: 'text',key: 'questionText' },
-        //       { label: 'Place Holder', placeholder: 'Enter Text', type: 'text' , key: 'question'},
-        //       { label: 'Help Text', placeholder: 'Enter Text', type: 'text',key: 'helpText' },
-        //       { label: '', type: 'toggleGroup', key: 'toggleOptions' },
-        //       { label: 'Field Size', type: 'fieldSize', key: 'size' },
-        //       { label: 'Error Msg', placeholder: 'Enter Text', type: 'text',key: 'errorMessage' },
-        //     ],
-        //     fieldProps: [
-        //       { label: 'Field Required', type: 'radio' },
-        //       { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
-        //       { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
-        //       { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
-        //       { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
-        //     ]
-        //   },
+        }
     };
     constructor(http, formBuilderService) {
         this.http = http;
@@ -12943,11 +12936,11 @@ class PropertiesComponent {
         this.formButtonHandler.emit(this.formBuilderService.downloadElement());
     }
     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 });
-    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 *ngIf=\"selectedElement?.type !== 'Table'\" class=\"properties\">\n\n  <!-- Design Header Section -->\n  <div class=\"design-header\">\n    <h1 class=\"header-title\">Properties</h1>\n  </div>\n\n  <div class=\"all-properties\">\n    <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n    <!-- Element Properties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <details class=\"first-properties\" open>\n      <summary class=\"text-sm \">Elements Properties</summary>\n      <div class=\"inner-content\" *ngIf=\"getProperties()\">\n        {{selectedElement?.type}}\n        <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n          <div class=\"flex-items-center\">\n            <label class=\"text-sm\">{{ prop.label }}</label>\n            <div class=\"label-properties\">\n\n              <!-- Text Input -->\n              <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n                [value]=\"headerSelect ? book.records[0].title : selectedElement[prop.key]\"\n                (input)=\"headerSelect ? updateTitle($event.target.value) : updateProperty(prop.key, $event.target.value)\"\n                [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" class=\"text-sm1 \" />\n\n              <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{\n                selectedElement.helpText }}</div>\n\n              <!-- Font Selection -->\n              <div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n                <!-- <label>{{ prop.label }}</label> -->\n                <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\"\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              <input *ngIf=\"prop.key === 'order'\" type=\"number\" [value]=\"selectedElement.order\"\n                (input)=\"updateProperty('order', $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'\" class=\"file\"\n                [value]=\"selectedElement[prop.key]\" (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'\" class=\"font-weight\">\n                <!-- <label>{{ prop.label }}</label> -->\n                <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\"\n                  [value]=\"selectedElement?.fontWeight\" (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              <!-- 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'\" class=\"font-align\">\n                <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n                  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [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'\" class=\"font-style\">\n                <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n                  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [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'\" class=\"field-size-controls\">\n                <div class=\"size-group\">\n                  <label class=\"size-label\">Width</label>\n                  <div class=\"value-container\">\n                    <input type=\"number\" [value]=\"selectedElement?.size\"\n                      (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\" />\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </details>\n\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <details class=\"second-property\">\n      <summary class=\"text-font-medium\">Field Elements Properties</summary>\n      <div class=\"space-y-4\" *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=\"flex-items-center \">\n            <label class=\"text-sm\">{{ prop.label }}</label>\n\n            <!-- Input Box -->\n            <div class=\"input-box-field\">\n              <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n                [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n            </div>\n\n            <!-- Radio Group -->\n            <div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\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    </details>\n\n    <div class=\"design-footer\">\n      <button class=\"btn\">Cancel</button>\n      <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n    </div>\n\n  </div>\n</div>\n\n<!-- SKS13MAR25 table property -->\n<div  *ngIf=\"selectedElement?.type === 'Table'\" class=\"container\">\n  <div class=\"tabs\">\n    <div \n      class=\"tab\" \n      [ngClass]=\"{'active': activeTab === 'attributes'}\" \n      (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div \n      class=\"tab\" \n      [ngClass]=\"{'active': activeTab === 'property'}\" \n      (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div \n      class=\"tab\" \n      [ngClass]=\"{'active': activeTab === 'appearance'}\" \n      (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <!-- Attributes Tab Content -->\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <div class=\"form-group\">\n      <label class=\"required\">Table Name</label>\n      <input type=\"text\" [(ngModel)]=\"attributesData.tableName\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Input Text Alignment</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"attributesData.inputTextAlignment\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Table Scale Size</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"attributesData.tableScaleSize\">\n          <option value=\"06 - Full Scale\">06 - Full Scale</option>\n          <option value=\"05 - Large\">05 - Large</option>\n          <option value=\"04 - Medium\">04 - Medium</option>\n          <option value=\"03 - Small\">03 - Small</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Row Choice</label>\n      <input type=\"text\" placeholder=\"Enter No of Rows in columns\" [(ngModel)]=\"attributesData.rowChoice\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Quick Action Tools</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"edit\" [(ngModel)]=\"attributesData.quickActionTools.edit\">\n          <div for=\"edit\">Edit</div>\n          <span class=\"icon edit-icon\">\u2713</span>\n        </div>\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"view\" [(ngModel)]=\"attributesData.quickActionTools.view\">\n          <div for=\"view\">View</div>\n          <span class=\"icon view-icon\">\uD83D\uDC41</span>\n        </div>\n      </div>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"delete\" [(ngModel)]=\"attributesData.quickActionTools.delete\">\n          <div for=\"delete\">Delete</div>\n          <span class=\"icon delete-icon\">\uD83D\uDDD1</span>\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Add Record Event</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"addButton\" [(ngModel)]=\"attributesData.addRecordEvent\">\n          <div for=\"addButton\">Add Button Field</div>\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Table Scroll Event Choice</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"horizontal\" [(ngModel)]=\"attributesData.tableScrollEventChoice.horizontal\">\n          <div for=\"horizontal\">Horizontal</div>\n        </div>\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"vertical\" [(ngModel)]=\"attributesData.tableScrollEventChoice.vertical\">\n          <div for=\"vertical\">Vertical</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Property Tab Content -->\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <div class=\"form-group\">\n      <label class=\"required\">Tabel Id</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.tabelId\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Input Text Alignment</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"propertyData.inputTextAlignment\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"requiredField\" [(ngModel)]=\"propertyData.requiredField\">\n        <div for=\"requiredField\">Required Field</div>\n      </div>\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"readOnly\" [(ngModel)]=\"propertyData.readOnly\">\n        <div for=\"readOnly\">Read Only</div>\n      </div>\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"hideLabel\" [(ngModel)]=\"propertyData.hideLabel\">\n        <div for=\"hideLabel\">Hide Label Title</div>\n      </div>\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"disabled\" [(ngModel)]=\"propertyData.disabled\">\n        <div for=\"disabled\">Disabled</div>\n      </div>\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"hideElements\" [(ngModel)]=\"propertyData.hideElements\">\n        <div for=\"hideElements\">Hide Elements</div>\n      </div>\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"masking\" [(ngModel)]=\"propertyData.masking\">\n        <div for=\"masking\">Masking</div>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Help Text</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.helpText\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Default Value</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.defaultValue\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Reference / Anchor Object</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.referenceAnchor\">\n    </div>\n    \n    <div class=\"divider\"></div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Advanced Property</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"controllingElements\" [(ngModel)]=\"propertyData.controllingElements\">\n          <div for=\"controllingElements\">Controlling Elements</div>\n        </div>\n      </div>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"isDependence\" [(ngModel)]=\"propertyData.isDependence\">\n          <div for=\"isDependence\">Is Dependence</div>\n        </div>\n      </div>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"newLine\" [(ngModel)]=\"propertyData.newLine\">\n          <div for=\"newLine\">New Line</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Appearance Tab Content -->\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div class=\"form-group\">\n      <label class=\"required\">Select Font</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"appearanceData.selectFont\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Font Color</label>\n      <div class=\"color-picker-row\">\n        <div class=\"color-picker-container\"> \n          <input class=\"color-box\" type=\"color\" [value]=\"appearanceData.fontColor\"/>\n        </div>\n        <span class=\"hex-label\">HEX Code</span>\n        <input type=\"text\" class=\"hex-input\" [(ngModel)]=\"appearanceData.hexCode\">\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Font Size</label>\n      <input type=\"text\" [(ngModel)]=\"appearanceData.fontSize\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Font Width</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"appearanceData.fontWidth\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Background Color</label>\n      <div class=\"color-picker-row\">\n        <div class=\"color-picker-container\">\n          <input class=\"color-box\" type=\"color\" [value]=\"appearanceData.backgroundColor\"/>\n        </div>\n        <span class=\"hex-label\">HEX Code</span>\n        <input type=\"text\" class=\"hex-input\" [(ngModel)]=\"appearanceData.backgroundHexCode\">\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Reference / Anchor Object</label>\n      <input type=\"text\" [(ngModel)]=\"appearanceData.referenceAnchor\">\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"blankSpace\" [(ngModel)]=\"appearanceData.blankSpace\">\n        <div for=\"blankSpace\">Blank Space</div>\n      </div>\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
+    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 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[prop.key]\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : 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          <!-- order -->\n          <input *ngIf=\"prop.key === 'order'\" type=\"number\" [value]=\"selectedElement.order\"\n            (input)=\"updateProperty('order', $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          <!-- 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div *ngIf=\"selectedElement?.type !== 'Table'\" class=\"properties\">\n\n  <!-- Design Header Section -->\n  <div class=\"design-header\">\n    <h1 class=\"header-title\">Properties</h1>\n  </div>\n\n  <div class=\"all-properties\">\n    <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n    <!-- Element Properties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <details class=\"first-properties\" open>\n      <summary class=\"text-sm \">Elements Properties</summary>\n      <div class=\"inner-content\" *ngIf=\"getProperties()\">\n        {{selectedElement?.type}}\n        <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n          <div class=\"flex-items-center\">\n            <label class=\"text-sm\">{{ prop.label }}</label>\n            <div class=\"label-properties\">\n\n              <!-- Text Input -->\n              <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n                [value]=\"headerSelect ? book.records[0].title : selectedElement[prop.key]\"\n                (input)=\"headerSelect ? updateTitle($event.target.value) : updateProperty(prop.key, $event.target.value)\"\n                [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" class=\"text-sm1 \" />\n\n              <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{\n                selectedElement.helpText }}</div>\n\n              <!-- Font Selection -->\n              <div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n                <!-- <label>{{ prop.label }}</label> -->\n                <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\"\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              <input *ngIf=\"prop.key === 'order'\" type=\"number\" [value]=\"selectedElement.order\"\n                (input)=\"updateProperty('order', $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'\" class=\"file\"\n                [value]=\"selectedElement[prop.key]\" (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'\" class=\"font-weight\">\n                <!-- <label>{{ prop.label }}</label> -->\n                <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\"\n                  [value]=\"selectedElement?.fontWeight\" (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              <!-- 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'\" class=\"font-align\">\n                <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n                  [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [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'\" class=\"font-style\">\n                <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n                  [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [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'\" class=\"field-size-controls\">\n                <div class=\"size-group\">\n                  <label class=\"size-label\">Width</label>\n                  <div class=\"value-container\">\n                    <input type=\"number\" [value]=\"selectedElement?.size\"\n                      (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\" />\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </details>\n\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <details class=\"second-property\">\n      <summary class=\"text-font-medium\">Field Elements Properties</summary>\n      <div class=\"space-y-4\" *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=\"flex-items-center \">\n            <label class=\"text-sm\">{{ prop.label }}</label>\n\n            <!-- Input Box -->\n            <div class=\"input-box-field\">\n              <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n                [value]=\"selectedElement[prop.key]\" (input)=\"updateProperty(prop.key, $event.target.value)\" />\n            </div>\n\n            <!-- Radio Group -->\n            <div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\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    </details>\n\n    <div class=\"design-footer\">\n      <button class=\"btn\">Cancel</button>\n      <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n    </div>\n\n  </div>\n</div>\n\n<!-- SKS13MAR25 table property -->\n<div  *ngIf=\"selectedElement?.type === 'Table'\" class=\"container\">\n  <div class=\"tabs\">\n    <div \n      class=\"tab\" \n      [ngClass]=\"{'active': activeTab === 'attributes'}\" \n      (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div \n      class=\"tab\" \n      [ngClass]=\"{'active': activeTab === 'property'}\" \n      (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div \n      class=\"tab\" \n      [ngClass]=\"{'active': activeTab === 'appearance'}\" \n      (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <!-- Attributes Tab Content -->\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <div class=\"form-group\">\n      <label class=\"required\">Table Name</label>\n      <input type=\"text\" [(ngModel)]=\"attributesData.tableName\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Input Text Alignment</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"attributesData.inputTextAlignment\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Table Scale Size</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"attributesData.tableScaleSize\">\n          <option value=\"06 - Full Scale\">06 - Full Scale</option>\n          <option value=\"05 - Large\">05 - Large</option>\n          <option value=\"04 - Medium\">04 - Medium</option>\n          <option value=\"03 - Small\">03 - Small</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Row Choice</label>\n      <input type=\"text\" placeholder=\"Enter No of Rows in columns\" [(ngModel)]=\"attributesData.rowChoice\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Quick Action Tools</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"edit\" [(ngModel)]=\"attributesData.quickActionTools.edit\">\n          <div for=\"edit\">Edit</div>\n          <span class=\"icon edit-icon\">\u2713</span>\n        </div>\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"view\" [(ngModel)]=\"attributesData.quickActionTools.view\">\n          <div for=\"view\">View</div>\n          <span class=\"icon view-icon\">\uD83D\uDC41</span>\n        </div>\n      </div>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"delete\" [(ngModel)]=\"attributesData.quickActionTools.delete\">\n          <div for=\"delete\">Delete</div>\n          <span class=\"icon delete-icon\">\uD83D\uDDD1</span>\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Add Record Event</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"addButton\" [(ngModel)]=\"attributesData.addRecordEvent\">\n          <div for=\"addButton\">Add Button Field</div>\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Table Scroll Event Choice</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"horizontal\" [(ngModel)]=\"attributesData.tableScrollEventChoice.horizontal\">\n          <div for=\"horizontal\">Horizontal</div>\n        </div>\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"vertical\" [(ngModel)]=\"attributesData.tableScrollEventChoice.vertical\">\n          <div for=\"vertical\">Vertical</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Property Tab Content -->\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <div class=\"form-group\">\n      <label class=\"required\">Tabel Id</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.tabelId\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Input Text Alignment</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"propertyData.inputTextAlignment\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"requiredField\" [(ngModel)]=\"propertyData.requiredField\">\n        <div for=\"requiredField\">Required Field</div>\n      </div>\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"readOnly\" [(ngModel)]=\"propertyData.readOnly\">\n        <div for=\"readOnly\">Read Only</div>\n      </div>\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"hideLabel\" [(ngModel)]=\"propertyData.hideLabel\">\n        <div for=\"hideLabel\">Hide Label Title</div>\n      </div>\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"disabled\" [(ngModel)]=\"propertyData.disabled\">\n        <div for=\"disabled\">Disabled</div>\n      </div>\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"hideElements\" [(ngModel)]=\"propertyData.hideElements\">\n        <div for=\"hideElements\">Hide Elements</div>\n      </div>\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"masking\" [(ngModel)]=\"propertyData.masking\">\n        <div for=\"masking\">Masking</div>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Help Text</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.helpText\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Default Value</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.defaultValue\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Reference / Anchor Object</label>\n      <input type=\"text\" [(ngModel)]=\"propertyData.referenceAnchor\">\n    </div>\n    \n    <div class=\"divider\"></div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Advanced Property</label>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"controllingElements\" [(ngModel)]=\"propertyData.controllingElements\">\n          <div for=\"controllingElements\">Controlling Elements</div>\n        </div>\n      </div>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"isDependence\" [(ngModel)]=\"propertyData.isDependence\">\n          <div for=\"isDependence\">Is Dependence</div>\n        </div>\n      </div>\n      <div class=\"checkbox-row\">\n        <div class=\"checkbox-group\">\n          <input type=\"checkbox\" id=\"newLine\" [(ngModel)]=\"propertyData.newLine\">\n          <div for=\"newLine\">New Line</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Appearance Tab Content -->\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div class=\"form-group\">\n      <label class=\"required\">Select Font</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"appearanceData.selectFont\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Font Color</label>\n      <div class=\"color-picker-row\">\n        <div class=\"color-picker-container\"> \n          <input class=\"color-box\" type=\"color\" [value]=\"appearanceData.fontColor\"/>\n        </div>\n        <span class=\"hex-label\">HEX Code</span>\n        <input type=\"text\" class=\"hex-input\" [(ngModel)]=\"appearanceData.hexCode\">\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Font Size</label>\n      <input type=\"text\" [(ngModel)]=\"appearanceData.fontSize\">\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Font Width</label>\n      <div class=\"select-container\">\n        <select [(ngModel)]=\"appearanceData.fontWidth\">\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Background Color</label>\n      <div class=\"color-picker-row\">\n        <div class=\"color-picker-container\">\n          <input class=\"color-box\" type=\"color\" [value]=\"appearanceData.backgroundColor\"/>\n        </div>\n        <span class=\"hex-label\">HEX Code</span>\n        <input type=\"text\" class=\"hex-input\" [(ngModel)]=\"appearanceData.backgroundHexCode\">\n      </div>\n    </div>\n    \n    <div class=\"form-group\">\n      <label class=\"required\">Reference / Anchor Object</label>\n      <input type=\"text\" [(ngModel)]=\"appearanceData.referenceAnchor\">\n    </div>\n    \n    <div class=\"checkbox-row\">\n      <div class=\"checkbox-group\">\n        <input type=\"checkbox\" id=\"blankSpace\" [(ngModel)]=\"appearanceData.blankSpace\">\n        <div for=\"blankSpace\">Blank Space</div>\n      </div>\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"] }]
+            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 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[prop.key]\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : 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          <!-- order -->\n          <input *ngIf=\"prop.key === 'order'\" type=\"number\" [value]=\"selectedElement.order\"\n            (input)=\"updateProperty('order', $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          <!-- 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"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
                 type: Output
             }], selectedElementType: [{