empower-container 0.1.5 → 0.1.6

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 (55) hide show
  1. package/dist/cjs/DatetimeFormatter.d.ts +3 -0
  2. package/dist/cjs/DatetimeFormatter.js +389 -0
  3. package/dist/cjs/Information.d.ts +10 -0
  4. package/dist/cjs/Information.js +62 -0
  5. package/dist/cjs/MenuBar.d.ts +24 -0
  6. package/dist/cjs/MenuBar.js +537 -0
  7. package/dist/cjs/Modal.d.ts +33 -0
  8. package/dist/cjs/Modal.js +32 -0
  9. package/dist/cjs/assets/Asset.d.ts +15 -0
  10. package/dist/cjs/assets/Asset.js +29 -0
  11. package/dist/cjs/constants/Constant.d.ts +15 -0
  12. package/dist/cjs/constants/Constant.js +35 -0
  13. package/dist/cjs/index.d.ts +3 -0
  14. package/dist/cjs/index.js +10 -0
  15. package/dist/cjs/inputs/Input.d.ts +25 -0
  16. package/dist/cjs/inputs/Input.js +106 -0
  17. package/dist/cjs/inputs/InputSelectionHandler.d.ts +3 -0
  18. package/dist/cjs/inputs/InputSelectionHandler.js +36 -0
  19. package/dist/cjs/inputs/Select.d.ts +28 -0
  20. package/dist/cjs/inputs/Select.js +403 -0
  21. package/dist/esm/DatetimeFormatter.d.ts +3 -0
  22. package/dist/esm/DatetimeFormatter.js +385 -0
  23. package/dist/esm/Information.d.ts +10 -0
  24. package/dist/esm/Information.js +37 -0
  25. package/dist/esm/MenuBar.d.ts +24 -0
  26. package/dist/esm/MenuBar.js +532 -0
  27. package/dist/esm/Modal.d.ts +33 -0
  28. package/dist/esm/Modal.js +27 -0
  29. package/dist/esm/assets/Asset.d.ts +15 -0
  30. package/dist/esm/assets/Asset.js +26 -0
  31. package/dist/esm/constants/Constant.d.ts +15 -0
  32. package/dist/esm/constants/Constant.js +32 -0
  33. package/dist/esm/index.d.ts +3 -0
  34. package/dist/esm/index.js +3 -0
  35. package/dist/esm/inputs/Input.d.ts +25 -0
  36. package/dist/esm/inputs/Input.js +104 -0
  37. package/dist/esm/inputs/InputSelectionHandler.d.ts +3 -0
  38. package/dist/esm/inputs/InputSelectionHandler.js +31 -0
  39. package/dist/esm/inputs/Select.d.ts +28 -0
  40. package/dist/esm/inputs/Select.js +399 -0
  41. package/dist/scss/components/_modal.scss +66 -0
  42. package/dist/scss/elements/_button.scss +107 -0
  43. package/dist/scss/elements/_index.scss +2 -0
  44. package/dist/scss/elements/_popover.scss +8 -0
  45. package/dist/scss/foundation/_colors.scss +60 -0
  46. package/dist/scss/foundation/_mixins.scss +41 -0
  47. package/dist/scss/foundation/_normalize.scss +204 -0
  48. package/dist/scss/foundation/_settings.scss +36 -0
  49. package/dist/scss/foundation/_typography.scss +95 -0
  50. package/dist/scss/library/_information.scss +68 -0
  51. package/dist/scss/library/_input.scss +37 -0
  52. package/dist/scss/library/_menubar.scss +225 -0
  53. package/dist/scss/library/_select.scss +258 -0
  54. package/dist/scss/style.scss +24 -0
  55. package/package.json +2 -2
@@ -0,0 +1,537 @@
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
14
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
15
+ if (ar || !(i in from)) {
16
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
17
+ ar[i] = from[i];
18
+ }
19
+ }
20
+ return to.concat(ar || Array.prototype.slice.call(from));
21
+ };
22
+ var __importDefault = (this && this.__importDefault) || function (mod) {
23
+ return (mod && mod.__esModule) ? mod : { "default": mod };
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ var jsx_runtime_1 = require("react/jsx-runtime");
27
+ /* eslint-disable no-useless-concat */
28
+ /* eslint-disable jsx-a11y/anchor-is-valid */
29
+ var react_1 = require("react");
30
+ require("../scss/style.scss");
31
+ // Imports
32
+ var Asset_1 = require("./assets/Asset");
33
+ var Constant_1 = require("./constants/Constant");
34
+ var Information_1 = __importDefault(require("./Information"));
35
+ var InputSelectionHandler_1 = __importDefault(require("./inputs/InputSelectionHandler"));
36
+ var DatetimeFormatter_1 = __importDefault(require("./DatetimeFormatter"));
37
+ var Select_1 = require("./inputs/Select");
38
+ // Package
39
+ var react_date_range_1 = require("react-date-range");
40
+ var MenuBar = function (_a) {
41
+ var config = _a.config, info = _a.info, button = _a.button, getActions = _a.getActions, dropdown = _a.dropdown, search = _a.search, pagination = _a.pagination, pivot = _a.pivot, check = _a.check, toggle = _a.toggle, mainButton = _a.mainButton, buttonFooter = _a.buttonFooter, undoButton = _a.undoButton, customClass = _a.customClass, children = _a.children;
42
+ // React Hooks Popover
43
+ var _b = (0, react_1.useState)(null), infoPopover = _b[0], setInfoPopover = _b[1];
44
+ var _c = (0, react_1.useState)(null), mainButtonPopover = _c[0], setMainButtonPopover = _c[1];
45
+ var _d = (0, react_1.useState)(null), dropdownPopover = _d[0], setDropdownPopover = _d[1];
46
+ var _e = (0, react_1.useState)(null), paginationSummaryPopover = _e[0], setPaginationSummaryPopover = _e[1];
47
+ var _f = (0, react_1.useState)(null), pivotPopover = _f[0], setPivotPopover = _f[1];
48
+ var _g = (0, react_1.useState)(null), filterPopover = _g[0], setFilterPopover = _g[1];
49
+ var _h = (0, react_1.useState)(""), calendarYear = _h[0], setCalendarYear = _h[1];
50
+ var _j = (0, react_1.useState)(null), minMonthIdx = _j[0], setMinMonthIdx = _j[1];
51
+ var _k = (0, react_1.useState)(null), maxMonthIdx = _k[0], setMaxMonthIdx = _k[1];
52
+ // React Hooks Variables
53
+ var _l = (0, react_1.useState)(''), searchTemporaryValue = _l[0], setSearchTemporaryValue = _l[1];
54
+ var _m = (0, react_1.useState)(1), goToPage = _m[0], setGoToPage = _m[1];
55
+ var _o = (0, react_1.useState)(""), perPageTemporaryValue = _o[0], setPerPageTemporaryValue = _o[1];
56
+ var _p = (0, react_1.useState)([]), paginationSummaryFormError = _p[0], setPaginationSummaryFormError = _p[1];
57
+ var _q = (0, react_1.useState)(false), loaded = _q[0], setLoaded = _q[1];
58
+ var _r = (0, react_1.useState)(0), seconds = _r[0], setSeconds = _r[1];
59
+ var _s = (0, react_1.useState)(undoButton && undoButton.show ? true : false), undoShow = _s[0], setUndoShow = _s[1];
60
+ var _t = (0, react_1.useState)(false), doneTimer = _t[0], setDoneTimer = _t[1];
61
+ (0, react_1.useEffect)(function () {
62
+ var filteredMonthList = [];
63
+ if (dropdown && dropdown.minMonth) {
64
+ filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
65
+ if (filteredMonthList.length > 0) {
66
+ minMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
67
+ setMinMonthIdx(minMonthIdx);
68
+ }
69
+ }
70
+ if (dropdown && dropdown.maxMonth) {
71
+ filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
72
+ if (filteredMonthList.length > 0) {
73
+ maxMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
74
+ setMaxMonthIdx(maxMonthIdx);
75
+ }
76
+ }
77
+ if (search && search.value && loaded === false) {
78
+ setSearchTemporaryValue(search.value);
79
+ setLoaded(true);
80
+ }
81
+ if (undoButton && undoButton.show) {
82
+ var buttonWithTimer_1 = undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.filter(function (item) { return (item.hasOwnProperty('timer') && item.timer !== undefined && item.timer.constructor === Number); })) : [];
83
+ if (buttonWithTimer_1.length > 0) {
84
+ if (undoShow !== undoButton.show) {
85
+ if (buttonWithTimer_1[0] && buttonWithTimer_1[0].hasOwnProperty('timer')) {
86
+ buttonWithTimer_1[0].timer && setSeconds(buttonWithTimer_1[0].timer);
87
+ }
88
+ setDoneTimer(false);
89
+ setUndoShow(undoButton.show ? true : false);
90
+ }
91
+ var myInterval_1 = setInterval(function () {
92
+ if (seconds > 0) {
93
+ setSeconds(seconds - 1);
94
+ }
95
+ else {
96
+ if (!doneTimer) {
97
+ clearInterval(myInterval_1);
98
+ setDoneTimer(true);
99
+ returnValues('button', buttonWithTimer_1[0].action, null);
100
+ }
101
+ }
102
+ }, 1000);
103
+ return function () {
104
+ clearInterval(myInterval_1);
105
+ };
106
+ }
107
+ }
108
+ else {
109
+ setUndoShow(false);
110
+ }
111
+ });
112
+ // Belt Configuration Variables
113
+ info = info ? (info.constructor === Object && info.infoDetails ? (info) : info.constructor === String ? (info) : Constant_1.INFO_LOADER) : Constant_1.INFO_LOADER;
114
+ var dropdownTitle = dropdown && (dropdown.type === 'list' || dropdown.type === 'button') ? (dropdown.title ? dropdown.title : "") : dropdown && dropdown.type === 'date-picker-weekly' ? (dropdown.selection && dropdown.selection.startDate && dropdown.selection.endDate ? (dropdown.selection.startDate + ' to ' + dropdown.selection.endDate) : "") : dropdown && dropdown.type === 'date-picker-monthly' ? dropdown.selection.startDate : "";
115
+ /**
116
+ * popoverRequestHandler
117
+ * hide and show the popover of specific action
118
+ * @param {*} e - event of the click item
119
+ * @param {*} popover - popover type
120
+ */
121
+ var popoverRequestHandler = function (e, popover, hide) {
122
+ if (hide === void 0) { hide = false; }
123
+ switch (popover) {
124
+ case 'info':
125
+ var currentTarget_1 = e.currentTarget;
126
+ if (hide === false && info.constructor === String && info === Constant_1.INFO_LOADER) {
127
+ actionRequestHandler(e, 'icon', 'info');
128
+ setInfoPopover(e.currentTarget);
129
+ setTimeout(function () {
130
+ setInfoPopover(null);
131
+ setInfoPopover(currentTarget_1);
132
+ }, 2000);
133
+ }
134
+ else {
135
+ infoPopover ? setInfoPopover(null) : setInfoPopover(e.currentTarget);
136
+ }
137
+ break;
138
+ case 'dropdown':
139
+ if (dropdown.type === 'date-picker-monthly' && !dropdownPopover) {
140
+ dropdown.selection && dropdown.selection.startDate ? setCalendarYear((0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'full-year')) : setCalendarYear(new Date());
141
+ }
142
+ else if (dropdown.type === 'date-picker-cutoff' && !dropdownPopover) {
143
+ setCalendarYear(dropdown.currentYear); //need to improve on this one
144
+ }
145
+ dropdownPopover ? setDropdownPopover(null) : setDropdownPopover(e.currentTarget);
146
+ break;
147
+ case 'pagination-summary':
148
+ if (!Boolean(paginationSummaryPopover)) {
149
+ pagination && pagination.page ? setGoToPage(pagination.page) : setGoToPage(1);
150
+ setPerPageTemporaryValue(pagination.perPage ? pagination.perPage.toString() : '');
151
+ }
152
+ paginationSummaryPopover ? setPaginationSummaryPopover(null) : setPaginationSummaryPopover(e.currentTarget);
153
+ break;
154
+ case 'pivot':
155
+ pivotPopover ? setPivotPopover(null) : setPivotPopover(e.currentTarget);
156
+ break;
157
+ case 'filter':
158
+ filterPopover ? setFilterPopover(null) : setFilterPopover(e.currentTarget);
159
+ break;
160
+ case 'main-button':
161
+ if (hide) {
162
+ setMainButtonPopover(null);
163
+ }
164
+ else {
165
+ mainButtonPopover ? setMainButtonPopover(null) : setMainButtonPopover(e.currentTarget);
166
+ }
167
+ break;
168
+ default:
169
+ break;
170
+ }
171
+ };
172
+ /**
173
+ * actionRequestHandler
174
+ * manipulate the action and data of each action
175
+ * @param {*} e - event
176
+ * @param {*} type - action type / can be the action itself
177
+ * @param {*} action - it can be action type / data depends on the used actions
178
+ */
179
+ var actionRequestHandler = function (e, type, action, hidePopover) {
180
+ if (hidePopover === void 0) { hidePopover = true; }
181
+ if (e.preventDefault) {
182
+ e.preventDefault();
183
+ }
184
+ var data = null;
185
+ var addedParam = null;
186
+ if (type === 'search') {
187
+ data = searchTemporaryValue;
188
+ }
189
+ else if (type === 'pagination' || type === 'pagination-summary') {
190
+ data = pagination;
191
+ }
192
+ else if (type === 'dropdown' || type === 'pivot' || type === 'main-button' || type === 'button' || type === 'icon' || type === 'check' || type === 'tab' || type === 'toggle') {
193
+ data = action;
194
+ action = type;
195
+ if (dropdown && dropdown.type === 'date-picker-cutoff') {
196
+ addedParam = calendarYear;
197
+ }
198
+ }
199
+ else if (type === 'undo-button') {
200
+ data = action;
201
+ action = type;
202
+ }
203
+ if (hidePopover) {
204
+ popoverRequestHandler(e, type, true);
205
+ }
206
+ setTimeout(function () {
207
+ returnValues(action, data, addedParam);
208
+ }, 200);
209
+ };
210
+ /**
211
+ * handleChangeFormValue
212
+ * manipulate the inputs temporary values
213
+ * @param {*} e - event
214
+ * @param {*} type - type of the input that has been changed
215
+ */
216
+ var handleChangeFormValue = function (e, type) {
217
+ switch (type) {
218
+ case 'search':
219
+ e.target.value ? setSearchTemporaryValue(e.target.value) : setSearchTemporaryValue("");
220
+ break;
221
+ case 'show-per-page':
222
+ setPerPageTemporaryValue(e.target.value.toString());
223
+ setGoToPage(1);
224
+ if (paginationSummaryFormError.indexOf('perPageTemporaryValue') >= 0 && (e !== "")) {
225
+ paginationSummaryFormError = paginationSummaryFormError.filter(function (item) { return item !== 'perPageTemporaryValue'; });
226
+ setPaginationSummaryFormError(paginationSummaryFormError);
227
+ }
228
+ break;
229
+ case 'go-to-page':
230
+ setGoToPage(e.target.value);
231
+ if (paginationSummaryFormError.indexOf('goToPage') >= 0 && (e.currentTarget.value !== "" || e.currentTarget.value > 1)) {
232
+ paginationSummaryFormError = paginationSummaryFormError.filter(function (item) { return item !== 'goToPage'; });
233
+ setPaginationSummaryFormError(paginationSummaryFormError);
234
+ }
235
+ break;
236
+ case 'advanced-filter':
237
+ returnValues(type, e);
238
+ break;
239
+ default:
240
+ break;
241
+ }
242
+ };
243
+ /**
244
+ * paginationRequestHandler
245
+ * manipulate the paginations value depend on the action
246
+ * @param {*} e - event
247
+ * @param {*} action - action that the user do
248
+ */
249
+ var paginationRequestHandler = function (e, action) {
250
+ e.preventDefault();
251
+ var paginationCopy = __assign({}, pagination);
252
+ switch (action) {
253
+ case 'check-pagination-required':
254
+ var formError = [];
255
+ if (goToPage === "" || goToPage < 1) {
256
+ formError.push('goToPage');
257
+ }
258
+ if (perPageTemporaryValue === "") {
259
+ formError.push('perPageTemporaryValue');
260
+ }
261
+ return formError;
262
+ case 'submit':
263
+ var errorFields = paginationRequestHandler(e, 'check-pagination-required');
264
+ if (errorFields.length > 0) {
265
+ setPaginationSummaryFormError(errorFields);
266
+ }
267
+ else {
268
+ pagination.perPage = perPageTemporaryValue ? parseInt(perPageTemporaryValue) : pagination.perPage;
269
+ pagination.page = goToPage ? ((pagination.perPage * goToPage) > pagination.total ? (Math.floor(pagination.total / pagination.perPage) + 1) : parseInt(goToPage)) : 1;
270
+ pagination.counter = (pagination.page * pagination.perPage) > pagination.total ? pagination.total : (pagination.page * pagination.perPage);
271
+ // if (paginationCopy.perPage !== pagination.perPage || paginationCopy.page !== pagination.page || paginationCopy.counter !== pagination.counter) {
272
+ actionRequestHandler(e, 'pagination-summary', 'pagination');
273
+ // }
274
+ }
275
+ break;
276
+ case 'next':
277
+ pagination.page = ((pagination.page++) * pagination.perPage) > pagination.total ? (Math.floor(pagination.total / pagination.perPage) + 1) : pagination.page++;
278
+ pagination.counter = (pagination.page * pagination.perPage) > pagination.total ? pagination.total : (pagination.page * pagination.perPage);
279
+ if (paginationCopy.page !== pagination.page || paginationCopy.counter !== pagination.counter) {
280
+ actionRequestHandler(e, 'pagination', 'pagination');
281
+ }
282
+ break;
283
+ case 'prev':
284
+ pagination.page = pagination.page > 1 ? pagination.page -= 1 : pagination.page;
285
+ pagination.counter = pagination.page * pagination.perPage;
286
+ if (paginationCopy.page !== pagination.page || paginationCopy.counter !== pagination.counter) {
287
+ actionRequestHandler(e, 'pagination', 'pagination');
288
+ }
289
+ break;
290
+ default:
291
+ break;
292
+ }
293
+ };
294
+ /**
295
+ * checkboxRequestHandler
296
+ * select all / unselect all items
297
+ * @param {*} e - event
298
+ * @param {*} action - action of the checkbox
299
+ */
300
+ var checkboxRequestHandler = function (e, action) {
301
+ // e.preventDefault();
302
+ if (check.disabled !== true) {
303
+ if (action === 'all') {
304
+ actionRequestHandler(e, 'check', 'all');
305
+ }
306
+ else {
307
+ actionRequestHandler(e, 'check', 'none');
308
+ }
309
+ }
310
+ };
311
+ /**
312
+ * onDatePickerChange
313
+ * change the datepicker value
314
+ * @param {*} e - event
315
+ * @param {*} type - action type
316
+ */
317
+ var onDatePickerChange = function (e, type) {
318
+ if (dropdown.type === 'date-picker-weekly') {
319
+ dropdown.selection.startDate = (0, DatetimeFormatter_1.default)(e, 'start-of-Week');
320
+ dropdown.selection.endDate = (0, DatetimeFormatter_1.default)(e, 'end-of-Week');
321
+ }
322
+ actionRequestHandler(e, type, dropdown.selection);
323
+ };
324
+ /**
325
+ * dateMonthlyPickerHandler
326
+ * selection of month on a calendar and changing of year
327
+ * @param {*} e - event
328
+ * @param {*} action - action type
329
+ */
330
+ var dateMonthlyPickerHandler = function (e, action, data) {
331
+ if (data === void 0) { data = ''; }
332
+ var _a = __assign({}, dropdown), maxYear = _a.maxYear, minYear = _a.minYear;
333
+ var newDateValue = null;
334
+ var standardDate = null;
335
+ var selectedMonthDate = null;
336
+ var monthIdx = null;
337
+ var fullYear = null;
338
+ if (action === 'next') {
339
+ if (!maxYear || (maxYear && parseInt(maxYear) >= calendarYear + 1)) {
340
+ calendarYear += 1;
341
+ setCalendarYear(calendarYear);
342
+ }
343
+ }
344
+ else if (action === 'prev') {
345
+ if (!minYear || (minYear && parseInt(minYear) <= calendarYear - 1)) {
346
+ calendarYear -= 1;
347
+ setCalendarYear(calendarYear);
348
+ }
349
+ }
350
+ else if (action === 'month-selection') {
351
+ newDateValue = (0, DatetimeFormatter_1.default)(data + ' ' + calendarYear, 'month-year');
352
+ actionRequestHandler(e, 'dropdown', newDateValue);
353
+ }
354
+ else if (action === 'next-month') {
355
+ standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
356
+ selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
357
+ monthIdx = selectedMonthDate.getMonth();
358
+ fullYear = selectedMonthDate.getFullYear();
359
+ if (monthIdx + 1 < 12) {
360
+ monthIdx = monthIdx + 1;
361
+ }
362
+ else {
363
+ monthIdx = 0;
364
+ fullYear = fullYear + 1;
365
+ }
366
+ if ((!maxYear && !maxMonthIdx) || fullYear < parseInt(maxYear) || (fullYear === parseInt(maxYear) && monthIdx <= parseInt(maxMonthIdx))) {
367
+ newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
368
+ actionRequestHandler(e, 'dropdown', newDateValue, false);
369
+ }
370
+ }
371
+ else if (action === 'prev-month') {
372
+ standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
373
+ selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
374
+ monthIdx = selectedMonthDate.getMonth();
375
+ fullYear = selectedMonthDate.getFullYear();
376
+ if (monthIdx - 1 >= 0) {
377
+ monthIdx = monthIdx - 1;
378
+ }
379
+ else {
380
+ monthIdx = 11;
381
+ fullYear = fullYear - 1;
382
+ }
383
+ if ((!minYear && !minMonthIdx) || fullYear > parseInt(minYear) || (fullYear === parseInt(minYear) && monthIdx >= parseInt(minMonthIdx))) {
384
+ var newDateValue_1 = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
385
+ actionRequestHandler(e, 'dropdown', newDateValue_1, false);
386
+ }
387
+ }
388
+ };
389
+ var dateCutoffPickerHandler = function (e, label, value) {
390
+ var cutOffVal = {
391
+ "label": label,
392
+ "value": value,
393
+ };
394
+ actionRequestHandler(e, 'dropdown', cutOffVal);
395
+ };
396
+ /**
397
+ * returnValues
398
+ * return manipulated value from beltConfig to the parent component
399
+ * @param {*} action - done action on beltConfig
400
+ * @param {*} data - manipulated data from the action
401
+ */
402
+ var returnValues = function (action, data, addedParam) {
403
+ if (addedParam === void 0) { addedParam = null; }
404
+ return getActions ? getActions(action, data, addedParam) : false;
405
+ };
406
+ /**
407
+ * dateMonthlyPickerIsSelected
408
+ * determine if month is selected
409
+ * @param {*} month - month value
410
+ */
411
+ var dateMonthlyPickerIsSelected = function (month) {
412
+ var isSelected = false;
413
+ if (dropdown && dropdown.selection && dropdown.selection.startDate && calendarYear) {
414
+ var monthYear = month + ' ' + calendarYear;
415
+ isSelected = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate.toString(), 'month-year') === (0, DatetimeFormatter_1.default)(monthYear, 'month-year') ? true : false;
416
+ }
417
+ return isSelected;
418
+ };
419
+ var isDisabledDropdownPagination = function (action) {
420
+ var _a = __assign({}, dropdown), maxYear = _a.maxYear, minYear = _a.minYear, selection = _a.selection;
421
+ var selectedMonthDate = new Date(selection.startDate);
422
+ var monthIdx = selectedMonthDate.getMonth();
423
+ var fullYear = selectedMonthDate.getFullYear();
424
+ if (action === 'prev') {
425
+ if (minYear && minMonthIdx && fullYear === parseInt(minYear) && monthIdx === parseInt(minMonthIdx)) {
426
+ return ' is-disabled';
427
+ }
428
+ else {
429
+ return '';
430
+ }
431
+ }
432
+ else if (action === 'next') {
433
+ if (maxYear && maxMonthIdx && fullYear === parseInt(maxYear) && monthIdx === parseInt(maxMonthIdx)) {
434
+ return ' is-disabled';
435
+ }
436
+ else {
437
+ return '';
438
+ }
439
+ }
440
+ };
441
+ var toggleSelectionHandler = function (event, value) {
442
+ event.preventDefault();
443
+ actionRequestHandler(event, 'toggle', value, false);
444
+ };
445
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: customClass && customClass.constructor === String ? customClass : 'custom-card' }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-card-belt" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-belt-left" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-beltleft-container" }, { children: [
446
+ // Back Icon Configuration
447
+ config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("back") >= 0) || (config.iconType === 'back')) ? ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-icon icon-back", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'back'); }, "data-testid": "menubar-back" }, { children: Asset_1.SVG_BACK }))) : null,
448
+ // Check Icon Configuration
449
+ config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("check") >= 0) || (config.iconType === 'check')) ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon-check", "data-testid": "menubar-checkbox" }, { children: check ? (check.selected === 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (event) { return checkboxRequestHandler(event, 'all'); } }, { children: Constant_1.CHECKBOX.NONE }))) : check.selected > 0 && check.selected < check.total ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (event) { return checkboxRequestHandler(event, 'all'); } }, { children: Constant_1.CHECKBOX.FEW }))) : check.selected === check.total ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function (event) { return checkboxRequestHandler(event, 'none'); } }, { children: Constant_1.CHECKBOX.ALL }))) : (0, jsx_runtime_1.jsx)("div", { children: Constant_1.CHECKBOX.NONE })) : (0, jsx_runtime_1.jsx)("div", { children: Constant_1.CHECKBOX.NONE }) }))) : null,
450
+ // Standard Icon Configuration
451
+ config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("standard") >= 0) || (config.iconType === 'standard')) ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon", "data-testid": "menubar-standard-icon" }, { children: config.icon }))) : null, (0, jsx_runtime_1.jsxs)("div", __assign({ className: "belt-title" }, { children: [
452
+ // Title Configuration
453
+ check && check.selected && check.selected > 0 && check.selected < check.total ? ((0, jsx_runtime_1.jsx)("h6", { children: "".concat(check.selected, " ").concat(check.selected === 1 ? 'item selected' : 'items selected') })) : check && check.selected && check.selected === check.total ? ((0, jsx_runtime_1.jsx)("h6", { children: "All item(s) selected" })) : config && config.title && (config.title.constructor === String || config.title.constructor === Object) ? ((0, jsx_runtime_1.jsx)("h6", __assign({ className: "config-title", "data-testid": "menubar-title" }, { children: config.title }))) : null,
454
+ // Title Information Configuration
455
+ config && config.titleDescription ? ((0, jsx_runtime_1.jsx)("p", { children: config.titleDescription })) : null] })),
456
+ // Information Configuration
457
+ config && config.showInfo.constructor === Boolean && config.showInfo === true ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-belt-info" }, { children: [(0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-info-icon" }, { children: Asset_1.SVG_INFORMATION })) })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: (0, jsx_runtime_1.jsx)(Information_1.default, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) })) : null,
458
+ // Additional title on the modal
459
+ config && config.addedTitle ? ((0, jsx_runtime_1.jsx)("p", { children: config.addedTitle })) : null] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
460
+ return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);
461
+ }) })) }))] })) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (mainButton.actions.map(function (btn, idx) {
462
+ return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? 'belt-action ' + btn.class : 'belt-action', href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon " }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: btn.label ? btn.label : '' })] }), idx));
463
+ })) : null) : null,
464
+ // Button Actions Configuration
465
+ button && button.show && button.show.constructor === Boolean &&
466
+ button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (button.actions.map(function (btn, idx) {
467
+ return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : ''), href: "#", onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); }, "data-testid": "menubar-button" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon belt-buttons" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx));
468
+ })) : null,
469
+ // UndoButton Actions Configuration
470
+ undoButton && undoButton.show && !undoButton.isFooter &&
471
+ undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
472
+ return seconds > 0 || (btn.timer !== undefined) ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' button outline button-undo'), href: "#", "data-testid": "undo-button-".concat(btn.action) }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } }), { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": "undo-button-text" }, { children: btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : '' }))] }), idx)) : null;
473
+ })) : null] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-belt-right" }, { children: [
474
+ // Dropdown Actions Configuration
475
+ dropdown && dropdown.show && dropdown.show.constructor === Boolean ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-dropdown" }, { children: [dropdown.type === 'list' ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-add" }, { children: dropdown.icon ? dropdown.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: dropdownTitle })] }))) : dropdown.type === 'date-picker-weekly' ? ((0, jsx_runtime_1.jsxs)("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: dropdownTitle }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-arrowdown" }, { children: Asset_1.SVG_ARROWDOWN }))] }))) : dropdown.type === 'date-picker-monthly' ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: dropdownTitle }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-arrowdown" }, { children: Asset_1.SVG_ARROWDOWN }))] })), dropdown.showPagination ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({ className: 'belt-prev' + isDisabledDropdownPagination('prev'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev-month'); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWLEFT })) })), (0, jsx_runtime_1.jsx)("a", __assign({ className: 'belt-next' + isDisabledDropdownPagination('next'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'next-month'); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWRIGHT })) }))] })) : null] })) : dropdown.type === 'date-picker-cutoff' ? (((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: (0, jsx_runtime_1.jsx)("span", { children: dropdown.cutoffValue && dropdown.cutoffValue.label ? dropdown.cutoffValue.label : '' }) })))) : dropdown.type === 'button' ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return actionRequestHandler(event, 'button', dropdown.action); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: dropdown.icon ? dropdown.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: dropdownTitle })] }))) : ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: (0, jsx_runtime_1.jsx)("span", { children: dropdownTitle }) }))), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "dropdownPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(dropdownPopover), onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: dropdown.type === 'list' ? (dropdown.actions && dropdown.actions.constructor === Array && dropdown.actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: dropdown.actions.map(function (drpdwn, idx) {
476
+ return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'dropdown', drpdwn.value); } }, { children: drpdwn.label }), idx);
477
+ }) }))) : null) : dropdown.type === 'date-picker-weekly' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "popover" }, { children: (0, jsx_runtime_1.jsx)(react_date_range_1.Calendar, { className: "dateRangePickerInput", onChange: function (event) { return onDatePickerChange(event, 'dropdown'); } }) }))) : dropdown.type === 'date-picker-monthly' ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover em-popover-months" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "list-years" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: Asset_1.SVG_ARROWLEFT })), (0, jsx_runtime_1.jsx)("div", { children: calendarYear }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: Asset_1.SVG_ARROWRIGHT }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "list-months" }, { children: Constant_1.MONTH_LIST.map(function (action, idx) {
478
+ return dropdown.minYear && dropdown.minYear.toString() === calendarYear.toString() && minMonthIdx && minMonthIdx > idx ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: 'is-disabled', onClick: function (event) { event.preventDefault(); } }, { children: action.label }), idx)) : dropdown.maxYear && dropdown.maxYear.toString() === calendarYear.toString() && maxMonthIdx && maxMonthIdx < idx ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: 'is-disabled', onClick: function (event) { event.preventDefault(); } }, { children: action.label }), idx)) : ((0, jsx_runtime_1.jsx)("a", __assign({ className: dateMonthlyPickerIsSelected(action.label) ? 'is-selected' : '', href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'month-selection', action.value); } }, { children: action.label }), idx));
479
+ }) }))] }))) : dropdown.type === 'date-picker-cutoff' ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover em-popover-months" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "list-years" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowleft-white.svg", alt: "" }) })), (0, jsx_runtime_1.jsx)("div", { children: calendarYear }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowright-white.svg", alt: "" }) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "list-months" }, { children: dropdown.cutoffDates !== null && dropdown.cutoffDates.length > 0 ? (dropdown.cutoffDates.map(function (action, idx) {
480
+ var classSelect;
481
+ if (JSON.stringify(action.label) === JSON.stringify(dropdown.cutoffValue.label)) {
482
+ if (dropdown.currentYear === calendarYear) {
483
+ classSelect = 'is-selected';
484
+ }
485
+ else {
486
+ classSelect = '';
487
+ }
488
+ // classSelect = 'is-selected';
489
+ }
490
+ else {
491
+ classSelect = '';
492
+ }
493
+ return (0, jsx_runtime_1.jsx)("a", __assign({ className: classSelect, href: "#", onClick: function (event) { return dateCutoffPickerHandler(event, action.label, action.value); } }, { children: action.label }), idx);
494
+ })) : null }))] }))) : null }))] })) })) : null, pagination && pagination.show && pagination.show.constructor === Boolean ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!pagination.hideSummary || pagination.hideSummary === false ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-dropdown" }, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ className: "pagination-summary", href: "#", id: "pagination", onClick: function (event) { return popoverRequestHandler(event, 'pagination-summary'); }, "data-testid": "menubar-pagination" }, { children: [(pagination.counter > 0 ? (((pagination.page - 1) * pagination.perPage) + 1) : 0)
495
+ + ' - ' +
496
+ (pagination.page * pagination.perPage > pagination.total ?
497
+ (pagination.total ? pagination.total : pagination.counter) :
498
+ pagination.page * pagination.perPage), " of ", pagination.total ? pagination.total : 0] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "paginationSummaryPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(paginationSummaryPopover), onClick: function (event) { return popoverRequestHandler(event, 'pagination-summary'); } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover em-popover-input" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: 'e-field field field-input' + (paginationSummaryFormError.indexOf('perPageTemporaryValue') >= 0 ? ' is-invalid' : '') }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ className: 'e-input-label' }, { children: "SHOW" })), (0, jsx_runtime_1.jsx)(InputSelectionHandler_1.default, { config: {
499
+ id: 'paginationPerPage',
500
+ type: 'select',
501
+ placeholder: '-',
502
+ value: perPageTemporaryValue,
503
+ options: Constant_1.PAGE_OPTION
504
+ }, onChanged: function (event) { return handleChangeFormValue(event, 'show-per-page'); } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: 'e-field field field-input' + (paginationSummaryFormError.indexOf('goToPage') >= 0 ? ' is-invalid' : '') }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ className: 'e-input-label' }, { children: "GO TO PAGE" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "e-input" }, { children: (0, jsx_runtime_1.jsx)(InputSelectionHandler_1.default, { config: {
505
+ id: 'goToPage',
506
+ type: 'number',
507
+ value: goToPage,
508
+ placeholder: '-',
509
+ maxLength: 5,
510
+ min: '1',
511
+ }, onChanged: function (event) { return handleChangeFormValue(event, 'go-to-page'); } }) }))] })), (0, jsx_runtime_1.jsx)("button", __assign({ className: "button-check", onClick: function (event) { return paginationRequestHandler(event, 'submit'); } }, { children: Asset_1.SVG_CHECK }))] })) }))] })) })) : null, (0, jsx_runtime_1.jsx)("a", __assign({ className: (pagination.page * pagination.perPage) > pagination.perPage ? 'belt-prev' : 'belt-prev is-disabled', href: "#" }, (((pagination.page * pagination.perPage) > pagination.perPage) ? { onClick: function (event) { return paginationRequestHandler(event, 'prev'); } } : { onClick: function (event) { event.preventDefault(); } }), { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWLEFT })) })), (0, jsx_runtime_1.jsx)("a", __assign({ className: pagination.total <= (pagination.page * pagination.perPage) ? 'belt-next is-disabled' : 'belt-next', href: "#" }, ((pagination.total <= (pagination.page * pagination.perPage)) ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return paginationRequestHandler(event, 'next'); } }), { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: Asset_1.SVG_ARROWRIGHT })) }))] })) : null,
512
+ // Pivot Configuration
513
+ pivot && pivot.show ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-dropdown" }, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ id: "months", className: "belt-dropdown ", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'pivot'); }, "data-testid": "menubar-pivot" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: pivot.selected && pivot.actions &&
514
+ pivot.actions.constructor === Array && pivot.actions.length > 0 ? (pivot.actions.filter(function (item) { return (item.value === pivot.selected); }).length > 0 ? (pivot.actions.filter(function (item) { return (item.value === pivot.selected); })[0].label) : 'None') : 'None' }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon-arrowdown" }, { children: Asset_1.SVG_ARROWDOWN }))] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "pivotPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(pivotPopover), onClick: function (event) { return popoverRequestHandler(event, 'pivot'); } }, { children: pivot.actions && pivot.actions.constructor === Array && pivot.actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: pivot.actions.map(function (pvt, idx) {
515
+ return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'pivot', pvt.value); } }, { children: pvt.label }), idx);
516
+ }) }))) : null }))] })) })) : null,
517
+ // Close Icon Configuration
518
+ config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("close") >= 0) || (config.iconType === 'close')) ? ((0, jsx_runtime_1.jsx)("a", __assign({ className: "modal-close", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'close'); }, "date-testid": "menubar-close" }, { children: Asset_1.SVG_CLOSE_GRAY }))) : null, toggle && toggle.show && toggle.buttons && toggle.buttons.constructor === Array ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-toggle" }, { children: toggle.buttons.map(function (item, idx) { return ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-icon icon-calendar " + (item.value === toggle.value ? ' is-active' : ''), href: "#", onClick: function (event) { return toggleSelectionHandler(event, item.value); } }, { children: item.value === toggle.value ? item.selectedIconDisplay : item.icon }), 'toggle-' + idx)); }) })) })) : null] }))] })),
519
+ // Search Configuration
520
+ search && search.show && search.show.constructor === Boolean ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "field em-card-search" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "e-input" }, { children: (0, jsx_runtime_1.jsx)(InputSelectionHandler_1.default, { config: {
521
+ id: 'search',
522
+ type: 'text',
523
+ placeholder: search.placeholder ? search.placeholder : 'Search',
524
+ maxLength: 30,
525
+ readOnly: false,
526
+ disabled: false,
527
+ value: searchTemporaryValue ? searchTemporaryValue : ''
528
+ }, onChanged: function (event) { return handleChangeFormValue(event, 'search'); }, keyPressed: function (event) { return actionRequestHandler(event, 'search', 'search'); } }) })) }))) : null, children, (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-card-footer" }, { children: [buttonFooter && buttonFooter.show && buttonFooter.actions.length > 0 &&
529
+ (0, jsx_runtime_1.jsx)("div", __assign({ className: buttonFooter.className }, { children: buttonFooter.actions.map(function (btn, idx) { return (btn.show &&
530
+ (0, jsx_runtime_1.jsxs)("a", __assign({ className: 'button ' + btn.className, href: "#" }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); } }), { "data-testid": btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx)); }) })),
531
+ // UndoButton Actions Configuration
532
+ undoButton && undoButton.show && undoButton.isFooter &&
533
+ undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
534
+ return seconds > 0 || (btn.timer !== undefined) ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'button ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : ''), href: "#", "data-testid": "undo-button-".concat(btn.action) }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } }), { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: btn.icon ? btn.icon : '' })), (0, jsx_runtime_1.jsx)("span", __assign({ "data-testid": "undo-button-text" }, { children: btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : '' }))] }), idx)) : null;
535
+ })) : null] }))] })));
536
+ };
537
+ exports.default = MenuBar;
@@ -0,0 +1,33 @@
1
+ import React from "react";
2
+ import '../scss/style.scss';
3
+ interface IModalProps {
4
+ id?: string;
5
+ show: boolean;
6
+ hideMenuBar?: boolean;
7
+ config: {
8
+ title: string;
9
+ icon: any;
10
+ showInfo: boolean;
11
+ iconType: Array<string>;
12
+ modalSize: string;
13
+ };
14
+ getActions: any;
15
+ children?: any;
16
+ button?: {
17
+ show: boolean;
18
+ actions?: Array<object>;
19
+ };
20
+ dropdown?: any;
21
+ search?: any;
22
+ pagination?: any;
23
+ pivot?: any;
24
+ check?: any;
25
+ toggle?: any;
26
+ mainButton?: any;
27
+ buttonFooter?: any;
28
+ undoButton?: any;
29
+ info?: any;
30
+ customClass?: string;
31
+ }
32
+ declare const Modal: React.FunctionComponent<IModalProps>;
33
+ export default Modal;