@rangertechnologies/ngnxt 2.1.91 → 2.1.92
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/custom-table/custom-table.component.mjs +3 -3
- package/esm2022/lib/components/search-box/search-box.component.mjs +10 -11
- package/fesm2022/rangertechnologies-ngnxt.mjs +11 -12
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/search-box/search-box.component.d.ts +3 -1
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.92.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.91.tgz +0 -0
|
@@ -5196,11 +5196,11 @@ class CustomTableComponent {
|
|
|
5196
5196
|
console.log('Component Destroyed');
|
|
5197
5197
|
}
|
|
5198
5198
|
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 });
|
|
5199
|
-
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 -->\r\n<!-- Search Bar -->\r\n<!-- Search, Revert & Save in Same Line -->\r\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n <!-- Search Bar -->\r\n <div class=\"search-container me-auto\">\r\n <div class=\"input-group\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control search-input\"\r\n [(ngModel)]=\"searchTerm\"\r\n (input)=\"search()\"\r\n placeholder=\"Search...\"\r\n >\r\n <div class=\"search-icon\">\r\n <!-- RS 03FEB2025 -->\r\n <!-- Search icon for user input -->\r\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\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Buttons -->\r\n <div>\r\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\r\n <button \r\n class=\"btn btn-secondary me-2\" \r\n *ngIf=\"hasUnsavedChanges\" \r\n (click)=\"revertChanges()\"\r\n >\r\n Cancel\r\n </button>\r\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\r\n <button \r\n class=\"btn btn-primary\" \r\n [disabled]=\"!hasUnsavedChanges\"\r\n (click)=\"saveTable()\"\r\n >\r\n Save Table\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Table Container -->\r\n<div class=\"table-container\">\r\n <table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\r\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\r\n <tr>\r\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\r\n {{ header.label }}\r\n </th>\r\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\r\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of paginatedData; let i = index\">\r\n <td *ngFor=\"let header of tableHeader\">\r\n <!-- Image with text input -->\r\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\r\n <div class=\"d-flex align-items-center\">\r\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\r\n <input type=\"text\" \r\n [(ngModel)]=\"item[header.fieldName]\" \r\n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \r\n class=\"she-line-input table-input\">\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Image only -->\r\n <ng-container *ngIf=\"header.fldType === 'image'\">\r\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle readOnly -->\r\n <!-- Text input -->\r\n <ng-container *ngIf=\"header.fldType === 'Text'\">\r\n <input type=\"text\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle Number Type -->\r\n <!-- Number input -->\r\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\r\n <ng-container *ngIf=\"header.fldType === 'Number'\">\r\n <input type=\"number\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n\r\n <!-- Radio input -->\r\n <ng-container *ngIf=\"header.fldType === 'radio'\">\r\n <input type=\"radio\" \r\n [name]=\"item.name\" \r\n [checked]=\"item.value == header.fieldName\" \r\n (click)=\"updateRadio(item, header.fieldName)\">\r\n </ng-container>\r\n </td>\r\n <!-- Actions column --><!-- RS 03FEB2025 -->\r\n <td *ngIf=\"showActions\" class=\"actions-column\">\r\n <div class=\"d-flex justify-content-around\">\r\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\r\n <i class=\"fas fa-edit text-primary\"></i>\r\n Edit\r\n </button>\r\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\r\n <i class=\"fas fa-trash text-danger\"></i>\r\n Delete\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<!-- Pagination --><!-- RS 03FEB2025 -->\r\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\r\n <div class=\"d-flex justify-content-end align-items-center\">\r\n <div class=\"items-per-page\">\r\n <span>Items per page:</span>\r\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\r\n <option value=\"5\">5</option>\r\n <option value=\"10\">10</option>\r\n <option value=\"20\">20</option>\r\n <option value=\"50\">50</option>\r\n </select>\r\n </div>\r\n <div class=\"page-info ms-3 me-3\">\r\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\r\n </div>\r\n <nav aria-label=\"Table pagination\">\r\n <!-- First page --><!-- RS 03FEB2025 -->\r\n <ul class=\"pagination mb-0\">\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\r\n </li>\r\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\r\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\r\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\r\n </li>\r\n <!-- Last page -->\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </div>\r\n</div>\r\n<!-- RS 03FEB2025 -->\r\n<!-- Add Row Button -->\r\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\r\n <div class=\"circle-button\">+</div>\r\n</div>\r\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" }] });
|
|
5199
|
+
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 -->\r\n<!-- Search Bar -->\r\n<!-- Search, Revert & Save in Same Line -->\r\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n <!-- Search Bar -->\r\n <div class=\"search-container me-auto\">\r\n <div class=\"input-group\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control search-input\"\r\n [(ngModel)]=\"searchTerm\"\r\n (input)=\"search()\"\r\n placeholder=\"Search...\"\r\n >\r\n <div class=\"search-icon\">\r\n <!-- RS 03FEB2025 -->\r\n <!-- Search icon for user input -->\r\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\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Buttons -->\r\n <div>\r\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\r\n <button \r\n class=\"btn btn-secondary me-2\" \r\n *ngIf=\"hasUnsavedChanges\" \r\n (click)=\"revertChanges()\"\r\n >\r\n Cancel\r\n </button>\r\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\r\n <button \r\n class=\"btn btn-primary\" \r\n [disabled]=\"!hasUnsavedChanges\"\r\n (click)=\"saveTable()\"\r\n >\r\n Save Table\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Table Container -->\r\n<div class=\"table-container\">\r\n <table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\r\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\r\n <tr>\r\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\r\n {{ header.label }}\r\n </th>\r\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\r\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of paginatedData; let i = index\">\r\n <td *ngFor=\"let header of tableHeader\">\r\n <!-- Image with text input -->\r\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\r\n <div class=\"d-flex align-items-center\">\r\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\r\n <input type=\"text\" \r\n [(ngModel)]=\"item[header.fieldName]\" \r\n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \r\n class=\"she-line-input table-input\">\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Image only -->\r\n <ng-container *ngIf=\"header.fldType === 'image'\">\r\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle readOnly -->\r\n <!-- Text input -->\r\n <ng-container *ngIf=\"header.fldType === 'Text'\">\r\n <input type=\"text\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle Number Type -->\r\n <!-- Number input -->\r\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\r\n <ng-container *ngIf=\"header.fldType === 'Number'\">\r\n <input type=\"number\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n\r\n <!-- Radio input -->\r\n <ng-container *ngIf=\"header.fldType === 'radio'\">\r\n <input type=\"radio\" \r\n [name]=\"item.name\" \r\n [checked]=\"item.value == header.fieldName\" \r\n (click)=\"updateRadio(item, header.fieldName)\">\r\n </ng-container>\r\n </td>\r\n <!-- Actions column --><!-- RS 03FEB2025 -->\r\n <td *ngIf=\"showActions\" class=\"actions-column\">\r\n <div class=\"d-flex justify-content-around\">\r\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\r\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\">\r\n <path d=\"M12 20h9\" />\r\n <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\r\n <path d=\"m15 5 3 3\" />\r\n </svg>\r\n Edit\r\n </button>\r\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\r\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\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\r\n <path d=\"m10 11 1 6\" />\r\n <path d=\"m14 11-1 6\" />\r\n <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\r\n </svg>\r\n \r\n Delete\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<!-- Pagination --><!-- RS 03FEB2025 -->\r\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\r\n <div class=\"d-flex justify-content-end align-items-center\">\r\n <div class=\"items-per-page\">\r\n <span>Items per page:</span>\r\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\r\n <option value=\"5\">5</option>\r\n <option value=\"10\">10</option>\r\n <option value=\"20\">20</option>\r\n <option value=\"50\">50</option>\r\n </select>\r\n </div>\r\n <div class=\"page-info ms-3 me-3\">\r\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\r\n </div>\r\n <nav aria-label=\"Table pagination\">\r\n <!-- First page --><!-- RS 03FEB2025 -->\r\n <ul class=\"pagination mb-0\">\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\r\n </li>\r\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\r\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\r\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\r\n </li>\r\n <!-- Last page -->\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </div>\r\n</div>\r\n<!-- RS 03FEB2025 -->\r\n<!-- Add Row Button -->\r\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\r\n <div class=\"circle-button\">+</div>\r\n</div>\r\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" }] });
|
|
5200
5200
|
}
|
|
5201
5201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTableComponent, decorators: [{
|
|
5202
5202
|
type: Component,
|
|
5203
|
-
args: [{ selector: 'app-custom-table', template: "<!-- RS 03FEB2025 -->\r\n<!-- Search Bar -->\r\n<!-- Search, Revert & Save in Same Line -->\r\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n <!-- Search Bar -->\r\n <div class=\"search-container me-auto\">\r\n <div class=\"input-group\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control search-input\"\r\n [(ngModel)]=\"searchTerm\"\r\n (input)=\"search()\"\r\n placeholder=\"Search...\"\r\n >\r\n <div class=\"search-icon\">\r\n <!-- RS 03FEB2025 -->\r\n <!-- Search icon for user input -->\r\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\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Buttons -->\r\n <div>\r\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\r\n <button \r\n class=\"btn btn-secondary me-2\" \r\n *ngIf=\"hasUnsavedChanges\" \r\n (click)=\"revertChanges()\"\r\n >\r\n Cancel\r\n </button>\r\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\r\n <button \r\n class=\"btn btn-primary\" \r\n [disabled]=\"!hasUnsavedChanges\"\r\n (click)=\"saveTable()\"\r\n >\r\n Save Table\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Table Container -->\r\n<div class=\"table-container\">\r\n <table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\r\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\r\n <tr>\r\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\r\n {{ header.label }}\r\n </th>\r\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\r\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of paginatedData; let i = index\">\r\n <td *ngFor=\"let header of tableHeader\">\r\n <!-- Image with text input -->\r\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\r\n <div class=\"d-flex align-items-center\">\r\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\r\n <input type=\"text\" \r\n [(ngModel)]=\"item[header.fieldName]\" \r\n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \r\n class=\"she-line-input table-input\">\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Image only -->\r\n <ng-container *ngIf=\"header.fldType === 'image'\">\r\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle readOnly -->\r\n <!-- Text input -->\r\n <ng-container *ngIf=\"header.fldType === 'Text'\">\r\n <input type=\"text\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle Number Type -->\r\n <!-- Number input -->\r\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\r\n <ng-container *ngIf=\"header.fldType === 'Number'\">\r\n <input type=\"number\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n\r\n <!-- Radio input -->\r\n <ng-container *ngIf=\"header.fldType === 'radio'\">\r\n <input type=\"radio\" \r\n [name]=\"item.name\" \r\n [checked]=\"item.value == header.fieldName\" \r\n (click)=\"updateRadio(item, header.fieldName)\">\r\n </ng-container>\r\n </td>\r\n <!-- Actions column --><!-- RS 03FEB2025 -->\r\n <td *ngIf=\"showActions\" class=\"actions-column\">\r\n <div class=\"d-flex justify-content-around\">\r\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\r\n <i class=\"fas fa-edit text-primary\"></i>\r\n Edit\r\n </button>\r\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\r\n <i class=\"fas fa-trash text-danger\"></i>\r\n Delete\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<!-- Pagination --><!-- RS 03FEB2025 -->\r\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\r\n <div class=\"d-flex justify-content-end align-items-center\">\r\n <div class=\"items-per-page\">\r\n <span>Items per page:</span>\r\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\r\n <option value=\"5\">5</option>\r\n <option value=\"10\">10</option>\r\n <option value=\"20\">20</option>\r\n <option value=\"50\">50</option>\r\n </select>\r\n </div>\r\n <div class=\"page-info ms-3 me-3\">\r\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\r\n </div>\r\n <nav aria-label=\"Table pagination\">\r\n <!-- First page --><!-- RS 03FEB2025 -->\r\n <ul class=\"pagination mb-0\">\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\r\n </li>\r\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\r\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\r\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\r\n </li>\r\n <!-- Last page -->\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </div>\r\n</div>\r\n<!-- RS 03FEB2025 -->\r\n<!-- Add Row Button -->\r\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\r\n <div class=\"circle-button\">+</div>\r\n</div>\r\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"] }]
|
|
5203
|
+
args: [{ selector: 'app-custom-table', template: "<!-- RS 03FEB2025 -->\r\n<!-- Search Bar -->\r\n<!-- Search, Revert & Save in Same Line -->\r\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n <!-- Search Bar -->\r\n <div class=\"search-container me-auto\">\r\n <div class=\"input-group\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control search-input\"\r\n [(ngModel)]=\"searchTerm\"\r\n (input)=\"search()\"\r\n placeholder=\"Search...\"\r\n >\r\n <div class=\"search-icon\">\r\n <!-- RS 03FEB2025 -->\r\n <!-- Search icon for user input -->\r\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\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Buttons -->\r\n <div>\r\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\r\n <button \r\n class=\"btn btn-secondary me-2\" \r\n *ngIf=\"hasUnsavedChanges\" \r\n (click)=\"revertChanges()\"\r\n >\r\n Cancel\r\n </button>\r\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\r\n <button \r\n class=\"btn btn-primary\" \r\n [disabled]=\"!hasUnsavedChanges\"\r\n (click)=\"saveTable()\"\r\n >\r\n Save Table\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Table Container -->\r\n<div class=\"table-container\">\r\n <table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\r\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\r\n <tr>\r\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\r\n {{ header.label }}\r\n </th>\r\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\r\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of paginatedData; let i = index\">\r\n <td *ngFor=\"let header of tableHeader\">\r\n <!-- Image with text input -->\r\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\r\n <div class=\"d-flex align-items-center\">\r\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\r\n <input type=\"text\" \r\n [(ngModel)]=\"item[header.fieldName]\" \r\n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \r\n class=\"she-line-input table-input\">\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Image only -->\r\n <ng-container *ngIf=\"header.fldType === 'image'\">\r\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle readOnly -->\r\n <!-- Text input -->\r\n <ng-container *ngIf=\"header.fldType === 'Text'\">\r\n <input type=\"text\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n <!--VD 23Aug24 handle Number Type -->\r\n <!-- Number input -->\r\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\r\n <ng-container *ngIf=\"header.fldType === 'Number'\">\r\n <input type=\"number\" \r\n [readonly]=\"header.readOnly\" \r\n [disabled]=\"!item.edit\" \r\n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n [ngModel]=\"'' | getValue: item : header.apiName\" \r\n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n class=\"she-line-input table-input\">\r\n </ng-container>\r\n\r\n <!-- Radio input -->\r\n <ng-container *ngIf=\"header.fldType === 'radio'\">\r\n <input type=\"radio\" \r\n [name]=\"item.name\" \r\n [checked]=\"item.value == header.fieldName\" \r\n (click)=\"updateRadio(item, header.fieldName)\">\r\n </ng-container>\r\n </td>\r\n <!-- Actions column --><!-- RS 03FEB2025 -->\r\n <td *ngIf=\"showActions\" class=\"actions-column\">\r\n <div class=\"d-flex justify-content-around\">\r\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\r\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\">\r\n <path d=\"M12 20h9\" />\r\n <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\r\n <path d=\"m15 5 3 3\" />\r\n </svg>\r\n Edit\r\n </button>\r\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\r\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\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\r\n <path d=\"m10 11 1 6\" />\r\n <path d=\"m14 11-1 6\" />\r\n <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\r\n </svg>\r\n \r\n Delete\r\n </button>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</div>\r\n\r\n<!-- Pagination --><!-- RS 03FEB2025 -->\r\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\r\n <div class=\"d-flex justify-content-end align-items-center\">\r\n <div class=\"items-per-page\">\r\n <span>Items per page:</span>\r\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\r\n <option value=\"5\">5</option>\r\n <option value=\"10\">10</option>\r\n <option value=\"20\">20</option>\r\n <option value=\"50\">50</option>\r\n </select>\r\n </div>\r\n <div class=\"page-info ms-3 me-3\">\r\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\r\n </div>\r\n <nav aria-label=\"Table pagination\">\r\n <!-- First page --><!-- RS 03FEB2025 -->\r\n <ul class=\"pagination mb-0\">\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\r\n </li>\r\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\r\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\r\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\r\n </li>\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\r\n </li>\r\n <!-- Last page -->\r\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </div>\r\n</div>\r\n<!-- RS 03FEB2025 -->\r\n<!-- Add Row Button -->\r\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\r\n <div class=\"circle-button\">+</div>\r\n</div>\r\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"] }]
|
|
5204
5204
|
}], ctorParameters: () => [{ type: ChangeService }, { type: I18nService }, { type: SalesforceService }, { type: DataService }], propDecorators: { question: [{
|
|
5205
5205
|
type: Input
|
|
5206
5206
|
}], valueChange: [{
|
|
@@ -8278,6 +8278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8278
8278
|
|
|
8279
8279
|
class SearchBoxComponent {
|
|
8280
8280
|
sfService;
|
|
8281
|
+
cdr;
|
|
8281
8282
|
dataService;
|
|
8282
8283
|
route;
|
|
8283
8284
|
i18nService;
|
|
@@ -8300,8 +8301,9 @@ class SearchBoxComponent {
|
|
|
8300
8301
|
el;
|
|
8301
8302
|
serv = 'api';
|
|
8302
8303
|
tkn = '';
|
|
8303
|
-
constructor(sfService, dataService, route, el, i18nService) {
|
|
8304
|
+
constructor(sfService, cdr, dataService, route, el, i18nService) {
|
|
8304
8305
|
this.sfService = sfService;
|
|
8306
|
+
this.cdr = cdr;
|
|
8305
8307
|
this.dataService = dataService;
|
|
8306
8308
|
this.route = route;
|
|
8307
8309
|
this.i18nService = i18nService;
|
|
@@ -8314,12 +8316,9 @@ class SearchBoxComponent {
|
|
|
8314
8316
|
}
|
|
8315
8317
|
// this.resetComponentState();
|
|
8316
8318
|
}
|
|
8317
|
-
|
|
8319
|
+
////RS 03FEB2025
|
|
8318
8320
|
// Resets state when filterName or apiMeta changes to reflect updated data
|
|
8319
8321
|
ngOnChanges(changes) {
|
|
8320
|
-
if (changes['filterName'] && !changes['filterName'].isFirstChange()) {
|
|
8321
|
-
this.resetComponentState();
|
|
8322
|
-
}
|
|
8323
8322
|
if (changes['apiMeta'] && this.apiMeta) {
|
|
8324
8323
|
this.apiObj = JSON.parse(this.apiMeta);
|
|
8325
8324
|
this.SearchItem = this.apiObj?.field;
|
|
@@ -8337,7 +8336,6 @@ class SearchBoxComponent {
|
|
|
8337
8336
|
clearList() {
|
|
8338
8337
|
setTimeout(() => {
|
|
8339
8338
|
this.finalResults = [];
|
|
8340
|
-
this.filterName = '';
|
|
8341
8339
|
}, 1000);
|
|
8342
8340
|
}
|
|
8343
8341
|
getSourceDataLocal(event) {
|
|
@@ -8385,6 +8383,7 @@ class SearchBoxComponent {
|
|
|
8385
8383
|
}
|
|
8386
8384
|
this.noResult = results.length === 0;
|
|
8387
8385
|
this.finalResults = results;
|
|
8386
|
+
this.cdr.detectChanges(); // Force UI update
|
|
8388
8387
|
});
|
|
8389
8388
|
}
|
|
8390
8389
|
};
|
|
@@ -8403,13 +8402,13 @@ class SearchBoxComponent {
|
|
|
8403
8402
|
ngOnDestroy() {
|
|
8404
8403
|
this.resetComponentState();
|
|
8405
8404
|
}
|
|
8406
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8407
|
-
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-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n <input #auto id=\"searchbox-style\"\r\n (blur)=\"clearList()\"\r\n [(ngModel)]=\"filterName\"\r\n type=\"text\"\r\n name=\"name\"\r\n [readOnly]=\"readOnly\"\r\n [placeholder]=\"placeHolderText\"\r\n style=\"margin: 0 !important; padding-right: 30px;\"\r\n class=\"searchInput she-line-input form-control\"\r\n (focusin)=\"getSourceDataLocal($event)\"\r\n (input)=\"getSourceDataLocal($event)\">\r\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n class=\"suggestions-container\">\r\n <!-- HA 20DEC23 Uncommented the logic -->\r\n <!-- VD 03May- search changes -->\r\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n <!-- VD 26Jun24 - id condition removed -->\r\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n </div>\r\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n <!--// VD 26JUN24 - pipe changes -->\r\n <!-- RS 29JAN25 -->\r\n
|
|
8405
|
+
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 });
|
|
8406
|
+
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-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n <input #auto id=\"searchbox-style\"\r\n (blur)=\"clearList()\"\r\n [(ngModel)]=\"filterName\"\r\n type=\"text\"\r\n name=\"name\"\r\n [readOnly]=\"readOnly\"\r\n [placeholder]=\"placeHolderText\"\r\n style=\"margin: 0 !important; padding-right: 30px;\"\r\n class=\"searchInput she-line-input form-control\"\r\n (focusin)=\"getSourceDataLocal($event)\"\r\n (input)=\"getSourceDataLocal($event)\">\r\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n class=\"suggestions-container\">\r\n <!-- HA 20DEC23 Uncommented the logic -->\r\n <!-- VD 03May- search changes -->\r\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n <!-- VD 26Jun24 - id condition removed -->\r\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n </div>\r\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n <!--// VD 26JUN24 - pipe changes -->\r\n <!-- RS 29JAN25 -->\r\n <h4 >{{ '' | getValue: item : SearchItem }}</h4>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- HA 20DEC23 For Commented this for future purpose -->\r\n <!-- <table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <tr>\r\n <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n <td>{{ item.firstName }}</td>\r\n <td>{{ item.lastName }}</td>\r\n <td>{{ item.division }}</td>\r\n <td>{{ item.numberPlate }}</td>\r\n </tr>\r\n </tbody>\r\n </table> -->\r\n </div>\r\n</div>\r\n\r\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" }] });
|
|
8408
8407
|
}
|
|
8409
8408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, decorators: [{
|
|
8410
8409
|
type: Component,
|
|
8411
|
-
args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n <input #auto id=\"searchbox-style\"\r\n (blur)=\"clearList()\"\r\n [(ngModel)]=\"filterName\"\r\n type=\"text\"\r\n name=\"name\"\r\n [readOnly]=\"readOnly\"\r\n [placeholder]=\"placeHolderText\"\r\n style=\"margin: 0 !important; padding-right: 30px;\"\r\n class=\"searchInput she-line-input form-control\"\r\n (focusin)=\"getSourceDataLocal($event)\"\r\n (input)=\"getSourceDataLocal($event)\">\r\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n class=\"suggestions-container\">\r\n <!-- HA 20DEC23 Uncommented the logic -->\r\n <!-- VD 03May- search changes -->\r\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n <!-- VD 26Jun24 - id condition removed -->\r\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n </div>\r\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n <!--// VD 26JUN24 - pipe changes -->\r\n <!-- RS 29JAN25 -->\r\n
|
|
8412
|
-
}], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { placeHolderText: [{
|
|
8410
|
+
args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n <input #auto id=\"searchbox-style\"\r\n (blur)=\"clearList()\"\r\n [(ngModel)]=\"filterName\"\r\n type=\"text\"\r\n name=\"name\"\r\n [readOnly]=\"readOnly\"\r\n [placeholder]=\"placeHolderText\"\r\n style=\"margin: 0 !important; padding-right: 30px;\"\r\n class=\"searchInput she-line-input form-control\"\r\n (focusin)=\"getSourceDataLocal($event)\"\r\n (input)=\"getSourceDataLocal($event)\">\r\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n class=\"suggestions-container\">\r\n <!-- HA 20DEC23 Uncommented the logic -->\r\n <!-- VD 03May- search changes -->\r\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n <!-- VD 26Jun24 - id condition removed -->\r\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n </div>\r\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n <!--// VD 26JUN24 - pipe changes -->\r\n <!-- RS 29JAN25 -->\r\n <h4 >{{ '' | getValue: item : SearchItem }}</h4>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- HA 20DEC23 For Commented this for future purpose -->\r\n <!-- <table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <tr>\r\n <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n <td>{{ item.firstName }}</td>\r\n <td>{{ item.lastName }}</td>\r\n <td>{{ item.division }}</td>\r\n <td>{{ item.numberPlate }}</td>\r\n </tr>\r\n </tbody>\r\n </table> -->\r\n </div>\r\n</div>\r\n\r\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"] }]
|
|
8411
|
+
}], ctorParameters: () => [{ type: SalesforceService }, { type: i0.ChangeDetectorRef }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { placeHolderText: [{
|
|
8413
8412
|
type: Input
|
|
8414
8413
|
}], auto: [{
|
|
8415
8414
|
type: ViewChild,
|