empower-container 0.1.13 → 0.1.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. package/{src/main → dist}/assets/Asset.d.ts +0 -0
  2. package/{src/main → dist}/assets/Asset.js +0 -0
  3. package/{src/main → dist}/assets/Asset.tsx +0 -0
  4. package/{src/main → dist}/assets/icons/icon-check-white-sm.svg +0 -0
  5. package/{src/main → dist}/assets/images/icon-arrowdown-graydark.svg +0 -0
  6. package/{src/main → dist}/assets/images/icon-arrowleft-graydark.svg +0 -0
  7. package/{src/main → dist}/assets/images/icon-arrowright-graydark.svg +0 -0
  8. package/{src/main → dist}/assets/images/icon-arrowup-graydark.svg +0 -0
  9. package/{src/main → dist}/assets/images/icon-check-graydark.svg +0 -0
  10. package/{src/main → dist/cjs}/DatetimeFormatter.d.ts +0 -0
  11. package/{src/main → dist/cjs}/DatetimeFormatter.js +0 -0
  12. package/{src/main → dist/cjs}/Information.d.ts +0 -0
  13. package/dist/cjs/Information.js +63 -0
  14. package/{src/main → dist/cjs}/MenuBar.d.ts +0 -0
  15. package/dist/cjs/MenuBar.js +537 -0
  16. package/{src/main → dist/cjs}/Modal.d.ts +0 -0
  17. package/dist/cjs/Modal.js +32 -0
  18. package/dist/cjs/assets/Asset.d.ts +16 -0
  19. package/dist/cjs/assets/Asset.js +30 -0
  20. package/{src/main → dist/cjs}/constants/Constant.d.ts +0 -0
  21. package/dist/cjs/constants/Constant.js +35 -0
  22. package/{src/main → dist/cjs}/index.d.ts +0 -0
  23. package/{src/main → dist/cjs}/index.js +0 -0
  24. package/{src/main → dist/cjs}/inputs/Input.d.ts +0 -0
  25. package/{src/main → dist/cjs}/inputs/Input.js +7 -36
  26. package/{src/main → dist/cjs}/inputs/InputSelectionHandler.d.ts +0 -0
  27. package/{src/main → dist/cjs}/inputs/InputSelectionHandler.js +3 -3
  28. package/{src/main → dist/cjs}/inputs/Select.d.ts +0 -0
  29. package/{src/main → dist/cjs}/inputs/Select.js +11 -64
  30. package/dist/esm/DatetimeFormatter.d.ts +3 -0
  31. package/{src/main/DatetimeFormatter.tsx → dist/esm/DatetimeFormatter.js} +132 -139
  32. package/dist/esm/Information.d.ts +10 -0
  33. package/dist/esm/Information.js +38 -0
  34. package/dist/esm/MenuBar.d.ts +24 -0
  35. package/dist/esm/MenuBar.js +532 -0
  36. package/dist/esm/Modal.d.ts +33 -0
  37. package/dist/esm/Modal.js +27 -0
  38. package/dist/esm/assets/Asset.d.ts +16 -0
  39. package/dist/esm/assets/Asset.js +27 -0
  40. package/dist/esm/constants/Constant.d.ts +15 -0
  41. package/{src/main → dist/esm}/constants/Constant.js +9 -21
  42. package/{src/main/index.tsx → dist/esm/index.d.ts} +1 -3
  43. package/dist/esm/index.js +3 -0
  44. package/dist/esm/inputs/Input.d.ts +25 -0
  45. package/dist/esm/inputs/Input.js +104 -0
  46. package/dist/esm/inputs/InputSelectionHandler.d.ts +3 -0
  47. package/dist/esm/inputs/InputSelectionHandler.js +31 -0
  48. package/dist/esm/inputs/Select.d.ts +28 -0
  49. package/dist/esm/inputs/Select.js +399 -0
  50. package/{src → dist}/scss/components/_modal.scss +0 -0
  51. package/{src → dist}/scss/elements/_button.scss +0 -0
  52. package/{src → dist}/scss/elements/_index.scss +0 -0
  53. package/{src → dist}/scss/elements/_popover.scss +0 -0
  54. package/{src → dist}/scss/foundation/_colors.scss +0 -0
  55. package/{src → dist}/scss/foundation/_mixins.scss +0 -0
  56. package/{src → dist}/scss/foundation/_normalize.scss +0 -0
  57. package/{src → dist}/scss/foundation/_settings.scss +0 -0
  58. package/{src → dist}/scss/foundation/_typography.scss +0 -0
  59. package/{src → dist}/scss/library/_information.scss +0 -0
  60. package/{src → dist}/scss/library/_input.scss +0 -0
  61. package/{src → dist}/scss/library/_menubar.scss +0 -0
  62. package/{src → dist}/scss/library/_select.scss +0 -0
  63. package/{src → dist}/scss/style.scss +0 -0
  64. package/package.json +1 -1
  65. package/public/favicon.ico +0 -0
  66. package/public/index.html +0 -43
  67. package/public/logo192.png +0 -0
  68. package/public/logo512.png +0 -0
  69. package/public/manifest.json +0 -25
  70. package/public/robots.txt +0 -3
  71. package/src/index.tsx +0 -15
  72. package/src/main/Information.js +0 -65
  73. package/src/main/Information.tsx +0 -112
  74. package/src/main/MenuBar.js +0 -651
  75. package/src/main/MenuBar.tsx +0 -1074
  76. package/src/main/Modal.js +0 -24
  77. package/src/main/Modal.tsx +0 -83
  78. package/src/main/inputs/Input.tsx +0 -193
  79. package/src/main/inputs/InputSelectionHandler.tsx +0 -21
  80. package/src/main/inputs/Select.tsx +0 -654
  81. package/src/main/tsconfig.common.json +0 -34
  82. package/src/main/tsconfig.json +0 -35
  83. package/src/sample/App.css +0 -38
  84. package/src/sample/App.d.ts +0 -3
  85. package/src/sample/App.js +0 -13
  86. package/src/sample/App.test.d.ts +0 -1
  87. package/src/sample/App.test.js +0 -13
  88. package/src/sample/App.test.tsx +0 -9
  89. package/src/sample/App.tsx +0 -15
  90. package/src/sample/TestMenuBar.d.ts +0 -3
  91. package/src/sample/TestMenuBar.js +0 -529
  92. package/src/sample/TestMenuBar.tsx +0 -380
  93. package/src/sample/react-app-env.d.ts +0 -1
  94. package/src/sample/reportWebVitals.d.ts +0 -3
  95. package/src/sample/reportWebVitals.js +0 -38
  96. package/src/sample/reportWebVitals.ts +0 -15
  97. package/src/sample/setupTests.d.ts +0 -1
  98. package/src/sample/setupTests.js +0 -7
  99. package/src/sample/setupTests.ts +0 -5
  100. package/src/sample/tsconfig.json +0 -36
@@ -0,0 +1,399 @@
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
13
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
14
+ if (ar || !(i in from)) {
15
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
16
+ ar[i] = from[i];
17
+ }
18
+ }
19
+ return to.concat(ar || Array.prototype.slice.call(from));
20
+ };
21
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
22
+ import { useState, Fragment } from "react";
23
+ import '../../scss/style.scss';
24
+ // Imports
25
+ import { SVG_CLOSE_GRAY, SVG_ARROWDOWN } from '../assets/Asset';
26
+ export var Popover = function (_a) {
27
+ var open = _a.open, origin = _a.origin, children = _a.children, onClick = _a.onClick;
28
+ return (_jsx(Fragment, { children: open &&
29
+ _jsxs(Fragment, { children: [_jsx("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }), _jsx("div", __assign({ className: "em-popover", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, { children: children }))] }) }));
30
+ };
31
+ var Dropdown = function (_a) {
32
+ var config = _a.config, customClass = _a.customClass, onChanged = _a.onChanged, isEmployeeSelection = _a.isEmployeeSelection, hideClearIcon = _a.hideClearIcon;
33
+ var _b = __assign({}, config), disabled = _b.disabled, options = _b.options, type = _b.type, value = _b.value, placeholder = _b.placeholder, id = _b.id;
34
+ // React Hook
35
+ var _c = useState(false), dropdownPopover = _c[0], setDropdownPopover = _c[1];
36
+ var _d = useState(options ? options : []), optionsArray = _d[0], setOptionsArray = _d[1];
37
+ var _e = useState(""), selectTemporaryValue = _e[0], setSelectTemporaryValue = _e[1];
38
+ var _f = useState(null), keyOption = _f[0], setKeyOption = _f[1];
39
+ var _g = useState(null), objectKeyOption = _g[0], setObjectKeyOption = _g[1];
40
+ // Dropdown Config Variable
41
+ var dropdownClass = disabled && disabled.constructor === Boolean ? 'em-input-field input-disabled' : 'em-input-field';
42
+ var multiSelectValue = type === 'multi-select' ? (value && value.constructor === Array && value.length > 0 ? (getSelectInputValue(value)) : '') : '';
43
+ 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 : '-';
44
+ /**
45
+ * popoverRequestHandler
46
+ * hide and show the options popover
47
+ * @param {*} e - event
48
+ * @param {*} action - it can be either on-focus or on-blur
49
+ */
50
+ function popoverRequestHandler(e, action) {
51
+ if (action === 'on-focus') {
52
+ type === 'select' ? setOptionsArray(options) : filterOptions(selectTemporaryValue, value);
53
+ setDropdownPopover(e.currentTarget);
54
+ setKeyOption(null);
55
+ setObjectKeyOption(null);
56
+ }
57
+ else {
58
+ setDropdownPopover(false);
59
+ setSelectTemporaryValue("");
60
+ }
61
+ }
62
+ /**
63
+ * optionSelectionHandler
64
+ * manipulate the selected options
65
+ * @param {*} e - event
66
+ * @param {*} opt - selected option from the list
67
+ * return Object/Array - the selected manipulated values from the list
68
+ */
69
+ function optionSelectionHandler(e, opt) {
70
+ if (type && type === 'select') {
71
+ popoverRequestHandler(e, 'on-blur');
72
+ return onChanged ? onChanged(e, opt.value) : false;
73
+ }
74
+ else if (type && type === 'multi-select') {
75
+ var valueCopy_1 = value ? selectedOptions(__spreadArray([], value, true)) : [];
76
+ if (opt === 'select-all') {
77
+ var notSelectedOptions = [];
78
+ if (optionsArray.constructor === Array) {
79
+ notSelectedOptions = optionsArray.filter(function (item) {
80
+ return valueCopy_1.indexOf(item) < 0;
81
+ });
82
+ if (notSelectedOptions.length > 0) {
83
+ valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), notSelectedOptions, true);
84
+ }
85
+ else {
86
+ valueCopy_1 = optionsArray.filter(function (item) {
87
+ return valueCopy_1.indexOf(item) < -1;
88
+ });
89
+ }
90
+ }
91
+ else if (optionsArray.constructor === Object) {
92
+ var mergeOptions_1 = [];
93
+ Object.values(optionsArray).map(function (optval) {
94
+ mergeOptions_1 = __spreadArray(__spreadArray([], mergeOptions_1, true), optval.options, true);
95
+ return optval;
96
+ });
97
+ notSelectedOptions = mergeOptions_1.filter(function (item) {
98
+ return valueCopy_1.indexOf(item) < 0;
99
+ });
100
+ if (notSelectedOptions.length > 0) {
101
+ valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), notSelectedOptions, true);
102
+ }
103
+ else {
104
+ valueCopy_1 = mergeOptions_1.filter(function (item) {
105
+ return valueCopy_1.indexOf(item) < -1;
106
+ });
107
+ }
108
+ }
109
+ }
110
+ else {
111
+ var optIdx = valueCopy_1.indexOf(opt);
112
+ if (optIdx >= 0) {
113
+ valueCopy_1.splice(optIdx, 1);
114
+ }
115
+ else {
116
+ valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), [opt], false);
117
+ }
118
+ }
119
+ valueCopy_1 = valueCopy_1.map(function (item) {
120
+ return item.value;
121
+ });
122
+ filterOptions(selectTemporaryValue, valueCopy_1);
123
+ e.selected = valueCopy_1;
124
+ return onChanged ? onChanged(e) : false;
125
+ }
126
+ }
127
+ /**
128
+ * inputChangedHandler
129
+ * get the current value from the input text field
130
+ * @param {*} e - event which will be used to get the changed value
131
+ */
132
+ function inputChangedHandler(e) {
133
+ setKeyOption(null);
134
+ setObjectKeyOption(null);
135
+ setSelectTemporaryValue(e.target.value);
136
+ filterOptions(e.target.value, value);
137
+ }
138
+ /**
139
+ * getSelectInputValue
140
+ * manipulate the selected multiple values into string
141
+ * @param {*} val - multi-select selected value
142
+ * return String - the converted string from multi-select array values
143
+ */
144
+ function getSelectInputValue(val) {
145
+ if (type === 'multi-select' && val.constructor === Array) {
146
+ var selectedLabels = selectedOptions(val);
147
+ if (val.length < 6) {
148
+ selectedLabels = selectedLabels.map(function (item) {
149
+ return item.label;
150
+ });
151
+ }
152
+ else {
153
+ selectedLabels = [val.length + (isEmployeeSelection ? ' employees' : ' Selected Item(s)')];
154
+ }
155
+ return selectedLabels.join(', ');
156
+ }
157
+ else if (type === 'select' && (val.constructor === String || val.constructor === Number)) {
158
+ var optArray = selectedOptions(val);
159
+ return optArray.length > 0 ? optArray[0].label : val.toString();
160
+ }
161
+ else {
162
+ return '';
163
+ }
164
+ }
165
+ /**
166
+ * selectedOptions
167
+ * get the selected options from the values given
168
+ * @param {*} val - values selected
169
+ * return String - converted values into string
170
+ */
171
+ function selectedOptions(val) {
172
+ var selectedOptionValue = [];
173
+ if (options && options.constructor === Array) {
174
+ selectedOptionValue = options.filter(function (item) {
175
+ return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
176
+ });
177
+ }
178
+ else if (options && options.constructor === Object) {
179
+ var mergeOptions_2 = [];
180
+ Object.values(options).map(function (optval) {
181
+ mergeOptions_2 = __spreadArray(__spreadArray([], mergeOptions_2, true), optval.options, true);
182
+ return optval;
183
+ });
184
+ selectedOptionValue = mergeOptions_2.filter(function (item) {
185
+ return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
186
+ });
187
+ }
188
+ return selectedOptionValue;
189
+ }
190
+ /**
191
+ * filterOptions (for multi-select only)
192
+ * filter the options to search specific values
193
+ * @param {*} search - type value from the input text field
194
+ * @param {*} values - selected values of multi-select
195
+ */
196
+ function filterOptions(search, values) {
197
+ var selectedOptionsVariable = null;
198
+ if (type === 'multi-select') {
199
+ if (optionsArray && optionsArray.constructor === Array) {
200
+ selectedOptionsVariable = selectedOptions(values);
201
+ if (options && options.constructor === Array && options.length > 0) {
202
+ optionsArray = options.filter(function (item) {
203
+ return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
204
+ });
205
+ }
206
+ values = selectedOptionsVariable.filter(function (item) {
207
+ return item.label.toLowerCase().search(search.toLowerCase()) > -1;
208
+ });
209
+ setOptionsArray(__spreadArray(__spreadArray([], values, true), optionsArray, true));
210
+ }
211
+ else if (optionsArray && optionsArray.constructor === Object) {
212
+ var optionsArrayCopy_1 = {};
213
+ selectedOptionsVariable = selectedOptions(values);
214
+ if (selectedOptionsVariable.length > 0) {
215
+ selectedOptionsVariable = selectedOptionsVariable.filter(function (item) {
216
+ return item.label.toLowerCase().search(search.toLowerCase()) > -1;
217
+ });
218
+ if (selectedOptionsVariable.length > 0) {
219
+ optionsArrayCopy_1['selected-values'] = { label: 'Selected', options: selectedOptionsVariable };
220
+ }
221
+ }
222
+ if (options && options.constructor === Object && Object.keys(options).length > 0) {
223
+ Object.keys(options).map(function (optgroup) {
224
+ var filterOptionsArray = [];
225
+ if (options[optgroup].label.toLowerCase().search(search.toLowerCase()) > -1) {
226
+ filterOptionsArray = options[optgroup].options.filter(function (item) {
227
+ return values.indexOf(item.value) < 0;
228
+ });
229
+ }
230
+ else {
231
+ filterOptionsArray = options[optgroup].options.filter(function (item) {
232
+ return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
233
+ });
234
+ }
235
+ if (filterOptionsArray.length > 0) {
236
+ optionsArrayCopy_1[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
237
+ }
238
+ return optgroup;
239
+ });
240
+ }
241
+ setOptionsArray(optionsArrayCopy_1);
242
+ }
243
+ }
244
+ else {
245
+ if (optionsArray && optionsArray.constructor === Array) {
246
+ optionsArray = options.filter(function (item) {
247
+ return item.label.toLowerCase().search(search.toLowerCase()) > -1;
248
+ });
249
+ setOptionsArray(__spreadArray([], optionsArray, true));
250
+ }
251
+ else if (optionsArray && optionsArray.constructor === Object) {
252
+ var optionsArrayCopy_2 = {};
253
+ Object.keys(options).map(function (optgroup) {
254
+ var _a;
255
+ if (((_a = options[optgroup]) === null || _a === void 0 ? void 0 : _a.label.toLowerCase().search(search.toLowerCase())) > -1) {
256
+ optionsArrayCopy_2[optgroup] = __assign({}, options[optgroup]);
257
+ }
258
+ else {
259
+ var filterOptionsArray = options[optgroup].options.filter(function (item) {
260
+ return item.label.toLowerCase().search(search.toLowerCase()) > -1;
261
+ });
262
+ if (filterOptionsArray.length > 0) {
263
+ optionsArrayCopy_2[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
264
+ }
265
+ }
266
+ return optgroup;
267
+ });
268
+ setOptionsArray(optionsArrayCopy_2);
269
+ }
270
+ }
271
+ }
272
+ /**
273
+ * handleCheckedOptions
274
+ * determine if the item from the options were selected
275
+ * @param {*} opt - item from the options
276
+ * return Boolean - selected/not
277
+ */
278
+ function handleCheckedOptions(opt) {
279
+ if (opt === 'select-all') {
280
+ var notSelectedOptions = null;
281
+ if (value && value.constructor === Array) {
282
+ if (optionsArray.constructor === Array) {
283
+ notSelectedOptions = optionsArray.filter(function (item) {
284
+ return value.indexOf(item.value) < 0;
285
+ });
286
+ }
287
+ else if (optionsArray.constructor === Object) {
288
+ var mergeOptions_3 = [];
289
+ Object.values(optionsArray).map(function (optval) {
290
+ mergeOptions_3 = __spreadArray(__spreadArray([], mergeOptions_3, true), optval.options, true);
291
+ return optval;
292
+ });
293
+ notSelectedOptions = mergeOptions_3.filter(function (item) {
294
+ return value.indexOf(item.value) < 0;
295
+ });
296
+ }
297
+ }
298
+ return notSelectedOptions && notSelectedOptions.length === 0 ? true : false;
299
+ }
300
+ else {
301
+ return value && value.constructor === Array && value.filter(function (val) { return (opt.value === val); }).length > 0 ? true : false;
302
+ }
303
+ }
304
+ function handleKeyPress(event) {
305
+ var updatedKey;
306
+ if (Boolean(dropdownPopover)) {
307
+ if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
308
+ if (event.key === 'ArrowDown') {
309
+ if (keyOption === null) {
310
+ setKeyOption(0);
311
+ }
312
+ else {
313
+ updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
314
+ setKeyOption(updatedKey);
315
+ }
316
+ }
317
+ else if (event.key === 'ArrowUp') {
318
+ if (keyOption === null) {
319
+ setKeyOption(0);
320
+ }
321
+ else {
322
+ updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
323
+ setKeyOption(updatedKey);
324
+ }
325
+ }
326
+ else if (event.key === 'Enter') {
327
+ if (keyOption !== null && optionsArray[keyOption]) {
328
+ optionSelectionHandler(event, optionsArray[keyOption]);
329
+ }
330
+ }
331
+ }
332
+ else if (optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0) {
333
+ var optionsKeyArray = Object.keys(optionsArray);
334
+ if (event.key === 'ArrowDown') {
335
+ if (keyOption === null || objectKeyOption === null) {
336
+ setKeyOption(0);
337
+ setObjectKeyOption(0);
338
+ }
339
+ else {
340
+ if (optionsArray[optionsKeyArray[objectKeyOption]].options.length <= keyOption + 1) {
341
+ if (objectKeyOption + 1 < optionsKeyArray.length) {
342
+ setKeyOption(0);
343
+ setObjectKeyOption(objectKeyOption + 1);
344
+ }
345
+ }
346
+ else {
347
+ setKeyOption(keyOption + 1);
348
+ }
349
+ }
350
+ }
351
+ else if (event.key === 'ArrowUp') {
352
+ if (keyOption === null || objectKeyOption === null) {
353
+ setKeyOption(0);
354
+ setObjectKeyOption(0);
355
+ }
356
+ else {
357
+ if (keyOption > 0) {
358
+ setKeyOption(keyOption - 1);
359
+ }
360
+ else {
361
+ if (objectKeyOption > 0) {
362
+ var updatedKey_1 = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
363
+ setKeyOption(updatedKey_1);
364
+ setObjectKeyOption(objectKeyOption - 1);
365
+ }
366
+ }
367
+ }
368
+ }
369
+ else if (event.key === 'Enter') {
370
+ if (keyOption !== null && objectKeyOption !== null && optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]) {
371
+ optionSelectionHandler(event, optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]);
372
+ }
373
+ }
374
+ }
375
+ }
376
+ else {
377
+ if (event.key === 'Enter' || event.key === 'ArrowDown') {
378
+ popoverRequestHandler(event, 'on-focus');
379
+ }
380
+ }
381
+ }
382
+ /**
383
+ * clearValuesHandler
384
+ * reset value into null and return it to parent
385
+ * @param {*} event - event
386
+ */
387
+ var clearValuesHandler = function (event) {
388
+ event && event.preventDefault();
389
+ return onChanged && onChanged(event);
390
+ };
391
+ return (_jsxs("div", __assign({ className: 'em-select ' + customClass }, { children: [_jsxs("div", __assign({ className: dropdownClass, id: id && id.constructor === String ? id : 'select-default-id', "data-testid": id && id.constructor === String ? id : 'select-default-id' }, { children: [type === 'select' ? (_jsx("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); } })) : (_jsx("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 })), type === 'select' ? (disabled ? (_jsx("div", __assign({ "data-testid": 'dropdown-icon', className: "em-field-icon" }, { children: SVG_ARROWDOWN }))) : (value && value !== "" && !hideClearIcon ? (_jsx("div", __assign({ "data-testid": 'clear-icon', onClick: function (event) { return clearValuesHandler(event); }, className: 'em-field-icon' }, { children: SVG_CLOSE_GRAY }))) : (_jsx("div", __assign({ "data-testid": 'dropdown-icon', className: "em-field-icon", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); } }, { children: SVG_ARROWDOWN }))))) : null] })), _jsx(Popover, __assign({ id: "select-popover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(dropdownPopover), onClick: function (event) { return popoverRequestHandler(event, 'on-blur'); } }, { children: _jsxs("div", __assign({ className: "em-select-popover" }, { children: [type === 'multi-select' ? (_jsx("div", __assign({ className: "em-select-search e-input" }, { children: _jsx("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, optionsArray && optionsArray.constructor === Array && optionsArray.length > 0 ? (
392
+ // Default array display of options
393
+ _jsx(Fragment, { children: type === 'select' ? (optionsArray.map(function (opt, idx) { return (_jsx("option", __assign({ className: keyOption === idx ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: opt.label }), idx)); })) : type === 'multi-select' ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-select-multiple" }, { children: [_jsx("div", __assign({ className: "em-select-all" }, { children: optionsArray.length > 1 ? (_jsxs("div", __assign({ className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } }, { children: [_jsx("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }), _jsx("label", { htmlFor: "" }), _jsx("span", { children: "Select All" })] }), 'select-all')) : null })), _jsx("div", __assign({ className: "em-select-checklist" }, { children: optionsArray.map(function (opt, idx) { return (_jsxs("div", __assign({ id: 'option-div', className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: [_jsx("input", { type: "checkbox", checked: handleCheckedOptions(opt), id: opt.value, readOnly: true, autoComplete: "off" }), _jsx("label", { htmlFor: "" }), _jsx("span", { children: opt.label })] }), idx)); }) }))] })) })) : _jsx(Fragment, { children: "No options" }) })) : optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0 ? (
394
+ // Display of options when grouped (*its only applicable on select type)
395
+ _jsx(Fragment, { children: type === 'select' ? (Object.keys(optionsArray).map(function (id, grpIdx) { return (_jsx("optgroup", __assign({ label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' }, { children: optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return (_jsx("option", __assign({ className: (grpIdx === objectKeyOption && keyOption === idx) ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: opt.label }), idx)); })) : null }), id)); })) : type === 'multi-select' ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-select-multiple" }, { children: [_jsx("div", __assign({ className: "em-select-all" }, { children: 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) ? (_jsxs("div", __assign({ className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } }, { children: [_jsx("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }), _jsx("label", { htmlFor: "" }), _jsx("span", { children: "Select All" })] }), 'select-all')) : null })), Object.keys(optionsArray).map(function (id) { return (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-select-checklist" }, { children: [id !== 'selected-values' ? (_jsx("optgroup", { label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' })) : null, optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return (_jsxs("div", __assign({ id: 'option-div', className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: [_jsx("input", { type: "checkbox",
396
+ // checked={handleCheckedOptions(opt)}
397
+ checked: value, id: opt.value, readOnly: true, autoComplete: "off" }), _jsx("label", { htmlFor: "" }), _jsx("span", { children: opt.label })] }), idx)); })) : _jsx(Fragment, { children: "No options" })] })) }, id)); })] })) })) : _jsx(Fragment, { children: "No options" }) })) : _jsx("div", __assign({ className: "em-noresult" }, { children: "No options" }))] })) }))] })));
398
+ };
399
+ export default Dropdown;
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "empower-container",
3
- "version": "0.1.13",
3
+ "version": "0.1.14",
4
4
  "private": false,
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
Binary file
package/public/index.html DELETED
@@ -1,43 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="theme-color" content="#000000" />
8
- <meta
9
- name="description"
10
- content="Web site created using create-react-app"
11
- />
12
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13
- <!--
14
- manifest.json provides metadata used when your web app is installed on a
15
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16
- -->
17
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18
- <!--
19
- Notice the use of %PUBLIC_URL% in the tags above.
20
- It will be replaced with the URL of the `public` folder during the build.
21
- Only files inside the `public` folder can be referenced from the HTML.
22
-
23
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24
- work correctly both with client-side routing and a non-root public URL.
25
- Learn how to configure a non-root public URL by running `npm run build`.
26
- -->
27
- <title>React App</title>
28
- </head>
29
- <body>
30
- <noscript>You need to enable JavaScript to run this app.</noscript>
31
- <div id="root"></div>
32
- <!--
33
- This HTML file is a template.
34
- If you open it directly in the browser, you will see an empty page.
35
-
36
- You can add webfonts, meta tags, or analytics to this file.
37
- The build step will place the bundled scripts into the <body> tag.
38
-
39
- To begin the development, run `npm start` or `yarn start`.
40
- To create a production bundle, use `npm run build` or `yarn build`.
41
- -->
42
- </body>
43
- </html>
Binary file
Binary file
@@ -1,25 +0,0 @@
1
- {
2
- "short_name": "React App",
3
- "name": "Create React App Sample",
4
- "icons": [
5
- {
6
- "src": "favicon.ico",
7
- "sizes": "64x64 32x32 24x24 16x16",
8
- "type": "image/x-icon"
9
- },
10
- {
11
- "src": "logo192.png",
12
- "type": "image/png",
13
- "sizes": "192x192"
14
- },
15
- {
16
- "src": "logo512.png",
17
- "type": "image/png",
18
- "sizes": "512x512"
19
- }
20
- ],
21
- "start_url": ".",
22
- "display": "standalone",
23
- "theme_color": "#000000",
24
- "background_color": "#ffffff"
25
- }
package/public/robots.txt DELETED
@@ -1,3 +0,0 @@
1
- # https://www.robotstxt.org/robotstxt.html
2
- User-agent: *
3
- Disallow:
package/src/index.tsx DELETED
@@ -1,15 +0,0 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
-
4
- import App from './sample/App';
5
-
6
- ReactDOM.render(
7
- <React.StrictMode>
8
- <App />
9
- </React.StrictMode>,
10
- document.getElementById('root')
11
- );
12
-
13
- // If you want to start measuring performance in your app, pass a function
14
- // to log results (for example: reportWebVitals(console.log))
15
- // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
@@ -1,65 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- var react_1 = __importStar(require("react"));
27
- var Asset_1 = require("./assets/Asset");
28
- var Information = function (_a) {
29
- var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
30
- var _b = (0, react_1.useState)(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
31
- var renderHtml = function (html) {
32
- return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
33
- };
34
- var showRowDetails = function (e, idx) {
35
- e && e.preventDefault();
36
- if (rowAnchorEl === idx) {
37
- rowAnchorEl = null;
38
- }
39
- else {
40
- rowAnchorEl = idx;
41
- }
42
- setRowAnchorEl(rowAnchorEl);
43
- };
44
- var View = function () {
45
- return react_1.default.createElement(react_1.default.Fragment, null,
46
- react_1.default.createElement("div", { className: "em-popover-i" }, typeof desc != 'undefined' && desc ? (react_1.default.createElement("div", { className: "em-popover-i-content" },
47
- react_1.default.createElement("div", { className: "em-popover-i-title" },
48
- react_1.default.createElement("h6", null, title),
49
- react_1.default.createElement("div", { className: "em-popover-i-close", onClick: hide })),
50
- react_1.default.createElement("div", null, typeof items != 'undefined' && items ? renderHtml(items) : ''))) : (react_1.default.createElement("div", { className: "em-popover-i-content" },
51
- react_1.default.createElement("div", { className: "em-popover-i-title" },
52
- react_1.default.createElement("h6", null, title),
53
- react_1.default.createElement("div", { className: "em-popover-i-close", onClick: hide })),
54
- listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (react_1.default.createElement(react_1.default.Fragment, { key: key },
55
- react_1.default.createElement("div", { className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } },
56
- react_1.default.createElement("div", null,
57
- react_1.default.createElement("h6", null, item)),
58
- rowAnchorEl === key ? (Asset_1.SVG_ARROW_UP) : (Asset_1.SVG_ARROWDOWN)),
59
- rowAnchorEl === key ? (react_1.default.createElement("div", { className: "em-popover-i-details" }, item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
60
- (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
61
- (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')))) : null)); })) : null) : null))));
62
- };
63
- return View();
64
- };
65
- exports.default = Information;