@rangertechnologies/ngnxt 2.1.311 → 2.1.312

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/rangertechnologies-ngnxt.mjs +5 -6
  2. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/rangertechnologies-ngnxt-2.1.312.tgz +0 -0
  5. package/rangertechnologies-ngnxt-2.1.311.tgz +0 -0
package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED
@@ -48298,13 +48298,13 @@ class nxtDropdown {
48298
48298
  }
48299
48299
  }
48300
48300
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: nxtDropdown, deps: [{ token: CountryService }, { token: TranslationService }, { token: ChangeService }, { token: DataService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component });
48301
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: nxtDropdown, isStandalone: true, selector: "nxt-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", readOnly: "readOnly", error: "error", fromShengel: "fromShengel", question: "question", mode: "mode", from: "from", padding: "padding", onlyView: "onlyView", labelFont: "labelFont", label: "label", labelColor: "labelColor", inputTextColor: "inputTextColor", labelSize: "labelSize", inputValueSize: "inputValueSize", labelWeight: "labelWeight", inputWeight: "inputWeight", showLabel: "showLabel", inputBorder: "inputBorder", inputBgColor: "inputBgColor", inputIconLeftSrc: "inputIconLeftSrc" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue || null\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"labelFont\"\n [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n [labelColor]=\"labelColor\"\n [inputTextColor]=\"inputTextColor\"\n [labelSize]=\"labelSize\"\n [inputValueSize]=\"inputValueSize\"\n [labelWeight]=\"labelWeight\"\n [inputWeight]=\"inputWeight\"\n [showLabel]=\"showLabel\"\n [readOnly]=\"readOnly\"\n [padding]=\"padding\"\n [inputBorder]=\"inputBorder\" \n svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"placeholder\"\n [required]=\"question?.isOptional\" \n [inputBgColor]=\" (from === 'normalDropDown' && !question?.inputBgColor) ? '#eff8ff' : (question?.inputBgColor || '#ffffff')\"\n [inputId]=\"question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"inputIconLeftSrc\"\n (toggleEmit)=\"toggle()\"\n (clearInputEmit)=\"clearSelection()\"\n [question]=\"question\"\n [onlyView]=\"onlyView\"\n (selectEmit)=\"selectChange({value:$event})\"\n (inputValue)=\"inputValue($event.value,$event.question)\"\n >\n </nxt-input>\n\n <!-- SKS11JUN25 Dropdown list -->\n <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options?.length > 0\">\n <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n {{item[apiMeta.field]}}\n } @else {\n {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n }\n </li>\n </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
48301
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: nxtDropdown, isStandalone: true, selector: "nxt-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", readOnly: "readOnly", error: "error", fromShengel: "fromShengel", question: "question", mode: "mode", from: "from", padding: "padding", onlyView: "onlyView", labelFont: "labelFont", label: "label", labelColor: "labelColor", inputTextColor: "inputTextColor", labelSize: "labelSize", inputValueSize: "inputValueSize", labelWeight: "labelWeight", inputWeight: "inputWeight", showLabel: "showLabel", inputBorder: "inputBorder", inputBgColor: "inputBgColor", inputIconLeftSrc: "inputIconLeftSrc" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue || null\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"labelFont\"\n [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n [labelColor]=\"labelColor\"\n [inputTextColor]=\"inputTextColor\"\n [labelSize]=\"labelSize\"\n [inputValueSize]=\"inputValueSize\"\n [labelWeight]=\"labelWeight\"\n [inputWeight]=\"inputWeight\"\n [showLabel]=\"showLabel\"\n [readOnly]=\"readOnly\"\n [padding]=\"padding\"\n [inputBorder]=\"inputBorder\" \n svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"placeholder\"\n [required]=\"question?.isOptional\" \n [inputBgColor]=\" (from === 'normalDropDown' && !inputBgColor) ? '#eff8ff' : (inputBgColor || '#ffffff')\"\n [inputId]=\"question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"inputIconLeftSrc\"\n (toggleEmit)=\"toggle()\"\n (clearInputEmit)=\"clearSelection()\"\n [question]=\"question\"\n [onlyView]=\"onlyView\"\n (selectEmit)=\"selectChange({value:$event})\"\n (inputValue)=\"inputValue($event.value,$event.question)\"\n >\n </nxt-input>\n\n <!-- SKS11JUN25 Dropdown list -->\n <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options?.length > 0\">\n <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n {{item[apiMeta.field]}}\n } @else {\n {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n }\n </li>\n </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
48302
48302
  }
48303
48303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: nxtDropdown, decorators: [{
48304
48304
  type: Component,
48305
48305
  args: [{ selector: 'nxt-dropdown', standalone: true, imports: [
48306
48306
  CommonModule, FormsModule, NxtInput, NxtCustomTranslatePipe
48307
- ], template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue || null\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"labelFont\"\n [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n [labelColor]=\"labelColor\"\n [inputTextColor]=\"inputTextColor\"\n [labelSize]=\"labelSize\"\n [inputValueSize]=\"inputValueSize\"\n [labelWeight]=\"labelWeight\"\n [inputWeight]=\"inputWeight\"\n [showLabel]=\"showLabel\"\n [readOnly]=\"readOnly\"\n [padding]=\"padding\"\n [inputBorder]=\"inputBorder\" \n svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"placeholder\"\n [required]=\"question?.isOptional\" \n [inputBgColor]=\" (from === 'normalDropDown' && !question?.inputBgColor) ? '#eff8ff' : (question?.inputBgColor || '#ffffff')\"\n [inputId]=\"question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"inputIconLeftSrc\"\n (toggleEmit)=\"toggle()\"\n (clearInputEmit)=\"clearSelection()\"\n [question]=\"question\"\n [onlyView]=\"onlyView\"\n (selectEmit)=\"selectChange({value:$event})\"\n (inputValue)=\"inputValue($event.value,$event.question)\"\n >\n </nxt-input>\n\n <!-- SKS11JUN25 Dropdown list -->\n <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options?.length > 0\">\n <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n {{item[apiMeta.field]}}\n } @else {\n {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n }\n </li>\n </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"] }]
48307
+ ], template: "<div #dropdownWrapper class=\"dropdown-close\">\n <nxt-input \n [type]=\"'dropdown'\"\n [mode]=\"mode\"\n [from]=\"from\"\n [value]=\"selectedValue || null\"\n [selectedOption]=\"selectedOption\"\n (onFocus)=\"getOptions()\"\n [labelFont]=\"labelFont\"\n [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n [labelColor]=\"labelColor\"\n [inputTextColor]=\"inputTextColor\"\n [labelSize]=\"labelSize\"\n [inputValueSize]=\"inputValueSize\"\n [labelWeight]=\"labelWeight\"\n [inputWeight]=\"inputWeight\"\n [showLabel]=\"showLabel\"\n [readOnly]=\"readOnly\"\n [padding]=\"padding\"\n [inputBorder]=\"inputBorder\" \n svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"placeholder\"\n [required]=\"question?.isOptional\" \n [inputBgColor]=\" (from === 'normalDropDown' && !inputBgColor) ? '#eff8ff' : (inputBgColor || '#ffffff')\"\n [inputId]=\"question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"inputIconLeftSrc\"\n (toggleEmit)=\"toggle()\"\n (clearInputEmit)=\"clearSelection()\"\n [question]=\"question\"\n [onlyView]=\"onlyView\"\n (selectEmit)=\"selectChange({value:$event})\"\n (inputValue)=\"inputValue($event.value,$event.question)\"\n >\n </nxt-input>\n\n <!-- SKS11JUN25 Dropdown list -->\n <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options?.length > 0\">\n <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n {{item[apiMeta.field]}}\n } @else {\n {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n }\n </li>\n </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"] }]
48308
48308
  }], ctorParameters: () => [{ type: CountryService }, { type: TranslationService }, { type: ChangeService }, { type: DataService }, { type: StorageService }], propDecorators: { options: [{
48309
48309
  type: Input
48310
48310
  }], placeholder: [{
@@ -52737,7 +52737,7 @@ class NxtDatatable {
52737
52737
  this.sortData(this.currentSortColumn, this.currentSortDirection, undefined, from);
52738
52738
  }
52739
52739
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NxtDatatable, deps: [{ token: CountryService }, { token: StorageService }, { token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
52740
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", 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", isPagination: "isPagination", isListViews: "isListViews", id: "id", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons", isButtonLoading: "isButtonLoading", isPreview: "isPreview", groupFilter: "groupFilter", groupFilterConfig: "groupFilterConfig", groupFilterColumn: "groupFilterColumn", onlyView: "onlyView", tableHeight: "tableHeight" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", onSaveData: "onSaveData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableParamsEmit: "NxtTableParamsEmit" }, 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}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center;\" \n [style.padding-bottom]=\" id && (isListViews !== false && isListViews !== 'false') && from !== 'formBuilder' ? '0px' : '5px' \">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\" class=\"ms-2 me-2\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : '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; padding-bottom: 5px;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\" [ngStyle]=\"{ minHeight: searchFilter ? '233px' : '' }\">\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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2714</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}}; cursor: pointer;\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}}; cursor: pointer\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\" style=\"cursor: pointer\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentColumns; let i = index; trackBy: trackByColumn\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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:absolute;right:0;top:0;width:1px;height:46px;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView"], outputs: ["searchValueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableData", "tableFilterArray", "selectedView", "displayedColumns", "title", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUpload,
52740
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", 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", isPagination: "isPagination", isListViews: "isListViews", id: "id", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons", isButtonLoading: "isButtonLoading", isPreview: "isPreview", groupFilter: "groupFilter", groupFilterConfig: "groupFilterConfig", groupFilterColumn: "groupFilterColumn", onlyView: "onlyView", tableHeight: "tableHeight" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", onSaveData: "onSaveData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableParamsEmit: "NxtTableParamsEmit" }, 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}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center;\" \n [style.padding-bottom]=\" id && (isListViews !== false && isListViews !== 'false') && from !== 'formBuilder' ? '0px' : '5px' \">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\" class=\"ms-2 me-2\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : '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; padding-bottom: 5px;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\" [ngStyle]=\"{ minHeight: searchFilter ? '233px' : '' }\">\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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"nxt-resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2714</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}}; cursor: pointer;\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}}; cursor: pointer\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\" style=\"cursor: pointer\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <!-- Data Columns -->\n <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n \n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .nxt-resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView"], outputs: ["searchValueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableData", "tableFilterArray", "selectedView", "displayedColumns", "title", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUpload,
52741
52741
  QuestionByRowPipe]] });
52742
52742
  }
52743
52743
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NxtDatatable, decorators: [{
@@ -52763,7 +52763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
52763
52763
  QuestionByRowPipe,
52764
52764
  NxtDatePipe
52765
52765
  // RowResizerDirective
52766
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center;\" \n [style.padding-bottom]=\" id && (isListViews !== false && isListViews !== 'false') && from !== 'formBuilder' ? '0px' : '5px' \">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\" class=\"ms-2 me-2\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : '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; padding-bottom: 5px;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\" [ngStyle]=\"{ minHeight: searchFilter ? '233px' : '' }\">\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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2714</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}}; cursor: pointer;\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}}; cursor: pointer\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\" style=\"cursor: pointer\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n <!-- Data Columns -->\n <div *ngFor=\"let col of currentColumns; let i = index; trackBy: trackByColumn\" class=\"skeleton-cell \"></div>\n\n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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:absolute;right:0;top:0;width:1px;height:46px;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"] }]
52766
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n <div>\n <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" class=\"d-flex justify-content-center table-title align-text-center\">\n {{title}}\n </div>\n <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"align-items: center;\" \n [style.padding-bottom]=\" id && (isListViews !== false && isListViews !== 'false') && from !== 'formBuilder' ? '0px' : '5px' \">\n <div class=\"flex\">\n <!-- SKS26APR25 List View Filter -->\n <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n </app-list-view-filter>\n <!-- SKS15OCT25 group filter -->\n <div *ngIf=\"groupFilter\">\n <nxt-button class=\"data-table-fsbtn\"\n [type]=\"'group'\" [selector]=\"true\"\n (buttonClickEmit)=\"groupFilterEmit($event)\"\n [buttonConfig]=\"groupFilterConfig.buttonConfig\" class=\"ms-2 me-2\">\n </nxt-button>\n </div>\n <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n {{ 'NOS' | nxtCustomTranslate : '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; padding-bottom: 5px;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\" style=\"font-size: 13px;\"\n (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n [value]=\"searchBoxValue || ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\"\n [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n stroke=\"#B0ADAB\" />\n <path\n d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n fill=\"#B0ADAB\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\"\n [ngClass]=\"{ 'resizing': isResizing }\"\n [ngStyle]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '233px' : '100px' }\"\n #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container>\n <div class=\"custom-table\" [ngStyle]=\"{ minHeight: searchFilter ? '233px' : '' }\">\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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!-- SKS17DEC25 Serial Number Column Header -->\n <div class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n <div class=\"column-header\">\n <div class=\"ellipsis\">No.</div>\n </div>\n <!-- SKS17DEC25 resize -->\n <div class=\"nxt-resize-handle\"></div>\n </div>\n <!--SKS15FEB25 Data Columns -->\n <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-cell nxtTableHeader nxt-head-color\"\n [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n [style.color]=\"column?.style?.color\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <div class=\"columnDiv\">\n <div class=\"column-header\" [style.width]=\"column.width || '50px'\">\n <!-- Add close button for selected column -->\n <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n class=\"close-column-btn\"\n (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n \u2715\n </div>\n <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n @if(column.labelPath){\n {{ column.labelPath | nxtCustomTranslate : column.label }}\n }\n @else if(from !== 'formBuilder' || from !== 'questionBook') {\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n } \n @else if(column.uniqueIdentifier) {\n @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n }\n }\n @else {\n {{ column.label }}\n }\n </div>\n <div>\n <svg *ngIf=\"column.filter\"\n (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <!--SKS15FEB25 Red dot for active filter -->\n <circle\n *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n </svg>\n <div *ngIf=\"column.sort\"\n class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n === 'desc' ? '\u2193' : '' }}\n </span>\n <span\n *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n class=\"search-component position-absolute\"\n (click)=\"$event.stopPropagation();\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n viewBox=\"0 0 24 22\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n stroke=\"#787486\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <input class=\"width-100\" type=\"text\"\n placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search' }}\"\n [(ngModel)]=\"searchText\"\n class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n class=\"close-icon\" width=\"24\" height=\"24\"\n viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M14.83 14.83L9.16998 9.17001\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\"\n style=\"gap: 5px;\">\n <input type=\"checkbox\"\n [checked]=\"isSelected(data)\" [value]=\"data\"\n [id]=\"data\" (change)=\"checkedData(data)\">\n <div class=\"ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Enhanced resize handle -->\n <div class=\"nxt-resize-handle\" \n [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize column\">\n </div>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n class=\"table-cell nxt-head-color actionCol sticky-column\"\n [style.width]=\"'150px'\"\n [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n [style.color]=\"currentColumns?.[0]?.style?.color\"\n style=\"padding: 12px !important;\">\n <div style=\"display: flex; align-items: center; justify-content: center; font-size: 14px;\">\n {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\" *ngIf=\"!isLoading\">\n <div *ngFor=\"let element of dataSource.data; let i = index; trackBy: trackByRow\" class=\"table-row\"\n (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection?.toggle(element), element)\"\n [checked]=\"selection?.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n <!-- SKS17DEC25 Serial Number Cell -->\n <div class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n </div>\n <!--SKS15FEB25 Data Cells -->\n <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n class=\"table-col-cell body-color ellipsis\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n [style.width]=\"(column.width || '50px')\"\n [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n [attr.data-column-id]=\"column.uniqueIdentifier\">\n <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n <!-- edit mode content -->\n <div [ngSwitch]=\"column.type\">\n <!-- SKS22JUL25 calendar -->\n <div *ngSwitchCase=\"'calendar'\">\n <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model> -->\n </div>\n <!-- SKS22JUL25 Image -->\n <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n (mouseleave)=\"isImageHover = false;\">\n <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div> -->\n <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n Logo preview area\n <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n <img [src]=\"column.question?.imageData\" />\n </div>\n\n Upload button\n <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n <span>Upload Image</span>\n </label>\n <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n </div>\n </div> -->\n </div>\n <!-- SKS22JUL25 icon-selector -->\n <nxt-icon-selector *ngSwitchCase=\"'icon'\" [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n </nxt-icon-selector>\n <!-- SKS22JUL25 line -->\n <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n <!-- SKS22JUL25 data table -->\n <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n </nxt-datatable>\n <!-- SKS22JUL25 list -->\n <nxt-search-box *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '-' ? '' : (element | getValue: column.fieldName : undefined : undefined : 'table')\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n </nxt-search-box>\n <!-- SKS22JUL25 Dropdown -->\n <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n [apiMeta]=\"column.question?.subText\"\n [id]=\"column.question?.id\" \n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n placeholder=\"\" \n [padding]=\"column.question?.padding\"\n [readOnly]=\"column.readOnly\" \n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column?.question?.font\"\n [label]=\"column?.question?.questionText\"\n [labelColor]=\"column?.question?.color\"\n [inputTextColor]=\"column?.question?.color\"\n [labelSize]=\"column?.question?.fontSize\"\n [inputValueSize]=\"column?.question?.fontSize\"\n [labelWeight]=\"column?.question?.fontWeight\"\n [inputWeight]=\"column?.question?.fontWeight\"\n [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n [inputBgColor]=\"column?.question?.inputBgColor\"\n [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n [from]=\"'nxtTable'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-dropdown>\n <!-- SKS22JUL25 custom-radio component -->\n <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n </nxt-radio>\n <!-- SKS22JUL25 Attachment / Files -->\n <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n <!-- SKS22JUL25 Button -->\n <nxt-button *ngSwitchCase=\"'button'\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n >\n </nxt-button>\n <!-- SKS22JUL25 book type -->\n <div *ngSwitchCase=\"'book'\">\n <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n (handleDropDown)=\"getDropDown($event)\">\n </lib-questionbook> -->\n </div>\n <!-- SKS10AUG25 object type element -->\n <div *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </div>\n <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n <nxt-input *ngSwitchDefault \n [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n [question]=\"column | questionByRow:element:i\"\n [labelFont]=\"column.question?.font\"\n [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n [labelColor]=\"column.question?.color\"\n [labelSize]=\"column.question?.fontSize\"\n [inputValueSize]=\"column.question?.fontSize\"\n [labelWeight]=\"column.question?.fontWeight\"\n [inputWeight]=\"column.question?.fontWeight\"\n [showLabel]=\"column.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"column.question?.question\"\n [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"column.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n [minDate]=\"column.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-input>\n </div>\n </ng-container>\n \n <ng-template #viewMode>\n <!-- SKS10AUG25 view mode content -->\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'file'\">\n @defer (on viewport) {\n <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n [readOnly]=\"column?.readOnly\"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n >\n </nxt-file-upload>\n } @placeholder {\n <span class=\"skeleton-cell file-cell\"></span>\n }\n </ng-container>\n <ng-container *ngSwitchCase=\"'object'\">\n <svg class=\"ms-2\" style=\"cursor: pointer;\" (click)=\"onSideNavInfoClick(element, column)\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\"\n fill=\"#434555\" fill-opacity=\"0.5\" />\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'boolean'\">\n <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2714</span>\n <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span> \n </ng-container>\n <ng-container *ngSwitchCase=\"'list'\">\n <div class=\"ellipsis view-mode-text\">\n <a \n [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName, element, column.hyperLink) : ''\"\n [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n </a>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'datetime'\">\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'currency'\">\n <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n </ng-container>\n\n <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : 'Edit Record') }}\"\n style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg *ngIf=\"!element?.editRow\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n fill=\"#6C757D\" />\n </svg>\n <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n </div>\n </div>\n\n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\n style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\"\n style=\"padding: 2px 2px; border-radius: 5px; background-color: #feeeed;\">\n <svg width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n (click)=\"actionButtonClicked(button,element)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}}; cursor: pointer;\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}}; cursor: pointer\">\n <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\" style=\"cursor: pointer\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\">\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 2px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <div class=\"dropdown-menu\"\n [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\">\n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn,element)\">\n <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n {{btn.name}}</div>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Summary Rows -->\n <ng-container\n *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n <!-- Label in the first column -->\n <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n <!-- Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n </div> <!-- Value or input in the last column -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n </div>\n <!-- SKS12SEP25 summary column input box -->\n <div class=\"summary-table-cell\"\n [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n <ng-container>\n <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n [value]=\"summaryValues[row.fieldName]\"\n [question]=\"row\" [readOnly]=\"row?.readOnly\"\n [labelFont]=\"row.question?.font\"\n [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n [labelColor]=\"row.question?.color\"\n [labelSize]=\"row.question?.fontSize\"\n [inputValueSize]=\"row.question?.fontSize\"\n [labelWeight]=\"row.question?.fontWeight\"\n [inputWeight]=\"row.question?.fontWeight\"\n [showLabel]=\"row.question?.style?.showLabel\"\n inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n [placeholder]=\"row.question?.question\"\n [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n [inputId]=\"row.question?.trackingId\"\n [errorMessages]=\"{ required: 'This field is required' }\"\n [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n [minDate]=\"row.question?.minDate\"\n [rows]=\"3\" [currency]=\"currencyOption?.code\"\n [onlyView]=\"onlyView\"\n [mode]=\"onlyView ? 'view': 'edit'\"\n (inputValue)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\n >\n </nxt-input>\n <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n {{summaryValues?.[row.fieldName] | json}}\n </div>\n </ng-container>\n </div>\n <!-- SKS20MAR25 Empty cells to align with data columns -->\n <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n class=\"non-summary-table-cell\">\n </div>\n <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && !onlyView\"\n class=\"non-summary-table-cell actionCol sticky-column\">\n <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <!-- SKS13JUN25 full table summary row -->\n <ng-container *ngIf=\"isFullTableSummaryRow\">\n <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n <!-- SKS13JUN25 Checkbox column (if enabled) -->\n <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n </div>\n\n <!-- SKS13JUN25 summary cell -->\n <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n @if (row?.columns?.includes(col.fieldName)) {\n {{ summaryValues[col.fieldName] | number }}\n }\n </div>\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"horizontal-summary-table-cell actionCol sticky-column\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n <!--SKS28MAR25 In the Loading section -->\n <div class=\"table-body\" *ngIf=\"isLoading\">\n <!-- Repeat for 5 skeleton rows -->\n <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n <!-- Checkbox Column -->\n <!-- Data Columns -->\n <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n \n <!-- Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n </div>\n </div>\n </div>\n <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n Add / drags fields from elements sections\n </div> -->\n </div>\n </ng-container>\n </div>\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n class=\"no-data\">\n {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows.length === 0 ) || (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n (click)=\"addTableRecord(inlineElement)\"\n matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder' && from != 'questionBook'\"\n buttonType=\"btn btn-primary\"\n (buttonClickEmit)=\"saveButton()\"\n buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save' }}\"></nxt-button>\n </div>\n <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n [collectionSize]=\"pagination ? totalRecords || totalCount : filterTableNos\"\n [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n </div>\n <div class=\"modal-footer\">\n <nxt-button\n (buttonClickEmit)=\"deleteModal = false\" \n [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n [btnBgColor]=\"'#ffffff'\"\n [btnTextColor]=\"'#007bff'\"\n [btnBorder]=\"'1'\"\n [btnBorderColor]=\"'#dee2e6'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n <nxt-button\n (buttonClickEmit)=\"deleteRecordData()\" \n [isLoading]=\"isButtonLoading\"\n [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n [btnBorderRadius]=\"4\"\n [btnWidth]=\"70\"\n [buttonType]=\"'custom-btn'\"\n >\n </nxt-button>\n </div>\n </div>\n </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .nxt-resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:14px;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;background:#dfdfdf;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.view-mode-text{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}\n"] }]
52767
52767
  }], ctorParameters: () => [{ type: CountryService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
52768
52768
  type: Input
52769
52769
  }], summaryValues: [{
@@ -58365,7 +58365,6 @@ class BookletComponent {
58365
58365
  const shouldShow = parent.scrollTop + parent.clientHeight < parent.scrollHeight - 1;
58366
58366
  if (this.showStickyShadow !== shouldShow) {
58367
58367
  this.showStickyShadow = shouldShow;
58368
- console.log(parent.scrollTop, parent.clientHeight, parent.scrollHeight);
58369
58368
  this.cdr.markForCheck();
58370
58369
  }
58371
58370
  return;
@@ -58452,7 +58451,7 @@ const VERSION = {
58452
58451
  "semver": null,
58453
58452
  "suffix": "68a4eb8b-dirty",
58454
58453
  "semverString": null,
58455
- "version": "2.1.311"
58454
+ "version": "2.1.312"
58456
58455
  };
58457
58456
  /* tslint:enable */
58458
58457