@rangertechnologies/ngnxt 2.1.96 → 2.1.98

package/esm2022/lib/components/custom-table/custom-table.component.mjs

@@ -330,11 +330,11 @@ export class CustomTableComponent {
         console.log('Component Destroyed');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTableComponent, deps: [{ token: i1.ChangeService }, { token: i2.I18nService }, { token: i3.SalesforceService }, { token: i4.DataService }], target: i0.ɵɵFactoryTarget.Component });
-    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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i7.GetValuePipe, name: "getValue" }] });
+    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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i7.GetValuePipe, name: "getValue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTableComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i1.ChangeService }, { type: i2.I18nService }, { type: i3.SalesforceService }, { type: i4.DataService }], propDecorators: { question: [{
                 type: Input
             }], valueChange: [{