@elderbyte/ngx-starter 14.5.1 → 14.5.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.
- package/esm2020/lib/components/data-view/grid/elder-grid/elder-grid.component.mjs +2 -2
- package/fesm2015/elderbyte-ngx-starter.mjs +2 -2
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +2 -2
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss +10 -2
|
@@ -234,7 +234,7 @@ ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
234
234
|
provide: ELDER_DATA_VIEW,
|
|
235
235
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
236
236
|
}
|
|
237
|
-
], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:2px;margin:0 -2px}.elder-grid-tile-hidden{flex:0 1 100%;margin:2px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i10.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i10.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: i12.ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: i13.DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: i14.DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: i15.ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: i16.ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i17.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
237
|
+
], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i10.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i10.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: i12.ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: i13.DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: i14.DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: i15.ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: i16.ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i17.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
238
238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderGridComponent, decorators: [{
|
|
239
239
|
type: Component,
|
|
240
240
|
args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -242,7 +242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
242
242
|
provide: ELDER_DATA_VIEW,
|
|
243
243
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
244
244
|
}
|
|
245
|
-
], 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:
|
|
245
|
+
], 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"] }]
|
|
246
246
|
}], ctorParameters: function () { return [{ type: i1.SelectionModel, decorators: [{
|
|
247
247
|
type: Optional
|
|
248
248
|
}] }, { type: i2.ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -15535,7 +15535,7 @@ ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
15535
15535
|
provide: ELDER_DATA_VIEW,
|
|
15536
15536
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
15537
15537
|
}
|
|
15538
|
-
], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:2px;margin:0 -2px}.elder-grid-tile-hidden{flex:0 1 100%;margin:2px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15538
|
+
], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15539
15539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderGridComponent, decorators: [{
|
|
15540
15540
|
type: Component,
|
|
15541
15541
|
args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -15543,7 +15543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
15543
15543
|
provide: ELDER_DATA_VIEW,
|
|
15544
15544
|
useExisting: forwardRef(() => ElderGridComponent)
|
|
15545
15545
|
}
|
|
15546
|
-
], 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:
|
|
15546
|
+
], 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 <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n </elder-data-context-state-indicator>\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 (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\">\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]=\"true\"\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", styles: [":host{min-width:0;min-height:0}.scroll-fix{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"] }]
|
|
15547
15547
|
}], ctorParameters: function () {
|
|
15548
15548
|
return [{ type: SelectionModel, decorators: [{
|
|
15549
15549
|
type: Optional
|