npm - @cleavelandprice/ngx-lib - Versions diffs - 4.4.11 → 4.4.13 - Mend

@cleavelandprice/ngx-lib 4.4.11 → 4.4.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

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

@@ -17,10 +17,10 @@ class RoundNumberPipe {
     transform(val) {
         return Math.round(+val);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: RoundNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: RoundNumberPipe, isStandalone: true, name: "roundNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RoundNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: RoundNumberPipe, isStandalone: true, name: "roundNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: RoundNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: RoundNumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'roundNumber', standalone: true }]
         }] });
@@ -29,10 +29,10 @@ class DecimalPointsPipe {
     transform(val, numberOfDecimalPoints) {
         return parseFloat(val.toString()).toFixed(numberOfDecimalPoints);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DecimalPointsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: DecimalPointsPipe, isStandalone: true, name: "decimalPoints" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DecimalPointsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: DecimalPointsPipe, isStandalone: true, name: "decimalPoints" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DecimalPointsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: DecimalPointsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'decimalPoints', standalone: true }]
         }] });
@@ -60,9 +60,7 @@ class TableComponent {
     }
     ngOnInit() {
         this.dataSource = new MatTableDataSource(this.tableData());
-        if (this.sortingDataAccessor()) {
-            this.dataSource.sortingDataAccessor = this.sortingDataAccessor();
-        }
+        this.dataSource.sortingDataAccessor = this.sortingDataAccessor() ? this.sortingDataAccessor() : this.#setSortingDataAccessor();
         this.columnNames = this.columns().map(c => c.field);
         this.#setTablePageSizeOptions(this.pageinatorDefaultIncrement());
     }
@@ -116,10 +114,19 @@ class TableComponent {
         }
         this.pageSizeOptions.push(this.dataSource.data.length);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 }, headerBackgroundColor: { classPropertyName: "headerBackgroundColor", publicName: "headerBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  <h3>{{title()}}</h3>\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\" matSort>\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ data[column.field] | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ data[column.field] | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ data[column.field] | 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                  {{ data[column.field] | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ data[column.field] | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ data[column.field] }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\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>{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                </button>\r\n              } @else if (column.isButton.isCheckbox) {\r\n                <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                  [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\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                  {{column.isButton.text}}\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.nestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\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              {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.doubleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\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              {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.tripleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\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              {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                <textarea style=\"width: 100%;\" [rows]=\"3\" [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></textarea>\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\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              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  <input [ngModel]=\"data[column.field] | roundNumber\"  style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"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.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n              }\r\n              @else {\r\n                <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ data[column.field] }}\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              {{ data[column.field] }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columnNames;\" class=\"table-row\"></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    </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:1em .5em .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}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { 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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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]", exportAs: ["matButton"] }, { 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: RoundNumberPipe, name: "roundNumber" }, { kind: "pipe", type: DecimalPointsPipe, name: "decimalPoints" }] }); }
+    #setSortingDataAccessor() {
+        return (data, sortHeaderId) => {
+            const columnField = this.columns().filter(c => c.field === sortHeaderId)[0];
+            return columnField.nestedField ? this.getDoubleNestedFieldValue(data, columnField.field, columnField.nestedField) :
+                columnField.doubleNestedField ? this.getDoubleNestedFieldValue(data, columnField.doubleNestedField.field, columnField.doubleNestedField.nestedField) :
+                    columnField.tripleNestedField ? this.getTripleNestedFieldValue(data, columnField.tripleNestedField.field, columnField.tripleNestedField.childField, columnField.tripleNestedField.nestedField) :
+                        data[sortHeaderId];
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.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 }, headerBackgroundColor: { classPropertyName: "headerBackgroundColor", publicName: "headerBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  <h3>{{title()}}</h3>\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\" matSort>\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ data[column.field] | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ data[column.field] | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ data[column.field] | 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                  {{ data[column.field] | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ data[column.field] | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ data[column.field] }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\r\n                @if (column.isButton.isIcon.hideOnFieldValue) {\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': data[column.field] === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                  </button>\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                <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                  [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\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                  {{column.isButton.text}}\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.nestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\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              {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.doubleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\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              {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.tripleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\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              {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                <textarea style=\"width: 100%;\" [rows]=\"3\" [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></textarea>\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\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              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  <input [ngModel]=\"data[column.field] | roundNumber\"  style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"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.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n              }\r\n              @else {\r\n                <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ data[column.field] }}\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              {{ data[column.field] }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columnNames;\" class=\"table-row\"></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    </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:1em .5em .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}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { 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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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]", exportAs: ["matButton"] }, { 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"], 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: RoundNumberPipe, name: "roundNumber" }, { kind: "pipe", type: DecimalPointsPipe, name: "decimalPoints" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-table', imports: [
                         DatePipe,
@@ -152,12 +159,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         NgStyle,
                         RoundNumberPipe,
                         DecimalPointsPipe
-                    ], standalone: true, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  <h3>{{title()}}</h3>\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\" matSort>\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ data[column.field] | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ data[column.field] | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ data[column.field] | 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                  {{ data[column.field] | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ data[column.field] | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ data[column.field] }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\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>{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                </button>\r\n              } @else if (column.isButton.isCheckbox) {\r\n                <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                  [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\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                  {{column.isButton.text}}\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.nestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\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              {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.doubleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\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              {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.tripleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\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              {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                <textarea style=\"width: 100%;\" [rows]=\"3\" [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></textarea>\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\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              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  <input [ngModel]=\"data[column.field] | roundNumber\"  style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"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.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n              }\r\n              @else {\r\n                <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ data[column.field] }}\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              {{ data[column.field] }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columnNames;\" class=\"table-row\"></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    </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:1em .5em .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}\n"] }]
+                    ], standalone: true, template: "@if (showSearch()) {\r\n  <div style=\"display: flex; gap: .75em;\">\r\n    @if (title() !== '') {\r\n      <h3>{{title()}}</h3>\r\n    }\r\n\r\n    <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n        <mat-label>Search</mat-label>\r\n        <mat-icon matPrefix>search</mat-icon>\r\n        <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n    </mat-form-field>\r\n  </div>\r\n}\r\n@else {\r\n  <h3>{{title()}}</h3>\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\" matSort>\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.field\">\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n            <div>{{ column.fieldColumnTitle }}</div>\r\n          </th>\r\n\r\n          <td mat-cell *matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n            @if(column.isDate) {\r\n              @if(column.isDate.showTime) {\r\n                {{ data[column.field] | date:'short' }}\r\n              }\r\n              @else if(column.isDate.customFormat) {\r\n                {{ data[column.field] | date:'' + column.isDate.customFormat + ''}}\r\n              }\r\n              @else {\r\n                {{ data[column.field] | 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                  {{ data[column.field] | number:'0.0-0' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'0.0-0' }}\r\n                }\r\n              } @else {\r\n                @if (column.isNumber.percentage) {\r\n                  {{ data[column.field] | number:'.2-2' }}%\r\n                }\r\n                @else if (column.isNumber.money) {\r\n                  ${{ data[column.field] | number:'.2-2' }}\r\n                }\r\n                @else {\r\n                  {{ data[column.field] | number:'.2-2' }}\r\n                }\r\n              }\r\n            }\r\n            @else if (column.isCheckbox) {\r\n              <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n            }\r\n            @else if (column.isHyperlink) {\r\n              <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n                {{ data[column.field] }}\r\n              </a>\r\n            }\r\n            @else if (column.isButton) {\r\n              @if (column.isButton.isIcon) {\r\n                @if (column.isButton.isIcon.hideOnFieldValue) {\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': data[column.field] === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n                  </button>\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                <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n                  [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\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                  {{column.isButton.text}}\r\n                </button>\r\n              }\r\n            }\r\n            @else if (column.nestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\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              {\r\n                {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.doubleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\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              {\r\n                {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.tripleNestedField) {\r\n              @if (column.fieldIconButton) {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\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              {\r\n                {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n              }\r\n            }\r\n            @else if (column.isEditable) {\r\n              @if (column.isEditable.type === 'textarea') {\r\n                <textarea style=\"width: 100%;\" [rows]=\"3\" [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></textarea>\r\n              }\r\n              @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\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              @else if (column.isEditable.isNumber) {\r\n                @if (column.isEditable.isNumber.needsRounded) {\r\n                  <input [ngModel]=\"data[column.field] | roundNumber\"  style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n                @else if (column.isEditable.isNumber.decimalPoints) {\r\n                  <input [ngModel]=\"data[column.field] | decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"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.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n                }\r\n              }\r\n              @else {\r\n                <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\"  [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n              }\r\n            }\r\n            @else if (column.fieldIconButton) {\r\n              {{ data[column.field] }}\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              {{ data[column.field] }}\r\n            }\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columnNames;\" class=\"table-row\"></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    </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:1em .5em .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}\n"] }]
         }] });
 class TableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: TableModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -174,7 +181,7 @@ class TableModule {
             DecimalPointsPipe], exports: [TableComponent,
             RoundNumberPipe,
             DecimalPointsPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -188,7 +195,7 @@ class TableModule {
             MatIconModule,
             TableComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

package/fesm2022/cleavelandprice-ngx-lib-table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cleavelandprice-ngx-lib-table.mjs","sources":["../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/roundNumber.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/decimalPoints.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.html","../../../../projects/cleavelandprice/ngx-lib/table/src/table.module.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/cleavelandprice-ngx-lib-table.ts"],"sourcesContent":["import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'roundNumber', standalone: true })\r\nexport class RoundNumberPipe implements PipeTransform{\r\n transform(val: any) {\r\n return Math.round(+val);\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'decimalPoints', standalone: true })\r\nexport class DecimalPointsPipe implements PipeTransform{\r\n transform(val: any, numberOfDecimalPoints: number) {\r\n return parseFloat(val.toString()).toFixed(numberOfDecimalPoints);\r\n }\r\n}\r\n","import { AfterViewInit, Component, input, output, viewChild } from '@angular/core';\r\n\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatSort, MatSortHeader } from '@angular/material/sort';\r\nimport { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatTable, MatTableDataSource } from '@angular/material/table';\r\n\r\nimport { DatePipe, DecimalPipe, NgClass, NgStyle } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatButton, MatIconButton } from '@angular/material/button';\r\nimport { MatCheckbox } from '@angular/material/checkbox';\r\nimport { MatFormField, MatLabel, MatPrefix } from '@angular/material/form-field';\r\nimport { MatIcon } from '@angular/material/icon';\r\nimport { MatInput } from '@angular/material/input';\r\nimport { MatTooltip } from '@angular/material/tooltip';\r\nimport { TableColumn } from '../../model/table-column';\r\nimport { RoundNumberPipe } from '../../pipes/roundNumber';\r\nimport { DecimalPointsPipe } from '../../pipes/decimalPoints';\r\n\r\n@Component({\r\n selector: 'lib-table',\r\n imports: [\r\n DatePipe,\r\n DecimalPipe,\r\n FormsModule,\r\n MatButton,\r\n MatCell,\r\n MatCellDef,\r\n MatCheckbox,\r\n MatColumnDef,\r\n MatFormField,\r\n MatHeaderCell,\r\n MatHeaderCellDef,\r\n MatHeaderRow,\r\n MatHeaderRowDef,\r\n MatIcon,\r\n MatIconButton,\r\n MatInput,\r\n MatLabel,\r\n MatNoDataRow,\r\n MatPaginator,\r\n MatPrefix,\r\n MatRow,\r\n MatRowDef,\r\n MatSort,\r\n MatSortHeader,\r\n MatTable,\r\n MatTooltip,\r\n NgClass,\r\n NgStyle,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n standalone: true,\r\n templateUrl: './table.component.html',\r\n styleUrl: './table.component.scss'\r\n})\r\nexport class TableComponent implements AfterViewInit {\r\n //#region Inputs\r\n title = input('');\r\n tableData = input.required<any[]>();\r\n columns = input<TableColumn[]>([]);\r\n showPaginator = input(true);\r\n showSearch = input(true);\r\n maxTableHeight = input('50em');\r\n shrinkTable = input(false);\r\n paginatorSticky = input(false);\r\n pageinatorDefaultIncrement = input(50);\r\n sortingDataAccessor = input<(data: any, sortHeaderId: string) => string>();\r\n headerBackgroundColor = input('#ffffff');\r\n headerTextColor = input('#000000');\r\n //#endregion\r\n\r\n buttonClicked = output<{ rowData: any, field: string }>();\r\n\r\n isMobile = false;\r\n dataSource!: MatTableDataSource<any>;\r\n pageSizeOptions!: number[]; // = [10, 20, 100, 500];\r\n columnNames!: string[];\r\n\r\n paginator = viewChild(MatPaginator);\r\n sort = viewChild(MatSort);\r\n\r\n ngOnInit(): void {\r\n this.dataSource = new MatTableDataSource(this.tableData());\r\n\r\n if (this.sortingDataAccessor()) {\r\n this.dataSource.sortingDataAccessor = this.sortingDataAccessor()!;\r\n }\r\n\r\n this.columnNames = this.columns().map(c => c.field);\r\n\r\n this.#setTablePageSizeOptions(this.pageinatorDefaultIncrement());\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.paginator() && !this.dataSource.paginator) {\r\n this.dataSource.paginator = this.paginator()!;\r\n }\r\n if (this.sort() && !this.dataSource.sort) {\r\n this.dataSource.sort = this.sort()!;\r\n }\r\n }\r\n\r\n searchFilterChange(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n }\r\n\r\n buttonClick(rowData: any, field: string) {\r\n this.buttonClicked.emit({ rowData, field });\r\n }\r\n\r\n editableFieldChange(rowData: any, field: string, value: any) {\r\n rowData[field] = value;\r\n\r\n this.buttonClicked.emit({ rowData, field });\r\n }\r\n\r\n getDropdownFieldValue(option: any, field: string, nestedField?: string) {\r\n if (nestedField)\r\n return option[field][nestedField];\r\n else\r\n return option[field];\r\n }\r\n\r\n getNestedFieldValue(rowData: any, nestedField: string) {\r\n if (!nestedField) { return; }\r\n\r\n return rowData[nestedField];\r\n }\r\n\r\n getDoubleNestedFieldValue(rowData: any, field: string, nestedField: string) {\r\n if (!field \|\| !nestedField) { return; }\r\n\r\n return rowData[field][nestedField];\r\n }\r\n\r\n getTripleNestedFieldValue(rowData: any, field: string, childField: string, nestedField: string) {\r\n if (!field \|\| !childField \|\| !nestedField) { return; }\r\n\r\n return rowData[field][childField][nestedField];\r\n }\r\n\r\n #setTablePageSizeOptions(defaultPageIncrement: number = 50) {\r\n this.pageSizeOptions = [];\r\n\r\n for (let i = defaultPageIncrement; i < this.dataSource.data.length; i = i + (defaultPageIncrement * 2)) {\r\n this.pageSizeOptions.push(i);\r\n }\r\n\r\n this.pageSizeOptions.push(this.dataSource.data.length);\r\n }\r\n}\r\n","@if (showSearch()) {\r\n <div style=\"display: flex; gap: .75em;\">\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n <mat-label>Search</mat-label>\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n </mat-form-field>\r\n </div>\r\n}\r\n@else {\r\n <h3>{{title()}}</h3>\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\" matSort>\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th mat-header-cell matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n <div>{{ column.fieldColumnTitle }}</div>\r\n </th>\r\n\r\n <td mat-cell matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n @if(column.isDate) {\r\n @if(column.isDate.showTime) {\r\n {{ data[column.field] \| date:'short' }}\r\n }\r\n @else if(column.isDate.customFormat) {\r\n {{ data[column.field] \| date:'' + column.isDate.customFormat + ''}}\r\n }\r\n @else {\r\n {{ data[column.field] \| 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 {{ data[column.field] \| number:'0.0-0' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] \| number:'0.0-0' }}\r\n }\r\n @else {\r\n {{ data[column.field] \| number:'0.0-0' }}\r\n }\r\n } @else {\r\n @if (column.isNumber.percentage) {\r\n {{ data[column.field] \| number:'.2-2' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] \| number:'.2-2' }}\r\n }\r\n @else {\r\n {{ data[column.field] \| number:'.2-2' }}\r\n }\r\n }\r\n }\r\n @else if (column.isCheckbox) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.isHyperlink) {\r\n <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n {{ data[column.field] }}\r\n </a>\r\n }\r\n @else if (column.isButton) {\r\n @if (column.isButton.isIcon) {\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>{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\r\n } @else if (column.isButton.isCheckbox) {\r\n <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\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 {{column.isButton.text}}\r\n </button>\r\n }\r\n }\r\n @else if (column.nestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\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 {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n }\r\n }\r\n @else if (column.doubleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\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 {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.tripleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\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 {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.isEditable) {\r\n @if (column.isEditable.type === 'textarea') {\r\n <textarea style=\"width: 100%;\" [rows]=\"3\" [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></textarea>\r\n }\r\n @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\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 @else if (column.isEditable.isNumber) {\r\n @if (column.isEditable.isNumber.needsRounded) {\r\n <input [ngModel]=\"data[column.field] \| roundNumber\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.isEditable.isNumber.decimalPoints) {\r\n <input [ngModel]=\"data[column.field] \| decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"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.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else {\r\n <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n }\r\n @else if (column.fieldIconButton) {\r\n {{ data[column.field] }}\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 {{ data[column.field] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n <tr mat-row matRowDef=\"let row; columns: columnNames;\" class=\"table-row\"></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 </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","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatPaginatorModule } from '@angular/material/paginator';\r\nimport { MatSortModule } from '@angular/material/sort';\r\nimport { MatTableModule } from '@angular/material/table';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport { TableComponent } from './components/table/table.component';\r\nimport { RoundNumberPipe } from './pipes/roundNumber';\r\nimport { DecimalPointsPipe } from './pipes/decimalPoints';\r\n\r\n@NgModule({\r\n declarations: [\r\n ],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n\r\n MatButtonModule,\r\n MatCheckboxModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatTableModule,\r\n MatSortModule,\r\n MatPaginatorModule,\r\n MatTooltipModule,\r\n MatIconModule,\r\n\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n exports: [\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ]\r\n})\r\nexport class TableModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './table.api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"cleavelandprice-ngx-lib-table.mjs","sources":["../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/roundNumber.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/pipes/decimalPoints.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/components/table/table.component.html","../../../../projects/cleavelandprice/ngx-lib/table/src/table.module.ts","../../../../projects/cleavelandprice/ngx-lib/table/src/cleavelandprice-ngx-lib-table.ts"],"sourcesContent":["import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'roundNumber', standalone: true })\r\nexport class RoundNumberPipe implements PipeTransform{\r\n transform(val: any) {\r\n return Math.round(+val);\r\n }\r\n}\r\n","import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({ name: 'decimalPoints', standalone: true })\r\nexport class DecimalPointsPipe implements PipeTransform{\r\n transform(val: any, numberOfDecimalPoints: number) {\r\n return parseFloat(val.toString()).toFixed(numberOfDecimalPoints);\r\n }\r\n}\r\n","import { AfterViewInit, Component, input, output, viewChild } from '@angular/core';\r\n\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatSort, MatSortHeader } from '@angular/material/sort';\r\nimport { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatTable, MatTableDataSource } from '@angular/material/table';\r\n\r\nimport { DatePipe, DecimalPipe, NgClass, NgStyle } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatButton, MatIconButton } from '@angular/material/button';\r\nimport { MatCheckbox } from '@angular/material/checkbox';\r\nimport { MatFormField, MatLabel, MatPrefix } from '@angular/material/form-field';\r\nimport { MatIcon } from '@angular/material/icon';\r\nimport { MatInput } from '@angular/material/input';\r\nimport { MatTooltip } from '@angular/material/tooltip';\r\nimport { TableColumn } from '../../model/table-column';\r\nimport { RoundNumberPipe } from '../../pipes/roundNumber';\r\nimport { DecimalPointsPipe } from '../../pipes/decimalPoints';\r\n\r\n@Component({\r\n selector: 'lib-table',\r\n imports: [\r\n DatePipe,\r\n DecimalPipe,\r\n FormsModule,\r\n MatButton,\r\n MatCell,\r\n MatCellDef,\r\n MatCheckbox,\r\n MatColumnDef,\r\n MatFormField,\r\n MatHeaderCell,\r\n MatHeaderCellDef,\r\n MatHeaderRow,\r\n MatHeaderRowDef,\r\n MatIcon,\r\n MatIconButton,\r\n MatInput,\r\n MatLabel,\r\n MatNoDataRow,\r\n MatPaginator,\r\n MatPrefix,\r\n MatRow,\r\n MatRowDef,\r\n MatSort,\r\n MatSortHeader,\r\n MatTable,\r\n MatTooltip,\r\n NgClass,\r\n NgStyle,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n standalone: true,\r\n templateUrl: './table.component.html',\r\n styleUrl: './table.component.scss'\r\n})\r\nexport class TableComponent implements AfterViewInit {\r\n //#region Inputs\r\n title = input('');\r\n tableData = input.required<any[]>();\r\n columns = input<TableColumn[]>([]);\r\n showPaginator = input(true);\r\n showSearch = input(true);\r\n maxTableHeight = input('50em');\r\n shrinkTable = input(false);\r\n paginatorSticky = input(false);\r\n pageinatorDefaultIncrement = input(50);\r\n sortingDataAccessor = input<(data: any, sortHeaderId: string) => string>();\r\n headerBackgroundColor = input('#ffffff');\r\n headerTextColor = input('#000000');\r\n //#endregion\r\n\r\n buttonClicked = output<{ rowData: any, field: string }>();\r\n\r\n isMobile = false;\r\n dataSource!: MatTableDataSource<any>;\r\n pageSizeOptions!: number[]; // = [10, 20, 100, 500];\r\n columnNames!: string[];\r\n\r\n paginator = viewChild(MatPaginator);\r\n sort = viewChild(MatSort);\r\n\r\n ngOnInit(): void {\r\n this.dataSource = new MatTableDataSource(this.tableData());\r\n\r\n this.dataSource.sortingDataAccessor = this.sortingDataAccessor() ? this.sortingDataAccessor()! : this.#setSortingDataAccessor();\r\n\r\n this.columnNames = this.columns().map(c => c.field);\r\n\r\n this.#setTablePageSizeOptions(this.pageinatorDefaultIncrement());\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (this.paginator() && !this.dataSource.paginator) {\r\n this.dataSource.paginator = this.paginator()!;\r\n }\r\n if (this.sort() && !this.dataSource.sort) {\r\n this.dataSource.sort = this.sort()!;\r\n }\r\n }\r\n\r\n searchFilterChange(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n }\r\n\r\n buttonClick(rowData: any, field: string) {\r\n this.buttonClicked.emit({ rowData, field });\r\n }\r\n\r\n editableFieldChange(rowData: any, field: string, value: any) {\r\n rowData[field] = value;\r\n\r\n this.buttonClicked.emit({ rowData, field });\r\n }\r\n\r\n getDropdownFieldValue(option: any, field: string, nestedField?: string) {\r\n if (nestedField)\r\n return option[field][nestedField];\r\n else\r\n return option[field];\r\n }\r\n\r\n getNestedFieldValue(rowData: any, nestedField: string) {\r\n if (!nestedField) { return; }\r\n\r\n return rowData[nestedField];\r\n }\r\n\r\n getDoubleNestedFieldValue(rowData: any, field: string, nestedField: string) {\r\n if (!field \|\| !nestedField) { return; }\r\n\r\n return rowData[field][nestedField];\r\n }\r\n\r\n getTripleNestedFieldValue(rowData: any, field: string, childField: string, nestedField: string) {\r\n if (!field \|\| !childField \|\| !nestedField) { return; }\r\n\r\n return rowData[field][childField][nestedField];\r\n }\r\n\r\n #setTablePageSizeOptions(defaultPageIncrement: number = 50) {\r\n this.pageSizeOptions = [];\r\n\r\n for (let i = defaultPageIncrement; i < this.dataSource.data.length; i = i + (defaultPageIncrement * 2)) {\r\n this.pageSizeOptions.push(i);\r\n }\r\n\r\n this.pageSizeOptions.push(this.dataSource.data.length);\r\n }\r\n\r\n #setSortingDataAccessor() {\r\n return (data: any, sortHeaderId: string) => {\r\n const columnField = this.columns().filter(c => c.field === sortHeaderId)[0];\r\n\r\n return columnField.nestedField ? this.getDoubleNestedFieldValue(data, columnField.field, columnField.nestedField) :\r\n columnField.doubleNestedField ? this.getDoubleNestedFieldValue(data, columnField.doubleNestedField.field, columnField.doubleNestedField.nestedField) :\r\n columnField.tripleNestedField ? this.getTripleNestedFieldValue(data, columnField.tripleNestedField.field, columnField.tripleNestedField.childField, columnField.tripleNestedField.nestedField) :\r\n data[sortHeaderId];\r\n }\r\n }\r\n}\r\n","@if (showSearch()) {\r\n <div style=\"display: flex; gap: .75em;\">\r\n @if (title() !== '') {\r\n <h3>{{title()}}</h3>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\" style=\"margin-bottom: -1em;\">\r\n <mat-label>Search</mat-label>\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input type=\"text\" matInput (keyup)=\"searchFilterChange($event)\">\r\n </mat-form-field>\r\n </div>\r\n}\r\n@else {\r\n <h3>{{title()}}</h3>\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\" matSort>\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.field\">\r\n <th mat-header-cell matHeaderCellDef mat-sort-header [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth, 'background-color': headerBackgroundColor(), 'color': headerTextColor() }\">\r\n <div>{{ column.fieldColumnTitle }}</div>\r\n </th>\r\n\r\n <td mat-cell matCellDef=\"let data\" [class.hide-mobile]=\"column.hideOnMobile && isMobile\" [ngStyle]=\"{ 'width': column.columnWidth }\">\r\n @if(column.isDate) {\r\n @if(column.isDate.showTime) {\r\n {{ data[column.field] \| date:'short' }}\r\n }\r\n @else if(column.isDate.customFormat) {\r\n {{ data[column.field] \| date:'' + column.isDate.customFormat + ''}}\r\n }\r\n @else {\r\n {{ data[column.field] \| 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 {{ data[column.field] \| number:'0.0-0' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] \| number:'0.0-0' }}\r\n }\r\n @else {\r\n {{ data[column.field] \| number:'0.0-0' }}\r\n }\r\n } @else {\r\n @if (column.isNumber.percentage) {\r\n {{ data[column.field] \| number:'.2-2' }}%\r\n }\r\n @else if (column.isNumber.money) {\r\n ${{ data[column.field] \| number:'.2-2' }}\r\n }\r\n @else {\r\n {{ data[column.field] \| number:'.2-2' }}\r\n }\r\n }\r\n }\r\n @else if (column.isCheckbox) {\r\n <mat-checkbox [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isCheckbox['isDisabled']\" />\r\n }\r\n @else if (column.isHyperlink) {\r\n <a [href]=\"data[column.isHyperlink.linkField]\" target=\"_blank\">\r\n {{ data[column.field] }}\r\n </a>\r\n }\r\n @else if (column.isButton) {\r\n @if (column.isButton.isIcon) {\r\n @if (column.isButton.isIcon.hideOnFieldValue) {\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': data[column.field] === true ? 'default' : 'none'}\">{{column.isButton.isIcon.iconName}}</mat-icon>\r\n </button>\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 <mat-checkbox [matTooltip]=\"column.isButton.isCheckbox.toolTip\"\r\n [(ngModel)]=\"data[column.field]\" (click)=\"buttonClick(data, column.field)\" />\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 {{column.isButton.text}}\r\n </button>\r\n }\r\n }\r\n @else if (column.nestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\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 {\r\n {{ getNestedFieldValue(data[column.field], column.nestedField) }}\r\n }\r\n }\r\n @else if (column.doubleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\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 {\r\n {{ getDoubleNestedFieldValue(data, column.doubleNestedField.field, column.doubleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.tripleNestedField) {\r\n @if (column.fieldIconButton) {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\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 {\r\n {{ getTripleNestedFieldValue(data, column.tripleNestedField.field, column.tripleNestedField.childField, column.tripleNestedField.nestedField) }}\r\n }\r\n }\r\n @else if (column.isEditable) {\r\n @if (column.isEditable.type === 'textarea') {\r\n <textarea style=\"width: 100%;\" [rows]=\"3\" [(ngModel)]=\"data[column.field]\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\"></textarea>\r\n }\r\n @else if (column.isEditable.type === 'dropdown' && column.isEditable.isDropdown) {\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 @else if (column.isEditable.isNumber) {\r\n @if (column.isEditable.isNumber.needsRounded) {\r\n <input [ngModel]=\"data[column.field] \| roundNumber\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n @else if (column.isEditable.isNumber.decimalPoints) {\r\n <input [ngModel]=\"data[column.field] \| decimalPoints:column.isEditable.isNumber.decimalPoints\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"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.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"number\">\r\n }\r\n }\r\n @else {\r\n <input [(ngModel)]=\"data[column.field]\" (ngModelChange)=\"editableFieldChange(data, column.field, $event)\" style=\"width: 55%;\" [disabled]=\"column.isEditable.disable !== undefined && column.isEditable.disable\" type=\"text\">\r\n }\r\n }\r\n @else if (column.fieldIconButton) {\r\n {{ data[column.field] }}\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 {{ data[column.field] }}\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row matHeaderRowDef=\"columnNames; sticky: true\"></tr>\r\n <tr mat-row matRowDef=\"let row; columns: columnNames;\" class=\"table-row\"></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 </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","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatPaginatorModule } from '@angular/material/paginator';\r\nimport { MatSortModule } from '@angular/material/sort';\r\nimport { MatTableModule } from '@angular/material/table';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport { TableComponent } from './components/table/table.component';\r\nimport { RoundNumberPipe } from './pipes/roundNumber';\r\nimport { DecimalPointsPipe } from './pipes/decimalPoints';\r\n\r\n@NgModule({\r\n declarations: [\r\n ],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n\r\n MatButtonModule,\r\n MatCheckboxModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatTableModule,\r\n MatSortModule,\r\n MatPaginatorModule,\r\n MatTooltipModule,\r\n MatIconModule,\r\n\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ],\r\n exports: [\r\n TableComponent,\r\n RoundNumberPipe,\r\n DecimalPointsPipe\r\n ]\r\n})\r\nexport class TableModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './table.api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cleavelandprice-ngx-lib-upload.mjs CHANGED Viewed

@@ -102,10 +102,10 @@ class UploadService extends NgxLibServiceBase {
     getUploadInfo(request) {
         return this.#http.post(`${this.apiUrl}${this.options.databaseEndpoint}/info`, request);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadService, deps: [{ token: UploadServiceOptionsToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadService, deps: [{ token: UploadServiceOptionsToken, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -189,10 +189,10 @@ class UploadDialogComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: UploadDialogComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], ngImport: i0, template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\n\n<div mat-dialog-title id=\"title\">\n  <div>{{ services.upload.options.uploadDialogTitle }}</div>\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\n    {{ services.upload.options.uploadDialogAddFilesButtonText }}\n  </button>\n</div>\n\n@if (existingFileConflict) {\n  <div id=\"conflict\">\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\n  </div>\n}\n\n<mat-dialog-content>\n  <mat-list>\n    @for (file of files; track file) {\n      <mat-list-item>\n        <h4 mat-line>{{file.name}}</h4>\n        @if (progress) {\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"/>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\n</mat-dialog-content>\n\n<mat-dialog-actions id=\"actions\">\n  @if (showCancelButton) {\n    <button mat-button mat-dialog-close>{{ services.upload.options.uploadDialogCancelButtonText }}</button>\n  }\n  @if (files.size > 0) {\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\n  }\n</mat-dialog-actions>\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: UploadDialogComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], ngImport: i0, template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\r\n\r\n<div mat-dialog-title id=\"title\">\r\n  <div>{{ services.upload.options.uploadDialogTitle }}</div>\r\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\r\n    {{ services.upload.options.uploadDialogAddFilesButtonText }}\r\n  </button>\r\n</div>\r\n\r\n@if (existingFileConflict) {\r\n  <div id=\"conflict\">\r\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\r\n  </div>\r\n}\r\n\r\n<mat-dialog-content>\r\n  <mat-list>\r\n    @for (file of files; track file) {\r\n      <mat-list-item>\r\n        <h4 mat-line>{{file.name}}</h4>\r\n        @if (progress) {\r\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"/>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions id=\"actions\">\r\n  @if (showCancelButton) {\r\n    <button mat-button mat-dialog-close>{{ services.upload.options.uploadDialogCancelButtonText }}</button>\r\n  }\r\n  @if (files.size > 0) {\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\r\n  }\r\n</mat-dialog-actions>\r\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadDialogComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         AsyncPipe,
@@ -203,7 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         MatList,
                         MatListItem,
                         MatProgressBar
-                    ], standalone: true, template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\n\n<div mat-dialog-title id=\"title\">\n  <div>{{ services.upload.options.uploadDialogTitle }}</div>\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\n    {{ services.upload.options.uploadDialogAddFilesButtonText }}\n  </button>\n</div>\n\n@if (existingFileConflict) {\n  <div id=\"conflict\">\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\n  </div>\n}\n\n<mat-dialog-content>\n  <mat-list>\n    @for (file of files; track file) {\n      <mat-list-item>\n        <h4 mat-line>{{file.name}}</h4>\n        @if (progress) {\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"/>\n        }\n      </mat-list-item>\n    }\n  </mat-list>\n</mat-dialog-content>\n\n<mat-dialog-actions id=\"actions\">\n  @if (showCancelButton) {\n    <button mat-button mat-dialog-close>{{ services.upload.options.uploadDialogCancelButtonText }}</button>\n  }\n  @if (files.size > 0) {\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\n  }\n</mat-dialog-actions>\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"] }]
+                    ], standalone: true, template: "<input type=\"file\" #file style=\"display: none\" (change)=\"onFilesAdded()\" multiple />\r\n\r\n<div mat-dialog-title id=\"title\">\r\n  <div>{{ services.upload.options.uploadDialogTitle }}</div>\r\n  <button [disabled]=\"uploading || uploadSuccessful\" mat-raised-button color=\"primary\" class=\"add-files-btn\" (click)=\"addFiles()\">\r\n    {{ services.upload.options.uploadDialogAddFilesButtonText }}\r\n  </button>\r\n</div>\r\n\r\n@if (existingFileConflict) {\r\n  <div id=\"conflict\">\r\n    {{ existingFileConflict }} already exists on the server and cannot be overwritten\r\n  </div>\r\n}\r\n\r\n<mat-dialog-content>\r\n  <mat-list>\r\n    @for (file of files; track file) {\r\n      <mat-list-item>\r\n        <h4 mat-line>{{file.name}}</h4>\r\n        @if (progress) {\r\n          <mat-progress-bar mode=\"determinate\" [value]=\"progress[file.name].progress | async\"/>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions id=\"actions\">\r\n  @if (showCancelButton) {\r\n    <button mat-button mat-dialog-close>{{ services.upload.options.uploadDialogCancelButtonText }}</button>\r\n  }\r\n  @if (files.size > 0) {\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"!canBeClosed\" (click)=\"closeDialog()\">{{ primaryButtonText }}</button>\r\n  }\r\n</mat-dialog-actions>\r\n", styles: ["#title{display:flex;justify-content:space-between}#actions{display:flex;justify-content:flex-end}#conflict{font-size:.8em;color:red;margin-top:.5em}\n"] }]
         }] });
 class UploadComponent {
@@ -217,10 +217,10 @@ class UploadComponent {
         this.#dialogService.open(UploadDialogComponent, { width: '50%' })
             .afterClosed().subscribe(() => this.dialogClosed.emit());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: UploadComponent, isStandalone: true, selector: "cp-upload", outputs: { dialogClosed: "dialogClosed" }, ngImport: i0, template: '<button mat-raised-button (click)="openUploadDialog()">{{ uploadService.options.uploadButtonText }}</button>', isInline: true, dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: UploadComponent, isStandalone: true, selector: "cp-upload", outputs: { dialogClosed: "dialogClosed" }, ngImport: i0, template: '<button mat-raised-button (click)="openUploadDialog()">{{ uploadService.options.uploadButtonText }}</button>', isInline: true, dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cp-upload',
@@ -249,8 +249,8 @@ class UploadModule {
             throw new Error('UploadModule is already loaded. Import it in the AppModule only');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadModule, deps: [{ token: UploadModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: UploadModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadModule, deps: [{ token: UploadModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: UploadModule, imports: [CommonModule,
             MatButtonModule,
             MatDialogModule,
             MatListModule,
@@ -258,7 +258,7 @@ class UploadModule {
             UploadComponent,
             UploadDialogComponent], exports: [UploadComponent,
             UploadDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadModule, imports: [CommonModule,
             MatButtonModule,
             MatDialogModule,
             MatListModule,
@@ -266,7 +266,7 @@ class UploadModule {
             UploadComponent,
             UploadDialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: UploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],