bways-grid 0.0.11 → 0.0.13
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/bways-grid.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, HostListener, Output, Input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, inject, ChangeDetectorRef, Injectable, PLATFORM_ID, Inject, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, HostListener, Output, Input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, inject, ChangeDetectorRef, Injectable, PLATFORM_ID, ElementRef, ViewChild, Inject, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
5
5
|
import * as i3$1 from '@angular/cdk/scrolling';
|
|
@@ -170,6 +170,7 @@ class HeaderComponent {
|
|
|
170
170
|
[class.ug-pinned-right]="col.pinned === 'right'"
|
|
171
171
|
[style.left.px]="col._leftOffset"
|
|
172
172
|
[style.right.px]="col._rightOffset"
|
|
173
|
+
[style.flex-grow]="isLast ? 1 : 0"
|
|
173
174
|
>
|
|
174
175
|
<div class="ug-header-checkbox" *ngIf="col.headerCheckboxSelection" (click)="onHeaderCheckboxClick($event)">
|
|
175
176
|
<input type="checkbox" [checked]="isAllSelected" />
|
|
@@ -204,7 +205,7 @@ class HeaderComponent {
|
|
|
204
205
|
</div>
|
|
205
206
|
</div>
|
|
206
207
|
</div>
|
|
207
|
-
`, isInline: true, styles: ["ug-header{display:block;background-color:var(--ug-header-bg);border-bottom:1px solid var(--ug-border-color);position:sticky;top:0;z-index:10;color:var(--ug-header-color);font-weight:var(--ug-header-font-weight)}.ug-header-row{display:inline-flex;min-width:100%;height:48px}.ug-header-cell{display:flex;align-items:center;padding:0 0 0 16px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;background-color:var(--ug-header-bg);transition:background-color .2s;flex-shrink:0;flex-grow:
|
|
208
|
+
`, isInline: true, styles: ["ug-header{display:block;background-color:var(--ug-header-bg);border-bottom:1px solid var(--ug-border-color);position:sticky;top:0;z-index:10;color:var(--ug-header-color);font-weight:var(--ug-header-font-weight);overflow:hidden}.ug-header-row{display:inline-flex;min-width:100%;height:48px}.ug-header-cell{display:flex;align-items:center;padding:0 0 0 16px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;background-color:var(--ug-header-bg);transition:background-color .2s;flex-shrink:0;flex-grow:0}.ug-header-cell:hover{background-color:var(--ug-header-hover-bg)}.ug-pinned-left{position:sticky;z-index:2;border-right:1px solid var(--ug-border-color)}.ug-pinned-right{position:sticky;z-index:2;border-left:1px solid var(--ug-border-color)}.ug-header-checkbox{margin-right:12px;display:flex;align-items:center}.ug-header-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-header-cell-label{flex:1;display:flex;align-items:center;overflow:hidden;white-space:nowrap;height:100%}.ug-header-cell-label.sortable{cursor:pointer}.ug-header-cell-label span{overflow:hidden;text-overflow:ellipsis}.ug-sort-icon{margin-left:6px;display:flex;align-items:center;color:var(--ug-icon-color)}.ug-header-menu-icon,.ug-header-filter-icon{padding:0 4px;cursor:pointer;color:var(--ug-icon-color);display:flex;align-items:center;opacity:0;transition:opacity .2s}.ug-header-menu-icon{padding-right:8px}.ug-header-cell:hover .ug-header-menu-icon,.ug-header-cell:hover .ug-header-filter-icon{opacity:1}.ug-header-divider{width:1px;height:50%;background-color:var(--ug-border-color);margin-right:2px}.ug-resize-handle{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;background-color:transparent;z-index:1}.ug-resize-handle:hover,.ug-resize-handle:active{background-color:var(--ug-primary-color)}.ug-hide-resizer{display:none!important}.cdk-drag-preview{box-sizing:border-box;background-color:var(--ug-header-bg);border:1px solid var(--ug-border-color);box-shadow:0 4px 6px -1px #0000001a;display:flex;align-items:center;padding:0 16px;font-weight:var(--ug-header-font-weight);color:var(--ug-header-color);font-size:var(--ug-font-size);font-family:var(--ug-font-family)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ColumnResizeDirective, selector: "[ugColumnResize]", inputs: ["ugColumnResize"], outputs: ["resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
208
209
|
}
|
|
209
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
210
211
|
type: Component,
|
|
@@ -222,6 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
222
223
|
[class.ug-pinned-right]="col.pinned === 'right'"
|
|
223
224
|
[style.left.px]="col._leftOffset"
|
|
224
225
|
[style.right.px]="col._rightOffset"
|
|
226
|
+
[style.flex-grow]="isLast ? 1 : 0"
|
|
225
227
|
>
|
|
226
228
|
<div class="ug-header-checkbox" *ngIf="col.headerCheckboxSelection" (click)="onHeaderCheckboxClick($event)">
|
|
227
229
|
<input type="checkbox" [checked]="isAllSelected" />
|
|
@@ -256,7 +258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
256
258
|
</div>
|
|
257
259
|
</div>
|
|
258
260
|
</div>
|
|
259
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-header{display:block;background-color:var(--ug-header-bg);border-bottom:1px solid var(--ug-border-color);position:sticky;top:0;z-index:10;color:var(--ug-header-color);font-weight:var(--ug-header-font-weight)}.ug-header-row{display:inline-flex;min-width:100%;height:48px}.ug-header-cell{display:flex;align-items:center;padding:0 0 0 16px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;background-color:var(--ug-header-bg);transition:background-color .2s;flex-shrink:0;flex-grow:
|
|
261
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-header{display:block;background-color:var(--ug-header-bg);border-bottom:1px solid var(--ug-border-color);position:sticky;top:0;z-index:10;color:var(--ug-header-color);font-weight:var(--ug-header-font-weight);overflow:hidden}.ug-header-row{display:inline-flex;min-width:100%;height:48px}.ug-header-cell{display:flex;align-items:center;padding:0 0 0 16px;box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;background-color:var(--ug-header-bg);transition:background-color .2s;flex-shrink:0;flex-grow:0}.ug-header-cell:hover{background-color:var(--ug-header-hover-bg)}.ug-pinned-left{position:sticky;z-index:2;border-right:1px solid var(--ug-border-color)}.ug-pinned-right{position:sticky;z-index:2;border-left:1px solid var(--ug-border-color)}.ug-header-checkbox{margin-right:12px;display:flex;align-items:center}.ug-header-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-header-cell-label{flex:1;display:flex;align-items:center;overflow:hidden;white-space:nowrap;height:100%}.ug-header-cell-label.sortable{cursor:pointer}.ug-header-cell-label span{overflow:hidden;text-overflow:ellipsis}.ug-sort-icon{margin-left:6px;display:flex;align-items:center;color:var(--ug-icon-color)}.ug-header-menu-icon,.ug-header-filter-icon{padding:0 4px;cursor:pointer;color:var(--ug-icon-color);display:flex;align-items:center;opacity:0;transition:opacity .2s}.ug-header-menu-icon{padding-right:8px}.ug-header-cell:hover .ug-header-menu-icon,.ug-header-cell:hover .ug-header-filter-icon{opacity:1}.ug-header-divider{width:1px;height:50%;background-color:var(--ug-border-color);margin-right:2px}.ug-resize-handle{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;background-color:transparent;z-index:1}.ug-resize-handle:hover,.ug-resize-handle:active{background-color:var(--ug-primary-color)}.ug-hide-resizer{display:none!important}.cdk-drag-preview{box-sizing:border-box;background-color:var(--ug-header-bg);border:1px solid var(--ug-border-color);box-shadow:0 4px 6px -1px #0000001a;display:flex;align-items:center;padding:0 16px;font-weight:var(--ug-header-font-weight);color:var(--ug-header-color);font-size:var(--ug-font-size);font-family:var(--ug-font-family)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
260
262
|
}], propDecorators: { columns: [{
|
|
261
263
|
type: Input
|
|
262
264
|
}], sortModel: [{
|
|
@@ -380,7 +382,7 @@ class CellComponent {
|
|
|
380
382
|
</div>
|
|
381
383
|
</ng-template>
|
|
382
384
|
</div>
|
|
383
|
-
`, isInline: true, styles: ["ug-cell{display:flex;align-items:center;padding:0 16px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;flex-grow:
|
|
385
|
+
`, isInline: true, styles: ["ug-cell{display:flex;align-items:center;padding:0 16px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;flex-grow:0;white-space:nowrap;box-sizing:border-box;height:100%}.ug-cell-wrapper{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ug-cell-checkbox{margin-right:12px;display:flex;align-items:center}.ug-cell-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-cell-content{overflow:hidden;text-overflow:ellipsis;width:100%;display:flex;align-items:center;gap:6px}.ug-group-caret{cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;color:var(--ug-text-color);opacity:.7;transition:opacity .2s}.ug-group-caret:hover{opacity:1}.ug-group-count{font-size:.85em;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
384
386
|
}
|
|
385
387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CellComponent, decorators: [{
|
|
386
388
|
type: Component,
|
|
@@ -420,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
420
422
|
</div>
|
|
421
423
|
</ng-template>
|
|
422
424
|
</div>
|
|
423
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-cell{display:flex;align-items:center;padding:0 16px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;flex-grow:
|
|
425
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-cell{display:flex;align-items:center;padding:0 16px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;flex-grow:0;white-space:nowrap;box-sizing:border-box;height:100%}.ug-cell-wrapper{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.ug-cell-checkbox{margin-right:12px;display:flex;align-items:center}.ug-cell-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--ug-primary-color)}.ug-cell-content{overflow:hidden;text-overflow:ellipsis;width:100%;display:flex;align-items:center;gap:6px}.ug-group-caret{cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;color:var(--ug-text-color);opacity:.7;transition:opacity .2s}.ug-group-caret:hover{opacity:1}.ug-group-count{font-size:.85em;opacity:.6}\n"] }]
|
|
424
426
|
}], propDecorators: { column: [{
|
|
425
427
|
type: Input
|
|
426
428
|
}], row: [{
|
|
@@ -461,7 +463,7 @@ class RowComponent {
|
|
|
461
463
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: RowComponent, isStandalone: true, selector: "ug-row", inputs: { columns: "columns", row: "row", rowHeight: "rowHeight", isExpanded: "isExpanded", selectionVersion: "selectionVersion" }, outputs: { groupToggled: "groupToggled" }, host: { properties: { "class.ug-row-selected": "this.isSelected", "class.ug-row-group-footer": "this.isGroupFooter", "style.height.px": "this.height" } }, ngImport: i0, template: `
|
|
462
464
|
<div class="ug-row-cells">
|
|
463
465
|
<ug-cell
|
|
464
|
-
*ngFor="let col of columns; let isFirst = first; trackBy: trackByField"
|
|
466
|
+
*ngFor="let col of columns; let isFirst = first; let isLast = last; trackBy: trackByField"
|
|
465
467
|
[column]="col"
|
|
466
468
|
[row]="row"
|
|
467
469
|
[isSelected]="$any(row)?.selected"
|
|
@@ -475,7 +477,8 @@ class RowComponent {
|
|
|
475
477
|
[class.ug-pinned-left]="col.pinned === 'left'"
|
|
476
478
|
[class.ug-pinned-right]="col.pinned === 'right'"
|
|
477
479
|
[style.left.px]="col._leftOffset"
|
|
478
|
-
[style.right.px]="col._rightOffset"
|
|
480
|
+
[style.right.px]="col._rightOffset"
|
|
481
|
+
[style.flex-grow]="isLast ? 1 : 0">
|
|
479
482
|
</ug-cell>
|
|
480
483
|
</div>
|
|
481
484
|
`, isInline: true, styles: ["ug-row{display:inline-flex;min-width:100%;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-row-bg);box-sizing:border-box;transition:background-color .2s}ug-row:hover{background-color:var(--ug-row-hover-bg)}ug-row.ug-row-selected{background-color:var(--ug-row-selected-bg)}ug-row.ug-row-group-footer{background-color:var(--ug-group-footer-bg, #f8f9fa);font-weight:600;border-top:1px solid var(--ug-border-color);border-bottom:2px solid var(--ug-border-color)}ug-row.ug-row-group-footer:hover{background-color:var(--ug-group-footer-bg, #f8f9fa)}.ug-row-cells{display:flex;width:100%;height:100%}.ug-cell-hide{display:none!important}ug-cell.ug-pinned-left{position:sticky;z-index:1;border-right:1px solid var(--ug-border-color);background-color:inherit}ug-cell.ug-pinned-right{position:sticky;z-index:1;border-left:1px solid var(--ug-border-color);background-color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CellComponent, selector: "ug-cell", inputs: ["column", "row", "isSelected", "isFirstColumn", "groupExpanded"], outputs: ["groupToggleClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -485,7 +488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
485
488
|
args: [{ selector: 'ug-row', standalone: true, imports: [CommonModule, CellComponent], template: `
|
|
486
489
|
<div class="ug-row-cells">
|
|
487
490
|
<ug-cell
|
|
488
|
-
*ngFor="let col of columns; let isFirst = first; trackBy: trackByField"
|
|
491
|
+
*ngFor="let col of columns; let isFirst = first; let isLast = last; trackBy: trackByField"
|
|
489
492
|
[column]="col"
|
|
490
493
|
[row]="row"
|
|
491
494
|
[isSelected]="$any(row)?.selected"
|
|
@@ -499,7 +502,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
499
502
|
[class.ug-pinned-left]="col.pinned === 'left'"
|
|
500
503
|
[class.ug-pinned-right]="col.pinned === 'right'"
|
|
501
504
|
[style.left.px]="col._leftOffset"
|
|
502
|
-
[style.right.px]="col._rightOffset"
|
|
505
|
+
[style.right.px]="col._rightOffset"
|
|
506
|
+
[style.flex-grow]="isLast ? 1 : 0">
|
|
503
507
|
</ug-cell>
|
|
504
508
|
</div>
|
|
505
509
|
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["ug-row{display:inline-flex;min-width:100%;border-bottom:1px solid var(--ug-border-color);background-color:var(--ug-row-bg);box-sizing:border-box;transition:background-color .2s}ug-row:hover{background-color:var(--ug-row-hover-bg)}ug-row.ug-row-selected{background-color:var(--ug-row-selected-bg)}ug-row.ug-row-group-footer{background-color:var(--ug-group-footer-bg, #f8f9fa);font-weight:600;border-top:1px solid var(--ug-border-color);border-bottom:2px solid var(--ug-border-color)}ug-row.ug-row-group-footer:hover{background-color:var(--ug-group-footer-bg, #f8f9fa)}.ug-row-cells{display:flex;width:100%;height:100%}.ug-cell-hide{display:none!important}ug-cell.ug-pinned-left{position:sticky;z-index:1;border-right:1px solid var(--ug-border-color);background-color:inherit}ug-cell.ug-pinned-right{position:sticky;z-index:1;border-left:1px solid var(--ug-border-color);background-color:inherit}\n"] }]
|
|
@@ -2665,6 +2669,8 @@ class UltraGridComponent {
|
|
|
2665
2669
|
flattener;
|
|
2666
2670
|
excelExportService;
|
|
2667
2671
|
_workerInitialized = false;
|
|
2672
|
+
headerElement;
|
|
2673
|
+
viewport;
|
|
2668
2674
|
columns = [];
|
|
2669
2675
|
rowData = [];
|
|
2670
2676
|
serverDataSource;
|
|
@@ -3240,6 +3246,12 @@ class UltraGridComponent {
|
|
|
3240
3246
|
this.updateVisibleColumns();
|
|
3241
3247
|
this.cdr.markForCheck();
|
|
3242
3248
|
}
|
|
3249
|
+
onViewportScroll() {
|
|
3250
|
+
if (this.viewport && this.headerElement) {
|
|
3251
|
+
const scrollLeft = this.viewport.elementRef.nativeElement.scrollLeft;
|
|
3252
|
+
this.headerElement.nativeElement.scrollLeft = scrollLeft;
|
|
3253
|
+
}
|
|
3254
|
+
}
|
|
3243
3255
|
onSideBarColumnsUpdated(cols) {
|
|
3244
3256
|
this.columns = cols;
|
|
3245
3257
|
this.updateVisibleColumns();
|
|
@@ -3659,11 +3671,12 @@ class UltraGridComponent {
|
|
|
3659
3671
|
}
|
|
3660
3672
|
}
|
|
3661
3673
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: UltraGridComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GridFlattenerService }, { token: ExcelExportService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: UltraGridComponent, isStandalone: true, selector: "bways-grid", inputs: { columns: "columns", rowData: "rowData", serverDataSource: "serverDataSource", config: "config", pagination: "pagination", pageSize: "pageSize", groupModel: "groupModel", valuesModel: "valuesModel", pivotColumns: "pivotColumns" }, outputs: { rowClicked: "rowClicked", sortChanged: "sortChanged", selectionChanged: "selectionChanged" }, usesOnChanges: true, ngImport: i0, template: `
|
|
3674
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: UltraGridComponent, isStandalone: true, selector: "bways-grid", inputs: { columns: "columns", rowData: "rowData", serverDataSource: "serverDataSource", config: "config", pagination: "pagination", pageSize: "pageSize", groupModel: "groupModel", valuesModel: "valuesModel", pivotColumns: "pivotColumns" }, outputs: { rowClicked: "rowClicked", sortChanged: "sortChanged", selectionChanged: "selectionChanged" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["headerComponent"], descendants: true, read: ElementRef }, { propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
3663
3675
|
<div class="ug-wrapper" [ngClass]="config.theme || 'ag-theme-alpine'">
|
|
3664
3676
|
|
|
3665
3677
|
<div class="ug-main">
|
|
3666
3678
|
<ug-header
|
|
3679
|
+
#headerComponent
|
|
3667
3680
|
[columns]="visibleColumns"
|
|
3668
3681
|
[sortModel]="sortModel"
|
|
3669
3682
|
[isAllSelected]="isAllSelected"
|
|
@@ -3678,8 +3691,10 @@ class UltraGridComponent {
|
|
|
3678
3691
|
<div class="ug-body">
|
|
3679
3692
|
<ng-container *ngIf="isBrowser; else ssrPlaceholder">
|
|
3680
3693
|
<cdk-virtual-scroll-viewport
|
|
3694
|
+
#viewport
|
|
3681
3695
|
[itemSize]="rowHeight"
|
|
3682
|
-
class="ug-viewport"
|
|
3696
|
+
class="ug-viewport"
|
|
3697
|
+
(scroll)="onViewportScroll()">
|
|
3683
3698
|
|
|
3684
3699
|
<ug-row
|
|
3685
3700
|
*cdkVirtualFor="let row of _internalDataSource || renderedLocalData; let i = index; trackBy: trackByRowId"
|
|
@@ -3799,6 +3814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3799
3814
|
|
|
3800
3815
|
<div class="ug-main">
|
|
3801
3816
|
<ug-header
|
|
3817
|
+
#headerComponent
|
|
3802
3818
|
[columns]="visibleColumns"
|
|
3803
3819
|
[sortModel]="sortModel"
|
|
3804
3820
|
[isAllSelected]="isAllSelected"
|
|
@@ -3813,8 +3829,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3813
3829
|
<div class="ug-body">
|
|
3814
3830
|
<ng-container *ngIf="isBrowser; else ssrPlaceholder">
|
|
3815
3831
|
<cdk-virtual-scroll-viewport
|
|
3832
|
+
#viewport
|
|
3816
3833
|
[itemSize]="rowHeight"
|
|
3817
|
-
class="ug-viewport"
|
|
3834
|
+
class="ug-viewport"
|
|
3835
|
+
(scroll)="onViewportScroll()">
|
|
3818
3836
|
|
|
3819
3837
|
<ug-row
|
|
3820
3838
|
*cdkVirtualFor="let row of _internalDataSource || renderedLocalData; let i = index; trackBy: trackByRowId"
|
|
@@ -3919,7 +3937,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3919
3937
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
3920
3938
|
type: Inject,
|
|
3921
3939
|
args: [PLATFORM_ID]
|
|
3922
|
-
}] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: GridFlattenerService }, { type: ExcelExportService }], propDecorators: {
|
|
3940
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: GridFlattenerService }, { type: ExcelExportService }], propDecorators: { headerElement: [{
|
|
3941
|
+
type: ViewChild,
|
|
3942
|
+
args: ['headerComponent', { read: ElementRef }]
|
|
3943
|
+
}], viewport: [{
|
|
3944
|
+
type: ViewChild,
|
|
3945
|
+
args: ['viewport']
|
|
3946
|
+
}], columns: [{
|
|
3923
3947
|
type: Input
|
|
3924
3948
|
}], rowData: [{
|
|
3925
3949
|
type: Input
|