@cleavelandprice/ngx-lib 4.7.13 → 4.7.15

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, output, viewChild, inject, ChangeDetectorRef, Component, NgModule } from '@angular/core';
+import { Pipe, input, output, viewChild, inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortHeader, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatTable, MatTableModule } from '@angular/material/table';
-import { NgStyle, DatePipe, DecimalPipe, NgClass, CommonModule } from '@angular/common';
+import { NgStyle, DatePipe, DecimalPipe, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
@@ -17,10 +17,10 @@ class RoundNumberPipe {
     transform(val) {
         return Math.round(+val);
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RoundNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: RoundNumberPipe, isStandalone: true, name: "roundNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RoundNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DecimalPointsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: DecimalPointsPipe, isStandalone: true, name: "decimalPoints" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DecimalPointsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DecimalPointsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'decimalPoints', standalone: true }]
         }] });
@@ -40,22 +40,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 class TableComponent {
     constructor() {
         //#region Inputs
-        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.tableData = input.required(...(ngDevMode ? [{ debugName: "tableData" }] : []));
-        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-        this.showPaginator = input(true, ...(ngDevMode ? [{ debugName: "showPaginator" }] : []));
-        this.showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
-        this.maxTableHeight = input('50em', ...(ngDevMode ? [{ debugName: "maxTableHeight" }] : []));
-        this.shrinkTable = input(false, ...(ngDevMode ? [{ debugName: "shrinkTable" }] : []));
-        this.paginatorSticky = input(false, ...(ngDevMode ? [{ debugName: "paginatorSticky" }] : []));
-        this.pageinatorDefaultIncrement = input(50, ...(ngDevMode ? [{ debugName: "pageinatorDefaultIncrement" }] : []));
-        this.sortingDataAccessor = input(...(ngDevMode ? [undefined, { debugName: "sortingDataAccessor" }] : []));
+        this.title = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.tableData = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableData" }] : /* istanbul ignore next */ []));
+        this.columns = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.showPaginator = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPaginator" }] : /* istanbul ignore next */ []));
+        this.showSearch = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+        this.maxTableHeight = input('50em', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxTableHeight" }] : /* istanbul ignore next */ []));
+        this.shrinkTable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shrinkTable" }] : /* istanbul ignore next */ []));
+        this.paginatorSticky = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginatorSticky" }] : /* istanbul ignore next */ []));
+        this.pageinatorDefaultIncrement = input(50, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageinatorDefaultIncrement" }] : /* istanbul ignore next */ []));
+        this.sortingDataAccessor = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sortingDataAccessor" }] : /* istanbul ignore next */ []));
         // this was added because we needed to be able to retain & set the table's sort if it was refreshed
-        this.sortState = input(...(ngDevMode ? [undefined, { debugName: "sortState" }] : []));
-        this.headerBackgroundColor = input('#ffffff', ...(ngDevMode ? [{ debugName: "headerBackgroundColor" }] : []));
-        this.headerTextColor = input('#000000', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
-        this.expansion = input(null, ...(ngDevMode ? [{ debugName: "expansion" }] : []));
-        this.searchInputValue = input(undefined, ...(ngDevMode ? [{ debugName: "searchInputValue" }] : []));
+        this.sortState = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sortState" }] : /* istanbul ignore next */ []));
+        this.headerBackgroundColor = input('#ffffff', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerBackgroundColor" }] : /* istanbul ignore next */ []));
+        this.headerTextColor = input('#000000', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTextColor" }] : /* istanbul ignore next */ []));
+        this.expansion = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expansion" }] : /* istanbul ignore next */ []));
+        this.searchInputValue = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchInputValue" }] : /* istanbul ignore next */ []));
         //#endregion
         this.buttonClicked = output();
         this.exportSortState = output();
@@ -63,20 +78,27 @@ class TableComponent {
         this.searchOutputValue = output();
         this.searchOutputTotalCount = output();
         this.isMobile = false;
-        this.paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
-        this.sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+        this.paginator = viewChild(MatPaginator, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
+        this.sort = viewChild(MatSort, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
         this.columnsWithExpand = [...this.columns().map(c => c.field), 'expand'];
+        this.expandedElements = new Set();
         this.changeDetector = inject(ChangeDetectorRef);
     }
     ngOnInit() {
         this.dataSource = new MatTableDataSource(this.tableData());
-        this.dataSource.sortingDataAccessor = this.sortingDataAccessor() ? this.sortingDataAccessor() : this.#setSortingDataAccessor();
-        this.columnNames = this.columns().map(c => c.field);
-        this.columnsWithExpand = [...this.columns().map(c => c.field), 'expand'];
+        this.dataSource.sortingDataAccessor = this.sortingDataAccessor()
+            ? this.sortingDataAccessor()
+            : this.#setSortingDataAccessor();
+        this.columnNames = this.columns().map((c) => c.field);
+        this.columnsWithExpand = [...this.columns().map((c) => c.field), 'expand'];
         this.#setTablePageSizeOptions(this.pageinatorDefaultIncrement());
         this.#setFilterPredicate();
         if (this.searchInputValue()) {
-            this.searchFilterChange({ target: { value: this.searchInputValue() } });
+            this.searchFilterChange({
+                target: { value: this.searchInputValue() },
+            });
         }
     }
     ngAfterViewInit() {
@@ -99,18 +121,15 @@ class TableComponent {
     }
     /** Checks whether an element is expanded. */
     isExpanded(element) {
-        return this.expandedElement === element;
+        return this.expandedElements.has(element);
     }
     /** Toggles the expanded state of an element. */
     toggle(element) {
-        if (this.isExpanded(element))
-            this.expandedElement = null;
+        if (this.isExpanded(element)) {
+            this.expandedElements.delete(element);
+        }
         else {
-            this.expandedElement = null;
-            // if the expansion is down already & we clicked a new element the table component wouldn't generate the data for the new item
-            setTimeout(() => {
-                this.expandedElement = element;
-            }, 1);
+            this.expandedElements.add(element);
         }
     }
     searchFilterChange(event) {
@@ -151,25 +170,31 @@ class TableComponent {
     }
     tableButtonClicked(buttonClickedObject) {
         if (buttonClickedObject)
-            this.buttonClicked.emit({ rowData: buttonClickedObject.rowData, field: buttonClickedObject.field });
+            this.buttonClicked.emit({
+                rowData: buttonClickedObject.rowData,
+                field: buttonClickedObject.field,
+            });
     }
     sortChanged(sortState) {
         this.exportSortState.emit(sortState);
     }
     #setTablePageSizeOptions(defaultPageIncrement = 50) {
         this.pageSizeOptions = [];
-        for (let i = defaultPageIncrement; i < this.dataSource.data.length; i = i + (defaultPageIncrement * 2)) {
+        for (let i = defaultPageIncrement; i < this.dataSource.data.length; i = i + defaultPageIncrement * 2) {
             this.pageSizeOptions.push(i);
         }
         this.pageSizeOptions.push(this.dataSource.data.length);
     }
     #setSortingDataAccessor() {
         return (data, sortHeaderId) => {
-            const columnField = this.columns().filter(c => c.field === sortHeaderId)[0];
-            return columnField.nestedField ? this.getFieldValue(data, columnField) :
-                columnField.doubleNestedField ? this.getFieldValue(data, columnField) :
-                    columnField.tripleNestedField ? this.getFieldValue(data, columnField) :
-                        data[sortHeaderId];
+            const columnField = this.columns().filter((c) => c.field === sortHeaderId)[0];
+            return columnField.nestedField
+                ? this.getFieldValue(data, columnField)
+                : columnField.doubleNestedField
+                    ? this.getFieldValue(data, columnField)
+                    : columnField.tripleNestedField
+                        ? this.getFieldValue(data, columnField)
+                        : data[sortHeaderId];
         };
     }
     #setFilterPredicate() {
@@ -196,10 +221,10 @@ class TableComponent {
         }
         return search;
     }
-    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 }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", exportSortState: "exportSortState", doubleClicked: "doubleClicked", searchOutputValue: "searchOutputValue", searchOutputTotalCount: "searchOutputTotalCount" }, 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 [ngModel]=\"searchInputValue()\" (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", "searchInputValue"], outputs: ["buttonClicked", "exportSortState", "doubleClicked", "searchOutputValue", "searchOutputTotalCount"] }, { 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: "22.1.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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 }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", exportSortState: "exportSortState", doubleClicked: "doubleClicked", searchOutputValue: "searchOutputValue", searchOutputTotalCount: "searchOutputTotalCount" }, 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 [ngModel]=\"searchInputValue()\" (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 (expansion() && expansion()!.isTable) {\r\n                  @if (element[expansion()!.isTable!.tableDataNestedField] !== undefined && element[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]=\"element[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", "searchInputValue"], outputs: ["buttonClicked", "exportSortState", "doubleClicked", "searchOutputValue", "searchOutputTotalCount"] }, { 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-table', imports: [
                         DatePipe,
@@ -228,16 +253,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         MatSortHeader,
                         MatTable,
                         MatTooltip,
-                        NgClass,
                         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 [ngModel]=\"searchInputValue()\" (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"] }]
+                        DecimalPointsPipe,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.Eager, 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 [ngModel]=\"searchInputValue()\" (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 (expansion() && expansion()!.isTable) {\r\n                  @if (element[expansion()!.isTable!.tableDataNestedField] !== undefined && element[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]=\"element[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 }] }], searchInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputValue", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], exportSortState: [{ type: i0.Output, args: ["exportSortState"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], searchOutputValue: [{ type: i0.Output, args: ["searchOutputValue"] }], searchOutputTotalCount: [{ type: i0.Output, args: ["searchOutputTotalCount"] }], 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.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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TableModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -254,7 +278,7 @@ class TableModule {
             DecimalPointsPipe], exports: [TableComponent,
             RoundNumberPipe,
             DecimalPointsPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -268,7 +292,7 @@ class TableModule {
             MatIconModule,
             TableComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],