@skyux/grids 5.6.2 → 6.0.0-beta.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 (81) hide show
  1. package/documentation.json +67 -67
  2. package/esm2020/index.mjs +20 -0
  3. package/esm2020/lib/modules/grid/grid-adapter.service.mjs +84 -0
  4. package/esm2020/lib/modules/grid/grid-cell.component.mjs +41 -0
  5. package/esm2020/lib/modules/grid/grid-column.component.mjs +116 -0
  6. package/esm2020/lib/modules/grid/grid-column.model.mjs +25 -0
  7. package/esm2020/lib/modules/grid/grid.component.mjs +1025 -0
  8. package/esm2020/lib/modules/grid/grid.module.mjs +71 -0
  9. package/esm2020/lib/modules/grid/types/grid-column-alignment.mjs +2 -0
  10. package/esm2020/lib/modules/grid/types/grid-column-description-model-change.mjs +2 -0
  11. package/esm2020/lib/modules/grid/types/grid-column-heading-model-change.mjs +2 -0
  12. package/esm2020/lib/modules/grid/types/grid-column-inline-help-popover-model-change.mjs +2 -0
  13. package/esm2020/lib/modules/grid/types/grid-column-width-model-change.mjs +2 -0
  14. package/esm2020/lib/modules/grid/types/grid-message-type.mjs +20 -0
  15. package/esm2020/lib/modules/grid/types/grid-message.mjs +2 -0
  16. package/esm2020/lib/modules/grid/types/grid-row-delete-cancel-args.mjs +2 -0
  17. package/esm2020/lib/modules/grid/types/grid-row-delete-config.mjs +2 -0
  18. package/esm2020/lib/modules/grid/types/grid-row-delete-confirm-args.mjs +2 -0
  19. package/esm2020/lib/modules/grid/types/grid-row-delete-contents.mjs +2 -0
  20. package/esm2020/lib/modules/grid/types/grid-selected-rows-model-change.mjs +2 -0
  21. package/esm2020/lib/modules/grid/types/grid-selected-rows-source.mjs +12 -0
  22. package/esm2020/lib/modules/grid/types/grid-ui-config.mjs +2 -0
  23. package/esm2020/lib/modules/shared/sky-grids-resources.module.mjs +45 -0
  24. package/esm2020/skyux-grids.mjs +5 -0
  25. package/fesm2015/{skyux-grids.js → skyux-grids.mjs} +32 -45
  26. package/fesm2015/skyux-grids.mjs.map +1 -0
  27. package/fesm2020/skyux-grids.mjs +1422 -0
  28. package/fesm2020/skyux-grids.mjs.map +1 -0
  29. package/lib/modules/grid/grid.component.d.ts +1 -2
  30. package/lib/modules/grid/grid.module.d.ts +2 -2
  31. package/lib/modules/shared/sky-grids-resources.module.d.ts +14 -0
  32. package/package.json +29 -16
  33. package/bundles/skyux-grids.umd.js +0 -1854
  34. package/esm2015/index.js +0 -20
  35. package/esm2015/index.js.map +0 -1
  36. package/esm2015/lib/modules/grid/grid-adapter.service.js +0 -84
  37. package/esm2015/lib/modules/grid/grid-adapter.service.js.map +0 -1
  38. package/esm2015/lib/modules/grid/grid-cell.component.js +0 -46
  39. package/esm2015/lib/modules/grid/grid-cell.component.js.map +0 -1
  40. package/esm2015/lib/modules/grid/grid-column.component.js +0 -116
  41. package/esm2015/lib/modules/grid/grid-column.component.js.map +0 -1
  42. package/esm2015/lib/modules/grid/grid-column.model.js +0 -25
  43. package/esm2015/lib/modules/grid/grid-column.model.js.map +0 -1
  44. package/esm2015/lib/modules/grid/grid.component.js +0 -1033
  45. package/esm2015/lib/modules/grid/grid.component.js.map +0 -1
  46. package/esm2015/lib/modules/grid/grid.module.js +0 -71
  47. package/esm2015/lib/modules/grid/grid.module.js.map +0 -1
  48. package/esm2015/lib/modules/grid/types/grid-column-alignment.js +0 -2
  49. package/esm2015/lib/modules/grid/types/grid-column-alignment.js.map +0 -1
  50. package/esm2015/lib/modules/grid/types/grid-column-description-model-change.js +0 -2
  51. package/esm2015/lib/modules/grid/types/grid-column-description-model-change.js.map +0 -1
  52. package/esm2015/lib/modules/grid/types/grid-column-heading-model-change.js +0 -2
  53. package/esm2015/lib/modules/grid/types/grid-column-heading-model-change.js.map +0 -1
  54. package/esm2015/lib/modules/grid/types/grid-column-inline-help-popover-model-change.js +0 -2
  55. package/esm2015/lib/modules/grid/types/grid-column-inline-help-popover-model-change.js.map +0 -1
  56. package/esm2015/lib/modules/grid/types/grid-column-width-model-change.js +0 -2
  57. package/esm2015/lib/modules/grid/types/grid-column-width-model-change.js.map +0 -1
  58. package/esm2015/lib/modules/grid/types/grid-message-type.js +0 -20
  59. package/esm2015/lib/modules/grid/types/grid-message-type.js.map +0 -1
  60. package/esm2015/lib/modules/grid/types/grid-message.js +0 -2
  61. package/esm2015/lib/modules/grid/types/grid-message.js.map +0 -1
  62. package/esm2015/lib/modules/grid/types/grid-row-delete-cancel-args.js +0 -2
  63. package/esm2015/lib/modules/grid/types/grid-row-delete-cancel-args.js.map +0 -1
  64. package/esm2015/lib/modules/grid/types/grid-row-delete-config.js +0 -2
  65. package/esm2015/lib/modules/grid/types/grid-row-delete-config.js.map +0 -1
  66. package/esm2015/lib/modules/grid/types/grid-row-delete-confirm-args.js +0 -2
  67. package/esm2015/lib/modules/grid/types/grid-row-delete-confirm-args.js.map +0 -1
  68. package/esm2015/lib/modules/grid/types/grid-row-delete-contents.js +0 -2
  69. package/esm2015/lib/modules/grid/types/grid-row-delete-contents.js.map +0 -1
  70. package/esm2015/lib/modules/grid/types/grid-selected-rows-model-change.js +0 -2
  71. package/esm2015/lib/modules/grid/types/grid-selected-rows-model-change.js.map +0 -1
  72. package/esm2015/lib/modules/grid/types/grid-selected-rows-source.js +0 -12
  73. package/esm2015/lib/modules/grid/types/grid-selected-rows-source.js.map +0 -1
  74. package/esm2015/lib/modules/grid/types/grid-ui-config.js +0 -2
  75. package/esm2015/lib/modules/grid/types/grid-ui-config.js.map +0 -1
  76. package/esm2015/lib/modules/shared/skyux-grids-resources.module.js +0 -45
  77. package/esm2015/lib/modules/shared/skyux-grids-resources.module.js.map +0 -1
  78. package/esm2015/skyux-grids.js +0 -5
  79. package/esm2015/skyux-grids.js.map +0 -1
  80. package/fesm2015/skyux-grids.js.map +0 -1
  81. package/lib/modules/shared/skyux-grids-resources.module.d.ts +0 -14
@@ -1,1854 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/indicators'), require('@skyux/layout'), require('@skyux/popovers'), require('ng2-dragula'), require('@skyux/i18n'), require('@skyux/list-builder-common'), require('rxjs'), require('rxjs/operators')) :
3
- typeof define === 'function' && define.amd ? define('@skyux/grids', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@skyux/core', '@skyux/forms', '@skyux/indicators', '@skyux/layout', '@skyux/popovers', 'ng2-dragula', '@skyux/i18n', '@skyux/list-builder-common', 'rxjs', 'rxjs/operators'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.grids = {}), global.ng.common, global.ng.core, global.ng.forms, global.i1, global.i5, global.i4, global.i7, global.i9, global.i2, global.i11, global.listBuilderCommon, global.rxjs, global.rxjs.operators));
5
- })(this, (function (exports, i8, i0, i10, i1, i5, i4, i7, i9, i2, i11, listBuilderCommon, rxjs, operators) { 'use strict';
6
-
7
- function _interopNamespace(e) {
8
- if (e && e.__esModule) return e;
9
- var n = Object.create(null);
10
- if (e) {
11
- Object.keys(e).forEach(function (k) {
12
- if (k !== 'default') {
13
- var d = Object.getOwnPropertyDescriptor(e, k);
14
- Object.defineProperty(n, k, d.get ? d : {
15
- enumerable: true,
16
- get: function () { return e[k]; }
17
- });
18
- }
19
- });
20
- }
21
- n["default"] = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
26
- var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
27
- var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
28
- var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
29
- var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
30
- var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
31
- var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
32
- var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
33
- var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
34
- var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
35
-
36
- /**
37
- * NOTICE: DO NOT MODIFY THIS FILE!
38
- * The contents of this file were automatically generated by
39
- * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/skyux-grids' schematic.
40
- * To update this file, simply rerun the command.
41
- */
42
- var RESOURCES = {
43
- 'EN-US': { skyux_grid_multiselect_select_row: { message: 'Select row' } },
44
- };
45
- var SkyuxGridsResourcesProvider = /** @class */ (function () {
46
- function SkyuxGridsResourcesProvider() {
47
- }
48
- SkyuxGridsResourcesProvider.prototype.getString = function (localeInfo, name) {
49
- return i11.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
50
- };
51
- return SkyuxGridsResourcesProvider;
52
- }());
53
- /**
54
- * Import into any component library module that needs to use resource strings.
55
- */
56
- var SkyuxGridsResourcesModule = /** @class */ (function () {
57
- function SkyuxGridsResourcesModule() {
58
- }
59
- return SkyuxGridsResourcesModule;
60
- }());
61
- SkyuxGridsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
62
- SkyuxGridsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, exports: [i11.SkyI18nModule] });
63
- SkyuxGridsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, providers: [
64
- {
65
- provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
66
- useClass: SkyuxGridsResourcesProvider,
67
- multi: true,
68
- },
69
- ], imports: [i11.SkyI18nModule] });
70
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, decorators: [{
71
- type: i0.NgModule,
72
- args: [{
73
- exports: [i11.SkyI18nModule],
74
- providers: [
75
- {
76
- provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
77
- useClass: SkyuxGridsResourcesProvider,
78
- multi: true,
79
- },
80
- ],
81
- }]
82
- }] });
83
-
84
- /**
85
- * @internal
86
- */
87
- var SkyGridCellComponent = /** @class */ (function () {
88
- function SkyGridCellComponent() {
89
- }
90
- SkyGridCellComponent.prototype.ngOnInit = function () {
91
- this.container.createEmbeddedView(this.template, this);
92
- };
93
- Object.defineProperty(SkyGridCellComponent.prototype, "row", {
94
- get: function () {
95
- return this.item.data;
96
- },
97
- enumerable: false,
98
- configurable: true
99
- });
100
- Object.defineProperty(SkyGridCellComponent.prototype, "value", {
101
- get: function () {
102
- if (this.item.data && (this.fieldSelector || this.columnId)) {
103
- return listBuilderCommon.getData(this.item.data, this.fieldSelector || this.columnId);
104
- }
105
- return undefined;
106
- },
107
- enumerable: false,
108
- configurable: true
109
- });
110
- return SkyGridCellComponent;
111
- }());
112
- SkyGridCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridCellComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
113
- SkyGridCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: { item: "item", columnId: "columnId", template: "template", fieldSelector: "fieldSelector" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["cell"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: '<ng-template #cell></ng-template>', isInline: true, styles: [":host{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;min-height:35px}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
114
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridCellComponent, decorators: [{
115
- type: i0.Component,
116
- args: [{
117
- selector: 'sky-grid-cell',
118
- template: '<ng-template #cell></ng-template>',
119
- styles: [":host{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;min-height:35px}\n"],
120
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
121
- }]
122
- }], propDecorators: { item: [{
123
- type: i0.Input
124
- }], columnId: [{
125
- type: i0.Input
126
- }], template: [{
127
- type: i0.Input
128
- }], fieldSelector: [{
129
- type: i0.Input
130
- }], container: [{
131
- type: i0.ViewChild,
132
- args: ['cell', {
133
- read: i0.ViewContainerRef,
134
- static: true,
135
- }]
136
- }] } });
137
-
138
- /**
139
- * Specifies the column information.
140
- */
141
- var SkyGridColumnComponent = /** @class */ (function () {
142
- function SkyGridColumnComponent() {
143
- /**
144
- * Specifies the horizontal alignment of the column's data and header.
145
- * Options include: `"left"`, `"center"`, and `"right"`.
146
- * @default "left"
147
- */
148
- this.alignment = 'left';
149
- /**
150
- * Indicates whether the column sorts the grid when users click the column header.
151
- * @default true
152
- */
153
- this.isSortable = true;
154
- /**
155
- * Specifies a search function to apply for the specific column. By default,
156
- * the column executes a string compare on the column data.
157
- * @default (value, searchText) => value.toString().toLowerCase().indexOf(searchText) !== -1
158
- */
159
- // eslint-disable-next-line @angular-eslint/no-input-rename
160
- this.searchFunction = this.search;
161
- this.descriptionChanges = new i0.EventEmitter();
162
- this.descriptionModelChanges = new i0.EventEmitter();
163
- this.headingChanges = new i0.EventEmitter();
164
- this.headingModelChanges = new i0.EventEmitter();
165
- this.inlineHelpPopoverModelChanges = new i0.EventEmitter();
166
- }
167
- SkyGridColumnComponent.prototype.ngOnChanges = function (changes) {
168
- if (changes.heading && changes.heading.firstChange === false) {
169
- this.headingChanges.emit(this.heading);
170
- this.headingModelChanges.emit({
171
- value: this.heading,
172
- id: this.id,
173
- field: this.field,
174
- });
175
- }
176
- if (changes.description && changes.description.firstChange === false) {
177
- this.descriptionChanges.emit(this.description);
178
- this.descriptionModelChanges.emit({
179
- value: this.description,
180
- id: this.id,
181
- field: this.field,
182
- });
183
- }
184
- if (changes.inlineHelpPopover &&
185
- changes.inlineHelpPopover.firstChange === false) {
186
- this.inlineHelpPopoverModelChanges.emit({
187
- value: this.inlineHelpPopover,
188
- id: this.id,
189
- field: this.field,
190
- });
191
- }
192
- };
193
- Object.defineProperty(SkyGridColumnComponent.prototype, "template", {
194
- get: function () {
195
- if (this.templates.length > 0) {
196
- return this.templates.first;
197
- }
198
- return this.templateInput;
199
- },
200
- enumerable: false,
201
- configurable: true
202
- });
203
- SkyGridColumnComponent.prototype.search = function (value, searchText) {
204
- /* tslint:disable:no-null-keyword */
205
- if (value !== undefined && value !== null) {
206
- return value.toString().toLowerCase().indexOf(searchText) !== -1;
207
- }
208
- /* tslint:enable */
209
- return false;
210
- };
211
- return SkyGridColumnComponent;
212
- }());
213
- SkyGridColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridColumnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
214
- SkyGridColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridColumnComponent, selector: "sky-grid-column", inputs: { alignment: "alignment", description: "description", excludeFromHighlighting: "excludeFromHighlighting", field: "field", heading: "heading", hidden: "hidden", id: "id", inlineHelpPopover: "inlineHelpPopover", isSortable: "isSortable", locked: "locked", searchFunction: ["search", "searchFunction"], type: "type", templateInput: ["template", "templateInput"], width: "width" }, queries: [{ propertyName: "templates", predicate: i0.TemplateRef }], usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
215
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridColumnComponent, decorators: [{
216
- type: i0.Component,
217
- args: [{
218
- selector: 'sky-grid-column',
219
- template: '<ng-content></ng-content>',
220
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
221
- }]
222
- }], propDecorators: { alignment: [{
223
- type: i0.Input
224
- }], description: [{
225
- type: i0.Input
226
- }], excludeFromHighlighting: [{
227
- type: i0.Input
228
- }], field: [{
229
- type: i0.Input
230
- }], heading: [{
231
- type: i0.Input
232
- }], hidden: [{
233
- type: i0.Input
234
- }], id: [{
235
- type: i0.Input
236
- }], inlineHelpPopover: [{
237
- type: i0.Input
238
- }], isSortable: [{
239
- type: i0.Input
240
- }], locked: [{
241
- type: i0.Input
242
- }], searchFunction: [{
243
- type: i0.Input,
244
- args: ['search']
245
- }], type: [{
246
- type: i0.Input
247
- }], templateInput: [{
248
- type: i0.Input,
249
- args: ['template']
250
- }], width: [{
251
- type: i0.Input
252
- }], templates: [{
253
- type: i0.ContentChildren,
254
- args: [i0.TemplateRef]
255
- }] } });
256
-
257
- /*! *****************************************************************************
258
- Copyright (c) Microsoft Corporation.
259
-
260
- Permission to use, copy, modify, and/or distribute this software for any
261
- purpose with or without fee is hereby granted.
262
-
263
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
264
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
265
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
266
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
267
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
268
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
269
- PERFORMANCE OF THIS SOFTWARE.
270
- ***************************************************************************** */
271
- /* global Reflect, Promise */
272
- var extendStatics = function (d, b) {
273
- extendStatics = Object.setPrototypeOf ||
274
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
275
- function (d, b) { for (var p in b)
276
- if (Object.prototype.hasOwnProperty.call(b, p))
277
- d[p] = b[p]; };
278
- return extendStatics(d, b);
279
- };
280
- function __extends(d, b) {
281
- if (typeof b !== "function" && b !== null)
282
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
283
- extendStatics(d, b);
284
- function __() { this.constructor = d; }
285
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
286
- }
287
- var __assign = function () {
288
- __assign = Object.assign || function __assign(t) {
289
- for (var s, i = 1, n = arguments.length; i < n; i++) {
290
- s = arguments[i];
291
- for (var p in s)
292
- if (Object.prototype.hasOwnProperty.call(s, p))
293
- t[p] = s[p];
294
- }
295
- return t;
296
- };
297
- return __assign.apply(this, arguments);
298
- };
299
- function __rest(s, e) {
300
- var t = {};
301
- for (var p in s)
302
- if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
303
- t[p] = s[p];
304
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
305
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
306
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
307
- t[p[i]] = s[p[i]];
308
- }
309
- return t;
310
- }
311
- function __decorate(decorators, target, key, desc) {
312
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
313
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
314
- r = Reflect.decorate(decorators, target, key, desc);
315
- else
316
- for (var i = decorators.length - 1; i >= 0; i--)
317
- if (d = decorators[i])
318
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
319
- return c > 3 && r && Object.defineProperty(target, key, r), r;
320
- }
321
- function __param(paramIndex, decorator) {
322
- return function (target, key) { decorator(target, key, paramIndex); };
323
- }
324
- function __metadata(metadataKey, metadataValue) {
325
- if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
326
- return Reflect.metadata(metadataKey, metadataValue);
327
- }
328
- function __awaiter(thisArg, _arguments, P, generator) {
329
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
330
- return new (P || (P = Promise))(function (resolve, reject) {
331
- function fulfilled(value) { try {
332
- step(generator.next(value));
333
- }
334
- catch (e) {
335
- reject(e);
336
- } }
337
- function rejected(value) { try {
338
- step(generator["throw"](value));
339
- }
340
- catch (e) {
341
- reject(e);
342
- } }
343
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
344
- step((generator = generator.apply(thisArg, _arguments || [])).next());
345
- });
346
- }
347
- function __generator(thisArg, body) {
348
- var _ = { label: 0, sent: function () { if (t[0] & 1)
349
- throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
350
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
351
- function verb(n) { return function (v) { return step([n, v]); }; }
352
- function step(op) {
353
- if (f)
354
- throw new TypeError("Generator is already executing.");
355
- while (_)
356
- try {
357
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
358
- return t;
359
- if (y = 0, t)
360
- op = [op[0] & 2, t.value];
361
- switch (op[0]) {
362
- case 0:
363
- case 1:
364
- t = op;
365
- break;
366
- case 4:
367
- _.label++;
368
- return { value: op[1], done: false };
369
- case 5:
370
- _.label++;
371
- y = op[1];
372
- op = [0];
373
- continue;
374
- case 7:
375
- op = _.ops.pop();
376
- _.trys.pop();
377
- continue;
378
- default:
379
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
380
- _ = 0;
381
- continue;
382
- }
383
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
384
- _.label = op[1];
385
- break;
386
- }
387
- if (op[0] === 6 && _.label < t[1]) {
388
- _.label = t[1];
389
- t = op;
390
- break;
391
- }
392
- if (t && _.label < t[2]) {
393
- _.label = t[2];
394
- _.ops.push(op);
395
- break;
396
- }
397
- if (t[2])
398
- _.ops.pop();
399
- _.trys.pop();
400
- continue;
401
- }
402
- op = body.call(thisArg, _);
403
- }
404
- catch (e) {
405
- op = [6, e];
406
- y = 0;
407
- }
408
- finally {
409
- f = t = 0;
410
- }
411
- if (op[0] & 5)
412
- throw op[1];
413
- return { value: op[0] ? op[1] : void 0, done: true };
414
- }
415
- }
416
- var __createBinding = Object.create ? (function (o, m, k, k2) {
417
- if (k2 === undefined)
418
- k2 = k;
419
- Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
420
- }) : (function (o, m, k, k2) {
421
- if (k2 === undefined)
422
- k2 = k;
423
- o[k2] = m[k];
424
- });
425
- function __exportStar(m, o) {
426
- for (var p in m)
427
- if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
428
- __createBinding(o, m, p);
429
- }
430
- function __values(o) {
431
- var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
432
- if (m)
433
- return m.call(o);
434
- if (o && typeof o.length === "number")
435
- return {
436
- next: function () {
437
- if (o && i >= o.length)
438
- o = void 0;
439
- return { value: o && o[i++], done: !o };
440
- }
441
- };
442
- throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
443
- }
444
- function __read(o, n) {
445
- var m = typeof Symbol === "function" && o[Symbol.iterator];
446
- if (!m)
447
- return o;
448
- var i = m.call(o), r, ar = [], e;
449
- try {
450
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
451
- ar.push(r.value);
452
- }
453
- catch (error) {
454
- e = { error: error };
455
- }
456
- finally {
457
- try {
458
- if (r && !r.done && (m = i["return"]))
459
- m.call(i);
460
- }
461
- finally {
462
- if (e)
463
- throw e.error;
464
- }
465
- }
466
- return ar;
467
- }
468
- /** @deprecated */
469
- function __spread() {
470
- for (var ar = [], i = 0; i < arguments.length; i++)
471
- ar = ar.concat(__read(arguments[i]));
472
- return ar;
473
- }
474
- /** @deprecated */
475
- function __spreadArrays() {
476
- for (var s = 0, i = 0, il = arguments.length; i < il; i++)
477
- s += arguments[i].length;
478
- for (var r = Array(s), k = 0, i = 0; i < il; i++)
479
- for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
480
- r[k] = a[j];
481
- return r;
482
- }
483
- function __spreadArray(to, from, pack) {
484
- if (pack || arguments.length === 2)
485
- for (var i = 0, l = from.length, ar; i < l; i++) {
486
- if (ar || !(i in from)) {
487
- if (!ar)
488
- ar = Array.prototype.slice.call(from, 0, i);
489
- ar[i] = from[i];
490
- }
491
- }
492
- return to.concat(ar || Array.prototype.slice.call(from));
493
- }
494
- function __await(v) {
495
- return this instanceof __await ? (this.v = v, this) : new __await(v);
496
- }
497
- function __asyncGenerator(thisArg, _arguments, generator) {
498
- if (!Symbol.asyncIterator)
499
- throw new TypeError("Symbol.asyncIterator is not defined.");
500
- var g = generator.apply(thisArg, _arguments || []), i, q = [];
501
- return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
502
- function verb(n) { if (g[n])
503
- i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
504
- function resume(n, v) { try {
505
- step(g[n](v));
506
- }
507
- catch (e) {
508
- settle(q[0][3], e);
509
- } }
510
- function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
511
- function fulfill(value) { resume("next", value); }
512
- function reject(value) { resume("throw", value); }
513
- function settle(f, v) { if (f(v), q.shift(), q.length)
514
- resume(q[0][0], q[0][1]); }
515
- }
516
- function __asyncDelegator(o) {
517
- var i, p;
518
- return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
519
- function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
520
- }
521
- function __asyncValues(o) {
522
- if (!Symbol.asyncIterator)
523
- throw new TypeError("Symbol.asyncIterator is not defined.");
524
- var m = o[Symbol.asyncIterator], i;
525
- return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
526
- function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
527
- function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
528
- }
529
- function __makeTemplateObject(cooked, raw) {
530
- if (Object.defineProperty) {
531
- Object.defineProperty(cooked, "raw", { value: raw });
532
- }
533
- else {
534
- cooked.raw = raw;
535
- }
536
- return cooked;
537
- }
538
- ;
539
- var __setModuleDefault = Object.create ? (function (o, v) {
540
- Object.defineProperty(o, "default", { enumerable: true, value: v });
541
- }) : function (o, v) {
542
- o["default"] = v;
543
- };
544
- function __importStar(mod) {
545
- if (mod && mod.__esModule)
546
- return mod;
547
- var result = {};
548
- if (mod != null)
549
- for (var k in mod)
550
- if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
551
- __createBinding(result, mod, k);
552
- __setModuleDefault(result, mod);
553
- return result;
554
- }
555
- function __importDefault(mod) {
556
- return (mod && mod.__esModule) ? mod : { default: mod };
557
- }
558
- function __classPrivateFieldGet(receiver, state, kind, f) {
559
- if (kind === "a" && !f)
560
- throw new TypeError("Private accessor was defined without a getter");
561
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
562
- throw new TypeError("Cannot read private member from an object whose class did not declare it");
563
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
564
- }
565
- function __classPrivateFieldSet(receiver, state, value, kind, f) {
566
- if (kind === "m")
567
- throw new TypeError("Private method is not writable");
568
- if (kind === "a" && !f)
569
- throw new TypeError("Private accessor was defined without a setter");
570
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
571
- throw new TypeError("Cannot write private member to an object whose class did not declare it");
572
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
573
- }
574
-
575
- var GRID_HEADER_DRAGGING_CLASS = 'sky-grid-header-dragging';
576
- var GRID_HEADER_LOCKED_SELECTOR = '.sky-grid-header-locked';
577
- var GRID_HEADER_RESIZE_HANDLE = '.sky-grid-resize-handle';
578
- var GRID_ROW_DELETE_SELECTOR = '.sky-grid-row-delete-heading';
579
- var GRID_MULTISELECT_SELECTOR = '.sky-grid-multiselect-cell';
580
- /**
581
- * @internal
582
- */
583
- var SkyGridAdapterService = /** @class */ (function () {
584
- function SkyGridAdapterService(rendererFactory) {
585
- this.rendererFactory = rendererFactory;
586
- this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
587
- }
588
- SkyGridAdapterService.prototype.initializeDragAndDrop = function (dragulaService, dropCallback) {
589
- var _this = this;
590
- dragulaService.drag.subscribe(function (_a) {
591
- var _b = __read(_a, 2), source = _b[1];
592
- return source.classList.add(GRID_HEADER_DRAGGING_CLASS);
593
- });
594
- dragulaService.dragend.subscribe(function (_a) {
595
- var _b = __read(_a, 2), source = _b[1];
596
- return source.classList.remove(GRID_HEADER_DRAGGING_CLASS);
597
- });
598
- dragulaService.drop.subscribe(function (_a) {
599
- var _b = __read(_a, 3), container = _b[2];
600
- var columnIds = [];
601
- var nodes = container.querySelectorAll("th:not(" + GRID_MULTISELECT_SELECTOR + "):not(" + GRID_ROW_DELETE_SELECTOR + ")");
602
- for (var i = 0; i < nodes.length; i++) {
603
- var el = nodes[i];
604
- var id = el.getAttribute('sky-cmp-id');
605
- columnIds.push(id);
606
- }
607
- dropCallback(columnIds);
608
- });
609
- dragulaService.setOptions('sky-grid-heading', {
610
- moves: function (el, container, handle) {
611
- var columns = container.querySelectorAll('th div');
612
- var isLeftOfLocked = _this.isLeftOfLocked(handle, columns);
613
- return (!el.querySelector(GRID_HEADER_LOCKED_SELECTOR) &&
614
- handle !== undefined &&
615
- !handle.matches(GRID_HEADER_RESIZE_HANDLE) &&
616
- !handle.matches(GRID_MULTISELECT_SELECTOR) &&
617
- !handle.matches(GRID_ROW_DELETE_SELECTOR) &&
618
- !isLeftOfLocked);
619
- },
620
- accepts: function (el, target, source, sibling) {
621
- if (sibling === undefined || !sibling) {
622
- return true;
623
- }
624
- var columns = source.querySelectorAll('th div');
625
- var siblingDiv = sibling.querySelector('div');
626
- var isLeftOfLocked = _this.isLeftOfLocked(siblingDiv, columns);
627
- return (!sibling.matches(GRID_HEADER_LOCKED_SELECTOR) &&
628
- !sibling.matches(GRID_HEADER_RESIZE_HANDLE) &&
629
- !isLeftOfLocked);
630
- },
631
- });
632
- };
633
- SkyGridAdapterService.prototype.getRowHeight = function (el, index) {
634
- return (el.nativeElement.querySelectorAll('tbody tr')[index].scrollHeight + 'px');
635
- };
636
- SkyGridAdapterService.prototype.setStyle = function (el, style, value) {
637
- if (el) {
638
- this.renderer.setStyle(el.nativeElement, style, value);
639
- }
640
- };
641
- SkyGridAdapterService.prototype.isLeftOfLocked = function (handle, columns) {
642
- var e_1, _a;
643
- var sourceColumn = handle;
644
- try {
645
- for (var _b = __values(Array.from(columns)), _c = _b.next(); !_c.done; _c = _b.next()) {
646
- var column = _c.value;
647
- if (column.contains(handle)) {
648
- sourceColumn = column;
649
- }
650
- }
651
- }
652
- catch (e_1_1) { e_1 = { error: e_1_1 }; }
653
- finally {
654
- try {
655
- if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
656
- }
657
- finally { if (e_1) throw e_1.error; }
658
- }
659
- for (var i = columns.length - 1; i >= 0; i--) {
660
- if (columns[i].classList.contains('sky-grid-header-locked')) {
661
- return true;
662
- }
663
- if (columns[i] === sourceColumn) {
664
- break;
665
- }
666
- }
667
- return false;
668
- };
669
- return SkyGridAdapterService;
670
- }());
671
- SkyGridAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
672
- SkyGridAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridAdapterService });
673
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridAdapterService, decorators: [{
674
- type: i0.Injectable
675
- }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
676
-
677
- /**
678
- * @internal
679
- */
680
- var SkyGridColumnModel = /** @class */ (function () {
681
- function SkyGridColumnModel(template, data) {
682
- this.isSortable = true;
683
- this.template = template;
684
- if (data) {
685
- this.id = data.id || data.field;
686
- this.type = data.type;
687
- this.field = data.field;
688
- this.heading = data.heading;
689
- this.inlineHelpPopover = data.inlineHelpPopover;
690
- this.width = data.width ? Number(data.width) : undefined;
691
- this.hidden = data.hidden;
692
- this.locked = data.locked;
693
- this.description = data.description;
694
- this.searchFunction = data.searchFunction;
695
- this.isSortable = data.isSortable;
696
- this.excludeFromHighlighting = data.excludeFromHighlighting;
697
- this.alignment = data.alignment;
698
- }
699
- }
700
- return SkyGridColumnModel;
701
- }());
702
-
703
- exports.SkyGridMessageType = void 0;
704
- (function (SkyGridMessageType) {
705
- /**
706
- * Selects the multiselect checkboxes for all rows in the grid.
707
- */
708
- SkyGridMessageType[SkyGridMessageType["SelectAll"] = 0] = "SelectAll";
709
- /**
710
- * Clears the multiselect checkboxes for all rows in the grid.
711
- */
712
- SkyGridMessageType[SkyGridMessageType["ClearAll"] = 1] = "ClearAll";
713
- /**
714
- * @internal
715
- */
716
- SkyGridMessageType[SkyGridMessageType["PromptDeleteRow"] = 2] = "PromptDeleteRow";
717
- /**
718
- * @internal
719
- */
720
- SkyGridMessageType[SkyGridMessageType["AbortDeleteRow"] = 3] = "AbortDeleteRow";
721
- })(exports.SkyGridMessageType || (exports.SkyGridMessageType = {}));
722
-
723
- /**
724
- * @internal
725
- */
726
- exports.SkyGridSelectedRowsSource = void 0;
727
- (function (SkyGridSelectedRowsSource) {
728
- SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["CheckboxChange"] = 0] = "CheckboxChange";
729
- SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["ClearAll"] = 1] = "ClearAll";
730
- SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["RowClick"] = 2] = "RowClick";
731
- SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["SelectAll"] = 3] = "SelectAll";
732
- SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["SelectedRowIdsChange"] = 4] = "SelectedRowIdsChange";
733
- })(exports.SkyGridSelectedRowsSource || (exports.SkyGridSelectedRowsSource = {}));
734
-
735
- var nextId = 0;
736
- var SkyGridComponent = /** @class */ (function () {
737
- function SkyGridComponent(affixService, changeDetector, dragulaService, gridAdapter, overlayService, skyWindow, uiConfigService) {
738
- this.affixService = affixService;
739
- this.changeDetector = changeDetector;
740
- this.dragulaService = dragulaService;
741
- this.gridAdapter = gridAdapter;
742
- this.overlayService = overlayService;
743
- this.skyWindow = skyWindow;
744
- this.uiConfigService = uiConfigService;
745
- /**
746
- * Indicates whether to enable the multiselect feature to display a column of
747
- * checkboxes on the left side of the grid. You can specify a unique ID with
748
- * the `multiselectRowId` property, but multiselect defaults to the `id` property on
749
- * the `data` object. To include options to select and clear all multiselect checkboxes,
750
- * we recommend the [list view grid](https://developer.blackbaud.com/skyux/components/list/grid) component.
751
- * @default false
752
- */
753
- this.enableMultiselect = false;
754
- /**
755
- * Specifies how the grid fits to its parent. The valid options are `width`,
756
- * which fits the grid to the parent's full width, and `scroll`, which allows the grid
757
- * to exceed the parent's width. If the grid does not have enough columns to fill
758
- * the parent's width, it always stretches to the parent's full width.
759
- * @default "width"
760
- */
761
- this.fit = 'width';
762
- /**
763
- * Indicates whether to display a toolbar with the grid.
764
- */
765
- this.hasToolbar = false;
766
- /**
767
- * Provides an observable to send commands to the grid.
768
- */
769
- this.messageStream = new rxjs.Subject();
770
- /**
771
- * Fires when the width of a column changes.
772
- */
773
- this.columnWidthChange = new i0.EventEmitter();
774
- /**
775
- * Fires when the selection of multiselect checkboxes changes.
776
- * Emits an array of IDs for the selected rows based on the `multiselectRowId` property
777
- * that the consumer provides.
778
- */
779
- this.multiselectSelectionChange = new i0.EventEmitter();
780
- /**
781
- * @internal
782
- */
783
- this.rowDeleteCancel = new i0.EventEmitter();
784
- /**
785
- * @internal
786
- */
787
- this.rowDeleteConfirm = new i0.EventEmitter();
788
- /**
789
- * Fires when the columns to display in the grid change or when the order of the columns changes.
790
- * The event emits an array of IDs for the displayed columns that reflects the column order.
791
- */
792
- this.selectedColumnIdsChange = new i0.EventEmitter();
793
- /**
794
- * Fires when the active sort field changes.
795
- */
796
- this.sortFieldChange = new i0.EventEmitter();
797
- this.columnResizeStep = 10;
798
- this.gridId = ++nextId;
799
- this.rowDeleteConfigs = [];
800
- this.maxColWidth = 9999; // This is an arbitrary number, as the input range picker won't work without a value.
801
- this.minColWidth = 50;
802
- this.showResizeBar = false;
803
- this.showTopScroll = false;
804
- this.isDraggingResizeHandle = false;
805
- this.isResized = false;
806
- this.ngUnsubscribe = new rxjs.Subject();
807
- this.rowDeleteContents = {};
808
- this.subscriptions = [];
809
- this.scrollTriggered = false;
810
- this.selectedColumnIdsSet = false;
811
- this.displayedColumns = new Array();
812
- this.items = new Array();
813
- this.currentSortField = new rxjs.BehaviorSubject({
814
- fieldSelector: '',
815
- descending: false,
816
- });
817
- }
818
- Object.defineProperty(SkyGridComponent.prototype, "columns", {
819
- get: function () {
820
- return this._columns;
821
- },
822
- /**
823
- * Specifies columns and column properties for the grid.
824
- */
825
- set: function (newColumns) {
826
- var oldColumns = this.columns;
827
- this._columns = newColumns;
828
- if (oldColumns) {
829
- this.transferColumnWidths(oldColumns, this.columns);
830
- this.isResized = false;
831
- this.setDisplayedColumns(true);
832
- }
833
- this.changeDetector.markForCheck();
834
- },
835
- enumerable: false,
836
- configurable: true
837
- });
838
- Object.defineProperty(SkyGridComponent.prototype, "selectedColumnIds", {
839
- get: function () {
840
- return this._selectedColumnIds;
841
- },
842
- /**
843
- * Specifies the columns to display in the grid based on the `id` or `field` properties
844
- * of the columns. If no columns are specified, then the grid displays all columns.
845
- */
846
- set: function (value) {
847
- var currentIds = this._selectedColumnIds;
848
- this._selectedColumnIds = value;
849
- if (this.columns) {
850
- this.setDisplayedColumns();
851
- }
852
- // Ensure that the ids have changed.
853
- if (!currentIds || !value || !this.arraysEqual(value, currentIds)) {
854
- // This variable ensures that we do not set user config options or fire the change event
855
- // on the first time that the columns are set up
856
- if (this.selectedColumnIdsSet) {
857
- this.setUserConfig({
858
- selectedColumnIds: value,
859
- });
860
- this.selectedColumnIdsChange.emit(this._selectedColumnIds);
861
- if (this.isResized) {
862
- this.resetTableWidth();
863
- }
864
- }
865
- }
866
- this.selectedColumnIdsSet = true;
867
- },
868
- enumerable: false,
869
- configurable: true
870
- });
871
- Object.defineProperty(SkyGridComponent.prototype, "selectedRowIds", {
872
- get: function () {
873
- return this._selectedRowIds;
874
- },
875
- /**
876
- * Specifies a set of IDs for the rows to select in a multiselect grid.
877
- * The IDs match the `id` properties of the `data` objects.
878
- * Rows with IDs that are not included are de-selected in the grid.
879
- */
880
- set: function (value) {
881
- if (value) {
882
- this._selectedRowIds = value;
883
- this.applySelectedRows();
884
- this.emitSelectedRows(exports.SkyGridSelectedRowsSource.SelectedRowIdsChange);
885
- }
886
- },
887
- enumerable: false,
888
- configurable: true
889
- });
890
- Object.defineProperty(SkyGridComponent.prototype, "tableWidth", {
891
- get: function () {
892
- return this.tableElementRef.nativeElement.offsetWidth;
893
- },
894
- enumerable: false,
895
- configurable: true
896
- });
897
- SkyGridComponent.prototype.ngOnInit = function () {
898
- var _this = this;
899
- this.messageStream
900
- .pipe(operators.takeUntil(this.ngUnsubscribe))
901
- .subscribe(function (message) {
902
- _this.handleIncomingMessages(message);
903
- });
904
- };
905
- SkyGridComponent.prototype.ngAfterContentInit = function () {
906
- var _this = this;
907
- if (this.settingsKey) {
908
- this.applyUserConfig().then(function () {
909
- _this.initColumns();
910
- });
911
- }
912
- else {
913
- this.initColumns();
914
- }
915
- // Setup column drag-and-drop.
916
- this.gridAdapter.initializeDragAndDrop(this.dragulaService, function (selectedColumnIds) {
917
- _this.onHeaderDrop(selectedColumnIds);
918
- });
919
- this.applySelectedRows();
920
- };
921
- SkyGridComponent.prototype.ngAfterViewInit = function () {
922
- this.checkUserColumnWidthsForScroll();
923
- };
924
- SkyGridComponent.prototype.ngOnChanges = function (changes) {
925
- var _this = this;
926
- if (changes.columns && this.columns) {
927
- if (this.selectedColumnIds) {
928
- this.selectedColumnIds = this.selectedColumnIds.filter(function (columnId) {
929
- return _this.columns.find(function (column) { return column.id === columnId; });
930
- });
931
- }
932
- this.setDisplayedColumns(true);
933
- }
934
- if (changes.data && this.data) {
935
- this.transformData();
936
- // This set timeout is necessary to ensure the data has rendered in the grid
937
- setTimeout(function () {
938
- // This cleans up any lingering row deletes for items that have been removed.
939
- Object.keys(_this.rowDeleteContents).forEach(function (id) {
940
- if (!_this.data.find(function (item) { return item.id === id; })) {
941
- _this.destroyRowDelete(id);
942
- }
943
- else {
944
- // The rows re-render thus messing up the affixers. We must reaffix them so that things
945
- // continue to render correctly.
946
- var rowElement = _this.tableElementRef.nativeElement.querySelector('[sky-cmp-id="' + id + '"]');
947
- _this.rowDeleteContents[id].affixer.affixTo(rowElement, {
948
- autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
949
- isSticky: true,
950
- placement: 'above',
951
- verticalAlignment: 'top',
952
- horizontalAlignment: 'left',
953
- enableAutoFit: false,
954
- });
955
- }
956
- });
957
- _this.checkUserColumnWidthsForScroll();
958
- });
959
- }
960
- if (changes.sortField) {
961
- this.setSortHeaders();
962
- }
963
- };
964
- SkyGridComponent.prototype.ngOnDestroy = function () {
965
- var _this = this;
966
- this.subscriptions.forEach(function (subscription) {
967
- subscription.unsubscribe();
968
- });
969
- this.multiselectSelectionChange.complete();
970
- this.ngUnsubscribe.next();
971
- this.ngUnsubscribe.complete();
972
- Object.keys(this.rowDeleteContents).forEach(function (id) {
973
- _this.destroyRowDelete(id);
974
- });
975
- };
976
- SkyGridComponent.prototype.onWindowResize = function () {
977
- this.checkUserColumnWidthsForScroll();
978
- };
979
- SkyGridComponent.prototype.getTopScrollWidth = function () {
980
- return this.tableElementRef.nativeElement.scrollWidth;
981
- };
982
- SkyGridComponent.prototype.getTableClassNames = function () {
983
- var classNames = [];
984
- if (this.fit !== 'scroll') {
985
- classNames.push('sky-grid-fit');
986
- }
987
- if (this.hasToolbar) {
988
- classNames.push('sky-grid-has-toolbar');
989
- }
990
- return this.addDelimeter(classNames, ' ');
991
- };
992
- SkyGridComponent.prototype.getTableHeaderClassNames = function (column) {
993
- var classNames = [];
994
- if (column && column.locked) {
995
- classNames.push('sky-grid-header-locked');
996
- }
997
- return this.addDelimeter(classNames, ' ');
998
- };
999
- SkyGridComponent.prototype.getCaretIconNames = function (column) {
1000
- var iconNames = [];
1001
- this.getSortDirection(column.field).subscribe(function (sortDir) {
1002
- if (sortDir === 'asc') {
1003
- iconNames.push('caret-up');
1004
- }
1005
- if (sortDir === 'desc') {
1006
- iconNames.push('caret-down');
1007
- }
1008
- });
1009
- return this.addDelimeter(iconNames, ' ');
1010
- };
1011
- SkyGridComponent.prototype.onKeydown = function (event, column) {
1012
- var key = event.key.toLowerCase();
1013
- if (key === 'enter' || key === ' ') {
1014
- this.sortByColumn(column);
1015
- }
1016
- };
1017
- SkyGridComponent.prototype.sortByColumn = function (column) {
1018
- var _this = this;
1019
- if (!this.isDraggingResizeHandle && column.isSortable) {
1020
- this.currentSortField
1021
- .pipe(operators.take(1), operators.map(function (field) {
1022
- var selector = {
1023
- fieldSelector: column.field,
1024
- descending: true,
1025
- };
1026
- if (field &&
1027
- field.fieldSelector === column.field &&
1028
- field.descending) {
1029
- selector = {
1030
- fieldSelector: column.field,
1031
- descending: false,
1032
- };
1033
- }
1034
- _this.sortFieldChange.emit(selector);
1035
- _this.currentSortField.next(selector);
1036
- }))
1037
- .subscribe();
1038
- }
1039
- };
1040
- SkyGridComponent.prototype.getSortDirection = function (columnField) {
1041
- return this.currentSortField.pipe(operators.distinctUntilChanged(), operators.map(function (field) {
1042
- return field.fieldSelector === columnField
1043
- ? field.descending
1044
- ? 'desc'
1045
- : 'asc'
1046
- : undefined;
1047
- }));
1048
- };
1049
- SkyGridComponent.prototype.getAriaSortDirection = function (column) {
1050
- return this.currentSortField.pipe(operators.distinctUntilChanged(), operators.map(function (field) {
1051
- return field.fieldSelector === column.field
1052
- ? field.descending
1053
- ? 'descending'
1054
- : 'ascending'
1055
- : column.isSortable
1056
- ? 'none'
1057
- : undefined;
1058
- }));
1059
- };
1060
- SkyGridComponent.prototype.getCaretVisibility = function (columnField) {
1061
- return this.currentSortField.pipe(operators.distinctUntilChanged(), operators.map(function (field) {
1062
- return field.fieldSelector === columnField ? 'visible' : 'hidden';
1063
- }));
1064
- };
1065
- SkyGridComponent.prototype.getHelpInlineClass = function (columnField) {
1066
- return this.getCaretVisibility(columnField).pipe(operators.map(function (visibility) {
1067
- return visibility === 'hidden';
1068
- }));
1069
- };
1070
- SkyGridComponent.prototype.onMultiselectCheckboxChange = function () {
1071
- this.emitSelectedRows(exports.SkyGridSelectedRowsSource.CheckboxChange);
1072
- };
1073
- SkyGridComponent.prototype.updateColumnHeading = function (change) {
1074
- var foundColumnModel = this.columns.find(function (column) {
1075
- return ((change.id !== undefined && change.id === column.id) ||
1076
- (change.field !== undefined && change.field === column.field));
1077
- });
1078
- /* istanbul ignore else */
1079
- if (foundColumnModel) {
1080
- foundColumnModel.heading = change.value;
1081
- this.changeDetector.markForCheck();
1082
- }
1083
- };
1084
- SkyGridComponent.prototype.updateInlineHelpPopover = function (change) {
1085
- var foundColumnModel = this.columns.find(function (column) {
1086
- return ((change.id !== undefined && change.id === column.id) ||
1087
- (change.field !== undefined && change.field === column.field));
1088
- });
1089
- /* istanbul ignore else */
1090
- if (foundColumnModel) {
1091
- foundColumnModel.inlineHelpPopover = change.value;
1092
- this.changeDetector.markForCheck();
1093
- }
1094
- };
1095
- SkyGridComponent.prototype.updateColumnDescription = function (change) {
1096
- var foundColumnModel = this.columns.find(function (column) {
1097
- return ((change.id !== undefined && change.id === column.id) ||
1098
- (change.field !== undefined && change.field === column.field));
1099
- });
1100
- /* istanbul ignore else */
1101
- if (foundColumnModel) {
1102
- foundColumnModel.description = change.value;
1103
- this.changeDetector.markForCheck();
1104
- }
1105
- };
1106
- SkyGridComponent.prototype.onResizeColumnStart = function (event) {
1107
- var _this = this;
1108
- // If this table hasn't been resized, initialize all the resize widths.
1109
- if (!this.isResized) {
1110
- this.initColumnWidths();
1111
- this.isResized = true;
1112
- }
1113
- this.initializeResizeColumn(event);
1114
- this.isDraggingResizeHandle = true;
1115
- this.xPosStart = event.pageX;
1116
- this.showResizeBar = true;
1117
- // Show visual indicator of where mouse is dragging (resizeBar).
1118
- this.changeDetector.detectChanges();
1119
- this.setResizeBarPosition(event.pageX);
1120
- event.preventDefault();
1121
- event.stopPropagation();
1122
- var mouseMoveEvent = rxjs.fromEvent(document, 'mousemove');
1123
- var touchMoveEvent = rxjs.fromEvent(document, 'touchmove');
1124
- rxjs.merge(mouseMoveEvent, touchMoveEvent)
1125
- .pipe(operators.takeWhile(function () {
1126
- return _this.isDraggingResizeHandle;
1127
- }))
1128
- .subscribe(function (moveEvent) {
1129
- _this.onResizeHandleMove(moveEvent);
1130
- });
1131
- var mouseUpEvent = rxjs.fromEvent(document, 'mouseup');
1132
- var touchEndEvent = rxjs.fromEvent(document, 'touchend');
1133
- rxjs.merge(mouseUpEvent, touchEndEvent)
1134
- .pipe(operators.takeWhile(function () {
1135
- return _this.isDraggingResizeHandle;
1136
- }))
1137
- .subscribe(function (endEvent) {
1138
- _this.onResizeHandleRelease(endEvent);
1139
- });
1140
- };
1141
- SkyGridComponent.prototype.onKeydownResizeCol = function (event) {
1142
- // If this table hasn't been resized, initialize all the resize widths.
1143
- if (!this.isResized) {
1144
- this.initColumnWidths();
1145
- this.isResized = true;
1146
- }
1147
- this.initializeResizeColumn(event);
1148
- };
1149
- SkyGridComponent.prototype.onInputChangeResizeCol = function (event) {
1150
- var input = event.target;
1151
- var newValue = Number(input.value);
1152
- var deltaX = newValue - this.startColumnWidth;
1153
- this.resizeColumnByIndex(this.activeResizeColumnIndex, newValue, deltaX);
1154
- var left = input.getBoundingClientRect().left;
1155
- this.setResizeBarPosition(left);
1156
- };
1157
- SkyGridComponent.prototype.onResizeHandleMove = function (event) {
1158
- var deltaX = event.pageX - this.xPosStart;
1159
- var newColWidth = this.startColumnWidth + deltaX;
1160
- if (newColWidth <= this.minColWidth) {
1161
- event.stopPropagation();
1162
- return;
1163
- }
1164
- var max = this.getMaxRangeByIndex(this.activeResizeColumnIndex);
1165
- if (this.fit === 'width' && newColWidth > max) {
1166
- event.stopPropagation();
1167
- return;
1168
- }
1169
- this.setResizeBarPosition(event.pageX);
1170
- };
1171
- SkyGridComponent.prototype.onResizeHandleBlur = function (event) {
1172
- this.showResizeBar = false;
1173
- };
1174
- SkyGridComponent.prototype.onResizeHandleFocus = function (event) {
1175
- this.showResizeBar = true;
1176
- this.changeDetector.detectChanges();
1177
- var target = event.target;
1178
- var left = target.getBoundingClientRect().left;
1179
- this.setResizeBarPosition(left);
1180
- };
1181
- SkyGridComponent.prototype.onResizeHandleRelease = function (event) {
1182
- this.showResizeBar = false;
1183
- var deltaX = event.pageX - this.xPosStart;
1184
- var newColWidth = this.startColumnWidth + deltaX;
1185
- this.resizeColumnByIndex(this.activeResizeColumnIndex, newColWidth, deltaX);
1186
- this.isDraggingResizeHandle = false;
1187
- this.activeResizeColumnIndex = undefined;
1188
- event.stopPropagation();
1189
- this.changeDetector.markForCheck();
1190
- };
1191
- SkyGridComponent.prototype.onRowClick = function (event, selectedItem) {
1192
- /* istanbul ignore else */
1193
- if (this.enableMultiselect) {
1194
- if (event.target === event.currentTarget ||
1195
- !this.isInteractiveElement(event)) {
1196
- selectedItem.isSelected = !selectedItem.isSelected;
1197
- this.changeDetector.markForCheck();
1198
- this.emitSelectedRows(exports.SkyGridSelectedRowsSource.RowClick);
1199
- }
1200
- }
1201
- };
1202
- SkyGridComponent.prototype.isRowHighlighted = function (id) {
1203
- if (this.rowHighlightedId) {
1204
- return id === this.rowHighlightedId;
1205
- }
1206
- return false;
1207
- };
1208
- SkyGridComponent.prototype.getRowHeight = function (index) {
1209
- return this.gridAdapter.getRowHeight(this.tableElementRef, index);
1210
- };
1211
- SkyGridComponent.prototype.cancelRowDelete = function (id) {
1212
- this.rowDeleteConfigs = this.rowDeleteConfigs.filter(function (config) { return config.id !== id; });
1213
- this.rowDeleteCancel.emit({ id: id });
1214
- this.destroyRowDelete(id);
1215
- };
1216
- SkyGridComponent.prototype.confirmRowDelete = function (id) {
1217
- this.rowDeleteConfigs.find(function (config) { return config.id === id; }).pending = true;
1218
- this.rowDeleteConfirm.emit({ id: id });
1219
- };
1220
- SkyGridComponent.prototype.getRowDeleteItem = function (id) {
1221
- return this.rowDeleteConfigs.find(function (rowDelete) { return rowDelete.id === id; });
1222
- };
1223
- // Prevent touch devices from inadvertently scrolling grid while dragging columns.
1224
- SkyGridComponent.prototype.onTouchMove = function (event) {
1225
- event.preventDefault();
1226
- };
1227
- SkyGridComponent.prototype.onTopScroll = function (event) {
1228
- /* sanity check */
1229
- /* istanbul ignore else */
1230
- if (this.tableContainerElementRef) {
1231
- if (this.scrollTriggered) {
1232
- this.scrollTriggered = false;
1233
- this.tableContainerElementRef.nativeElement.scrollLeft =
1234
- this.topScrollContainerElementRef.nativeElement.scrollLeft;
1235
- }
1236
- else {
1237
- this.scrollTriggered = true;
1238
- }
1239
- }
1240
- };
1241
- SkyGridComponent.prototype.onGridScroll = function (event) {
1242
- /* sanity check */
1243
- /* istanbul ignore else */
1244
- if (this.topScrollContainerElementRef) {
1245
- if (this.scrollTriggered) {
1246
- this.scrollTriggered = false;
1247
- this.topScrollContainerElementRef.nativeElement.scrollLeft =
1248
- this.tableContainerElementRef.nativeElement.scrollLeft;
1249
- }
1250
- else {
1251
- this.scrollTriggered = true;
1252
- }
1253
- }
1254
- };
1255
- SkyGridComponent.prototype.checkUserColumnWidthsForScroll = function () {
1256
- var _this = this;
1257
- if (!this.showTopScroll &&
1258
- this.columnElementRefs &&
1259
- this.columnElementRefs.length > 0) {
1260
- var columnsWidthTotal_1 = 0;
1261
- var windowSize_1 = this.skyWindow.nativeWindow.innerWidth;
1262
- this.columnElementRefs.forEach(function (col) {
1263
- if (!_this.showTopScroll) {
1264
- var computedWidth = parseFloat(window.getComputedStyle(col.nativeElement).width);
1265
- var offsetWidth = col.nativeElement.offsetWidth;
1266
- var width = Math.max(computedWidth || offsetWidth, _this.minColWidth);
1267
- columnsWidthTotal_1 = columnsWidthTotal_1 + width;
1268
- if (columnsWidthTotal_1 > windowSize_1) {
1269
- _this.showTopScroll = true;
1270
- setTimeout(function () {
1271
- _this.changeDetector.markForCheck();
1272
- });
1273
- }
1274
- }
1275
- });
1276
- }
1277
- };
1278
- SkyGridComponent.prototype.multiselectSelectAll = function () {
1279
- for (var i = 0; i < this.items.length; i++) {
1280
- this.items[i].isSelected = true;
1281
- }
1282
- this.changeDetector.markForCheck();
1283
- this.emitSelectedRows(exports.SkyGridSelectedRowsSource.SelectAll);
1284
- };
1285
- SkyGridComponent.prototype.multiselectClearAll = function () {
1286
- for (var i = 0; i < this.items.length; i++) {
1287
- this.items[i].isSelected = false;
1288
- }
1289
- this.changeDetector.markForCheck();
1290
- this.emitSelectedRows(exports.SkyGridSelectedRowsSource.ClearAll);
1291
- };
1292
- SkyGridComponent.prototype.handleIncomingMessages = function (message) {
1293
- var _this = this;
1294
- /* tslint:disable-next-line:switch-default */
1295
- switch (message.type) {
1296
- case exports.SkyGridMessageType.SelectAll:
1297
- this.multiselectSelectAll();
1298
- break;
1299
- case exports.SkyGridMessageType.ClearAll:
1300
- this.multiselectClearAll();
1301
- break;
1302
- case exports.SkyGridMessageType.PromptDeleteRow:
1303
- /* sanity check */
1304
- /* istanbul ignore else */
1305
- if (message.data && message.data.promptDeleteRow) {
1306
- var existingConfig = this.rowDeleteConfigs.find(function (config) { return config.id === message.data.promptDeleteRow.id; });
1307
- if (existingConfig) {
1308
- existingConfig.pending = false;
1309
- }
1310
- else {
1311
- this.rowDeleteConfigs.push({
1312
- id: message.data.promptDeleteRow.id,
1313
- pending: false,
1314
- });
1315
- var overlay_1 = this.overlayService.create({
1316
- enableScroll: true,
1317
- showBackdrop: false,
1318
- closeOnNavigation: true,
1319
- enableClose: false,
1320
- enablePointerEvents: true,
1321
- });
1322
- overlay_1.attachTemplate(this.inlineDeleteTemplateRef, {
1323
- $implicit: this.data.find(function (item) { return item.id === message.data.promptDeleteRow.id; }),
1324
- });
1325
- /**
1326
- * We are manually setting the z-index here because overlays will always be on top of
1327
- * the omnibar. This manual setting is 1 less than the omnibar's z-index of 1000. We
1328
- * discussed changing the overlay service to allow for this but decided against that
1329
- * change at this time due to its niche nature.
1330
- */
1331
- overlay_1.componentRef.instance.zIndex = '999';
1332
- setTimeout(function () {
1333
- var inlineDeleteRef = _this.inlineDeleteRefs
1334
- .toArray()
1335
- .find(function (elRef) {
1336
- return (elRef.nativeElement.id ===
1337
- 'row-delete-ref-' + message.data.promptDeleteRow.id);
1338
- });
1339
- var affixer = _this.affixService.createAffixer(inlineDeleteRef);
1340
- var rowElement = _this.tableElementRef.nativeElement.querySelector('[sky-cmp-id="' + message.data.promptDeleteRow.id + '"]');
1341
- affixer.affixTo(rowElement, {
1342
- autoFitContext: i1.SkyAffixAutoFitContext.Viewport,
1343
- isSticky: true,
1344
- placement: 'above',
1345
- verticalAlignment: 'top',
1346
- horizontalAlignment: 'left',
1347
- enableAutoFit: false,
1348
- });
1349
- _this.rowDeleteContents[message.data.promptDeleteRow.id] = {
1350
- affixer: affixer,
1351
- overlay: overlay_1,
1352
- };
1353
- });
1354
- }
1355
- }
1356
- break;
1357
- case exports.SkyGridMessageType.AbortDeleteRow:
1358
- /* sanity check */
1359
- /* istanbul ignore else */
1360
- if (message.data && message.data.abortDeleteRow) {
1361
- this.rowDeleteConfigs = this.rowDeleteConfigs.filter(function (config) { return config.id !== message.data.abortDeleteRow.id; });
1362
- this.destroyRowDelete(message.data.abortDeleteRow.id);
1363
- }
1364
- break;
1365
- }
1366
- this.changeDetector.markForCheck();
1367
- };
1368
- SkyGridComponent.prototype.onHeaderDrop = function (newColumnIds) {
1369
- // update selected columnIds
1370
- this.selectedColumnIdsSet = true;
1371
- this.selectedColumnIds = newColumnIds;
1372
- // mark for check because we are using ChangeDetectionStrategy.onPush
1373
- this.changeDetector.markForCheck();
1374
- };
1375
- SkyGridComponent.prototype.setDisplayedColumns = function (respectHidden) {
1376
- var _this = this;
1377
- if (respectHidden === void 0) { respectHidden = false; }
1378
- /* sanity check */
1379
- /* istanbul ignore else */
1380
- if (this.columns) {
1381
- if (this.selectedColumnIds !== undefined) {
1382
- // setup displayed columns
1383
- this.displayedColumns = this.selectedColumnIds
1384
- .filter(function (columnId) {
1385
- return _this.columns.find(function (column) { return column.id === columnId; });
1386
- })
1387
- .map(function (columnId) {
1388
- return _this.columns.filter(function (column) { return column.id === columnId; })[0];
1389
- });
1390
- }
1391
- else if (respectHidden) {
1392
- this.displayedColumns = this.columns.filter(function (column) {
1393
- return !column.hidden;
1394
- });
1395
- }
1396
- else {
1397
- this.displayedColumns = this.columns;
1398
- }
1399
- }
1400
- };
1401
- SkyGridComponent.prototype.transformData = function () {
1402
- // Transform data into object with id and data properties
1403
- if (this.data &&
1404
- this.data.length > 0 &&
1405
- this.data[0].id &&
1406
- !this.data[0].data) {
1407
- if (this.multiselectRowId) {
1408
- this.items = this.getGridDataWithSelectedRows();
1409
- }
1410
- else {
1411
- this.items = this.data.map(function (item) { return new listBuilderCommon.ListItemModel(item.id, item); });
1412
- }
1413
- }
1414
- else {
1415
- this.items = this.data;
1416
- }
1417
- };
1418
- SkyGridComponent.prototype.getGridDataWithSelectedRows = function () {
1419
- var _this = this;
1420
- var selectedRows = this.getSelectedRows();
1421
- return this.data.map(function (item) {
1422
- var checked;
1423
- if (Object.prototype.hasOwnProperty.call(item, _this.multiselectRowId)) {
1424
- checked = selectedRows.indexOf(item[_this.multiselectRowId]) > -1;
1425
- }
1426
- else {
1427
- checked = selectedRows.indexOf(item.id) > -1;
1428
- }
1429
- return new listBuilderCommon.ListItemModel(item.id, item, checked);
1430
- });
1431
- };
1432
- SkyGridComponent.prototype.applySelectedRows = function () {
1433
- if (this.items && this.items.length > 0 && this.selectedRowIds) {
1434
- for (var i = 0; i < this.items.length; i++) {
1435
- this.items[i].isSelected =
1436
- this.selectedRowIds.indexOf(this.items[i].id) > -1;
1437
- }
1438
- this.changeDetector.markForCheck();
1439
- }
1440
- };
1441
- SkyGridComponent.prototype.setSortHeaders = function () {
1442
- this.currentSortField.next(this.sortField || { fieldSelector: '', descending: false });
1443
- };
1444
- SkyGridComponent.prototype.getColumnsFromComponent = function () {
1445
- this.columns = this.columnComponents.map(function (columnComponent) {
1446
- return new SkyGridColumnModel(columnComponent.template, columnComponent);
1447
- });
1448
- };
1449
- SkyGridComponent.prototype.updateColumns = function () {
1450
- var _this = this;
1451
- this.getColumnsFromComponent();
1452
- // This set timeout is necessary to ensure the columns have rendered in the grid
1453
- setTimeout(function () {
1454
- _this.checkUserColumnWidthsForScroll();
1455
- });
1456
- };
1457
- SkyGridComponent.prototype.resizeColumnByIndex = function (columnIndex, newColWidth, deltaX) {
1458
- var column = this.getColumnModelByIndex(columnIndex);
1459
- // Prevent accidental shrinkage below minimum width.
1460
- if (newColWidth <= this.minColWidth) {
1461
- deltaX = deltaX + this.minColWidth - newColWidth;
1462
- newColWidth = this.minColWidth;
1463
- }
1464
- // fit=width adds/removes width from the last column
1465
- // fit=scroll adds/removes width from the table
1466
- if (this.fit === 'width') {
1467
- var lastColumn = this.getLastDisplayedColumn();
1468
- // Prevent accidental growth that would bump last column off screen.
1469
- var max = this.getMaxRangeByIndex(columnIndex);
1470
- if (newColWidth > max) {
1471
- newColWidth = max;
1472
- deltaX = max - this.startColumnWidth;
1473
- }
1474
- column.width = newColWidth;
1475
- lastColumn.width = lastColumn.width - deltaX;
1476
- this.updateMaxRange();
1477
- }
1478
- else {
1479
- this.gridAdapter.setStyle(this.tableElementRef, 'width', this.tableWidth + deltaX + "px");
1480
- column.width = newColWidth;
1481
- }
1482
- this.changeDetector.detectChanges();
1483
- this.columnWidthChange.emit(this.getColumnWidthModelChange());
1484
- };
1485
- SkyGridComponent.prototype.initColumnWidths = function () {
1486
- var _this = this;
1487
- // Establish table width.
1488
- this.showTopScroll = true;
1489
- // Set column widths based on the width initially given by the browser.
1490
- // computedWidth prevents accidental overflow for browsers with sub-pixel widths.
1491
- this.columnElementRefs.forEach(function (col, index) {
1492
- var computedWidth = parseFloat(window.getComputedStyle(col.nativeElement).width);
1493
- var offsetWidth = col.nativeElement.offsetWidth;
1494
- /* istanbul ignore next */
1495
- _this.getColumnModelByIndex(index).width = Math.max(computedWidth || offsetWidth, _this.minColWidth);
1496
- });
1497
- // 'scroll' tables should be allowed to expand outside of their constraints.
1498
- if (this.fit === 'scroll') {
1499
- this.gridAdapter.setStyle(this.tableElementRef, 'min-width', 'auto');
1500
- }
1501
- // Update max limits for input ranges.
1502
- if (this.fit === 'width') {
1503
- this.updateMaxRange();
1504
- }
1505
- this.changeDetector.detectChanges();
1506
- };
1507
- SkyGridComponent.prototype.transferColumnWidths = function (oldColumns, newColumns) {
1508
- var e_1, _a;
1509
- /* sanity check */
1510
- /* istanbul ignore else */
1511
- if (oldColumns && newColumns) {
1512
- var _loop_1 = function (oldColumn) {
1513
- if (oldColumn.width) {
1514
- var matchingColumn = newColumns.find(function (newColumn) { return oldColumn.id === newColumn.id; });
1515
- if (matchingColumn && !matchingColumn.width) {
1516
- matchingColumn.width = oldColumn.width;
1517
- }
1518
- }
1519
- };
1520
- try {
1521
- for (var oldColumns_1 = __values(oldColumns), oldColumns_1_1 = oldColumns_1.next(); !oldColumns_1_1.done; oldColumns_1_1 = oldColumns_1.next()) {
1522
- var oldColumn = oldColumns_1_1.value;
1523
- _loop_1(oldColumn);
1524
- }
1525
- }
1526
- catch (e_1_1) { e_1 = { error: e_1_1 }; }
1527
- finally {
1528
- try {
1529
- if (oldColumns_1_1 && !oldColumns_1_1.done && (_a = oldColumns_1.return)) _a.call(oldColumns_1);
1530
- }
1531
- finally { if (e_1) throw e_1.error; }
1532
- }
1533
- }
1534
- this.changeDetector.markForCheck();
1535
- };
1536
- SkyGridComponent.prototype.getColumnWidthModelChange = function () {
1537
- var columnWidthModelChange = new Array();
1538
- this.columns.forEach(function (column) {
1539
- columnWidthModelChange.push({
1540
- id: column.id,
1541
- field: column.field,
1542
- width: column.width,
1543
- });
1544
- });
1545
- return columnWidthModelChange;
1546
- };
1547
- SkyGridComponent.prototype.updateMaxRange = function () {
1548
- var _this = this;
1549
- var leftoverWidth = this.getLastDisplayedColumn().width - this.minColWidth;
1550
- this.displayedColumns.forEach(function (column, index) {
1551
- var newMaxRange = column.width + leftoverWidth;
1552
- var rangeInput = _this.getRangeInputByIndex(index);
1553
- rangeInput.nativeElement.max = newMaxRange;
1554
- rangeInput.nativeElement.setAttribute('aria-valuemax', newMaxRange);
1555
- });
1556
- };
1557
- SkyGridComponent.prototype.initializeResizeColumn = function (event) {
1558
- var clickTarget = event.target;
1559
- this.activeResizeColumnIndex = clickTarget.getAttribute('sky-cmp-index');
1560
- var column = this.getColumnModelByIndex(this.activeResizeColumnIndex);
1561
- this.startColumnWidth = column.width;
1562
- };
1563
- SkyGridComponent.prototype.resetTableWidth = function () {
1564
- var _this = this;
1565
- this.skyWindow.nativeWindow.setTimeout(function () {
1566
- _this.gridAdapter.setStyle(_this.tableElementRef, 'width', "auto");
1567
- _this.changeDetector.detectChanges();
1568
- _this.gridAdapter.setStyle(_this.tableElementRef, 'width', _this.tableWidth + "px");
1569
- _this.changeDetector.detectChanges();
1570
- });
1571
- };
1572
- SkyGridComponent.prototype.getRangeInputByIndex = function (index) {
1573
- return this.columnRangeInputElementRefs.find(function (input) { return input.nativeElement.getAttribute('sky-cmp-index') === index.toString(); });
1574
- };
1575
- SkyGridComponent.prototype.getColumnModelByIndex = function (index) {
1576
- return this.displayedColumns[Number(index)];
1577
- };
1578
- SkyGridComponent.prototype.getMaxRangeByIndex = function (index) {
1579
- var columnElementRef = this.columnElementRefs.find(function (th) { return th.nativeElement.getAttribute('sky-cmp-index') === index; });
1580
- var rangeInput = columnElementRef.nativeElement.querySelector('.sky-grid-column-input-aria-only');
1581
- return Number(rangeInput.max);
1582
- };
1583
- SkyGridComponent.prototype.getLastDisplayedColumn = function () {
1584
- return this.getColumnModelByIndex(this.displayedColumns.length - 1);
1585
- };
1586
- SkyGridComponent.prototype.addDelimeter = function (text, delimiter) {
1587
- return text.filter(function (val) { return val; }).join(delimiter);
1588
- };
1589
- SkyGridComponent.prototype.destroyRowDelete = function (id) {
1590
- var rowDeleteContents = this.rowDeleteContents[id];
1591
- /* istanbul ignore else */
1592
- if (rowDeleteContents) {
1593
- rowDeleteContents.affixer.destroy();
1594
- this.overlayService.close(rowDeleteContents.overlay);
1595
- delete this.rowDeleteContents[id];
1596
- }
1597
- };
1598
- SkyGridComponent.prototype.emitSelectedRows = function (source) {
1599
- var selectedRows = {
1600
- selectedRowIds: this.getSelectedRows(),
1601
- source: source,
1602
- };
1603
- this.multiselectSelectionChange.emit(selectedRows);
1604
- };
1605
- SkyGridComponent.prototype.getSelectedRows = function () {
1606
- var _this = this;
1607
- return this.items
1608
- .filter(function (item) {
1609
- return item.isSelected;
1610
- })
1611
- .map(function (item) {
1612
- if (Object.prototype.hasOwnProperty.call(item.data, _this.multiselectRowId)) {
1613
- return item.data[_this.multiselectRowId];
1614
- }
1615
- return item.id;
1616
- });
1617
- };
1618
- SkyGridComponent.prototype.isInteractiveElement = function (event) {
1619
- var interactiveElSelectors = "\n a,\n button,\n input,\n label,\n option,\n select,\n textarea,\n details,\n dialog,\n menu,\n menuitem,\n summary";
1620
- return event.target.closest(interactiveElSelectors);
1621
- };
1622
- SkyGridComponent.prototype.setResizeBarPosition = function (xPosition) {
1623
- var parentScroll = this.tableContainerElementRef.nativeElement.scrollLeft;
1624
- var resizeBarX = xPosition -
1625
- this.tableElementRef.nativeElement.getBoundingClientRect().left -
1626
- parentScroll;
1627
- this.gridAdapter.setStyle(this.resizeBar, 'left', resizeBarX + 'px');
1628
- };
1629
- SkyGridComponent.prototype.applyUserConfig = function () {
1630
- var _this = this;
1631
- return new Promise(function (resolve) {
1632
- _this.uiConfigService
1633
- .getConfig(_this.settingsKey)
1634
- .pipe(operators.take(1))
1635
- .subscribe(function (config) {
1636
- /* istanbul ignore else */
1637
- if (config && config.selectedColumnIds) {
1638
- // Remove any columnIds that don't exist in the current data set.
1639
- _this.selectedColumnIds = config.selectedColumnIds.filter(function (id) { return _this.columns.find(function (column) { return column.id === id; }); });
1640
- _this.changeDetector.markForCheck();
1641
- }
1642
- resolve();
1643
- }, function () {
1644
- resolve();
1645
- });
1646
- });
1647
- };
1648
- SkyGridComponent.prototype.setUserConfig = function (config) {
1649
- if (!this.settingsKey) {
1650
- return;
1651
- }
1652
- this.uiConfigService
1653
- .setConfig(this.settingsKey, config)
1654
- .pipe(operators.takeUntil(this.ngUnsubscribe))
1655
- .subscribe(
1656
- // eslint-disable-next-line @typescript-eslint/no-empty-function
1657
- function () { }, function (err) {
1658
- console.warn('Could not save grid settings.');
1659
- console.warn(err);
1660
- });
1661
- };
1662
- SkyGridComponent.prototype.initColumns = function () {
1663
- var _this = this;
1664
- /* istanbul ignore else */
1665
- if (this.columnComponents.length !== 0 || this.columns !== undefined) {
1666
- /* istanbul ignore else */
1667
- /* sanity check */
1668
- if (this.columnComponents.length > 0) {
1669
- this.getColumnsFromComponent();
1670
- }
1671
- this.transformData();
1672
- this.setDisplayedColumns(true);
1673
- this.changeDetector.markForCheck();
1674
- }
1675
- // Watch for added/removed columns:
1676
- this.subscriptions.push(this.columnComponents.changes.subscribe(function () { return _this.updateColumns(); }));
1677
- // Watch for column heading changes:
1678
- this.columnComponents.forEach(function (comp) {
1679
- _this.subscriptions.push(comp.headingModelChanges.subscribe(function (change) {
1680
- _this.updateColumnHeading(change);
1681
- }));
1682
- _this.subscriptions.push(comp.descriptionModelChanges.subscribe(function (change) {
1683
- _this.updateColumnDescription(change);
1684
- }));
1685
- _this.subscriptions.push(comp.inlineHelpPopoverModelChanges.subscribe(function (change) {
1686
- _this.updateInlineHelpPopover(change);
1687
- }));
1688
- });
1689
- };
1690
- SkyGridComponent.prototype.arraysEqual = function (arrayA, arrayB) {
1691
- return (arrayA.length === arrayB.length &&
1692
- arrayA.every(function (value, index) { return value === arrayB[index]; }));
1693
- };
1694
- return SkyGridComponent;
1695
- }());
1696
- SkyGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.DragulaService }, { token: SkyGridAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyUIConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
1697
- SkyGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridComponent, selector: "sky-grid", inputs: { columns: "columns", data: "data", enableMultiselect: "enableMultiselect", fit: "fit", hasToolbar: "hasToolbar", height: "height", highlightText: "highlightText", messageStream: "messageStream", multiselectRowId: "multiselectRowId", rowHighlightedId: "rowHighlightedId", selectedColumnIds: "selectedColumnIds", selectedRowIds: "selectedRowIds", settingsKey: "settingsKey", sortField: "sortField", width: "width" }, outputs: { columnWidthChange: "columnWidthChange", multiselectSelectionChange: "multiselectSelectionChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange", sortFieldChange: "sortFieldChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyGridAdapterService], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "tableContainerElementRef", first: true, predicate: ["gridContainer"], descendants: true }, { propertyName: "tableElementRef", first: true, predicate: ["gridTable"], descendants: true }, { propertyName: "topScrollContainerElementRef", first: true, predicate: ["topScrollContainer"], descendants: true }, { propertyName: "resizeBar", first: true, predicate: ["resizeBar"], descendants: true }, { propertyName: "columnElementRefs", predicate: ["gridCol"], descendants: true }, { propertyName: "columnRangeInputElementRefs", predicate: ["colSizeRange"], descendants: true }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr dragula=\"sky-grid-heading\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"\n sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n \"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur($event)\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\n </th>\n </tr>\n </thead>\n <tbody class=\"sky-grid-tbody\">\n <tr\n class=\"sky-grid-row\"\n *ngFor=\"let item of items; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\n [template]=\"column.template || defaultCellTemplate\"\n [fieldSelector]=\"column.field\"\n [item]=\"item\"\n [columnId]=\"column.id\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n id=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</ng-template>\n", styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i4__namespace.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5__namespace.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: ["item", "columnId", "template", "fieldSelector"] }, { type: i7__namespace.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i10__namespace.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i10__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "skyLibResources": i11__namespace.SkyLibResourcesPipe, "async": i8__namespace.AsyncPipe }, viewProviders: [i2.DragulaService], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
1698
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridComponent, decorators: [{
1699
- type: i0.Component,
1700
- args: [{
1701
- selector: 'sky-grid',
1702
- template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr dragula=\"sky-grid-heading\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"\n sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n \"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur($event)\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\n </th>\n </tr>\n </thead>\n <tbody class=\"sky-grid-tbody\">\n <tr\n class=\"sky-grid-row\"\n *ngFor=\"let item of items; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\n [template]=\"column.template || defaultCellTemplate\"\n [fieldSelector]=\"column.field\"\n [item]=\"item\"\n [columnId]=\"column.id\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n id=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</ng-template>\n",
1703
- styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"],
1704
- viewProviders: [i2.DragulaService],
1705
- providers: [SkyGridAdapterService],
1706
- changeDetection: i0.ChangeDetectionStrategy.OnPush,
1707
- }]
1708
- }], ctorParameters: function () { return [{ type: i1__namespace.SkyAffixService }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.DragulaService }, { type: SkyGridAdapterService }, { type: i1__namespace.SkyOverlayService }, { type: i1__namespace.SkyAppWindowRef }, { type: i1__namespace.SkyUIConfigService }]; }, propDecorators: { columns: [{
1709
- type: i0.Input
1710
- }], data: [{
1711
- type: i0.Input
1712
- }], enableMultiselect: [{
1713
- type: i0.Input
1714
- }], fit: [{
1715
- type: i0.Input
1716
- }], hasToolbar: [{
1717
- type: i0.Input
1718
- }], height: [{
1719
- type: i0.Input
1720
- }], highlightText: [{
1721
- type: i0.Input
1722
- }], messageStream: [{
1723
- type: i0.Input
1724
- }], multiselectRowId: [{
1725
- type: i0.Input
1726
- }], rowHighlightedId: [{
1727
- type: i0.Input
1728
- }], selectedColumnIds: [{
1729
- type: i0.Input
1730
- }], selectedRowIds: [{
1731
- type: i0.Input
1732
- }], settingsKey: [{
1733
- type: i0.Input
1734
- }], sortField: [{
1735
- type: i0.Input
1736
- }], width: [{
1737
- type: i0.Input
1738
- }], columnWidthChange: [{
1739
- type: i0.Output
1740
- }], multiselectSelectionChange: [{
1741
- type: i0.Output
1742
- }], rowDeleteCancel: [{
1743
- type: i0.Output
1744
- }], rowDeleteConfirm: [{
1745
- type: i0.Output
1746
- }], selectedColumnIdsChange: [{
1747
- type: i0.Output
1748
- }], sortFieldChange: [{
1749
- type: i0.Output
1750
- }], columnComponents: [{
1751
- type: i0.ContentChildren,
1752
- args: [SkyGridColumnComponent]
1753
- }], columnElementRefs: [{
1754
- type: i0.ViewChildren,
1755
- args: ['gridCol']
1756
- }], columnRangeInputElementRefs: [{
1757
- type: i0.ViewChildren,
1758
- args: ['colSizeRange']
1759
- }], inlineDeleteRefs: [{
1760
- type: i0.ViewChildren,
1761
- args: ['inlineDeleteRef']
1762
- }], inlineDeleteTemplateRef: [{
1763
- type: i0.ViewChild,
1764
- args: ['inlineDeleteTemplateRef', { read: i0.TemplateRef }]
1765
- }], tableContainerElementRef: [{
1766
- type: i0.ViewChild,
1767
- args: ['gridContainer']
1768
- }], tableElementRef: [{
1769
- type: i0.ViewChild,
1770
- args: ['gridTable']
1771
- }], topScrollContainerElementRef: [{
1772
- type: i0.ViewChild,
1773
- args: ['topScrollContainer']
1774
- }], resizeBar: [{
1775
- type: i0.ViewChild,
1776
- args: ['resizeBar']
1777
- }], onWindowResize: [{
1778
- type: i0.HostListener,
1779
- args: ['window:resize']
1780
- }] } });
1781
-
1782
- var SkyGridModule = /** @class */ (function () {
1783
- function SkyGridModule() {
1784
- }
1785
- return SkyGridModule;
1786
- }());
1787
- SkyGridModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
1788
- SkyGridModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridModule, declarations: [SkyGridComponent,
1789
- SkyGridColumnComponent,
1790
- SkyGridCellComponent], imports: [i8.CommonModule,
1791
- i2.DragulaModule,
1792
- i10.FormsModule,
1793
- i1.SkyAffixModule,
1794
- i5.SkyCheckboxModule,
1795
- SkyuxGridsResourcesModule,
1796
- i4.SkyHelpInlineModule,
1797
- i4.SkyIconModule,
1798
- i7.SkyInlineDeleteModule,
1799
- i1.SkyOverlayModule,
1800
- i9.SkyPopoverModule,
1801
- i4.SkyTextHighlightModule], exports: [SkyGridComponent, SkyGridColumnComponent] });
1802
- SkyGridModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridModule, imports: [[
1803
- i8.CommonModule,
1804
- i2.DragulaModule,
1805
- i10.FormsModule,
1806
- i1.SkyAffixModule,
1807
- i5.SkyCheckboxModule,
1808
- SkyuxGridsResourcesModule,
1809
- i4.SkyHelpInlineModule,
1810
- i4.SkyIconModule,
1811
- i7.SkyInlineDeleteModule,
1812
- i1.SkyOverlayModule,
1813
- i9.SkyPopoverModule,
1814
- i4.SkyTextHighlightModule,
1815
- ]] });
1816
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridModule, decorators: [{
1817
- type: i0.NgModule,
1818
- args: [{
1819
- declarations: [
1820
- SkyGridComponent,
1821
- SkyGridColumnComponent,
1822
- SkyGridCellComponent,
1823
- ],
1824
- imports: [
1825
- i8.CommonModule,
1826
- i2.DragulaModule,
1827
- i10.FormsModule,
1828
- i1.SkyAffixModule,
1829
- i5.SkyCheckboxModule,
1830
- SkyuxGridsResourcesModule,
1831
- i4.SkyHelpInlineModule,
1832
- i4.SkyIconModule,
1833
- i7.SkyInlineDeleteModule,
1834
- i1.SkyOverlayModule,
1835
- i9.SkyPopoverModule,
1836
- i4.SkyTextHighlightModule,
1837
- ],
1838
- exports: [SkyGridComponent, SkyGridColumnComponent],
1839
- }]
1840
- }] });
1841
-
1842
- /**
1843
- * Generated bundle index. Do not edit.
1844
- */
1845
-
1846
- exports.SkyGridColumnComponent = SkyGridColumnComponent;
1847
- exports.SkyGridColumnModel = SkyGridColumnModel;
1848
- exports.SkyGridComponent = SkyGridComponent;
1849
- exports.SkyGridModule = SkyGridModule;
1850
-
1851
- Object.defineProperty(exports, '__esModule', { value: true });
1852
-
1853
- }));
1854
- //# sourceMappingURL=skyux-grids.umd.js.map