@skyux/grids 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-grids.umd.js +322 -303
- package/bundles/skyux-grids.umd.js.map +1 -1
- package/documentation.json +116 -111
- package/esm2015/modules/grid/grid-adapter.service.js +17 -17
- package/esm2015/modules/grid/grid-cell.component.js +7 -7
- package/esm2015/modules/grid/grid-column.component.js +12 -11
- package/esm2015/modules/grid/grid-column.model.js +1 -1
- package/esm2015/modules/grid/grid.component.js +119 -99
- package/esm2015/modules/grid/grid.module.js +11 -15
- package/esm2015/modules/grid/types/grid-column-width-model-change.js +1 -1
- package/esm2015/modules/grid/types/grid-message-type.js +1 -1
- package/esm2015/modules/grid/types/grid-message.js +1 -1
- package/esm2015/modules/grid/types/grid-row-delete-contents.js +1 -1
- package/esm2015/modules/grid/types/grid-selected-rows-model-change.js +1 -1
- package/esm2015/modules/grid/types/grid-selected-rows-source.js +1 -1
- package/esm2015/modules/shared/skyux-grids-resources.module.js +16 -12
- package/fesm2015/skyux-grids.js +256 -235
- package/fesm2015/skyux-grids.js.map +1 -1
- package/modules/grid/grid.component.d.ts +3 -3
- package/package.json +12 -12
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ng2-dragula'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/indicators'), require('@skyux/layout'), require('@skyux/popovers'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@skyux/grids', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'ng2-dragula', '@skyux/core', '@skyux/forms', '@skyux/indicators', '@skyux/layout', '@skyux/popovers', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.grids = {}), global.ng.core, global.ng.common, global.ng.forms, global.i2, global.i1, global.i5, global.i4, global.i7, global.i9, global.
|
|
5
|
-
}(this, (function (exports, i0, i8, i10, i2, i1, i5, i4, i7, i9, rxjs, operators,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ng2-dragula'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/indicators'), require('@skyux/layout'), require('@skyux/popovers'), require('@skyux/list-builder-common'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@skyux/grids', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'ng2-dragula', '@skyux/core', '@skyux/forms', '@skyux/indicators', '@skyux/layout', '@skyux/popovers', '@skyux/list-builder-common', 'rxjs', 'rxjs/operators', '@skyux/i18n'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.grids = {}), global.ng.core, global.ng.common, global.ng.forms, global.i2, global.i1, global.i5, global.i4, global.i7, global.i9, global.listBuilderCommon, global.rxjs, global.rxjs.operators, global.i11));
|
|
5
|
+
})(this, (function (exports, i0, i8, i10, i2, i1, i5, i4, i7, i9, listBuilderCommon, rxjs, operators, i11) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -13,14 +13,12 @@
|
|
|
13
13
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
14
|
Object.defineProperty(n, k, d.get ? d : {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () {
|
|
17
|
-
return e[k];
|
|
18
|
-
}
|
|
16
|
+
get: function () { return e[k]; }
|
|
19
17
|
});
|
|
20
18
|
}
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
|
-
n[
|
|
21
|
+
n["default"] = e;
|
|
24
22
|
return Object.freeze(n);
|
|
25
23
|
}
|
|
26
24
|
|
|
@@ -35,181 +33,6 @@
|
|
|
35
33
|
var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
|
|
36
34
|
var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
|
|
37
35
|
|
|
38
|
-
exports.SkyGridMessageType = void 0;
|
|
39
|
-
(function (SkyGridMessageType) {
|
|
40
|
-
/**
|
|
41
|
-
* Selects the multiselect checkboxes for all rows in the grid.
|
|
42
|
-
*/
|
|
43
|
-
SkyGridMessageType[SkyGridMessageType["SelectAll"] = 0] = "SelectAll";
|
|
44
|
-
/**
|
|
45
|
-
* Clears the multiselect checkboxes for all rows in the grid.
|
|
46
|
-
*/
|
|
47
|
-
SkyGridMessageType[SkyGridMessageType["ClearAll"] = 1] = "ClearAll";
|
|
48
|
-
/**
|
|
49
|
-
* @internal
|
|
50
|
-
*/
|
|
51
|
-
SkyGridMessageType[SkyGridMessageType["PromptDeleteRow"] = 2] = "PromptDeleteRow";
|
|
52
|
-
/**
|
|
53
|
-
* @internal
|
|
54
|
-
*/
|
|
55
|
-
SkyGridMessageType[SkyGridMessageType["AbortDeleteRow"] = 3] = "AbortDeleteRow";
|
|
56
|
-
})(exports.SkyGridMessageType || (exports.SkyGridMessageType = {}));
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* @internal
|
|
60
|
-
*/
|
|
61
|
-
exports.SkyGridSelectedRowsSource = void 0;
|
|
62
|
-
(function (SkyGridSelectedRowsSource) {
|
|
63
|
-
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["CheckboxChange"] = 0] = "CheckboxChange";
|
|
64
|
-
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["ClearAll"] = 1] = "ClearAll";
|
|
65
|
-
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["RowClick"] = 2] = "RowClick";
|
|
66
|
-
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["SelectAll"] = 3] = "SelectAll";
|
|
67
|
-
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["SelectedRowIdsChange"] = 4] = "SelectedRowIdsChange";
|
|
68
|
-
})(exports.SkyGridSelectedRowsSource || (exports.SkyGridSelectedRowsSource = {}));
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* Specifies the column information.
|
|
72
|
-
*/
|
|
73
|
-
var SkyGridColumnComponent = /** @class */ (function () {
|
|
74
|
-
function SkyGridColumnComponent() {
|
|
75
|
-
/**
|
|
76
|
-
* Specifies the horizontal alignment of the column's data and header.
|
|
77
|
-
* @default 'left'
|
|
78
|
-
*/
|
|
79
|
-
this.alignment = 'left';
|
|
80
|
-
/**
|
|
81
|
-
* Indicates whether the column sorts the grid when users click the column header.
|
|
82
|
-
* @default true
|
|
83
|
-
*/
|
|
84
|
-
this.isSortable = true;
|
|
85
|
-
/**
|
|
86
|
-
* Specifies a search function to apply for the specific column. By default,
|
|
87
|
-
* the column executes a string compare on the column data.
|
|
88
|
-
* @default (value, searchText) => value.toString().toLowerCase().indexOf(searchText) !== -1
|
|
89
|
-
*/
|
|
90
|
-
/* tslint:disable-next-line:no-input-rename */
|
|
91
|
-
this.searchFunction = this.search;
|
|
92
|
-
this.descriptionChanges = new i0.EventEmitter();
|
|
93
|
-
this.descriptionModelChanges = new i0.EventEmitter();
|
|
94
|
-
this.headingChanges = new i0.EventEmitter();
|
|
95
|
-
this.headingModelChanges = new i0.EventEmitter();
|
|
96
|
-
this.inlineHelpPopoverModelChanges = new i0.EventEmitter();
|
|
97
|
-
}
|
|
98
|
-
SkyGridColumnComponent.prototype.ngOnChanges = function (changes) {
|
|
99
|
-
if (changes.heading && changes.heading.firstChange === false) {
|
|
100
|
-
this.headingChanges.emit(this.heading);
|
|
101
|
-
this.headingModelChanges.emit({
|
|
102
|
-
value: this.heading,
|
|
103
|
-
id: this.id,
|
|
104
|
-
field: this.field
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
if (changes.description && changes.description.firstChange === false) {
|
|
108
|
-
this.descriptionChanges.emit(this.description);
|
|
109
|
-
this.descriptionModelChanges.emit({
|
|
110
|
-
value: this.description,
|
|
111
|
-
id: this.id,
|
|
112
|
-
field: this.field
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
if (changes.inlineHelpPopover && changes.inlineHelpPopover.firstChange === false) {
|
|
116
|
-
this.inlineHelpPopoverModelChanges.emit({
|
|
117
|
-
value: this.inlineHelpPopover,
|
|
118
|
-
id: this.id,
|
|
119
|
-
field: this.field
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
Object.defineProperty(SkyGridColumnComponent.prototype, "template", {
|
|
124
|
-
get: function () {
|
|
125
|
-
if (this.templates.length > 0) {
|
|
126
|
-
return this.templates.first;
|
|
127
|
-
}
|
|
128
|
-
return this.templateInput;
|
|
129
|
-
},
|
|
130
|
-
enumerable: false,
|
|
131
|
-
configurable: true
|
|
132
|
-
});
|
|
133
|
-
SkyGridColumnComponent.prototype.search = function (value, searchText) {
|
|
134
|
-
/* tslint:disable:no-null-keyword */
|
|
135
|
-
if (value !== undefined && value !== null) {
|
|
136
|
-
return value.toString().toLowerCase().indexOf(searchText) !== -1;
|
|
137
|
-
}
|
|
138
|
-
/* tslint:enable */
|
|
139
|
-
return false;
|
|
140
|
-
};
|
|
141
|
-
return SkyGridColumnComponent;
|
|
142
|
-
}());
|
|
143
|
-
SkyGridColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyGridColumnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
144
|
-
SkyGridColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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 });
|
|
145
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyGridColumnComponent, decorators: [{
|
|
146
|
-
type: i0.Component,
|
|
147
|
-
args: [{
|
|
148
|
-
selector: 'sky-grid-column',
|
|
149
|
-
template: '<ng-content></ng-content>',
|
|
150
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
151
|
-
}]
|
|
152
|
-
}], propDecorators: { alignment: [{
|
|
153
|
-
type: i0.Input
|
|
154
|
-
}], description: [{
|
|
155
|
-
type: i0.Input
|
|
156
|
-
}], excludeFromHighlighting: [{
|
|
157
|
-
type: i0.Input
|
|
158
|
-
}], field: [{
|
|
159
|
-
type: i0.Input
|
|
160
|
-
}], heading: [{
|
|
161
|
-
type: i0.Input
|
|
162
|
-
}], hidden: [{
|
|
163
|
-
type: i0.Input
|
|
164
|
-
}], id: [{
|
|
165
|
-
type: i0.Input
|
|
166
|
-
}], inlineHelpPopover: [{
|
|
167
|
-
type: i0.Input
|
|
168
|
-
}], isSortable: [{
|
|
169
|
-
type: i0.Input
|
|
170
|
-
}], locked: [{
|
|
171
|
-
type: i0.Input
|
|
172
|
-
}], searchFunction: [{
|
|
173
|
-
type: i0.Input,
|
|
174
|
-
args: ['search']
|
|
175
|
-
}], type: [{
|
|
176
|
-
type: i0.Input
|
|
177
|
-
}], templateInput: [{
|
|
178
|
-
type: i0.Input,
|
|
179
|
-
args: ['template']
|
|
180
|
-
}], width: [{
|
|
181
|
-
type: i0.Input
|
|
182
|
-
}], templates: [{
|
|
183
|
-
type: i0.ContentChildren,
|
|
184
|
-
args: [i0.TemplateRef]
|
|
185
|
-
}] } });
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* @internal
|
|
189
|
-
*/
|
|
190
|
-
var SkyGridColumnModel = /** @class */ (function () {
|
|
191
|
-
function SkyGridColumnModel(template, data) {
|
|
192
|
-
this.isSortable = true;
|
|
193
|
-
this.template = template;
|
|
194
|
-
if (data) {
|
|
195
|
-
this.id = data.id || data.field;
|
|
196
|
-
this.type = data.type;
|
|
197
|
-
this.field = data.field;
|
|
198
|
-
this.heading = data.heading;
|
|
199
|
-
this.inlineHelpPopover = data.inlineHelpPopover;
|
|
200
|
-
this.width = data.width ? Number(data.width) : undefined;
|
|
201
|
-
this.hidden = data.hidden;
|
|
202
|
-
this.locked = data.locked;
|
|
203
|
-
this.description = data.description;
|
|
204
|
-
this.searchFunction = data.searchFunction;
|
|
205
|
-
this.isSortable = data.isSortable;
|
|
206
|
-
this.excludeFromHighlighting = data.excludeFromHighlighting;
|
|
207
|
-
this.alignment = data.alignment;
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
return SkyGridColumnModel;
|
|
211
|
-
}());
|
|
212
|
-
|
|
213
36
|
/*! *****************************************************************************
|
|
214
37
|
Copyright (c) Microsoft Corporation.
|
|
215
38
|
|
|
@@ -445,7 +268,7 @@
|
|
|
445
268
|
ar[i] = from[i];
|
|
446
269
|
}
|
|
447
270
|
}
|
|
448
|
-
return to.concat(ar || from);
|
|
271
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
449
272
|
}
|
|
450
273
|
function __await(v) {
|
|
451
274
|
return this instanceof __await ? (this.v = v, this) : new __await(v);
|
|
@@ -566,12 +389,12 @@
|
|
|
566
389
|
moves: function (el, container, handle) {
|
|
567
390
|
var columns = container.querySelectorAll('th div');
|
|
568
391
|
var isLeftOfLocked = _this.isLeftOfLocked(handle, columns);
|
|
569
|
-
return !el.querySelector(GRID_HEADER_LOCKED_SELECTOR)
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
392
|
+
return (!el.querySelector(GRID_HEADER_LOCKED_SELECTOR) &&
|
|
393
|
+
handle !== undefined &&
|
|
394
|
+
!handle.matches(GRID_HEADER_RESIZE_HANDLE) &&
|
|
395
|
+
!handle.matches(GRID_MULTISELECT_SELECTOR) &&
|
|
396
|
+
!handle.matches(GRID_ROW_DELETE_SELECTOR) &&
|
|
397
|
+
!isLeftOfLocked);
|
|
575
398
|
},
|
|
576
399
|
accepts: function (el, target, source, sibling) {
|
|
577
400
|
if (sibling === undefined || !sibling) {
|
|
@@ -580,14 +403,14 @@
|
|
|
580
403
|
var columns = source.querySelectorAll('th div');
|
|
581
404
|
var siblingDiv = sibling.querySelector('div');
|
|
582
405
|
var isLeftOfLocked = _this.isLeftOfLocked(siblingDiv, columns);
|
|
583
|
-
return (
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
}
|
|
406
|
+
return (!sibling.matches(GRID_HEADER_LOCKED_SELECTOR) &&
|
|
407
|
+
!sibling.matches(GRID_HEADER_RESIZE_HANDLE) &&
|
|
408
|
+
!isLeftOfLocked);
|
|
409
|
+
},
|
|
587
410
|
});
|
|
588
411
|
};
|
|
589
412
|
SkyGridAdapterService.prototype.getRowHeight = function (el, index) {
|
|
590
|
-
return el.nativeElement.querySelectorAll('tbody tr')[index].scrollHeight + 'px';
|
|
413
|
+
return (el.nativeElement.querySelectorAll('tbody tr')[index].scrollHeight + 'px');
|
|
591
414
|
};
|
|
592
415
|
SkyGridAdapterService.prototype.setStyle = function (el, style, value) {
|
|
593
416
|
if (el) {
|
|
@@ -612,7 +435,7 @@
|
|
|
612
435
|
}
|
|
613
436
|
finally { if (e_1) throw e_1.error; }
|
|
614
437
|
}
|
|
615
|
-
for (var i =
|
|
438
|
+
for (var i = columns.length - 1; i >= 0; i--) {
|
|
616
439
|
if (columns[i].classList.contains('sky-grid-header-locked')) {
|
|
617
440
|
return true;
|
|
618
441
|
}
|
|
@@ -624,12 +447,188 @@
|
|
|
624
447
|
};
|
|
625
448
|
return SkyGridAdapterService;
|
|
626
449
|
}());
|
|
627
|
-
SkyGridAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
628
|
-
SkyGridAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
629
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
450
|
+
SkyGridAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
451
|
+
SkyGridAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridAdapterService });
|
|
452
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridAdapterService, decorators: [{
|
|
630
453
|
type: i0.Injectable
|
|
631
454
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
|
|
632
455
|
|
|
456
|
+
/**
|
|
457
|
+
* Specifies the column information.
|
|
458
|
+
*/
|
|
459
|
+
var SkyGridColumnComponent = /** @class */ (function () {
|
|
460
|
+
function SkyGridColumnComponent() {
|
|
461
|
+
/**
|
|
462
|
+
* Specifies the horizontal alignment of the column's data and header.
|
|
463
|
+
* @default 'left'
|
|
464
|
+
*/
|
|
465
|
+
this.alignment = 'left';
|
|
466
|
+
/**
|
|
467
|
+
* Indicates whether the column sorts the grid when users click the column header.
|
|
468
|
+
* @default true
|
|
469
|
+
*/
|
|
470
|
+
this.isSortable = true;
|
|
471
|
+
/**
|
|
472
|
+
* Specifies a search function to apply for the specific column. By default,
|
|
473
|
+
* the column executes a string compare on the column data.
|
|
474
|
+
* @default (value, searchText) => value.toString().toLowerCase().indexOf(searchText) !== -1
|
|
475
|
+
*/
|
|
476
|
+
// eslint-disable-next-line @angular-eslint/no-input-rename
|
|
477
|
+
this.searchFunction = this.search;
|
|
478
|
+
this.descriptionChanges = new i0.EventEmitter();
|
|
479
|
+
this.descriptionModelChanges = new i0.EventEmitter();
|
|
480
|
+
this.headingChanges = new i0.EventEmitter();
|
|
481
|
+
this.headingModelChanges = new i0.EventEmitter();
|
|
482
|
+
this.inlineHelpPopoverModelChanges = new i0.EventEmitter();
|
|
483
|
+
}
|
|
484
|
+
SkyGridColumnComponent.prototype.ngOnChanges = function (changes) {
|
|
485
|
+
if (changes.heading && changes.heading.firstChange === false) {
|
|
486
|
+
this.headingChanges.emit(this.heading);
|
|
487
|
+
this.headingModelChanges.emit({
|
|
488
|
+
value: this.heading,
|
|
489
|
+
id: this.id,
|
|
490
|
+
field: this.field,
|
|
491
|
+
});
|
|
492
|
+
}
|
|
493
|
+
if (changes.description && changes.description.firstChange === false) {
|
|
494
|
+
this.descriptionChanges.emit(this.description);
|
|
495
|
+
this.descriptionModelChanges.emit({
|
|
496
|
+
value: this.description,
|
|
497
|
+
id: this.id,
|
|
498
|
+
field: this.field,
|
|
499
|
+
});
|
|
500
|
+
}
|
|
501
|
+
if (changes.inlineHelpPopover &&
|
|
502
|
+
changes.inlineHelpPopover.firstChange === false) {
|
|
503
|
+
this.inlineHelpPopoverModelChanges.emit({
|
|
504
|
+
value: this.inlineHelpPopover,
|
|
505
|
+
id: this.id,
|
|
506
|
+
field: this.field,
|
|
507
|
+
});
|
|
508
|
+
}
|
|
509
|
+
};
|
|
510
|
+
Object.defineProperty(SkyGridColumnComponent.prototype, "template", {
|
|
511
|
+
get: function () {
|
|
512
|
+
if (this.templates.length > 0) {
|
|
513
|
+
return this.templates.first;
|
|
514
|
+
}
|
|
515
|
+
return this.templateInput;
|
|
516
|
+
},
|
|
517
|
+
enumerable: false,
|
|
518
|
+
configurable: true
|
|
519
|
+
});
|
|
520
|
+
SkyGridColumnComponent.prototype.search = function (value, searchText) {
|
|
521
|
+
/* tslint:disable:no-null-keyword */
|
|
522
|
+
if (value !== undefined && value !== null) {
|
|
523
|
+
return value.toString().toLowerCase().indexOf(searchText) !== -1;
|
|
524
|
+
}
|
|
525
|
+
/* tslint:enable */
|
|
526
|
+
return false;
|
|
527
|
+
};
|
|
528
|
+
return SkyGridColumnComponent;
|
|
529
|
+
}());
|
|
530
|
+
SkyGridColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridColumnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
531
|
+
SkyGridColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 });
|
|
532
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridColumnComponent, decorators: [{
|
|
533
|
+
type: i0.Component,
|
|
534
|
+
args: [{
|
|
535
|
+
selector: 'sky-grid-column',
|
|
536
|
+
template: '<ng-content></ng-content>',
|
|
537
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
538
|
+
}]
|
|
539
|
+
}], propDecorators: { alignment: [{
|
|
540
|
+
type: i0.Input
|
|
541
|
+
}], description: [{
|
|
542
|
+
type: i0.Input
|
|
543
|
+
}], excludeFromHighlighting: [{
|
|
544
|
+
type: i0.Input
|
|
545
|
+
}], field: [{
|
|
546
|
+
type: i0.Input
|
|
547
|
+
}], heading: [{
|
|
548
|
+
type: i0.Input
|
|
549
|
+
}], hidden: [{
|
|
550
|
+
type: i0.Input
|
|
551
|
+
}], id: [{
|
|
552
|
+
type: i0.Input
|
|
553
|
+
}], inlineHelpPopover: [{
|
|
554
|
+
type: i0.Input
|
|
555
|
+
}], isSortable: [{
|
|
556
|
+
type: i0.Input
|
|
557
|
+
}], locked: [{
|
|
558
|
+
type: i0.Input
|
|
559
|
+
}], searchFunction: [{
|
|
560
|
+
type: i0.Input,
|
|
561
|
+
args: ['search']
|
|
562
|
+
}], type: [{
|
|
563
|
+
type: i0.Input
|
|
564
|
+
}], templateInput: [{
|
|
565
|
+
type: i0.Input,
|
|
566
|
+
args: ['template']
|
|
567
|
+
}], width: [{
|
|
568
|
+
type: i0.Input
|
|
569
|
+
}], templates: [{
|
|
570
|
+
type: i0.ContentChildren,
|
|
571
|
+
args: [i0.TemplateRef]
|
|
572
|
+
}] } });
|
|
573
|
+
|
|
574
|
+
/**
|
|
575
|
+
* @internal
|
|
576
|
+
*/
|
|
577
|
+
var SkyGridColumnModel = /** @class */ (function () {
|
|
578
|
+
function SkyGridColumnModel(template, data) {
|
|
579
|
+
this.isSortable = true;
|
|
580
|
+
this.template = template;
|
|
581
|
+
if (data) {
|
|
582
|
+
this.id = data.id || data.field;
|
|
583
|
+
this.type = data.type;
|
|
584
|
+
this.field = data.field;
|
|
585
|
+
this.heading = data.heading;
|
|
586
|
+
this.inlineHelpPopover = data.inlineHelpPopover;
|
|
587
|
+
this.width = data.width ? Number(data.width) : undefined;
|
|
588
|
+
this.hidden = data.hidden;
|
|
589
|
+
this.locked = data.locked;
|
|
590
|
+
this.description = data.description;
|
|
591
|
+
this.searchFunction = data.searchFunction;
|
|
592
|
+
this.isSortable = data.isSortable;
|
|
593
|
+
this.excludeFromHighlighting = data.excludeFromHighlighting;
|
|
594
|
+
this.alignment = data.alignment;
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
return SkyGridColumnModel;
|
|
598
|
+
}());
|
|
599
|
+
|
|
600
|
+
exports.SkyGridMessageType = void 0;
|
|
601
|
+
(function (SkyGridMessageType) {
|
|
602
|
+
/**
|
|
603
|
+
* Selects the multiselect checkboxes for all rows in the grid.
|
|
604
|
+
*/
|
|
605
|
+
SkyGridMessageType[SkyGridMessageType["SelectAll"] = 0] = "SelectAll";
|
|
606
|
+
/**
|
|
607
|
+
* Clears the multiselect checkboxes for all rows in the grid.
|
|
608
|
+
*/
|
|
609
|
+
SkyGridMessageType[SkyGridMessageType["ClearAll"] = 1] = "ClearAll";
|
|
610
|
+
/**
|
|
611
|
+
* @internal
|
|
612
|
+
*/
|
|
613
|
+
SkyGridMessageType[SkyGridMessageType["PromptDeleteRow"] = 2] = "PromptDeleteRow";
|
|
614
|
+
/**
|
|
615
|
+
* @internal
|
|
616
|
+
*/
|
|
617
|
+
SkyGridMessageType[SkyGridMessageType["AbortDeleteRow"] = 3] = "AbortDeleteRow";
|
|
618
|
+
})(exports.SkyGridMessageType || (exports.SkyGridMessageType = {}));
|
|
619
|
+
|
|
620
|
+
/**
|
|
621
|
+
* @internal
|
|
622
|
+
*/
|
|
623
|
+
exports.SkyGridSelectedRowsSource = void 0;
|
|
624
|
+
(function (SkyGridSelectedRowsSource) {
|
|
625
|
+
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["CheckboxChange"] = 0] = "CheckboxChange";
|
|
626
|
+
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["ClearAll"] = 1] = "ClearAll";
|
|
627
|
+
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["RowClick"] = 2] = "RowClick";
|
|
628
|
+
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["SelectAll"] = 3] = "SelectAll";
|
|
629
|
+
SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["SelectedRowIdsChange"] = 4] = "SelectedRowIdsChange";
|
|
630
|
+
})(exports.SkyGridSelectedRowsSource || (exports.SkyGridSelectedRowsSource = {}));
|
|
631
|
+
|
|
633
632
|
/**
|
|
634
633
|
* @internal
|
|
635
634
|
*/
|
|
@@ -658,15 +657,15 @@
|
|
|
658
657
|
});
|
|
659
658
|
return SkyGridCellComponent;
|
|
660
659
|
}());
|
|
661
|
-
SkyGridCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
662
|
-
SkyGridCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
663
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
660
|
+
SkyGridCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridCellComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
661
|
+
SkyGridCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 });
|
|
662
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridCellComponent, decorators: [{
|
|
664
663
|
type: i0.Component,
|
|
665
664
|
args: [{
|
|
666
665
|
selector: 'sky-grid-cell',
|
|
667
666
|
template: '<ng-template #cell></ng-template>',
|
|
668
|
-
|
|
669
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
667
|
+
styles: [":host{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;min-height:35px}\n"],
|
|
668
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
670
669
|
}]
|
|
671
670
|
}], propDecorators: { item: [{
|
|
672
671
|
type: i0.Input
|
|
@@ -680,7 +679,7 @@
|
|
|
680
679
|
type: i0.ViewChild,
|
|
681
680
|
args: ['cell', {
|
|
682
681
|
read: i0.ViewContainerRef,
|
|
683
|
-
static: true
|
|
682
|
+
static: true,
|
|
684
683
|
}]
|
|
685
684
|
}] } });
|
|
686
685
|
|
|
@@ -763,7 +762,7 @@
|
|
|
763
762
|
this.items = new Array();
|
|
764
763
|
this.currentSortField = new rxjs.BehaviorSubject({
|
|
765
764
|
fieldSelector: '',
|
|
766
|
-
descending: false
|
|
765
|
+
descending: false,
|
|
767
766
|
});
|
|
768
767
|
}
|
|
769
768
|
Object.defineProperty(SkyGridComponent.prototype, "selectedColumnIds", {
|
|
@@ -781,14 +780,12 @@
|
|
|
781
780
|
this.setDisplayedColumns();
|
|
782
781
|
}
|
|
783
782
|
// Ensure that the ids have changed.
|
|
784
|
-
if (!currentIds ||
|
|
785
|
-
!value ||
|
|
786
|
-
!this.arraysEqual(value, currentIds)) {
|
|
783
|
+
if (!currentIds || !value || !this.arraysEqual(value, currentIds)) {
|
|
787
784
|
// This variable ensures that we do not set user config options or fire the change event
|
|
788
785
|
// on the first time that the columns are set up
|
|
789
786
|
if (this.selectedColumnIdsSet) {
|
|
790
787
|
this.setUserConfig({
|
|
791
|
-
selectedColumnIds: value
|
|
788
|
+
selectedColumnIds: value,
|
|
792
789
|
});
|
|
793
790
|
this.selectedColumnIdsChange.emit(this._selectedColumnIds);
|
|
794
791
|
if (this.isResized) {
|
|
@@ -858,7 +855,9 @@
|
|
|
858
855
|
var _this = this;
|
|
859
856
|
if (changes.columns && this.columns) {
|
|
860
857
|
if (this.selectedColumnIds) {
|
|
861
|
-
this.selectedColumnIds = this.selectedColumnIds.filter(function (columnId) {
|
|
858
|
+
this.selectedColumnIds = this.selectedColumnIds.filter(function (columnId) {
|
|
859
|
+
return _this.columns.find(function (column) { return column.id === columnId; });
|
|
860
|
+
});
|
|
862
861
|
}
|
|
863
862
|
this.setDisplayedColumns(true);
|
|
864
863
|
}
|
|
@@ -881,7 +880,7 @@
|
|
|
881
880
|
placement: 'above',
|
|
882
881
|
verticalAlignment: 'top',
|
|
883
882
|
horizontalAlignment: 'left',
|
|
884
|
-
enableAutoFit: false
|
|
883
|
+
enableAutoFit: false,
|
|
885
884
|
});
|
|
886
885
|
}
|
|
887
886
|
});
|
|
@@ -952,12 +951,14 @@
|
|
|
952
951
|
.pipe(operators.take(1), operators.map(function (field) {
|
|
953
952
|
var selector = {
|
|
954
953
|
fieldSelector: column.field,
|
|
955
|
-
descending: true
|
|
954
|
+
descending: true,
|
|
956
955
|
};
|
|
957
|
-
if (field &&
|
|
956
|
+
if (field &&
|
|
957
|
+
field.fieldSelector === column.field &&
|
|
958
|
+
field.descending) {
|
|
958
959
|
selector = {
|
|
959
960
|
fieldSelector: column.field,
|
|
960
|
-
descending: false
|
|
961
|
+
descending: false,
|
|
961
962
|
};
|
|
962
963
|
}
|
|
963
964
|
_this.sortFieldChange.emit(selector);
|
|
@@ -967,28 +968,32 @@
|
|
|
967
968
|
}
|
|
968
969
|
};
|
|
969
970
|
SkyGridComponent.prototype.getSortDirection = function (columnField) {
|
|
970
|
-
return this.currentSortField
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
971
|
+
return this.currentSortField.pipe(operators.distinctUntilChanged(), operators.map(function (field) {
|
|
972
|
+
return field.fieldSelector === columnField
|
|
973
|
+
? field.descending
|
|
974
|
+
? 'desc'
|
|
975
|
+
: 'asc'
|
|
976
|
+
: undefined;
|
|
974
977
|
}));
|
|
975
978
|
};
|
|
976
979
|
SkyGridComponent.prototype.getAriaSortDirection = function (column) {
|
|
977
|
-
return this.currentSortField
|
|
978
|
-
.
|
|
979
|
-
|
|
980
|
-
|
|
980
|
+
return this.currentSortField.pipe(operators.distinctUntilChanged(), operators.map(function (field) {
|
|
981
|
+
return field.fieldSelector === column.field
|
|
982
|
+
? field.descending
|
|
983
|
+
? 'descending'
|
|
984
|
+
: 'ascending'
|
|
985
|
+
: column.isSortable
|
|
986
|
+
? 'none'
|
|
987
|
+
: undefined;
|
|
981
988
|
}));
|
|
982
989
|
};
|
|
983
990
|
SkyGridComponent.prototype.getCaretVisibility = function (columnField) {
|
|
984
|
-
return this.currentSortField
|
|
985
|
-
.pipe(operators.distinctUntilChanged(), operators.map(function (field) {
|
|
991
|
+
return this.currentSortField.pipe(operators.distinctUntilChanged(), operators.map(function (field) {
|
|
986
992
|
return field.fieldSelector === columnField ? 'visible' : 'hidden';
|
|
987
993
|
}));
|
|
988
994
|
};
|
|
989
995
|
SkyGridComponent.prototype.getHelpInlineClass = function (columnField) {
|
|
990
|
-
return this.getCaretVisibility(columnField)
|
|
991
|
-
.pipe(operators.map(function (visibility) {
|
|
996
|
+
return this.getCaretVisibility(columnField).pipe(operators.map(function (visibility) {
|
|
992
997
|
return visibility === 'hidden';
|
|
993
998
|
}));
|
|
994
999
|
};
|
|
@@ -997,8 +1002,8 @@
|
|
|
997
1002
|
};
|
|
998
1003
|
SkyGridComponent.prototype.updateColumnHeading = function (change) {
|
|
999
1004
|
var foundColumnModel = this.columns.find(function (column) {
|
|
1000
|
-
return (change.id !== undefined && change.id === column.id ||
|
|
1001
|
-
change.field !== undefined && change.field === column.field);
|
|
1005
|
+
return ((change.id !== undefined && change.id === column.id) ||
|
|
1006
|
+
(change.field !== undefined && change.field === column.field));
|
|
1002
1007
|
});
|
|
1003
1008
|
/* istanbul ignore else */
|
|
1004
1009
|
if (foundColumnModel) {
|
|
@@ -1008,8 +1013,8 @@
|
|
|
1008
1013
|
};
|
|
1009
1014
|
SkyGridComponent.prototype.updateInlineHelpPopover = function (change) {
|
|
1010
1015
|
var foundColumnModel = this.columns.find(function (column) {
|
|
1011
|
-
return (change.id !== undefined && change.id === column.id ||
|
|
1012
|
-
change.field !== undefined && change.field === column.field);
|
|
1016
|
+
return ((change.id !== undefined && change.id === column.id) ||
|
|
1017
|
+
(change.field !== undefined && change.field === column.field));
|
|
1013
1018
|
});
|
|
1014
1019
|
/* istanbul ignore else */
|
|
1015
1020
|
if (foundColumnModel) {
|
|
@@ -1019,8 +1024,8 @@
|
|
|
1019
1024
|
};
|
|
1020
1025
|
SkyGridComponent.prototype.updateColumnDescription = function (change) {
|
|
1021
1026
|
var foundColumnModel = this.columns.find(function (column) {
|
|
1022
|
-
return (change.id !== undefined && change.id === column.id ||
|
|
1023
|
-
change.field !== undefined && change.field === column.field);
|
|
1027
|
+
return ((change.id !== undefined && change.id === column.id) ||
|
|
1028
|
+
(change.field !== undefined && change.field === column.field));
|
|
1024
1029
|
});
|
|
1025
1030
|
/* istanbul ignore else */
|
|
1026
1031
|
if (foundColumnModel) {
|
|
@@ -1116,7 +1121,8 @@
|
|
|
1116
1121
|
SkyGridComponent.prototype.onRowClick = function (event, selectedItem) {
|
|
1117
1122
|
/* istanbul ignore else */
|
|
1118
1123
|
if (this.enableMultiselect) {
|
|
1119
|
-
if (event.target === event.currentTarget ||
|
|
1124
|
+
if (event.target === event.currentTarget ||
|
|
1125
|
+
!this.isInteractiveElement(event)) {
|
|
1120
1126
|
selectedItem.isSelected = !selectedItem.isSelected;
|
|
1121
1127
|
this.changeDetector.markForCheck();
|
|
1122
1128
|
this.emitSelectedRows(exports.SkyGridSelectedRowsSource.RowClick);
|
|
@@ -1178,7 +1184,9 @@
|
|
|
1178
1184
|
};
|
|
1179
1185
|
SkyGridComponent.prototype.checkUserColumnWidthsForScroll = function () {
|
|
1180
1186
|
var _this = this;
|
|
1181
|
-
if (!this.showTopScroll &&
|
|
1187
|
+
if (!this.showTopScroll &&
|
|
1188
|
+
this.columnElementRefs &&
|
|
1189
|
+
this.columnElementRefs.length > 0) {
|
|
1182
1190
|
var columnsWidthTotal_1 = 0;
|
|
1183
1191
|
var windowSize_1 = this.skyWindow.nativeWindow.innerWidth;
|
|
1184
1192
|
this.columnElementRefs.forEach(function (col) {
|
|
@@ -1225,21 +1233,25 @@
|
|
|
1225
1233
|
/* sanity check */
|
|
1226
1234
|
/* istanbul ignore else */
|
|
1227
1235
|
if (message.data && message.data.promptDeleteRow) {
|
|
1228
|
-
var existingConfig = this.rowDeleteConfigs
|
|
1229
|
-
.find(function (config) { return config.id === message.data.promptDeleteRow.id; });
|
|
1236
|
+
var existingConfig = this.rowDeleteConfigs.find(function (config) { return config.id === message.data.promptDeleteRow.id; });
|
|
1230
1237
|
if (existingConfig) {
|
|
1231
1238
|
existingConfig.pending = false;
|
|
1232
1239
|
}
|
|
1233
1240
|
else {
|
|
1234
|
-
this.rowDeleteConfigs.push({
|
|
1241
|
+
this.rowDeleteConfigs.push({
|
|
1242
|
+
id: message.data.promptDeleteRow.id,
|
|
1243
|
+
pending: false,
|
|
1244
|
+
});
|
|
1235
1245
|
var overlay_1 = this.overlayService.create({
|
|
1236
1246
|
enableScroll: true,
|
|
1237
1247
|
showBackdrop: false,
|
|
1238
1248
|
closeOnNavigation: true,
|
|
1239
1249
|
enableClose: false,
|
|
1240
|
-
enablePointerEvents: true
|
|
1250
|
+
enablePointerEvents: true,
|
|
1251
|
+
});
|
|
1252
|
+
overlay_1.attachTemplate(this.inlineDeleteTemplateRef, {
|
|
1253
|
+
$implicit: this.data.find(function (item) { return item.id === message.data.promptDeleteRow.id; }),
|
|
1241
1254
|
});
|
|
1242
|
-
overlay_1.attachTemplate(this.inlineDeleteTemplateRef, { $implicit: this.data.find(function (item) { return item.id === message.data.promptDeleteRow.id; }) });
|
|
1243
1255
|
/**
|
|
1244
1256
|
* We are manually setting the z-index here because overlays will always be on top of
|
|
1245
1257
|
* the omnibar. This manual setting is 1 less than the omnibar's z-index of 1000. We
|
|
@@ -1248,9 +1260,11 @@
|
|
|
1248
1260
|
*/
|
|
1249
1261
|
overlay_1.componentRef.instance.zIndex = '999';
|
|
1250
1262
|
setTimeout(function () {
|
|
1251
|
-
var inlineDeleteRef = _this.inlineDeleteRefs
|
|
1263
|
+
var inlineDeleteRef = _this.inlineDeleteRefs
|
|
1264
|
+
.toArray()
|
|
1252
1265
|
.find(function (elRef) {
|
|
1253
|
-
return elRef.nativeElement.id ===
|
|
1266
|
+
return (elRef.nativeElement.id ===
|
|
1267
|
+
'row-delete-ref-' + message.data.promptDeleteRow.id);
|
|
1254
1268
|
});
|
|
1255
1269
|
var affixer = _this.affixService.createAffixer(inlineDeleteRef);
|
|
1256
1270
|
var rowElement = _this.tableElementRef.nativeElement.querySelector('[sky-cmp-id="' + message.data.promptDeleteRow.id + '"]');
|
|
@@ -1260,11 +1274,11 @@
|
|
|
1260
1274
|
placement: 'above',
|
|
1261
1275
|
verticalAlignment: 'top',
|
|
1262
1276
|
horizontalAlignment: 'left',
|
|
1263
|
-
enableAutoFit: false
|
|
1277
|
+
enableAutoFit: false,
|
|
1264
1278
|
});
|
|
1265
1279
|
_this.rowDeleteContents[message.data.promptDeleteRow.id] = {
|
|
1266
1280
|
affixer: affixer,
|
|
1267
|
-
overlay: overlay_1
|
|
1281
|
+
overlay: overlay_1,
|
|
1268
1282
|
};
|
|
1269
1283
|
});
|
|
1270
1284
|
}
|
|
@@ -1294,7 +1308,12 @@
|
|
|
1294
1308
|
if (this.selectedColumnIds !== undefined) {
|
|
1295
1309
|
// setup displayed columns
|
|
1296
1310
|
this.displayedColumns = this.selectedColumnIds
|
|
1297
|
-
.filter(function (columnId) {
|
|
1311
|
+
.filter(function (columnId) {
|
|
1312
|
+
return _this.columns.find(function (column) { return column.id === columnId; });
|
|
1313
|
+
})
|
|
1314
|
+
.map(function (columnId) {
|
|
1315
|
+
return _this.columns.filter(function (column) { return column.id === columnId; })[0];
|
|
1316
|
+
});
|
|
1298
1317
|
}
|
|
1299
1318
|
else if (respectHidden) {
|
|
1300
1319
|
this.displayedColumns = this.columns.filter(function (column) {
|
|
@@ -1307,7 +1326,10 @@
|
|
|
1307
1326
|
};
|
|
1308
1327
|
SkyGridComponent.prototype.transformData = function () {
|
|
1309
1328
|
// Transform data into object with id and data properties
|
|
1310
|
-
if (this.data &&
|
|
1329
|
+
if (this.data &&
|
|
1330
|
+
this.data.length > 0 &&
|
|
1331
|
+
this.data[0].id &&
|
|
1332
|
+
!this.data[0].data) {
|
|
1311
1333
|
if (this.multiselectRowId) {
|
|
1312
1334
|
this.items = this.getGridDataWithSelectedRows();
|
|
1313
1335
|
}
|
|
@@ -1336,7 +1358,8 @@
|
|
|
1336
1358
|
SkyGridComponent.prototype.applySelectedRows = function () {
|
|
1337
1359
|
if (this.items && this.items.length > 0 && this.selectedRowIds) {
|
|
1338
1360
|
for (var i = 0; i < this.items.length; i++) {
|
|
1339
|
-
this.items[i].isSelected =
|
|
1361
|
+
this.items[i].isSelected =
|
|
1362
|
+
this.selectedRowIds.indexOf(this.items[i].id) > -1;
|
|
1340
1363
|
}
|
|
1341
1364
|
this.changeDetector.markForCheck();
|
|
1342
1365
|
}
|
|
@@ -1397,8 +1420,7 @@
|
|
|
1397
1420
|
var computedWidth = parseFloat(window.getComputedStyle(col.nativeElement).width);
|
|
1398
1421
|
var offsetWidth = col.nativeElement.offsetWidth;
|
|
1399
1422
|
/* istanbul ignore next */
|
|
1400
|
-
|
|
1401
|
-
_this.getColumnModelByIndex(index).width = width;
|
|
1423
|
+
_this.getColumnModelByIndex(index).width = Math.max(computedWidth || offsetWidth, _this.minColWidth);
|
|
1402
1424
|
});
|
|
1403
1425
|
// 'scroll' tables should be allowed to expand outside of their constraints.
|
|
1404
1426
|
if (this.fit === 'scroll') {
|
|
@@ -1416,7 +1438,7 @@
|
|
|
1416
1438
|
columnWidthModelChange.push({
|
|
1417
1439
|
id: column.id,
|
|
1418
1440
|
field: column.field,
|
|
1419
|
-
width: column.width
|
|
1441
|
+
width: column.width,
|
|
1420
1442
|
});
|
|
1421
1443
|
});
|
|
1422
1444
|
return columnWidthModelChange;
|
|
@@ -1475,15 +1497,17 @@
|
|
|
1475
1497
|
SkyGridComponent.prototype.emitSelectedRows = function (source) {
|
|
1476
1498
|
var selectedRows = {
|
|
1477
1499
|
selectedRowIds: this.getSelectedRows(),
|
|
1478
|
-
source: source
|
|
1500
|
+
source: source,
|
|
1479
1501
|
};
|
|
1480
1502
|
this.multiselectSelectionChange.emit(selectedRows);
|
|
1481
1503
|
};
|
|
1482
1504
|
SkyGridComponent.prototype.getSelectedRows = function () {
|
|
1483
1505
|
var _this = this;
|
|
1484
|
-
return this.items
|
|
1506
|
+
return this.items
|
|
1507
|
+
.filter(function (item) {
|
|
1485
1508
|
return item.isSelected;
|
|
1486
|
-
})
|
|
1509
|
+
})
|
|
1510
|
+
.map(function (item) {
|
|
1487
1511
|
if (item.data.hasOwnProperty(_this.multiselectRowId)) {
|
|
1488
1512
|
return item.data[_this.multiselectRowId];
|
|
1489
1513
|
}
|
|
@@ -1496,20 +1520,22 @@
|
|
|
1496
1520
|
};
|
|
1497
1521
|
SkyGridComponent.prototype.setResizeBarPosition = function (xPosition) {
|
|
1498
1522
|
var parentScroll = this.tableContainerElementRef.nativeElement.scrollLeft;
|
|
1499
|
-
var resizeBarX = xPosition -
|
|
1523
|
+
var resizeBarX = xPosition -
|
|
1524
|
+
this.tableElementRef.nativeElement.getBoundingClientRect().left -
|
|
1525
|
+
parentScroll;
|
|
1500
1526
|
this.gridAdapter.setStyle(this.resizeBar, 'left', resizeBarX + 'px');
|
|
1501
1527
|
};
|
|
1502
1528
|
SkyGridComponent.prototype.applyUserConfig = function () {
|
|
1503
1529
|
var _this = this;
|
|
1504
1530
|
return new Promise(function (resolve) {
|
|
1505
|
-
_this.uiConfigService
|
|
1531
|
+
_this.uiConfigService
|
|
1532
|
+
.getConfig(_this.settingsKey)
|
|
1506
1533
|
.pipe(operators.take(1))
|
|
1507
1534
|
.subscribe(function (config) {
|
|
1508
1535
|
/* istanbul ignore else */
|
|
1509
1536
|
if (config && config.selectedColumnIds) {
|
|
1510
1537
|
// Remove any columnIds that don't exist in the current data set.
|
|
1511
|
-
|
|
1512
|
-
_this.selectedColumnIds = filteredColumnIds;
|
|
1538
|
+
_this.selectedColumnIds = config.selectedColumnIds.filter(function (id) { return _this.columns.find(function (column) { return column.id === id; }); });
|
|
1513
1539
|
_this.changeDetector.markForCheck();
|
|
1514
1540
|
}
|
|
1515
1541
|
resolve();
|
|
@@ -1522,7 +1548,8 @@
|
|
|
1522
1548
|
if (!this.settingsKey) {
|
|
1523
1549
|
return;
|
|
1524
1550
|
}
|
|
1525
|
-
this.uiConfigService
|
|
1551
|
+
this.uiConfigService
|
|
1552
|
+
.setConfig(this.settingsKey, config)
|
|
1526
1553
|
.pipe(operators.takeUntil(this.ngUnsubscribe))
|
|
1527
1554
|
.subscribe(function () { }, function (err) {
|
|
1528
1555
|
console.warn('Could not save grid settings.');
|
|
@@ -1532,8 +1559,7 @@
|
|
|
1532
1559
|
SkyGridComponent.prototype.initColumns = function () {
|
|
1533
1560
|
var _this = this;
|
|
1534
1561
|
/* istanbul ignore else */
|
|
1535
|
-
if (this.columnComponents.length !== 0 ||
|
|
1536
|
-
this.columns !== undefined) {
|
|
1562
|
+
if (this.columnComponents.length !== 0 || this.columns !== undefined) {
|
|
1537
1563
|
/* istanbul ignore else */
|
|
1538
1564
|
/* sanity check */
|
|
1539
1565
|
if (this.columnComponents.length > 0) {
|
|
@@ -1547,41 +1573,34 @@
|
|
|
1547
1573
|
this.subscriptions.push(this.columnComponents.changes.subscribe(function () { return _this.updateColumns(); }));
|
|
1548
1574
|
// Watch for column heading changes:
|
|
1549
1575
|
this.columnComponents.forEach(function (comp) {
|
|
1550
|
-
_this.subscriptions.push(comp.headingModelChanges
|
|
1551
|
-
.subscribe(function (change) {
|
|
1576
|
+
_this.subscriptions.push(comp.headingModelChanges.subscribe(function (change) {
|
|
1552
1577
|
_this.updateColumnHeading(change);
|
|
1553
1578
|
}));
|
|
1554
|
-
_this.subscriptions.push(comp.descriptionModelChanges
|
|
1555
|
-
.subscribe(function (change) {
|
|
1579
|
+
_this.subscriptions.push(comp.descriptionModelChanges.subscribe(function (change) {
|
|
1556
1580
|
_this.updateColumnDescription(change);
|
|
1557
1581
|
}));
|
|
1558
|
-
_this.subscriptions.push(comp.inlineHelpPopoverModelChanges
|
|
1559
|
-
.subscribe(function (change) {
|
|
1582
|
+
_this.subscriptions.push(comp.inlineHelpPopoverModelChanges.subscribe(function (change) {
|
|
1560
1583
|
_this.updateInlineHelpPopover(change);
|
|
1561
1584
|
}));
|
|
1562
1585
|
});
|
|
1563
1586
|
};
|
|
1564
1587
|
SkyGridComponent.prototype.arraysEqual = function (arrayA, arrayB) {
|
|
1565
|
-
return arrayA.length === arrayB.length &&
|
|
1566
|
-
arrayA.every(function (value, index) { return value === arrayB[index]; });
|
|
1588
|
+
return (arrayA.length === arrayB.length &&
|
|
1589
|
+
arrayA.every(function (value, index) { return value === arrayB[index]; }));
|
|
1567
1590
|
};
|
|
1568
1591
|
return SkyGridComponent;
|
|
1569
1592
|
}());
|
|
1570
|
-
SkyGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1571
|
-
SkyGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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: [
|
|
1572
|
-
|
|
1573
|
-
], 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 *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\n class=\"sky-grid-table\"\n [ngClass]=\"getTableClassNames()\"\n #gridTable>\n <thead>\n <tr dragula=\"sky-grid-heading\">\n <th *ngIf=\"enableMultiselect\"\n class=\"sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\"\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 *ngFor=\"let column of displayedColumns; let last = last, let i = index\"\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 *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\n class=\"sky-grid-header-text\"\n >{{column.heading?.trim()}}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"'sky-grid-heading-sort-' + (getCaretVisibility(column.field) | async)\"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden' : 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 </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.aria-selected]=\"item.isSelected\"\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 *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 *ngFor=\"let column of displayedColumns; let last = last; let i = index\"\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]=\"!column.excludeFromHighlighting ? highlightText : undefined\"\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 </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n id=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n >\n </div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{value}}</ng-template>\n\n<ng-template\n let-item\n #inlineDeleteTemplateRef\n>\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;-moz-user-select:none;-ms-user-select:none;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 });
|
|
1574
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyGridComponent, decorators: [{
|
|
1593
|
+
SkyGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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 });
|
|
1594
|
+
SkyGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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.aria-selected]=\"item.isSelected\"\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 });
|
|
1595
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridComponent, decorators: [{
|
|
1575
1596
|
type: i0.Component,
|
|
1576
1597
|
args: [{
|
|
1577
1598
|
selector: 'sky-grid',
|
|
1578
|
-
|
|
1579
|
-
|
|
1599
|
+
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.aria-selected]=\"item.isSelected\"\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",
|
|
1600
|
+
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"],
|
|
1580
1601
|
viewProviders: [i2.DragulaService],
|
|
1581
|
-
providers: [
|
|
1582
|
-
|
|
1583
|
-
],
|
|
1584
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
1602
|
+
providers: [SkyGridAdapterService],
|
|
1603
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1585
1604
|
}]
|
|
1586
1605
|
}], 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: [{
|
|
1587
1606
|
type: i0.Input
|
|
@@ -1664,7 +1683,7 @@
|
|
|
1664
1683
|
* To update this file, simply rerun the command.
|
|
1665
1684
|
*/
|
|
1666
1685
|
var RESOURCES = {
|
|
1667
|
-
'EN-US': {
|
|
1686
|
+
'EN-US': { skyux_grid_multiselect_select_row: { message: 'Select row' } },
|
|
1668
1687
|
};
|
|
1669
1688
|
var SkyuxGridsResourcesProvider = /** @class */ (function () {
|
|
1670
1689
|
function SkyuxGridsResourcesProvider() {
|
|
@@ -1682,22 +1701,26 @@
|
|
|
1682
1701
|
}
|
|
1683
1702
|
return SkyuxGridsResourcesModule;
|
|
1684
1703
|
}());
|
|
1685
|
-
SkyuxGridsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1686
|
-
SkyuxGridsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1687
|
-
SkyuxGridsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
1704
|
+
SkyuxGridsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1705
|
+
SkyuxGridsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, exports: [i11.SkyI18nModule] });
|
|
1706
|
+
SkyuxGridsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, providers: [
|
|
1707
|
+
{
|
|
1688
1708
|
provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
|
|
1689
1709
|
useClass: SkyuxGridsResourcesProvider,
|
|
1690
|
-
multi: true
|
|
1691
|
-
}
|
|
1692
|
-
|
|
1710
|
+
multi: true,
|
|
1711
|
+
},
|
|
1712
|
+
], imports: [i11.SkyI18nModule] });
|
|
1713
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, decorators: [{
|
|
1693
1714
|
type: i0.NgModule,
|
|
1694
1715
|
args: [{
|
|
1695
1716
|
exports: [i11.SkyI18nModule],
|
|
1696
|
-
providers: [
|
|
1717
|
+
providers: [
|
|
1718
|
+
{
|
|
1697
1719
|
provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
|
|
1698
1720
|
useClass: SkyuxGridsResourcesProvider,
|
|
1699
|
-
multi: true
|
|
1700
|
-
}
|
|
1721
|
+
multi: true,
|
|
1722
|
+
},
|
|
1723
|
+
],
|
|
1701
1724
|
}]
|
|
1702
1725
|
}] });
|
|
1703
1726
|
|
|
@@ -1706,8 +1729,8 @@
|
|
|
1706
1729
|
}
|
|
1707
1730
|
return SkyGridModule;
|
|
1708
1731
|
}());
|
|
1709
|
-
SkyGridModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1710
|
-
SkyGridModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
1732
|
+
SkyGridModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
1733
|
+
SkyGridModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridModule, declarations: [SkyGridComponent,
|
|
1711
1734
|
SkyGridColumnComponent,
|
|
1712
1735
|
SkyGridCellComponent], imports: [i8.CommonModule,
|
|
1713
1736
|
i2.DragulaModule,
|
|
@@ -1720,9 +1743,8 @@
|
|
|
1720
1743
|
i7.SkyInlineDeleteModule,
|
|
1721
1744
|
i1.SkyOverlayModule,
|
|
1722
1745
|
i9.SkyPopoverModule,
|
|
1723
|
-
i4.SkyTextHighlightModule], exports: [SkyGridComponent,
|
|
1724
|
-
|
|
1725
|
-
SkyGridModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyGridModule, imports: [[
|
|
1746
|
+
i4.SkyTextHighlightModule], exports: [SkyGridComponent, SkyGridColumnComponent] });
|
|
1747
|
+
SkyGridModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridModule, imports: [[
|
|
1726
1748
|
i8.CommonModule,
|
|
1727
1749
|
i2.DragulaModule,
|
|
1728
1750
|
i10.FormsModule,
|
|
@@ -1734,15 +1756,15 @@
|
|
|
1734
1756
|
i7.SkyInlineDeleteModule,
|
|
1735
1757
|
i1.SkyOverlayModule,
|
|
1736
1758
|
i9.SkyPopoverModule,
|
|
1737
|
-
i4.SkyTextHighlightModule
|
|
1759
|
+
i4.SkyTextHighlightModule,
|
|
1738
1760
|
]] });
|
|
1739
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1761
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyGridModule, decorators: [{
|
|
1740
1762
|
type: i0.NgModule,
|
|
1741
1763
|
args: [{
|
|
1742
1764
|
declarations: [
|
|
1743
1765
|
SkyGridComponent,
|
|
1744
1766
|
SkyGridColumnComponent,
|
|
1745
|
-
SkyGridCellComponent
|
|
1767
|
+
SkyGridCellComponent,
|
|
1746
1768
|
],
|
|
1747
1769
|
imports: [
|
|
1748
1770
|
i8.CommonModule,
|
|
@@ -1756,12 +1778,9 @@
|
|
|
1756
1778
|
i7.SkyInlineDeleteModule,
|
|
1757
1779
|
i1.SkyOverlayModule,
|
|
1758
1780
|
i9.SkyPopoverModule,
|
|
1759
|
-
i4.SkyTextHighlightModule
|
|
1781
|
+
i4.SkyTextHighlightModule,
|
|
1760
1782
|
],
|
|
1761
|
-
exports: [
|
|
1762
|
-
SkyGridComponent,
|
|
1763
|
-
SkyGridColumnComponent
|
|
1764
|
-
]
|
|
1783
|
+
exports: [SkyGridComponent, SkyGridColumnComponent],
|
|
1765
1784
|
}]
|
|
1766
1785
|
}] });
|
|
1767
1786
|
|
|
@@ -1776,5 +1795,5 @@
|
|
|
1776
1795
|
|
|
1777
1796
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
1778
1797
|
|
|
1779
|
-
}))
|
|
1798
|
+
}));
|
|
1780
1799
|
//# sourceMappingURL=skyux-grids.umd.js.map
|