@elderbyte/ngx-starter 19.2.1 → 19.2.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.
|
@@ -19079,7 +19079,7 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19079
19079
|
* *
|
|
19080
19080
|
**************************************************************************/
|
|
19081
19081
|
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
19082
|
-
this.
|
|
19082
|
+
this._staticColumnCount$ = new BehaviorSubject(4);
|
|
19083
19083
|
this.sizeToColumns = new Map([
|
|
19084
19084
|
[Breakpoints.XSmall, 1],
|
|
19085
19085
|
[Breakpoints.Small, 2],
|
|
@@ -19097,13 +19097,25 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19097
19097
|
this.footerVisible = true;
|
|
19098
19098
|
this.itemHeight = 250;
|
|
19099
19099
|
this.tileOutlined = input(false, { transform: booleanTransformFn });
|
|
19100
|
-
this.responsiveColumnCount = true;
|
|
19100
|
+
this.responsiveColumnCount = input(true, { transform: booleanTransformFn });
|
|
19101
19101
|
this.tiles = viewChildren(ElderTileComponent);
|
|
19102
19102
|
this.availableCompositeSorts = [];
|
|
19103
19103
|
this.sortTranslationPrefix = 'documents.sorts.';
|
|
19104
19104
|
this.hiddenField = null;
|
|
19105
19105
|
this.selectionVisible = true;
|
|
19106
19106
|
this.pageSizeOptions = [30, 50, 100, 150, 200];
|
|
19107
|
+
this.rowClass = computed(() => {
|
|
19108
|
+
return 'cols-' + this.activeColumnCount();
|
|
19109
|
+
});
|
|
19110
|
+
this.activeColumnCount$ = toObservable(this.responsiveColumnCount).pipe(switchMap$1((responsive) => {
|
|
19111
|
+
if (responsive) {
|
|
19112
|
+
return this.responsiveColumn();
|
|
19113
|
+
}
|
|
19114
|
+
else {
|
|
19115
|
+
return this._staticColumnCount$;
|
|
19116
|
+
}
|
|
19117
|
+
}), share());
|
|
19118
|
+
this.activeColumnCount = toSignal(this.activeColumnCount$);
|
|
19107
19119
|
}
|
|
19108
19120
|
/***************************************************************************
|
|
19109
19121
|
* *
|
|
@@ -19112,11 +19124,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19112
19124
|
**************************************************************************/
|
|
19113
19125
|
ngOnInit() {
|
|
19114
19126
|
super.ngOnInit();
|
|
19115
|
-
const columnCount$ = this.responsiveColumnCount ? this.responsiveColumn() : this._columnCount;
|
|
19116
19127
|
this.dataRows$ = combineLatest([
|
|
19117
19128
|
this.dataContext$.pipe(filter((dc) => !!dc), switchMap$1((dc) => dc.data)),
|
|
19118
|
-
|
|
19119
|
-
]).pipe(debounceTime(50), map(([data,
|
|
19129
|
+
this.activeColumnCount$,
|
|
19130
|
+
]).pipe(debounceTime(50), map(([data, activeColumnCount]) => this.buildGridRow(data, activeColumnCount)));
|
|
19120
19131
|
}
|
|
19121
19132
|
ngAfterViewInit() {
|
|
19122
19133
|
MatTableDataContextBindingBuilder.start(this.dataContext$)
|
|
@@ -19147,10 +19158,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19147
19158
|
return this.dataContinuable;
|
|
19148
19159
|
}
|
|
19149
19160
|
set columnCount(count) {
|
|
19150
|
-
this.
|
|
19161
|
+
this._staticColumnCount$.next(count);
|
|
19151
19162
|
}
|
|
19152
19163
|
get columnCount() {
|
|
19153
|
-
return this.
|
|
19164
|
+
return this._staticColumnCount$.getValue();
|
|
19154
19165
|
}
|
|
19155
19166
|
/***************************************************************************
|
|
19156
19167
|
* *
|
|
@@ -19226,9 +19237,9 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19226
19237
|
}
|
|
19227
19238
|
}
|
|
19228
19239
|
return this.sizeToColumns.get(activeSize);
|
|
19229
|
-
}), debounceTime(100), startWith(this.
|
|
19240
|
+
}), debounceTime(100), startWith(this.initialColumnCount()));
|
|
19230
19241
|
}
|
|
19231
|
-
|
|
19242
|
+
initialColumnCount() {
|
|
19232
19243
|
let columnCount = 1;
|
|
19233
19244
|
this.sizeToColumns.forEach((cols, mqAlias) => {
|
|
19234
19245
|
if (this.breakpointObserver.isMatched(mqAlias)) {
|
|
@@ -19242,12 +19253,12 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19242
19253
|
return tiles.find((tile) => tile.value() === item);
|
|
19243
19254
|
}
|
|
19244
19255
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19245
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderGridComponent, isStandalone: true, selector: "elder-grid", inputs: { toolbarVisible: { classPropertyName: "toolbarVisible", publicName: "toolbarVisible", isSignal: false, isRequired: false, transformFunction: null }, footerVisible: { classPropertyName: "footerVisible", publicName: "footerVisible", isSignal: false, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: false, isRequired: false, transformFunction: null }, tileOutlined: { classPropertyName: "tileOutlined", publicName: "tileOutlined", isSignal: true, isRequired: false, transformFunction: null }, responsiveColumnCount: { classPropertyName: "responsiveColumnCount", publicName: "responsiveColumnCount", isSignal:
|
|
19256
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderGridComponent, isStandalone: true, selector: "elder-grid", inputs: { toolbarVisible: { classPropertyName: "toolbarVisible", publicName: "toolbarVisible", isSignal: false, isRequired: false, transformFunction: null }, footerVisible: { classPropertyName: "footerVisible", publicName: "footerVisible", isSignal: false, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: false, isRequired: false, transformFunction: null }, tileOutlined: { classPropertyName: "tileOutlined", publicName: "tileOutlined", isSignal: true, isRequired: false, transformFunction: null }, responsiveColumnCount: { classPropertyName: "responsiveColumnCount", publicName: "responsiveColumnCount", isSignal: true, isRequired: false, transformFunction: null }, availableSorts: { classPropertyName: "availableSorts", publicName: "availableSorts", isSignal: false, isRequired: false, transformFunction: null }, sortTranslationPrefix: { classPropertyName: "sortTranslationPrefix", publicName: "sortTranslationPrefix", isSignal: false, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: false, isRequired: false, transformFunction: null }, selectionVisible: { classPropertyName: "selectionVisible", publicName: "selectionVisible", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, tileTemplate: { classPropertyName: "tileTemplate", publicName: "tileTemplate", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, columnCount: { classPropertyName: "columnCount", publicName: "columnCount", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
|
|
19246
19257
|
{
|
|
19247
19258
|
provide: ELDER_DATA_VIEW,
|
|
19248
19259
|
useExisting: forwardRef(() => ElderGridComponent),
|
|
19249
19260
|
},
|
|
19250
|
-
], 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: "tiles", predicate: ElderTileComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n @if (dc(); as dc) {\n <!-- Grid Browser -->\n <div\n class=\"layout-col full elder-grid-container\"\n [elderDataContextSelection]=\"dc\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- Toolbar Row -->\n @if (toolbarVisible) {\n <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n @if (selectionVisible) {\n <div class=\"layout-col flex-none px-sm\">\n <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n </div>\n }\n\n <!-- Toolbar -->\n @if (toolbarTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n <elder-composite-sort\n class=\"flex-none\"\n [availableSorts]=\"availableCompositeSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [elderCompositeSortDc]=\"dc\"\n >\n </elder-composite-sort>\n }\n </div>\n\n <mat-divider></mat-divider>\n }\n\n <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"layout-col flex elder-grid-browser\"\n id=\"{{ scrollContainerId }}\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n elderInfiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"dcStatus()?.loading\"\n [containerId]=\"scrollContainerId\"\n [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"\n let gridRow of dataRows$;\n trackBy: TrackGridRowByIdFn;\n templateCacheSize: 50\n \"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\"\n >\n @for (tile of gridRow.cells; track getId(tile)) {\n <!-- Tile Cell -->\n @if (isTileVisible(tile)) {\n <elder-tile\n class=\"elder-grid-tile\"\n [value]=\"tile\"\n [selectionEnabled]=\"selectionVisible\"\n [selectionModel]=\"selectionModel\"\n [outlined]=\"tileOutlined()\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tileTemplate || simpleTileTemplate;\n context: { $implicit: tile }\n \"\n ></ng-container>\n </elder-tile>\n } @else {\n <div class=\"elder-grid-tile-hidden\"></div>\n }\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n <mat-progress-bar\n class=\"flex-none\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <!-- Footer -->\n @if (footerVisible) {\n <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n <!-- Continuable -->\n @if (isContinuable) {\n <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }} / {{ total() }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!canLoadMore()\"\n (click)=\"dataSnapshot.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n }\n\n <!-- Paged -->\n @if (isActivePaged) {\n @if (currentPage(); as page) {\n <mat-paginator\n class=\"flex-none\"\n [length]=\"total()\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Local Source -->\n @if (!isActivePaged && !isContinuable) {\n <span class=\"mat-caption noselect pr-md\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }}\n </span>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n @if (tile) {\n <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{ tile }}</p>\n </div>\n }\n</ng-template>\n", styles: [".elder-grid-tile{
|
|
19261
|
+
], 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: "tiles", predicate: ElderTileComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n @if (dc(); as dc) {\n <!-- Grid Browser -->\n <div\n class=\"layout-col full elder-grid-container\"\n [elderDataContextSelection]=\"dc\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- Toolbar Row -->\n @if (toolbarVisible) {\n <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n @if (selectionVisible) {\n <div class=\"layout-col flex-none px-sm\">\n <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n </div>\n }\n\n <!-- Toolbar -->\n @if (toolbarTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n <elder-composite-sort\n class=\"flex-none\"\n [availableSorts]=\"availableCompositeSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [elderCompositeSortDc]=\"dc\"\n >\n </elder-composite-sort>\n }\n </div>\n\n <mat-divider></mat-divider>\n }\n\n <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"layout-col flex elder-grid-browser\"\n id=\"{{ scrollContainerId }}\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n elderInfiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"dcStatus()?.loading\"\n [containerId]=\"scrollContainerId\"\n [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"\n let gridRow of dataRows$;\n trackBy: TrackGridRowByIdFn;\n templateCacheSize: 50\n \"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\"\n [ngClass]=\"rowClass()\"\n >\n @for (tile of gridRow.cells; track getId(tile)) {\n <!-- Tile Cell -->\n @if (isTileVisible(tile)) {\n <elder-tile\n class=\"elder-grid-tile\"\n [value]=\"tile\"\n [selectionEnabled]=\"selectionVisible\"\n [selectionModel]=\"selectionModel\"\n [outlined]=\"tileOutlined()\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tileTemplate || simpleTileTemplate;\n context: { $implicit: tile }\n \"\n ></ng-container>\n </elder-tile>\n } @else {\n <div class=\"elder-grid-tile-hidden\"></div>\n }\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n <mat-progress-bar\n class=\"flex-none\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <!-- Footer -->\n @if (footerVisible) {\n <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n <!-- Continuable -->\n @if (isContinuable) {\n <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }} / {{ total() }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!canLoadMore()\"\n (click)=\"dataSnapshot.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n }\n\n <!-- Paged -->\n @if (isActivePaged) {\n @if (currentPage(); as page) {\n <mat-paginator\n class=\"flex-none\"\n [length]=\"total()\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Local Source -->\n @if (!isActivePaged && !isContinuable) {\n <span class=\"mat-caption noselect pr-md\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }}\n </span>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n @if (tile) {\n <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{ tile }}</p>\n </div>\n }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;padding:8px 16px;column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-row.cols-1{grid-template-columns:repeat(1,1fr)}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,1fr)}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,1fr)}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,1fr)}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,1fr)}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,1fr)}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,1fr)}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"], dependencies: [{ kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderCompositeSortComponent, selector: "elder-composite-sort", inputs: ["availableSorts", "sorts", "translationPrefix"], outputs: ["sortsChange"] }, { kind: "directive", type: ElderCompositeSortDcDirective, selector: "[elderCompositeSortDc]", inputs: ["elderCompositeSortDc"] }, { kind: "component", type: ElderTileComponent, selector: "elder-tile", inputs: ["value", "selectionEnabled", "selectionModel", "interactionMode", "outlined"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19251
19262
|
}
|
|
19252
19263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderGridComponent, decorators: [{
|
|
19253
19264
|
type: Component,
|
|
@@ -19273,7 +19284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
19273
19284
|
ElderCompositeSortComponent,
|
|
19274
19285
|
ElderCompositeSortDcDirective,
|
|
19275
19286
|
ElderTileComponent,
|
|
19276
|
-
|
|
19287
|
+
NgClass,
|
|
19288
|
+
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n @if (dc(); as dc) {\n <!-- Grid Browser -->\n <div\n class=\"layout-col full elder-grid-container\"\n [elderDataContextSelection]=\"dc\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- Toolbar Row -->\n @if (toolbarVisible) {\n <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n @if (selectionVisible) {\n <div class=\"layout-col flex-none px-sm\">\n <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n </div>\n }\n\n <!-- Toolbar -->\n @if (toolbarTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n <elder-composite-sort\n class=\"flex-none\"\n [availableSorts]=\"availableCompositeSorts\"\n [translationPrefix]=\"sortTranslationPrefix\"\n [elderCompositeSortDc]=\"dc\"\n >\n </elder-composite-sort>\n }\n </div>\n\n <mat-divider></mat-divider>\n }\n\n <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n </elder-data-context-state-indicator>\n\n <!-- [cdkDropListSortingDisabled]=\"true\" -->\n <!-- cdkDropList -->\n <cdk-virtual-scroll-viewport\n class=\"layout-col flex elder-grid-browser\"\n id=\"{{ scrollContainerId }}\"\n [itemSize]=\"itemHeight\"\n [minBufferPx]=\"itemHeight * 2\"\n [maxBufferPx]=\"itemHeight * 3\"\n #virtualScrollViewPort\n elderInfiniteScroll\n [eventThrottle]=\"200\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"dcStatus()?.loading\"\n [containerId]=\"scrollContainerId\"\n [listenToHost]=\"false\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <!-- (scrolling)=\"onScrolling($event)\" -->\n\n <div\n *cdkVirtualFor=\"\n let gridRow of dataRows$;\n trackBy: TrackGridRowByIdFn;\n templateCacheSize: 50\n \"\n class=\"elder-grid-tile-row\"\n [style.height]=\"itemHeight + 'px'\"\n [ngClass]=\"rowClass()\"\n >\n @for (tile of gridRow.cells; track getId(tile)) {\n <!-- Tile Cell -->\n @if (isTileVisible(tile)) {\n <elder-tile\n class=\"elder-grid-tile\"\n [value]=\"tile\"\n [selectionEnabled]=\"selectionVisible\"\n [selectionModel]=\"selectionModel\"\n [outlined]=\"tileOutlined()\"\n (click)=\"onItemClick(tile)\"\n (dblclick)=\"onItemDoubleClick(tile)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n tileTemplate || simpleTileTemplate;\n context: { $implicit: tile }\n \"\n ></ng-container>\n </elder-tile>\n } @else {\n <div class=\"elder-grid-tile-hidden\"></div>\n }\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n <mat-progress-bar\n class=\"flex-none\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <!-- Footer -->\n @if (footerVisible) {\n <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n <!-- Continuable -->\n @if (isContinuable) {\n <span class=\"mat-caption noselect\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }} / {{ total() }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!canLoadMore()\"\n (click)=\"dataSnapshot.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n }\n\n <!-- Paged -->\n @if (isActivePaged) {\n @if (currentPage(); as page) {\n <mat-paginator\n class=\"flex-none\"\n [length]=\"total()\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Local Source -->\n @if (!isActivePaged && !isContinuable) {\n <span class=\"mat-caption noselect pr-md\" style=\"color: var(--md-sys-color-outline)\">\n {{ viewData()?.length }}\n </span>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n @if (tile) {\n <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n <p class=\"noselect\">Tile: {{ tile }}</p>\n </div>\n }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;padding:8px 16px;column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-row.cols-1{grid-template-columns:repeat(1,1fr)}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,1fr)}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,1fr)}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,1fr)}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,1fr)}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,1fr)}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,1fr)}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"] }]
|
|
19277
19289
|
}], ctorParameters: () => [{ type: SelectionModel, decorators: [{
|
|
19278
19290
|
type: Optional
|
|
19279
19291
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -19289,8 +19301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
19289
19301
|
type: Input
|
|
19290
19302
|
}], itemHeight: [{
|
|
19291
19303
|
type: Input
|
|
19292
|
-
}], responsiveColumnCount: [{
|
|
19293
|
-
type: Input
|
|
19294
19304
|
}], virtualScrollViewPort: [{
|
|
19295
19305
|
type: ViewChild,
|
|
19296
19306
|
args: ['virtualScrollViewPort', { static: true }]
|