@saydar/table-builder 1.0.2-beta.1 → 1.0.2-beta.2
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.
|
@@ -2744,11 +2744,11 @@ class GenericTableComponent {
|
|
|
2744
2744
|
this.selection.select(...this.dataSource.data);
|
|
2745
2745
|
}
|
|
2746
2746
|
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 }); }
|
|
2747
|
-
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\" style=\"background-color: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.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: i8$1.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 }); }
|
|
2747
|
+
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: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.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: i8$1.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 }); }
|
|
2748
2748
|
}
|
|
2749
2749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
2750
2750
|
type: Component,
|
|
2751
|
-
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\" style=\"background-color: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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"] }]
|
|
2751
|
+
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: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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"] }]
|
|
2752
2752
|
}], ctorParameters: () => [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
|
|
2753
2753
|
type: Input
|
|
2754
2754
|
}], IndexColumn: [{
|
|
@@ -2796,11 +2796,11 @@ class GenericTableVsComponent extends GenericTableComponent {
|
|
|
2796
2796
|
}
|
|
2797
2797
|
}
|
|
2798
2798
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2799
|
-
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\" style=\"background-color: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.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: i8$1.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 }); }
|
|
2799
|
+
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: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$1.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: i8$1.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 }); }
|
|
2800
2800
|
}
|
|
2801
2801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, decorators: [{
|
|
2802
2802
|
type: Component,
|
|
2803
|
-
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\" style=\"background-color: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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"] }]
|
|
2803
|
+
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: white;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: 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)}.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-menu-container-color, white)}: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"] }]
|
|
2804
2804
|
}] });
|
|
2805
2805
|
|
|
2806
2806
|
// here is how to use it
|