@one-paragon/angular-utilities 0.3.10--beta.1 → 0.3.10
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.
- package/esm2022/table-builder/classes/MatTableObservableDataSource.mjs +3 -32
- package/esm2022/table-builder/classes/TableBuilderDataSource.mjs +50 -0
- package/esm2022/table-builder/components/generic-table/generic-table.component.mjs +3 -3
- package/esm2022/table-builder/components/generic-table/paginator.component.mjs +3 -3
- package/esm2022/table-builder/components/table-container/table-container.mjs +5 -5
- package/esm2022/table-builder/components/table-context.mjs +1 -1
- package/fesm2022/one-paragon-angular-utilities.mjs +28 -8
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/classes/MatTableObservableDataSource.d.ts +2 -6
- package/table-builder/classes/TableBuilderDataSource.d.ts +13 -0
- package/table-builder/components/table-context.d.ts +2 -2
|
@@ -3565,14 +3565,14 @@ class GenericTableComponent {
|
|
|
3565
3565
|
this.selection.select(...this.context.dataSource.data);
|
|
3566
3566
|
}
|
|
3567
3567
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$4.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: TransformCreator }, { token: i0.Injector }, { token: "TABLE_CONTEXT" }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3568
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$", rows: "rows", columnBuilders: "columnBuilders", columnInfos: "columnInfos" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"context.dataSource!\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\">\r\n {{ 1 + i + offsetIndex}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"props.groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: props.isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: props.stickyFooter \" [style.bottom.px]=\"props.stickyFooter ? (offset$ | async) : undefined\" />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.
|
|
3568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$", rows: "rows", columnBuilders: "columnBuilders", columnInfos: "columnInfos" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"context.dataSource!\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\">\r\n {{ 1 + i + offsetIndex}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"props.groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: props.isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: props.stickyFooter \" [style.bottom.px]=\"props.stickyFooter ? (offset$ | async) : undefined\" />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3569
3569
|
}
|
|
3570
3570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
3571
3571
|
type: Component,
|
|
3572
3572
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3573
3573
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
3574
3574
|
MatTooltipModule, AsyncPipe, LetDirective, FunctionPipe,
|
|
3575
|
-
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"context.dataSource!\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\">\r\n {{ 1 + i + offsetIndex}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"props.groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: props.isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: props.stickyFooter \" [style.bottom.px]=\"props.stickyFooter ? (offset$ | async) : undefined\" />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.
|
|
3575
|
+
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"context.dataSource!\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\">\r\n {{ 1 + i + offsetIndex}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"props.groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: props.isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: props.stickyFooter \" [style.bottom.px]=\"props.stickyFooter ? (offset$ | async) : undefined\" />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"] }]
|
|
3576
3576
|
}], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: TransformCreator }, { type: i0.Injector }, { type: undefined, decorators: [{
|
|
3577
3577
|
type: Inject,
|
|
3578
3578
|
args: ["TABLE_CONTEXT"]
|
|
@@ -4007,7 +4007,7 @@ class PaginatorComponent {
|
|
|
4007
4007
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4008
4008
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
4009
4009
|
</mat-paginator>
|
|
4010
|
-
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.
|
|
4010
|
+
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4011
4011
|
}
|
|
4012
4012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
4013
4013
|
type: Component,
|
|
@@ -4020,7 +4020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
4020
4020
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4021
4021
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
4022
4022
|
</mat-paginator>
|
|
4023
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.
|
|
4023
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
4024
4024
|
}], ctorParameters: () => [{ type: TableStore }, { type: undefined, decorators: [{
|
|
4025
4025
|
type: Inject,
|
|
4026
4026
|
args: ["TABLE_CONTEXT"]
|
|
@@ -4330,7 +4330,7 @@ class TableVirtualScrollStrategy {
|
|
|
4330
4330
|
}
|
|
4331
4331
|
}
|
|
4332
4332
|
|
|
4333
|
-
class
|
|
4333
|
+
class TableBuilderDataSource extends MatTableDataSource {
|
|
4334
4334
|
constructor(dataSrc, state, context) {
|
|
4335
4335
|
super([]);
|
|
4336
4336
|
this.dataSrc = dataSrc;
|
|
@@ -4540,7 +4540,7 @@ class TableContainerComponent {
|
|
|
4540
4540
|
});
|
|
4541
4541
|
}
|
|
4542
4542
|
ngOnInit() {
|
|
4543
|
-
const ds = new
|
|
4543
|
+
const ds = new TableBuilderDataSource(this.displayData, this.state, this.context);
|
|
4544
4544
|
this.context.dataSource = ds;
|
|
4545
4545
|
this.initializeState();
|
|
4546
4546
|
this.initializeData();
|
|
@@ -4593,7 +4593,7 @@ class TableContainerComponent {
|
|
|
4593
4593
|
this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })));
|
|
4594
4594
|
}
|
|
4595
4595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", usePaginator: "usePaginator", itemHeight: "itemHeight", headerOffset: "headerOffset", useVirtualScroll: "useVirtualScroll", tableId: "tableId", tableBuilder: "tableBuilder", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n <div>\r\n @if(props.useVirtualScroll) {\r\n <tb-virtual-scroll-container>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n </tb-virtual-scroll-container>\r\n }\r\n @else {\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n }\r\n @if(props.usePaginator) {\r\n <div class=\"flx-row-end sticky\" style=\"height: 100px;\">\r\n <tb-paginator #tbPaginator [data$]=\"data\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data$", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i15.MatMenuModule }, { kind: "component", type: i15.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$2.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: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], viewProviders: [
|
|
4596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", usePaginator: "usePaginator", itemHeight: "itemHeight", headerOffset: "headerOffset", useVirtualScroll: "useVirtualScroll", tableId: "tableId", tableBuilder: "tableBuilder", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n <div>\r\n @if(props.useVirtualScroll) {\r\n <tb-virtual-scroll-container>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n </tb-virtual-scroll-container>\r\n }\r\n @else {\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n }\r\n @if(props.usePaginator) {\r\n <div class=\"paginator\">\r\n <tb-paginator #tbPaginator [data$]=\"data\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data$", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i15.MatMenuModule }, { kind: "component", type: i15.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$2.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: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], viewProviders: [
|
|
4597
4597
|
{
|
|
4598
4598
|
provide: "TABLE_CONTEXT",
|
|
4599
4599
|
useFactory: (c) => c.context,
|
|
@@ -4609,7 +4609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
4609
4609
|
useFactory: (c) => c.context,
|
|
4610
4610
|
deps: [forwardRef(() => TableContainerComponent)],
|
|
4611
4611
|
},
|
|
4612
|
-
], template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n <div>\r\n @if(props.useVirtualScroll) {\r\n <tb-virtual-scroll-container>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n </tb-virtual-scroll-container>\r\n }\r\n @else {\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n }\r\n @if(props.usePaginator) {\r\n <div class=\"
|
|
4612
|
+
], template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n <div>\r\n @if(props.useVirtualScroll) {\r\n <tb-virtual-scroll-container>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n </tb-virtual-scroll-container>\r\n }\r\n @else {\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n }\r\n @if(props.usePaginator) {\r\n <div class=\"paginator\">\r\n <tb-paginator #tbPaginator [data$]=\"data\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
4613
4613
|
}], propDecorators: { indexColumn: [{
|
|
4614
4614
|
type: Input
|
|
4615
4615
|
}], selectionColumn: [{
|
|
@@ -4775,6 +4775,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
4775
4775
|
}]
|
|
4776
4776
|
}] });
|
|
4777
4777
|
|
|
4778
|
+
class MatTableObservableDataSource extends MatTableDataSource {
|
|
4779
|
+
constructor(dataSrc) {
|
|
4780
|
+
super([]);
|
|
4781
|
+
this.dataSrc = dataSrc;
|
|
4782
|
+
}
|
|
4783
|
+
connect() {
|
|
4784
|
+
if (!this.subscription) {
|
|
4785
|
+
this.subscription = this.dataSrc.subscribe(data => this.data = data);
|
|
4786
|
+
}
|
|
4787
|
+
return super.connect();
|
|
4788
|
+
}
|
|
4789
|
+
disconnect() {
|
|
4790
|
+
if (this.subscription) {
|
|
4791
|
+
this.subscription.unsubscribe();
|
|
4792
|
+
this.subscription = undefined;
|
|
4793
|
+
}
|
|
4794
|
+
super.disconnect();
|
|
4795
|
+
}
|
|
4796
|
+
}
|
|
4797
|
+
|
|
4778
4798
|
class TableBuilder {
|
|
4779
4799
|
constructor(data$, metaData$, settings = new GeneralTableSettings()) {
|
|
4780
4800
|
this.data$ = data$;
|