empower-container 0.1.24 → 0.1.27

package/dist/cjs/MenuBar.js

@@ -458,27 +458,27 @@ var MenuBar = function (_a) {
                                     // Additional title on the modal
                                     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: [
                                     // Main Button
-                                    mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 0 ? ((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: "em-button 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) {
+                                    mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 0 ? ((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: "em-button", 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: "em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
                                                             return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);
                                                         }) })) }))] })) })) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (mainButton.actions.map(function (btn, idx) {
-                                        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));
+                                        return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? 'em-button ' + btn.class : 'em-button', 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));
                                     })) : null) : null, 
                                     // Button Actions Configuration
                                     button && button.show && button.show.constructor === Boolean &&
                                         button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (button.actions.map(function (btn, idx) {
-                                        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));
+                                        return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : ' em-button' + ' ' + (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));
                                     })) : null, 
                                     // UndoButton Actions Configuration
                                     undoButton && undoButton.show && !undoButton.isFooter &&
                                         undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
-                                        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' : ' em-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;
+                                        return seconds > 0 || (btn.timer !== undefined) ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'em-button' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' em-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;
                                     })) : null] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-belt-right" }, { children: [
                             // Dropdown Actions Configuration
-                            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) {
+                            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: "em-popover-list" }, { children: dropdown.actions.map(function (drpdwn, idx) {
                                                     return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'dropdown', drpdwn.value); } }, { children: drpdwn.label }), idx);
-                                                }) }))) : 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) {
+                                                }) }))) : null) : dropdown.type === 'date-picker-weekly' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-datepicker-weekly" }, { 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: "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) {
                                                             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));
-                                                        }) }))] }))) : 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) {
+                                                        }) }))] }))) : dropdown.type === 'date-picker-cutoff' ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "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) {
                                                             var classSelect;
                                                             if (JSON.stringify(action.label) === JSON.stringify(dropdown.cutoffValue.label)) {
                                                                 if (dropdown.currentYear === calendarYear) {
@@ -497,7 +497,7 @@ var MenuBar = function (_a) {
                                                             + ' - ' +
                                                             (pagination.page * pagination.perPage > pagination.total ?
                                                                 (pagination.total ? pagination.total : pagination.counter) :
-                                                                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: {
+                                                                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: "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: {
                                                                             id: 'paginationPerPage',
                                                                             type: 'select',
                                                                             placeholder: '-',
@@ -513,7 +513,7 @@ var MenuBar = function (_a) {
                                                                             }, 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, 
                             // Pivot Configuration
                             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 &&
-                                                        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) {
+                                                        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: "em-popover-list" }, { children: pivot.actions.map(function (pvt, idx) {
                                                     return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'pivot', pvt.value); } }, { children: pvt.label }), idx);
                                                 }) }))) : null }))] })) })) : null, 
                             // Close Icon Configuration

package/dist/esm/MenuBar.js

@@ -453,27 +453,27 @@ var MenuBar = function (_a) {
                                     // Additional title on the modal
                                     config && config.addedTitle ? (_jsx("p", { children: config.addedTitle })) : null] })), _jsxs("div", __assign({ className: "em-beltleft-cta" }, { children: [
                                     // Main Button
-                                    mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 0 ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-dropdown" }, { children: [_jsxs("a", __assign({ className: "em-button belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [_jsx("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), _jsx("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), _jsx(Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: _jsx("div", __assign({ className: "popover em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
+                                    mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 0 ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-dropdown" }, { children: [_jsxs("a", __assign({ className: "em-button", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [_jsx("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), _jsx("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), _jsx(Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: _jsx("div", __assign({ className: "em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
                                                             return _jsx("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);
                                                         }) })) }))] })) })) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (mainButton.actions.map(function (btn, idx) {
-                                        return (_jsxs("a", __assign({ className: btn.class ? 'belt-action ' + btn.class : 'belt-action', href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: [_jsx("div", __assign({ className: "belt-icon " }, { children: btn.icon ? btn.icon : '' })), _jsx("span", { children: btn.label ? btn.label : '' })] }), idx));
+                                        return (_jsxs("a", __assign({ className: btn.class ? 'em-button ' + btn.class : 'em-button', href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: [_jsx("div", __assign({ className: "belt-icon " }, { children: btn.icon ? btn.icon : '' })), _jsx("span", { children: btn.label ? btn.label : '' })] }), idx));
                                     })) : null) : null, 
                                     // Button Actions Configuration
                                     button && button.show && button.show.constructor === Boolean &&
                                         button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (button.actions.map(function (btn, idx) {
-                                        return (_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: [_jsx("div", __assign({ className: "belt-icon belt-buttons" }, { children: btn.icon ? btn.icon : '' })), _jsx("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx));
+                                        return (_jsxs("a", __assign({ className: btn.class ? btn.class : ' em-button' + ' ' + (idx === 0 ? 'is-primary' : ''), href: "#", onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); }, "data-testid": "menubar-button" }, { children: [_jsx("div", __assign({ className: "belt-icon belt-buttons" }, { children: btn.icon ? btn.icon : '' })), _jsx("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx));
                                     })) : null, 
                                     // UndoButton Actions Configuration
                                     undoButton && undoButton.show && !undoButton.isFooter &&
                                         undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
-                                        return seconds > 0 || (btn.timer !== undefined) ? (_jsxs("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' em-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: [_jsx("div", __assign({ className: "belt-icon" }, { children: btn.icon ? btn.icon : '' })), _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;
+                                        return seconds > 0 || (btn.timer !== undefined) ? (_jsxs("a", __assign({ className: btn.class ? btn.class : 'em-button' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' em-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: [_jsx("div", __assign({ className: "belt-icon" }, { children: btn.icon ? btn.icon : '' })), _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;
                                     })) : null] }))] })), _jsxs("div", __assign({ className: "em-belt-right" }, { children: [
                             // Dropdown Actions Configuration
-                            dropdown && dropdown.show && dropdown.show.constructor === Boolean ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-dropdown" }, { children: [dropdown.type === 'list' ? (_jsxs("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [_jsx("div", __assign({ className: "icon-add" }, { children: dropdown.icon ? dropdown.icon : '' })), _jsx("span", { children: dropdownTitle })] }))) : dropdown.type === 'date-picker-weekly' ? (_jsxs("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [_jsx("span", { children: dropdownTitle }), _jsx("div", __assign({ className: "icon-arrowdown" }, { children: SVG_ARROWDOWN }))] }))) : dropdown.type === 'date-picker-monthly' ? (_jsxs(Fragment, { children: [_jsxs("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [_jsx("span", { children: dropdownTitle }), _jsx("div", __assign({ className: "icon-arrowdown" }, { children: SVG_ARROWDOWN }))] })), dropdown.showPagination ? (_jsxs(Fragment, { children: [_jsx("a", __assign({ className: 'belt-prev' + isDisabledDropdownPagination('prev'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev-month'); } }, { children: _jsx("div", __assign({ className: "belt-icon" }, { children: SVG_ARROWLEFT })) })), _jsx("a", __assign({ className: 'belt-next' + isDisabledDropdownPagination('next'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'next-month'); } }, { children: _jsx("div", __assign({ className: "belt-icon" }, { children: SVG_ARROWRIGHT })) }))] })) : null] })) : dropdown.type === 'date-picker-cutoff' ? ((_jsx("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: _jsx("span", { children: dropdown.cutoffValue && dropdown.cutoffValue.label ? dropdown.cutoffValue.label : '' }) })))) : dropdown.type === 'button' ? (_jsxs("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return actionRequestHandler(event, 'button', dropdown.action); } }, { children: [_jsx("div", __assign({ className: "belt-icon" }, { children: dropdown.icon ? dropdown.icon : '' })), _jsx("span", { children: dropdownTitle })] }))) : (_jsx("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: _jsx("span", { children: dropdownTitle }) }))), _jsx(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 ? (_jsx("div", __assign({ className: "popover em-popover-list" }, { children: dropdown.actions.map(function (drpdwn, idx) {
+                            dropdown && dropdown.show && dropdown.show.constructor === Boolean ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-dropdown" }, { children: [dropdown.type === 'list' ? (_jsxs("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [_jsx("div", __assign({ className: "icon-add" }, { children: dropdown.icon ? dropdown.icon : '' })), _jsx("span", { children: dropdownTitle })] }))) : dropdown.type === 'date-picker-weekly' ? (_jsxs("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [_jsx("span", { children: dropdownTitle }), _jsx("div", __assign({ className: "icon-arrowdown" }, { children: SVG_ARROWDOWN }))] }))) : dropdown.type === 'date-picker-monthly' ? (_jsxs(Fragment, { children: [_jsxs("a", __assign({ id: "months", className: "belt-dropdown ".concat(Boolean(dropdownPopover) ? 'is-active' : ''), href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: [_jsx("span", { children: dropdownTitle }), _jsx("div", __assign({ className: "icon-arrowdown" }, { children: SVG_ARROWDOWN }))] })), dropdown.showPagination ? (_jsxs(Fragment, { children: [_jsx("a", __assign({ className: 'belt-prev' + isDisabledDropdownPagination('prev'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev-month'); } }, { children: _jsx("div", __assign({ className: "belt-icon" }, { children: SVG_ARROWLEFT })) })), _jsx("a", __assign({ className: 'belt-next' + isDisabledDropdownPagination('next'), href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'next-month'); } }, { children: _jsx("div", __assign({ className: "belt-icon" }, { children: SVG_ARROWRIGHT })) }))] })) : null] })) : dropdown.type === 'date-picker-cutoff' ? ((_jsx("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: _jsx("span", { children: dropdown.cutoffValue && dropdown.cutoffValue.label ? dropdown.cutoffValue.label : '' }) })))) : dropdown.type === 'button' ? (_jsxs("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return actionRequestHandler(event, 'button', dropdown.action); } }, { children: [_jsx("div", __assign({ className: "belt-icon" }, { children: dropdown.icon ? dropdown.icon : '' })), _jsx("span", { children: dropdownTitle })] }))) : (_jsx("a", __assign({ className: "belt-dropdown", id: "add", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'dropdown'); } }, { children: _jsx("span", { children: dropdownTitle }) }))), _jsx(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 ? (_jsx("div", __assign({ className: "em-popover-list" }, { children: dropdown.actions.map(function (drpdwn, idx) {
                                                     return _jsx("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'dropdown', drpdwn.value); } }, { children: drpdwn.label }), idx);
-                                                }) }))) : null) : dropdown.type === 'date-picker-weekly' ? (_jsx("div", __assign({ className: "popover" }, { children: _jsx(Calendar, { className: "dateRangePickerInput", onChange: function (event) { return onDatePickerChange(event, 'dropdown'); } }) }))) : dropdown.type === 'date-picker-monthly' ? (_jsxs("div", __assign({ className: "popover em-popover-months" }, { children: [_jsxs("div", __assign({ className: "list-years" }, { children: [_jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: SVG_ARROWLEFT })), _jsx("div", { children: calendarYear }), _jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: SVG_ARROWRIGHT }))] })), _jsx("div", __assign({ className: "list-months" }, { children: MONTH_LIST.map(function (action, idx) {
+                                                }) }))) : null) : dropdown.type === 'date-picker-weekly' ? (_jsx("div", __assign({ className: "em-datepicker-weekly" }, { children: _jsx(Calendar, { className: "dateRangePickerInput", onChange: function (event) { return onDatePickerChange(event, 'dropdown'); } }) }))) : dropdown.type === 'date-picker-monthly' ? (_jsxs("div", __assign({ className: "em-popover-months" }, { children: [_jsxs("div", __assign({ className: "list-years" }, { children: [_jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: SVG_ARROWLEFT })), _jsx("div", { children: calendarYear }), _jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: SVG_ARROWRIGHT }))] })), _jsx("div", __assign({ className: "list-months" }, { children: MONTH_LIST.map(function (action, idx) {
                                                             return dropdown.minYear && dropdown.minYear.toString() === calendarYear.toString() && minMonthIdx && minMonthIdx > idx ? (_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 ? (_jsx("a", __assign({ href: "#", className: 'is-disabled', onClick: function (event) { event.preventDefault(); } }, { children: action.label }), idx)) : (_jsx("a", __assign({ className: dateMonthlyPickerIsSelected(action.label) ? 'is-selected' : '', href: "#", onClick: function (event) { return dateMonthlyPickerHandler(event, 'month-selection', action.value); } }, { children: action.label }), idx));
-                                                        }) }))] }))) : dropdown.type === 'date-picker-cutoff' ? (_jsxs("div", __assign({ className: "popover em-popover-months" }, { children: [_jsxs("div", __assign({ className: "list-years" }, { children: [_jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: _jsx("img", { src: "/images/icons/icon-arrowleft-white.svg", alt: "" }) })), _jsx("div", { children: calendarYear }), _jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: _jsx("img", { src: "/images/icons/icon-arrowright-white.svg", alt: "" }) }))] })), _jsx("div", __assign({ className: "list-months" }, { children: dropdown.cutoffDates !== null && dropdown.cutoffDates.length > 0 ? (dropdown.cutoffDates.map(function (action, idx) {
+                                                        }) }))] }))) : dropdown.type === 'date-picker-cutoff' ? (_jsxs("div", __assign({ className: "em-popover-months" }, { children: [_jsxs("div", __assign({ className: "list-years" }, { children: [_jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'prev'); } }, { children: _jsx("img", { src: "/images/icons/icon-arrowleft-white.svg", alt: "" }) })), _jsx("div", { children: calendarYear }), _jsx("button", __assign({ onClick: function (event) { return dateMonthlyPickerHandler(event, 'next'); } }, { children: _jsx("img", { src: "/images/icons/icon-arrowright-white.svg", alt: "" }) }))] })), _jsx("div", __assign({ className: "list-months" }, { children: dropdown.cutoffDates !== null && dropdown.cutoffDates.length > 0 ? (dropdown.cutoffDates.map(function (action, idx) {
                                                             var classSelect;
                                                             if (JSON.stringify(action.label) === JSON.stringify(dropdown.cutoffValue.label)) {
                                                                 if (dropdown.currentYear === calendarYear) {
@@ -492,7 +492,7 @@ var MenuBar = function (_a) {
                                                             + ' - ' +
                                                             (pagination.page * pagination.perPage > pagination.total ?
                                                                 (pagination.total ? pagination.total : pagination.counter) :
-                                                                pagination.page * pagination.perPage), " of ", pagination.total ? pagination.total : 0] })), _jsx(Popover, __assign({ id: "paginationSummaryPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(paginationSummaryPopover), onClick: function (event) { return popoverRequestHandler(event, 'pagination-summary'); } }, { children: _jsxs("div", __assign({ className: "popover em-popover-input" }, { children: [_jsxs("div", __assign({ className: 'e-field field field-input' + (paginationSummaryFormError.indexOf('perPageTemporaryValue') >= 0 ? ' is-invalid' : '') }, { children: [_jsx("label", __assign({ className: 'e-input-label' }, { children: "SHOW" })), _jsx(Input, { config: {
+                                                                pagination.page * pagination.perPage), " of ", pagination.total ? pagination.total : 0] })), _jsx(Popover, __assign({ id: "paginationSummaryPopover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(paginationSummaryPopover), onClick: function (event) { return popoverRequestHandler(event, 'pagination-summary'); } }, { children: _jsxs("div", __assign({ className: "em-popover-input" }, { children: [_jsxs("div", __assign({ className: 'e-field field field-input' + (paginationSummaryFormError.indexOf('perPageTemporaryValue') >= 0 ? ' is-invalid' : '') }, { children: [_jsx("label", __assign({ className: 'e-input-label' }, { children: "SHOW" })), _jsx(Input, { config: {
                                                                             id: 'paginationPerPage',
                                                                             type: 'select',
                                                                             placeholder: '-',
@@ -508,7 +508,7 @@ var MenuBar = function (_a) {
                                                                             }, onChanged: function (event) { return handleChangeFormValue(event, 'go-to-page'); } }) }))] })), _jsx("button", __assign({ className: "button-check", onClick: function (event) { return paginationRequestHandler(event, 'submit'); } }, { children: SVG_CHECK }))] })) }))] })) })) : null, _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: _jsx("div", __assign({ className: "belt-icon" }, { children: SVG_ARROWLEFT })) })), _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: _jsx("div", __assign({ className: "belt-icon" }, { children: SVG_ARROWRIGHT })) }))] })) : null, 
                             // Pivot Configuration
                             pivot && pivot.show ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-dropdown" }, { children: [_jsxs("a", __assign({ id: "months", className: "belt-dropdown ", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'pivot'); }, "data-testid": "menubar-pivot" }, { children: [_jsx("span", { children: pivot.selected && pivot.actions &&
-                                                        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' }), _jsx("div", __assign({ className: "icon-arrowdown" }, { children: SVG_ARROWDOWN }))] })), _jsx(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 ? (_jsx("div", __assign({ className: "popover em-popover-list" }, { children: pivot.actions.map(function (pvt, idx) {
+                                                        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' }), _jsx("div", __assign({ className: "icon-arrowdown" }, { children: SVG_ARROWDOWN }))] })), _jsx(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 ? (_jsx("div", __assign({ className: "em-popover-list" }, { children: pivot.actions.map(function (pvt, idx) {
                                                     return _jsx("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'pivot', pvt.value); } }, { children: pvt.label }), idx);
                                                 }) }))) : null }))] })) })) : null, 
                             // Close Icon Configuration

package/dist/scss/elements/_button.scss

@@ -1,4 +1,4 @@
-.em-button{
+.em-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -104,6 +104,16 @@
           }
       }
     } 
+
+    &.delete {
+        color: $red;
+        box-shadow: inset 0 0 0 1px $red;
+        padding: 15px;
+
+        &:hover {
+            background-color: $red;
+        }
+    }
 }
 
 .em-text-link {

package/dist/scss/elements/_popover.scss

@@ -1,8 +1,171 @@
 .em-popover {
+    position: absolute;
+    top: 50px;
+    margin-top: -2px;
+    font-size: 0.875rem;
+    color: $gray-dark;
+    z-index: 100; 
+    display: flex;
+    width: auto;
     background-color: $white;
     border-top: 5px solid $blue-light4;
     border-bottom-left-radius: $border-radius-md;
     border-bottom-right-radius: $border-radius-md;
     box-shadow: $shadow-popover;
     max-width: 650px;
-}
+}
+
+
+.em-datepicker-weekly {
+    .rdrCalendarWrapper {
+        display: flex;
+        flex-direction: column;
+        font-size: $text-sm;
+        box-shadow: $shadow-popover;
+  
+        .rdrMonthAndYearWrapper {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #0f2473;
+            padding: 15px;
+
+        button {
+            border: none;
+            width: 50px;
+            height: 50px;
+            border-radius: 0;
+            background-color: transparent;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: none;
+            transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+            cursor: pointer;
+        }
+        }
+  
+        .rdrMonthAndYearPickers {
+            display: flex;
+            
+            select {
+                min-width: 100px;
+                color: $white;
+                font-size: $text-base;
+                height: 50px;
+                border-radius: 0;
+                border: none;
+                // background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowdown-white.svg")  right center no-repeat;
+                background: transparent;
+                transition: $transition;
+
+                &:focus-visible {
+                    outline: none;
+                }
+    
+                &:hover {
+                    background-color: transparentize(#091336, 0.5);
+                }
+    
+                option {
+                    padding: 10px;
+                    background-color: $white;
+                    color: #4A5568;
+                }
+            }
+        }
+  
+        .rdrNextPrevButton {
+  
+          i {
+            height: 20px;
+            width: 20px;
+            border: 0;
+            margin: 0;
+            transition: $transition;
+          }
+  
+          &.rdrPprevButton {
+            i {
+              background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowleft-white.svg") center center no-repeat;
+            }
+  
+            &:hover {
+              i {
+                transform: translateX(-5px);
+              }
+            }
+          }
+  
+          &.rdrNextButton {
+            i {
+              background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowright-white.svg") center center no-repeat;
+            }
+  
+            &:hover {
+              i {
+                transform: translateX(5px);
+              }
+            }
+          }
+        }
+        
+        .rdrWeekDays {
+            display: flex;
+            padding: 15px 15px 0;
+        }
+  
+        .rdrWeekDay {
+            font-weight: 700;
+            padding: 1rem 0.25rem;
+            text-transform: uppercase;
+            color: #A0AEC0;
+            font-size: 0.875rem;
+            width: 50px;
+            text-align: center;
+        }
+  
+        .rdrDay {
+            font-size: 0.875rem;
+            width: 50px;
+            text-align: center;
+            border: none;
+            background-color: transparent;
+
+            .rdrDayNumber {
+                span {
+                    width: 50px;
+                    height: 50px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+                    color: $gray-dark;
+
+                    &:hover {
+                        background-color: #EDF2F7;
+                    }
+                }
+            }
+
+            &.rdrDayPassive {
+                .rdrDayNumber > span{
+                    cursor: default;
+                    color: $gray-light3;
+        
+                    &:hover{
+                      background-color: transparent;
+                    }
+                }
+            }
+        }
+  
+        .rdrDays {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 0 15px 15px;
+        }
+      }
+}

package/dist/scss/library/_information.scss

@@ -1,6 +1,10 @@
 .em-belt-info {
     position: relative;
 
+    .em-popover {
+        width: 650px;
+    }
+
     .em-info-icon {
         display: flex;
         justify-content: center;
@@ -49,6 +53,11 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+
+            h6 {
+                font-size: $text-sm;
+                text-transform: uppercase;
+            }
         }
 
         .em-popover-i-category {

package/dist/scss/library/_menubar.scss

@@ -7,6 +7,8 @@
     
     .em-dropdown {
         position: relative;
+        min-width: 100px;
+        white-space: nowrap;
     }
 
     .em-belt-left {
@@ -129,7 +131,7 @@
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
 
         > a, > div {
             margin-left: 10px;
@@ -237,4 +239,3 @@
         }
     }
 } 
-

package/dist/scss/library/_select.scss

@@ -2,6 +2,19 @@
     position: relative;
     width: 100%;
 
+    option{
+        font-size: 0.875rem;
+        color: $gray-dark;
+        padding: 20px;
+        transition: $transition;
+        cursor: pointer;
+
+        &:hover{
+            background-color: $blue-light;
+            padding: 20px 18px 20px 22px;
+        }
+    }
+
     .em-input-field {
         width: 100%;
     }    
@@ -57,181 +70,148 @@
     z-index: 99;
 }
 
-.em-popover{
-    position: absolute;
-    top: 50px;
-    margin-top: -2px;
-    background-color: $white;
-    font-size: 0.875rem;
-    color: $gray-dark;
-    border-top: 5px solid $blue;
-    box-shadow: 0 15px 30px 0 rgb(19 37 154 / 15%);  
-    z-index: 100; 
-
-    .em-select{
-        width: 100%;
-
-        option{
-            font-size: 0.875rem;
-            color: $gray-dark;
-            padding: 20px;
-            transition: $transition;
-            cursor: pointer;
-
-            &:hover{
-                background-color: $blue-light;
-                padding: 20px 18px 20px 22px;
-            }
+.em-popover-input{
+    display: flex;
+    padding: 20px;
+
+    .field {
+        margin: 0 15px 0 0;
+        width: 160px;
+
+        > label {
+            position: relative;
+            top: 0;
+            left: 0;
+            padding: 0;
+            margin-bottom: 5px;
+            display: inline-block;
+            font-size: .875rem;
+            font-weight: 700;
+            color: $gray-light3;
+            text-transform: uppercase;
         }
     }
-        
-    .popover{
-        a {
-            &:hover {
-                background-color: $blue-light;
-                color: $gray-dark;
-                padding: 15px 18px 15px 22px;
-                box-shadow: none;
-                border: none;
-            }
-        }
+
+    button {
+        border: 0;
+        background: none;
+        height: 50px;
+        width: 50px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: $transition;
     }
+}
 
-    .em-popover-input{
-        display: flex;
-        padding: 20px;
+.em-popover-list {
+    display: block;
+    padding: 0;
 
-        .field {
-            margin: 0 15px 0 0;
-            width: 160px;
-
-            > label {
-                position: relative;
-                top: 0;
-                left: 0;
-                padding: 0;
-                margin-bottom: 5px;
-                display: inline-block;
-                font-size: .875rem;
-                font-weight: 700;
-                color: $gray-light3;
-                text-transform: uppercase;
-            }
+    a {
+        display: block;
+        font-weight: 700;
+        font-size: .875rem;
+        color: $gray-light4;
+        padding: 15px 20px;
+        min-height: 50px;
+        line-height: 20px;
+        text-decoration: none;
+        text-align: left;
+        border: none;
+        box-shadow: none;
+        transition: $transition;
+        margin-right: 0;
+        cursor: pointer;
+
+        &:hover {
+            background-color: $blue-light;
+            color: $gray-dark;
+            padding: 15px 18px 15px 22px;
+            box-shadow: none;
+            border: none;
         }
+    }
+}
+
+.em-popover-months {
+    width: 300px;
+    padding: 0;
+    flex-direction: column;
+
+    .list-years {
+        background-color: $blue-dark;
+        display: flex;
+        justify-content: space-between;
+        margin-top: -1px;
+        width: 100%;
 
         button {
-            border: 0;
-            background: none;
-            height: 50px;
-            width: 50px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
+            background-color: transparent;
+            border: none;
             cursor: pointer;
             transition: $transition;
+
+            svg path {
+                fill: $white;
+            }
+
+            img {
+                transition: $transition;
+
+                &:hover {
+                    background-color: transparentize($blue-dark1, 0.5);
+                }
+
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+
+        > div {
+            color: $white;
+            font-size: 1.5rem;
+            padding: 15px;
         }
     }
 
-    .em-popover-list {
-        display: block;
-        padding: 0;
+    .list-months {
+        display: flex;
+        flex-wrap: wrap;
 
         a {
-            display: block;
+            width: 33.33%;
+            box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
+            padding: 15px;
+            color: $gray-light4;
+            text-align: center;
             font-weight: 700;
             font-size: .875rem;
-            color: $gray-light4;
-            padding: 15px 20px;
-            min-height: 50px;
-            line-height: 20px;
             text-decoration: none;
-            text-align: left;
-            border: none;
-            box-shadow: none;
-            transition: $transition;
-            margin-right: 0;
-            cursor: pointer;
-        }
-    }
 
-    .em-popover-months {
-        width: 300px;
-        padding: 0;
-        flex-direction: column;
-    
-        .list-years {
-            background-color: $blue-dark;
-            display: flex;
-            justify-content: space-between;
-            margin-top: -1px;
-            width: 100%;
-    
-            button {
-                background-color: transparent;
-                border: none;
-                cursor: pointer;
-                transition: $transition;
-    
-                svg path {
-                    fill: $white;
-                }
-    
-                img {
-                    transition: $transition;
-    
-                    &:hover {
-                        background-color: transparentize($blue-dark1, 0.5);
-                    }
-    
-                    &:focus {
-                        outline: none;
-                    }
-                }
-            }
-    
-            > div {
-                color: $white;
-                font-size: 1.5rem;
-                padding: 15px;
+            &:hover {
+                background-color: $gray-light;
+                color: $gray-dark;
             }
-        }
-    
-        .list-months {
-            display: flex;
-            flex-wrap: wrap;
-    
-            a {
-                width: 33.33%;
-                box-shadow: inset 1px 0 0 0 $blue-light1, inset 0 1px 0 0 $blue-light1;
-                padding: 15px;
-                color: $gray-light4;
-                text-align: center;
-                font-weight: 700;
-                font-size: .875rem;
-                text-decoration: none;
-    
-                &:hover {
-                    background-color: $gray-light;
-                    color: $gray-dark;
-                }
-    
-                &.is-disabled{
+
+            &.is-disabled{
+                background-color: $gray-light;
+                color: $gray-light3;
+                cursor: initial;
+
+                &:hover{
                     background-color: $gray-light;
                     color: $gray-light3;
-                    cursor: initial;
-    
-                    &:hover{
-                        background-color: $gray-light;
-                        color: $gray-light3;
-                    }
-                }
-    
-                &.is-selected{
-                    background-color: $blue-dark1;
-                    color: $white;
-                    box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
                 }
             }
+
+            &.is-selected{
+                background-color: $blue-dark1;
+                color: $white;
+                box-shadow: inset 1px 0 0 0 $blue-dark1, inset 0 1px 0 0 $blue-dark1;
+            }
         }
     }
 }

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "empower-container",
-  "version": "0.1.24",
+  "version": "0.1.27",
   "private": false,
+  "homepage": "https://bitbucket.org/empowerteams/empower-container",
   "main": "./dist/cjs/ndex.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
@@ -19,6 +20,7 @@
     "react-dom": "^17.0.2",
     "react-native": "^0.68.0",
     "react-native-render-html": "^6.3.4",
+    "react-refresh": "^0.14.0",
     "react-scripts": "5.0.0",
     "sass": "^1.49.9",
     "scss": "^0.2.4",