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