@elderbyte/ngx-starter 12.11.0 → 12.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/elderbyte-ngx-starter.umd.js +23 -6
- package/bundles/elderbyte-ngx-starter.umd.js.map +1 -1
- package/elderbyte-ngx-starter.metadata.json +1 -1
- package/esm2015/lib/components/data-view/grid/elder-grid/elder-grid.component.js +24 -4
- package/esm2015/lib/components/data-view/grid/elder-grid.module.js +3 -2
- package/fesm2015/elderbyte-ngx-starter.js +20 -3
- package/fesm2015/elderbyte-ngx-starter.js.map +1 -1
- package/lib/components/data-view/grid/elder-grid/elder-grid.component.d.ts +9 -4
- package/package.json +1 -1
|
@@ -14635,6 +14635,8 @@
|
|
|
14635
14635
|
_this.idField = 'id';
|
|
14636
14636
|
_this.selectionVisible = true;
|
|
14637
14637
|
_this.interactionMode = 'open';
|
|
14638
|
+
_this.pageSizeOptions = [30, 50, 100, 150, 200];
|
|
14639
|
+
_this.destroy$ = new rxjs.Subject();
|
|
14638
14640
|
return _this;
|
|
14639
14641
|
}
|
|
14640
14642
|
/***************************************************************************
|
|
@@ -14665,7 +14667,15 @@
|
|
|
14665
14667
|
}
|
|
14666
14668
|
}
|
|
14667
14669
|
};
|
|
14670
|
+
ElderGridComponent.prototype.ngAfterViewInit = function () {
|
|
14671
|
+
MatTableDataContextBindingBuilder
|
|
14672
|
+
.start(this.dataContext$)
|
|
14673
|
+
.withPaginator(rxjs.of(this.matPaginator))
|
|
14674
|
+
.bindUntil(this.destroy$);
|
|
14675
|
+
};
|
|
14668
14676
|
ElderGridComponent.prototype.ngOnDestroy = function () {
|
|
14677
|
+
this.destroy$.next();
|
|
14678
|
+
this.destroy$.complete();
|
|
14669
14679
|
};
|
|
14670
14680
|
Object.defineProperty(ElderGridComponent.prototype, "tileTemplate", {
|
|
14671
14681
|
get: function () {
|
|
@@ -14696,10 +14706,15 @@
|
|
|
14696
14706
|
set: function (data) {
|
|
14697
14707
|
this.dataContext$.next(data);
|
|
14698
14708
|
this.total$ = data.total.pipe(operators.map(function (total) { return total ? total + '' : '∞'; }));
|
|
14699
|
-
|
|
14700
|
-
|
|
14701
|
-
|
|
14702
|
-
|
|
14709
|
+
if (isContinuableDataContext(data)) {
|
|
14710
|
+
this.canLoadMore$ = rxjs.combineLatest([data.loading, data.hasMoreData]).pipe(operators.map(function (_a) {
|
|
14711
|
+
var _b = __read(_a, 2), loading = _b[0], hasMoreData = _b[1];
|
|
14712
|
+
return !loading && hasMoreData;
|
|
14713
|
+
}));
|
|
14714
|
+
}
|
|
14715
|
+
else {
|
|
14716
|
+
this.canLoadMore$ = rxjs.of(false);
|
|
14717
|
+
}
|
|
14703
14718
|
},
|
|
14704
14719
|
enumerable: false,
|
|
14705
14720
|
configurable: true
|
|
@@ -14809,7 +14824,7 @@
|
|
|
14809
14824
|
ElderGridComponent.decorators = [
|
|
14810
14825
|
{ type: i0.Component, args: [{
|
|
14811
14826
|
selector: 'elder-grid',
|
|
14812
|
-
template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n <!-- Grid Browser -->\n <div fxLayout=\"column\" fxFlex\n class=\"scroll-fix elder-grid-container\"\n *ngIf=\"dataContext$ | async as data\"\n [class.elder-mat-table-container]=\"!embedded\"\n [class.mat-elevation-z5]=\"float\"\n [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n\n <!-- Toolbar Row -->\n <div *ngIf=\"toolbarVisible\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n </div>\n\n <!-- Toolbar -->\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n </ng-container>\n\n <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n fxFlex=\"none\"\n [availableSorts]=\"availableSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [sort]=\"sorts[0]\"\n (sortChange)=\"updateSort($event)\">\n </elder-single-sort>\n\n </div>\n\n <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n id=\"documents-container\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n infiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"data.loading | async\"\n [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"
|
|
14827
|
+
template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n <!-- Grid Browser -->\n <div fxLayout=\"column\" fxFlex\n class=\"scroll-fix elder-grid-container\"\n *ngIf=\"dataContext$ | async as data\"\n [class.elder-mat-table-container]=\"!embedded\"\n [class.mat-elevation-z5]=\"float\"\n [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n\n <!-- Toolbar Row -->\n <div *ngIf=\"toolbarVisible\"\n fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n </div>\n\n <!-- Toolbar -->\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n </ng-container>\n\n <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n fxFlex=\"none\"\n [availableSorts]=\"availableSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [sort]=\"sorts[0]\"\n (sortChange)=\"updateSort($event)\">\n </elder-single-sort>\n\n </div>\n\n <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n <span class=\"elder-table-hint mat-body-1\" fxFlex fxLayoutAlign=\"center center\"\n *ngIf=\"!dataContext?.isStarted\">\n {{'Datacontext not started' | translate}}\n </span>\n\n <div *ngIf=\"(dataContext?.data | async)?.isStarted\" fxFlex fxLayoutAlign=\"center center\">\n\n <span class=\"elder-table-hint mat-body-1\"\n *ngIf=\"(dataContext?.data | async)?.length === 0 && !(dataContext?.status | async)?.hasError\">\n {{'No data available' | translate}}\n </span>\n\n <div *ngIf=\"(dataContext?.status | async)?.hasError\"\n fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\n <mat-icon color=\"warn\">warning</mat-icon>\n <span class=\"hint mat-body-1\">{{'Error while loading data' | translate}}</span>\n </div>\n\n </div>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n id=\"documents-container\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n infiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"data.loading | async\"\n [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\">\n\n <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n <!-- Tile Cell -->\n <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\n <div class=\"elder-grid-tile-content\">\n <ng-container\n *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n </ng-container>\n\n <!-- Overlay (Selection) -->\n <ng-container *ngIf=\"selectionVisible\">\n <div *ngIf=\"selectionModel.selection | async as selection\"\n class=\"elder-grid-tile-overlay\"\n [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n [class.elder-click-through]=\"!inSelectionMode(selection)\"\n (click)=\"selectionModel.toggle(tile)\"\n >\n <button mat-icon-button type=\"button\"\n (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n class=\"elder-grid-tile-check\">\n <mat-icon\n [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n >\n {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n </mat-icon>\n </button>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n </ng-container>\n\n </div>\n\n </cdk-virtual-scroll-viewport>\n\n\n <mat-progress-bar fxFlex=\"none\"\n [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n </mat-progress-bar>\n\n <!-- Footer -->\n <div class=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n style=\"padding-right: 10px\">\n\n <!-- Continuable -->\n <ng-container *ngIf=\"isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n </span>\n\n <button mat-icon-button type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataSnapshot.loadMore()\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </ng-container>\n\n <!-- Paged -->\n <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n fxFlex=\"none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\">\n </mat-paginator>\n\n <!-- Local Source -->\n <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{(dataSnapshot?.data | async)?.length}}\n </span>\n </ng-container>\n\n </div>\n\n\n </div>\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n <div *ngIf=\"tile\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{tile}}</p>\n </div>\n</ng-template>\n",
|
|
14813
14828
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
14814
14829
|
providers: [
|
|
14815
14830
|
{
|
|
@@ -14838,6 +14853,8 @@
|
|
|
14838
14853
|
idField: [{ type: i0.Input }],
|
|
14839
14854
|
selectionVisible: [{ type: i0.Input }],
|
|
14840
14855
|
interactionMode: [{ type: i0.Input }],
|
|
14856
|
+
pageSizeOptions: [{ type: i0.Input }],
|
|
14857
|
+
matPaginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator,] }],
|
|
14841
14858
|
toolbarTemplateQuery: [{ type: i0.ContentChild, args: [ElderGridToolbarDirective, { read: i0.TemplateRef, static: true },] }],
|
|
14842
14859
|
tileTemplate: [{ type: i0.Input }],
|
|
14843
14860
|
toolbarTemplate: [{ type: i0.Input }],
|
|
@@ -14865,7 +14882,7 @@
|
|
|
14865
14882
|
i1$1.TranslateModule,
|
|
14866
14883
|
ElderDataCommonModule,
|
|
14867
14884
|
ElderInfiniteScrollModule,
|
|
14868
|
-
ElderFormsDirectivesModule
|
|
14885
|
+
ElderFormsDirectivesModule, paginator.MatPaginatorModule
|
|
14869
14886
|
],
|
|
14870
14887
|
declarations: [
|
|
14871
14888
|
ElderGridComponent,
|