@rangertechnologies/ngnxt 2.1.95 → 2.1.96

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 (26) hide show
  1. package/esm2022/lib/components/button/nxt-button.component.mjs +130 -0
  2. package/esm2022/lib/components/datatable/datatable.component.mjs +785 -0
  3. package/esm2022/lib/components/pagination/pagination.component.mjs +100 -0
  4. package/esm2022/lib/pages/questionbook/questionbook.component.mjs +3 -3
  5. package/esm2022/lib/pipe/date/date.pipe.mjs +28 -0
  6. package/esm2022/lib/pipe/editColumnCheck/edit-column-check.pipe.mjs +28 -0
  7. package/esm2022/lib/pipe/editColumnDropdown/edit-column-dropdown.pipe.mjs +20 -0
  8. package/esm2022/lib/pipe/editColumnType/edit-column-type.pipe.mjs +20 -0
  9. package/esm2022/lib/pipe/search-filter/search-filter.pipe.mjs +39 -0
  10. package/esm2022/lib/pipe/time/time.pipe.mjs +26 -0
  11. package/esm2022/public-api.mjs +3 -1
  12. package/fesm2022/rangertechnologies-ngnxt.mjs +1141 -5
  13. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  14. package/lib/components/button/nxt-button.component.d.ts +38 -0
  15. package/lib/components/datatable/datatable.component.d.ts +130 -0
  16. package/lib/components/pagination/pagination.component.d.ts +36 -0
  17. package/lib/pipe/date/date.pipe.d.ts +7 -0
  18. package/lib/pipe/editColumnCheck/edit-column-check.pipe.d.ts +7 -0
  19. package/lib/pipe/editColumnDropdown/edit-column-dropdown.pipe.d.ts +7 -0
  20. package/lib/pipe/editColumnType/edit-column-type.pipe.d.ts +7 -0
  21. package/lib/pipe/search-filter/search-filter.pipe.d.ts +8 -0
  22. package/lib/pipe/time/time.pipe.d.ts +7 -0
  23. package/package.json +1 -1
  24. package/public-api.d.ts +1 -0
  25. package/rangertechnologies-ngnxt-2.1.96.tgz +0 -0
  26. package/rangertechnologies-ngnxt-2.1.95.tgz +0 -0
package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, Component, Optional, InjectionToken, EventEmitter, Inject, Output, Input, Pipe, ViewChild, ViewEncapsulation, NgModule, Directive, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2
+ import { Injectable, Component, Optional, InjectionToken, EventEmitter, Inject, Output, Input, Pipe, ViewChild, ViewEncapsulation, NgModule, Directive, CUSTOM_ELEMENTS_SCHEMA, HostListener } from '@angular/core';
3
3
  import * as moment from 'moment';
4
4
  import { Subject, BehaviorSubject } from 'rxjs';
5
5
  import * as i1 from '@angular/router';
@@ -32,6 +32,8 @@ import * as i10 from '@angular/cdk/bidi';
32
32
  import * as i4$2 from '@angular/cdk/drag-drop';
33
33
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
34
34
  import { v4 } from 'uuid';
35
+ import { MatSort } from '@angular/material/sort';
36
+ import { SelectionModel } from '@angular/cdk/collections';
35
37
 
36
38
  class NxtAppService {
37
39
  constructor() { }
@@ -9585,11 +9587,11 @@ class QuestionbookComponent {
9585
9587
  this.isCalendarModalOpen = false;
9586
9588
  }
9587
9589
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
9588
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div\n [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n \n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText\" \n class=\"icon\" \n [matTooltip]=\"ques?.helpText\"\n matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div \n class=\"icon\" \n *ngIf=\"ques.fieldsMeta\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\"\n >i</div>\n </span>\n</div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n \n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n \n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar\n [question]=\"ques\"\n (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\"\n (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"\n ></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\"\n [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\"\n [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\"\n [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\"\n (cancelButtonEmit)=\"closeCalendarModal($event)\"\n >\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n \n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n \n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text \n [question]=\"ques\"\n [readOnly]=\"ques.isReadOnly\"\n [value]=\"ques.input || ''\"\n [error]=\"ques.error\"\n [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n \n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\"(saveTableData)=\"handleTableSave($event, ques)\">\n </app-custom-table>\n </div>\n \n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n \n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\"\n [token]=\"token\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\" \n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\"\n [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n \n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\"\n [width]=\"'150px'\"\n [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n <!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange", "saveTableData"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
9590
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{\n removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\"\n matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta\" [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n matTooltipClass=\"white-tooltip\" style=\"margin-left: 4px;\">i</div>\n </span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\"\n [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\"\n (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\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 <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\"\n [focusEvent]=\"clearSQError(ques.id)\" [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n\n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input || ''\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\"\n (focus)=\"clearSQError(ques.id)\" style.border-color=\"{{ ques.error ? 'red' : '' }}\"\n placeholder=\"{{ ques.question }}\" />\n </div>\n\n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\"\n (saveTableData)=\"handleTableSave($event, ques)\">\n </app-custom-table>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\"\n (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [allFiles]=\"ques.input\" [tableFile]=\"false\" (selectedFileData)=\"childEventCapture($event, ques)\"\n (deletedFileData)=\"deleteFile($event)\" [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" [width]=\"'150px'\" [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\" (buttonValue)=\"childEventCapture($event, ques)\">\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques.qbItem?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n <!-- 06-09-24 for calendar type-->\n <!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange", "saveTableData"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
9589
9591
  }
9590
9592
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, decorators: [{
9591
9593
  type: Component,
9592
- args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div\n [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n \n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText\" \n class=\"icon\" \n [matTooltip]=\"ques?.helpText\"\n matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div \n class=\"icon\" \n *ngIf=\"ques.fieldsMeta\"\n [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n matTooltipClass=\"white-tooltip\"\n style=\"margin-left: 4px;\"\n >i</div>\n </span>\n</div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n \n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n \n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar\n [question]=\"ques\"\n (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\"\n (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"\n ></app-custom-calendar>\n <!-- model used in calendar component -->\n <app-custom-model *ngIf=\"isCalendarModalOpen\"\n [modalTitle]=\"calendarModalTitle\"\n [isModalOpen]=\"isCalendarModalOpen\"\n [modalSize]=\"calendarModalSize\"\n [saveButtonValue]=\"calendarSaveButtonValue\"\n [modalFooter]=\"modalCalendarModalFooter\"\n (saveButtonEmit)=\"onCalendarModalSave()\"\n (cancelButtonEmit)=\"closeCalendarModal($event)\"\n >\n <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n </app-custom-model>\n </div>\n <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n \n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n \n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text \n [question]=\"ques\"\n [readOnly]=\"ques.isReadOnly\"\n [value]=\"ques.input || ''\"\n [error]=\"ques.error\"\n [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n </div>\n \n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\"(saveTableData)=\"handleTableSave($event, ques)\">\n </app-custom-table>\n </div>\n \n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n \n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\"\n [token]=\"token\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\" \n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\"\n [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n \n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\"\n [width]=\"'150px'\"\n [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n <!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"] }]
9594
+ args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <!-- RA09DEC24 Changed keys-->\n <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n <div *ngIf=\"ques.type === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <!-- // VD 02Aug24 - label value style-->\n <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{\n removeCharacters(ques?.questionText) }}\n <div *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips help text -->\n <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\"\n matTooltipClass=\"white-tooltip\">i</div>\n <!-- RS 17JAN2025 -->\n <!-- Displays icons with tooltips for file requirements -->\n <div class=\"icon\" *ngIf=\"ques.fieldsMeta\" [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n matTooltipClass=\"white-tooltip\" style=\"margin-left: 4px;\">i</div>\n </span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.type === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\"\n [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\"\n (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.type === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.type === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\"\n [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.type === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n <!-- model used in calendar component -->\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 <!-- Text -->\n <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n textBox: !qbItem.progressBar\n }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\"\n [focusEvent]=\"clearSQError(ques.id)\" [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n\n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.type === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <div *ngIf=\"ques.type === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\"\n [error]=\"ques.error\" [placeholder]=\"ques.question \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n <!-- RS 06JAN25 -->\n <!-- for rich text editor -->\n <div *ngIf=\"ques.type === 'RichTextArea'\">\n <app-custom-rich-text [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input || ''\"\n [error]=\"ques.error\" [placeholder]=\"ques.question\"\n (textValueChange)=\"childEventCapture($event, ques)\">\n </app-custom-rich-text>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.type === 'Email'\">\n <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\"\n (focus)=\"clearSQError(ques.id)\" style.border-color=\"{{ ques.error ? 'red' : '' }}\"\n placeholder=\"{{ ques.question }}\" />\n </div>\n\n <!-- Table -->\n <!-- RS 03FEB2025 -->\n <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\n <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\"\n (saveTableData)=\"handleTableSave($event, ques)\">\n </app-custom-table>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <!-- VD 20Aug24 used correct attribute -->\n <div *ngIf=\"ques.type === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [placeHolderText]=\"ques.question\" [filterName]=\"ques.input\"\n (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <!-- AP 10FEB25 - Dynamically binding selectedValue based on isShengel condition -->\n <app-custom-dropdown [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n <!-- // VD 02Aug24 custom-radio component -->\n <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n <app-custom-radio [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n </app-custom-radio>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.type === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n [allFiles]=\"ques.input\" [tableFile]=\"false\" (selectedFileData)=\"childEventCapture($event, ques)\"\n (deletedFileData)=\"deleteFile($event)\" [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n </app-custom-label>\n </div>\n <!-- // VD 02Aug24 image component -->\n <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n <app-custom-image [question]=\"ques\">\n </app-custom-image>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" [width]=\"'150px'\" [buttonText]=\"ques?.question\"\n [value]=\"ques?.question\" (buttonValue)=\"childEventCapture($event, ques)\">\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.type === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n [questions]=\"ques.qbItem?.subQuestions\"\n (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>\n <!-- 06-09-24 for calendar type-->\n <!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}\n"] }]
9593
9595
  }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
9594
9596
  type: Inject,
9595
9597
  args: [DOCUMENT]
@@ -11616,14 +11618,1148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
11616
11618
  }]
11617
11619
  }] });
11618
11620
 
11621
+ class NxtButtonComponent {
11622
+ elementRef;
11623
+ buttonValue = ''; //SKS24JAN25 button text
11624
+ buttonType = 'primary'; //SKS24JAN25 If the button type is 'text-only', it should display only the text without a border or outline. For 'grey-text', the button should have a border and a background color, but the text color should be gray, similar to 'blue-text'
11625
+ type = 'button'; //SKS24JAN25 The button types are "button," "group," and "dropdown."
11626
+ buttonDisable = false; //SKS24JAN25 use this input to disable a button when needed.
11627
+ fcBtnBgColor = ''; // Use this input to set a custom background color for the button.
11628
+ fcBtnBorder = ''; // Use this input to set a custom border style for the button.
11629
+ fcBtnTextColor = ''; // Use this input to set a custom text color for the button.
11630
+ fcBtnHeight = ''; // Use this input to set a custom height for the button.
11631
+ fcBtnWidth = ''; // Use this input to set a custom width for the button.
11632
+ fcBtnIconLeftSrc = ''; // Use this input to set the source of the left-side icon for the button.
11633
+ fcBtnIconRightSrc = ''; // Use this input to set the source of the right-side icon for the button.
11634
+ fcBtnHoverBgColor = ''; // Use this input to set the background color of the button on hover.
11635
+ fcBtnHoverTextColor = ''; // Use this input to set the text color of the button on hover.
11636
+ fcBtnId = 'default'; // Use this input to set a custom ID for the button. Default is 'default'.
11637
+ dataDismiss = ''; // Use this input to specify the dismiss action for the button (e.g., 'modal' to close a modal).
11638
+ fcButtonBorder = '0px'; // Use this input to set the border size of the button. Default is '0px' for no border.
11639
+ modalToTrigger = ''; // Use this input to specify the ID or target of the modal to be triggered.
11640
+ isImageSvg = false; // Use this input to determine if the image is an SVG. Default is false (non-SVG).
11641
+ tabIndex = ''; // Use this input to set the tab index for the element, controlling the focus order.
11642
+ buttonConfig = ''; // Use this input to pass configuration settings for the group and dropdown buttons (e.g., styles, actions).
11643
+ buttonClickEmit = new EventEmitter();
11644
+ iconSrc = ''; // Ensure it's always a string
11645
+ isDropdownOpen = false;
11646
+ // SKS24JAN25 dropdown button config
11647
+ // dropdownButton = {
11648
+ // fcBtnBgColor: '#007bff',
11649
+ // fcBtnBorder: '1px solid #0056b3',
11650
+ // fcBtnTextColor: '#ffffff',
11651
+ // fcBtnHeight: '40px',
11652
+ // fcBtnWidth: '150px',
11653
+ // fcBtnHoverBgColor: '#0056b3',
11654
+ // fcBtnHoverTextColor: '#ffffff',
11655
+ // label: 'Dropdown',
11656
+ // iconSrc: '',
11657
+ // items: [
11658
+ // { label: 'Action 1',iconSrc: '', hover: false },
11659
+ // { label: 'Action 2',iconSrc: '', hover: false },
11660
+ // { label: 'Action 3',iconSrc: '', hover: false }
11661
+ // ]
11662
+ // };
11663
+ constructor(elementRef) {
11664
+ this.elementRef = elementRef;
11665
+ }
11666
+ ngOnInit() { }
11667
+ //SKS24JAN25 Function to get styles for dropdown and group buttons based on the provided configuration.
11668
+ getButtonStyles(config) {
11669
+ return {
11670
+ '--fc-button-custom-bg': config.fcBtnBgColor || '',
11671
+ '--fc-button-custom-border': config.fcBtnBorder || '',
11672
+ '--fc-button-custom-color': config.fcBtnTextColor || '',
11673
+ '--fc-button-custom-height': config.fcBtnHeight || '',
11674
+ '--fc-button-custom-width': config.fcBtnWidth || '',
11675
+ '--fc-button-hover-bg': config.fcBtnHoverBgColor || '',
11676
+ '--fc-button-hover-text-color': config.fcBtnHoverTextColor || ''
11677
+ };
11678
+ }
11679
+ buttonClicked($event) {
11680
+ this.buttonClickEmit.emit($event);
11681
+ if (this.isDropdownOpen) {
11682
+ this.isDropdownOpen = false;
11683
+ }
11684
+ }
11685
+ toggleDropdown() {
11686
+ this.isDropdownOpen = !this.isDropdownOpen;
11687
+ }
11688
+ //SKS24JAN25 Listener for clicks outside the dropdown button to close or manage its state.
11689
+ onClickOutside(event) {
11690
+ if (this.isDropdownOpen && !this.elementRef.nativeElement.contains(event.target)) {
11691
+ this.isDropdownOpen = false;
11692
+ }
11693
+ }
11694
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
11695
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtButtonComponent, isStandalone: true, selector: "nxt-button", inputs: { buttonValue: "buttonValue", buttonType: "buttonType", type: "type", buttonDisable: "buttonDisable", fcBtnBgColor: "fcBtnBgColor", fcBtnBorder: "fcBtnBorder", fcBtnTextColor: "fcBtnTextColor", fcBtnHeight: "fcBtnHeight", fcBtnWidth: "fcBtnWidth", fcBtnIconLeftSrc: "fcBtnIconLeftSrc", fcBtnIconRightSrc: "fcBtnIconRightSrc", fcBtnHoverBgColor: "fcBtnHoverBgColor", fcBtnHoverTextColor: "fcBtnHoverTextColor", fcBtnId: "fcBtnId", dataDismiss: "dataDismiss", fcButtonBorder: "fcButtonBorder", modalToTrigger: "modalToTrigger", isImageSvg: "isImageSvg", tabIndex: "tabIndex", buttonConfig: "buttonConfig" }, outputs: { buttonClickEmit: "buttonClickEmit" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltip }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn btn-primary fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n style=\"--fc-button-custom-bg: {{fcBtnBgColor}};--fc-button-custom-border: {{fcBtnBorder}};--fc-button-custom-color: {{fcBtnTextColor}};--fc-button-custom-height: {{fcBtnHeight}};--fc-button-custom-width: {{fcBtnWidth}};--fc-button-hover-bg: {{fcBtnHoverBgColor}};--fc-button-hover-text-color: {{fcBtnHoverTextColor}};\"\n [disabled]=\"buttonDisable\" [attr.data-bs-dismiss]='dataDismiss' (click)=\"buttonClicked($event)\"\n [attr.id]=\"fcBtnId != 'default' ? fcBtnId : null\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\"\n class=\"fc-btn-icon left-icon\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && !isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\" class=\"fc-btn-icon left-icon\">\n <span class=\"fc-btn-text\">{{buttonValue}}</span>\n <img *ngIf=\"fcBtnIconRightSrc != '' && isImageSvg\" src=\"{{fcBtnIconRightSrc}}\"\n class=\"fc-btn-icon right-icon\">\n <img *ngIf=\"fcBtnIconRightSrc != '' && !isImageSvg\" src=\"{{fcBtnIconRightSrc}}\" class=\"fc-btn-icon right-icon\">\n</button>\n\n<!-- SKS24JAN25 dropdown button -->\n<div *ngIf=\"type === 'dropdown'\" class=\"dropdown\">\n <svg class=\"clickable-img\" (click)=\"toggleDropdown()\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.3\" y=\"0.3\" width=\"39.4\" height=\"39.4\" rx=\"11.7\" fill=\"#FAFBFD\" stroke=\"#D5D5D5\" stroke-width=\"0.6\"/>\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"fc-btn-text\" style=\"padding-left: 12px;\">{{btn.name}}</span>\n </button>\n </div>\n</div>\n", styles: [".fc-button,.fc-button:hover,.fc-button:active,.fc-button:focus{outline:none;border:none;box-shadow:none}.fc-button{padding:6.5px}.fc-button:active{transform:scale(1.02)}.text-only{background:transparent;color:var(--fc-primary-color);border:none;outline:none}.grey-text{color:var(--fc-text-color)}.blue-text{color:var(--fc-primary-color)}.grey-border{color:#272525;background:transparent;border:2px solid #dddddd}.grey-border:hover{color:#272525;background:#6a2aff0a;border:2px solid #6a2aff59}.grey-border:active,.grey-border:focus{background-color:#386bf6;border:2px solid #3268ff;color:#fff}.blue-border,.blue-border:hover,.blue-border:active,.blue-border:focus{border:1px solid var(--fc-primary-color)}.bg-transparent{background-color:transparent}.custom-btn{background-color:var(--fc-button-custom-bg);border-color:var(--fc-button-custom-border);color:var(--fc-button-custom-color);height:var(--fc-button-custom-height);width:var(--fc-button-custom-width)}.custom-btn:hover,.custom-btn:active,.custom-btn:focus{border-color:var(--fc-button-custom-border);background-color:var(--fc-button-hover-bg);color:var(--fc-button-hover-text-color)}.fc-btn-text{display:inline-flex;vertical-align:middle;font-size:14px;font-weight:400;padding-left:5px;padding-right:5px}.right-icon{margin-left:5px}.left-icon{margin-right:5px}.fc-button.side-save-component,.fc-button.side-cancel-component{border:1px solid transparent}.fc-button.side-save-component:focus,.fc-button.side-cancel-component:focus{box-shadow:0 0 0 .25rem #0d6efd40;border:1px solid #86b7fe}.btn-group{background-color:#fdfeff;border:1px solid #dddddd;border-radius:7px}.btn-icon{background-color:#fdfeff;border:1px solid #dddddd}.custom-tooltip{visibility:visible;position:absolute;background-color:#0773ff;color:#fff;text-align:center;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;z-index:10;margin-bottom:10px}.tooltip-pointer{position:absolute;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0773ff}.tooltip-container:hover .custom-tooltip{visibility:visible;opacity:1}.clickable-img{position:relative;cursor:pointer;height:41px;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #dddddd;border-radius:13px}.clickable-img:hover{transform:scale(.95);border:2px solid rgb(31,105,255);border-radius:14px}.dropdown{position:relative;display:inline-block}.dropdown-menu{right:0;top:45px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;left:unset}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.dropdown-menu .btn:hover{background-color:#f1f1f1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
11696
+ }
11697
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtButtonComponent, decorators: [{
11698
+ type: Component,
11699
+ args: [{ selector: 'nxt-button', standalone: true, imports: [CommonModule], template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltip }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn btn-primary fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n style=\"--fc-button-custom-bg: {{fcBtnBgColor}};--fc-button-custom-border: {{fcBtnBorder}};--fc-button-custom-color: {{fcBtnTextColor}};--fc-button-custom-height: {{fcBtnHeight}};--fc-button-custom-width: {{fcBtnWidth}};--fc-button-hover-bg: {{fcBtnHoverBgColor}};--fc-button-hover-text-color: {{fcBtnHoverTextColor}};\"\n [disabled]=\"buttonDisable\" [attr.data-bs-dismiss]='dataDismiss' (click)=\"buttonClicked($event)\"\n [attr.id]=\"fcBtnId != 'default' ? fcBtnId : null\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\"\n class=\"fc-btn-icon left-icon\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && !isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\" class=\"fc-btn-icon left-icon\">\n <span class=\"fc-btn-text\">{{buttonValue}}</span>\n <img *ngIf=\"fcBtnIconRightSrc != '' && isImageSvg\" src=\"{{fcBtnIconRightSrc}}\"\n class=\"fc-btn-icon right-icon\">\n <img *ngIf=\"fcBtnIconRightSrc != '' && !isImageSvg\" src=\"{{fcBtnIconRightSrc}}\" class=\"fc-btn-icon right-icon\">\n</button>\n\n<!-- SKS24JAN25 dropdown button -->\n<div *ngIf=\"type === 'dropdown'\" class=\"dropdown\">\n <svg class=\"clickable-img\" (click)=\"toggleDropdown()\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.3\" y=\"0.3\" width=\"39.4\" height=\"39.4\" rx=\"11.7\" fill=\"#FAFBFD\" stroke=\"#D5D5D5\" stroke-width=\"0.6\"/>\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"fc-btn-text\" style=\"padding-left: 12px;\">{{btn.name}}</span>\n </button>\n </div>\n</div>\n", styles: [".fc-button,.fc-button:hover,.fc-button:active,.fc-button:focus{outline:none;border:none;box-shadow:none}.fc-button{padding:6.5px}.fc-button:active{transform:scale(1.02)}.text-only{background:transparent;color:var(--fc-primary-color);border:none;outline:none}.grey-text{color:var(--fc-text-color)}.blue-text{color:var(--fc-primary-color)}.grey-border{color:#272525;background:transparent;border:2px solid #dddddd}.grey-border:hover{color:#272525;background:#6a2aff0a;border:2px solid #6a2aff59}.grey-border:active,.grey-border:focus{background-color:#386bf6;border:2px solid #3268ff;color:#fff}.blue-border,.blue-border:hover,.blue-border:active,.blue-border:focus{border:1px solid var(--fc-primary-color)}.bg-transparent{background-color:transparent}.custom-btn{background-color:var(--fc-button-custom-bg);border-color:var(--fc-button-custom-border);color:var(--fc-button-custom-color);height:var(--fc-button-custom-height);width:var(--fc-button-custom-width)}.custom-btn:hover,.custom-btn:active,.custom-btn:focus{border-color:var(--fc-button-custom-border);background-color:var(--fc-button-hover-bg);color:var(--fc-button-hover-text-color)}.fc-btn-text{display:inline-flex;vertical-align:middle;font-size:14px;font-weight:400;padding-left:5px;padding-right:5px}.right-icon{margin-left:5px}.left-icon{margin-right:5px}.fc-button.side-save-component,.fc-button.side-cancel-component{border:1px solid transparent}.fc-button.side-save-component:focus,.fc-button.side-cancel-component:focus{box-shadow:0 0 0 .25rem #0d6efd40;border:1px solid #86b7fe}.btn-group{background-color:#fdfeff;border:1px solid #dddddd;border-radius:7px}.btn-icon{background-color:#fdfeff;border:1px solid #dddddd}.custom-tooltip{visibility:visible;position:absolute;background-color:#0773ff;color:#fff;text-align:center;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;z-index:10;margin-bottom:10px}.tooltip-pointer{position:absolute;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0773ff}.tooltip-container:hover .custom-tooltip{visibility:visible;opacity:1}.clickable-img{position:relative;cursor:pointer;height:41px;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #dddddd;border-radius:13px}.clickable-img:hover{transform:scale(.95);border:2px solid rgb(31,105,255);border-radius:14px}.dropdown{position:relative;display:inline-block}.dropdown-menu{right:0;top:45px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;left:unset}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.dropdown-menu .btn:hover{background-color:#f1f1f1}\n"] }]
11700
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { buttonValue: [{
11701
+ type: Input
11702
+ }], buttonType: [{
11703
+ type: Input
11704
+ }], type: [{
11705
+ type: Input
11706
+ }], buttonDisable: [{
11707
+ type: Input
11708
+ }], fcBtnBgColor: [{
11709
+ type: Input
11710
+ }], fcBtnBorder: [{
11711
+ type: Input
11712
+ }], fcBtnTextColor: [{
11713
+ type: Input
11714
+ }], fcBtnHeight: [{
11715
+ type: Input
11716
+ }], fcBtnWidth: [{
11717
+ type: Input
11718
+ }], fcBtnIconLeftSrc: [{
11719
+ type: Input
11720
+ }], fcBtnIconRightSrc: [{
11721
+ type: Input
11722
+ }], fcBtnHoverBgColor: [{
11723
+ type: Input
11724
+ }], fcBtnHoverTextColor: [{
11725
+ type: Input
11726
+ }], fcBtnId: [{
11727
+ type: Input
11728
+ }], dataDismiss: [{
11729
+ type: Input
11730
+ }], fcButtonBorder: [{
11731
+ type: Input
11732
+ }], modalToTrigger: [{
11733
+ type: Input
11734
+ }], isImageSvg: [{
11735
+ type: Input
11736
+ }], tabIndex: [{
11737
+ type: Input
11738
+ }], buttonConfig: [{
11739
+ type: Input
11740
+ }], buttonClickEmit: [{
11741
+ type: Output
11742
+ }], onClickOutside: [{
11743
+ type: HostListener,
11744
+ args: ['document:click', ['$event']]
11745
+ }] } });
11746
+
11747
+ class NxtPagination {
11748
+ event = new EventEmitter;
11749
+ // page size Options
11750
+ pageSizeOptions = [5, 10, 15, 20, 50];
11751
+ /** The total number of records */
11752
+ collectionSize = 0;
11753
+ /** The number of records to display */
11754
+ pageSize = 10;
11755
+ /** Current page */
11756
+ currentPage = 1;
11757
+ /** The number of buttons to show either side of the current page */
11758
+ maxSize = 2;
11759
+ /** Display the First/Last buttons */
11760
+ firstLastButtons = false;
11761
+ /** Display the Next/Previous buttons */
11762
+ nextPreviousButtons = true;
11763
+ /** Display small pagination buttons */
11764
+ small = false;
11765
+ totalPages = [];
11766
+ constructor() { }
11767
+ ngOnInit() {
11768
+ this.pageSize = this.pageSize ?? 10; // Ensure a default value
11769
+ this.currentPage = this.currentPage === 0 ? 1 : this.currentPage;
11770
+ if (this.collectionSize) {
11771
+ this.totalPages = new Array(Math.ceil(this.collectionSize / Number(this.pageSize)));
11772
+ }
11773
+ }
11774
+ ngOnChanges(changes) {
11775
+ this.pageSize = this.pageSize ?? 10; // Ensure a default value
11776
+ this.currentPage = this.currentPage === 0 ? 1 : this.currentPage ?? 1;
11777
+ if (this.collectionSize) {
11778
+ this.totalPages = new Array(Math.ceil(this.collectionSize / Number(this.pageSize)));
11779
+ }
11780
+ }
11781
+ get startIndex() {
11782
+ return (this.currentPage - 1) * Number(this.pageSize);
11783
+ }
11784
+ get endIndex() {
11785
+ return Math.min(Number(this.startIndex) + Number(this.pageSize), this.collectionSize);
11786
+ }
11787
+ /** Set page number */
11788
+ selectPageNumber(pageNumber) {
11789
+ this.currentPage = pageNumber;
11790
+ this.emit();
11791
+ }
11792
+ /** Set next page number */
11793
+ next() {
11794
+ const nextPage = this.currentPage + 1;
11795
+ nextPage <= this.totalPages.length && this.selectPageNumber(nextPage);
11796
+ }
11797
+ /** Set previous page number */
11798
+ previous() {
11799
+ const previousPage = this.currentPage - 1;
11800
+ previousPage >= 1 && this.selectPageNumber(previousPage);
11801
+ }
11802
+ onPageSizeChange(newSize) {
11803
+ this.pageSize = newSize; // Update the pageSize
11804
+ this.totalPages = new Array(Math.ceil(this.collectionSize / this.pageSize));
11805
+ // Ensure the current page is within bounds
11806
+ // if (this.currentPage > this.totalPages.length) {
11807
+ // this.currentPage = this.totalPages.length;
11808
+ // }
11809
+ this.currentPage = 1;
11810
+ this.emit(); // Emit an event if necessary
11811
+ }
11812
+ emit() {
11813
+ this.event.emit({ "length": this.collectionSize, "pageSize": this.pageSize, "pageIndex": this.currentPage });
11814
+ }
11815
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
11816
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtPagination, isStandalone: true, selector: "nxt-pagination", inputs: { pageSizeOptions: "pageSizeOptions", collectionSize: "collectionSize", pageSize: "pageSize", currentPage: "currentPage", maxSize: "maxSize", firstLastButtons: "firstLastButtons", nextPreviousButtons: "nextPreviousButtons", small: "small" }, outputs: { event: "event" }, usesOnChanges: true, ngImport: i0, template: "<!-- SKS24JAN25 -->\n<div class=\"flex content-space-between main-cont\">\n <div class=\"info\">\n <div *ngIf=\"endIndex\">\n Showing data {{ startIndex + 1 }} to {{ endIndex }} of {{ collectionSize }} entries\n </div>\n </div>\n <div>\n <ul [class]=\"small ? 'pagination pagination-sm' : 'pagination'\" style=\"align-items: center; padding-top: 18px;\">\n <!-- select button -->\n <div style=\"font-size: 14px; font-weight: 400; padding-right: 10px; align-items: center;\" for=\"perPage\">Result per page</div>\n <div class=\"dropdown-wrapper\">\n <select id=\"perPage\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\">\n <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\n </select>\n <svg class=\"dropdown-arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\" fill=\"#626262\"/>\n </svg> \n </div> \n <!-- first button -->\n <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\" >\n <button class=\"page-link\" (click)=\"selectPageNumber(1)\">\u00AB\u00AB</button>\n </li>\n <!-- last button -->\n <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\">\n <button class=\"page-link\" (click)=\"selectPageNumber(totalPages.length)\">\u00BB\u00BB</button>\n </li>\n <!-- previous button -->\n <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\" >\n <button class=\"page-link\" (click)=\"previous()\">\u00AB</button>\n </li>\n <!-- page numbers -->\n <ng-container *ngFor=\"let p of totalPages; index as i\">\n <li *ngIf=\"i + 1 >= currentPage - maxSize && i + 1 <= currentPage + maxSize\" [class]=\"currentPage === i + 1 ? 'page-item active' : 'page-item'\">\n <button class=\"page-link\" (click)=\"selectPageNumber(i + 1)\">\n {{ i + 1 }}\n </button>\n </li>\n </ng-container>\n <!-- next button -->\n <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\">\n <button class=\"page-link\" (click)=\"next()\">\u00BB</button>\n </li>\n </ul>\n </div>\n </div>\n ", styles: [".info{color:#b5b7c0;font-size:14px;font-weight:500}button{background:#f5f5f5;border:1px solid #E9E9E9;padding:2px 10px;cursor:pointer;transition:.3s}button:hover{border:1px solid #E9E9E9;background:#fff;color:#404b52!important}button:disabled{opacity:.5;color:#73797d;cursor:not-allowed}button.active{background:#5088ff;color:#fff;border-color:#5088ff}select{margin-right:10px}select.value{font-size:2px;margin-right:10px}.main-cont{align-items:center}#perPage{font-size:14px;color:#313131;background-color:#fff;border:1px solid #E9E9E9;border-radius:4px;padding-top:2px;padding-left:7px;padding-bottom:2px;font-weight:400;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative}#perPage:hover{background-color:#f5f5f5;color:#404b52!important}.dropdown-wrapper{position:relative;display:inline-block;width:60px;margin-right:10px}.dropdown-wrapper select{width:88%;padding:7px;font-size:16px;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none}.dropdown-wrapper .dropdown-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:#333}li{color:#404b52!important;font-family:inter,sans-serif!important;font-size:12px!important;padding:6px!important}::ng-deep .pagination{--bs-pagination-font-size: none !important}::ng-deep .page-item:not(:first-child) .page-link{border-radius:4px!important}.page-link{color:#404b52!important}::ng-deep .page-link.active,.active>.page-link{color:#fff!important}::ng-deep .page-link.active:hover,.active>.page-link:hover{color:#000!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
11817
+ }
11818
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtPagination, decorators: [{
11819
+ type: Component,
11820
+ args: [{ selector: 'nxt-pagination', standalone: true, imports: [CommonModule, FormsModule], template: "<!-- SKS24JAN25 -->\n<div class=\"flex content-space-between main-cont\">\n <div class=\"info\">\n <div *ngIf=\"endIndex\">\n Showing data {{ startIndex + 1 }} to {{ endIndex }} of {{ collectionSize }} entries\n </div>\n </div>\n <div>\n <ul [class]=\"small ? 'pagination pagination-sm' : 'pagination'\" style=\"align-items: center; padding-top: 18px;\">\n <!-- select button -->\n <div style=\"font-size: 14px; font-weight: 400; padding-right: 10px; align-items: center;\" for=\"perPage\">Result per page</div>\n <div class=\"dropdown-wrapper\">\n <select id=\"perPage\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\">\n <option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</option>\n </select>\n <svg class=\"dropdown-arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\" fill=\"#626262\"/>\n </svg> \n </div> \n <!-- first button -->\n <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\" >\n <button class=\"page-link\" (click)=\"selectPageNumber(1)\">\u00AB\u00AB</button>\n </li>\n <!-- last button -->\n <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"firstLastButtons\">\n <button class=\"page-link\" (click)=\"selectPageNumber(totalPages.length)\">\u00BB\u00BB</button>\n </li>\n <!-- previous button -->\n <li [class]=\"currentPage === 1 ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\" >\n <button class=\"page-link\" (click)=\"previous()\">\u00AB</button>\n </li>\n <!-- page numbers -->\n <ng-container *ngFor=\"let p of totalPages; index as i\">\n <li *ngIf=\"i + 1 >= currentPage - maxSize && i + 1 <= currentPage + maxSize\" [class]=\"currentPage === i + 1 ? 'page-item active' : 'page-item'\">\n <button class=\"page-link\" (click)=\"selectPageNumber(i + 1)\">\n {{ i + 1 }}\n </button>\n </li>\n </ng-container>\n <!-- next button -->\n <li [class]=\"currentPage === totalPages.length ? 'page-item disabled' : 'page-item'\" *ngIf=\"nextPreviousButtons\">\n <button class=\"page-link\" (click)=\"next()\">\u00BB</button>\n </li>\n </ul>\n </div>\n </div>\n ", styles: [".info{color:#b5b7c0;font-size:14px;font-weight:500}button{background:#f5f5f5;border:1px solid #E9E9E9;padding:2px 10px;cursor:pointer;transition:.3s}button:hover{border:1px solid #E9E9E9;background:#fff;color:#404b52!important}button:disabled{opacity:.5;color:#73797d;cursor:not-allowed}button.active{background:#5088ff;color:#fff;border-color:#5088ff}select{margin-right:10px}select.value{font-size:2px;margin-right:10px}.main-cont{align-items:center}#perPage{font-size:14px;color:#313131;background-color:#fff;border:1px solid #E9E9E9;border-radius:4px;padding-top:2px;padding-left:7px;padding-bottom:2px;font-weight:400;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative}#perPage:hover{background-color:#f5f5f5;color:#404b52!important}.dropdown-wrapper{position:relative;display:inline-block;width:60px;margin-right:10px}.dropdown-wrapper select{width:88%;padding:7px;font-size:16px;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none}.dropdown-wrapper .dropdown-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:#333}li{color:#404b52!important;font-family:inter,sans-serif!important;font-size:12px!important;padding:6px!important}::ng-deep .pagination{--bs-pagination-font-size: none !important}::ng-deep .page-item:not(:first-child) .page-link{border-radius:4px!important}.page-link{color:#404b52!important}::ng-deep .page-link.active,.active>.page-link{color:#fff!important}::ng-deep .page-link.active:hover,.active>.page-link:hover{color:#000!important}\n"] }]
11821
+ }], ctorParameters: () => [], propDecorators: { event: [{
11822
+ type: Output
11823
+ }], pageSizeOptions: [{
11824
+ type: Input
11825
+ }], collectionSize: [{
11826
+ type: Input
11827
+ }], pageSize: [{
11828
+ type: Input
11829
+ }], currentPage: [{
11830
+ type: Input
11831
+ }], maxSize: [{
11832
+ type: Input
11833
+ }], firstLastButtons: [{
11834
+ type: Input
11835
+ }], nextPreviousButtons: [{
11836
+ type: Input
11837
+ }], small: [{
11838
+ type: Input
11839
+ }] } });
11840
+
11841
+ class SearchFilterPipe {
11842
+ //getting the array datas and search data from pipe element on every change
11843
+ transform(items, searchText, ele) {
11844
+ if (!items)
11845
+ return [];
11846
+ if (!searchText)
11847
+ return items;
11848
+ return this.searchItems(items, searchText.toLowerCase(), ele);
11849
+ }
11850
+ // passing that data here, and if the search element included in that array, that element will be returned in new array
11851
+ searchItems(items, searchText, ele) {
11852
+ let results = [];
11853
+ items.forEach((data) => {
11854
+ if (ele) {
11855
+ if (data[ele]?.toLowerCase().includes(searchText)) {
11856
+ results.push(data);
11857
+ }
11858
+ }
11859
+ else {
11860
+ if (data?.toLowerCase().includes(searchText)) {
11861
+ results.push(data);
11862
+ }
11863
+ }
11864
+ });
11865
+ return results;
11866
+ }
11867
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
11868
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SearchFilterPipe, isStandalone: true, name: "searchFilter" });
11869
+ }
11870
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchFilterPipe, decorators: [{
11871
+ type: Pipe,
11872
+ args: [{
11873
+ name: 'searchFilter',
11874
+ standalone: true
11875
+ }]
11876
+ }] });
11877
+
11878
+ class DatePipe {
11879
+ transform(value, format = 'MMM d, yyyy') {
11880
+ const date = new Date(value);
11881
+ // Check if the input is a valid date
11882
+ if (isNaN(date.getTime())) {
11883
+ return value; // Return the original value if invalid
11884
+ }
11885
+ // Format the valid date and return it
11886
+ return new Intl.DateTimeFormat('en-US', {
11887
+ month: 'short',
11888
+ day: '2-digit',
11889
+ year: 'numeric'
11890
+ }).format(date);
11891
+ }
11892
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
11893
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DatePipe, isStandalone: true, name: "date", pure: false });
11894
+ }
11895
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePipe, decorators: [{
11896
+ type: Pipe,
11897
+ args: [{
11898
+ name: 'date',
11899
+ standalone: true,
11900
+ pure: false
11901
+ }]
11902
+ }] });
11903
+
11904
+ class TimePipe {
11905
+ transform(value, timeFormat = 'HH:mm') {
11906
+ const date = new Date(value);
11907
+ // Check if the input is a valid time
11908
+ if (isNaN(date.getTime())) {
11909
+ return value; // Return the original value if invalid
11910
+ }
11911
+ // Extract hours and minutes from the valid time
11912
+ const hours = date.getHours().toString().padStart(2, '0');
11913
+ const minutes = date.getMinutes().toString().padStart(2, '0');
11914
+ return `${hours}:${minutes}`; // Return the formatted time
11915
+ }
11916
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
11917
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TimePipe, isStandalone: true, name: "time", pure: false });
11918
+ }
11919
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimePipe, decorators: [{
11920
+ type: Pipe,
11921
+ args: [{
11922
+ name: 'time',
11923
+ standalone: true,
11924
+ pure: false
11925
+ }]
11926
+ }] });
11927
+
11928
+ class EditColumnCheckPipe {
11929
+ // SK10APR24 condition to check the edit column
11930
+ transform(arg, element, editCol) {
11931
+ var returnVal = "";
11932
+ if (editCol.length > 0) {
11933
+ if (typeof editCol[0] === 'string') {
11934
+ if (editCol.includes(element))
11935
+ returnVal = "string";
11936
+ }
11937
+ else if (typeof editCol[0] === 'object') {
11938
+ returnVal = (editCol.filter((col) => col.name === element)).length > 0 ? "object" : "";
11939
+ }
11940
+ }
11941
+ return returnVal;
11942
+ }
11943
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditColumnCheckPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
11944
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EditColumnCheckPipe, isStandalone: true, name: "editColumnCheck" });
11945
+ }
11946
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditColumnCheckPipe, decorators: [{
11947
+ type: Pipe,
11948
+ args: [{
11949
+ name: 'editColumnCheck',
11950
+ standalone: true
11951
+ }]
11952
+ }] });
11953
+
11954
+ class EditColumnDropdownPipe {
11955
+ // SK10APR24 to check the data type of table value is dropdown
11956
+ transform(arg, element, editCol) {
11957
+ var returnVal;
11958
+ returnVal = (editCol.filter((col) => col.name === element));
11959
+ return returnVal[0].values;
11960
+ }
11961
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditColumnDropdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
11962
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EditColumnDropdownPipe, isStandalone: true, name: "editColumnDropdown" });
11963
+ }
11964
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditColumnDropdownPipe, decorators: [{
11965
+ type: Pipe,
11966
+ args: [{
11967
+ name: 'editColumnDropdown',
11968
+ standalone: true
11969
+ }]
11970
+ }] });
11971
+
11972
+ class EditColumnTypePipe {
11973
+ // SK10APR24 to check the type of edit column in table
11974
+ transform(arg, element, editCol) {
11975
+ var returnVal;
11976
+ returnVal = (editCol.filter((col) => col.name === element));
11977
+ return returnVal[0].type;
11978
+ }
11979
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditColumnTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
11980
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: EditColumnTypePipe, isStandalone: true, name: "editColumnType" });
11981
+ }
11982
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditColumnTypePipe, decorators: [{
11983
+ type: Pipe,
11984
+ args: [{
11985
+ name: 'editColumnType',
11986
+ standalone: true
11987
+ }]
11988
+ }] });
11989
+
11990
+ class NxtDatatable {
11991
+ renderer;
11992
+ data; // get data that to be displayed in a array
11993
+ columns = []; // Columns have a label, a column type, and filter details.
11994
+ withCheckBox; // get if with or without checkbox in table
11995
+ searchBar; // if it is true, the search bar will be displayed on table
11996
+ tableSaveButton = false; // save button for editing LOP in payroll table, changed name from 'saveLOP'
11997
+ stickyColumn = false; // if the last column should be sticky, it should be sent as boolean value
11998
+ tableWidth = '100%'; // width of table can be adjusted from parent, by default it is 100%
11999
+ actionColumHeader = 'Action'; // to change the header for action column
12000
+ actionButton; //to show button colum as action
12001
+ title; // the title for the table;
12002
+ isButtons; // is button present in table;
12003
+ buttonArray; // buttons to be displayed;
12004
+ tableId; // id of table
12005
+ isEditRow; // if it is true, the row can be edited
12006
+ isDeleteRow; // if it is true, the row can be deleted
12007
+ addInlineRecord; // if it is true, the row can be added inline
12008
+ searchConfigs; // search configurations
12009
+ direction = 'ltr'; // direction of table
12010
+ pagination; // pagination configurations
12011
+ actionButtonArray; // action button configurations
12012
+ multipleFilter; // if pagination true then this will be used
12013
+ tableRowClick = new EventEmitter; // datas to be passed when table row is clicked
12014
+ onEditData = new EventEmitter; // if edit button is clicked, the data of that row will be passed
12015
+ saveButtonData = new EventEmitter; // edited rows data will be passed
12016
+ onDeleteData = new EventEmitter; // when delete button clicked pass the data
12017
+ buttonEmit = new EventEmitter; // this will emit a table top button click event
12018
+ hyperLinkEmit = new EventEmitter; // hyper link click event
12019
+ sideNavEmit = new EventEmitter; // rightnav column emit
12020
+ actionButtonEmit = new EventEmitter; // datas to be passed when table row active button is clicked
12021
+ NxtTableEmit = new EventEmitter;
12022
+ // {
12023
+ // "pagination": { // 4
12024
+ // "pageSize": 10,
12025
+ // "pageIndex": 10
12026
+ // },
12027
+ // "tableSearch": "ddd", // 1
12028
+ // "searchFilterData": { // 2
12029
+ // "lightType": [
12030
+ // "AA",
12031
+ // "BB"
12032
+ // ]
12033
+ // },
12034
+ // "sort": { // 3
12035
+ // "column": "assetCode",
12036
+ // "direction": "asc"
12037
+ // }
12038
+ // }
12039
+ sort;
12040
+ tableContainer;
12041
+ selection; // to get the selected row
12042
+ stickyCondition; // to get the sticky column index
12043
+ searchFilter = false; // to get the search filter
12044
+ filterArray = []; // to get the filter array
12045
+ selectedFilter; // to get the selected filter
12046
+ renderColumns = 'displayedColumns'; // to get the rendered columns
12047
+ pageSizeOptions; // for pagination get the page size options
12048
+ dataSource; // for table data source
12049
+ totalCount; // count of total records
12050
+ searchBoxValue; // to get the search box value
12051
+ prevSearch; // to get the previous search value
12052
+ activeColumn = null; // Track the active column
12053
+ isScrolled = false; // Boolean flag to track scroll state
12054
+ isShadowHidden = false; // Boolean flag to track shadow state
12055
+ currentSortColumn = ''; // to get the current sort column
12056
+ currentSortDirection = 'none'; // to get the current sort direction
12057
+ originalData; // Store original data for sorting
12058
+ hoveredColumn = null; // Track the hovered column
12059
+ searchText; // to get the search text
12060
+ multipleFilterArray; // to get the multiple filter array
12061
+ filterDataArray = {}; // to get the filter data array
12062
+ isResized = false; // for table column resize
12063
+ sFilterData; // to get the search filter data
12064
+ headerLabels = []; // to get the header labels
12065
+ displayedColumns = []; // to get the displayed columns
12066
+ filterColumns = []; // to get the filter columns
12067
+ hyperLinkColumns = []; // to get the hyper link columns
12068
+ editColumn = []; // to get the edit column
12069
+ dateColumns = []; // to get the date columns
12070
+ timeColumns = []; // to get the time columns
12071
+ objectColumns = []; // to get the object columns
12072
+ inlineElement; // for add a new row on table
12073
+ pageSize; // for pagination get the page size
12074
+ pageIndex; // for pagination get the page index
12075
+ totalRecords; // for pagination get the total records
12076
+ configPagination = false; // flag for config pagination
12077
+ deleteData; // to get the delete row
12078
+ deleteModal = false; // for conformation popup
12079
+ actionColumnSize; // track a action column button size
12080
+ dropdownButtonSize = 0; // for action column dropdown button size
12081
+ dropdownActionButton; // for action column dropdown button
12082
+ currentOpenIndex = null; // track the current open action dropdown icon index
12083
+ clickListener; // action column dropdown button click listener for close a dropdown button
12084
+ constructor(renderer) {
12085
+ this.renderer = renderer;
12086
+ }
12087
+ ngOnChanges() {
12088
+ console.log("ngOnChanges is running");
12089
+ this.dataSource = this.data;
12090
+ //SKS15FEB25 Initialize this in your data fetch method
12091
+ this.originalData = [...this.data];
12092
+ this.sFilterData = [...this.data];
12093
+ this.dataSource.data = this.originalData;
12094
+ this.selection = new SelectionModel(true, []);
12095
+ if (!this.totalRecords && this.data) {
12096
+ this.dataSource.data = this.data?.slice(0, 10);
12097
+ }
12098
+ setTimeout(() => {
12099
+ this.dataSource.sort = this.sort;
12100
+ }, 100);
12101
+ this.totalCount = this.totalRecords || this.data?.length;
12102
+ if (this.stickyColumn === true && this.displayedColumns) {
12103
+ this.stickyCondition = this.displayedColumns?.length;
12104
+ }
12105
+ else {
12106
+ this.stickyCondition = this.displayedColumns?.length + 1;
12107
+ }
12108
+ if (this.withCheckBox && this.actionButton) {
12109
+ this.renderColumns = 'both';
12110
+ }
12111
+ else if (this.withCheckBox) {
12112
+ this.renderColumns = 'select';
12113
+ }
12114
+ else if (this.actionButton) {
12115
+ this.renderColumns = 'action';
12116
+ }
12117
+ if (this.searchConfigs?.searchFilterVal) {
12118
+ this.searchBoxValue = this.searchConfigs?.searchFilterVal; // Show value in the search box
12119
+ this.prevSearch = this.searchConfigs?.searchFilterVal;
12120
+ }
12121
+ setTimeout(() => {
12122
+ if (this.tableContainer?.nativeElement) {
12123
+ const tableBody = this.tableContainer.nativeElement.querySelector('.table-body');
12124
+ if (tableBody) {
12125
+ this.isShadowHidden = !(tableBody.scrollHeight < 450);
12126
+ }
12127
+ }
12128
+ }, 1500); // Waits 100ms for rendering
12129
+ }
12130
+ ngOnInit() {
12131
+ this.searchBar === undefined || this.searchBar === false ? this.searchBar = false : this.searchBar = true;
12132
+ this.withCheckBox === undefined || this.withCheckBox === false ? this.withCheckBox = false : this.withCheckBox = true;
12133
+ this.isEditRow === undefined || this.isEditRow === false ? this.isEditRow = false : this.isEditRow = true;
12134
+ this.isDeleteRow === undefined || this.isDeleteRow === false ? this.isDeleteRow = false : this.isDeleteRow = true;
12135
+ this.actionButton === undefined || this.actionButton === false ? this.actionButton = false : this.actionButton = true;
12136
+ this.isButtons === undefined || this.isButtons === false ? this.isButtons = false : this.isButtons = true;
12137
+ this.addInlineRecord === undefined || this.addInlineRecord === false ? this.addInlineRecord = false : this.addInlineRecord = true;
12138
+ this.headerLabels = this.columns.map(column => column.label);
12139
+ this.displayedColumns = this.columns.map(column => column.fieldName);
12140
+ this.filterColumns = this.columns.filter(column => column.filter === true).map(column => column.fieldName);
12141
+ this.hyperLinkColumns = this.columns.filter(column => column.hyperLink === true).map(column => column.fieldName);
12142
+ this.editColumn = this.columns.filter(column => column.edit === true).map(column => column.fieldName);
12143
+ this.dateColumns = this.columns.filter(column => column.type === 'date').map(column => column.fieldName);
12144
+ this.timeColumns = this.columns.filter(column => column.type === 'time').map(column => column.fieldName);
12145
+ this.objectColumns = this.columns.filter(column => column.type === 'object').map(column => column.fieldName);
12146
+ this.inlineElement = Object.fromEntries(this.displayedColumns.map(key => [key, ""]));
12147
+ this.pageSize = this.pagination?.pageSize ? this.pagination['pageSize'] : 10;
12148
+ this.pageIndex = this.pagination?.pageIndex ? this.pagination['pageIndex'] : 1;
12149
+ this.totalRecords = this.pagination?.totalRecords ? this.pagination['totalRecords'] : undefined;
12150
+ this.pageSizeOptions = this.pagination?.pageSizeOptions ? this.pagination['pageSizeOptions'] : ['5', '10', '25', '50', '100', '200'];
12151
+ this.pagination === undefined ? this.configPagination = false : this.configPagination = true;
12152
+ if (this.isEditRow && this.isDeleteRow) {
12153
+ this.actionColumnSize = 2;
12154
+ }
12155
+ else if (this.isEditRow || this.isDeleteRow) {
12156
+ this.actionColumnSize = 1;
12157
+ }
12158
+ else {
12159
+ this.actionColumnSize = 0;
12160
+ }
12161
+ this.originalData = [...this.data];
12162
+ this.sFilterData = [...this.data];
12163
+ this.dataSource.data = this.originalData;
12164
+ if (!this.configPagination && this.data) {
12165
+ this.dataSource.data = this.data?.slice(0, 10);
12166
+ }
12167
+ if (this.filterColumns?.length > 0 && !this.configPagination) {
12168
+ this.multipleFilterArray = {};
12169
+ const filtObjs = {};
12170
+ this.filterColumns.forEach((element) => {
12171
+ this.multipleFilterArray[element] = null;
12172
+ filtObjs[element] = [];
12173
+ });
12174
+ this.data.forEach(element => {
12175
+ this.filterColumns.forEach((key) => {
12176
+ if (Object.keys(element).includes(key)) {
12177
+ filtObjs[key].push(element[key]);
12178
+ this.multipleFilterArray[key] = (new Set(filtObjs[key]));
12179
+ }
12180
+ });
12181
+ });
12182
+ this.multipleFilterArray = this.multipleFilterArray;
12183
+ }
12184
+ else {
12185
+ this.multipleFilterArray = this.multipleFilter;
12186
+ }
12187
+ this.selection = new SelectionModel(true, []);
12188
+ setTimeout(() => {
12189
+ this.dataSource.sort = this.sort;
12190
+ }, 0);
12191
+ this.totalCount = this.totalRecords || this.data?.length;
12192
+ const NxtDataTable = JSON.parse(localStorage.getItem('NxtDataTable'));
12193
+ this.currentSortColumn = NxtDataTable?.currentSortColumn;
12194
+ this.currentSortDirection = NxtDataTable?.currentSortDirection;
12195
+ if (NxtDataTable?.addRecord === true) {
12196
+ this.pageSize = NxtDataTable?.pageSize;
12197
+ this.pageIndex = NxtDataTable?.pageIndex;
12198
+ var obj = {};
12199
+ const keys = Object.keys(this.inlineElement);
12200
+ keys.forEach((elementKey) => {
12201
+ obj[elementKey] = '';
12202
+ });
12203
+ this.data.push(obj);
12204
+ const data = this.data;
12205
+ this.dataSource.data = data;
12206
+ this.selection.select(this.data[this.data.length - 1]);
12207
+ this.data[this.data.length - 1].editRow = true;
12208
+ localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: false, pageSize: 10, pageIndex: this.pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
12209
+ }
12210
+ if (this.stickyColumn === true && this.displayedColumns) {
12211
+ this.stickyCondition = this.displayedColumns?.length;
12212
+ }
12213
+ else {
12214
+ this.stickyCondition = this.displayedColumns?.length + 1;
12215
+ }
12216
+ if (this.withCheckBox && this.actionButton) {
12217
+ this.renderColumns = 'both';
12218
+ }
12219
+ else if (this.withCheckBox) {
12220
+ this.renderColumns = 'select';
12221
+ }
12222
+ else if (this.actionButton) {
12223
+ this.renderColumns = 'action';
12224
+ }
12225
+ setTimeout(() => {
12226
+ if (this.tableContainer?.nativeElement) {
12227
+ const tableBody = this.tableContainer.nativeElement.querySelector('.table-body');
12228
+ if (tableBody) {
12229
+ this.isShadowHidden = !(tableBody.scrollHeight < 450);
12230
+ }
12231
+ }
12232
+ }, 1500); // Waits 100ms for rendering
12233
+ }
12234
+ // SKS15FEB25 Custom sort function
12235
+ sortData(column) {
12236
+ // Define sorting states
12237
+ const sortingStates = ['asc', 'desc', 'none'];
12238
+ if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
12239
+ // Determine the current sorting state
12240
+ if (this.currentSortColumn === column) {
12241
+ // Move to the next sorting state
12242
+ const currentIndex = sortingStates.indexOf(this.currentSortDirection);
12243
+ this.currentSortDirection = sortingStates[(currentIndex + 1) % sortingStates.length];
12244
+ }
12245
+ else {
12246
+ // If a new column is selected, start with ascending sort
12247
+ this.currentSortColumn = column;
12248
+ this.currentSortDirection = 'asc';
12249
+ }
12250
+ const data = [...this.dataSource.data];
12251
+ // Only sort if the direction is 'asc' or 'desc'
12252
+ if (this.currentSortDirection === 'asc' || this.currentSortDirection === 'desc') {
12253
+ data.sort((a, b) => {
12254
+ let valueA = a[column];
12255
+ let valueB = b[column];
12256
+ // Handle undefined or null values
12257
+ if (valueA == null && valueB == null)
12258
+ return 0; // Both are null/undefined
12259
+ if (valueA == null)
12260
+ return this.currentSortDirection === 'asc' ? 1 : -1; // valueA is null
12261
+ if (valueB == null)
12262
+ return this.currentSortDirection === 'asc' ? -1 : 1; // valueB is null
12263
+ // Handle date sorting
12264
+ if (this.isDateColumn(column)) {
12265
+ const dateA = new Date(valueA);
12266
+ const dateB = new Date(valueB);
12267
+ valueA = dateA.getTime();
12268
+ valueB = dateB.getTime();
12269
+ }
12270
+ else if (typeof valueA === 'number' && typeof valueB === 'number') {
12271
+ // Handle number sorting
12272
+ valueA = Number(valueA);
12273
+ valueB = Number(valueB);
12274
+ }
12275
+ else if (typeof valueA === 'string' && typeof valueB === 'string') {
12276
+ // Handle string comparison
12277
+ valueA = valueA.toLowerCase();
12278
+ valueB = valueB.toLowerCase();
12279
+ }
12280
+ // Compare values
12281
+ if (valueA < valueB) {
12282
+ return this.currentSortDirection === 'asc' ? -1 : 1;
12283
+ }
12284
+ else if (valueA > valueB) {
12285
+ return this.currentSortDirection === 'asc' ? 1 : -1;
12286
+ }
12287
+ else {
12288
+ // If values are the same, return 0 to maintain original order
12289
+ return 0;
12290
+ }
12291
+ });
12292
+ this.dataSource.data = data;
12293
+ }
12294
+ else {
12295
+ this.dataSource.data = this.data;
12296
+ }
12297
+ }
12298
+ else {
12299
+ // Determine the current sorting state
12300
+ if (this.currentSortColumn === column) {
12301
+ // Move to the next sorting state
12302
+ const currentIndex = sortingStates.indexOf(this.currentSortDirection);
12303
+ this.currentSortDirection = sortingStates[(currentIndex + 1) % sortingStates.length];
12304
+ }
12305
+ else {
12306
+ // If a new column is selected, start with ascending sort
12307
+ this.currentSortColumn = column;
12308
+ this.currentSortDirection = 'asc';
12309
+ }
12310
+ this.pageIndex = 1;
12311
+ this.pageSize = 10;
12312
+ localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: false, pageSize: 10, pageIndex: this.pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
12313
+ // Only sort if the direction is 'asc' or 'desc'
12314
+ this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: 1 }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12315
+ }
12316
+ }
12317
+ onScroll(tableContainer) {
12318
+ this.isScrolled = tableContainer.scrollTop > 0;
12319
+ const tableBodyHeight = tableContainer.scrollHeight;
12320
+ const isAtBottom = tableBodyHeight - tableContainer.scrollTop <= tableContainer.clientHeight + 1;
12321
+ //SKS15FEB25 Ensure shadow is hidden only if table body height is greater than 400px
12322
+ this.isShadowHidden = !(isAtBottom || tableBodyHeight < 450);
12323
+ }
12324
+ //SKS15FEB25 losing the filter component when the mouse is clicked outside table
12325
+ onDocumentClick(event) {
12326
+ this.searchFilter = false;
12327
+ event.stopPropagation(); // prevents any other default action
12328
+ }
12329
+ //SKS15FEB25 filter data that to be displayed in header filter icon is passed in 'filterArray' array
12330
+ filter(datas) {
12331
+ this.filterArray = [];
12332
+ this.selectedFilter = datas;
12333
+ this.filterArray = this.multipleFilterArray[datas];
12334
+ this.searchFilter = !this.searchFilter;
12335
+ this.isResized = this.filterDataArray[this.selectedFilter]?.length > 0;
12336
+ }
12337
+ // SKS15FEB25 emitting pagr size and index to parent on paginating
12338
+ pageParams(event) {
12339
+ if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
12340
+ this.pageIndex = event.pageIndex;
12341
+ this.pageSize = event.pageSize;
12342
+ const start = (Number(event.pageIndex) - 1) * Number(event.pageSize);
12343
+ const end = start + Number(event.pageSize);
12344
+ this.dataSource.data = this.sFilterData?.slice(start, end);
12345
+ }
12346
+ else {
12347
+ this.NxtTableEmit.emit({ pagination: { pageSize: event.pageSize, pageIndex: event.pageIndex }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12348
+ }
12349
+ }
12350
+ // SKS15FEB25 apply search bar filter using mat
12351
+ applyFilter(event) {
12352
+ console.log("i am in apply filter");
12353
+ let filterValue = event.target.value;
12354
+ filterValue = filterValue.trim().toLowerCase();
12355
+ if (!filterValue) {
12356
+ this.dataSource.data = [...this.originalData]; // Reset to original data
12357
+ }
12358
+ else {
12359
+ this.dataSource.data = this.originalData.filter(item => this.displayedColumns.some(column => {
12360
+ const value = item[column]?.toString().toLowerCase() || '';
12361
+ return value.includes(filterValue);
12362
+ }));
12363
+ }
12364
+ this.pageIndex = 1;
12365
+ this.pageSize = 10;
12366
+ this.sFilterData = this.dataSource.data;
12367
+ this.totalCount = this.dataSource.data.length;
12368
+ const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
12369
+ const end = start + Number(this.pageSize);
12370
+ this.dataSource.data = this.dataSource.data?.slice(start, end);
12371
+ this.filterRetain(this.filterDataArray);
12372
+ }
12373
+ /** SKS15FEB25 Whether the number of selected elements matches the total number of rows. */
12374
+ isAllSelected() {
12375
+ // check if all rows are selected
12376
+ const numSelected = this.selection.selected.length;
12377
+ const numRows = this.dataSource.data.length;
12378
+ return numSelected === numRows;
12379
+ }
12380
+ /** SKS15FEB25 Selects all rows if they are not all selected; otherwise clear selection. */
12381
+ masterToggle() {
12382
+ // if there is a selection then clear that selection
12383
+ // emit the selected value only to parent
12384
+ if (this.isSomeSelected()) {
12385
+ // to remove the editRow, if the checkbox is unchecked
12386
+ this.selection.selected.forEach((element) => {
12387
+ if (element?.editRow)
12388
+ element.editRow = false;
12389
+ });
12390
+ this.selection.clear();
12391
+ }
12392
+ else {
12393
+ // If no items are selected, either select all items or clear the selection
12394
+ // emit the selected values to parent
12395
+ this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach((row) => this.selection.select(row));
12396
+ }
12397
+ }
12398
+ // SKS15FEB25 Checks whether any items are currently selected in the table.
12399
+ isSomeSelected() {
12400
+ return this.selection.selected.length > 0;
12401
+ }
12402
+ // SKS15FEB25 emit the check box values, that selected separately
12403
+ separateRowSelect(data, element) {
12404
+ // to remove the editRow id check box is unchecked on separate row
12405
+ if (data && element?.editRow) {
12406
+ element.editRow = false;
12407
+ }
12408
+ }
12409
+ //SKS15FEB25 data that to be passed, when table row is clicked
12410
+ tableClick(data) {
12411
+ this.tableRowClick.emit(data);
12412
+ }
12413
+ //SKS15FEB25 Retain the filterdata
12414
+ filterRetain(filterkey) {
12415
+ if (Object.keys(filterkey).length == 0) {
12416
+ this.data = this.sFilterData;
12417
+ }
12418
+ else {
12419
+ this.data = [];
12420
+ let isDataChecked = false;
12421
+ for (let key of Object.keys(filterkey)) {
12422
+ if (filterkey[key] && filterkey[key].length > 0) {
12423
+ isDataChecked = true;
12424
+ }
12425
+ }
12426
+ if (!isDataChecked) {
12427
+ this.data = this.sFilterData;
12428
+ }
12429
+ else {
12430
+ for (let key of Object.keys(filterkey)) {
12431
+ if (filterkey[key]) {
12432
+ const data = this.sFilterData.filter((name) => filterkey[key]?.includes(name[key]));
12433
+ const data1 = [...this.data, ...data];
12434
+ this.data = this.removeDuplicates(data1);
12435
+ }
12436
+ }
12437
+ }
12438
+ }
12439
+ this.pageIndex = 1;
12440
+ this.pageSize = 10;
12441
+ this.totalCount = this.data.length;
12442
+ this.dataSource.data = this.data;
12443
+ }
12444
+ // SKS15FEB25 to remove duplicate object form two arrays
12445
+ removeDuplicates(objects) {
12446
+ const seen = new Set();
12447
+ const uniqueObjects = [];
12448
+ objects.forEach((obj) => {
12449
+ const key = JSON.stringify(obj);
12450
+ if (!seen.has(key)) {
12451
+ seen.add(key);
12452
+ uniqueObjects.push(obj);
12453
+ }
12454
+ });
12455
+ return uniqueObjects;
12456
+ }
12457
+ // SKS15FEB25 on delete click save the data in variables
12458
+ deleteRecord(data) {
12459
+ this.deleteData = data;
12460
+ this.deleteModal = true;
12461
+ }
12462
+ // SKS15FEB25 after clicking yes in delete alert modal, emit to parent
12463
+ deleteRecordData() {
12464
+ this.onDeleteData.emit({ data: this.deleteData, allData: this.data });
12465
+ this.deleteModal = false;
12466
+ }
12467
+ //SKS15FEB25 to save the edited data in table;
12468
+ saveButton() {
12469
+ // emitting all data with selected data
12470
+ this.saveButtonData.emit({ selectedData: this.selection.selected, allData: this.data });
12471
+ }
12472
+ //SKS15FEB25 pass the rejected reason
12473
+ onEdit(data) {
12474
+ if (typeof data === 'object')
12475
+ data.editRow = true; // made editing row as true // solve undefined error on string
12476
+ this.selection.select(data);
12477
+ this.onEditData.emit({ data: data, allData: this.data });
12478
+ }
12479
+ // SKS15FEB25 table top buttons emit
12480
+ commonButtonClick(button) {
12481
+ this.buttonEmit.emit(button);
12482
+ }
12483
+ // SKS15FEB25 This function is used to retrieve data from objects.
12484
+ // In 'element' we will pass object and in 'column' we will pass path as string eg.employee.financeInfo[0].uan to retieve uan value
12485
+ getValue(element, column) {
12486
+ const initialEl = element; // fixed table search issue
12487
+ let flds = column.split('.');
12488
+ for (let i = 0; i < flds.length; i++) {
12489
+ let splitFlds = flds[i].split('[');
12490
+ if (splitFlds.length === 1) {
12491
+ element = element[flds[i]] || '';
12492
+ }
12493
+ else {
12494
+ let index = Number(splitFlds[1].split(']')[0]);
12495
+ element = element[splitFlds[0]][index] || ''; //To solve undefined error
12496
+ }
12497
+ }
12498
+ Object.assign(initialEl, { [column]: element }); // Fixed Expression changed issue
12499
+ return element;
12500
+ }
12501
+ //SKS15FEB25 hyperlinl columns only emitted
12502
+ onClickHyperlink(column, element, isHyperLink) {
12503
+ if (isHyperLink)
12504
+ this.hyperLinkEmit.emit({ column: column, element: element });
12505
+ }
12506
+ // SKS15FEB25 to check whether the hyperlink action is present in that column
12507
+ checkHyperlinkCheck(col) {
12508
+ return this.hyperLinkColumns?.includes(col) ? true : false;
12509
+ }
12510
+ // SKS15FEB25 on add record in table, the 'inlineElement' values will be assigned to the table data
12511
+ addTableRecord(element) {
12512
+ if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
12513
+ var obj = {};
12514
+ const keys = Object.keys(element);
12515
+ keys.forEach((elementKey) => {
12516
+ obj[elementKey] = '';
12517
+ });
12518
+ this.data.push(obj);
12519
+ const data = this.data;
12520
+ this.dataSource.data = data;
12521
+ if (this.stickyColumn === true && this.displayedColumns) {
12522
+ this.stickyCondition = this.displayedColumns?.length;
12523
+ }
12524
+ else {
12525
+ this.stickyCondition = this.displayedColumns?.length + 1;
12526
+ }
12527
+ this.pageSize = 10;
12528
+ this.totalCount = this.data.length;
12529
+ this.pageIndex = Math.ceil(this.totalCount / this.pageSize);
12530
+ const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
12531
+ const end = start + Number(this.pageSize);
12532
+ this.dataSource.data = this.data?.slice(start, end);
12533
+ this.selection.select(this.data[this.data.length - 1]);
12534
+ this.data[this.data.length - 1].editRow = true;
12535
+ }
12536
+ else {
12537
+ const pageIndex = Math.ceil(this.totalRecords / 10);
12538
+ localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: true, pageSize: 10, pageIndex: pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
12539
+ this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: pageIndex }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12540
+ }
12541
+ }
12542
+ // SKS15FEB25 Action button conditionally displayed function
12543
+ isConditionMet(element, conditions) {
12544
+ if (conditions !== undefined) {
12545
+ const { andConditionList, orConditionList } = conditions;
12546
+ // If andConditionList exists, check that all conditions are met
12547
+ const isAndConditionMet = andConditionList ? andConditionList.every((cond) => cond.condition.includes(element[cond.column])) : true; // If no andConditionList, consider it as always met
12548
+ // If orConditionList exists, check if at least one condition is met
12549
+ const isOrConditionMet = orConditionList ? orConditionList.some((cond) => cond.condition.includes(element[cond.column])) : true; // If no orConditionList, consider it as always met
12550
+ // Return true if the AND condition is met and the OR condition is met
12551
+ return isAndConditionMet && isOrConditionMet;
12552
+ }
12553
+ else {
12554
+ return true;
12555
+ }
12556
+ }
12557
+ // SKS15FEB25 Check if the column is a date column
12558
+ isDateColumn(column) {
12559
+ return this.dateColumns?.includes(column) ?? false;
12560
+ }
12561
+ // SKS15FEB25 Check if the column is a time column
12562
+ isTimeColumn(column) {
12563
+ return this.timeColumns?.includes(column) ?? false;
12564
+ }
12565
+ // SKS15FEB25 config search filter box function
12566
+ onSearch(event) {
12567
+ this.searchBoxValue = event; // Update the displayed value in the search box
12568
+ if (this.searchConfigs || this.dataSource.data.length === this.totalRecords) {
12569
+ this.pageIndex = 1;
12570
+ this.pageSize = 10;
12571
+ this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12572
+ }
12573
+ }
12574
+ // SKS15FEB25 If the value in the search box is empty, call the onSearch function automatically
12575
+ emptySearch(event) {
12576
+ if (!event.target.value.trim() && (this.prevSearch != event.target.value.trim())) {
12577
+ this.onSearch(event.target.value);
12578
+ }
12579
+ this.prevSearch = event.target.value.trim();
12580
+ }
12581
+ // SKS15FEB25 infoSidescreen emit
12582
+ onSideNavInfoClick(data, col) {
12583
+ this.sideNavEmit.emit({
12584
+ data, col,
12585
+ config: undefined
12586
+ });
12587
+ }
12588
+ // SKS15FEB25 for active column select
12589
+ onColumnClick(column) {
12590
+ this.activeColumn = column;
12591
+ }
12592
+ // SKS15FEB25 for close search filter box
12593
+ closefilter() {
12594
+ this.filterDataArray[this.selectedFilter] = [];
12595
+ this.filterRetain(this.filterDataArray);
12596
+ }
12597
+ // SKS15FEB25 search filter box checkbox retain
12598
+ isSelected(event) {
12599
+ if (this.filterDataArray[this.selectedFilter] && this.filterDataArray[this.selectedFilter].includes(event)) {
12600
+ return true;
12601
+ }
12602
+ else {
12603
+ return false;
12604
+ }
12605
+ }
12606
+ // SKS15FEB25 search filter box checkbox select
12607
+ checkedData(event) {
12608
+ let selectedArray = [];
12609
+ selectedArray = this.filterDataArray[this.selectedFilter] ? this.filterDataArray[this.selectedFilter] : [];
12610
+ if (selectedArray && selectedArray.includes(event)) {
12611
+ selectedArray = selectedArray.filter((item) => item !== event);
12612
+ }
12613
+ else {
12614
+ selectedArray.push(event);
12615
+ }
12616
+ this.filterDataArray[this.selectedFilter] = selectedArray;
12617
+ this.isResized = selectedArray?.length > 0;
12618
+ if (this.dataSource.data.length !== this.totalRecords && this.configPagination) {
12619
+ this.pageIndex = 1;
12620
+ this.pageSize = 10;
12621
+ this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12622
+ }
12623
+ else {
12624
+ this.filterRetain(this.filterDataArray);
12625
+ }
12626
+ }
12627
+ // SKS15FEB25 action column button count track
12628
+ incrementActionColumnSize() {
12629
+ this.actionColumnSize++;
12630
+ this.dropdownButtonSize++;
12631
+ return ''; // Returning empty string to avoid rendering issues
12632
+ }
12633
+ // SKS15FEB25 action column dropdown buttons slice
12634
+ updatedDropdownArraySize() {
12635
+ this.dropdownActionButton = this.actionButtonArray?.buttonArray.slice(this.dropdownButtonSize);
12636
+ return "";
12637
+ }
12638
+ // SKS15FEB25 action column dropdown buttons close
12639
+ addClickOutsideListener() {
12640
+ if (!this.clickListener) {
12641
+ this.clickListener = this.renderer.listen('document', 'click', (event) => {
12642
+ if (!event.target.closest('.dropdown')) {
12643
+ this.currentOpenIndex = null;
12644
+ this.removeClickListener();
12645
+ }
12646
+ });
12647
+ }
12648
+ }
12649
+ //SKS15FEB25 if close the dropdown menu stop the click listener
12650
+ removeClickListener() {
12651
+ if (this.clickListener) {
12652
+ this.clickListener();
12653
+ this.clickListener = null;
12654
+ }
12655
+ }
12656
+ // SKS15FEB25 action column dropdown buttons open / c;ose
12657
+ toggleDropdown(index) {
12658
+ this.currentOpenIndex = this.currentOpenIndex === index ? null : index;
12659
+ this.addClickOutsideListener();
12660
+ }
12661
+ //SKS15FEB25 action button evnt emit
12662
+ actionButtonClicked(event) {
12663
+ this.actionButtonEmit.emit(event);
12664
+ }
12665
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
12666
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div class=\"m-4\">\n <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n {{title}}\n </div>\n <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <input class=\"medium-font\" type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of displayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\" [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); sortData(column)\"\n (mouseenter)=\"hoveredColumn = column\"\n (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <div class=\"ellipsis\" title=\"{{ headerLabels[displayedColumns.indexOf(column)] }}\">{{headerLabels[displayedColumns.indexOf(column)]}}</div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <!--SKS15FEB25 Red dot for active filter -->\n <circle *ngIf=\"filterDataArray[column]?.length > 0\" cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n </svg>\n <div class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection === 'desc' ? '\u2193' : '' }}\n </span>\n <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\" class=\"search-component position-absolute\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n (change)=\"checkedData(data)\">\n <div class=\"medium-font ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\" ></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\" style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\" (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of displayedColumns ellipsis\" class=\"table-cell body-color\">\n <div *ngIf=\" column !== 'active'\">\n <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n *ngIf=\"hyperLinkColumns?.includes(column)\"\n (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n {{ element[column] | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n {{ element[column] | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n {{ element[column] }}\n </ng-template> \n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n </svg> \n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n {{ element[column] | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n {{ element[column] | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n {{ element[column] }}\n </ng-template> \n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n </svg> \n </ng-container> \n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n <input #editColElement class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \" [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \" [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\" class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"\n placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" [disabled]=\"element.editRow ? false : true\" />\n <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\" class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"\n [(ngModel)]=\"element[column]\">\n <option [disabled]=\"element.editRow ? false : true\" *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \" [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n </div>\n \n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n </svg>\n </div>\n </div>\n \n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <!--SKS15FEB25 Render inline buttons up to actionColumnSize -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"actionColumnSize < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n {{ incrementActionColumnSize() }}\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip \n (click)=\"actionButtonClicked(button)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"> \n </div>\n </div>\n </div>\n </div>\n {{ updatedDropdownArraySize() }}\n <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <div class=\"dropdown-menu\" *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\"> \n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\"\n style=\"display: flex;\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n [matTooltip]=btn.tooltip\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn)\">\n <img [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n </button>\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data.length === 0\" class=\"\">\n No records/data found.\n </div>\n </div>\n </ng-container>\n\n <ng-template #loadingTemplate>\n <!--SKS15FEB25 Skeleton Loader -->\n <div class=\"skeleton-loader\">\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n </div>\n </div>\n </ng-template>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"editColumn.length > 0 || tableSaveButton\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n </div>\n <nxt-pagination [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\" aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n </div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;height:450px;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] });
12667
+ }
12668
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
12669
+ type: Component,
12670
+ args: [{ selector: 'nxt-datatable', standalone: true, imports: [
12671
+ CommonModule,
12672
+ ReactiveFormsModule,
12673
+ FormsModule,
12674
+ NxtButtonComponent,
12675
+ NxtPagination,
12676
+ SearchFilterPipe,
12677
+ DatePipe,
12678
+ TimePipe,
12679
+ EditColumnCheckPipe,
12680
+ EditColumnDropdownPipe,
12681
+ EditColumnTypePipe,
12682
+ MatTooltipModule
12683
+ // RowResizerDirective
12684
+ ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n <div class=\"m-4\">\n <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n {{title}}\n </div>\n <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n <div class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n Nos </p>\n <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n </div>\n\n <div class=\"flex\" style=\"align-items: center;\">\n <div *ngIf=\"searchBar\" class=\"search\">\n <div class=\"flex search-bar\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <input class=\"medium-font\" type=\"text\" placeholder=\"Search\"\n (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n <nxt-button class=\"data-table-fsbtn\" (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n [isImageSvg]=\"button.isImageSvg\">\n </nxt-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"table-margin\">\n <div class=\"table-container\" #tableContainer (scroll)=\"onScroll(tableContainer)\">\n <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n <div class=\"custom-table\">\n <!--SKS15FEB25 Table Header -->\n <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n <div class=\"table-row\">\n <!--SKS15FEB25 Checkbox Column -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n [checked]=\"selection?.hasValue()\"\n [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n class=\"custom-checkbox\">\n </div>\n\n <!--SKS15FEB25 Data Columns -->\n <div *ngFor=\"let column of displayedColumns; let i = index\"\n class=\"table-cell tableHeader head-color\" [class.sticky-column]=\"i === (stickyCondition - 1)\"\n [class.active-column]=\"activeColumn === column\"\n (click)=\"$event.stopPropagation(); onColumnClick(column); sortData(column)\"\n (mouseenter)=\"hoveredColumn = column\"\n (mouseleave)=\"hoveredColumn = null\">\n <div class=\"columnDiv\">\n <div class=\"column-header\">\n <div class=\"ellipsis\" title=\"{{ headerLabels[displayedColumns.indexOf(column)] }}\">{{headerLabels[displayedColumns.indexOf(column)]}}</div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <!--SKS15FEB25 Red dot for active filter -->\n <circle *ngIf=\"filterDataArray[column]?.length > 0\" cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n </svg>\n <div class=\"sort-indicators\">\n <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection === 'desc' ? '\u2193' : '' }}\n </span>\n <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n \u2191\n </span>\n </div>\n <div *ngIf=\"searchFilter && column === selectedFilter\" class=\"search-component position-absolute\">\n <div class=\"card\">\n <div class=\"content\">\n <div class=\"flex\">\n <div class=\"fsearch\" [class.resized]=\"isResized\">\n <div class=\"fsearch-bar\">\n <svg class=\"searchSvg\" width=\"18\" height=\"20\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n </div>\n </div>\n <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n (change)=\"checkedData(data)\">\n <div class=\"medium-font ms-2 label-data\">{{data}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"resize-handle\" ></div> <!--SKS15FEB25 appRowResizer -->\n </div>\n </div>\n\n <!--SKS15FEB25 Action Column -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n class=\"table-cell head-color actionCol sticky-column\" style=\"padding: 12px !important;\">\n {{actionColumHeader}}\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 Table Body -->\n <div class=\"table-body\">\n <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\" (click)=\"tableClick(element)\">\n <!--SKS15FEB25 Checkbox Cell -->\n <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n <input type=\"checkbox\" class=\"custom-checkbox\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"separateRowSelect(selection.toggle(element), element)\"\n [checked]=\"selection.isSelected(element)\"\n [disabled]=\"(element.isPayProcessed === true)\">\n </div>\n\n <!--SKS15FEB25 Data Cells -->\n <div *ngFor=\"let column of displayedColumns ellipsis\" class=\"table-cell body-color\">\n <div *ngIf=\" column !== 'active'\">\n <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n *ngIf=\"hyperLinkColumns?.includes(column)\"\n (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n {{ element[column] | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n {{ element[column] | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n {{ element[column] }}\n </ng-template> \n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n </svg> \n </ng-container>\n </div>\n\n <div *ngIf=\"!editColumn?.includes(column)\">\n <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n {{ element[column] | date }}\n </ng-container>\n <ng-template #checkTime>\n <ng-container *ngIf=\"isTimeColumn(column); else default\">\n {{ element[column] | time }}\n </ng-container>\n </ng-template>\n <ng-template #default>\n {{ element[column] }}\n </ng-template> \n <!--SKS15FEB25 rightnav column -->\n <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n </svg> \n </ng-container> \n </div>\n </div>\n\n <!--SKS15FEB25 added input box for inline edit input-->\n <div *ngIf=\"editColumn.length > 0\">\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n <input #editColElement class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \" [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n </div>\n <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \" [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\" class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"\n placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" [disabled]=\"element.editRow ? false : true\" />\n <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n <select type=\"dropdown\" *ngIf=\"element.editRow\" class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"\n [(ngModel)]=\"element[column]\">\n <option [disabled]=\"element.editRow ? false : true\" *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n </select>\n <input *ngIf=\"!element.editRow\" #editColElement class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \" [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n </div>\n \n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n </svg>\n </div>\n </div>\n \n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <!--SKS15FEB25 Render inline buttons up to actionColumnSize -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"actionColumnSize < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n {{ incrementActionColumnSize() }}\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip \n (click)=\"actionButtonClicked(button)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"> \n </div>\n </div>\n </div>\n </div>\n {{ updatedDropdownArraySize() }}\n <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <div class=\"dropdown-menu\" *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\"> \n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\"\n style=\"display: flex;\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n [matTooltip]=btn.tooltip\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn)\">\n <img [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n </button>\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data.length === 0\" class=\"\">\n No records/data found.\n </div>\n </div>\n </ng-container>\n\n <ng-template #loadingTemplate>\n <!--SKS15FEB25 Skeleton Loader -->\n <div class=\"skeleton-loader\">\n <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n </div>\n </div>\n </ng-template>\n </div>\n <!--SKS15FEB25 Pagination -->\n <div [class.shadow-hidden]=\"isShadowHidden\">\n <!-- table input save button changes -->\n <div class=\"d-flex inlineAdd justify-content-end\">\n <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\" matTooltip=\"Add Record\">\n <div class=\"addIcon\">\n <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n </div>\n </div>\n <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n <nxt-button *ngIf=\"editColumn.length > 0 || tableSaveButton\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n </div>\n <nxt-pagination [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\">\n </nxt-pagination>\n </div>\n </div>\n </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show d-block\" id=\"deleteRecord\" tabindex=\"-1\" aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteModal = false\"></button>\n </div>\n <div class=\"modal-body\">\n Are you sure want to delete the record ?\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">No</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteRecordData()\">Yes</button>\n </div>\n </div>\n </div>\n </div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;height:450px;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}\n"] }]
12685
+ }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { data: [{
12686
+ type: Input
12687
+ }], columns: [{
12688
+ type: Input
12689
+ }], withCheckBox: [{
12690
+ type: Input
12691
+ }], searchBar: [{
12692
+ type: Input
12693
+ }], tableSaveButton: [{
12694
+ type: Input
12695
+ }], stickyColumn: [{
12696
+ type: Input
12697
+ }], tableWidth: [{
12698
+ type: Input
12699
+ }], actionColumHeader: [{
12700
+ type: Input
12701
+ }], actionButton: [{
12702
+ type: Input
12703
+ }], title: [{
12704
+ type: Input
12705
+ }], isButtons: [{
12706
+ type: Input
12707
+ }], buttonArray: [{
12708
+ type: Input
12709
+ }], tableId: [{
12710
+ type: Input
12711
+ }], isEditRow: [{
12712
+ type: Input
12713
+ }], isDeleteRow: [{
12714
+ type: Input
12715
+ }], addInlineRecord: [{
12716
+ type: Input
12717
+ }], searchConfigs: [{
12718
+ type: Input
12719
+ }], direction: [{
12720
+ type: Input
12721
+ }], pagination: [{
12722
+ type: Input
12723
+ }], actionButtonArray: [{
12724
+ type: Input
12725
+ }], multipleFilter: [{
12726
+ type: Input
12727
+ }], tableRowClick: [{
12728
+ type: Output
12729
+ }], onEditData: [{
12730
+ type: Output
12731
+ }], saveButtonData: [{
12732
+ type: Output
12733
+ }], onDeleteData: [{
12734
+ type: Output
12735
+ }], buttonEmit: [{
12736
+ type: Output
12737
+ }], hyperLinkEmit: [{
12738
+ type: Output
12739
+ }], sideNavEmit: [{
12740
+ type: Output
12741
+ }], actionButtonEmit: [{
12742
+ type: Output
12743
+ }], NxtTableEmit: [{
12744
+ type: Output
12745
+ }], sort: [{
12746
+ type: ViewChild,
12747
+ args: [MatSort]
12748
+ }], tableContainer: [{
12749
+ type: ViewChild,
12750
+ args: ['tableContainer']
12751
+ }], onDocumentClick: [{
12752
+ type: HostListener,
12753
+ args: ['document:click', ['$event']]
12754
+ }] } });
12755
+
11619
12756
  /*
11620
12757
  * Public API Surface of nxt-app
11621
12758
  */
11622
- // export * from './lib/style.css';
11623
12759
 
11624
12760
  /**
11625
12761
  * Generated bundle index. Do not edit.
11626
12762
  */
11627
12763
 
11628
- export { BookletComponent, ElementComponent, FormComponent, I18nComponent, I18nPipe, MenuComponent, NxtAppComponent, NxtAppModule, NxtAppService, PropertiesComponent, QuestionbookComponent, QuestionnaireComponent, SalesforceService, SummaryPageComponent };
12764
+ export { BookletComponent, ElementComponent, FormComponent, I18nComponent, I18nPipe, MenuComponent, NxtAppComponent, NxtAppModule, NxtAppService, NxtDatatable, PropertiesComponent, QuestionbookComponent, QuestionnaireComponent, SalesforceService, SummaryPageComponent };
11629
12765
  //# sourceMappingURL=rangertechnologies-ngnxt.mjs.map