@ohioepa/oepa-ui-lib 2.0.19 → 2.0.21

package/esm2022/lib/text-area-input/text-area-input.component.mjs

@@ -6,6 +6,7 @@ import * as i3 from "@angular/forms";
 export class TextAreaInputComponent {
     idService;
     componentId = 'TextAreaInputComponent';
+    tableIdName = '';
     group;
     field = '';
     tableIdx = 0;
@@ -18,19 +19,21 @@ export class TextAreaInputComponent {
     }
     ngOnInit() {
         if (this.group) {
-            this.componentId = this.idService.getComponentId(this.group) + (this.field || '') + (this.tableIdx || '');
+            this.componentId = (this.tableIdName ? this.tableIdName + '_' : '') + (this.field || 'textAreaInput') + (this.tableIdx || this.tableIdx === 0 ? this.tableIdx : '');
             this.group.get(this.field)?.valueChanges.subscribe(value => {
                 this.onValueChange.emit(value);
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextAreaInputComponent, deps: [{ token: i1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextAreaInputComponent, selector: "oepa-text-area-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextAreaInputComponent, selector: "oepa-text-area-input", inputs: { tableIdName: "tableIdName", group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextAreaInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-text-area-input', template: "<div [formGroup]=\"group\">\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
-        }], ctorParameters: () => [{ type: i1.OepaComponentIdService }], propDecorators: { group: [{
+            args: [{ selector: 'oepa-text-area-input', template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1.OepaComponentIdService }], propDecorators: { tableIdName: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -45,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], onValueChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1hcmVhLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL29lcGEtdWktbGliL3NyYy9saWIvdGV4dC1hcmVhLWlucHV0L3RleHQtYXJlYS1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL3RleHQtYXJlYS1pbnB1dC90ZXh0LWFyZWEtaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTL0UsTUFBTSxPQUFPLHNCQUFzQjtJQVliO0lBWGIsV0FBVyxHQUFHLHdCQUF3QixDQUFDO0lBRXJDLEtBQUssQ0FBYTtJQUNsQixLQUFLLEdBQVcsRUFBRSxDQUFDO0lBQ25CLFFBQVEsR0FBVyxDQUFDLENBQUM7SUFDckIsS0FBSyxHQUFHLE9BQU8sQ0FBQztJQUNoQixXQUFXLEdBQUcsRUFBRSxDQUFDO0lBQ2pCLFNBQVMsR0FBRyxJQUFJLENBQUM7SUFFaEIsYUFBYSxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO0lBRTNFLFlBQW9CLFNBQWlDO1FBQWpDLGNBQVMsR0FBVCxTQUFTLENBQXdCO0lBQ3JELENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDZixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksRUFBRSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLEVBQUUsQ0FBQyxDQUFDO1lBQzFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxZQUFZLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUN6RCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNqQyxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO3dHQXRCVSxzQkFBc0I7NEZBQXRCLHNCQUFzQiwrT0NUbkMsaVhBS007OzRGRElPLHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDRSxzQkFBc0I7MkZBT3ZCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBPZXBhQ29tcG9uZW50SWRTZXJ2aWNlIH0gZnJvbSAnQG9oaW9lcGEvb2VwYS1jb21tb24tbGliJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnb2VwYS10ZXh0LWFyZWEtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGV4dC1hcmVhLWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGV4dC1hcmVhLWlucHV0LmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBUZXh0QXJlYUlucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgcHVibGljIGNvbXBvbmVudElkID0gJ1RleHRBcmVhSW5wdXRDb21wb25lbnQnO1xuXG4gIEBJbnB1dCgpIGdyb3VwITogRm9ybUdyb3VwO1xuICBASW5wdXQoKSBmaWVsZDogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHRhYmxlSWR4OiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSB0aXRsZSA9ICdJbnB1dCc7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJyc7XG4gIEBJbnB1dCgpIG1heGxlbmd0aCA9IDQwMDA7XG5cbiAgQE91dHB1dCgpIG9uVmFsdWVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBpZFNlcnZpY2U6IE9lcGFDb21wb25lbnRJZFNlcnZpY2UpIHsgXG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5ncm91cCkge1xuICAgICAgdGhpcy5jb21wb25lbnRJZCA9IHRoaXMuaWRTZXJ2aWNlLmdldENvbXBvbmVudElkKHRoaXMuZ3JvdXApICsgKHRoaXMuZmllbGQgfHwgJycpICsgKHRoaXMudGFibGVJZHggfHwgJycpO1xuICAgICAgdGhpcy5ncm91cC5nZXQodGhpcy5maWVsZCk/LnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUodmFsdWUgPT4ge1xuICAgICAgICB0aGlzLm9uVmFsdWVDaGFuZ2UuZW1pdCh2YWx1ZSk7XG4gICAgICB9KTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgW2Zvcm1Hcm91cF09XCJncm91cFwiPlxuPHRleHRhcmVhIGNsYXNzPVwiZm9ybS1jb250cm9sXCIgW25nQ2xhc3NdPVwieydpcy1pbnZhbGlkJzpncm91cC5jb250cm9sc1tmaWVsZF0uaW52YWxpZH1cIiBcbnR5cGU9XCJ0ZXh0XCIgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCIgW21heGxlbmd0aF09XCJtYXhsZW5ndGhcIiBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkXCJcbltpZF09XCJjb21wb25lbnRJZFwiPjwvdGV4dGFyZWE+XG48c21hbGwgY2xhc3M9XCJpbnZhbGlkLWZlZWRiYWNrXCIgKm5nSWY9XCJncm91cC5jb250cm9sc1tmaWVsZF0uaW52YWxpZFwiPnt7dGl0bGV9fSBpcyByZXF1aXJlZDwvc21hbGw+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1hcmVhLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL29lcGEtdWktbGliL3NyYy9saWIvdGV4dC1hcmVhLWlucHV0L3RleHQtYXJlYS1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL3RleHQtYXJlYS1pbnB1dC90ZXh0LWFyZWEtaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTL0UsTUFBTSxPQUFPLHNCQUFzQjtJQWFiO0lBWmIsV0FBVyxHQUFHLHdCQUF3QixDQUFDO0lBRXJDLFdBQVcsR0FBVyxFQUFFLENBQUM7SUFDekIsS0FBSyxDQUFhO0lBQ2xCLEtBQUssR0FBVyxFQUFFLENBQUM7SUFDbkIsUUFBUSxHQUFXLENBQUMsQ0FBQztJQUNyQixLQUFLLEdBQUcsT0FBTyxDQUFDO0lBQ2hCLFdBQVcsR0FBRyxFQUFFLENBQUM7SUFDakIsU0FBUyxHQUFHLElBQUksQ0FBQztJQUVoQixhQUFhLEdBQXlCLElBQUksWUFBWSxFQUFVLENBQUM7SUFFM0UsWUFBb0IsU0FBaUM7UUFBakMsY0FBUyxHQUFULFNBQVMsQ0FBd0I7SUFDckQsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNmLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLGVBQWUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDcEssSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLFlBQVksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ3pELElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ2pDLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7d0dBdkJVLHNCQUFzQjs0RkFBdEIsc0JBQXNCLDJRQ1RuQyxvY0FNTTs7NEZER08sc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNFLHNCQUFzQjsyRkFPdkIsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFFSSxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgT2VwYUNvbXBvbmVudElkU2VydmljZSB9IGZyb20gJ0BvaGlvZXBhL29lcGEtY29tbW9uLWxpYic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ29lcGEtdGV4dC1hcmVhLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RleHQtYXJlYS1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RleHQtYXJlYS1pbnB1dC5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgVGV4dEFyZWFJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHB1YmxpYyBjb21wb25lbnRJZCA9ICdUZXh0QXJlYUlucHV0Q29tcG9uZW50JztcblxuICBASW5wdXQoKSB0YWJsZUlkTmFtZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGdyb3VwITogRm9ybUdyb3VwO1xuICBASW5wdXQoKSBmaWVsZDogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHRhYmxlSWR4OiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSB0aXRsZSA9ICdJbnB1dCc7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJyc7XG4gIEBJbnB1dCgpIG1heGxlbmd0aCA9IDQwMDA7XG5cbiAgQE91dHB1dCgpIG9uVmFsdWVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBpZFNlcnZpY2U6IE9lcGFDb21wb25lbnRJZFNlcnZpY2UpIHsgXG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5ncm91cCkge1xuICAgICAgdGhpcy5jb21wb25lbnRJZCA9ICh0aGlzLnRhYmxlSWROYW1lID8gdGhpcy50YWJsZUlkTmFtZSArICdfJyA6ICcnKSArICh0aGlzLmZpZWxkIHx8ICd0ZXh0QXJlYUlucHV0JykgKyAodGhpcy50YWJsZUlkeCB8fCB0aGlzLnRhYmxlSWR4ID09PSAwID8gdGhpcy50YWJsZUlkeCA6ICcnKTtcbiAgICAgIHRoaXMuZ3JvdXAuZ2V0KHRoaXMuZmllbGQpPy52YWx1ZUNoYW5nZXMuc3Vic2NyaWJlKHZhbHVlID0+IHtcbiAgICAgICAgdGhpcy5vblZhbHVlQ2hhbmdlLmVtaXQodmFsdWUpO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IFtmb3JtR3JvdXBdPVwiZ3JvdXBcIj5cbjxsYWJlbCBbZm9yXT1cImNvbXBvbmVudElkXCIgY2xhc3M9XCJmb3JtLWxhYmVsIHNyLW9ubHlcIj57e3RpdGxlfX0gSW5wdXQ8L2xhYmVsPlxuPHRleHRhcmVhIGNsYXNzPVwiZm9ybS1jb250cm9sXCIgW25nQ2xhc3NdPVwieydpcy1pbnZhbGlkJzpncm91cC5jb250cm9sc1tmaWVsZF0uaW52YWxpZH1cIiBcbnR5cGU9XCJ0ZXh0XCIgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCIgW21heGxlbmd0aF09XCJtYXhsZW5ndGhcIiBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkXCJcbltpZF09XCJjb21wb25lbnRJZFwiPjwvdGV4dGFyZWE+XG48c21hbGwgY2xhc3M9XCJpbnZhbGlkLWZlZWRiYWNrXCIgKm5nSWY9XCJncm91cC5jb250cm9sc1tmaWVsZF0uaW52YWxpZFwiPnt7dGl0bGV9fSBpcyByZXF1aXJlZDwvc21hbGw+XG48L2Rpdj4iXX0=

package/esm2022/lib/text-input/text-input.component.mjs

@@ -6,6 +6,7 @@ import * as i3 from "@angular/forms";
 export class TextInputComponent {
     idService;
     componentId = 'TextInputComponent';
+    tableIdName = '';
     group;
     field = '';
     tableIdx;
@@ -18,19 +19,21 @@ export class TextInputComponent {
     }
     ngOnInit() {
         if (this.group) {
-            this.componentId = this.idService.getComponentId(this.group) + (this.field || '') + (this.tableIdx || '');
+            this.componentId = (this.tableIdName ? this.tableIdName + '_' : '') + (this.field || 'textInput') + (this.tableIdx || this.tableIdx === 0 ? this.tableIdx : '');
             this.group.get(this.field)?.valueChanges.subscribe(value => {
                 this.onValueChange.emit(value);
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, deps: [{ token: i1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextInputComponent, selector: "oepa-text-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextInputComponent, selector: "oepa-text-input", inputs: { tableIdName: "tableIdName", group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-text-input', template: "<div [formGroup]=\"group\">\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
-        }], ctorParameters: () => [{ type: i1.OepaComponentIdService }], propDecorators: { group: [{
+            args: [{ selector: 'oepa-text-input', template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1.OepaComponentIdService }], propDecorators: { tableIdName: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -45,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], onValueChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL3RleHQtaW5wdXQvdGV4dC1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL3RleHQtaW5wdXQvdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQVMvRSxNQUFNLE9BQU8sa0JBQWtCO0lBWVQ7SUFYYixXQUFXLEdBQUcsb0JBQW9CLENBQUM7SUFFakMsS0FBSyxDQUFhO0lBQ2xCLEtBQUssR0FBVyxFQUFFLENBQUM7SUFDbkIsUUFBUSxDQUFxQjtJQUM3QixLQUFLLEdBQUcsT0FBTyxDQUFDO0lBQ2hCLFdBQVcsR0FBRyxFQUFFLENBQUM7SUFDakIsU0FBUyxHQUFHLElBQUksQ0FBQztJQUVoQixhQUFhLEdBQXlCLElBQUksWUFBWSxFQUFVLENBQUM7SUFFM0UsWUFBb0IsU0FBaUM7UUFBakMsY0FBUyxHQUFULFNBQVMsQ0FBd0I7SUFDckQsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNmLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksRUFBRSxDQUFDLENBQUM7WUFDMUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLFlBQVksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ3pELElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ2pDLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7d0dBdEJVLGtCQUFrQjs0RkFBbEIsa0JBQWtCLDBPQ1QvQixtV0FLTTs7NEZESU8sa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGlCQUFpQjsyRkFPbEIsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IE9lcGFDb21wb25lbnRJZFNlcnZpY2UgfSBmcm9tICdAb2hpb2VwYS9vZXBhLWNvbW1vbi1saWInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvZXBhLXRleHQtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RleHQtaW5wdXQuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIFRleHRJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHB1YmxpYyBjb21wb25lbnRJZCA9ICdUZXh0SW5wdXRDb21wb25lbnQnO1xuXG4gIEBJbnB1dCgpIGdyb3VwITogRm9ybUdyb3VwO1xuICBASW5wdXQoKSBmaWVsZDogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHRhYmxlSWR4OiBudW1iZXIgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIHRpdGxlID0gJ0lucHV0JztcbiAgQElucHV0KCkgcGxhY2Vob2xkZXIgPSAnJztcbiAgQElucHV0KCkgbWF4bGVuZ3RoID0gNDAwMDtcblxuICBAT3V0cHV0KCkgb25WYWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGlkU2VydmljZTogT2VwYUNvbXBvbmVudElkU2VydmljZSkgeyBcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmdyb3VwKSB7XG4gICAgICB0aGlzLmNvbXBvbmVudElkID0gdGhpcy5pZFNlcnZpY2UuZ2V0Q29tcG9uZW50SWQodGhpcy5ncm91cCkgKyAodGhpcy5maWVsZCB8fCAnJykgKyAodGhpcy50YWJsZUlkeCB8fCAnJyk7XG4gICAgICB0aGlzLmdyb3VwLmdldCh0aGlzLmZpZWxkKT8udmFsdWVDaGFuZ2VzLnN1YnNjcmliZSh2YWx1ZSA9PiB7XG4gICAgICAgIHRoaXMub25WYWx1ZUNoYW5nZS5lbWl0KHZhbHVlKTtcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBbZm9ybUdyb3VwXT1cImdyb3VwXCI+XG48aW5wdXQgY2xhc3M9XCJmb3JtLWNvbnRyb2xcIiBbbmdDbGFzc109XCJ7J2lzLWludmFsaWQnOmdyb3VwLmNvbnRyb2xzW2ZpZWxkXS5pbnZhbGlkfVwiIFxudHlwZT1cInRleHRcIiBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIiBbbWF4bGVuZ3RoXT1cIm1heGxlbmd0aFwiIFtmb3JtQ29udHJvbE5hbWVdPVwiZmllbGRcIlxuW2lkXT1cImNvbXBvbmVudElkXCI+XG48c21hbGwgY2xhc3M9XCJpbnZhbGlkLWZlZWRiYWNrXCIgKm5nSWY9XCJncm91cC5jb250cm9sc1tmaWVsZF0uaW52YWxpZFwiPnt7dGl0bGV9fSBpcyByZXF1aXJlZDwvc21hbGw+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL3RleHQtaW5wdXQvdGV4dC1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vZXBhLXVpLWxpYi9zcmMvbGliL3RleHQtaW5wdXQvdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQVMvRSxNQUFNLE9BQU8sa0JBQWtCO0lBYVQ7SUFaYixXQUFXLEdBQUcsb0JBQW9CLENBQUM7SUFFakMsV0FBVyxHQUFXLEVBQUUsQ0FBQztJQUN6QixLQUFLLENBQWE7SUFDbEIsS0FBSyxHQUFXLEVBQUUsQ0FBQztJQUNuQixRQUFRLENBQXFCO0lBQzdCLEtBQUssR0FBRyxPQUFPLENBQUM7SUFDaEIsV0FBVyxHQUFHLEVBQUUsQ0FBQztJQUNqQixTQUFTLEdBQUcsSUFBSSxDQUFDO0lBRWhCLGFBQWEsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUUzRSxZQUFvQixTQUFpQztRQUFqQyxjQUFTLEdBQVQsU0FBUyxDQUF3QjtJQUNyRCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksV0FBVyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUNoSyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsWUFBWSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDekQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDakMsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDO0lBQ0gsQ0FBQzt3R0F2QlUsa0JBQWtCOzRGQUFsQixrQkFBa0Isc1FDVC9CLHNiQU1NOzs0RkRHTyxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsaUJBQWlCOzJGQU9sQixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBPZXBhQ29tcG9uZW50SWRTZXJ2aWNlIH0gZnJvbSAnQG9oaW9lcGEvb2VwYS1jb21tb24tbGliJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnb2VwYS10ZXh0LWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RleHQtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90ZXh0LWlucHV0LmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBUZXh0SW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBwdWJsaWMgY29tcG9uZW50SWQgPSAnVGV4dElucHV0Q29tcG9uZW50JztcblxuICBASW5wdXQoKSB0YWJsZUlkTmFtZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGdyb3VwITogRm9ybUdyb3VwO1xuICBASW5wdXQoKSBmaWVsZDogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHRhYmxlSWR4OiBudW1iZXIgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIHRpdGxlID0gJ0lucHV0JztcbiAgQElucHV0KCkgcGxhY2Vob2xkZXIgPSAnJztcbiAgQElucHV0KCkgbWF4bGVuZ3RoID0gNDAwMDtcblxuICBAT3V0cHV0KCkgb25WYWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGlkU2VydmljZTogT2VwYUNvbXBvbmVudElkU2VydmljZSkgeyBcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmdyb3VwKSB7XG4gICAgICB0aGlzLmNvbXBvbmVudElkID0gKHRoaXMudGFibGVJZE5hbWUgPyB0aGlzLnRhYmxlSWROYW1lICsgJ18nIDogJycpICsgKHRoaXMuZmllbGQgfHwgJ3RleHRJbnB1dCcpICsgKHRoaXMudGFibGVJZHggfHwgdGhpcy50YWJsZUlkeCA9PT0gMCA/IHRoaXMudGFibGVJZHggOiAnJyk7XG4gICAgICB0aGlzLmdyb3VwLmdldCh0aGlzLmZpZWxkKT8udmFsdWVDaGFuZ2VzLnN1YnNjcmliZSh2YWx1ZSA9PiB7XG4gICAgICAgIHRoaXMub25WYWx1ZUNoYW5nZS5lbWl0KHZhbHVlKTtcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBbZm9ybUdyb3VwXT1cImdyb3VwXCI+XG48bGFiZWwgW2Zvcl09XCJjb21wb25lbnRJZFwiIGNsYXNzPVwiZm9ybS1sYWJlbCBzci1vbmx5XCI+e3t0aXRsZX19IElucHV0PC9sYWJlbD5cbjxpbnB1dCBjbGFzcz1cImZvcm0tY29udHJvbFwiIFtuZ0NsYXNzXT1cInsnaXMtaW52YWxpZCc6Z3JvdXAuY29udHJvbHNbZmllbGRdLmludmFsaWR9XCIgXG50eXBlPVwidGV4dFwiIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiIFttYXhsZW5ndGhdPVwibWF4bGVuZ3RoXCIgW2Zvcm1Db250cm9sTmFtZV09XCJmaWVsZFwiXG5baWRdPVwiY29tcG9uZW50SWRcIj5cbjxzbWFsbCBjbGFzcz1cImludmFsaWQtZmVlZGJhY2tcIiAqbmdJZj1cImdyb3VwLmNvbnRyb2xzW2ZpZWxkXS5pbnZhbGlkXCI+e3t0aXRsZX19IGlzIHJlcXVpcmVkPC9zbWFsbD5cbjwvZGl2PiJdfQ==

package/fesm2022/ohioepa-oepa-ui-lib.mjs

@@ -3347,11 +3347,11 @@ class PTableComponent {
         this.customBtn2Clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, deps: [{ token: i1$3.DomSanitizer }, { token: TableService }, { token: TableExportService }, { token: i1$1.OepaFileUtilService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n             [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n              {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}:host ::ng-deep .pagination-sm .page-item .page-link{min-width:44px;min-height:44px;padding:10px 16px;margin:4px}\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PTableComponent, selector: "oepa-p-table", inputs: { tableId: "tableId", allowEdit: "allowEdit", config: "config", complexHeader: "complexHeader", header: "header", customBtnLabel: "customBtnLabel", customBtnVisible: "customBtnVisible", customBtnEnabled: "customBtnEnabled", customBtnLabel2: "customBtnLabel2", customBtnVisible2: "customBtnVisible2", customBtnEnabled2: "customBtnEnabled2", small: "small", data: "data", totalRow: "totalRow" }, outputs: { cellClicked: "cellClicked", actionClicked: "actionClicked", rowSelected: "rowSelected", customBtnClicked: "customBtnClicked", customBtn2Clicked: "customBtn2Clicked" }, ngImport: i0, template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5 d-flex justify-content-end\">\n        <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n          [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n          name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n          (numPages)=\"pageInfo.numPages = $event\">\n        </pagination>\n        &nbsp;\n        <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n         [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n          {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n        </button>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: i8$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i1$1.OepaTemplateComponent, selector: "cml-template", inputs: ["templateInfo"] }, { kind: "component", type: TableDataCellComponent, selector: "oepa-table-data-cell", inputs: ["col", "row", "i", "r", "tableId"], outputs: ["onCellClick", "onToggleRowSelection", "onSingleRowSelection", "onActionClick"] }, { kind: "component", type: TableHeaderCellComponent, selector: "oepa-table-header-cell", inputs: ["column", "tableId", "allRowsSelected", "rowCount", "noFiltersSubject"], outputs: ["onToggleAllRowsSelection", "onSortChanged", "onHideColumn", "onFilterChanged"] }, { kind: "directive", type: OepaTableFilteringDirective, selector: "[oepaTableFiltering]", inputs: ["oepaTableFiltering", "tableId"], outputs: ["tableChanged"] }, { kind: "pipe", type: OepaTableCellColSpanPipe, name: "cellColspan" }, { kind: "pipe", type: OepaTableCellClassnamePipe, name: "cellClassname" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-p-table', template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-9\">\n            <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n              [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n              name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n              (numPages)=\"pageInfo.numPages = $event\">\n            </pagination>\n          </div>\n          <div class=\"col-sm-3\">\n            <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n             [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n              {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}:host ::ng-deep .pagination-sm .page-item .page-link{min-width:44px;min-height:44px;padding:10px 16px;margin:4px}\n"] }]
+            args: [{ selector: 'oepa-p-table', template: "<div *ngIf=\"!config.hideTable\">\n  <form *ngIf=\"hiddenColumns.length > 0\">\n    <div class=\"row mb-2\">\n      <label class=\"col-sm-2 col-form-label\" [for]=\"tableId+'_UnhideColumnSelect'\">Show Hidden Columns:</label>\n      <div class=\"col-sm-4\">\n        <select class=\"form-select\" (change)=\"unhideColumn($any($event).target.value)\"\n          [id]=\"tableId+'_UnhideColumnSelect'\">\n          <option value=\"\">Choose a column</option>\n          <option *ngFor=\"let col of hiddenColumns\" [value]=\"col.id\">{{col.title}}</option>\n        </select>\n      </div>\n    </div>\n  </form>\n\n  <div ngClass=\"{{config.divClassName || ''}}\">\n    <p-table [columns]=\"visibleColumns\" [value]=\"rows\" \n      [scrollable]=\"config.verticalScroll\" [scrollHeight]=\"config.scrollHeight\"\n      [tableStyle]=\"{'min-width': '50rem'}\">\n      <ng-template pTemplate=\"header\" let-columns>\n        <tr *ngFor=\"let hdr of headerRows; let hr=index;\" role=\"row\">\n          <th *ngIf=\"dataHasDetails && hr === 0\" [rowSpan]=\"headerRows.length\" class=\"detail-indicator-col\">\n            <span>\n              <i (click)=\"toggleAllDetails()\" [id]=\"tableId+'_ShowAllDetailsLink'\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': showAllDetails, 'bi-chevron-right': !showAllDetails}\"\n                [tooltip]=\"(showAllDetails ? 'Hide' : 'Show') + ' details for all rows'\" placement=\"right\">\n              </i>\n            </span>\n          </th>\n          <ng-template ngFor let-col [ngForOf]=\"hdr.columns\" let-i=\"index\">\n            <th *ngIf=\"!col.hidden && col.frozenColumn\" pFrozenColumn ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n            <th *ngIf=\"!col.hidden && !col.frozenColumn\" ngClass=\"{{col.className || ''}}\"\n              [colSpan]=\"col.colspan || 1\" [rowSpan]=\"col.rowspan || 1\">\n              <oepa-table-header-cell [column]=\"col\" [tableId]=\"tableId\" [allRowsSelected]=\"allRowsSelected\"\n                [rowCount]=\"rows.length\" [noFiltersSubject]=\"noFiltersSubject\"\n                (onToggleAllRowsSelection)=\"toggleAllRowsSelection()\" (onSortChanged)=\"onSortChanged($event)\"\n                (onHideColumn)=\"hideColumn($event)\" (onFilterChanged)=\"onFilterChanged($event)\">\n              </oepa-table-header-cell>\n            </th>\n          </ng-template>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row let-r=\"rowIndex\" let-columns=\"columns\">\n        <!-- Data Row -->\n        <tr>\n          <td *ngIf=\"dataHasDetails\">\n            <!-- Detail icon (if specified) -->\n            <span *ngIf=\"row.showDetail === true || row.showDetail === false\">\n              <i *ngIf=\"row.detailIconClassName\" [ngClass]=\"row.detailIconClassName\"></i>\n              <i (click)=\"toggleRowDetail(row)\" [id]=\"tableId+'_ShowDetailLink_'+r\" class=\"bi\"\n                [ngClass]=\"{'bi-chevron-down': row.showDetail, 'bi-chevron-right': !row.showDetail}\"\n                [tooltip]=\"(row.showDetail ? 'Hide' : 'Show') + ' details for this row'\" placement=\"right\">\n              </i>\n            </span>\n          </td>\n          <!-- If row is a divider, it spans the whole table -->\n          <td *ngIf=\"row.isDivider\" [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\"\n            [ngClass]=\"row.dividerClassName || 'oepa-table-gray'\">&nbsp;</td>\n          <!-- Data Rows -->\n          <ng-template *ngIf=\"!row.isDivider\" ngFor let-col [ngForOf]=\"dataColumns\" let-i=\"index\">\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&!col.frozenColumn\"\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n            <td *ngIf=\"!col.hidden && (row|cellColspan:col) > 0 &&col.frozenColumn\" pFrozenColumn\n              ngClass=\"{{row|cellClassname:col || ''}}\" [colSpan]=\"row|cellColspan:col\">\n              <oepa-table-data-cell [col]=\"col\" [i]=\"i\" [row]=\"row\" [r]=\"r\" [tableId]=\"tableId\"\n                (onActionClick)=\"onActionClick($event)\" (onCellClick)=\"cellClick($event)\"\n                (onToggleRowSelection)=\"toggleRowSelection($event)\"\n                (onSingleRowSelection)=\"singleRowSelection($event)\"></oepa-table-data-cell>\n            </td>\n          </ng-template>\n        </tr>\n\n        <!-- Detail Row -->\n        <tr *ngIf=\"row.showDetail\" class=\"table-info\">\n          <td [colSpan]=\"visibleColumnCount + (dataHasDetails ? 1 : 0)\">\n            <cml-template [templateInfo]=\"row.detail\"></cml-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n  <!-- Table footer -->\n  <form *ngIf=\"!config.hideFooter || (data && pageInfo.itemsPerPage < data.length)\" class=\"form-horizontal\">\n    <div class=\"form-group row\">\n      <!-- Table-wide filter -->\n      <div class=\"col-sm-5\">\n        <div class=\"row\">\n          <div class=\"col-sm-6\">\n            <label [for]=\"tableId+'_FilterAllColumnsInput'\" class=\"sr-only\">Filter all columns</label>\n            <input *ngIf=\"!config.hideGlobalFilter\" placeholder=\"Filter all columns\"\n              [oepaTableFiltering]=\"{ filterString: '' }\" [tableId]=\"tableId\" class=\"form-control input-sm\"\n              (tableChanged)=\"onFilterChanged($event)\" [id]=\"tableId+'_FilterAllColumnsInput'\" />\n          </div>\n          <div class=\"col-sm-6\">\n            <span *ngIf=\"config.showRowCountInFooter && _data && _data.length > 0\">\n              <span class=\"badge bg-secondary\">{{_data.length}}</span>&nbsp;total rows\n            </span>\n          </div>\n        </div>\n      </div>\n      <!-- Export Buttons -->\n      <div class=\"col-sm-2 d-flex justify-content-center\">\n        <div class=\"row\">\n          <div class=\"col-sm-12 text-center\" *ngIf=\"allowEdit\">\n            <div *ngIf=\"config.exportToExcel || config.exportToHTML\" class=\"btn-group\" dropdown>\n              <button id=\"exportBtn\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\"\n                aria-controls=\"dropdown-basic\" aria-label=\"Export options\">\n                Export <span class=\"caret\"></span>\n                <ul id=\"export-dropdown\" *dropdownMenu class=\"dropdown-menu\">\n                  <li *ngIf=\"config.exportToExcel\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToExcel()\">Export to Excel</a></li>\n                  <li *ngIf=\"config.exportToHTML\" role=\"menuitem\"><a class=\"dropdown-item\"\n                      (click)=\"exportToHTML()\">Export\n                      to HTML</a></li>\n                </ul>\n              </button>\n            </div>\n            <button *ngIf=\"customBtnVisible\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtnClick()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled\" [attr.aria-label]=\"customBtnLabel\">{{customBtnLabel}}</button>\n            <button *ngIf=\"customBtnVisible2\" type=\"button\"\n              ngClass=\"{{'btn btn-primary me-1' + (small ? ' btn-sm' : '')}}\" (click)=\"onCustomBtn2Click()\"\n              [id]=\"tableId+'_CustomBtn'\" [disabled]=\"!customBtnEnabled2\" [attr.aria-label]=\"customBtnLabel2\">{{customBtnLabel2}}</button>\n          </div>\n        </div>\n      </div>\n      <!-- Pagination -->\n      <div *ngIf=\"!config.disablePagination\" class=\"col-sm-5 d-flex justify-content-end\">\n        <pagination *ngIf=\"paginationOn\" class=\"pagination-sm\" [totalItems]=\"pageInfo.length\"\n          [itemsPerPage]=\"pageInfo.itemsPerPage\" [maxSize]=\"pageInfo.maxSize\" [(ngModel)]=\"currentPage\"\n          name=\"currentTablePage\" [boundaryLinks]=\"true\" [rotate]=\"false\" (pageChanged)=\"onPageChanged($event)\"\n          (numPages)=\"pageInfo.numPages = $event\">\n        </pagination>\n        &nbsp;\n        <button (click)=\"togglePagingation()\" type=\"button\" class=\"btn btn-default btn-sm me-1\"\n         [attr.aria-label]=\"paginationOn ? 'Show All Rows' : 'Restore Pagination'\">\n          {{ paginationOn ? 'Show All Rows' : 'Restore Pagination'}}\n        </button>\n      </div>\n      <div *ngIf=\"allowEdit && (config.exportToExcel || config.exportToHTML)\" class=\"col-sm-12 text-center\">\n        <span>Export only visible data:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportVisibleOnly\" (click)=\"toggleExportVisibleOnly()\"\n            id=\"exportVisibleOnlyCheckbox\" aria-label=\"Export only visible data\"/>\n            &nbsp;&nbsp;\n        </span>\n        <span *ngIf=\"hasSelectableColumn()\">Include unselected rows in export:&nbsp;\n          <input type=\"checkbox\" [checked]=\"exportUnselectedRows\" (click)=\"toggleExportUnselectedRows()\"\n            id=\"exportUnselectedRowsCheckbox\" aria-label=\"Include unselected rows in export\"/>\n        </span>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".pagination{margin:0}th.oepa-table-header-center{text-align:center}.oepa-table-bold{font-weight:700}.oepa-table-italic{font-style:italic}.oepa-table-line-through{text-decoration:line-through}.oepa-table-gray{background-color:#ddd}td.oepa-undeline-cell{border-bottom:1pt solid black}.detail-indicator-col{width:30px}.action-btn-col{width:90px}.select-col{width:20px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: TableService }, { type: TableExportService }, { type: i1$1.OepaFileUtilService }, { type: i0.ElementRef }], propDecorators: { tableId: [{
                 type: Input
             }], allowEdit: [{
@@ -8461,6 +8461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class TextAreaInputComponent {
     idService;
     componentId = 'TextAreaInputComponent';
+    tableIdName = '';
     group;
     field = '';
     tableIdx = 0;
@@ -8473,19 +8474,21 @@ class TextAreaInputComponent {
     }
     ngOnInit() {
         if (this.group) {
-            this.componentId = this.idService.getComponentId(this.group) + (this.field || '') + (this.tableIdx || '');
+            this.componentId = (this.tableIdName ? this.tableIdName + '_' : '') + (this.field || 'textAreaInput') + (this.tableIdx || this.tableIdx === 0 ? this.tableIdx : '');
             this.group.get(this.field)?.valueChanges.subscribe(value => {
                 this.onValueChange.emit(value);
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextAreaInputComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextAreaInputComponent, selector: "oepa-text-area-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextAreaInputComponent, selector: "oepa-text-area-input", inputs: { tableIdName: "tableIdName", group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextAreaInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-text-area-input', template: "<div [formGroup]=\"group\">\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
+            args: [{ selector: 'oepa-text-area-input', template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<textarea class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\"></textarea>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { tableIdName: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -8615,6 +8618,7 @@ class SelectInputComponent {
     smallService;
     elRef;
     componentId = 'SelectInputComponent';
+    tableIdName = '';
     group;
     field = '';
     tableIdx;
@@ -8634,7 +8638,7 @@ class SelectInputComponent {
     ngOnInit() {
         this.small = this.smallService.isSmall(this.elRef.nativeElement);
         if (this.group) {
-            this.componentId = (this.field || 'selectInput') + (this.tableIdx || this.tableIdx === 0 ? this.tableIdx : '');
+            this.componentId = (this.tableIdName ? this.tableIdName + '_' : '') + (this.field || 'selectInput') + (this.tableIdx || this.tableIdx === 0 ? this.tableIdx : '');
             this.group.get(this.field)?.valueChanges.subscribe(value => {
                 this.onValueSelected.emit(value);
             });
@@ -8674,12 +8678,14 @@ class SelectInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectInputComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i1$1.OepaSmallService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectInputComponent, selector: "oepa-select-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title", pickList: "pickList", fullList: "fullList", valueField: "valueField", displayField: "displayField", small: "small" }, outputs: { onValueSelected: "onValueSelected" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Selector</label>\n<select class=\"form-select\" [formControlName]=\"field\" [ngClass]=\"{'is-invalid':group.controls[field].invalid, 'form-control-sm': small}\" \n [id]=\"componentId\">\n<option *ngFor=\"let item of internalPickList\" [ngValue]=\"item[valueField]\">{{item[displayField]}}</option>\n</select>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>\n", styles: [""], 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: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectInputComponent, selector: "oepa-select-input", inputs: { tableIdName: "tableIdName", group: "group", field: "field", tableIdx: "tableIdx", title: "title", pickList: "pickList", fullList: "fullList", valueField: "valueField", displayField: "displayField", small: "small" }, outputs: { onValueSelected: "onValueSelected" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Selector</label>\n<select class=\"form-select\" [formControlName]=\"field\" [ngClass]=\"{'is-invalid':group.controls[field].invalid, 'form-control-sm': small}\" \n [id]=\"componentId\">\n<option *ngFor=\"let item of internalPickList\" [ngValue]=\"item[valueField]\">{{item[displayField]}}</option>\n</select>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>\n", styles: [""], 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: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'oepa-select-input', template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Selector</label>\n<select class=\"form-select\" [formControlName]=\"field\" [ngClass]=\"{'is-invalid':group.controls[field].invalid, 'form-control-sm': small}\" \n [id]=\"componentId\">\n<option *ngFor=\"let item of internalPickList\" [ngValue]=\"item[valueField]\">{{item[displayField]}}</option>\n</select>\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i1$1.OepaSmallService }, { type: i0.ElementRef }], propDecorators: { group: [{
+        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i1$1.OepaSmallService }, { type: i0.ElementRef }], propDecorators: { tableIdName: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -8706,6 +8712,7 @@ class NumericInputComponent {
     smallService;
     elRef;
     componentId = 'NumericInputComponent';
+    tableIdName = '';
     group;
     field = '';
     tableIdx;
@@ -8720,19 +8727,21 @@ class NumericInputComponent {
     ngOnInit() {
         this.small = this.smallService.isSmall(this.elRef.nativeElement);
         if (this.group) {
-            this.componentId = this.idService.getComponentId(this.group) + (this.field || '') + (this.tableIdx || '');
+            this.componentId = (this.tableIdName ? this.tableIdName + '_' : '') + (this.field || 'numericInput') + (this.tableIdx || this.tableIdx === 0 ? this.tableIdx : '');
             this.group.get(this.field)?.valueChanges.subscribe(value => {
                 this.onValueChange.emit(value);
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumericInputComponent, deps: [{ token: i1$1.OepaComponentIdService }, { token: i1$1.OepaSmallService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumericInputComponent, selector: "oepa-numeric-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title", small: "small" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid, 'form-control-sm': small}\" type=\"number\"\n        [formControlName]=\"field\" [id]=\"componentId\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumericInputComponent, selector: "oepa-numeric-input", inputs: { tableIdName: "tableIdName", group: "group", field: "field", tableIdx: "tableIdx", title: "title", small: "small" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n    <label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n    <input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid, 'form-control-sm': small}\" type=\"number\"\n        [formControlName]=\"field\" [id]=\"componentId\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumericInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-numeric-input', template: "<div [formGroup]=\"group\">\n    <input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid, 'form-control-sm': small}\" type=\"number\"\n        [formControlName]=\"field\" [id]=\"componentId\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i1$1.OepaSmallService }, { type: i0.ElementRef }], propDecorators: { group: [{
+            args: [{ selector: 'oepa-numeric-input', template: "<div [formGroup]=\"group\">\n    <label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n    <input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid, 'form-control-sm': small}\" type=\"number\"\n        [formControlName]=\"field\" [id]=\"componentId\">\n    <small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }, { type: i1$1.OepaSmallService }, { type: i0.ElementRef }], propDecorators: { tableIdName: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -8834,6 +8843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class TextInputComponent {
     idService;
     componentId = 'TextInputComponent';
+    tableIdName = '';
     group;
     field = '';
     tableIdx;
@@ -8846,19 +8856,21 @@ class TextInputComponent {
     }
     ngOnInit() {
         if (this.group) {
-            this.componentId = this.idService.getComponentId(this.group) + (this.field || '') + (this.tableIdx || '');
+            this.componentId = (this.tableIdName ? this.tableIdName + '_' : '') + (this.field || 'textInput') + (this.tableIdx || this.tableIdx === 0 ? this.tableIdx : '');
             this.group.get(this.field)?.valueChanges.subscribe(value => {
                 this.onValueChange.emit(value);
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, deps: [{ token: i1$1.OepaComponentIdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextInputComponent, selector: "oepa-text-input", inputs: { group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextInputComponent, selector: "oepa-text-input", inputs: { tableIdName: "tableIdName", group: "group", field: "field", tableIdx: "tableIdx", title: "title", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oepa-text-input', template: "<div [formGroup]=\"group\">\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { group: [{
+            args: [{ selector: 'oepa-text-input', template: "<div [formGroup]=\"group\">\n<label [for]=\"componentId\" class=\"form-label sr-only\">{{title}} Input</label>\n<input class=\"form-control\" [ngClass]=\"{'is-invalid':group.controls[field].invalid}\" \ntype=\"text\" [placeholder]=\"placeholder\" [maxlength]=\"maxlength\" [formControlName]=\"field\"\n[id]=\"componentId\">\n<small class=\"invalid-feedback\" *ngIf=\"group.controls[field].invalid\">{{title}} is required</small>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1$1.OepaComponentIdService }], propDecorators: { tableIdName: [{
+                type: Input
+            }], group: [{
                 type: Input
             }], field: [{
                 type: Input