@elderbyte/ngx-starter 19.2.2 → 19.2.3

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.
@@ -19004,11 +19004,11 @@ class ElderTileComponent {
19004
19004
  }
19005
19005
  }
19006
19006
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderTileComponent, deps: [{ token: ActivationModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
19007
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderTileComponent, isStandalone: true, selector: "elder-tile", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null }, interactionMode: { classPropertyName: "interactionMode", publicName: "interactionMode", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" } }, viewQueries: [{ propertyName: "elderTileRef", first: true, predicate: ["elderTile"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (selection(); as selection) {\n <div\n class=\"elder-selection-overlay elder-click-through\"\n [class.elder-selection-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-selection-overlay-visible]=\"inSelectionMode(selection)\"\n >\n <button\n mat-icon-button\n type=\"button\"\n (click)=\"selectionModel().toggle(value())\"\n elderStopEventPropagation\n class=\"elder-tile-check\"\n >\n @let isSelected = selectionModel().isSelected(value());\n <mat-icon [class.elder-selected]=\"isSelected\">\n {{ isSelected ? 'check_circle' : 'radio_button_unchecked' }}\n </mat-icon>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".elder-tile{border-radius:var(--elder-pane-border-radius);background-color:var(--md-sys-color-surface-container-low);text-align:left;overflow:hidden;transition:box-shadow .2s cubic-bezier(0,0,.2,1),border .25s linear}.elder-tile:hover{border-color:var(--md-sys-color-primary)}.elder-tile-content{position:relative;width:100%;height:100%;border-radius:var(--elder-pane-border-radius)}.elder-tile-content:hover .elder-tile-overlay{opacity:1;background-color:#ffffff14}.elder-tile:active{z-index:100;box-shadow:var(--elder-box-shadow-default)}.elder-selection-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-tile-overlay{position:absolute;inset:0}.elder-selection-overlay-visible{opacity:1;tab-index:0}.elder-selection-overlay-hidden{opacity:0;tab-index:-1}.elder-click-through{pointer-events:none}.elder-tile-check{pointer-events:auto}.elder-tile-check mat-icon{color:var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface);border-radius:12px}.elder-tile-check mat-icon.elder-selected{color:var(--md-sys-color-tertiary)}.elder-tile-check:hover mat-icon{color:var(--md-sys-color-primary)}.elder-tile:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated{outline:2px dashed var(--elder-color-highlight-focus)}\n"], dependencies: [{ kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
19007
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ElderTileComponent, isStandalone: true, selector: "elder-tile", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null }, interactionMode: { classPropertyName: "interactionMode", publicName: "interactionMode", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" } }, viewQueries: [{ propertyName: "elderTileRef", first: true, predicate: ["elderTile"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (selection(); as selection) {\n <div\n class=\"elder-selection-overlay elder-click-through\"\n [class.elder-selection-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-selection-overlay-visible]=\"inSelectionMode(selection)\"\n >\n <button\n mat-icon-button\n type=\"button\"\n (click)=\"selectionModel().toggle(value())\"\n elderStopEventPropagation\n class=\"elder-tile-check\"\n >\n @let isSelected = selectionModel().isSelected(value());\n <mat-icon [class.elder-selected]=\"isSelected\">\n {{ isSelected ? 'check_circle' : 'radio_button_unchecked' }}\n </mat-icon>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".elder-tile{border-radius:var(--elder-pane-border-radius);background-color:var(--md-sys-color-surface-container-low);text-align:left;overflow:hidden;transition:box-shadow .2s cubic-bezier(0,0,.2,1),border .25s linear}.elder-tile:hover{border-color:var(--md-sys-color-primary)}.elder-tile-content{position:relative;width:100%;height:100%;border-radius:var(--elder-pane-border-radius)}.elder-tile-content:hover .elder-selection-overlay{opacity:1;background-color:#ffffff14}.elder-tile:active{z-index:100;box-shadow:var(--elder-box-shadow-default)}.elder-selection-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-tile-overlay{position:absolute;inset:0}.elder-selection-overlay-visible{opacity:1;tab-index:0}.elder-selection-overlay-hidden{opacity:0;tab-index:-1}.elder-click-through{pointer-events:none}.elder-tile-check{pointer-events:auto}.elder-tile-check mat-icon{color:var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface);border-radius:12px}.elder-tile-check mat-icon.elder-selected{color:var(--md-sys-color-tertiary)}.elder-tile-check:hover mat-icon{color:var(--md-sys-color-primary)}.elder-tile:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated{outline:2px dashed var(--elder-color-highlight-focus)}\n"], dependencies: [{ kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
19008
19008
  }
19009
19009
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderTileComponent, decorators: [{
19010
19010
  type: Component,
19011
- args: [{ selector: 'elder-tile', imports: [ElderStopEventPropagationDirective, MatIcon, MatIconButton], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (selection(); as selection) {\n <div\n class=\"elder-selection-overlay elder-click-through\"\n [class.elder-selection-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-selection-overlay-visible]=\"inSelectionMode(selection)\"\n >\n <button\n mat-icon-button\n type=\"button\"\n (click)=\"selectionModel().toggle(value())\"\n elderStopEventPropagation\n class=\"elder-tile-check\"\n >\n @let isSelected = selectionModel().isSelected(value());\n <mat-icon [class.elder-selected]=\"isSelected\">\n {{ isSelected ? 'check_circle' : 'radio_button_unchecked' }}\n </mat-icon>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".elder-tile{border-radius:var(--elder-pane-border-radius);background-color:var(--md-sys-color-surface-container-low);text-align:left;overflow:hidden;transition:box-shadow .2s cubic-bezier(0,0,.2,1),border .25s linear}.elder-tile:hover{border-color:var(--md-sys-color-primary)}.elder-tile-content{position:relative;width:100%;height:100%;border-radius:var(--elder-pane-border-radius)}.elder-tile-content:hover .elder-tile-overlay{opacity:1;background-color:#ffffff14}.elder-tile:active{z-index:100;box-shadow:var(--elder-box-shadow-default)}.elder-selection-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-tile-overlay{position:absolute;inset:0}.elder-selection-overlay-visible{opacity:1;tab-index:0}.elder-selection-overlay-hidden{opacity:0;tab-index:-1}.elder-click-through{pointer-events:none}.elder-tile-check{pointer-events:auto}.elder-tile-check mat-icon{color:var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface);border-radius:12px}.elder-tile-check mat-icon.elder-selected{color:var(--md-sys-color-tertiary)}.elder-tile-check:hover mat-icon{color:var(--md-sys-color-primary)}.elder-tile:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated{outline:2px dashed var(--elder-color-highlight-focus)}\n"] }]
19011
+ args: [{ selector: 'elder-tile', imports: [ElderStopEventPropagationDirective, MatIcon, MatIconButton], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div\n #elderTile\n class=\"elder-tile full\"\n [class.outlined]=\"outlined()\"\n [class.activated]=\"activated()\"\n [tabindex]=\"focusable ? -1 : undefined\"\n>\n <div class=\"elder-tile-content\">\n <ng-content></ng-content>\n <!-- Overlay (Selection) -->\n\n <div class=\"elder-tile-overlay elder-click-through\"></div>\n\n @if (selectionEnabled()) {\n @if (selection(); as selection) {\n <div\n class=\"elder-selection-overlay elder-click-through\"\n [class.elder-selection-overlay-hidden]=\"!inSelectionMode(selection)\"\n [class.elder-selection-overlay-visible]=\"inSelectionMode(selection)\"\n >\n <button\n mat-icon-button\n type=\"button\"\n (click)=\"selectionModel().toggle(value())\"\n elderStopEventPropagation\n class=\"elder-tile-check\"\n >\n @let isSelected = selectionModel().isSelected(value());\n <mat-icon [class.elder-selected]=\"isSelected\">\n {{ isSelected ? 'check_circle' : 'radio_button_unchecked' }}\n </mat-icon>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".elder-tile{border-radius:var(--elder-pane-border-radius);background-color:var(--md-sys-color-surface-container-low);text-align:left;overflow:hidden;transition:box-shadow .2s cubic-bezier(0,0,.2,1),border .25s linear}.elder-tile:hover{border-color:var(--md-sys-color-primary)}.elder-tile-content{position:relative;width:100%;height:100%;border-radius:var(--elder-pane-border-radius)}.elder-tile-content:hover .elder-selection-overlay{opacity:1;background-color:#ffffff14}.elder-tile:active{z-index:100;box-shadow:var(--elder-box-shadow-default)}.elder-selection-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-tile-overlay{position:absolute;inset:0}.elder-selection-overlay-visible{opacity:1;tab-index:0}.elder-selection-overlay-hidden{opacity:0;tab-index:-1}.elder-click-through{pointer-events:none}.elder-tile-check{pointer-events:auto}.elder-tile-check mat-icon{color:var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface);border-radius:12px}.elder-tile-check mat-icon.elder-selected{color:var(--md-sys-color-tertiary)}.elder-tile-check:hover mat-icon{color:var(--md-sys-color-primary)}.elder-tile:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated:focus{outline:2px solid var(--elder-color-highlight-focus)}.elder-tile.activated{outline:2px dashed var(--elder-color-highlight-focus)}\n"] }]
19012
19012
  }], ctorParameters: () => [{ type: ActivationModel, decorators: [{
19013
19013
  type: Optional
19014
19014
  }] }], propDecorators: { onFocus: [{
@@ -19107,14 +19107,15 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
19107
19107
  this.rowClass = computed(() => {
19108
19108
  return 'cols-' + this.activeColumnCount();
19109
19109
  });
19110
+ const responsiveColumn$ = this.responsiveColumn().pipe(share());
19110
19111
  this.activeColumnCount$ = toObservable(this.responsiveColumnCount).pipe(switchMap$1((responsive) => {
19111
19112
  if (responsive) {
19112
- return this.responsiveColumn();
19113
+ return responsiveColumn$;
19113
19114
  }
19114
19115
  else {
19115
19116
  return this._staticColumnCount$;
19116
19117
  }
19117
- }), share());
19118
+ }));
19118
19119
  this.activeColumnCount = toSignal(this.activeColumnCount$);
19119
19120
  }
19120
19121
  /***************************************************************************
@@ -19258,7 +19259,7 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
19258
19259
  provide: ELDER_DATA_VIEW,
19259
19260
  useExisting: forwardRef(() => ElderGridComponent),
19260
19261
  },
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 }); }
19262
+ ], 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,minmax(0,1fr))}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,minmax(0,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 }); }
19262
19263
  }
19263
19264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderGridComponent, decorators: [{
19264
19265
  type: Component,
@@ -19285,7 +19286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
19285
19286
  ElderCompositeSortDcDirective,
19286
19287
  ElderTileComponent,
19287
19288
  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"] }]
19289
+ ], 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,minmax(0,1fr))}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,minmax(0,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"] }]
19289
19290
  }], ctorParameters: () => [{ type: SelectionModel, decorators: [{
19290
19291
  type: Optional
19291
19292
  }] }, { type: ElderDataViewOptionsProvider, decorators: [{