empower-container 0.1.9 → 0.1.12

package/README.md

@@ -7,7 +7,7 @@
 ## 1) Menubar
 ###  Implementation
 ```js
-import { MenuBar } from 'empower-container';
+import { MenuBar } from 'empoower-container';
 ```
 ### Options
 
@@ -19,6 +19,39 @@ config: {
     iconType: ['check', "back", 'standard']
 }
 ```
+```js
+mainButton: {
+    show: true,
+    label: 'File a Request',
+    icon: SVG_ADD,
+    actions: [
+        {
+            
+            label: "File Leave",
+            action: "leave",       // string optional
+            icon: SVG_SUBMIT
+        },
+        {
+            label: "File Overtime",
+            action: "overtime",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Toil",
+            action: "toil",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Amendment",
+            action: "amendment",       // string optional
+            icon: SVG_SUBMIT
+        }
+    ]
+}
+```
+
 ```js
 button {
     show: true
@@ -135,6 +168,7 @@ info: 'Sample Information'
 ```html
  <MenuBar
     config={menubar.config}
+    mainButton={menubar.mainButton}
     button={menubar.button}
     pagination={menubar.pagination}
     pivot={menubar.pivot}
@@ -156,7 +190,7 @@ info: 'Sample Information'
 ## 2) Modal
 ### Implementation
 ```js
-import { Modal } from 'empower-container';
+import { Modal } from 'empoower-container';
 ```
 ### Options
 
@@ -172,6 +206,39 @@ config: {
     modalSize: 'lg'
 }
 ```
+```js
+mainButton: {
+    show: true,
+    label: 'File a Request',
+    icon: SVG_ADD,
+    actions: [
+        {
+            
+            label: "File Leave",
+            action: "leave",       // string optional
+            icon: SVG_SUBMIT
+        },
+        {
+            label: "File Overtime",
+            action: "overtime",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Toil",
+            action: "toil",       // string optional
+            icon: SVG_SUBMIT
+        },
+
+        {
+            label: "File Amendment",
+            action: "amendment",       // string optional
+            icon: SVG_SUBMIT
+        }
+    ]
+}
+```
+
 ```js    
 button {
     show: true
@@ -287,6 +354,7 @@ info: 'Sample Information'
 ```html
 <Modal
     config={menubar.config}
+    mainButton={menubar.mainButton}
     button={menubar.button}
     pagination={menubar.pagination}
     pivot={menubar.pivot}

package/dist/cjs/MenuBar.js

@@ -456,20 +456,20 @@ var MenuBar = function (_a) {
                                     // Information Configuration
                                     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, 
                                     // 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: [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) {
-                                                        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) {
+                                    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.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) {
+                                                            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));
                                     })) : 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 : ' 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));
                                     })) : 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' : ' 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 : '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;
                                     })) : 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) {
@@ -527,11 +527,11 @@ var MenuBar = function (_a) {
                             value: searchTemporaryValue ? searchTemporaryValue : ''
                         }, 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 &&
                         (0, jsx_runtime_1.jsx)("div", __assign({ className: buttonFooter.className }, { children: buttonFooter.actions.map(function (btn, idx) { return (btn.show &&
-                                (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)); }) })), 
+                                (0, jsx_runtime_1.jsxs)("a", __assign({ className: 'em-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)); }) })), 
                     // 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 : '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;
+                        return seconds > 0 || (btn.timer !== undefined) ? ((0, jsx_runtime_1.jsxs)("a", __assign({ className: btn.class ? btn.class : 'em-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;
                     })) : null] }))] })));
 };
 exports.default = MenuBar;

package/dist/esm/MenuBar.js

@@ -451,20 +451,20 @@ var MenuBar = function (_a) {
                                     // Information Configuration
                                     config && config.showInfo.constructor === Boolean && config.showInfo === true ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-belt-info" }, { children: [_jsx("a", __assign({ href: "#", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: _jsx("div", __assign({ className: "em-info-icon" }, { children: SVG_INFORMATION })) })), _jsx(Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: _jsx(Information, { 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, 
                                     // Additional title on the modal
-                                    config && config.addedTitle ? (_jsx("p", { children: config.addedTitle })) : null] })), _jsxs("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (_jsxs(Fragment, { children: [_jsxs("a", __assign({ className: "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) {
-                                                        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) {
+                                    config && config.addedTitle ? (_jsx("p", { children: config.addedTitle })) : null] })), _jsxs("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (_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) {
+                                                            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));
                                     })) : 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 : ' 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));
                                     })) : 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' : ' 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 : '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;
                                     })) : 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) {
@@ -522,11 +522,11 @@ var MenuBar = function (_a) {
                             value: searchTemporaryValue ? searchTemporaryValue : ''
                         }, onChanged: function (event) { return handleChangeFormValue(event, 'search'); }, keyPressed: function (event) { return actionRequestHandler(event, 'search', 'search'); } }) })) }))) : null, children, _jsxs("div", __assign({ className: "em-card-footer" }, { children: [buttonFooter && buttonFooter.show && buttonFooter.actions.length > 0 &&
                         _jsx("div", __assign({ className: buttonFooter.className }, { children: buttonFooter.actions.map(function (btn, idx) { return (btn.show &&
-                                _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: [_jsx("div", __assign({ className: "icon" }, { children: btn.icon ? btn.icon : '' })), _jsx("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx)); }) })), 
+                                _jsxs("a", __assign({ className: 'em-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: [_jsx("div", __assign({ className: "icon" }, { children: btn.icon ? btn.icon : '' })), _jsx("span", __assign({ "data-testid": 'button-action-' + btn.action }, { children: btn.label ? btn.label : '' }))] }), idx)); }) })), 
                     // 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 : '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: [_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 ? '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: [_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] }))] })));
 };
 export default MenuBar;

package/dist/scss/elements/_button.scss

@@ -1,4 +1,4 @@
-.button{
+.em-button{
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -11,7 +11,7 @@
   padding: 15px 30px;
   height: 50px;
   cursor: pointer;
-  transition: all .5s cubic-bezier(.19,1,.22,1);
+  transition: $transition;
   border-radius: 10px;
   text-transform: none;
   text-decoration: none;
@@ -19,11 +19,11 @@
 
   span{
       color: $white;
-      transition: all .5s cubic-bezier(.19,1,.22,1);
+      transition: $transition;
   }
 
   svg{
-      transition: all .5s cubic-bezier(.19,1,.22,1);
+      transition: $transition;
       margin-right: 10px;
 
       path{
@@ -86,7 +86,7 @@
         margin-right: 10px;
 
         path, rect, circle {
-          transition: all .5s cubic-bezier(.19,1,.22,1);
+          transition: $transition;
           fill: $green;;
         }
       }

package/dist/scss/library/_menubar.scss

@@ -4,6 +4,10 @@
     width: 100%;
     min-height: 40px;
     padding: 20px 15px;
+    
+    .em-dropdown {
+        position: relative;
+    }
 
     .em-belt-left {
         display: flex;
@@ -43,12 +47,12 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: all .5s cubic-bezier(.19,1,.22,1);
+            transition: $transition;
             box-shadow: none;
 
             &:hover {
                 svg {
-                    transition: all .5s cubic-bezier(.19,1,.22,1);
+                    transition: $transition;
                     transform: translateX(-2px);
                 }
             }
@@ -89,6 +93,36 @@
             max-height: 40px;
             padding: 10px 20px;
         }  
+
+        .em-button{
+            &:not(:first-child){
+                background-color: transparent;
+                color: $green-dark;
+                box-shadow: inset 0 0 0 1px $green;
+    
+                svg{
+                    margin-right: 10px;
+    
+                    path, rect, circle {
+                    transition: $transition;
+                    fill: $green;;
+                    }
+                }
+    
+                span{
+                    color: $gray-light4;
+                }
+    
+                &:hover{
+                    background-color: $blue-light1;
+                    box-shadow: none;
+    
+                    span{
+                        color: $gray;
+                    }
+                }
+            }
+        }
     }
 
     .em-belt-right {
@@ -101,10 +135,6 @@
             margin-left: 10px;
         }
 
-        .em-dropdown {
-            position: relative;
-        }
-
         .pagination-summary, .belt-dropdown {
             display: flex;
             align-items: center;
@@ -117,7 +147,7 @@
             color: $gray-dark;
             text-decoration: none;
             font-size: .875rem;
-            transition: all .5s cubic-bezier(.19,1,.22,1);
+            transition: $transition;
 
             &:hover {
                 box-shadow: inset 0 0 0 1px $blue-light4;
@@ -139,7 +169,7 @@
                 height: 20px;
                 width: 20px;
                 margin-left: 15px;
-                transition: all .5s cubic-bezier(.19,1,.22,1);
+                transition: $transition;
             }
 
             .icon-add  {
@@ -174,13 +204,13 @@
             min-width: 40px;
             box-shadow: inset 0 0 0 1px $blue-light2;
             border-radius: 10px;
-            transition: all .5s cubic-bezier(.19,1,.22,1);
+            transition: $transition;
 
             .belt-icon {
                 height: 20px;
                 width: 20px;
                 background: 50% no-repeat;
-                transition: all .5s cubic-bezier(.19,1,.22,1);
+                transition: $transition;
             }
 
             &:hover {
@@ -213,7 +243,7 @@
             padding: 10px;
             box-shadow: none;
             border-radius: 10px;
-            transition: all .5s cubic-bezier(.19,1,.22,1);
+            transition: $transition;
 
             &:hover {
                 background-color: $blue-light1;

package/dist/scss/library/_select.scss

@@ -75,7 +75,7 @@
             font-size: 0.875rem;
             color: $gray-dark;
             padding: 20px;
-            transition: all .5s cubic-bezier(.19,1,.22,1);
+            transition: $transition;
             cursor: pointer;
 
             &:hover{
@@ -128,7 +128,7 @@
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            transition: all .5s cubic-bezier(.19,1,.22,1);
+            transition: $transition;
         }
     }
 
@@ -148,7 +148,8 @@
             text-align: left;
             border: none;
             box-shadow: none;
-            transition: all .5s cubic-bezier(.19,1,.22,1);
+            transition: $transition;
+            margin-right: 0;
             cursor: pointer;
         }
     }
@@ -169,14 +170,14 @@
                 background-color: transparent;
                 border: none;
                 cursor: pointer;
-                transition: all .5s cubic-bezier(.19,1,.22,1);
+                transition: $transition;
     
                 svg path {
                     fill: $white;
                 }
     
                 img {
-                    transition: all .5s cubic-bezier(.19,1,.22,1);
+                    transition: $transition;
     
                     &:hover {
                         background-color: transparentize($blue-dark1, 0.5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "empower-container",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "private": false,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -36,7 +36,7 @@
     "dist": "npm run  build:esm && npm run  build:cjs && npm run copy-files",
     "build:esm": "tsc -b src/main/",
     "build:cjs": "tsc -p src/main/tsconfig.common.json",
-    "copy-files": "cp -r ./src/scss/ ./dist/",
+    "copy-files": "cp -r ./src/scss/ ./dist/ && cp -r ./src/main/assets/ ./dist/",
     "dev": "npx tsc -p src/sample/tsconfig.json -w"
   },
   "eslintConfig": {

package/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/index.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import App from './sample/App';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

package/src/main/DatetimeFormatter.d.ts

@@ -1,3 +0,0 @@
-export declare const getUTCFullTime: (d: any) => string;
-declare const datetimeFormatter: (timestamp: string | Date | any, format?: string, todayServer?: any, type?: any, getServerTime?: boolean, dateOnly?: boolean) => any;
-export default datetimeFormatter;