empower-container 0.1.9 → 0.1.12

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 (83) hide show
  1. package/README.md +70 -2
  2. package/{src/main → dist}/assets/Asset.d.ts +0 -0
  3. package/{src/main → dist}/assets/Asset.js +0 -0
  4. package/{src/main → dist}/assets/Asset.tsx +0 -0
  5. package/{src/main → dist}/assets/icons/icon-check-white-sm.svg +0 -0
  6. package/{src/main → dist}/assets/images/icon-arrowdown-graydark.svg +0 -0
  7. package/{src/main → dist}/assets/images/icon-arrowleft-graydark.svg +0 -0
  8. package/{src/main → dist}/assets/images/icon-arrowright-graydark.svg +0 -0
  9. package/{src/main → dist}/assets/images/icon-arrowup-graydark.svg +0 -0
  10. package/{src/main → dist}/assets/images/icon-check-graydark.svg +0 -0
  11. package/dist/cjs/MenuBar.js +7 -7
  12. package/dist/esm/MenuBar.js +7 -7
  13. package/dist/scss/elements/_button.scss +5 -5
  14. package/dist/scss/library/_menubar.scss +41 -11
  15. package/dist/scss/library/_select.scss +6 -5
  16. package/package.json +2 -2
  17. package/public/favicon.ico +0 -0
  18. package/public/index.html +0 -43
  19. package/public/logo192.png +0 -0
  20. package/public/logo512.png +0 -0
  21. package/public/manifest.json +0 -25
  22. package/public/robots.txt +0 -3
  23. package/src/index.tsx +0 -15
  24. package/src/main/DatetimeFormatter.d.ts +0 -3
  25. package/src/main/DatetimeFormatter.js +0 -389
  26. package/src/main/DatetimeFormatter.tsx +0 -392
  27. package/src/main/Information.d.ts +0 -10
  28. package/src/main/Information.js +0 -65
  29. package/src/main/Information.tsx +0 -112
  30. package/src/main/MenuBar.d.ts +0 -24
  31. package/src/main/MenuBar.js +0 -650
  32. package/src/main/MenuBar.tsx +0 -1072
  33. package/src/main/Modal.d.ts +0 -33
  34. package/src/main/Modal.js +0 -24
  35. package/src/main/Modal.tsx +0 -83
  36. package/src/main/constants/Constant.d.ts +0 -15
  37. package/src/main/constants/Constant.js +0 -44
  38. package/src/main/index.d.ts +0 -3
  39. package/src/main/index.js +0 -10
  40. package/src/main/index.tsx +0 -5
  41. package/src/main/inputs/Input.d.ts +0 -25
  42. package/src/main/inputs/Input.js +0 -135
  43. package/src/main/inputs/Input.tsx +0 -193
  44. package/src/main/inputs/InputSelectionHandler.d.ts +0 -2
  45. package/src/main/inputs/InputSelectionHandler.js +0 -36
  46. package/src/main/inputs/InputSelectionHandler.tsx +0 -21
  47. package/src/main/inputs/Select.d.ts +0 -28
  48. package/src/main/inputs/Select.js +0 -456
  49. package/src/main/inputs/Select.tsx +0 -654
  50. package/src/main/tsconfig.common.json +0 -34
  51. package/src/main/tsconfig.json +0 -35
  52. package/src/sample/App.css +0 -38
  53. package/src/sample/App.d.ts +0 -3
  54. package/src/sample/App.js +0 -13
  55. package/src/sample/App.test.d.ts +0 -1
  56. package/src/sample/App.test.js +0 -13
  57. package/src/sample/App.test.tsx +0 -9
  58. package/src/sample/App.tsx +0 -15
  59. package/src/sample/TestMenuBar.d.ts +0 -2
  60. package/src/sample/TestMenuBar.js +0 -508
  61. package/src/sample/TestMenuBar.tsx +0 -362
  62. package/src/sample/react-app-env.d.ts +0 -1
  63. package/src/sample/reportWebVitals.d.ts +0 -3
  64. package/src/sample/reportWebVitals.js +0 -38
  65. package/src/sample/reportWebVitals.ts +0 -15
  66. package/src/sample/setupTests.d.ts +0 -1
  67. package/src/sample/setupTests.js +0 -7
  68. package/src/sample/setupTests.ts +0 -5
  69. package/src/sample/tsconfig.json +0 -36
  70. package/src/scss/components/_modal.scss +0 -66
  71. package/src/scss/elements/_button.scss +0 -107
  72. package/src/scss/elements/_index.scss +0 -2
  73. package/src/scss/elements/_popover.scss +0 -8
  74. package/src/scss/foundation/_colors.scss +0 -60
  75. package/src/scss/foundation/_mixins.scss +0 -41
  76. package/src/scss/foundation/_normalize.scss +0 -204
  77. package/src/scss/foundation/_settings.scss +0 -36
  78. package/src/scss/foundation/_typography.scss +0 -95
  79. package/src/scss/library/_information.scss +0 -68
  80. package/src/scss/library/_input.scss +0 -37
  81. package/src/scss/library/_menubar.scss +0 -225
  82. package/src/scss/library/_select.scss +0 -258
  83. package/src/scss/style.scss +0 -24
@@ -1,456 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || function (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
37
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
38
- if (ar || !(i in from)) {
39
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
40
- ar[i] = from[i];
41
- }
42
- }
43
- return to.concat(ar || Array.prototype.slice.call(from));
44
- };
45
- Object.defineProperty(exports, "__esModule", { value: true });
46
- exports.Popover = void 0;
47
- var react_1 = __importStar(require("react"));
48
- require("../../scss/style.scss");
49
- // Imports
50
- var Asset_1 = require("../assets/Asset");
51
- var Popover = function (_a) {
52
- var open = _a.open, origin = _a.origin, children = _a.children, onClick = _a.onClick;
53
- return (react_1.default.createElement(react_1.Fragment, null, open &&
54
- react_1.default.createElement(react_1.Fragment, null,
55
- react_1.default.createElement("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }),
56
- react_1.default.createElement("div", { className: "em-popover", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, children))));
57
- };
58
- exports.Popover = Popover;
59
- var Dropdown = function (_a) {
60
- var config = _a.config, customClass = _a.customClass, onChanged = _a.onChanged, isEmployeeSelection = _a.isEmployeeSelection, hideClearIcon = _a.hideClearIcon;
61
- var _b = __assign({}, config), disabled = _b.disabled, options = _b.options, type = _b.type, value = _b.value, placeholder = _b.placeholder, id = _b.id;
62
- // React Hook
63
- var _c = (0, react_1.useState)(false), dropdownPopover = _c[0], setDropdownPopover = _c[1];
64
- var _d = (0, react_1.useState)(options ? options : []), optionsArray = _d[0], setOptionsArray = _d[1];
65
- var _e = (0, react_1.useState)(""), selectTemporaryValue = _e[0], setSelectTemporaryValue = _e[1];
66
- var _f = (0, react_1.useState)(null), keyOption = _f[0], setKeyOption = _f[1];
67
- var _g = (0, react_1.useState)(null), objectKeyOption = _g[0], setObjectKeyOption = _g[1];
68
- // Dropdown Config Variable
69
- var dropdownClass = disabled && disabled.constructor === Boolean ? 'em-input-field input-disabled' : 'em-input-field';
70
- var multiSelectValue = type === 'multi-select' ? (value && value.constructor === Array && value.length > 0 ? (getSelectInputValue(value)) : '') : '';
71
- var selectedValue = value && (value.constructor === String || value.constructor === Number) && value !== "" ? (getSelectInputValue(value)) : value && value.constructor === Array && value.length > 0 ? (getSelectInputValue(value)) : placeholder && placeholder.constructor === String ? placeholder : '-';
72
- /**
73
- * popoverRequestHandler
74
- * hide and show the options popover
75
- * @param {*} e - event
76
- * @param {*} action - it can be either on-focus or on-blur
77
- */
78
- function popoverRequestHandler(e, action) {
79
- if (action === 'on-focus') {
80
- type === 'select' ? setOptionsArray(options) : filterOptions(selectTemporaryValue, value);
81
- setDropdownPopover(e.currentTarget);
82
- setKeyOption(null);
83
- setObjectKeyOption(null);
84
- }
85
- else {
86
- setDropdownPopover(false);
87
- setSelectTemporaryValue("");
88
- }
89
- }
90
- /**
91
- * optionSelectionHandler
92
- * manipulate the selected options
93
- * @param {*} e - event
94
- * @param {*} opt - selected option from the list
95
- * return Object/Array - the selected manipulated values from the list
96
- */
97
- function optionSelectionHandler(e, opt) {
98
- if (type && type === 'select') {
99
- popoverRequestHandler(e, 'on-blur');
100
- return onChanged ? onChanged(e, opt.value) : false;
101
- }
102
- else if (type && type === 'multi-select') {
103
- var valueCopy_1 = value ? selectedOptions(__spreadArray([], value, true)) : [];
104
- if (opt === 'select-all') {
105
- var notSelectedOptions = [];
106
- if (optionsArray.constructor === Array) {
107
- notSelectedOptions = optionsArray.filter(function (item) {
108
- return valueCopy_1.indexOf(item) < 0;
109
- });
110
- if (notSelectedOptions.length > 0) {
111
- valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), notSelectedOptions, true);
112
- }
113
- else {
114
- valueCopy_1 = optionsArray.filter(function (item) {
115
- return valueCopy_1.indexOf(item) < -1;
116
- });
117
- }
118
- }
119
- else if (optionsArray.constructor === Object) {
120
- var mergeOptions_1 = [];
121
- Object.values(optionsArray).map(function (optval) {
122
- mergeOptions_1 = __spreadArray(__spreadArray([], mergeOptions_1, true), optval.options, true);
123
- return optval;
124
- });
125
- notSelectedOptions = mergeOptions_1.filter(function (item) {
126
- return valueCopy_1.indexOf(item) < 0;
127
- });
128
- if (notSelectedOptions.length > 0) {
129
- valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), notSelectedOptions, true);
130
- }
131
- else {
132
- valueCopy_1 = mergeOptions_1.filter(function (item) {
133
- return valueCopy_1.indexOf(item) < -1;
134
- });
135
- }
136
- }
137
- }
138
- else {
139
- var optIdx = valueCopy_1.indexOf(opt);
140
- if (optIdx >= 0) {
141
- valueCopy_1.splice(optIdx, 1);
142
- }
143
- else {
144
- valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), [opt], false);
145
- }
146
- }
147
- valueCopy_1 = valueCopy_1.map(function (item) {
148
- return item.value;
149
- });
150
- filterOptions(selectTemporaryValue, valueCopy_1);
151
- e.selected = valueCopy_1;
152
- return onChanged ? onChanged(e) : false;
153
- }
154
- }
155
- /**
156
- * inputChangedHandler
157
- * get the current value from the input text field
158
- * @param {*} e - event which will be used to get the changed value
159
- */
160
- function inputChangedHandler(e) {
161
- setKeyOption(null);
162
- setObjectKeyOption(null);
163
- setSelectTemporaryValue(e.target.value);
164
- filterOptions(e.target.value, value);
165
- }
166
- /**
167
- * getSelectInputValue
168
- * manipulate the selected multiple values into string
169
- * @param {*} val - multi-select selected value
170
- * return String - the converted string from multi-select array values
171
- */
172
- function getSelectInputValue(val) {
173
- if (type === 'multi-select' && val.constructor === Array) {
174
- var selectedLabels = selectedOptions(val);
175
- if (val.length < 6) {
176
- selectedLabels = selectedLabels.map(function (item) {
177
- return item.label;
178
- });
179
- }
180
- else {
181
- selectedLabels = [val.length + (isEmployeeSelection ? ' employees' : ' Selected Item(s)')];
182
- }
183
- return selectedLabels.join(', ');
184
- }
185
- else if (type === 'select' && (val.constructor === String || val.constructor === Number)) {
186
- var optArray = selectedOptions(val);
187
- return optArray.length > 0 ? optArray[0].label : val.toString();
188
- }
189
- else {
190
- return '';
191
- }
192
- }
193
- /**
194
- * selectedOptions
195
- * get the selected options from the values given
196
- * @param {*} val - values selected
197
- * return String - converted values into string
198
- */
199
- function selectedOptions(val) {
200
- var selectedOptionValue = [];
201
- if (options && options.constructor === Array) {
202
- selectedOptionValue = options.filter(function (item) {
203
- return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
204
- });
205
- }
206
- else if (options && options.constructor === Object) {
207
- var mergeOptions_2 = [];
208
- Object.values(options).map(function (optval) {
209
- mergeOptions_2 = __spreadArray(__spreadArray([], mergeOptions_2, true), optval.options, true);
210
- return optval;
211
- });
212
- selectedOptionValue = mergeOptions_2.filter(function (item) {
213
- return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
214
- });
215
- }
216
- return selectedOptionValue;
217
- }
218
- /**
219
- * filterOptions (for multi-select only)
220
- * filter the options to search specific values
221
- * @param {*} search - type value from the input text field
222
- * @param {*} values - selected values of multi-select
223
- */
224
- function filterOptions(search, values) {
225
- var selectedOptionsVariable = null;
226
- if (type === 'multi-select') {
227
- if (optionsArray && optionsArray.constructor === Array) {
228
- selectedOptionsVariable = selectedOptions(values);
229
- if (options && options.constructor === Array && options.length > 0) {
230
- optionsArray = options.filter(function (item) {
231
- return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
232
- });
233
- }
234
- values = selectedOptionsVariable.filter(function (item) {
235
- return item.label.toLowerCase().search(search.toLowerCase()) > -1;
236
- });
237
- setOptionsArray(__spreadArray(__spreadArray([], values, true), optionsArray, true));
238
- }
239
- else if (optionsArray && optionsArray.constructor === Object) {
240
- var optionsArrayCopy_1 = {};
241
- selectedOptionsVariable = selectedOptions(values);
242
- if (selectedOptionsVariable.length > 0) {
243
- selectedOptionsVariable = selectedOptionsVariable.filter(function (item) {
244
- return item.label.toLowerCase().search(search.toLowerCase()) > -1;
245
- });
246
- if (selectedOptionsVariable.length > 0) {
247
- optionsArrayCopy_1['selected-values'] = { label: 'Selected', options: selectedOptionsVariable };
248
- }
249
- }
250
- if (options && options.constructor === Object && Object.keys(options).length > 0) {
251
- Object.keys(options).map(function (optgroup) {
252
- var filterOptionsArray = [];
253
- if (options[optgroup].label.toLowerCase().search(search.toLowerCase()) > -1) {
254
- filterOptionsArray = options[optgroup].options.filter(function (item) {
255
- return values.indexOf(item.value) < 0;
256
- });
257
- }
258
- else {
259
- filterOptionsArray = options[optgroup].options.filter(function (item) {
260
- return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
261
- });
262
- }
263
- if (filterOptionsArray.length > 0) {
264
- optionsArrayCopy_1[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
265
- }
266
- return optgroup;
267
- });
268
- }
269
- setOptionsArray(optionsArrayCopy_1);
270
- }
271
- }
272
- else {
273
- if (optionsArray && optionsArray.constructor === Array) {
274
- optionsArray = options.filter(function (item) {
275
- return item.label.toLowerCase().search(search.toLowerCase()) > -1;
276
- });
277
- setOptionsArray(__spreadArray([], optionsArray, true));
278
- }
279
- else if (optionsArray && optionsArray.constructor === Object) {
280
- var optionsArrayCopy_2 = {};
281
- Object.keys(options).map(function (optgroup) {
282
- var _a;
283
- if (((_a = options[optgroup]) === null || _a === void 0 ? void 0 : _a.label.toLowerCase().search(search.toLowerCase())) > -1) {
284
- optionsArrayCopy_2[optgroup] = __assign({}, options[optgroup]);
285
- }
286
- else {
287
- var filterOptionsArray = options[optgroup].options.filter(function (item) {
288
- return item.label.toLowerCase().search(search.toLowerCase()) > -1;
289
- });
290
- if (filterOptionsArray.length > 0) {
291
- optionsArrayCopy_2[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
292
- }
293
- }
294
- return optgroup;
295
- });
296
- setOptionsArray(optionsArrayCopy_2);
297
- }
298
- }
299
- }
300
- /**
301
- * handleCheckedOptions
302
- * determine if the item from the options were selected
303
- * @param {*} opt - item from the options
304
- * return Boolean - selected/not
305
- */
306
- function handleCheckedOptions(opt) {
307
- if (opt === 'select-all') {
308
- var notSelectedOptions = null;
309
- if (value && value.constructor === Array) {
310
- if (optionsArray.constructor === Array) {
311
- notSelectedOptions = optionsArray.filter(function (item) {
312
- return value.indexOf(item.value) < 0;
313
- });
314
- }
315
- else if (optionsArray.constructor === Object) {
316
- var mergeOptions_3 = [];
317
- Object.values(optionsArray).map(function (optval) {
318
- mergeOptions_3 = __spreadArray(__spreadArray([], mergeOptions_3, true), optval.options, true);
319
- return optval;
320
- });
321
- notSelectedOptions = mergeOptions_3.filter(function (item) {
322
- return value.indexOf(item.value) < 0;
323
- });
324
- }
325
- }
326
- return notSelectedOptions && notSelectedOptions.length === 0 ? true : false;
327
- }
328
- else {
329
- return value && value.constructor === Array && value.filter(function (val) { return (opt.value === val); }).length > 0 ? true : false;
330
- }
331
- }
332
- function handleKeyPress(event) {
333
- var updatedKey;
334
- if (Boolean(dropdownPopover)) {
335
- if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
336
- if (event.key === 'ArrowDown') {
337
- if (keyOption === null) {
338
- setKeyOption(0);
339
- }
340
- else {
341
- updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
342
- setKeyOption(updatedKey);
343
- }
344
- }
345
- else if (event.key === 'ArrowUp') {
346
- if (keyOption === null) {
347
- setKeyOption(0);
348
- }
349
- else {
350
- updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
351
- setKeyOption(updatedKey);
352
- }
353
- }
354
- else if (event.key === 'Enter') {
355
- if (keyOption !== null && optionsArray[keyOption]) {
356
- optionSelectionHandler(event, optionsArray[keyOption]);
357
- }
358
- }
359
- }
360
- else if (optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0) {
361
- var optionsKeyArray = Object.keys(optionsArray);
362
- if (event.key === 'ArrowDown') {
363
- if (keyOption === null || objectKeyOption === null) {
364
- setKeyOption(0);
365
- setObjectKeyOption(0);
366
- }
367
- else {
368
- if (optionsArray[optionsKeyArray[objectKeyOption]].options.length <= keyOption + 1) {
369
- if (objectKeyOption + 1 < optionsKeyArray.length) {
370
- setKeyOption(0);
371
- setObjectKeyOption(objectKeyOption + 1);
372
- }
373
- }
374
- else {
375
- setKeyOption(keyOption + 1);
376
- }
377
- }
378
- }
379
- else if (event.key === 'ArrowUp') {
380
- if (keyOption === null || objectKeyOption === null) {
381
- setKeyOption(0);
382
- setObjectKeyOption(0);
383
- }
384
- else {
385
- if (keyOption > 0) {
386
- setKeyOption(keyOption - 1);
387
- }
388
- else {
389
- if (objectKeyOption > 0) {
390
- var updatedKey_1 = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
391
- setKeyOption(updatedKey_1);
392
- setObjectKeyOption(objectKeyOption - 1);
393
- }
394
- }
395
- }
396
- }
397
- else if (event.key === 'Enter') {
398
- if (keyOption !== null && objectKeyOption !== null && optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]) {
399
- optionSelectionHandler(event, optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]);
400
- }
401
- }
402
- }
403
- }
404
- else {
405
- if (event.key === 'Enter' || event.key === 'ArrowDown') {
406
- popoverRequestHandler(event, 'on-focus');
407
- }
408
- }
409
- }
410
- /**
411
- * clearValuesHandler
412
- * reset value into null and return it to parent
413
- * @param {*} event - event
414
- */
415
- var clearValuesHandler = function (event) {
416
- event && event.preventDefault();
417
- return onChanged && onChanged(event);
418
- };
419
- return (react_1.default.createElement("div", { className: 'em-select ' + customClass },
420
- react_1.default.createElement("div", { className: dropdownClass, id: id && id.constructor === String ? id : 'select-default-id', "data-testid": id && id.constructor === String ? id : 'select-default-id' },
421
- type === 'select' ? (react_1.default.createElement("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "select-input-".concat(id) : 'select-input-default-id', id: id && id.constructor === String ? "".concat(id, "-select-input-default-id") : "select-input-default-id", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, value: value ? selectedValue : selectTemporaryValue, placeholder: selectedValue, autoComplete: 'off', disabled: disabled ? disabled : false, onKeyDown: function (event) { return handleKeyPress(event); } })) : (react_1.default.createElement("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "".concat(id, "-multi-select-input") : "multi-select-input-default-id", id: id && id.constructor === String ? "".concat(id, "-multi-select-input-default-id") : "multi-select-input-default-id", type: "text", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, placeholder: selectedValue, autoComplete: 'off', value: value && value.length > 0 ? multiSelectValue : "", disabled: disabled ? disabled : false, readOnly: true })),
422
- type === 'select' ? (disabled ? (react_1.default.createElement("div", { "data-testid": 'dropdown-icon', className: "em-field-icon" }, Asset_1.SVG_ARROWDOWN)) : (value && value !== "" && !hideClearIcon ? (react_1.default.createElement("div", { "data-testid": 'clear-icon', onClick: function (event) { return clearValuesHandler(event); }, className: 'em-field-icon' }, Asset_1.SVG_CLOSE_GRAY)) : (react_1.default.createElement("div", { "data-testid": 'dropdown-icon', className: "em-field-icon", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); } }, Asset_1.SVG_ARROWDOWN)))) : null),
423
- react_1.default.createElement(exports.Popover, { id: "select-popover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(dropdownPopover), onClick: function (event) { return popoverRequestHandler(event, 'on-blur'); } },
424
- react_1.default.createElement("div", { className: "em-select-popover" },
425
- type === 'multi-select' ? (react_1.default.createElement("div", { className: "em-select-search e-input" },
426
- react_1.default.createElement("input", { id: "multi-select-input-search", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, placeholder: "Search", value: selectTemporaryValue, disabled: disabled ? disabled : false, autoComplete: "off" }))) : null,
427
- optionsArray && optionsArray.constructor === Array && optionsArray.length > 0 ? (
428
- // Default array display of options
429
- react_1.default.createElement(react_1.Fragment, null, type === 'select' ? (optionsArray.map(function (opt, idx) { return (react_1.default.createElement("option", { className: keyOption === idx ? 'is-highlighted' : '', key: idx, onClick: function (event) { return optionSelectionHandler(event, opt); } }, opt.label)); })) : type === 'multi-select' ? (react_1.default.createElement(react_1.Fragment, null,
430
- react_1.default.createElement("div", { className: "em-select-multiple" },
431
- react_1.default.createElement("div", { className: "em-select-all" }, optionsArray.length > 1 ? (react_1.default.createElement("div", { className: "em-select-check", key: 'select-all', onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } },
432
- react_1.default.createElement("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }),
433
- react_1.default.createElement("label", { htmlFor: "" }),
434
- react_1.default.createElement("span", null, "Select All"))) : null),
435
- react_1.default.createElement("div", { className: "em-select-checklist" }, optionsArray.map(function (opt, idx) { return (react_1.default.createElement("div", { id: 'option-div', className: "em-select-check", key: idx, onClick: function (event) { return optionSelectionHandler(event, opt); } },
436
- react_1.default.createElement("input", { type: "checkbox", checked: handleCheckedOptions(opt), id: opt.value, readOnly: true, autoComplete: "off" }),
437
- react_1.default.createElement("label", { htmlFor: "" }),
438
- react_1.default.createElement("span", null, opt.label))); }))))) : react_1.default.createElement(react_1.Fragment, null, "No options"))) : optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0 ? (
439
- // Display of options when grouped (*its only applicable on select type)
440
- react_1.default.createElement(react_1.Fragment, null, type === 'select' ? (Object.keys(optionsArray).map(function (id, grpIdx) { return (react_1.default.createElement("optgroup", { key: id, label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' }, optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return (react_1.default.createElement("option", { key: idx, className: (grpIdx === objectKeyOption && keyOption === idx) ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, opt.label)); })) : null)); })) : type === 'multi-select' ? (react_1.default.createElement(react_1.Fragment, null,
441
- react_1.default.createElement("div", { className: "em-select-multiple" },
442
- react_1.default.createElement("div", { className: "em-select-all" }, Object.keys(optionsArray).length > 1 || (Object.keys(optionsArray).length === 1 && optionsArray[Object.keys(optionsArray)[0]].options && optionsArray[Object.keys(optionsArray)[0]].options.constructor === Array && optionsArray[Object.keys(optionsArray)[0]].options.length > 1) ? (react_1.default.createElement("div", { className: "em-select-check", key: 'select-all', onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } },
443
- react_1.default.createElement("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }),
444
- react_1.default.createElement("label", { htmlFor: "" }),
445
- react_1.default.createElement("span", null, "Select All"))) : null),
446
- Object.keys(optionsArray).map(function (id) { return (react_1.default.createElement(react_1.Fragment, { key: id },
447
- react_1.default.createElement("div", { className: "em-select-checklist" },
448
- id !== 'selected-values' ? (react_1.default.createElement("optgroup", { label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' })) : null,
449
- optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return (react_1.default.createElement("div", { id: 'option-div', className: "em-select-check", key: idx, onClick: function (event) { return optionSelectionHandler(event, opt); } },
450
- react_1.default.createElement("input", { type: "checkbox",
451
- // checked={handleCheckedOptions(opt)}
452
- checked: value, id: opt.value, readOnly: true, autoComplete: "off" }),
453
- react_1.default.createElement("label", { htmlFor: "" }),
454
- react_1.default.createElement("span", null, opt.label))); })) : react_1.default.createElement(react_1.Fragment, null, "No options")))); })))) : react_1.default.createElement(react_1.Fragment, null, "No options"))) : react_1.default.createElement("div", { className: "em-noresult" }, "No options")))));
455
- };
456
- exports.default = Dropdown;