@rangertechnologies/ngnxt 2.1.97 → 2.1.99

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 (15) hide show
  1. package/esm2022/lib/components/datatable/datatable.component.mjs +35 -39
  2. package/esm2022/lib/pages/builder/element/element.component.mjs +35 -28
  3. package/esm2022/lib/pages/builder/form/form.component.mjs +3 -3
  4. package/esm2022/lib/pages/builder/properties/properties.component.mjs +63 -76
  5. package/esm2022/lib/services/form-builder.service.mjs +20 -12
  6. package/fesm2022/rangertechnologies-ngnxt.mjs +150 -152
  7. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  8. package/lib/components/datatable/datatable.component.d.ts +0 -4
  9. package/lib/pages/builder/element/element.component.d.ts +1 -10
  10. package/lib/pages/builder/properties/properties.component.d.ts +1 -36
  11. package/lib/services/form-builder.service.d.ts +8 -6
  12. package/package.json +1 -1
  13. package/rangertechnologies-ngnxt-2.1.99.tgz +0 -0
  14. package/src/lib/style.css +1 -18
  15. package/rangertechnologies-ngnxt-2.1.97.tgz +0 -0
package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED
@@ -10478,10 +10478,10 @@ class FormBuilderService {
10478
10478
  selectedElementSubject = new BehaviorSubject(-1);
10479
10479
  elementComponent = null;
10480
10480
  book;
10481
- formElements$ = this.formElementsSubject.asObservable();
10482
- selectedElement$ = this.selectedElementSubject.asObservable();
10483
10481
  unique_id;
10484
10482
  tempElem;
10483
+ formElements$ = this.formElementsSubject.asObservable();
10484
+ selectedElement$ = this.selectedElementSubject.asObservable();
10485
10485
  // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
10486
10486
  constructor() {
10487
10487
  // Load saved elements from localStorage
@@ -10503,6 +10503,9 @@ class FormBuilderService {
10503
10503
  }
10504
10504
  // Add a new element to the form
10505
10505
  addElement(element) {
10506
+ if (!element.options) {
10507
+ element.options = []; // options is initialized
10508
+ }
10506
10509
  // const savedFormElements = localStorage.getItem('formElements');
10507
10510
  if (this.formElements.length == 0) {
10508
10511
  // this.formElements = JSON.parse(savedFormElements);
@@ -10535,14 +10538,15 @@ class FormBuilderService {
10535
10538
  }
10536
10539
  this.formElements.push(element);
10537
10540
  // localStorage.setItem('formElements', JSON.stringify(this.formElements));
10538
- // this.formElementsSubject.next([...this.formElements]);
10541
+ this.formElementsSubject.next([...this.formElements]);
10539
10542
  }
10540
10543
  updateElement(index, updates) {
10541
10544
  const elements = [...this.getElements()];
10542
10545
  if (elements[index]) {
10543
10546
  elements[index] = {
10544
10547
  ...elements[index],
10545
- ...updates
10548
+ ...updates,
10549
+ options: updates.options || elements[index].options || [],
10546
10550
  };
10547
10551
  this.formElementsSubject.next(elements);
10548
10552
  }
@@ -10573,19 +10577,23 @@ class FormBuilderService {
10573
10577
  this.selectedElementSubject.next(index);
10574
10578
  }
10575
10579
  getElements() {
10576
- return this.formElements;
10580
+ return this.formElements.map(element => ({
10581
+ ...element,
10582
+ options: element.options || [],
10583
+ }));
10577
10584
  }
10585
+ // In FormBuilderService
10578
10586
  downloadElement() {
10579
10587
  this.book.bookQuestionsMap[this.unique_id].subQuestions = this.formElements;
10588
+ console.log('book', this.book.bookQuestionsMap[this.unique_id].subQuestions);
10580
10589
  let tempElement = {};
10581
10590
  this.formElements.forEach((element) => {
10582
10591
  if (element.type === 'Dropdown' || element.type === 'Radio' || element.type === 'CheckBox') {
10583
- // Initialize the array if it doesn't exist
10584
- if (!tempElement[element.id]) {
10585
- tempElement[element.id] = [];
10586
- }
10587
- // Push the current element into the array
10588
- tempElement[element.id].push(element);
10592
+ //AP 25FEB25 - Store the entire question with its options under its ID
10593
+ tempElement[element.id] = {
10594
+ ...element,
10595
+ options: element.options || []
10596
+ };
10589
10597
  }
10590
10598
  });
10591
10599
  this.book.bookQuestionsMap[this.unique_id]['sqOptions'] = tempElement;
@@ -10623,36 +10631,51 @@ class ElementComponent {
10623
10631
  bookletId;
10624
10632
  dropdownOpen = false; // Tracks whether the dropdown is open or closed
10625
10633
  field;
10626
- // Toggle dropdown visibilitys
10627
- toggleDropdown() {
10628
- this.dropdownOpen = !this.dropdownOpen;
10629
- }
10630
- // Select an option from the dropdown
10631
- selectOption(option) {
10632
- this.field.selectedOption = option;
10633
- this.dropdownOpen = false; // Close the dropdown after selecting an option
10634
- }
10635
10634
  formElements = [];
10635
+ elements = [];
10636
10636
  constructor(formBuilderService) {
10637
10637
  this.formBuilderService = formBuilderService;
10638
10638
  }
10639
10639
  ngOnInit() {
10640
- // Subscribe to the formElements$ observable
10640
+ this.elements = [
10641
+ { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
10642
+ { "type": "CheckBox", "img": "CheckBox", "label": "CheckBox" },
10643
+ { "type": "Email", "img": "Email", "label": "Email" },
10644
+ { "type": "File", "img": "File", "label": "File" },
10645
+ { "type": "Image", "img": "Image", "label": "Image" },
10646
+ { "type": "Numbers", "img": "Number", "label": "Number" },
10647
+ { "type": "List", "img": "List", "label": "List" },
10648
+ { "type": "Radio", "img": "Radio", "label": "Radio" },
10649
+ { "type": "Text", "img": "Text", "label": "Text" },
10650
+ { "type": "Tables", "img": "Table", "label": "Table" },
10651
+ { "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
10652
+ { "type": "TextArea", "img": "TextArea", "label": "TextArea" },
10653
+ { "type": "Label", "img": "Label", "label": "Label" },
10654
+ { "type": "Book", "img": "Book", "label": "Book" },
10655
+ { "type": "Button", "img": "Button", "label": "Button" }
10656
+ ];
10641
10657
  this.formBuilderService.formElements$.subscribe((elements) => {
10642
- this.formElements = elements; // Update the local array with the latest data
10658
+ this.formElements = elements;
10643
10659
  });
10644
10660
  if (this.bookletJSON) {
10645
- // AP-23JAN25 - empty string to clear the local storage
10661
+ // AP-23JAN25 - empty string to clear the local storage localStorage.setItem('status', "edit");
10646
10662
  localStorage.setItem('status', ("edit"));
10647
- localStorage.setItem('unique_id', (this.bookletId));
10663
+ localStorage.setItem('unique_id', this.bookletId);
10648
10664
  this.formElements = [];
10665
+ const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap || {});
10666
+ console.log("Keys in bookQuestionsMap:", bookQuestionsMapKeys);
10667
+ //AP 25FEB25 - Assign the first key from bookQuestionsMap to bookletId
10668
+ this.bookletId = bookQuestionsMapKeys[0];
10649
10669
  this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
10670
+ if (this.bookletJSON.sqOptions && this.bookletJSON.sqOptions[newElement.id]) {
10671
+ newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
10672
+ }
10650
10673
  this.formBuilderService.addElement(newElement);
10651
- this.formElements = this.formBuilderService.getElements();
10652
10674
  });
10675
+ this.formElements = this.formBuilderService.getElements();
10653
10676
  }
10654
10677
  else {
10655
- localStorage.setItem('status', ("new"));
10678
+ localStorage.setItem('status', "new");
10656
10679
  }
10657
10680
  }
10658
10681
  drop(event) {
@@ -10704,19 +10727,11 @@ class ElementComponent {
10704
10727
  qbReferenceQuestions: '',
10705
10728
  questionBookSubTitle: '',
10706
10729
  style: '',
10707
- options: type === 'CheckBox' || type === 'Radio' || type === 'Dropdown' ? [
10708
- { label: 'Option 1', value: '', type: 'text', key: 'option1' }
10709
- ] : null,
10730
+ options: type === 'Dropdown' || type === 'Radio' || type === 'CheckBox' ? [] : null,
10710
10731
  };
10711
10732
  this.formBuilderService.addElement(newElement);
10712
10733
  this.formElements = this.formBuilderService.getElements();
10713
10734
  }
10714
- addOption(options) {
10715
- options.push({ label: `Option ${options.length + 1}`, value: '' });
10716
- }
10717
- removeOption(options, index) {
10718
- options.splice(index, 1);
10719
- }
10720
10735
  // Remove an element by index
10721
10736
  removeElement(field, index) {
10722
10737
  this.formBuilderService.removeElementComponent(field.id);
@@ -10726,7 +10741,7 @@ class ElementComponent {
10726
10741
  const styles = {
10727
10742
  'font-family': field.font || 'Helvetica Neue',
10728
10743
  'font-weight': field.fontWeight || '400',
10729
- 'width': `${(field.width || 12) / 12 * 100}%`,
10744
+ 'width': `${(field.size || 12) / 12 * 100}%`,
10730
10745
  'height': `${field.height || 91}px`,
10731
10746
  'text-align': field.textAlign || 'left',
10732
10747
  'border-radius': '5px'
@@ -10752,11 +10767,11 @@ class ElementComponent {
10752
10767
  return styles;
10753
10768
  }
10754
10769
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
10755
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n <div>\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \n </div>\n \n </div>\n </div>\n </div>\n</div>\n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option value=\"option1\">Option 1</option>\n <option value=\"option2\">Option 2</option>\n <option value=\"option3\">Option 3</option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n <!-- List -->\n <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <textarea\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [style.width.%]=\"100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"radio-options\" style=\"display: flex;\">\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n <label>\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n <span>{{ option }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div> \n\n <!-- AP-29JAN25 Image design change -->\n <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload Image' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n </div>\n </div>\n</div>\n\n <!-- Button -->\n <!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload File' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n\n <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div>\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n</ng-container>\n </div>\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <div class=\"element\" (click)=\"addElement('Calendar')\">\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n <div class=\"hover-label\">Calendar</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\n <img src=\"../assets/icons/CheckBox.svg\">\n <div class=\"hover-label\">Check Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Email')\">\n <img src=\"../assets/icons/Email.svg\">\n <div class=\"hover-label\">Email</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('File')\">\n <img src=\"../assets/icons/File.svg\">\n <div class=\"hover-label\">File</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('List')\">\n <img src=\"../assets/icons/List.svg\">\n <div class=\"hover-label\">List</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Tables')\">\n <img src=\"../assets/icons/Table.svg\">\n <div class=\"hover-label\">Tables</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Text')\">\n <img src=\"../assets/icons/Text.svg\">\n <div class=\"hover-label\">Text Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('TextArea')\">\n <img src=\"../assets/icons/TextArea.svg\">\n <div class=\"hover-label\">Text Area</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Numbers')\">\n <img src=\"../assets/icons/Number.svg\">\n <div class=\"hover-label\">Numbers</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\n <img src=\"../assets/icons/Drop.svg\">\n <div class=\"hover-label\">Dropdown</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Image')\">\n <img src=\"../assets/Image.svg\">\n <div class=\"hover-label\">Image</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Radio')\">\n <img src=\"../assets/icons/Radio.svg\">\n <div class=\"hover-label\">Radio</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Label')\">\n <img src=\"../assets/icons/Label.svg\">\n <div class=\"hover-label\">Label</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Book')\">\n <img src=\"../assets/icons/Book.svg\">\n <div class=\"hover-label\">Book</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Button')\">\n <img src=\"../assets/icons/Button.svg\">\n <div class=\"hover-label\">Button</div>\n </div>\n </div>\n\n </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{width:100%}\n"], dependencies: [{ 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: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
10770
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame row\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n <!-- Form Builder Section All Elements -->\n <div class=\"col-md-3 form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n \n<div class=\"col-md-9 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"text\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter text'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input \n type=\"checkbox\" \n [id]=\"option.value + i\"\n [name]=\"field.id\"\n [value]=\"option.value\"\n class=\"checkbox-input\"\n >\n <label [for]=\"option.value + i\" class=\"checkbox-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n <!-- AP-29JAN25 radio-button design check -->\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"radio-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input \n type=\"radio\" \n [id]=\"'radio-' + field.id + '-' + j\"\n [name]=\"'radio-group-' + field.id\" \n [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\"\n class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"text-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{ option.value }}\n </option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" \n class=\"calendar-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" \n class=\"email-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"email\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter email'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n \n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" \n class=\"number-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"number\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter number'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" \n class=\"text-area-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" \n (click)=\"removeElement(field, i)\" \n class=\"delete-icon\" />\n </div>\n \n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n <!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n</div>\n</div>\n</div>\n\n <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.text-field-container,.number-field-container,.email-field-container,.calendar-field-container,.checkbox-field-container,.radio-field-container,.text-area-container{padding:10px;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px}.field-wrapper{display:flex;align-items:center}.field-content{width:97%}.label-container{display:flex;justify-content:space-between;align-items:center;font-weight:700}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{overflow-y:auto;display:flex;flex-wrap:wrap;gap:10px}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}\n"], dependencies: [{ 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: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
10756
10771
  }
10757
10772
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
10758
10773
  type: Component,
10759
- args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n <div>\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \n </div>\n \n </div>\n </div>\n </div>\n</div>\n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option value=\"option1\">Option 1</option>\n <option value=\"option2\">Option 2</option>\n <option value=\"option3\">Option 3</option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n <!-- List -->\n <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <textarea\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [style.width.%]=\"100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"radio-options\" style=\"display: flex;\">\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n <label>\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n <span>{{ option }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div> \n\n <!-- AP-29JAN25 Image design change -->\n <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload Image' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n </div>\n </div>\n</div>\n\n <!-- Button -->\n <!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload File' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n\n <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div>\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n</ng-container>\n </div>\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <div class=\"element\" (click)=\"addElement('Calendar')\">\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n <div class=\"hover-label\">Calendar</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\n <img src=\"../assets/icons/CheckBox.svg\">\n <div class=\"hover-label\">Check Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Email')\">\n <img src=\"../assets/icons/Email.svg\">\n <div class=\"hover-label\">Email</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('File')\">\n <img src=\"../assets/icons/File.svg\">\n <div class=\"hover-label\">File</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('List')\">\n <img src=\"../assets/icons/List.svg\">\n <div class=\"hover-label\">List</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Tables')\">\n <img src=\"../assets/icons/Table.svg\">\n <div class=\"hover-label\">Tables</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Text')\">\n <img src=\"../assets/icons/Text.svg\">\n <div class=\"hover-label\">Text Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('TextArea')\">\n <img src=\"../assets/icons/TextArea.svg\">\n <div class=\"hover-label\">Text Area</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Numbers')\">\n <img src=\"../assets/icons/Number.svg\">\n <div class=\"hover-label\">Numbers</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\n <img src=\"../assets/icons/Drop.svg\">\n <div class=\"hover-label\">Dropdown</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Image')\">\n <img src=\"../assets/Image.svg\">\n <div class=\"hover-label\">Image</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Radio')\">\n <img src=\"../assets/icons/Radio.svg\">\n <div class=\"hover-label\">Radio</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Label')\">\n <img src=\"../assets/icons/Label.svg\">\n <div class=\"hover-label\">Label</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Book')\">\n <img src=\"../assets/icons/Book.svg\">\n <div class=\"hover-label\">Book</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Button')\">\n <img src=\"../assets/icons/Button.svg\">\n <div class=\"hover-label\">Button</div>\n </div>\n </div>\n\n </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{width:100%}\n"] }]
10774
+ args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame row\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n <!-- Form Builder Section All Elements -->\n <div class=\"col-md-3 form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n \n<div class=\"col-md-9 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"text\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter text'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input \n type=\"checkbox\" \n [id]=\"option.value + i\"\n [name]=\"field.id\"\n [value]=\"option.value\"\n class=\"checkbox-input\"\n >\n <label [for]=\"option.value + i\" class=\"checkbox-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n <!-- AP-29JAN25 radio-button design check -->\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"radio-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input \n type=\"radio\" \n [id]=\"'radio-' + field.id + '-' + j\"\n [name]=\"'radio-group-' + field.id\" \n [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\"\n class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"text-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{ option.value }}\n </option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" \n class=\"calendar-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" \n class=\"email-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"email\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter email'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n \n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" \n class=\"number-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"number\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter number'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" \n class=\"text-area-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" \n (click)=\"removeElement(field, i)\" \n class=\"delete-icon\" />\n </div>\n \n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n <!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n</div>\n</div>\n</div>\n\n <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.text-field-container,.number-field-container,.email-field-container,.calendar-field-container,.checkbox-field-container,.radio-field-container,.text-area-container{padding:10px;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px}.field-wrapper{display:flex;align-items:center}.field-content{width:97%}.label-container{display:flex;justify-content:space-between;align-items:center;font-weight:700}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{overflow-y:auto;display:flex;flex-wrap:wrap;gap:10px}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}\n"] }]
10760
10775
  }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
10761
10776
  type: Output
10762
10777
  }], formContainer: [{
@@ -10771,13 +10786,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10771
10786
  class PropertiesComponent {
10772
10787
  http;
10773
10788
  formBuilderService;
10774
- // selectedElement: any;
10775
- colorWheel;
10776
- ctx;
10777
10789
  formButtonHandler = new EventEmitter();
10778
10790
  selectedOption = '';
10779
10791
  selectedElementIndex = -1;
10780
- // @Input() selectedElement: any;
10781
10792
  selectedElementType = '';
10782
10793
  selectedAlign = 'align-left'; // Add this property
10783
10794
  selectedStyles = []; // Using array since multiple styles can be selected
@@ -10819,7 +10830,6 @@ class PropertiesComponent {
10819
10830
  return this.selectedElement?.styles?.includes(value) || false;
10820
10831
  }
10821
10832
  elementProperties = {
10822
- // Add other element types here similarly
10823
10833
  'Text': {
10824
10834
  elementProps: [
10825
10835
  // questionText - Label-follow all element properties
@@ -10840,24 +10850,24 @@ class PropertiesComponent {
10840
10850
  { value: '700', label: '700-Bold' }
10841
10851
  ] },
10842
10852
  // { label: 'Size', unit: 'PX', type: 'number', key: 'size' },
10843
- { label: 'Align', type: 'align', key: 'textAlign',
10844
- options: [
10845
- { value: 'left', icon: 'textalign-left' },
10846
- { value: 'center', icon: 'align-center' },
10847
- { value: 'right', icon: 'align-right' },
10848
- { value: 'justifyleft', icon: 'align-justifyleft' },
10849
- { value: 'justifyright', icon: 'align-justifyright' }
10850
- ] },
10851
- { label: 'Style', type: 'style', key: 'styles',
10852
- options: [
10853
- { value: 'italic', icon: 'italic' },
10854
- { value: 'bold', icon: 'bold' },
10855
- { value: 'underline', icon: 'underline' },
10856
- { value: 'texticon', icon: 'texticon' },
10857
- { value: 'capitalize', icon: 'capitalize' },
10858
- { value: 'resize', icon: 'resize' }
10859
- ] },
10860
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' }
10853
+ // { label: 'Align', type: 'align', key: 'textAlign',
10854
+ // options: [
10855
+ // { value: 'left', icon: 'textalign-left' },
10856
+ // { value: 'center', icon: 'align-center' },
10857
+ // { value: 'right', icon: 'align-right' },
10858
+ // { value: 'justifyleft', icon: 'align-justifyleft' },
10859
+ // { value: 'justifyright', icon: 'align-justifyright' }
10860
+ // ] },
10861
+ // { label: 'Style', type: 'style',key: 'styles',
10862
+ // options: [
10863
+ // { value: 'italic', icon: 'italic' },
10864
+ // { value: 'bold', icon: 'bold' },
10865
+ // { value: 'underline', icon: 'underline' },
10866
+ // { value: 'texticon', icon: 'texticon' },
10867
+ // { value: 'capitalize', icon: 'capitalize' },
10868
+ // { value: 'resize', icon: 'resize' }
10869
+ // ] },
10870
+ { label: 'Field Size', type: 'fieldSize', key: 'size' }
10861
10871
  ],
10862
10872
  fieldProps: [
10863
10873
  { label: 'Field Required', type: 'radio' },
@@ -10873,21 +10883,18 @@ class PropertiesComponent {
10873
10883
  { label: 'Place Holder', placeholder: 'Enter Text ', type: 'text', key: 'question' },
10874
10884
  { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
10875
10885
  { label: '', type: 'toggleGroup' },
10876
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10886
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10877
10887
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10878
10888
  ],
10879
10889
  fieldProps: [
10880
10890
  { label: 'Field Required', type: 'radio' },
10881
10891
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
10882
10892
  {
10883
- label: 'Chk Options',
10884
- type: 'optionsGroup',
10885
- key: 'chkOptions',
10886
- options: [
10887
- { label: 'Option 1', value: '', type: 'text', key: 'option1' },
10888
- ],
10889
- addOptionLabel: 'Add Variant', // Text for the plus icon
10890
- icon: 'plus' // Icon for adding options
10893
+ label: 'Options',
10894
+ type: 'checkbox',
10895
+ key: 'options',
10896
+ addOptionLabel: 'Add Option',
10897
+ icon: 'plus'
10891
10898
  },
10892
10899
  { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
10893
10900
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
@@ -10900,7 +10907,7 @@ class PropertiesComponent {
10900
10907
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10901
10908
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10902
10909
  { label: '', type: 'toggleGroup' },
10903
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10910
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10904
10911
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10905
10912
  ],
10906
10913
  fieldProps: [
@@ -10917,7 +10924,7 @@ class PropertiesComponent {
10917
10924
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'placeholder' },
10918
10925
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10919
10926
  { label: '', type: 'toggleGroup' },
10920
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10927
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10921
10928
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10922
10929
  ],
10923
10930
  fieldProps: [
@@ -10934,7 +10941,7 @@ class PropertiesComponent {
10934
10941
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10935
10942
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10936
10943
  { label: '', type: 'toggleGroup' },
10937
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10944
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10938
10945
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10939
10946
  ],
10940
10947
  fieldProps: [
@@ -10959,7 +10966,7 @@ class PropertiesComponent {
10959
10966
  { label: 'Archives (ZIP, RAR, Git-hub)', value: 'application/zip,application/x-rar-compressed,application/x-git', extensions: ['.zip', '.rar', '.git'] }
10960
10967
  ] },
10961
10968
  { label: '', type: 'toggleGroup' },
10962
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10969
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10963
10970
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10964
10971
  ],
10965
10972
  fieldProps: [
@@ -10976,7 +10983,7 @@ class PropertiesComponent {
10976
10983
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10977
10984
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10978
10985
  { label: '', type: 'toggleGroup' },
10979
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10986
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10980
10987
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10981
10988
  ],
10982
10989
  fieldProps: [
@@ -10986,13 +10993,14 @@ class PropertiesComponent {
10986
10993
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
10987
10994
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
10988
10995
  ]
10989
- }, 'TextArea': {
10996
+ },
10997
+ 'TextArea': {
10990
10998
  elementProps: [
10991
10999
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
10992
11000
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10993
11001
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10994
11002
  { label: '', type: 'toggleGroup' },
10995
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11003
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10996
11004
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10997
11005
  ],
10998
11006
  fieldProps: [
@@ -11002,13 +11010,14 @@ class PropertiesComponent {
11002
11010
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11003
11011
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11004
11012
  ]
11005
- }, 'Numbers': {
11013
+ },
11014
+ 'Numbers': {
11006
11015
  elementProps: [
11007
11016
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11008
11017
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11009
11018
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11010
11019
  { label: '', type: 'toggleGroup' },
11011
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11020
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11012
11021
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11013
11022
  ],
11014
11023
  fieldProps: [
@@ -11018,39 +11027,38 @@ class PropertiesComponent {
11018
11027
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11019
11028
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11020
11029
  ]
11021
- }, 'Dropdown': {
11030
+ },
11031
+ 'Dropdown': {
11022
11032
  elementProps: [
11023
11033
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11024
11034
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11025
11035
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11026
11036
  { label: '', type: 'toggleGroup' },
11027
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11037
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11028
11038
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11029
11039
  ],
11030
11040
  fieldProps: [
11031
11041
  { label: 'Field Required', type: 'radio' },
11032
11042
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11033
11043
  {
11034
- label: 'Chk Options',
11035
- type: 'optionsGroup',
11036
- key: 'chkOptions',
11037
- options: [
11038
- { label: 'Option 1', value: '', type: 'text', key: 'option1' },
11039
- ],
11040
- addOptionLabel: 'Add Variant', // Text for the plus icon
11041
- icon: 'plus' // Icon for adding options
11044
+ label: 'Options',
11045
+ type: 'dropdown',
11046
+ key: 'options',
11047
+ addOptionLabel: 'Add Variant',
11048
+ icon: 'plus'
11042
11049
  },
11043
11050
  { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11044
11051
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11045
11052
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
11046
11053
  ]
11047
- }, 'Image': {
11054
+ },
11055
+ 'Image': {
11048
11056
  elementProps: [
11049
11057
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11050
11058
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11051
11059
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11052
11060
  { label: '', type: 'toggleGroup' },
11053
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11061
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11054
11062
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11055
11063
  ],
11056
11064
  fieldProps: [
@@ -11060,28 +11068,25 @@ class PropertiesComponent {
11060
11068
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11061
11069
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11062
11070
  ]
11063
- }, 'Radio': {
11071
+ },
11072
+ 'Radio': {
11064
11073
  elementProps: [
11065
11074
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11066
11075
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11067
11076
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11068
11077
  { label: '', type: 'toggleGroup' },
11069
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11078
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11070
11079
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11071
11080
  ],
11072
11081
  fieldProps: [
11073
11082
  { label: 'Field Required', type: 'radio' },
11074
11083
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11075
11084
  {
11076
- label: 'Radio Options', // Updated label to reflect radio context
11077
- type: 'optionsGroup',
11078
- key: 'radioOptions', // Updated key for radio context
11079
- options: [
11080
- { label: 'Option 1', value: '', type: 'text', key: 'option1' },
11081
- { label: 'Option 2', value: '', type: 'text', key: 'option2' },
11082
- ],
11083
- addOptionLabel: 'Add Option', // Updated label for add button
11084
- icon: 'plus', // Icon for adding options
11085
+ label: 'Options',
11086
+ type: 'radio',
11087
+ key: 'options',
11088
+ addOptionLabel: 'Add Option',
11089
+ icon: 'plus'
11085
11090
  },
11086
11091
  { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11087
11092
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
@@ -11094,7 +11099,7 @@ class PropertiesComponent {
11094
11099
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11095
11100
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11096
11101
  { label: '', type: 'toggleGroup' },
11097
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11102
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11098
11103
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11099
11104
  ],
11100
11105
  fieldProps: [
@@ -11104,13 +11109,14 @@ class PropertiesComponent {
11104
11109
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11105
11110
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11106
11111
  ]
11107
- }, 'Button': {
11112
+ },
11113
+ 'Button': {
11108
11114
  elementProps: [
11109
11115
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11110
11116
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11111
11117
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11112
11118
  { label: '', type: 'toggleGroup' },
11113
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11119
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11114
11120
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11115
11121
  ],
11116
11122
  fieldProps: [
@@ -11201,7 +11207,6 @@ class PropertiesComponent {
11201
11207
  addOption(options) {
11202
11208
  options.push({ label: '', value: '' });
11203
11209
  }
11204
- // Function to remove an option from prop options
11205
11210
  removeOption(options, index) {
11206
11211
  options.splice(index, 1);
11207
11212
  }
@@ -11212,15 +11217,12 @@ class PropertiesComponent {
11212
11217
  this.formButtonHandler.emit(this.formBuilderService.downloadElement());
11213
11218
  }
11214
11219
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
11215
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">\n {{ errorMessage }}\n </div>\n <!-- Element Properties -->\n <details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"\n />\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n {{ selectedElement.helpText }}\n </div>\n\n\n <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n class=\"font-selection1\"\n [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n class=\"font-weight\"\n [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n</div>\n\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement?.isHide\"\n (change)=\"onToggleChange('isHide', $event)\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\"\n class=\"align-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n <label>{{ prop.label }}</label>\n <input\n type=\"number\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n class=\"size-input\"\n />\n <span class=\"size-unit\">{{ prop.unit }}</span>\n </div>\n\n\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\"\n class=\"style-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input\n type=\"number\"\n [value]=\"selectedElement?.width\"\n (input)=\"updateProperty('width', $event.target.value)\"\n class=\"size-input\"\n\n />\n\n </div>\n </div>\n</div>\n</div>\n </div>\n </ng-container>\n </div>\n </details>\n\n <!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n class=\"field-input\"\n />\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"selectedElement.required\"\n (change)=\"onRequiredChange(true)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-label\"\n >\n Required\n </label>\n </div>\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"!selectedElement.required\"\n (change)=\"onRequiredChange(false)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-sm text-gray-400\"\n >\n Not Required\n </label>\n </div>\n </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n <div\n *ngFor=\"let option of prop.options; let i = index\"\n class=\"option-items\"\n >\n <!-- Option Input -->\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].label\"\n placeholder=\"Option {{ i + 1 }}\"\n class=\"options\"\n />\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].value\"\n placeholder=\"Value\"\n class=\"values\"\n />\n <!-- Remove Button -->\n <div class=\"remove\">\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n </div>\n <!-- Add Button -->\n <button\n type=\"button\"\n class=\"add-btn\"\n (click)=\"addOption(prop.options)\"\n >\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span></div>\n </button>\n</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
11220
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{width:100%;max-width:600px;margin:0 auto;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
11216
11221
  }
11217
11222
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
11218
11223
  type: Component,
11219
- args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">\n {{ errorMessage }}\n </div>\n <!-- Element Properties -->\n <details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"\n />\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n {{ selectedElement.helpText }}\n </div>\n\n\n <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n class=\"font-selection1\"\n [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n class=\"font-weight\"\n [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n</div>\n\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement?.isHide\"\n (change)=\"onToggleChange('isHide', $event)\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\"\n class=\"align-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n <label>{{ prop.label }}</label>\n <input\n type=\"number\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n class=\"size-input\"\n />\n <span class=\"size-unit\">{{ prop.unit }}</span>\n </div>\n\n\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\"\n class=\"style-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input\n type=\"number\"\n [value]=\"selectedElement?.width\"\n (input)=\"updateProperty('width', $event.target.value)\"\n class=\"size-input\"\n\n />\n\n </div>\n </div>\n</div>\n</div>\n </div>\n </ng-container>\n </div>\n </details>\n\n <!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n class=\"field-input\"\n />\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"selectedElement.required\"\n (change)=\"onRequiredChange(true)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-label\"\n >\n Required\n </label>\n </div>\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"!selectedElement.required\"\n (change)=\"onRequiredChange(false)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-sm text-gray-400\"\n >\n Not Required\n </label>\n </div>\n </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n <div\n *ngFor=\"let option of prop.options; let i = index\"\n class=\"option-items\"\n >\n <!-- Option Input -->\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].label\"\n placeholder=\"Option {{ i + 1 }}\"\n class=\"options\"\n />\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].value\"\n placeholder=\"Value\"\n class=\"values\"\n />\n <!-- Remove Button -->\n <div class=\"remove\">\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n </div>\n <!-- Add Button -->\n <button\n type=\"button\"\n class=\"add-btn\"\n (click)=\"addOption(prop.options)\"\n >\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span></div>\n </button>\n</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
11220
- }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
11221
- type: ViewChild,
11222
- args: ['colorWheel']
11223
- }], formButtonHandler: [{
11224
+ args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{width:100%;max-width:600px;margin:0 auto;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"] }]
11225
+ }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
11224
11226
  type: Output
11225
11227
  }], selectedElementType: [{
11226
11228
  type: Input
@@ -11268,11 +11270,11 @@ class FormComponent {
11268
11270
  this.formButtonHandler.emit(event);
11269
11271
  }
11270
11272
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11271
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [""], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
11273
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-9\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-3\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [".form-container{display:flex;width:100%;height:100vh}app-element{width:100%;height:100vh;overflow-y:auto;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
11272
11274
  }
11273
11275
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
11274
11276
  type: Component,
11275
- args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n " }]
11277
+ args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-9\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-3\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [".form-container{display:flex;width:100%;height:100vh}app-element{width:100%;height:100vh;overflow-y:auto;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"] }]
11276
11278
  }], propDecorators: { bookletJSON: [{
11277
11279
  type: Input
11278
11280
  }], bookletId: [{
@@ -12024,11 +12026,18 @@ class NxtDatatable {
12024
12026
  // "pageSize": 10,
12025
12027
  // "pageIndex": 10
12026
12028
  // },
12027
- // "tableSearch": "ddd", // 1
12029
+ // "tableSearch": { // 1
12030
+ // "fields" : [
12031
+ // "lightType",
12032
+ // "system",
12033
+ // "status"
12034
+ // ] ,
12035
+ // "value": 'r-001'
12036
+ // },
12028
12037
  // "searchFilterData": { // 2
12029
12038
  // "lightType": [
12030
12039
  // "AA",
12031
- // "BB"
12040
+ // "BB"
12032
12041
  // ]
12033
12042
  // },
12034
12043
  // "sort": { // 3
@@ -12076,8 +12085,6 @@ class NxtDatatable {
12076
12085
  configPagination = false; // flag for config pagination
12077
12086
  deleteData; // to get the delete row
12078
12087
  deleteModal = false; // for conformation popup
12079
- actionColumnSize; // track a action column button size
12080
- dropdownButtonSize = 0; // for action column dropdown button size
12081
12088
  dropdownActionButton; // for action column dropdown button
12082
12089
  currentOpenIndex = null; // track the current open action dropdown icon index
12083
12090
  clickListener; // action column dropdown button click listener for close a dropdown button
@@ -12091,6 +12098,11 @@ class NxtDatatable {
12091
12098
  this.originalData = [...this.data];
12092
12099
  this.sFilterData = [...this.data];
12093
12100
  this.dataSource.data = this.originalData;
12101
+ this.pageSize = this.pagination?.pageSize ? this.pagination['pageSize'] : 10;
12102
+ this.pageIndex = this.pagination?.pageIndex ? this.pagination['pageIndex'] : 1;
12103
+ this.totalRecords = this.pagination?.totalRecords ? this.pagination['totalRecords'] : undefined;
12104
+ this.pageSizeOptions = this.pagination?.pageSizeOptions ? this.pagination['pageSizeOptions'] : ['5', '10', '25', '50', '100', '200'];
12105
+ this.pagination === undefined ? this.configPagination = false : this.configPagination = true;
12094
12106
  this.selection = new SelectionModel(true, []);
12095
12107
  if (!this.totalRecords && this.data) {
12096
12108
  this.dataSource.data = this.data?.slice(0, 10);
@@ -12169,15 +12181,7 @@ class NxtDatatable {
12169
12181
  this.totalRecords = this.pagination?.totalRecords ? this.pagination['totalRecords'] : undefined;
12170
12182
  this.pageSizeOptions = this.pagination?.pageSizeOptions ? this.pagination['pageSizeOptions'] : ['5', '10', '25', '50', '100', '200'];
12171
12183
  this.pagination === undefined ? this.configPagination = false : this.configPagination = true;
12172
- if (this.isEditRow && this.isDeleteRow) {
12173
- this.actionColumnSize = 2;
12174
- }
12175
- else if (this.isEditRow || this.isDeleteRow) {
12176
- this.actionColumnSize = 1;
12177
- }
12178
- else {
12179
- this.actionColumnSize = 0;
12180
- }
12184
+ this.dropdownActionButton = this.actionButtonArray?.buttonArray.slice(this.actionButtonArray?.size);
12181
12185
  this.originalData = [...this.data];
12182
12186
  this.sFilterData = [...this.data];
12183
12187
  this.dataSource.data = this.originalData;
@@ -12327,11 +12331,9 @@ class NxtDatatable {
12327
12331
  this.currentSortColumn = column;
12328
12332
  this.currentSortDirection = 'asc';
12329
12333
  }
12330
- this.pageIndex = 1;
12331
- this.pageSize = 10;
12332
- localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: false, pageSize: 10, pageIndex: this.pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
12334
+ localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: false, pageSize: this.pageSize, pageIndex: this.pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
12333
12335
  // Only sort if the direction is 'asc' or 'desc'
12334
- this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: 1 }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12336
+ this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12335
12337
  }
12336
12338
  }
12337
12339
  onScroll(tableContainer) {
@@ -12356,20 +12358,19 @@ class NxtDatatable {
12356
12358
  }
12357
12359
  // SKS15FEB25 emitting pagr size and index to parent on paginating
12358
12360
  pageParams(event) {
12361
+ this.pageIndex = event.pageIndex;
12362
+ this.pageSize = event.pageSize;
12359
12363
  if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
12360
- this.pageIndex = event.pageIndex;
12361
- this.pageSize = event.pageSize;
12362
12364
  const start = (Number(event.pageIndex) - 1) * Number(event.pageSize);
12363
12365
  const end = start + Number(event.pageSize);
12364
12366
  this.dataSource.data = this.sFilterData?.slice(start, end);
12365
12367
  }
12366
12368
  else {
12367
- this.NxtTableEmit.emit({ pagination: { pageSize: event.pageSize, pageIndex: event.pageIndex }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12369
+ this.NxtTableEmit.emit({ pagination: { pageSize: event.pageSize, pageIndex: event.pageIndex }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12368
12370
  }
12369
12371
  }
12370
12372
  // SKS15FEB25 apply search bar filter using mat
12371
12373
  applyFilter(event) {
12372
- console.log("i am in apply filter");
12373
12374
  let filterValue = event.target.value;
12374
12375
  filterValue = filterValue.trim().toLowerCase();
12375
12376
  if (!filterValue) {
@@ -12556,7 +12557,7 @@ class NxtDatatable {
12556
12557
  else {
12557
12558
  const pageIndex = Math.ceil(this.totalRecords / 10);
12558
12559
  localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: true, pageSize: 10, pageIndex: pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
12559
- this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: pageIndex }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12560
+ this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: pageIndex }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12560
12561
  }
12561
12562
  }
12562
12563
  // SKS15FEB25 Action button conditionally displayed function
@@ -12588,7 +12589,7 @@ class NxtDatatable {
12588
12589
  if (this.searchConfigs || this.dataSource.data.length === this.totalRecords) {
12589
12590
  this.pageIndex = 1;
12590
12591
  this.pageSize = 10;
12591
- this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12592
+ this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12592
12593
  }
12593
12594
  }
12594
12595
  // SKS15FEB25 If the value in the search box is empty, call the onSearch function automatically
@@ -12611,8 +12612,16 @@ class NxtDatatable {
12611
12612
  }
12612
12613
  // SKS15FEB25 for close search filter box
12613
12614
  closefilter() {
12615
+ this.pageSize = 10;
12616
+ this.pageIndex = 1;
12614
12617
  this.filterDataArray[this.selectedFilter] = [];
12615
- this.filterRetain(this.filterDataArray);
12618
+ this.isResized = false;
12619
+ if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
12620
+ this.filterRetain(this.filterDataArray);
12621
+ }
12622
+ else {
12623
+ this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: 1 }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12624
+ }
12616
12625
  }
12617
12626
  // SKS15FEB25 search filter box checkbox retain
12618
12627
  isSelected(event) {
@@ -12638,23 +12647,12 @@ class NxtDatatable {
12638
12647
  if (this.dataSource.data.length !== this.totalRecords && this.configPagination) {
12639
12648
  this.pageIndex = 1;
12640
12649
  this.pageSize = 10;
12641
- this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12650
+ this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12642
12651
  }
12643
12652
  else {
12644
12653
  this.filterRetain(this.filterDataArray);
12645
12654
  }
12646
12655
  }
12647
- // SKS15FEB25 action column button count track
12648
- incrementActionColumnSize() {
12649
- this.actionColumnSize++;
12650
- this.dropdownButtonSize++;
12651
- return ''; // Returning empty string to avoid rendering issues
12652
- }
12653
- // SKS15FEB25 action column dropdown buttons slice
12654
- updatedDropdownArraySize() {
12655
- this.dropdownActionButton = this.actionButtonArray?.buttonArray.slice(this.dropdownButtonSize);
12656
- return "";
12657
- }
12658
12656
  // SKS15FEB25 action column dropdown buttons close
12659
12657
  addClickOutsideListener() {
12660
12658
  if (!this.clickListener) {
@@ -12683,7 +12681,7 @@ class NxtDatatable {
12683
12681
  this.actionButtonEmit.emit(event);
12684
12682
  }
12685
12683
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
12686
- 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"] }] });
12684
+ 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 <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n </svg>\n </div>\n </div>\n \n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip \n (click)=\"actionButtonClicked(button)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"> \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\"> \n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\"\n style=\"display: flex;\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n [matTooltip]=btn.tooltip\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn)\">\n <img [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n </button>\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data.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"] }] });
12687
12685
  }
12688
12686
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
12689
12687
  type: Component,
@@ -12701,7 +12699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
12701
12699
  EditColumnTypePipe,
12702
12700
  MatTooltipModule
12703
12701
  // RowResizerDirective
12704
- ], 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"] }]
12702
+ ], 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 <!--SKS15FEB25 Action Buttons -->\n <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n <!--SKS15FEB25 Edit Button -->\n <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n </svg>\n </div>\n </div>\n \n\n <!--SKS15FEB25 Delete Button -->\n <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <!--SKS15FEB25 Render inline buttons up to Size -->\n <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n <div *ngIf=\"i < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n <div *ngIf=\"isConditionMet(element, button.conditions)\"\n [matTooltip]=button.tooltip \n (click)=\"actionButtonClicked(button)\"\n (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n style=\"padding: 2px; border-radius: {{button.borderRadius}}px; border: 1px solid {{button.borderColor}};\">\n <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n <img #imgElement [src]=\"button.iconSrc\"\n (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n (mouseleave)=\"imgElement.src = button.iconSrc\"> \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n \n <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n <div *ngFor=\"let btn of dropdownActionButton\"> \n <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n [attr.data-id]=\"element.id\"\n style=\"display: flex;\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n [matTooltip]=btn.tooltip\n [disabled]=\"btn.buttonDisable\"\n (click)=\"actionButtonClicked(btn)\">\n <img [src]=\"btn.iconSrc\">\n <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n </button>\n </div>\n </div>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--SKS15FEB25 No Data Row -->\n <div *ngIf=\"dataSource.data.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"] }]
12705
12703
  }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { data: [{
12706
12704
  type: Input
12707
12705
  }], columns: [{