@elderbyte/ngx-starter 19.2.1 → 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.
- package/fesm2022/elderbyte-ngx-starter.mjs +27 -16
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/data-view/grid/elder-grid/elder-grid.component.d.ts +7 -4
- package/package.json +1 -1
- package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss +36 -6
- package/src/lib/components/data-view/grid/elder-tile/elder-tile.component.scss +1 -1
|
@@ -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-
|
|
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-
|
|
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: [{
|
|
@@ -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,26 @@ 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
|
+
const responsiveColumn$ = this.responsiveColumn().pipe(share());
|
|
19111
|
+
this.activeColumnCount$ = toObservable(this.responsiveColumnCount).pipe(switchMap$1((responsive) => {
|
|
19112
|
+
if (responsive) {
|
|
19113
|
+
return responsiveColumn$;
|
|
19114
|
+
}
|
|
19115
|
+
else {
|
|
19116
|
+
return this._staticColumnCount$;
|
|
19117
|
+
}
|
|
19118
|
+
}));
|
|
19119
|
+
this.activeColumnCount = toSignal(this.activeColumnCount$);
|
|
19107
19120
|
}
|
|
19108
19121
|
/***************************************************************************
|
|
19109
19122
|
* *
|
|
@@ -19112,11 +19125,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19112
19125
|
**************************************************************************/
|
|
19113
19126
|
ngOnInit() {
|
|
19114
19127
|
super.ngOnInit();
|
|
19115
|
-
const columnCount$ = this.responsiveColumnCount ? this.responsiveColumn() : this._columnCount;
|
|
19116
19128
|
this.dataRows$ = combineLatest([
|
|
19117
19129
|
this.dataContext$.pipe(filter((dc) => !!dc), switchMap$1((dc) => dc.data)),
|
|
19118
|
-
|
|
19119
|
-
]).pipe(debounceTime(50), map(([data,
|
|
19130
|
+
this.activeColumnCount$,
|
|
19131
|
+
]).pipe(debounceTime(50), map(([data, activeColumnCount]) => this.buildGridRow(data, activeColumnCount)));
|
|
19120
19132
|
}
|
|
19121
19133
|
ngAfterViewInit() {
|
|
19122
19134
|
MatTableDataContextBindingBuilder.start(this.dataContext$)
|
|
@@ -19147,10 +19159,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19147
19159
|
return this.dataContinuable;
|
|
19148
19160
|
}
|
|
19149
19161
|
set columnCount(count) {
|
|
19150
|
-
this.
|
|
19162
|
+
this._staticColumnCount$.next(count);
|
|
19151
19163
|
}
|
|
19152
19164
|
get columnCount() {
|
|
19153
|
-
return this.
|
|
19165
|
+
return this._staticColumnCount$.getValue();
|
|
19154
19166
|
}
|
|
19155
19167
|
/***************************************************************************
|
|
19156
19168
|
* *
|
|
@@ -19226,9 +19238,9 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19226
19238
|
}
|
|
19227
19239
|
}
|
|
19228
19240
|
return this.sizeToColumns.get(activeSize);
|
|
19229
|
-
}), debounceTime(100), startWith(this.
|
|
19241
|
+
}), debounceTime(100), startWith(this.initialColumnCount()));
|
|
19230
19242
|
}
|
|
19231
|
-
|
|
19243
|
+
initialColumnCount() {
|
|
19232
19244
|
let columnCount = 1;
|
|
19233
19245
|
this.sizeToColumns.forEach((cols, mqAlias) => {
|
|
19234
19246
|
if (this.breakpointObserver.isMatched(mqAlias)) {
|
|
@@ -19242,12 +19254,12 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
|
|
|
19242
19254
|
return tiles.find((tile) => tile.value() === item);
|
|
19243
19255
|
}
|
|
19244
19256
|
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:
|
|
19257
|
+
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
19258
|
{
|
|
19247
19259
|
provide: ELDER_DATA_VIEW,
|
|
19248
19260
|
useExisting: forwardRef(() => ElderGridComponent),
|
|
19249
19261
|
},
|
|
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{flex:0 1 100%;flex-grow:1;margin:0 8px;width:100%;height:100%;cursor:pointer}.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-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"] }], 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 }); }
|
|
19251
19263
|
}
|
|
19252
19264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ElderGridComponent, decorators: [{
|
|
19253
19265
|
type: Component,
|
|
@@ -19273,7 +19285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
19273
19285
|
ElderCompositeSortComponent,
|
|
19274
19286
|
ElderCompositeSortDcDirective,
|
|
19275
19287
|
ElderTileComponent,
|
|
19276
|
-
|
|
19288
|
+
NgClass,
|
|
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"] }]
|
|
19277
19290
|
}], ctorParameters: () => [{ type: SelectionModel, decorators: [{
|
|
19278
19291
|
type: Optional
|
|
19279
19292
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -19289,8 +19302,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
19289
19302
|
type: Input
|
|
19290
19303
|
}], itemHeight: [{
|
|
19291
19304
|
type: Input
|
|
19292
|
-
}], responsiveColumnCount: [{
|
|
19293
|
-
type: Input
|
|
19294
19305
|
}], virtualScrollViewPort: [{
|
|
19295
19306
|
type: ViewChild,
|
|
19296
19307
|
args: ['virtualScrollViewPort', { static: true }]
|