@marcura/marcura-grid 6.1.2 → 19.0.0-dev.0

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.
Files changed (32) hide show
  1. package/README.md +24 -24
  2. package/fesm2022/marcura-marcura-grid.mjs +541 -0
  3. package/fesm2022/marcura-marcura-grid.mjs.map +1 -0
  4. package/lib/components/cell/cell.component.d.ts +1 -1
  5. package/lib/components/column-cell/column-cell.component.d.ts +1 -1
  6. package/lib/components/columns-form/columns-form.component.d.ts +1 -1
  7. package/lib/components/continuous-grid/continuous-grid.component.d.ts +1 -1
  8. package/lib/components/grid/grid.component.d.ts +1 -1
  9. package/lib/components/load-more/load-more.component.d.ts +1 -1
  10. package/lib/components/paginated-grid/paginated-grid.component.d.ts +1 -1
  11. package/package.json +15 -23
  12. package/esm2020/lib/components/cell/cell.component.mjs +0 -19
  13. package/esm2020/lib/components/column-cell/column-cell.component.mjs +0 -53
  14. package/esm2020/lib/components/columns-form/columns-form.component.mjs +0 -63
  15. package/esm2020/lib/components/continuous-grid/continuous-grid.component.mjs +0 -35
  16. package/esm2020/lib/components/grid/grid.component.mjs +0 -51
  17. package/esm2020/lib/components/load-more/load-more.component.mjs +0 -30
  18. package/esm2020/lib/components/paginated-grid/paginated-grid.component.mjs +0 -24
  19. package/esm2020/lib/grid.module.mjs +0 -52
  20. package/esm2020/lib/model/cell-vertical-alignment.enum.mjs +0 -7
  21. package/esm2020/lib/model/column.mjs +0 -64
  22. package/esm2020/lib/model/continuous-grid.mjs +0 -35
  23. package/esm2020/lib/model/grid.mjs +0 -87
  24. package/esm2020/lib/model/paginated-grid.mjs +0 -33
  25. package/esm2020/lib/model/selection.mjs +0 -23
  26. package/esm2020/lib/model/sort-direction.enum.mjs +0 -6
  27. package/esm2020/marcura-marcura-grid.mjs +0 -5
  28. package/esm2020/public-api.mjs +0 -16
  29. package/fesm2015/marcura-marcura-grid.mjs +0 -542
  30. package/fesm2015/marcura-marcura-grid.mjs.map +0 -1
  31. package/fesm2020/marcura-marcura-grid.mjs +0 -540
  32. package/fesm2020/marcura-marcura-grid.mjs.map +0 -1
@@ -1,542 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Component, Input, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, NgModule } from '@angular/core';
3
- import { Assert, AtLeastOneSelectedFormGuard, Observer, getValue, Worker, Is } from '@marcura/marcura-common';
4
- import * as i2 from '@angular/forms';
5
- import { FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
6
- import * as i1 from '@angular/common';
7
- import { CommonModule } from '@angular/common';
8
- import * as i3 from '@marcura/marcura-checkbox';
9
- import { CheckboxModule } from '@marcura/marcura-checkbox';
10
- import * as i4 from '@marcura/marcura-field';
11
- import { FieldModule } from '@marcura/marcura-field';
12
- import { skip, map } from 'rxjs/operators';
13
- import { BehaviorSubject, Subject, combineLatest } from 'rxjs';
14
- import * as i2$2 from '@progress/kendo-angular-grid';
15
- import { GridModule as GridModule$1 } from '@progress/kendo-angular-grid';
16
- import * as i2$1 from '@progress/kendo-angular-buttons';
17
- import { ButtonModule } from '@progress/kendo-angular-buttons';
18
-
19
- class CellComponent {
20
- get value() {
21
- return this.row && this.column && this.column.getValue(this.row);
22
- }
23
- }
24
- CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
- CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: CellComponent, selector: "sg-grid-cell", inputs: { row: "row", column: "column" }, ngImport: i0, template: "<span class=\"c-body c-body--1 u-font-weight--inherit\">{{ value }}</span>\n" });
26
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: CellComponent, decorators: [{
27
- type: Component,
28
- args: [{ selector: 'sg-grid-cell', template: "<span class=\"c-body c-body--1 u-font-weight--inherit\">{{ value }}</span>\n" }]
29
- }], propDecorators: { row: [{
30
- type: Input
31
- }], column: [{
32
- type: Input
33
- }] } });
34
-
35
- class ColumnCellComponent {
36
- get column() {
37
- return Assert.defined(this._column);
38
- }
39
- set column(value) {
40
- this._column = value;
41
- if (this._componentReference) {
42
- this._componentReference.destroy();
43
- }
44
- const factory = this._factoryResolver.resolveComponentFactory(this._column.cellType);
45
- this._componentReference = this._viewContainerReference.createComponent(factory);
46
- this._updateComponentValue();
47
- }
48
- get row() {
49
- return Assert.defined(this._row);
50
- }
51
- set row(value) {
52
- this._row = value;
53
- this._updateComponentValue();
54
- }
55
- constructor(_viewContainerReference, _factoryResolver) {
56
- this._viewContainerReference = _viewContainerReference;
57
- this._factoryResolver = _factoryResolver;
58
- this._componentReference = null;
59
- this._column = null;
60
- this._row = null;
61
- }
62
- _updateComponentValue() {
63
- if (this._componentReference && this._row) {
64
- const component = this._componentReference.instance;
65
- component.column = this.column;
66
- component.row = this.row;
67
- }
68
- }
69
- }
70
- ColumnCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ColumnCellComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
71
- ColumnCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ColumnCellComponent, selector: "sg-grid-column-cell", inputs: { column: "column", row: "row" }, ngImport: i0, template: '', isInline: true });
72
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ColumnCellComponent, decorators: [{
73
- type: Component,
74
- args: [{
75
- selector: 'sg-grid-column-cell',
76
- template: '',
77
- }]
78
- }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { column: [{
79
- type: Input
80
- }], row: [{
81
- type: Input
82
- }] } });
83
-
84
- class ColumnsFormComponent {
85
- constructor() {
86
- this._atLeastOneSelectedFormGuard = null;
87
- this._list = [];
88
- this.columns = [];
89
- this.prefix = '';
90
- }
91
- get list() {
92
- return this._list;
93
- }
94
- set list(value) {
95
- this._list = value || [];
96
- this._list = this._list.filter((column) => {
97
- return column.isVisibilityFormControlVisible;
98
- });
99
- this.updateFormGroup();
100
- this.updateColumns();
101
- if (this._atLeastOneSelectedFormGuard) {
102
- this._atLeastOneSelectedFormGuard.destroy();
103
- }
104
- const controls = this._list.map((column) => column.isVisibleControl);
105
- this._atLeastOneSelectedFormGuard = new AtLeastOneSelectedFormGuard(controls);
106
- }
107
- updateFormGroup() {
108
- const controls = {};
109
- this.list.forEach((column) => (controls[column.field] = column.isVisibleControl));
110
- this.form = new FormGroup(controls);
111
- }
112
- updateColumns() {
113
- const columnsCount = Math.ceil(this.list.length / ColumnsFormComponent.MAX_ROWS);
114
- this.columns = [];
115
- for (let i = 0; i < columnsCount; i++) {
116
- const items = this.list.slice(i * ColumnsFormComponent.MAX_ROWS, (i + 1) * ColumnsFormComponent.MAX_ROWS);
117
- this.columns.push(items);
118
- }
119
- }
120
- ngOnDestroy() {
121
- if (this._atLeastOneSelectedFormGuard) {
122
- this._atLeastOneSelectedFormGuard.destroy();
123
- this._atLeastOneSelectedFormGuard = null;
124
- }
125
- }
126
- }
127
- ColumnsFormComponent.MAX_ROWS = 5;
128
- ColumnsFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ColumnsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
129
- ColumnsFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ColumnsFormComponent, selector: "sg-columns-form", inputs: { list: "list", prefix: "prefix" }, ngImport: i0, template: "<form class=\"u-padding--s\" [formGroup]=\"form\">\n <div class=\"o-layout\">\n <div\n *ngFor=\"let column of columns; let lastColumn = last\"\n class=\"o-layout__item o-layout__item--12 o-layout__item--dynamic---m u-margin-bottom--m-none\"\n [ngClass]=\"{'u-margin-bottom--m': !lastColumn}\"\n >\n <div class=\"o-layout o-layout--list\">\n <div\n *ngFor=\"let item of column; let last = last\"\n class=\"o-layout__item o-layout__item--12\"\n [ngClass]=\"{'u-margin-bottom--m': !last}\"\n >\n <sg-field>\n <sg-checkbox class=\"u-padding-right--xs\" sgFieldContent [formControl]=\"item.isVisibleControl\">{{\n item.title\n }}</sg-checkbox>\n </sg-field>\n </div>\n </div>\n </div>\n </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.CheckboxComponent, selector: "sg-checkbox", inputs: ["id"] }, { kind: "component", type: i4.FieldComponent, selector: "sg-field", inputs: ["labelHidden", "inline", "size"] }] });
130
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ColumnsFormComponent, decorators: [{
131
- type: Component,
132
- args: [{ selector: 'sg-columns-form', template: "<form class=\"u-padding--s\" [formGroup]=\"form\">\n <div class=\"o-layout\">\n <div\n *ngFor=\"let column of columns; let lastColumn = last\"\n class=\"o-layout__item o-layout__item--12 o-layout__item--dynamic---m u-margin-bottom--m-none\"\n [ngClass]=\"{'u-margin-bottom--m': !lastColumn}\"\n >\n <div class=\"o-layout o-layout--list\">\n <div\n *ngFor=\"let item of column; let last = last\"\n class=\"o-layout__item o-layout__item--12\"\n [ngClass]=\"{'u-margin-bottom--m': !last}\"\n >\n <sg-field>\n <sg-checkbox class=\"u-padding-right--xs\" sgFieldContent [formControl]=\"item.isVisibleControl\">{{\n item.title\n }}</sg-checkbox>\n </sg-field>\n </div>\n </div>\n </div>\n </div>\n</form>\n" }]
133
- }], propDecorators: { list: [{
134
- type: Input
135
- }], prefix: [{
136
- type: Input
137
- }] } });
138
-
139
- var CellVerticalAlignment;
140
- (function (CellVerticalAlignment) {
141
- CellVerticalAlignment["Top"] = "top";
142
- CellVerticalAlignment["Center"] = "center";
143
- CellVerticalAlignment["Bottom"] = "bottom";
144
- })(CellVerticalAlignment || (CellVerticalAlignment = {}));
145
-
146
- class Selection {
147
- constructor() {
148
- this._items = new BehaviorSubject([]);
149
- this.keys = [];
150
- this.selectBy = (context) => {
151
- return context.dataItem;
152
- };
153
- this.onChange = () => {
154
- requestAnimationFrame(() => {
155
- this._items.next(this.keys);
156
- });
157
- };
158
- this.reset = () => {
159
- this.keys = [];
160
- this.onChange();
161
- };
162
- }
163
- get items() {
164
- return this._items;
165
- }
166
- }
167
-
168
- class GridComponent {
169
- get selection() {
170
- return this._selection;
171
- }
172
- set selection(value) {
173
- this._selection = value || this._rowClickSelection;
174
- }
175
- constructor(_changeDetectorRef) {
176
- this._changeDetectorRef = _changeDetectorRef;
177
- this._observer = new Observer();
178
- this.cellVerticalAlignment = CellVerticalAlignment.Top;
179
- this.resizable = false;
180
- this.rowClicked = new EventEmitter();
181
- this._rowClickSelection = new Selection();
182
- this._selection = this._rowClickSelection;
183
- this._onRowClickSelectionChange = (selection) => {
184
- if (selection.length > 0) {
185
- this.rowClicked.emit(selection[0]);
186
- this.selection.reset();
187
- this._changeDetectorRef.detectChanges();
188
- }
189
- };
190
- this._observer.listen(this._rowClickSelection.items.pipe(skip(1)), this._onRowClickSelectionChange);
191
- }
192
- ngOnDestroy() {
193
- this._observer.destroy();
194
- }
195
- }
196
- GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
197
- GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: GridComponent, selector: "ng-component", inputs: { cellVerticalAlignment: "cellVerticalAlignment", grid: "grid", resizable: "resizable", selection: "selection" }, outputs: { rowClicked: "rowClicked" }, ngImport: i0, template: '', isInline: true });
198
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GridComponent, decorators: [{
199
- type: Component,
200
- args: [{ template: '' }]
201
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { cellVerticalAlignment: [{
202
- type: Input
203
- }], grid: [{
204
- type: Input
205
- }], resizable: [{
206
- type: Input
207
- }], rowClicked: [{
208
- type: Output
209
- }], selection: [{
210
- type: Input
211
- }] } });
212
-
213
- class LoadMoreComponent {
214
- constructor() {
215
- this.hasCssClass = true;
216
- this.isDisabled = false;
217
- this.clicked = new EventEmitter();
218
- }
219
- onClicked() {
220
- if (!this.isDisabled) {
221
- this.clicked.emit();
222
- }
223
- }
224
- }
225
- LoadMoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: LoadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
226
- LoadMoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: LoadMoreComponent, selector: "sg-load-more", inputs: { isDisabled: "isDisabled" }, outputs: { clicked: "clicked" }, host: { properties: { "class.sg-load-more": "this.hasCssClass" } }, ngImport: i0, template: "<button kendoButton [look]=\"'flat'\" [disabled]=\"isDisabled\" (click)=\"onClicked()\">\n <span #content><ng-content></ng-content></span>\n <ng-container *ngIf=\"!content.innerHTML.trim()\">Load More</ng-container>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "primary", "look", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
227
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: LoadMoreComponent, decorators: [{
228
- type: Component,
229
- args: [{ selector: 'sg-load-more', template: "<button kendoButton [look]=\"'flat'\" [disabled]=\"isDisabled\" (click)=\"onClicked()\">\n <span #content><ng-content></ng-content></span>\n <ng-container *ngIf=\"!content.innerHTML.trim()\">Load More</ng-container>\n</button>\n" }]
230
- }], propDecorators: { hasCssClass: [{
231
- type: HostBinding,
232
- args: ['class.sg-load-more']
233
- }], isDisabled: [{
234
- type: Input
235
- }], clicked: [{
236
- type: Output
237
- }] } });
238
-
239
- class ContinuousGridComponent extends GridComponent {
240
- constructor(changeDetectorRef) {
241
- super(changeDetectorRef);
242
- // Hack: after upgrade to kendo-angular-grid 5.5.X, they expect [field] to always target existing property in schema,
243
- // while we have some cases of columns for row, not any specific property
244
- this.FIELD_INPUT_FALLBACK = '-';
245
- this.hasCssClass = true;
246
- this.secondary = false;
247
- this.loadMoreLabel = '';
248
- this.rowClassFactory = () => '';
249
- }
250
- }
251
- ContinuousGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ContinuousGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
252
- ContinuousGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ContinuousGridComponent, selector: "sg-continuous-grid", inputs: { secondary: "secondary", loadMoreLabel: "loadMoreLabel", rowClassFactory: "rowClassFactory" }, host: { properties: { "class.sg-continuous-grid": "this.hasCssClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sg-grid\">\n <div class=\"sg-blocker sg-blocker--content\" [class.sg-blocker--active]=\"grid.observable.isLoading | async\">\n <div class=\"sg-blocker__sticky-container u-align--center\"><span class=\"fa fa-spinner fa-pulse\"></span></div>\n </div>\n <kendo-grid\n [class]=\"'k-grid--only-horizontal-scroll k-grid--cell-alignment-' + cellVerticalAlignment\"\n [data]=\"grid.observable.rows | async\"\n [sortable]=\"{\n allowUnsort: true,\n mode: 'single'\n }\"\n [resizable]=\"resizable\"\n [navigable]=\"true\"\n [selectable]=\"true\"\n [selectedKeys]=\"selection.keys\"\n [kendoGridSelectBy]=\"selection.selectBy\"\n [rowClass]=\"rowClassFactory\"\n (selectionChange)=\"selection.onChange()\"\n [sort]=\"grid.observable.sortDescriptor | async\"\n (sortChange)=\"grid.onSortDescriptorChanged($event)\"\n (columnResize)=\"grid.onColumnResized($event)\"\n [class.k-grid--secondary]=\"secondary\"\n [class.k-grid--clickable]=\"rowClicked.observers.length > 0\"\n >\n <kendo-grid-column media=\"(max-width: 49rem)\" [field]=\"FIELD_INPUT_FALLBACK\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ul>\n <li *ngFor=\"let column of grid.columns\">\n <div [hidden]=\"column.isHidden | async\">\n <span class=\"u-color-text--secondary\">{{ column.title }} - </span>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </div>\n </li>\n </ul>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column\n *ngFor=\"let column of grid.columns\"\n media=\"(min-width: 49rem)\"\n [title]=\"column.title\"\n [field]=\"column.field || FIELD_INPUT_FALLBACK\"\n [width]=\"column.width | async\"\n [locked]=\"column.isLocked | async\"\n [hidden]=\"column.isHidden | async\"\n [sortable]=\"column.isSortable | async\"\n [minResizableWidth]=\"column.minWidth | async\"\n >\n <ng-template kendoGridCellTemplate let-dataItem>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </ng-template>\n </kendo-grid-column>\n </kendo-grid>\n</div>\n<sg-load-more\n *ngIf=\"grid.hasMoreRows | async\"\n (clicked)=\"grid.loadMore()\"\n [isDisabled]=\"grid.observable.isLoading | async\"\n>\n {{ loadMoreLabel }}\n</sg-load-more>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.GridComponent, selector: "kendo-grid", inputs: ["data", "scrollable", "selectable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "sort", "group", "navigatable", "rowClass", "rowSticky", "rowSelected", "cellSelected", "isDetailExpanded", "isGroupExpanded", "pageSize", "height", "rowHeight", "detailRowHeight", "filter"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$2.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i2$2.ColumnComponent, selector: "kendo-grid-column", inputs: ["sortable", "groupable", "editor", "filter", "filterable", "editable", "field", "format"] }, { kind: "directive", type: i2$2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: LoadMoreComponent, selector: "sg-load-more", inputs: ["isDisabled"], outputs: ["clicked"] }, { kind: "component", type: ColumnCellComponent, selector: "sg-grid-column-cell", inputs: ["column", "row"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
253
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ContinuousGridComponent, decorators: [{
254
- type: Component,
255
- args: [{ selector: 'sg-continuous-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sg-grid\">\n <div class=\"sg-blocker sg-blocker--content\" [class.sg-blocker--active]=\"grid.observable.isLoading | async\">\n <div class=\"sg-blocker__sticky-container u-align--center\"><span class=\"fa fa-spinner fa-pulse\"></span></div>\n </div>\n <kendo-grid\n [class]=\"'k-grid--only-horizontal-scroll k-grid--cell-alignment-' + cellVerticalAlignment\"\n [data]=\"grid.observable.rows | async\"\n [sortable]=\"{\n allowUnsort: true,\n mode: 'single'\n }\"\n [resizable]=\"resizable\"\n [navigable]=\"true\"\n [selectable]=\"true\"\n [selectedKeys]=\"selection.keys\"\n [kendoGridSelectBy]=\"selection.selectBy\"\n [rowClass]=\"rowClassFactory\"\n (selectionChange)=\"selection.onChange()\"\n [sort]=\"grid.observable.sortDescriptor | async\"\n (sortChange)=\"grid.onSortDescriptorChanged($event)\"\n (columnResize)=\"grid.onColumnResized($event)\"\n [class.k-grid--secondary]=\"secondary\"\n [class.k-grid--clickable]=\"rowClicked.observers.length > 0\"\n >\n <kendo-grid-column media=\"(max-width: 49rem)\" [field]=\"FIELD_INPUT_FALLBACK\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ul>\n <li *ngFor=\"let column of grid.columns\">\n <div [hidden]=\"column.isHidden | async\">\n <span class=\"u-color-text--secondary\">{{ column.title }} - </span>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </div>\n </li>\n </ul>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column\n *ngFor=\"let column of grid.columns\"\n media=\"(min-width: 49rem)\"\n [title]=\"column.title\"\n [field]=\"column.field || FIELD_INPUT_FALLBACK\"\n [width]=\"column.width | async\"\n [locked]=\"column.isLocked | async\"\n [hidden]=\"column.isHidden | async\"\n [sortable]=\"column.isSortable | async\"\n [minResizableWidth]=\"column.minWidth | async\"\n >\n <ng-template kendoGridCellTemplate let-dataItem>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </ng-template>\n </kendo-grid-column>\n </kendo-grid>\n</div>\n<sg-load-more\n *ngIf=\"grid.hasMoreRows | async\"\n (clicked)=\"grid.loadMore()\"\n [isDisabled]=\"grid.observable.isLoading | async\"\n>\n {{ loadMoreLabel }}\n</sg-load-more>\n" }]
256
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hasCssClass: [{
257
- type: HostBinding,
258
- args: ['class.sg-continuous-grid']
259
- }], secondary: [{
260
- type: Input
261
- }], loadMoreLabel: [{
262
- type: Input
263
- }], rowClassFactory: [{
264
- type: Input
265
- }] } });
266
-
267
- class PaginatedGridComponent extends GridComponent {
268
- constructor(changeDetectorRef) {
269
- super(changeDetectorRef);
270
- // Hack: after upgrade to kendo-angular-grid 5.5.X, they expect [field] to always target existing property in schema,
271
- // while we have some cases of columns for row, not any specific property
272
- this.FIELD_INPUT_FALLBACK = '-';
273
- this.secondary = false;
274
- }
275
- }
276
- PaginatedGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PaginatedGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
277
- PaginatedGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: PaginatedGridComponent, selector: "sg-paginated-grid", inputs: { secondary: "secondary" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sg-grid\">\n <div class=\"sg-blocker sg-blocker--content\" [class.sg-blocker--active]=\"grid.observable.isLoading | async\">\n <div class=\"sg-blocker__sticky-container u-align--center\"><span class=\"fa fa-spinner fa-pulse\"></span></div>\n </div>\n <kendo-grid\n [data]=\"grid.dataResult | async\"\n [sortable]=\"{\n allowUnsort: true,\n mode: 'single'\n }\"\n [resizable]=\"resizable\"\n [skip]=\"grid.observable.skip | async\"\n [pageSize]=\"grid.observable.pageSize | async\"\n [pageable]=\"grid.pageable\"\n [scrollable]=\"'scrollable'\"\n [navigable]=\"true\"\n (pageChange)=\"grid.pageChange($event)\"\n [selectable]=\"true\"\n [selectedKeys]=\"selection.keys\"\n [kendoGridSelectBy]=\"selection.selectBy\"\n (selectionChange)=\"selection.onChange()\"\n [sort]=\"grid.observable.sortDescriptor | async\"\n (sortChange)=\"grid.onSortDescriptorChanged($event)\"\n (columnResize)=\"grid.onColumnResized($event)\"\n [class.k-grid--secondary]=\"secondary\"\n [class.k-grid--clickable]=\"rowClicked.observers.length > 0\"\n >\n <kendo-grid-column media=\"(max-width: 49rem)\" [field]=\"FIELD_INPUT_FALLBACK\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ul>\n <li *ngFor=\"let column of grid.columns\">\n <div [hidden]=\"column.isHidden | async\">\n <span class=\"u-color-text--secondary\">{{ column.title }} - </span>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </div>\n </li>\n </ul>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column\n *ngFor=\"let column of grid.columns\"\n media=\"(min-width: 49rem)\"\n [title]=\"column.title\"\n [field]=\"column.field\"\n [width]=\"column.width | async\"\n [locked]=\"column.isLocked | async\"\n [hidden]=\"column.isHidden | async\"\n [sortable]=\"column.isSortable | async\"\n [minResizableWidth]=\"column.minWidth | async\"\n >\n <ng-template kendoGridCellTemplate let-dataItem>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </ng-template>\n </kendo-grid-column>\n </kendo-grid>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.GridComponent, selector: "kendo-grid", inputs: ["data", "scrollable", "selectable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "sort", "group", "navigatable", "rowClass", "rowSticky", "rowSelected", "cellSelected", "isDetailExpanded", "isGroupExpanded", "pageSize", "height", "rowHeight", "detailRowHeight", "filter"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$2.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i2$2.ColumnComponent, selector: "kendo-grid-column", inputs: ["sortable", "groupable", "editor", "filter", "filterable", "editable", "field", "format"] }, { kind: "directive", type: i2$2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: ColumnCellComponent, selector: "sg-grid-column-cell", inputs: ["column", "row"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
278
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: PaginatedGridComponent, decorators: [{
279
- type: Component,
280
- args: [{ selector: 'sg-paginated-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sg-grid\">\n <div class=\"sg-blocker sg-blocker--content\" [class.sg-blocker--active]=\"grid.observable.isLoading | async\">\n <div class=\"sg-blocker__sticky-container u-align--center\"><span class=\"fa fa-spinner fa-pulse\"></span></div>\n </div>\n <kendo-grid\n [data]=\"grid.dataResult | async\"\n [sortable]=\"{\n allowUnsort: true,\n mode: 'single'\n }\"\n [resizable]=\"resizable\"\n [skip]=\"grid.observable.skip | async\"\n [pageSize]=\"grid.observable.pageSize | async\"\n [pageable]=\"grid.pageable\"\n [scrollable]=\"'scrollable'\"\n [navigable]=\"true\"\n (pageChange)=\"grid.pageChange($event)\"\n [selectable]=\"true\"\n [selectedKeys]=\"selection.keys\"\n [kendoGridSelectBy]=\"selection.selectBy\"\n (selectionChange)=\"selection.onChange()\"\n [sort]=\"grid.observable.sortDescriptor | async\"\n (sortChange)=\"grid.onSortDescriptorChanged($event)\"\n (columnResize)=\"grid.onColumnResized($event)\"\n [class.k-grid--secondary]=\"secondary\"\n [class.k-grid--clickable]=\"rowClicked.observers.length > 0\"\n >\n <kendo-grid-column media=\"(max-width: 49rem)\" [field]=\"FIELD_INPUT_FALLBACK\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ul>\n <li *ngFor=\"let column of grid.columns\">\n <div [hidden]=\"column.isHidden | async\">\n <span class=\"u-color-text--secondary\">{{ column.title }} - </span>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </div>\n </li>\n </ul>\n </ng-template>\n </kendo-grid-column>\n\n <kendo-grid-column\n *ngFor=\"let column of grid.columns\"\n media=\"(min-width: 49rem)\"\n [title]=\"column.title\"\n [field]=\"column.field\"\n [width]=\"column.width | async\"\n [locked]=\"column.isLocked | async\"\n [hidden]=\"column.isHidden | async\"\n [sortable]=\"column.isSortable | async\"\n [minResizableWidth]=\"column.minWidth | async\"\n >\n <ng-template kendoGridCellTemplate let-dataItem>\n <sg-grid-column-cell [column]=\"column\" [row]=\"dataItem\"></sg-grid-column-cell>\n </ng-template>\n </kendo-grid-column>\n </kendo-grid>\n</div>\n" }]
281
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { secondary: [{
282
- type: Input
283
- }] } });
284
-
285
- const components = [
286
- LoadMoreComponent,
287
- GridComponent,
288
- ContinuousGridComponent,
289
- PaginatedGridComponent,
290
- ColumnCellComponent,
291
- ColumnsFormComponent,
292
- ];
293
- const cells = [CellComponent];
294
- const pages = [];
295
- const pipes = [];
296
- class GridModule {
297
- }
298
- GridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
299
- GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: GridModule, declarations: [LoadMoreComponent,
300
- GridComponent,
301
- ContinuousGridComponent,
302
- PaginatedGridComponent,
303
- ColumnCellComponent,
304
- ColumnsFormComponent, CellComponent], imports: [CommonModule, GridModule$1, ReactiveFormsModule, CheckboxModule, FieldModule, ButtonModule], exports: [LoadMoreComponent,
305
- GridComponent,
306
- ContinuousGridComponent,
307
- PaginatedGridComponent,
308
- ColumnCellComponent,
309
- ColumnsFormComponent] });
310
- GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GridModule, imports: [CommonModule, GridModule$1, ReactiveFormsModule, CheckboxModule, FieldModule, ButtonModule] });
311
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GridModule, decorators: [{
312
- type: NgModule,
313
- args: [{
314
- declarations: [...components, ...pages, ...pipes, ...cells],
315
- imports: [CommonModule, GridModule$1, ReactiveFormsModule, CheckboxModule, FieldModule, ButtonModule],
316
- exports: [...components, ...pages, ...pipes],
317
- providers: [],
318
- entryComponents: [...cells],
319
- }]
320
- }] });
321
-
322
- var SortDirection;
323
- (function (SortDirection) {
324
- SortDirection["Asc"] = "asc";
325
- SortDirection["Desc"] = "desc";
326
- })(SortDirection || (SortDirection = {}));
327
-
328
- class Column {
329
- get isLocked() {
330
- return this._isLocked;
331
- }
332
- get isSortable() {
333
- return this._isSortable;
334
- }
335
- get isHidden() {
336
- return this._isHidden;
337
- }
338
- constructor(width, cellType, minWidth = 50) {
339
- this.cellType = cellType;
340
- this.action = new Subject();
341
- this._isHidden = new BehaviorSubject(false);
342
- this.isVisibleControl = new FormControl(true, { nonNullable: true });
343
- this.isDefaultSortColumn = false;
344
- this.defaultSortDirection = SortDirection.Asc;
345
- this.title = '';
346
- this.field = '';
347
- this.isVisibilityFormControlVisible = true;
348
- this.width = new BehaviorSubject(Math.max(width, minWidth));
349
- this.minWidth = new BehaviorSubject(minWidth);
350
- this._isLocked = new BehaviorSubject(false);
351
- this._isSortable = new BehaviorSubject(false);
352
- this.isVisibleControl.valueChanges.subscribe((isVisible) => this._isHidden.next(!isVisible));
353
- }
354
- forField(field) {
355
- this.field = field;
356
- return this;
357
- }
358
- withTitle(title) {
359
- this.title = title;
360
- return this;
361
- }
362
- locked() {
363
- this._isLocked.next(true);
364
- return this;
365
- }
366
- sortable() {
367
- this._isSortable.next(true);
368
- return this;
369
- }
370
- hidden() {
371
- this.isVisibleControl.setValue(false);
372
- return this;
373
- }
374
- defaultSortColumn(direction = SortDirection.Asc) {
375
- this.isDefaultSortColumn = true;
376
- this.defaultSortDirection = direction;
377
- return this;
378
- }
379
- hiddenVisibilityFormControl() {
380
- this.isVisibilityFormControlVisible = false;
381
- return this;
382
- }
383
- getValue(data) {
384
- return this.field ? getValue(data, this.field) : null;
385
- }
386
- }
387
-
388
- class Grid {
389
- get rows() {
390
- return this._rows.value;
391
- }
392
- set rows(value) {
393
- this._rows.next(value);
394
- }
395
- get skip() {
396
- return this._skip.value;
397
- }
398
- set skip(value) {
399
- if (!isNaN(value) && this.skip !== value) {
400
- this._skip.next(value);
401
- }
402
- }
403
- get pageSize() {
404
- return this._pageSize.value;
405
- }
406
- set pageSize(value) {
407
- if (!isNaN(value) && this.pageSize !== value) {
408
- this._pageSize.next(value);
409
- }
410
- }
411
- get sortDescriptor() {
412
- return this._sortDescriptor.value;
413
- }
414
- set sortDescriptor(value) {
415
- this._sortDescriptor.next(value);
416
- }
417
- constructor(name, columns) {
418
- this.name = name;
419
- this.columns = columns;
420
- this._worker = new Worker();
421
- this._rows = new BehaviorSubject([]);
422
- this._skip = new BehaviorSubject(0);
423
- this._pageSize = new BehaviorSubject(25);
424
- this._sortDescriptor = new BehaviorSubject([]);
425
- this.observable = {
426
- isLoading: this._worker.isWorking,
427
- rows: this._rows,
428
- sortDescriptor: this._sortDescriptor,
429
- skip: this._skip,
430
- pageSize: this._pageSize,
431
- };
432
- this._loadingFailed = new Subject();
433
- this.loadingFailed = this._loadingFailed;
434
- this.reload = () => { };
435
- this.replace = (item, newItem) => {
436
- const rows = this.rows.concat();
437
- const index = rows.indexOf(item);
438
- if (index > -1) {
439
- rows[index] = newItem;
440
- this._rows.next(rows);
441
- }
442
- };
443
- this.onColumnResized = (changes) => {
444
- changes
445
- .map((change) => ({ column: change.column, newWidth: change.newWidth }))
446
- .forEach((change) => {
447
- var _a;
448
- const column = this.columns.find((c) => c.field === change.column.field);
449
- if (column) {
450
- column.width.next((_a = change.newWidth) !== null && _a !== void 0 ? _a : 0);
451
- }
452
- });
453
- };
454
- this.onSortDescriptorChanged = (sortDescriptor) => {
455
- this.sortDescriptor = sortDescriptor;
456
- this.reload();
457
- };
458
- this.onLoadError = (error) => {
459
- this._loadingFailed.next(error);
460
- };
461
- const sortColumn = columns.find((column) => column.isDefaultSortColumn);
462
- this.sortDescriptor =
463
- sortColumn !== undefined
464
- ? [
465
- {
466
- field: sortColumn.field,
467
- dir: sortColumn.defaultSortDirection,
468
- },
469
- ]
470
- : [];
471
- }
472
- }
473
-
474
- class ContinuousGrid extends Grid {
475
- constructor(name, columns, _loadPage) {
476
- super(name, columns);
477
- this._loadPage = _loadPage;
478
- this._hasMoreRows = new BehaviorSubject(false);
479
- this.hasMoreRows = this._hasMoreRows;
480
- this.reload = () => {
481
- this.skip = 0;
482
- this._worker.handle(this._loadPage(this.skip, this.pageSize, this.sortDescriptor), this.onLoadSuccess, this.onLoadError);
483
- };
484
- this.loadMore = () => {
485
- this.skip += this.pageSize;
486
- this._worker.handle(this._loadPage(this.skip, this.pageSize, this.sortDescriptor), this.onLoadMoreSuccess, this.onLoadError);
487
- };
488
- this.onLoadSuccess = (dataResult) => {
489
- this.rows = dataResult.rows;
490
- this._hasMoreRows.next(!dataResult.isLastPage);
491
- };
492
- this.onLoadMoreSuccess = (dataResult) => {
493
- this.rows = [...this.rows, ...dataResult.rows];
494
- this._hasMoreRows.next(!dataResult.isLastPage);
495
- };
496
- }
497
- preload(pagesCount) {
498
- this.rows = [];
499
- this.skip = 0;
500
- this.skip = pagesCount > 0 ? (pagesCount - 1) * this.pageSize : 0;
501
- if (pagesCount > 0) {
502
- this._worker.handle(this._loadPage(0, pagesCount * this.pageSize, this._sortDescriptor.value), this.onLoadSuccess, this.onLoadError);
503
- }
504
- }
505
- }
506
-
507
- class PaginatedGrid extends Grid {
508
- constructor(name, columns, _loadPage) {
509
- var _a;
510
- super(name, columns);
511
- this._loadPage = _loadPage;
512
- this.pageable = {
513
- buttonCount: 5,
514
- info: true,
515
- type: 'numeric',
516
- pageSizes: [100, 250, 500],
517
- previousNext: true,
518
- };
519
- this._total = new BehaviorSubject(0);
520
- this.dataResult = combineLatest([this.observable.rows, this._total]).pipe(map(([rows, total]) => ({ data: rows, total })));
521
- this.reload = () => {
522
- this._worker.handle(this._loadPage(this.skip, this.pageSize, this._sortDescriptor.value), this.onLoadSuccess, this.onLoadError);
523
- };
524
- this.onLoadSuccess = (result) => {
525
- this.rows = result.rows;
526
- this._total.next(result.total);
527
- };
528
- this.pageSize = Is.array(this.pageable.pageSizes) ? (_a = this.pageable.pageSizes[0]) !== null && _a !== void 0 ? _a : 0 : 0;
529
- }
530
- pageChange(event) {
531
- this.skip = event.skip;
532
- this.pageSize = event.take;
533
- this.reload();
534
- }
535
- }
536
-
537
- /**
538
- * Generated bundle index. Do not edit.
539
- */
540
-
541
- export { CellComponent, CellVerticalAlignment, Column, ColumnCellComponent, ColumnsFormComponent, ContinuousGrid, ContinuousGridComponent, Grid, GridComponent, GridModule, LoadMoreComponent, PaginatedGrid, PaginatedGridComponent, Selection, SortDirection };
542
- //# sourceMappingURL=marcura-marcura-grid.mjs.map