@cleavelandprice/ngx-lib 4.7.0 → 4.7.2

package/fesm2022/cleavelandprice-ngx-lib-sharepoint.mjs

@@ -147,10 +147,10 @@ class SharePointService extends NgxLibServiceBase {
             console.log('Cache cleared');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SharePointService, deps: [{ token: SharePointServiceOptionsToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SharePointService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointService, deps: [{ token: SharePointServiceOptionsToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SharePointService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -184,10 +184,10 @@ class UserPhotoUrlPipe {
     
         return photo ? photo.encodedAbsUrl : null;*/
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UserPhotoUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: UserPhotoUrlPipe, isStandalone: true, name: "userPhotoUrl" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoUrlPipe, isStandalone: true, name: "userPhotoUrl" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UserPhotoUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'userPhotoUrl',
@@ -220,10 +220,10 @@ class UserPhotoComponent {
             this._user = this.user();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UserPhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: UserPhotoComponent, isStandalone: true, selector: "user-photo", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: true, transformFunction: null }, userPhotos: { classPropertyName: "userPhotos", publicName: "userPhotos", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notRound: { classPropertyName: "notRound", publicName: "notRound", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (_user) {\r\n  @if ((_user | userPhotoUrl:userPhotos() | async)) {\r\n    <img\r\n      [src]=\"_user | userPhotoUrl:userPhotos() | async\"\r\n      [style.width]=\"size()\"\r\n      [style.height]=\"size()\"\r\n      [style.border-radius]=\"notRound() ? 'initial' : '100%'\">\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UserPhotoUrlPipe, name: "userPhotoUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UserPhotoComponent, isStandalone: true, selector: "user-photo", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: true, transformFunction: null }, userPhotos: { classPropertyName: "userPhotos", publicName: "userPhotos", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notRound: { classPropertyName: "notRound", publicName: "notRound", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (_user) {\r\n  @if ((_user | userPhotoUrl:userPhotos() | async)) {\r\n    <img\r\n      [src]=\"_user | userPhotoUrl:userPhotos() | async\"\r\n      [style.width]=\"size()\"\r\n      [style.height]=\"size()\"\r\n      [style.border-radius]=\"notRound() ? 'initial' : '100%'\">\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UserPhotoUrlPipe, name: "userPhotoUrl" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UserPhotoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserPhotoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'user-photo', imports: [
                         AsyncPipe,
@@ -248,14 +248,14 @@ class SharePointModule {
             throw new Error('SharePointModule is already loaded. Import it in the AppModule only');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SharePointModule, deps: [{ token: SharePointModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: SharePointModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, deps: [{ token: SharePointModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, imports: [CommonModule,
             UserPhotoUrlPipe,
             UserPhotoComponent], exports: [UserPhotoUrlPipe,
             UserPhotoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SharePointModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SharePointModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SharePointModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

package/fesm2022/cleavelandprice-ngx-lib-table.mjs

@@ -17,10 +17,10 @@ class RoundNumberPipe {
     transform(val) {
         return Math.round(+val);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RoundNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: RoundNumberPipe, isStandalone: true, name: "roundNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RoundNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: RoundNumberPipe, isStandalone: true, name: "roundNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RoundNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RoundNumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'roundNumber', standalone: true }]
         }] });
@@ -29,10 +29,10 @@ class DecimalPointsPipe {
     transform(val, numberOfDecimalPoints) {
         return parseFloat(val.toString()).toFixed(numberOfDecimalPoints);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DecimalPointsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: DecimalPointsPipe, isStandalone: true, name: "decimalPoints" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DecimalPointsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: DecimalPointsPipe, isStandalone: true, name: "decimalPoints" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DecimalPointsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DecimalPointsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'decimalPoints', standalone: true }]
         }] });
@@ -58,6 +58,7 @@ class TableComponent {
         //#endregion
         this.buttonClicked = output();
         this.exportSortState = output();
+        this.doubleClicked = output();
         this.isMobile = false;
         this.paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
         this.sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
@@ -187,10 +188,10 @@ class TableComponent {
         }
         return search;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, maxTableHeight: { classPropertyName: "maxTableHeight", publicName: "maxTableHeight", isSignal: true, isRequired: false, transformFunction: null }, shrinkTable: { classPropertyName: "shrinkTable", publicName: "shrinkTable", isSignal: true, isRequired: false, transformFunction: null }, paginatorSticky: { classPropertyName: "paginatorSticky", publicName: "paginatorSticky", isSignal: true, isRequired: false, transformFunction: null }, pageinatorDefaultIncrement: { classPropertyName: "pageinatorDefaultIncrement", publicName: "pageinatorDefaultIncrement", isSignal: true, isRequired: false, transformFunction: null }, sortingDataAccessor: { classPropertyName: "sortingDataAccessor", publicName: "sortingDataAccessor", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, headerBackgroundColor: { classPropertyName: "headerBackgroundColor", publicName: "headerBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, expansion: { classPropertyName: "expansion", publicName: "expansion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", exportSortState: "exportSortState" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  @if (title() !== '') {\r\n    <h3>{{title()}}</h3>\r\n  }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n    <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ getFieldValue(data, column) | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ getFieldValue(data, column) | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ getFieldValue(data, column) | date:'shortDate' }}\r\n              }\r\n            }\r\n            @else if (column.isNumber) {\r\n              @if (column.isNumber.needsRounded) {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              @if (column.tripleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.doubleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.nestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ getFieldValue(data, column) }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\r\n                @if (column.isButton.isIcon.displayOnFieldValue) {\r\n                  @if (getFieldValue(data, column) === true) {\r\n                    <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                      (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                      <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': getFieldValue(data, column) === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                    </button>\r\n                  }\r\n                }\r\n                @else {\r\n                  <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                    (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                    <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                  </button>\r\n                }\r\n              } @else if (column.isButton.isCheckbox) {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n              } @else {\r\n                <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n                  [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n                  [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n                  (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.text) {\r\n                    {{column.isButton.buttonText.text}}\r\n                  }\r\n                  @else if (column.isButton.buttonText &&column.isButton.buttonText.field) {\r\n                    {{ data[column.isButton.buttonText.field] }}\r\n                  }\r\n                  @else if (column.isButton.buttonText && column.isButton.buttonText.nestedField) {\r\n                    {{ getFieldValue(data, column) }}\r\n                  }\r\n                  @else if (column.isButton.text) {\r\n                    {{column.isButton.text}}\r\n                  }\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.includesIcon) {\r\n                    <mat-icon>\r\n                      {{column.isButton.buttonText.includesIcon.iconName}}\r\n                    </mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                @if (column.tripleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n                @if (column.tripleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <select [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else {\r\n                  <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'checkbox') {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n              }\r\n              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n              }\r\n              @else {\r\n                @if (column.tripleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <input [(ngModel)]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else {\r\n                  <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ getFieldValue(data, column) }}\r\n\r\n              <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n                (click)=\"buttonClick(data, column.field)\">\r\n                <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n              </button>\r\n            }\r\n            @else {\r\n              {{ getFieldValue(data, column) }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      @if (expansion() !== null) {\r\n        <ng-container matColumnDef=\"expand\">\r\n          <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">&nbsp;</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <button matIconButton aria-label=\"expand row\"\r\n              (click)=\"toggle(element); $event.stopPropagation()\"\r\n              class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n              <mat-icon>keyboard_arrow_down</mat-icon>\r\n            </button>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n        <ng-container matColumnDef=\"expandedDetail\">\r\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n            <div class=\"expansion-element-detail-wrapper\"\r\n              [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n              <div class=\"expansion-element-detail\">\r\n                @if (expandedElement && expansion() && expansion()!.isTable) {\r\n                  @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n                    <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n                    <lib-table [title]=\"''\"\r\n                      [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n                      [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n                      [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n                      [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n                      [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n                      [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n                      (buttonClicked)=\"tableButtonClicked($event)\" />\r\n                  }\r\n                  @else {\r\n                    <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n                  }\r\n                }\r\n                @else {\r\n                  <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n                }\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n            class=\"expansion-element-row\"\r\n            [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n            (click)=\"toggle(element)\">\r\n        </tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n          class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n        </tr>\r\n      }\r\n      @else {\r\n        <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n        <tr mat-row *matNoDataRow>\r\n          <td class=\"mat-cell\" colspan=\"9999\">\r\n            No records exist.\r\n          </td>\r\n        </tr>\r\n      }\r\n    </table>\r\n\r\n    @if (showPaginator()) {\r\n      <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n    }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "lib-table", inputs: ["title", "tableData", "columns", "showPaginator", "showSearch", "maxTableHeight", "shrinkTable", "paginatorSticky", "pageinatorDefaultIncrement", "sortingDataAccessor", "sortState", "headerBackgroundColor", "headerTextColor", "expansion"], outputs: ["buttonClicked", "exportSortState"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: RoundNumberPipe, name: "roundNumber" }, { kind: "pipe", type: DecimalPointsPipe, name: "decimalPoints" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, maxTableHeight: { classPropertyName: "maxTableHeight", publicName: "maxTableHeight", isSignal: true, isRequired: false, transformFunction: null }, shrinkTable: { classPropertyName: "shrinkTable", publicName: "shrinkTable", isSignal: true, isRequired: false, transformFunction: null }, paginatorSticky: { classPropertyName: "paginatorSticky", publicName: "paginatorSticky", isSignal: true, isRequired: false, transformFunction: null }, pageinatorDefaultIncrement: { classPropertyName: "pageinatorDefaultIncrement", publicName: "pageinatorDefaultIncrement", isSignal: true, isRequired: false, transformFunction: null }, sortingDataAccessor: { classPropertyName: "sortingDataAccessor", publicName: "sortingDataAccessor", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, headerBackgroundColor: { classPropertyName: "headerBackgroundColor", publicName: "headerBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, expansion: { classPropertyName: "expansion", publicName: "expansion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", exportSortState: "exportSortState", doubleClicked: "doubleClicked" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  @if (title() !== '') {\r\n    <h3>{{title()}}</h3>\r\n  }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n    <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\" (dblclick)=\"doubleClicked.emit({ rowData: data, field: column.field })\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ getFieldValue(data, column) | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ getFieldValue(data, column) | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ getFieldValue(data, column) | date:'shortDate' }}\r\n              }\r\n            }\r\n            @else if (column.isNumber) {\r\n              @if (column.isNumber.needsRounded) {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              @if (column.tripleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.doubleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.nestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ getFieldValue(data, column) }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\r\n                @if (column.isButton.isIcon.displayOnFieldValue) {\r\n                  @if (getFieldValue(data, column) === true) {\r\n                    <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                      (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                      <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': getFieldValue(data, column) === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                    </button>\r\n                  }\r\n                }\r\n                @else {\r\n                  <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                    (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                    <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                  </button>\r\n                }\r\n              } @else if (column.isButton.isCheckbox) {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n              } @else {\r\n                <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n                  [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n                  [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n                  (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.text) {\r\n                    {{column.isButton.buttonText.text}}\r\n                  }\r\n                  @else if (column.isButton.buttonText &&column.isButton.buttonText.field) {\r\n                    {{ data[column.isButton.buttonText.field] }}\r\n                  }\r\n                  @else if (column.isButton.buttonText && column.isButton.buttonText.nestedField) {\r\n                    {{ getFieldValue(data, column) }}\r\n                  }\r\n                  @else if (column.isButton.text) {\r\n                    {{column.isButton.text}}\r\n                  }\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.includesIcon) {\r\n                    <mat-icon>\r\n                      {{column.isButton.buttonText.includesIcon.iconName}}\r\n                    </mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                @if (column.tripleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n                @if (column.tripleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <select [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else {\r\n                  <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'checkbox') {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n              }\r\n              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n              }\r\n              @else {\r\n                @if (column.tripleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <input [(ngModel)]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else {\r\n                  <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ getFieldValue(data, column) }}\r\n\r\n              <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n                (click)=\"buttonClick(data, column.field)\">\r\n                <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n              </button>\r\n            }\r\n            @else {\r\n              {{ getFieldValue(data, column) }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      @if (expansion() !== null) {\r\n        <ng-container matColumnDef=\"expand\">\r\n          <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">&nbsp;</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <button matIconButton aria-label=\"expand row\"\r\n              (click)=\"toggle(element); $event.stopPropagation()\"\r\n              class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n              <mat-icon>keyboard_arrow_down</mat-icon>\r\n            </button>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n        <ng-container matColumnDef=\"expandedDetail\">\r\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n            <div class=\"expansion-element-detail-wrapper\"\r\n              [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n              <div class=\"expansion-element-detail\">\r\n                @if (expandedElement && expansion() && expansion()!.isTable) {\r\n                  @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n                    <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n                    <lib-table [title]=\"''\"\r\n                      [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n                      [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n                      [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n                      [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n                      [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n                      [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n                      (buttonClicked)=\"tableButtonClicked($event)\" />\r\n                  }\r\n                  @else {\r\n                    <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n                  }\r\n                }\r\n                @else {\r\n                  <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n                }\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n            class=\"expansion-element-row\"\r\n            [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n            (click)=\"toggle(element)\">\r\n        </tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n          class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n        </tr>\r\n      }\r\n      @else {\r\n        <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n        <tr mat-row *matNoDataRow>\r\n          <td class=\"mat-cell\" colspan=\"9999\">\r\n            No records exist.\r\n          </td>\r\n        </tr>\r\n      }\r\n    </table>\r\n\r\n    @if (showPaginator()) {\r\n      <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n    }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "lib-table", inputs: ["title", "tableData", "columns", "showPaginator", "showSearch", "maxTableHeight", "shrinkTable", "paginatorSticky", "pageinatorDefaultIncrement", "sortingDataAccessor", "sortState", "headerBackgroundColor", "headerTextColor", "expansion"], outputs: ["buttonClicked", "exportSortState", "doubleClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: RoundNumberPipe, name: "roundNumber" }, { kind: "pipe", type: DecimalPointsPipe, name: "decimalPoints" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-table', imports: [
                         DatePipe,
@@ -223,12 +224,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         NgStyle,
                         RoundNumberPipe,
                         DecimalPointsPipe
-                    ], standalone: true, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  @if (title() !== '') {\r\n    <h3>{{title()}}</h3>\r\n  }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n    <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ getFieldValue(data, column) | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ getFieldValue(data, column) | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ getFieldValue(data, column) | date:'shortDate' }}\r\n              }\r\n            }\r\n            @else if (column.isNumber) {\r\n              @if (column.isNumber.needsRounded) {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              @if (column.tripleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.doubleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.nestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ getFieldValue(data, column) }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\r\n                @if (column.isButton.isIcon.displayOnFieldValue) {\r\n                  @if (getFieldValue(data, column) === true) {\r\n                    <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                      (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                      <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': getFieldValue(data, column) === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                    </button>\r\n                  }\r\n                }\r\n                @else {\r\n                  <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                    (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                    <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                  </button>\r\n                }\r\n              } @else if (column.isButton.isCheckbox) {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n              } @else {\r\n                <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n                  [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n                  [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n                  (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.text) {\r\n                    {{column.isButton.buttonText.text}}\r\n                  }\r\n                  @else if (column.isButton.buttonText &&column.isButton.buttonText.field) {\r\n                    {{ data[column.isButton.buttonText.field] }}\r\n                  }\r\n                  @else if (column.isButton.buttonText && column.isButton.buttonText.nestedField) {\r\n                    {{ getFieldValue(data, column) }}\r\n                  }\r\n                  @else if (column.isButton.text) {\r\n                    {{column.isButton.text}}\r\n                  }\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.includesIcon) {\r\n                    <mat-icon>\r\n                      {{column.isButton.buttonText.includesIcon.iconName}}\r\n                    </mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                @if (column.tripleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n                @if (column.tripleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <select [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else {\r\n                  <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'checkbox') {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n              }\r\n              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n              }\r\n              @else {\r\n                @if (column.tripleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <input [(ngModel)]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else {\r\n                  <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ getFieldValue(data, column) }}\r\n\r\n              <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n                (click)=\"buttonClick(data, column.field)\">\r\n                <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n              </button>\r\n            }\r\n            @else {\r\n              {{ getFieldValue(data, column) }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      @if (expansion() !== null) {\r\n        <ng-container matColumnDef=\"expand\">\r\n          <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">&nbsp;</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <button matIconButton aria-label=\"expand row\"\r\n              (click)=\"toggle(element); $event.stopPropagation()\"\r\n              class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n              <mat-icon>keyboard_arrow_down</mat-icon>\r\n            </button>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n        <ng-container matColumnDef=\"expandedDetail\">\r\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n            <div class=\"expansion-element-detail-wrapper\"\r\n              [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n              <div class=\"expansion-element-detail\">\r\n                @if (expandedElement && expansion() && expansion()!.isTable) {\r\n                  @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n                    <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n                    <lib-table [title]=\"''\"\r\n                      [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n                      [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n                      [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n                      [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n                      [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n                      [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n                      (buttonClicked)=\"tableButtonClicked($event)\" />\r\n                  }\r\n                  @else {\r\n                    <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n                  }\r\n                }\r\n                @else {\r\n                  <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n                }\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n            class=\"expansion-element-row\"\r\n            [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n            (click)=\"toggle(element)\">\r\n        </tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n          class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n        </tr>\r\n      }\r\n      @else {\r\n        <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n        <tr mat-row *matNoDataRow>\r\n          <td class=\"mat-cell\" colspan=\"9999\">\r\n            No records exist.\r\n          </td>\r\n        </tr>\r\n      }\r\n    </table>\r\n\r\n    @if (showPaginator()) {\r\n      <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n    }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableData", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], maxTableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTableHeight", required: false }] }], shrinkTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "shrinkTable", required: false }] }], paginatorSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorSticky", required: false }] }], pageinatorDefaultIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageinatorDefaultIncrement", required: false }] }], sortingDataAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDataAccessor", required: false }] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }], headerBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBackgroundColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], expansion: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansion", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], exportSortState: [{ type: i0.Output, args: ["exportSortState"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
+                    ], standalone: true, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  @if (title() !== '') {\r\n    <h3>{{title()}}</h3>\r\n  }\r\n}\r\n\r\n<div class=\"table-container\" [ngStyle]=\"{'max-height': maxTableHeight()}\" [class.shrink-table]=\"shrinkTable()\">\r\n    <table mat-table [dataSource]=\"dataSource\" multiTemplateDataRows matSort (matSortChange)=\"sortChanged($event)\">\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\" (dblclick)=\"doubleClicked.emit({ rowData: data, field: column.field })\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ getFieldValue(data, column) | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ getFieldValue(data, column) | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ getFieldValue(data, column) | date:'shortDate' }}\r\n              }\r\n            }\r\n            @else if (column.isNumber) {\r\n              @if (column.isNumber.needsRounded) {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ getFieldValue(data, column) | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              @if (column.tripleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.doubleNestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else if (column.nestedField) {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n              @else {\r\n                <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n              }\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ getFieldValue(data, column) }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\r\n                @if (column.isButton.isIcon.displayOnFieldValue) {\r\n                  @if (getFieldValue(data, column) === true) {\r\n                    <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                      (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                      <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor, 'display': getFieldValue(data, column) === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                    </button>\r\n                  }\r\n                }\r\n                @else {\r\n                  <button mat-icon-button [matTooltip]=\"column.isButton.isIcon.toolTip\" [disabled]=\"column.isButton.isDisabled\"\r\n                    (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n                    <mat-icon [ngStyle]=\"{'color': column.isButton.isIcon.iconColor}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                  </button>\r\n                }\r\n              } @else if (column.isButton.isCheckbox) {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n                @else {\r\n                  <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                    [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\r\n                }\r\n              } @else {\r\n                <button mat-raised-button [disabled]=\"column.isButton.isDisabled\"\r\n                  [color]=\"column.isButton.isDisabled ? undefined : 'primary'\"\r\n                  [class.button-extra-padding]=\"column.isButton.extraPadding\"\r\n                  (click)=\"column.isButton.isDisabled ? undefined : buttonClick(data, column.field)\">\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.text) {\r\n                    {{column.isButton.buttonText.text}}\r\n                  }\r\n                  @else if (column.isButton.buttonText &&column.isButton.buttonText.field) {\r\n                    {{ data[column.isButton.buttonText.field] }}\r\n                  }\r\n                  @else if (column.isButton.buttonText && column.isButton.buttonText.nestedField) {\r\n                    {{ getFieldValue(data, column) }}\r\n                  }\r\n                  @else if (column.isButton.text) {\r\n                    {{column.isButton.text}}\r\n                  }\r\n\r\n                  @if (column.isButton.buttonText && column.isButton.buttonText.includesIcon) {\r\n                    <mat-icon>\r\n                      {{column.isButton.buttonText.includesIcon.iconName}}\r\n                    </mat-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                @if (column.tripleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field][column.nestedField]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n                @else {\r\n                  <textarea\r\n                    [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '100%' }\"\r\n                    [rows]=\"3\"\r\n                    [(ngModel)]=\"data[column.field]\"\r\n                    [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"\r\n                    (ngModelChange)=\"editableFieldChange(data, column, $event)\"\r\n                  ></textarea>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\r\n                @if (column.tripleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <select [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <select [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n                @else {\r\n                  <select [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\">\r\n                    @for (item of column.isEditable.isDropdown.options; track $index) {\r\n                      <option\r\n                        [value]=\"getDropdownFieldValue(item, column.isEditable.isDropdown.value.field, column.isEditable.isDropdown.value.nestedField)\"\r\n                      >\r\n                        {{ getDropdownFieldValue(item, column.isEditable.isDropdown.displayField.field, column.isEditable.isDropdown.displayField.nestedField) }}\r\n                      </option>\r\n                    }\r\n                  </select>\r\n                }\r\n              }\r\n              @else if (column.isEditable.type === 'checkbox') {\r\n                @if (column.tripleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field][column.nestedField]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n                @else {\r\n                  <mat-checkbox [(ngModel)]=\"data[column.field]\" (change)=\"buttonClick(data, column.field)\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></mat-checkbox>\r\n                }\r\n              }\r\n              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | roundNumber\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n                @else {\r\n                  @if (column.tripleNestedField) {\r\n                    <input [ngModel]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.doubleNestedField) {\r\n                    <input [ngModel]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else if (column.nestedField) {\r\n                    <input [ngModel]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                  @else {\r\n                    <input [ngModel]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '55%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                  }\r\n                }\r\n              }\r\n              @else {\r\n                @if (column.tripleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.tripleNestedField.field][column.tripleNestedField.childField][column.tripleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.doubleNestedField) {\r\n                  <input [(ngModel)]=\"data[column.doubleNestedField.field][column.doubleNestedField.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else if (column.nestedField) {\r\n                  <input [(ngModel)]=\"data[column.field][column.nestedField]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n                @else {\r\n                  <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column, $event)\" [ngStyle]=\"{ 'width': column.isEditable.width ? column.isEditable.width : '85%' }\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n                }\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ getFieldValue(data, column) }}\r\n\r\n              <button mat-icon-button [matTooltip]=\"column.fieldIconButton.toolTip\"\r\n                (click)=\"buttonClick(data, column.field)\">\r\n                <mat-icon>{{column.fieldIconButton.iconName}}</mat-icon>\r\n              </button>\r\n            }\r\n            @else {\r\n              {{ getFieldValue(data, column) }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      @if (expansion() !== null) {\r\n        <ng-container matColumnDef=\"expand\">\r\n          <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\" [ngStyle]=\"{ 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">&nbsp;</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <button matIconButton aria-label=\"expand row\"\r\n              (click)=\"toggle(element); $event.stopPropagation()\"\r\n              class=\"expansion-toggle-button\" [class.expansion-toggle-button-expanded]=\"isExpanded(element)\">\r\n              <mat-icon>keyboard_arrow_down</mat-icon>\r\n            </button>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n        <ng-container matColumnDef=\"expandedDetail\">\r\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsWithExpand.length\">\r\n            <div class=\"expansion-element-detail-wrapper\"\r\n              [class.expansion-element-detail-wrapper-expanded]=\"isExpanded(element)\">\r\n              <div class=\"expansion-element-detail\">\r\n                @if (expandedElement && expansion() && expansion()!.isTable) {\r\n                  @if (expandedElement[expansion()!.isTable!.tableDataNestedField] !== undefined && expandedElement[expansion()!.isTable!.tableDataNestedField].length !== 0) {\r\n                    <p class=\"expansion-table-title\">{{ expansion()?.isTable?.title }}</p>\r\n\r\n                    <lib-table [title]=\"''\"\r\n                      [tableData]=\"expandedElement[expansion()!.isTable!.tableDataNestedField]\" [columns]=\"expansion()!.isTable!.columns\"\r\n                      [showPaginator]=\"expansion()!.isTable!.showPaginator\" [paginatorSticky]=\"expansion()!.isTable!.paginatorSticky\"\r\n                      [showSearch]=\"expansion()!.isTable!.showSearch\" [shrinkTable]=\"expansion()!.isTable!.shrinkTable\"\r\n                      [maxTableHeight]=\"expansion()!.isTable!.maxTableHeight\" [pageinatorDefaultIncrement]=\"expansion()!.isTable!.paginatorDefaultIncrement\"\r\n                      [headerBackgroundColor]=\"expansion()!.isTable!.headerBackgroundColor\"\r\n                      [headerTextColor]=\"expansion()!.isTable!.headerTextColor\"\r\n                      (buttonClicked)=\"tableButtonClicked($event)\" />\r\n                  }\r\n                  @else {\r\n                    <h3>No {{ expansion()!.isTable!.title }} to display.</h3>\r\n                  }\r\n                }\r\n                @else {\r\n                  <p>Currently only table's are only supported in expansions. There may be future uses but that will need defined in the ngx-lib Table component.</p>\r\n                }\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"columnsWithExpand; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let element; columns: columnsWithExpand;\"\r\n            class=\"expansion-element-row\"\r\n            [class.expansion-expanded-row]=\"isExpanded(element)\"\r\n            (click)=\"toggle(element)\">\r\n        </tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n          class=\"expansion-detail-row\" [class.show-expansion]=\"isExpanded(row)\" [class.hide-expansion]=\"!isExpanded(row)\">\r\n        </tr>\r\n      }\r\n      @else {\r\n        <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: columnNames;\"></tr>\r\n        <tr mat-row *matNoDataRow>\r\n          <td class=\"mat-cell\" colspan=\"9999\">\r\n            No records exist.\r\n          </td>\r\n        </tr>\r\n      }\r\n    </table>\r\n\r\n    @if (showPaginator()) {\r\n      <mat-paginator [class.paginator-sticky]=\"paginatorSticky()\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons />\r\n    }\r\n</div>\r\n", styles: [".mat-form-field{width:100%!important}.table-container{display:grid;grid-template-columns:1fr;max-height:50em;overflow:auto;margin:.5em;text-align:center!important}.table-container .table{width:100%}:host ::ng-deep .mat-sort-header-container{display:flex;justify-content:center;margin-left:1.25em}td,th{text-align:center!important;vertical-align:middle!important}.shrink-table .mat-mdc-unelevated-button{line-height:1.75em}.shrink-table .mat-mdc-outlined-button{line-height:1.5em;height:1.5em}.shrink-table .mat-mdc-row:hover{background-color:#8f8f8f18;font-weight:700}.shrink-table .mat-mdc-row,tr.mat-row{min-height:1.5em;height:1.5em}.shrink-table .mat-mdc-header-row{min-height:40px}.shrink-table tr.mat-mdc-header-row{height:1.5em;border-radius:5px}.shrink-table .mat-column-tools{min-width:225px;max-width:225px}.shrink-table .mat-mdc-header-cell{font-weight:700;padding:0}.paginator-sticky{bottom:0;position:sticky;z-index:10}.button-extra-padding{padding-top:1.75em;padding-bottom:1.75em}table{width:100%}.hide-expansion{display:none}.show-expansion{display:table-row;vertical-align:inherit;border-color:inherit;background-color:#efefef}tr.expansion-detail-row{height:0}tr.expansion-element-row{cursor:pointer}tr.expansion-element-row:not(.expansion-expanded-row):hover{background:#f5f5f5}tr.expansion-element-row:not(.expansion-expanded-row):active{background:#efefef}.expansion-element-row td{border-bottom-width:0}.expansion-element-cell{display:grid}.expansion-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.expansion-element-detail-wrapper-expanded{grid-template-rows:1fr}.expansion-element-detail{display:grid;min-height:0;min-width:100%}.expansion-toggle-button{transition:transform 225ms cubic-bezier(.4,0,.2,1)}.expansion-toggle-button-expanded{transform:rotate(180deg)}.expansion-table-title{text-align:left;padding:0;margin-left:.5em}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableData", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], maxTableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTableHeight", required: false }] }], shrinkTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "shrinkTable", required: false }] }], paginatorSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorSticky", required: false }] }], pageinatorDefaultIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageinatorDefaultIncrement", required: false }] }], sortingDataAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDataAccessor", required: false }] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }], headerBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBackgroundColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], expansion: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansion", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], exportSortState: [{ type: i0.Output, args: ["exportSortState"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
 
 class TableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: TableModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -245,7 +246,7 @@ class TableModule {
             DecimalPointsPipe], exports: [TableComponent,
             RoundNumberPipe,
             DecimalPointsPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -259,7 +260,7 @@ class TableModule {
             MatIconModule,
             TableComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],