bways-grid 0.0.12 → 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';
|
|
@@ -205,7 +205,7 @@ class HeaderComponent {
|
|
|
205
205
|
</div>
|
|
206
206
|
</div>
|
|
207
207
|
</div>
|
|
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)}.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
|
+
`, 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 });
|
|
209
209
|
}
|
|
210
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
211
211
|
type: Component,
|
|
@@ -258,7 +258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
258
258
|
</div>
|
|
259
259
|
</div>
|
|
260
260
|
</div>
|
|
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)}.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"] }]
|
|
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"] }]
|
|
262
262
|
}], propDecorators: { columns: [{
|
|
263
263
|
type: Input
|
|
264
264
|
}], sortModel: [{
|
|
@@ -2669,6 +2669,8 @@ class UltraGridComponent {
|
|
|
2669
2669
|
flattener;
|
|
2670
2670
|
excelExportService;
|
|
2671
2671
|
_workerInitialized = false;
|
|
2672
|
+
headerElement;
|
|
2673
|
+
viewport;
|
|
2672
2674
|
columns = [];
|
|
2673
2675
|
rowData = [];
|
|
2674
2676
|
serverDataSource;
|
|
@@ -3244,6 +3246,12 @@ class UltraGridComponent {
|
|
|
3244
3246
|
this.updateVisibleColumns();
|
|
3245
3247
|
this.cdr.markForCheck();
|
|
3246
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
|
+
}
|
|
3247
3255
|
onSideBarColumnsUpdated(cols) {
|
|
3248
3256
|
this.columns = cols;
|
|
3249
3257
|
this.updateVisibleColumns();
|
|
@@ -3663,11 +3671,12 @@ class UltraGridComponent {
|
|
|
3663
3671
|
}
|
|
3664
3672
|
}
|
|
3665
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 });
|
|
3666
|
-
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: `
|
|
3667
3675
|
<div class="ug-wrapper" [ngClass]="config.theme || 'ag-theme-alpine'">
|
|
3668
3676
|
|
|
3669
3677
|
<div class="ug-main">
|
|
3670
3678
|
<ug-header
|
|
3679
|
+
#headerComponent
|
|
3671
3680
|
[columns]="visibleColumns"
|
|
3672
3681
|
[sortModel]="sortModel"
|
|
3673
3682
|
[isAllSelected]="isAllSelected"
|
|
@@ -3682,8 +3691,10 @@ class UltraGridComponent {
|
|
|
3682
3691
|
<div class="ug-body">
|
|
3683
3692
|
<ng-container *ngIf="isBrowser; else ssrPlaceholder">
|
|
3684
3693
|
<cdk-virtual-scroll-viewport
|
|
3694
|
+
#viewport
|
|
3685
3695
|
[itemSize]="rowHeight"
|
|
3686
|
-
class="ug-viewport"
|
|
3696
|
+
class="ug-viewport"
|
|
3697
|
+
(scroll)="onViewportScroll()">
|
|
3687
3698
|
|
|
3688
3699
|
<ug-row
|
|
3689
3700
|
*cdkVirtualFor="let row of _internalDataSource || renderedLocalData; let i = index; trackBy: trackByRowId"
|
|
@@ -3803,6 +3814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3803
3814
|
|
|
3804
3815
|
<div class="ug-main">
|
|
3805
3816
|
<ug-header
|
|
3817
|
+
#headerComponent
|
|
3806
3818
|
[columns]="visibleColumns"
|
|
3807
3819
|
[sortModel]="sortModel"
|
|
3808
3820
|
[isAllSelected]="isAllSelected"
|
|
@@ -3817,8 +3829,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3817
3829
|
<div class="ug-body">
|
|
3818
3830
|
<ng-container *ngIf="isBrowser; else ssrPlaceholder">
|
|
3819
3831
|
<cdk-virtual-scroll-viewport
|
|
3832
|
+
#viewport
|
|
3820
3833
|
[itemSize]="rowHeight"
|
|
3821
|
-
class="ug-viewport"
|
|
3834
|
+
class="ug-viewport"
|
|
3835
|
+
(scroll)="onViewportScroll()">
|
|
3822
3836
|
|
|
3823
3837
|
<ug-row
|
|
3824
3838
|
*cdkVirtualFor="let row of _internalDataSource || renderedLocalData; let i = index; trackBy: trackByRowId"
|
|
@@ -3923,7 +3937,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3923
3937
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
3924
3938
|
type: Inject,
|
|
3925
3939
|
args: [PLATFORM_ID]
|
|
3926
|
-
}] }, { 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: [{
|
|
3927
3947
|
type: Input
|
|
3928
3948
|
}], rowData: [{
|
|
3929
3949
|
type: Input
|