@saydar/table-builder 1.0.16-beta.5 → 1.0.16-beta.6
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.
|
@@ -2637,7 +2637,7 @@ class PaginatorComponent {
|
|
|
2637
2637
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 250, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2638
2638
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
2639
2639
|
</mat-paginator>
|
|
2640
|
-
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row{background-color:var(--mat-sys-
|
|
2640
|
+
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row,:host::ng-deep mat-table.mat-mdc-table{background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}:host::ng-deep mat-paginator{background-color:inherit}: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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2641
2641
|
}
|
|
2642
2642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
2643
2643
|
type: Component,
|
|
@@ -2648,7 +2648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2648
2648
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 250, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2649
2649
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
2650
2650
|
</mat-paginator>
|
|
2651
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row{background-color:var(--mat-sys-
|
|
2651
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row,:host::ng-deep mat-table.mat-mdc-table{background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}:host::ng-deep mat-paginator{background-color:inherit}: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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
2652
2652
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { dataSource: [{
|
|
2653
2653
|
type: Input
|
|
2654
2654
|
}], tableElRef: [{
|
|
@@ -2821,11 +2821,11 @@ class GenericTableComponent {
|
|
|
2821
2821
|
this.selection.select(...this.dataSource.data);
|
|
2822
2822
|
}
|
|
2823
2823
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2824
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", 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 }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: " <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\"\n (paginatorChangeEmitter)=\"paginatorChange.emit()\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row{background-color:var(--mat-sys-
|
|
2824
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", 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 }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: " <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\"\n (paginatorChangeEmitter)=\"paginatorChange.emit()\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row,:host::ng-deep mat-table.mat-mdc-table{background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}:host::ng-deep mat-paginator{background-color:inherit}: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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2825
2825
|
}
|
|
2826
2826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
2827
2827
|
type: Component,
|
|
2828
|
-
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: " <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\"\n (paginatorChangeEmitter)=\"paginatorChange.emit()\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row{background-color:var(--mat-sys-
|
|
2828
|
+
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: " <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\"\n (paginatorChangeEmitter)=\"paginatorChange.emit()\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row,:host::ng-deep mat-table.mat-mdc-table{background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}:host::ng-deep mat-paginator{background-color:inherit}: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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
2829
2829
|
}], ctorParameters: () => [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
|
|
2830
2830
|
type: Input
|
|
2831
2831
|
}], IndexColumn: [{
|
|
@@ -2873,11 +2873,11 @@ class GenericTableVsComponent extends GenericTableComponent {
|
|
|
2873
2873
|
}
|
|
2874
2874
|
}
|
|
2875
2875
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2876
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n </cdk-virtual-scroll-viewport>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row{background-color:var(--mat-sys-
|
|
2876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n </cdk-virtual-scroll-viewport>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row,:host::ng-deep mat-table.mat-mdc-table{background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}:host::ng-deep mat-paginator{background-color:inherit}: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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i13.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2877
2877
|
}
|
|
2878
2878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, decorators: [{
|
|
2879
2879
|
type: Component,
|
|
2880
|
-
args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n </cdk-virtual-scroll-viewport>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row{background-color:var(--mat-sys-
|
|
2880
|
+
args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n >\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef>\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: var(--mat-sys-surface, white);\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: var(--mat-sys-surface-container-low, whitesmoke);\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n </mat-table>\n\n </cdk-virtual-scroll-viewport>\n\n <div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}:host::ng-deep .mat-mdc-header-row,:host::ng-deep mat-table.mat-mdc-table{background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}:host::ng-deep mat-paginator{background-color:inherit}: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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
2881
2881
|
}] });
|
|
2882
2882
|
|
|
2883
2883
|
// here is how to use it
|
|
@@ -4709,11 +4709,11 @@ class TableContainerComponent {
|
|
|
4709
4709
|
return this.tbGroupBy(data, groupByKeys);
|
|
4710
4710
|
}
|
|
4711
4711
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$4.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4712
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: TableContainerComponent, isStandalone: false, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", isVs: "isVs", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey" }, outputs: { selection$: "selection$", data: "data", paginatorChange: "paginatorChange", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n } @else {\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [compareWithKey]=\"compareWithKey\">\n </tb-generic-table>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n (paginatorChange)=\"paginatorChange.emit()\">\n </tb-generic-table-vs>\n </div>\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-columns-panel *ngIf=\"!tableSettings.hideColumnSettings || !tableSettings.hideSort\"></tb-columns-panel>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon class=\"tb-icon-primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon class=\"tb-icon-primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (currentStateKey$ | async; as currentKey) {\n @if (tableId) {\n <button mat-menu-item (click)=\"saveState()\">\n <mat-icon class=\"tb-icon-primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n }\n @if (tableId) {\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n }\n }\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n @for (key of stateKeys$ | async; track key) {\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon class=\"tb-icon-warn\" (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n }\n </mat-menu>\n <ng-container *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </ng-container>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%;background-color:var(--mat-sys-secondary-container, #cce8e7)}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}:host ::ng-deep .tb-icon-primary,::ng-deep .tb-icon-primary{color:var(--mat-sys-primary, #006a6a)}:host ::ng-deep .tb-icon-warn,::ng-deep .tb-icon-warn{color:var(--mat-sys-error, #ba1a1a)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.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: "component", type: i4$1.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: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["add_opDialog_Class", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "compareWithKey", "disableSort"], outputs: ["paginatorChange", "selection$"] }, { kind: "component", type: GenericTableVsComponent, selector: "tb-generic-table-vs" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: ColumnsPanelComponent, selector: "tb-columns-panel" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: TableContainerComponent, isStandalone: false, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", isVs: "isVs", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey" }, outputs: { selection$: "selection$", data: "data", paginatorChange: "paginatorChange", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n } @else {\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [compareWithKey]=\"compareWithKey\">\n </tb-generic-table>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n (paginatorChange)=\"paginatorChange.emit()\">\n </tb-generic-table-vs>\n </div>\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-columns-panel *ngIf=\"!tableSettings.hideColumnSettings || !tableSettings.hideSort\"></tb-columns-panel>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon class=\"tb-icon-primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon class=\"tb-icon-primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (currentStateKey$ | async; as currentKey) {\n @if (tableId) {\n <button mat-menu-item (click)=\"saveState()\">\n <mat-icon class=\"tb-icon-primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n }\n @if (tableId) {\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n }\n }\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n @for (key of stateKeys$ | async; track key) {\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon class=\"tb-icon-warn\" (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n }\n </mat-menu>\n <ng-container *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </ng-container>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}:host ::ng-deep .tb-icon-primary,::ng-deep .tb-icon-primary{color:var(--mat-sys-primary, #006a6a)}:host ::ng-deep .tb-icon-warn,::ng-deep .tb-icon-warn{color:var(--mat-sys-error, #ba1a1a)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.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: "component", type: i4$1.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: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["add_opDialog_Class", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "compareWithKey", "disableSort"], outputs: ["paginatorChange", "selection$"] }, { kind: "component", type: GenericTableVsComponent, selector: "tb-generic-table-vs" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: ColumnsPanelComponent, selector: "tb-columns-panel" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4713
4713
|
}
|
|
4714
4714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
4715
4715
|
type: Component,
|
|
4716
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: false, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n } @else {\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [compareWithKey]=\"compareWithKey\">\n </tb-generic-table>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n (paginatorChange)=\"paginatorChange.emit()\">\n </tb-generic-table-vs>\n </div>\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-columns-panel *ngIf=\"!tableSettings.hideColumnSettings || !tableSettings.hideSort\"></tb-columns-panel>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon class=\"tb-icon-primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon class=\"tb-icon-primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (currentStateKey$ | async; as currentKey) {\n @if (tableId) {\n <button mat-menu-item (click)=\"saveState()\">\n <mat-icon class=\"tb-icon-primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n }\n @if (tableId) {\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n }\n }\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n @for (key of stateKeys$ | async; track key) {\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon class=\"tb-icon-warn\" (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n }\n </mat-menu>\n <ng-container *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </ng-container>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%;background-color:var(--mat-sys-
|
|
4716
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: false, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n } @else {\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [compareWithKey]=\"compareWithKey\">\n </tb-generic-table>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n (paginatorChange)=\"paginatorChange.emit()\">\n </tb-generic-table-vs>\n </div>\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-columns-panel *ngIf=\"!tableSettings.hideColumnSettings || !tableSettings.hideSort\"></tb-columns-panel>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon class=\"tb-icon-primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon class=\"tb-icon-primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (currentStateKey$ | async; as currentKey) {\n @if (tableId) {\n <button mat-menu-item (click)=\"saveState()\">\n <mat-icon class=\"tb-icon-primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n }\n @if (tableId) {\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n }\n }\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n @for (key of stateKeys$ | async; track key) {\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon class=\"tb-icon-warn\" (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n }\n </mat-menu>\n <ng-container *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </ng-container>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%;background-color:var(--mat-sys-surface-container-highest, #e3e8e8)}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}:host ::ng-deep .tb-icon-primary,::ng-deep .tb-icon-primary{color:var(--mat-sys-primary, #006a6a)}:host ::ng-deep .tb-icon-warn,::ng-deep .tb-icon-warn{color:var(--mat-sys-error, #ba1a1a)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-color, #3f51b5)}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
4717
4717
|
}], ctorParameters: () => [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
|
|
4718
4718
|
type: Inject,
|
|
4719
4719
|
args: [TableBuilderConfigToken]
|