jsl-ui 9.28.2 → 9.28.3

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 (170) hide show
  1. package/lib/components/IntervalComponent.d.ts +17 -17
  2. package/lib/components/IntervalComponent.js +65 -68
  3. package/lib/components/auto-suggest/AutoSuggestComponent.d.ts +22 -22
  4. package/lib/components/auto-suggest/AutoSuggestComponent.js +47 -49
  5. package/lib/components/button/ButtonComponent.d.ts +18 -18
  6. package/lib/components/button/ButtonComponent.js +29 -46
  7. package/lib/components/checkbox/CheckBoxComponent.d.ts +28 -28
  8. package/lib/components/checkbox/CheckBoxComponent.js +81 -98
  9. package/lib/components/date/DateComponent.d.ts +32 -32
  10. package/lib/components/date/DateComponent.js +89 -106
  11. package/lib/components/date-range/DateRangeComponent.d.ts +35 -35
  12. package/lib/components/date-range/DateRangeComponent.js +123 -136
  13. package/lib/components/date-time/DateTimeComponent.d.ts +15 -15
  14. package/lib/components/date-time/DateTimeComponent.js +39 -53
  15. package/lib/components/dialog/DialogComponent.d.ts +67 -67
  16. package/lib/components/dialog/DialogComponent.js +198 -251
  17. package/lib/components/drop-down/DropDownComponent.d.ts +27 -27
  18. package/lib/components/drop-down/DropDownComponent.js +60 -74
  19. package/lib/components/expander/ExpanderComponent.d.ts +27 -27
  20. package/lib/components/expander/ExpanderComponent.js +89 -90
  21. package/lib/components/form-field/FormComponent.d.ts +12 -12
  22. package/lib/components/form-field/FormComponent.js +23 -26
  23. package/lib/components/form-field/FormFieldComponent.d.ts +39 -39
  24. package/lib/components/form-field/FormFieldComponent.js +138 -140
  25. package/lib/components/grid/GridComponent.d.ts +26 -26
  26. package/lib/components/grid/GridComponent.js +110 -116
  27. package/lib/components/input/InputComponent.d.ts +33 -33
  28. package/lib/components/input/InputComponent.js +126 -147
  29. package/lib/components/loading/LoadingComponent.d.ts +8 -8
  30. package/lib/components/loading/LoadingComponent.js +20 -22
  31. package/lib/components/navigation/NavigationComponent.d.ts +34 -34
  32. package/lib/components/navigation/NavigationComponent.js +45 -70
  33. package/lib/components/notification/Notification.d.ts +19 -19
  34. package/lib/components/notification/Notification.js +65 -69
  35. package/lib/components/number/NumberComponent.d.ts +26 -26
  36. package/lib/components/number/NumberComponent.js +80 -98
  37. package/lib/components/overlay/OverlayComponent.d.ts +27 -27
  38. package/lib/components/overlay/OverlayComponent.js +137 -149
  39. package/lib/components/progress/ProgressComponent.d.ts +18 -18
  40. package/lib/components/progress/ProgressComponent.js +40 -42
  41. package/lib/components/ribbon-menu/RibbonMenuComponent.d.ts +12 -12
  42. package/lib/components/ribbon-menu/RibbonMenuComponent.js +23 -34
  43. package/lib/components/select/SelectComponent.d.ts +79 -79
  44. package/lib/components/select/SelectComponent.js +356 -369
  45. package/lib/components/select/SelectDDAreaComponent.d.ts +32 -32
  46. package/lib/components/select/SelectDDAreaComponent.js +303 -317
  47. package/lib/components/slider/nouislider.d.ts +44 -44
  48. package/lib/components/slider/nouislider.js +2158 -2158
  49. package/lib/components/stack-panel/SplitterComponent.d.ts +21 -21
  50. package/lib/components/stack-panel/SplitterComponent.js +124 -126
  51. package/lib/components/stack-panel/StackPanelComponent.d.ts +20 -20
  52. package/lib/components/stack-panel/StackPanelComponent.js +50 -64
  53. package/lib/components/tabs/TabsComponent.d.ts +40 -40
  54. package/lib/components/tabs/TabsComponent.js +200 -204
  55. package/lib/components/time/TimeComponent.d.ts +29 -29
  56. package/lib/components/time/TimeComponent.js +104 -113
  57. package/lib/components/tree-view/TreeViewComponent.d.ts +23 -23
  58. package/lib/components/tree-view/TreeViewComponent.js +43 -45
  59. package/lib/components/virtual-render/VirtualRenderComponent.d.ts +30 -30
  60. package/lib/components/virtual-render/VirtualRenderComponent.js +92 -104
  61. package/lib/core/culture.d.ts +5 -5
  62. package/lib/core/culture.js +385 -385
  63. package/lib/core/date.d.ts +14 -14
  64. package/lib/core/date.js +346 -350
  65. package/lib/core/helper.d.ts +13 -13
  66. package/lib/core/helper.js +100 -104
  67. package/lib/core/jq.d.ts +37 -37
  68. package/lib/core/jq.js +362 -371
  69. package/lib/core/lang.d.ts +24 -24
  70. package/lib/core/lang.js +24 -28
  71. package/lib/core/numeric.d.ts +7 -7
  72. package/lib/core/numeric.js +139 -143
  73. package/lib/core/polyfills.js +22 -22
  74. package/lib/core.d.ts +6 -6
  75. package/lib/core.js +6 -6
  76. package/lib/grid/filterDialogs/dateRangeFilter.d.ts +7 -7
  77. package/lib/grid/filterDialogs/dateRangeFilter.js +106 -156
  78. package/lib/grid/filterDialogs/excelFilter.d.ts +9 -9
  79. package/lib/grid/filterDialogs/excelFilter.js +250 -316
  80. package/lib/grid/plugins/ext.overlay.d.ts +2 -2
  81. package/lib/grid/plugins/ext.overlay.js +295 -295
  82. package/lib/grid/plugins/slick.cellrangedecorator.d.ts +12 -12
  83. package/lib/grid/plugins/slick.cellrangedecorator.js +68 -68
  84. package/lib/grid/plugins/slick.cellrangeselector.d.ts +1 -1
  85. package/lib/grid/plugins/slick.cellrangeselector.js +144 -144
  86. package/lib/grid/plugins/slick.cellselectionmodel.d.ts +1 -1
  87. package/lib/grid/plugins/slick.cellselectionmodel.js +194 -194
  88. package/lib/grid/plugins/slick.headerbuttons.d.ts +55 -55
  89. package/lib/grid/plugins/slick.headerbuttons.js +156 -156
  90. package/lib/grid/plugins/slick.headermenu.d.ts +74 -74
  91. package/lib/grid/plugins/slick.headermenu.js +260 -260
  92. package/lib/grid/plugins/slick.rowmovemanager.d.ts +18 -18
  93. package/lib/grid/plugins/slick.rowmovemanager.js +249 -249
  94. package/lib/grid/plugins/slick.rowselectionmodel.d.ts +1 -1
  95. package/lib/grid/plugins/slick.rowselectionmodel.js +167 -167
  96. package/lib/grid/slick.core.d.ts +91 -91
  97. package/lib/grid/slick.core.js +574 -574
  98. package/lib/grid/slick.creator.d.ts +81 -81
  99. package/lib/grid/slick.creator.js +726 -726
  100. package/lib/grid/slick.dataview.d.ts +71 -71
  101. package/lib/grid/slick.dataview.js +1069 -1080
  102. package/lib/grid/slick.editors.core.d.ts +4 -4
  103. package/lib/grid/slick.editors.core.js +235 -235
  104. package/lib/grid/slick.editors.date.d.ts +2 -2
  105. package/lib/grid/slick.editors.date.js +125 -125
  106. package/lib/grid/slick.editors.lookup.d.ts +14 -14
  107. package/lib/grid/slick.editors.lookup.js +352 -353
  108. package/lib/grid/slick.editors.nav.d.ts +6 -6
  109. package/lib/grid/slick.editors.nav.js +22 -22
  110. package/lib/grid/slick.formatters.d.ts +17 -17
  111. package/lib/grid/slick.formatters.js +144 -144
  112. package/lib/grid/slick.grid.d.ts +285 -285
  113. package/lib/grid/slick.grid.js +5409 -5412
  114. package/lib/grid/slick.groupitemmetadataprovider.d.ts +39 -39
  115. package/lib/grid/slick.groupitemmetadataprovider.js +165 -165
  116. package/lib/grid/slick.tree.d.ts +33 -33
  117. package/lib/grid/slick.tree.js +208 -220
  118. package/lib/grid.css +1 -705
  119. package/lib/grid.d.ts +13 -13
  120. package/lib/grid.js +13 -13
  121. package/lib/index.css +8 -2195
  122. package/lib/index.css.map +1 -1
  123. package/lib/index.d.ts +56 -55
  124. package/lib/index.js +61 -61
  125. package/lib/index.js.map +1 -1
  126. package/lib/interaction/dataconverter.d.ts +4 -4
  127. package/lib/interaction/dataconverter.js +0 -1
  128. package/lib/interaction/eventhandler.d.ts +13 -13
  129. package/lib/interaction/eventhandler.js +39 -42
  130. package/lib/interaction/moveable.d.ts +39 -39
  131. package/lib/interaction/moveable.js +160 -174
  132. package/lib/interaction/resizable.d.ts +37 -37
  133. package/lib/interaction/resizable.js +109 -123
  134. package/lib/ui/auto.suggest.d.ts +18 -18
  135. package/lib/ui/auto.suggest.js +244 -259
  136. package/lib/ui/date.picker/date-picker-options.d.ts +11 -11
  137. package/lib/ui/date.picker/date-picker-options.js +76 -76
  138. package/lib/ui/date.picker/lib/date-manip.d.ts +74 -74
  139. package/lib/ui/date.picker/lib/date-manip.js +120 -120
  140. package/lib/ui/date.picker/lib/dom.d.ts +23 -23
  141. package/lib/ui/date.picker/lib/dom.js +28 -28
  142. package/lib/ui/date.picker/lib/emitter.d.ts +13 -13
  143. package/lib/ui/date.picker/lib/emitter.js +49 -49
  144. package/lib/ui/date.picker/lib/fns.d.ts +23 -23
  145. package/lib/ui/date.picker/lib/fns.js +39 -43
  146. package/lib/ui/date.picker/mode/base-mode.d.ts +26 -26
  147. package/lib/ui/date.picker/mode/base-mode.js +248 -248
  148. package/lib/ui/date.picker/mode/dropdown-mode.d.ts +28 -28
  149. package/lib/ui/date.picker/mode/dropdown-mode.js +50 -50
  150. package/lib/ui/date.picker/mode/index.d.ts +28 -28
  151. package/lib/ui/date.picker/mode/index.js +18 -18
  152. package/lib/ui/date.picker/mode/modal-mode.d.ts +25 -25
  153. package/lib/ui/date.picker/mode/modal-mode.js +17 -17
  154. package/lib/ui/date.picker/mode/permanent-mode.d.ts +29 -29
  155. package/lib/ui/date.picker/mode/permanent-mode.js +19 -19
  156. package/lib/ui/date.picker/views/day-picker.d.ts +40 -40
  157. package/lib/ui/date.picker/views/day-picker.js +155 -155
  158. package/lib/ui/date.picker/views/month-picker.d.ts +26 -26
  159. package/lib/ui/date.picker/views/month-picker.js +65 -65
  160. package/lib/ui/date.picker/views/year-picker.d.ts +20 -20
  161. package/lib/ui/date.picker/views/year-picker.js +66 -66
  162. package/lib/ui/date.picker.d.ts +66 -66
  163. package/lib/ui/date.picker.js +32 -32
  164. package/lib/ui/dialog.d.ts +22 -22
  165. package/lib/ui/dialog.js +98 -113
  166. package/lib/ui/drop.down.d.ts +52 -52
  167. package/lib/ui/drop.down.js +2112 -2112
  168. package/lib/ui/number.input.d.ts +13 -13
  169. package/lib/ui/number.input.js +56 -67
  170. package/package.json +1 -1
@@ -1,316 +1,250 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
13
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
14
- return new (P || (P = Promise))(function (resolve, reject) {
15
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
16
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
17
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
18
- step((generator = generator.apply(thisArg, _arguments || [])).next());
19
- });
20
- };
21
- var __generator = (this && this.__generator) || function (thisArg, body) {
22
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
23
- return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
24
- function verb(n) { return function (v) { return step([n, v]); }; }
25
- function step(op) {
26
- if (f) throw new TypeError("Generator is already executing.");
27
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
28
- 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) return t;
29
- if (y = 0, t) op = [op[0] & 2, t.value];
30
- switch (op[0]) {
31
- case 0: case 1: t = op; break;
32
- case 4: _.label++; return { value: op[1], done: false };
33
- case 5: _.label++; y = op[1]; op = [0]; continue;
34
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
35
- default:
36
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
37
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
38
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
39
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
40
- if (t[2]) _.ops.pop();
41
- _.trys.pop(); continue;
42
- }
43
- op = body.call(thisArg, _);
44
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
45
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
46
- }
47
- };
48
- import { UILang } from "../../core/lang";
49
- import { helper } from "../../core/helper";
50
- import { Dialog } from "../../ui/dialog";
51
- import { VirtualRenderComponent } from "../../components/virtual-render/VirtualRenderComponent";
52
- import { JSLRender } from "jsl-render";
53
- var ExcelFilter = /** @class */ (function () {
54
- function ExcelFilter(grid) {
55
- this.grid = grid;
56
- }
57
- ExcelFilter.convertRemToPixels = function (rem) {
58
- return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
59
- };
60
- ExcelFilter.prototype.show = function (col) {
61
- return __awaiter(this, void 0, void 0, function () {
62
- var values, filters, currentFilters, mode, filterOptions, oldCheckedValues, _i, currentFilters_1, f, dlg, dlgBody, id, search, cbAllContainer, cbAll, cbAllLabel, sortedValues, _a, values_1, x, o, visibleValues, checkedValues, cbContainer, rowHeight, height, vr, renderer, dlgObj, dlgOkButton, dlgCancelButton, dlgClearButton;
63
- var _this = this;
64
- return __generator(this, function (_b) {
65
- switch (_b.label) {
66
- case 0:
67
- filters = this.grid.getFilters();
68
- currentFilters = filters.filter(function (f) { return f.columnId === col.id; });
69
- mode = this.grid.getOptions().mode;
70
- filterOptions = this.grid.getOptions().getFilterValues;
71
- if (!(filterOptions == null)) return [3 /*break*/, 1];
72
- if (mode === "client") {
73
- // remove any filters for this column
74
- if (currentFilters.length > 0) {
75
- this.grid.clearFilter(col.id);
76
- }
77
- values = this.getDistinctValues(col);
78
- }
79
- else {
80
- throw new Error("getFilterValues option has to be set when filter mode = server");
81
- }
82
- return [3 /*break*/, 3];
83
- case 1: return [4 /*yield*/, filterOptions(col)];
84
- case 2:
85
- values = _b.sent();
86
- _b.label = 3;
87
- case 3:
88
- oldCheckedValues = {};
89
- if (currentFilters.length > 0) {
90
- for (_i = 0, currentFilters_1 = currentFilters; _i < currentFilters_1.length; _i++) {
91
- f = currentFilters_1[_i];
92
- if (f._checkedValues) {
93
- oldCheckedValues = f._checkedValues;
94
- }
95
- if (mode === "client") {
96
- filters.push(f);
97
- }
98
- }
99
- if (mode === "client") {
100
- this.grid.refreshFilters();
101
- }
102
- }
103
- dlg = document.createElement("div");
104
- dlg.classList.add("jsl-dialog-overlay");
105
- dlg.innerHTML = '<div class="jsl-dialog" style="width:50vw;min-height:50vh;"><div class="dlg-header">' + UILang.grid.Filter + '</div><div class="dlg-body" style="max-height:calc(100vh - 7.5rem)"></div>' +
106
- '<div class="dlg-footer">' +
107
- '<button class="jsl-button ok-button">' + UILang.core.Ok + "</button>" +
108
- (currentFilters.length > 0 ? ('<button class="jsl-button clear-button">' + UILang.grid.ClearFilter + '</button>') : "") +
109
- '<button class="jsl-button close-button">' + UILang.core.Cancel + "</button>" +
110
- "</div></div>";
111
- dlgBody = dlg.querySelector(".dlg-body");
112
- id = helper.newDomGuid();
113
- search = document.createElement("div");
114
- search.innerHTML = "<input type='text' placeholder='" + UILang.grid.Search + "' />";
115
- dlgBody.appendChild(search);
116
- cbAllContainer = document.createElement("div");
117
- cbAll = document.createElement("input");
118
- cbAll.type = "checkbox";
119
- cbAll.id = id;
120
- cbAllContainer.appendChild(cbAll);
121
- cbAllLabel = document.createElement("label");
122
- cbAllLabel.setAttribute("for", id);
123
- cbAllLabel.textContent = UILang.core.All;
124
- cbAllLabel.style.cursor = "pointer";
125
- cbAllLabel.style.marginLeft = "0.2rem";
126
- cbAllContainer.appendChild(cbAllLabel);
127
- dlgBody.appendChild(cbAllContainer);
128
- sortedValues = [];
129
- if (Array.isArray(values)) {
130
- for (_a = 0, values_1 = values; _a < values_1.length; _a++) {
131
- x = values_1[_a];
132
- sortedValues.push({ id: [x], txt: x !== null && x !== void 0 ? x : "" });
133
- }
134
- }
135
- else {
136
- for (o in values) {
137
- if (values.hasOwnProperty(o)) {
138
- sortedValues.push({ id: values[o], txt: o !== null && o !== void 0 ? o : "" });
139
- }
140
- }
141
- }
142
- // TODO: use custom comparer when available
143
- sortedValues.sort(function (a, b) { return a.txt.toLocaleLowerCase() < b.txt.toLocaleLowerCase() ? -1 : (a.txt.toLocaleLowerCase() > b.txt.toLocaleLowerCase() ? 1 : 0); });
144
- visibleValues = sortedValues;
145
- checkedValues = __assign({}, oldCheckedValues);
146
- cbContainer = document.createElement("div");
147
- dlgBody.appendChild(cbContainer);
148
- rowHeight = Math.round(ExcelFilter.convertRemToPixels(1.5));
149
- height = sortedValues.length * rowHeight;
150
- height = Math.min(height, Math.round(window.innerHeight - ExcelFilter.convertRemToPixels(13)));
151
- vr = new VirtualRenderComponent({
152
- data: visibleValues,
153
- renderRow: function (args) {
154
- args.container.attr.style["padding-left"] = "1rem";
155
- args.container.attr.style["overflow"] = "hidden";
156
- args.container.attr.style["display"] = "flex";
157
- args.container.attr.style["align-items"] = "center";
158
- args.container.children.push({
159
- tag: "input",
160
- attr: {
161
- id: id + "_" + args.index,
162
- checked: checkedValues[args.rowData.id[0]] ? "checked" : undefined,
163
- change: function (_, node) {
164
- if (node.dom.checked) {
165
- for (var _i = 0, _a = args.rowData.id; _i < _a.length; _i++) {
166
- var selId = _a[_i];
167
- checkedValues[selId] = true;
168
- }
169
- }
170
- else {
171
- for (var _b = 0, _c = args.rowData.id; _b < _c.length; _b++) {
172
- var selId = _c[_b];
173
- delete checkedValues[selId];
174
- }
175
- }
176
- // check if all values or none are checked
177
- var allChecked = Object.getOwnPropertyNames(checkedValues).length === sortedValues.length;
178
- var allCb = dlgBody.querySelector("#" + id);
179
- allCb.checked = allChecked;
180
- },
181
- type: "checkbox"
182
- }
183
- });
184
- args.container.children.push({
185
- tag: "label",
186
- attr: {
187
- for: id + "_" + args.index,
188
- style: "margin-left:0.2rem;cursor:pointer"
189
- },
190
- raw: true,
191
- content: args.rowData.txt
192
- });
193
- },
194
- rowHeight: rowHeight,
195
- style: "height:" + height + "px"
196
- });
197
- renderer = new JSLRender(cbContainer, false);
198
- renderer.render(vr);
199
- search.addEventListener("input", function (evt) {
200
- var _a;
201
- var term = ((_a = evt.target.value) !== null && _a !== void 0 ? _a : "").toLowerCase();
202
- if (term) {
203
- visibleValues = sortedValues.filter(function (x) { var _a; return ((_a = x.txt) !== null && _a !== void 0 ? _a : "").toLowerCase().indexOf(term) >= 0; });
204
- }
205
- else {
206
- visibleValues = sortedValues;
207
- }
208
- vr.setData(visibleValues);
209
- renderer.refresh();
210
- });
211
- cbAll.addEventListener("change", function () {
212
- for (var i = 0; i < visibleValues.length; i++) {
213
- // if (cbAll.checked) {
214
- // checkedValues[visibleValues[i].id] = true;
215
- // } else {
216
- // delete checkedValues[visibleValues[i].id];
217
- // }
218
- if (cbAll.checked) {
219
- for (var _i = 0, _a = visibleValues[i].id; _i < _a.length; _i++) {
220
- var selId = _a[_i];
221
- checkedValues[selId] = true;
222
- }
223
- }
224
- else {
225
- for (var _b = 0, _c = visibleValues[i].id; _b < _c.length; _b++) {
226
- var selId = _c[_b];
227
- delete checkedValues[selId];
228
- }
229
- }
230
- }
231
- renderer.refresh();
232
- });
233
- document.body.appendChild(dlg);
234
- dlgObj = Dialog(dlg, {
235
- autoOpen: true, onClose: function () {
236
- dlg.innerHTML = "";
237
- dlg.parentElement.removeChild(dlg);
238
- }
239
- });
240
- dlgOkButton = dlg.querySelector(".dlg-footer .ok-button");
241
- dlgOkButton.addEventListener("click", function (evt) {
242
- var selLength = Object.getOwnPropertyNames(checkedValues).length;
243
- var allChecked = selLength === sortedValues.length;
244
- var anyChecked = selLength > 0;
245
- _this.grid.clearFilter(col.id, true);
246
- if (!allChecked && anyChecked) {
247
- // something (but not everything) was selected -> filter
248
- var filterObject = {
249
- field: col.field, columnId: col.id, match: mode === "server" ? function () { return true; } : function (item, field) {
250
- return !!checkedValues[_this.grid.getDataItemValueForColumn(item, col)];
251
- }
252
- };
253
- filterObject._checkedValues = checkedValues;
254
- _this.grid.addFilter(filterObject, true);
255
- }
256
- _this.grid.refreshFilters();
257
- dlgObj.close();
258
- });
259
- dlgCancelButton = dlg.querySelector(".dlg-footer .close-button");
260
- dlgCancelButton.addEventListener("click", function (evt) {
261
- dlgObj.close();
262
- });
263
- dlgClearButton = dlg.querySelector(".dlg-footer .clear-button");
264
- if (dlgClearButton != null) {
265
- dlgClearButton.addEventListener("click", function (evt) {
266
- _this.grid.clearFilter(col.id);
267
- dlgObj.close();
268
- });
269
- }
270
- return [2 /*return*/];
271
- }
272
- });
273
- });
274
- };
275
- // private updateStateOfAllCheckebox(dlgBody: HTMLElement, id: string) {
276
- // let counter = 0;
277
- // let el: HTMLInputElement;
278
- // const allCb: HTMLInputElement = dlgBody.querySelector("#" + id) as HTMLInputElement;
279
- // // tslint:disable-next-line: no-conditional-assignment
280
- // while (null != (el = dlgBody.querySelector("#" + id + "_" + counter) as HTMLInputElement)) {
281
- // if (el.parentElement.style.display !== "none" && !el.checked) {
282
- // allCb.checked = false;
283
- // return;
284
- // }
285
- // counter++;
286
- // }
287
- // allCb.checked = true;
288
- // }
289
- // private checkAllVisibleBoxes(el: HTMLElement, state: boolean) {
290
- // const checkboxes = el.querySelectorAll("input");
291
- // for (let i = 0; i < checkboxes.length; i++) {
292
- // if (checkboxes[i].type === "checkbox" &&
293
- // checkboxes[i].parentElement.style.display !== "none") {
294
- // checkboxes[i].checked = state;
295
- // }
296
- // }
297
- // }
298
- ExcelFilter.prototype.getDistinctValues = function (col) {
299
- var textToValues = {};
300
- for (var idx = 0, len = this.grid.getDataLength(); idx < len; idx++) {
301
- var item = this.grid.getDataItem(idx);
302
- var value = this.grid.getDataItemValueForColumn(item, col);
303
- var text = this.grid.getFormattedValue(col, value, item);
304
- var valueList = textToValues[text];
305
- if (valueList == null) {
306
- valueList = textToValues[text] = [];
307
- }
308
- if (valueList.indexOf(value) < 0) {
309
- valueList.push(value);
310
- }
311
- }
312
- return textToValues;
313
- };
314
- return ExcelFilter;
315
- }());
316
- export { ExcelFilter };
1
+ import { UILang } from "../../core/lang";
2
+ import { helper } from "../../core/helper";
3
+ import { Dialog } from "../../ui/dialog";
4
+ import { VirtualRenderComponent } from "../../components/virtual-render/VirtualRenderComponent";
5
+ import { JSLRender } from "jsl-render";
6
+ export class ExcelFilter {
7
+ constructor(grid) {
8
+ this.grid = grid;
9
+ }
10
+ static convertRemToPixels(rem) {
11
+ return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
12
+ }
13
+ async show(col) {
14
+ let values;
15
+ const filters = this.grid.getFilters();
16
+ const currentFilters = filters.filter((f) => f.columnId === col.id);
17
+ const mode = this.grid.getOptions().mode;
18
+ const filterOptions = this.grid.getOptions().getFilterValues;
19
+ if (filterOptions == null) {
20
+ if (mode === "client") {
21
+ // remove any filters for this column
22
+ if (currentFilters.length > 0) {
23
+ this.grid.clearFilter(col.id);
24
+ }
25
+ values = this.getDistinctValues(col);
26
+ }
27
+ else {
28
+ throw new Error("getFilterValues option has to be set when filter mode = server");
29
+ }
30
+ }
31
+ else {
32
+ values = await filterOptions(col);
33
+ }
34
+ let oldCheckedValues = {};
35
+ if (currentFilters.length > 0) {
36
+ for (const f of currentFilters) {
37
+ if (f._checkedValues) {
38
+ oldCheckedValues = f._checkedValues;
39
+ }
40
+ if (mode === "client") {
41
+ filters.push(f);
42
+ }
43
+ }
44
+ if (mode === "client") {
45
+ this.grid.refreshFilters();
46
+ }
47
+ }
48
+ const dlg = document.createElement("div");
49
+ dlg.classList.add("jsl-dialog-overlay");
50
+ dlg.innerHTML = '<div class="jsl-dialog" style="width:50vw;min-height:50vh;"><div class="dlg-header">' + UILang.grid.Filter + '</div><div class="dlg-body" style="max-height:calc(100vh - 7.5rem)"></div>' +
51
+ '<div class="dlg-footer">' +
52
+ '<button class="jsl-button ok-button">' + UILang.core.Ok + "</button>" +
53
+ (currentFilters.length > 0 ? ('<button class="jsl-button clear-button">' + UILang.grid.ClearFilter + '</button>') : "") +
54
+ '<button class="jsl-button close-button">' + UILang.core.Cancel + "</button>" +
55
+ "</div></div>";
56
+ const dlgBody = dlg.querySelector(".dlg-body");
57
+ const id = helper.newDomGuid();
58
+ const search = document.createElement("div");
59
+ search.innerHTML = "<input type='text' placeholder='" + UILang.grid.Search + "' />";
60
+ dlgBody.appendChild(search);
61
+ const cbAllContainer = document.createElement("div");
62
+ const cbAll = document.createElement("input");
63
+ cbAll.type = "checkbox";
64
+ cbAll.id = id;
65
+ cbAllContainer.appendChild(cbAll);
66
+ const cbAllLabel = document.createElement("label");
67
+ cbAllLabel.setAttribute("for", id);
68
+ cbAllLabel.textContent = UILang.core.All;
69
+ cbAllLabel.style.cursor = "pointer";
70
+ cbAllLabel.style.marginLeft = "0.2rem";
71
+ cbAllContainer.appendChild(cbAllLabel);
72
+ dlgBody.appendChild(cbAllContainer);
73
+ const sortedValues = [];
74
+ if (Array.isArray(values)) {
75
+ for (const x of values) {
76
+ sortedValues.push({ id: [x], txt: x !== null && x !== void 0 ? x : "" });
77
+ }
78
+ }
79
+ else {
80
+ for (const o in values) {
81
+ if (values.hasOwnProperty(o)) {
82
+ sortedValues.push({ id: values[o], txt: o !== null && o !== void 0 ? o : "" });
83
+ }
84
+ }
85
+ }
86
+ // TODO: use custom comparer when available
87
+ sortedValues.sort((a, b) => a.txt.toLocaleLowerCase() < b.txt.toLocaleLowerCase() ? -1 : (a.txt.toLocaleLowerCase() > b.txt.toLocaleLowerCase() ? 1 : 0));
88
+ let visibleValues = sortedValues;
89
+ const checkedValues = { ...oldCheckedValues };
90
+ const cbContainer = document.createElement("div");
91
+ dlgBody.appendChild(cbContainer);
92
+ const rowHeight = /*this.grid.getOptions().rowHeight ||*/ Math.round(ExcelFilter.convertRemToPixels(1.5));
93
+ let height = sortedValues.length * rowHeight;
94
+ height = Math.min(height, Math.round(window.innerHeight - ExcelFilter.convertRemToPixels(13)));
95
+ const vr = new VirtualRenderComponent({
96
+ data: visibleValues,
97
+ renderRow: (args) => {
98
+ args.container.attr.style["padding-left"] = "1rem";
99
+ args.container.attr.style["overflow"] = "hidden";
100
+ args.container.attr.style["display"] = "flex";
101
+ args.container.attr.style["align-items"] = "center";
102
+ args.container.children.push({
103
+ tag: "input",
104
+ attr: {
105
+ id: id + "_" + args.index,
106
+ checked: checkedValues[args.rowData.id[0]] ? "checked" : undefined,
107
+ change: (_, node) => {
108
+ if (node.dom.checked) {
109
+ for (const selId of args.rowData.id) {
110
+ checkedValues[selId] = true;
111
+ }
112
+ }
113
+ else {
114
+ for (const selId of args.rowData.id) {
115
+ delete checkedValues[selId];
116
+ }
117
+ }
118
+ // check if all values or none are checked
119
+ const allChecked = Object.getOwnPropertyNames(checkedValues).length === sortedValues.length;
120
+ const allCb = dlgBody.querySelector("#" + id);
121
+ allCb.checked = allChecked;
122
+ },
123
+ type: "checkbox"
124
+ }
125
+ });
126
+ args.container.children.push({
127
+ tag: "label",
128
+ attr: {
129
+ for: id + "_" + args.index,
130
+ style: "margin-left:0.2rem;cursor:pointer"
131
+ },
132
+ raw: true,
133
+ content: args.rowData.txt
134
+ });
135
+ },
136
+ rowHeight,
137
+ style: "height:" + height + "px"
138
+ });
139
+ const renderer = new JSLRender(cbContainer, false);
140
+ renderer.render(vr);
141
+ search.addEventListener("input", (evt) => {
142
+ var _a;
143
+ const term = ((_a = evt.target.value) !== null && _a !== void 0 ? _a : "").toLowerCase();
144
+ if (term) {
145
+ visibleValues = sortedValues.filter((x) => { var _a; return ((_a = x.txt) !== null && _a !== void 0 ? _a : "").toLowerCase().indexOf(term) >= 0; });
146
+ }
147
+ else {
148
+ visibleValues = sortedValues;
149
+ }
150
+ vr.setData(visibleValues);
151
+ renderer.refresh();
152
+ });
153
+ cbAll.addEventListener("change", () => {
154
+ for (let i = 0; i < visibleValues.length; i++) {
155
+ // if (cbAll.checked) {
156
+ // checkedValues[visibleValues[i].id] = true;
157
+ // } else {
158
+ // delete checkedValues[visibleValues[i].id];
159
+ // }
160
+ if (cbAll.checked) {
161
+ for (const selId of visibleValues[i].id) {
162
+ checkedValues[selId] = true;
163
+ }
164
+ }
165
+ else {
166
+ for (const selId of visibleValues[i].id) {
167
+ delete checkedValues[selId];
168
+ }
169
+ }
170
+ }
171
+ renderer.refresh();
172
+ });
173
+ document.body.appendChild(dlg);
174
+ const dlgObj = Dialog(dlg, {
175
+ autoOpen: true, onClose: () => {
176
+ dlg.innerHTML = "";
177
+ dlg.parentElement.removeChild(dlg);
178
+ }
179
+ });
180
+ const dlgOkButton = dlg.querySelector(".dlg-footer .ok-button");
181
+ dlgOkButton.addEventListener("click", (evt) => {
182
+ const selLength = Object.getOwnPropertyNames(checkedValues).length;
183
+ const allChecked = selLength === sortedValues.length;
184
+ const anyChecked = selLength > 0;
185
+ this.grid.clearFilter(col.id, true);
186
+ if (!allChecked && anyChecked) {
187
+ // something (but not everything) was selected -> filter
188
+ const filterObject = {
189
+ field: col.field, columnId: col.id, match: mode === "server" ? () => true : (item, field) => {
190
+ return !!checkedValues[this.grid.getDataItemValueForColumn(item, col)];
191
+ }
192
+ };
193
+ filterObject._checkedValues = checkedValues;
194
+ this.grid.addFilter(filterObject, true);
195
+ }
196
+ this.grid.refreshFilters();
197
+ dlgObj.close();
198
+ });
199
+ const dlgCancelButton = dlg.querySelector(".dlg-footer .close-button");
200
+ dlgCancelButton.addEventListener("click", (evt) => {
201
+ dlgObj.close();
202
+ });
203
+ const dlgClearButton = dlg.querySelector(".dlg-footer .clear-button");
204
+ if (dlgClearButton != null) {
205
+ dlgClearButton.addEventListener("click", (evt) => {
206
+ this.grid.clearFilter(col.id);
207
+ dlgObj.close();
208
+ });
209
+ }
210
+ }
211
+ // private updateStateOfAllCheckebox(dlgBody: HTMLElement, id: string) {
212
+ // let counter = 0;
213
+ // let el: HTMLInputElement;
214
+ // const allCb: HTMLInputElement = dlgBody.querySelector("#" + id) as HTMLInputElement;
215
+ // // tslint:disable-next-line: no-conditional-assignment
216
+ // while (null != (el = dlgBody.querySelector("#" + id + "_" + counter) as HTMLInputElement)) {
217
+ // if (el.parentElement.style.display !== "none" && !el.checked) {
218
+ // allCb.checked = false;
219
+ // return;
220
+ // }
221
+ // counter++;
222
+ // }
223
+ // allCb.checked = true;
224
+ // }
225
+ // private checkAllVisibleBoxes(el: HTMLElement, state: boolean) {
226
+ // const checkboxes = el.querySelectorAll("input");
227
+ // for (let i = 0; i < checkboxes.length; i++) {
228
+ // if (checkboxes[i].type === "checkbox" &&
229
+ // checkboxes[i].parentElement.style.display !== "none") {
230
+ // checkboxes[i].checked = state;
231
+ // }
232
+ // }
233
+ // }
234
+ getDistinctValues(col) {
235
+ const textToValues = {};
236
+ for (let idx = 0, len = this.grid.getDataLength(); idx < len; idx++) {
237
+ const item = this.grid.getDataItem(idx);
238
+ const value = this.grid.getDataItemValueForColumn(item, col);
239
+ const text = this.grid.getFormattedValue(col, value, item);
240
+ let valueList = textToValues[text];
241
+ if (valueList == null) {
242
+ valueList = textToValues[text] = [];
243
+ }
244
+ if (valueList.indexOf(value) < 0) {
245
+ valueList.push(value);
246
+ }
247
+ }
248
+ return textToValues;
249
+ }
250
+ }
@@ -1,2 +1,2 @@
1
- import "./ext.overlay.css";
2
- export declare function Overlays(options: any): void;
1
+ import "./ext.overlay.css";
2
+ export declare function Overlays(options: any): void;