empower-container 0.1.20 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -372,5 +372,7 @@ info: 'Sample Information'
372
372
  ```
373
373
 
374
374
  ## Changelog
375
+ * **0.1.22** - Added close icon on info menubar
376
+ * **0.1.21** - Added mainbutton on modal
375
377
  * **0.1.18** - Fixed dynamic root issues
376
378
  * **0.1.17** - Fixed main button with single item issues
@@ -54,7 +54,7 @@ var Information = function (_a) {
54
54
  setRowAnchorEl(rowAnchorEl);
55
55
  };
56
56
  var View = function () {
57
- return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "em-popover-i-close", onClick: hide })] })), (0, jsx_runtime_1.jsx)("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "em-popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h6", { children: item }) }), rowAnchorEl === key ? (Asset_1.SVG_ARROW_UP) : (Asset_1.SVG_ARROWDOWN)] })), rowAnchorEl === key ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
57
+ return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "em-popover-i-close", onClick: hide })] })), (0, jsx_runtime_1.jsx)("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-close", onClick: hide }, { children: Asset_1.SVG_CLOSE }))] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h6", { children: item }) }), rowAnchorEl === key ? (Asset_1.SVG_ARROW_UP) : (Asset_1.SVG_ARROWDOWN)] })), rowAnchorEl === key ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
58
58
  (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
59
59
  (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')) }))) : null] }, key)); })) : null) : null] }))) })) });
60
60
  };
@@ -517,7 +517,7 @@ var MenuBar = function (_a) {
517
517
  return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'pivot', pvt.value); } }, { children: pvt.label }), idx);
518
518
  }) }))) : null }))] })) })) : null,
519
519
  // Close Icon Configuration
520
- config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("close") >= 0) || (config.iconType === 'close')) ? ((0, jsx_runtime_1.jsx)("a", __assign({ className: "modal-close", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'close'); }, "date-testid": "menubar-close" }, { children: Asset_1.SVG_CLOSE_GRAY }))) : null, toggle && toggle.show && toggle.buttons && toggle.buttons.constructor === Array ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-toggle" }, { children: toggle.buttons.map(function (item, idx) { return ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-icon icon-calendar " + (item.value === toggle.value ? ' is-active' : ''), href: "#", onClick: function (event) { return toggleSelectionHandler(event, item.value); } }, { children: item.value === toggle.value ? item.selectedIconDisplay : item.icon }), 'toggle-' + idx)); }) })) })) : null] }))] })),
520
+ config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("close") >= 0) || (config.iconType === 'close')) ? ((0, jsx_runtime_1.jsx)("a", __assign({ className: "em-close", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'close'); }, "date-testid": "menubar-close" }, { children: Asset_1.SVG_CLOSE_GRAY }))) : null, toggle && toggle.show && toggle.buttons && toggle.buttons.constructor === Array ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-toggle" }, { children: toggle.buttons.map(function (item, idx) { return ((0, jsx_runtime_1.jsx)("a", __assign({ className: "belt-icon icon-calendar " + (item.value === toggle.value ? ' is-active' : ''), href: "#", onClick: function (event) { return toggleSelectionHandler(event, item.value); } }, { children: item.value === toggle.value ? item.selectedIconDisplay : item.icon }), 'toggle-' + idx)); }) })) })) : null] }))] })),
521
521
  // Search Configuration
522
522
  search && search.show && search.show.constructor === Boolean ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "field em-card-search" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "e-input" }, { children: (0, jsx_runtime_1.jsx)(InputSelectionHandler_1.default, { config: {
523
523
  id: 'search',
package/dist/cjs/Modal.js CHANGED
@@ -37,7 +37,7 @@ var Modal = function (_a) {
37
37
  }
38
38
  });
39
39
  }
40
- return (show ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-modal " + customClass }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? ((0, jsx_runtime_1.jsx)(MenuBar_1.default, __assign({ config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card-content" }, { children: children })) }))) : (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card-content card-content" }, { children: children })) })) })) })),
40
+ return (show ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-modal " + customClass }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? ((0, jsx_runtime_1.jsx)(MenuBar_1.default, __assign({ config: config, mainButton: mainButton, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card-content" }, { children: children })) }))) : (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card-content card-content" }, { children: children })) })) })) })),
41
41
  // document.getElementById(dvId)!
42
42
  document.getElementById('root')) : null);
43
43
  };
@@ -14,3 +14,4 @@ export declare const SVG_ARROW_UP: JSX.Element;
14
14
  export declare const SVG_REQUEST: JSX.Element;
15
15
  export declare const SVG_ADD: JSX.Element;
16
16
  export declare const SVG_INFORMATION: JSX.Element;
17
+ export declare const SVG_CLOSE: JSX.Element;
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROW_UP = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
14
+ exports.SVG_CLOSE = exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROW_UP = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
15
15
  var jsx_runtime_1 = require("react/jsx-runtime");
16
16
  exports.SVG_BACK = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.69612 4.29289C8.08664 4.68342 8.08664 5.31658 7.69612 5.70711L3.40323 10L7.69612 14.2929C8.08664 14.6834 8.08664 15.3166 7.69612 15.7071C7.3056 16.0976 6.67243 16.0976 6.28191 15.7071L1.28191 10.7071C0.891382 10.3166 0.891382 9.68342 1.28191 9.29289L6.28191 4.29289C6.67243 3.90237 7.3056 3.90237 7.69612 4.29289Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.989014 10C0.989014 9.44772 1.43673 9 1.98901 9H17.989C18.5413 9 18.989 9.44772 18.989 10C18.989 10.5523 18.5413 11 17.989 11H1.98901C1.43673 11 0.989014 10.5523 0.989014 10Z", fill: "#5C7FF3" })] }));
17
17
  exports.SVG_CHECK = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.6823 4.26895C18.0861 4.64578 18.1079 5.27857 17.7311 5.68232L8.39773 15.6823C8.2086 15.885 7.94385 16 7.66667 16C7.38949 16 7.12474 15.885 6.93562 15.6823L2.26895 10.6823C1.89211 10.2786 1.91393 9.64578 2.31769 9.26895C2.72144 8.89211 3.35423 8.91393 3.73106 9.31769L7.66667 13.5344L16.2689 4.31769C16.6458 3.91393 17.2786 3.89211 17.6823 4.26895Z", fill: "#393F5A" }) }));
@@ -28,3 +28,4 @@ exports.SVG_ARROW_UP = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "20", hei
28
28
  exports.SVG_REQUEST = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 14C12 14.5523 11.5523 15 11 15L5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13L11 13C11.5523 13 12 13.4477 12 14Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 4H18V18H2V4H6L6 2H2C0.895431 2 0 2.89543 0 4V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V4C20 2.89543 19.1046 2 18 2H14V4Z", fill: "#393F5A" })] }));
29
29
  exports.SVG_ADD = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" })] }));
30
30
  exports.SVG_INFORMATION = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "1", y: "1", width: "18", height: "18", rx: "9", stroke: "#9FA5B7", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 9V14", stroke: "#9FA5B7", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "6", r: "1", fill: "#9FA5B7" })] }));
31
+ exports.SVG_CLOSE = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.29289 3.29289C3.68342 2.90237 4.31658 2.90237 4.70711 3.29289L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L3.29289 4.70711C2.90237 4.31658 2.90237 3.68342 3.29289 3.29289Z", fill: "#9FA5B7" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.29289 16.7071C3.68342 17.0976 4.31658 17.0976 4.70711 16.7071L16.7071 4.70711C17.0976 4.31658 17.0976 3.68342 16.7071 3.29289C16.3166 2.90237 15.6834 2.90237 15.2929 3.29289L3.29289 15.2929C2.90237 15.6834 2.90237 16.3166 3.29289 16.7071Z", fill: "#9FA5B7" })] }));
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import React, { useState } from 'react';
14
- import { SVG_ARROWDOWN, SVG_ARROW_UP } from './assets/Asset';
14
+ import { SVG_ARROWDOWN, SVG_ARROW_UP, SVG_CLOSE } from './assets/Asset';
15
15
  var Information = function (_a) {
16
16
  var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
17
17
  var _b = useState(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
@@ -29,7 +29,7 @@ var Information = function (_a) {
29
29
  setRowAnchorEl(rowAnchorEl);
30
30
  };
31
31
  var View = function () {
32
- return _jsx(React.Fragment, { children: _jsx("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), _jsx("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [_jsx("div", { children: _jsx("h6", { children: item }) }), rowAnchorEl === key ? (SVG_ARROW_UP) : (SVG_ARROWDOWN)] })), rowAnchorEl === key ? (_jsx("div", __assign({ className: "em-popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
32
+ return _jsx(React.Fragment, { children: _jsx("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), _jsx("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", __assign({ className: "em-close", onClick: hide }, { children: SVG_CLOSE }))] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [_jsx("div", { children: _jsx("h6", { children: item }) }), rowAnchorEl === key ? (SVG_ARROW_UP) : (SVG_ARROWDOWN)] })), rowAnchorEl === key ? (_jsx("div", __assign({ className: "em-popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
33
33
  (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
34
34
  (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')) }))) : null] }, key)); })) : null) : null] }))) })) });
35
35
  };
@@ -512,7 +512,7 @@ var MenuBar = function (_a) {
512
512
  return _jsx("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'pivot', pvt.value); } }, { children: pvt.label }), idx);
513
513
  }) }))) : null }))] })) })) : null,
514
514
  // Close Icon Configuration
515
- config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("close") >= 0) || (config.iconType === 'close')) ? (_jsx("a", __assign({ className: "modal-close", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'close'); }, "date-testid": "menubar-close" }, { children: SVG_CLOSE_GRAY }))) : null, toggle && toggle.show && toggle.buttons && toggle.buttons.constructor === Array ? (_jsx(Fragment, { children: _jsx("div", __assign({ className: "belt-toggle" }, { children: toggle.buttons.map(function (item, idx) { return (_jsx("a", __assign({ className: "belt-icon icon-calendar " + (item.value === toggle.value ? ' is-active' : ''), href: "#", onClick: function (event) { return toggleSelectionHandler(event, item.value); } }, { children: item.value === toggle.value ? item.selectedIconDisplay : item.icon }), 'toggle-' + idx)); }) })) })) : null] }))] })),
515
+ config && config.iconType && ((config.iconType.constructor === Array && config.iconType.length > 0 && config.iconType.indexOf("close") >= 0) || (config.iconType === 'close')) ? (_jsx("a", __assign({ className: "em-close", href: "#", onClick: function (event) { return actionRequestHandler(event, 'icon', 'close'); }, "date-testid": "menubar-close" }, { children: SVG_CLOSE_GRAY }))) : null, toggle && toggle.show && toggle.buttons && toggle.buttons.constructor === Array ? (_jsx(Fragment, { children: _jsx("div", __assign({ className: "belt-toggle" }, { children: toggle.buttons.map(function (item, idx) { return (_jsx("a", __assign({ className: "belt-icon icon-calendar " + (item.value === toggle.value ? ' is-active' : ''), href: "#", onClick: function (event) { return toggleSelectionHandler(event, item.value); } }, { children: item.value === toggle.value ? item.selectedIconDisplay : item.icon }), 'toggle-' + idx)); }) })) })) : null] }))] })),
516
516
  // Search Configuration
517
517
  search && search.show && search.show.constructor === Boolean ? (_jsx("div", __assign({ className: "field em-card-search" }, { children: _jsx("div", __assign({ className: "e-input" }, { children: _jsx(Input, { config: {
518
518
  id: 'search',
package/dist/esm/Modal.js CHANGED
@@ -32,7 +32,7 @@ var Modal = function (_a) {
32
32
  }
33
33
  });
34
34
  }
35
- return (show ? ReactDOM.createPortal(_jsx("div", __assign({ className: "em-modal " + customClass }, { children: _jsx("div", __assign({ className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: _jsx("div", __assign({ className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? (_jsx(MenuBar, __assign({ config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: _jsx("div", __assign({ className: "em-card-content" }, { children: children })) }))) : _jsx("div", __assign({ className: "em-card-content card-content" }, { children: children })) })) })) })),
35
+ return (show ? ReactDOM.createPortal(_jsx("div", __assign({ className: "em-modal " + customClass }, { children: _jsx("div", __assign({ className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: _jsx("div", __assign({ className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? (_jsx(MenuBar, __assign({ config: config, mainButton: mainButton, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: _jsx("div", __assign({ className: "em-card-content" }, { children: children })) }))) : _jsx("div", __assign({ className: "em-card-content card-content" }, { children: children })) })) })) })),
36
36
  // document.getElementById(dvId)!
37
37
  document.getElementById('root')) : null);
38
38
  };
@@ -14,3 +14,4 @@ export declare const SVG_ARROW_UP: JSX.Element;
14
14
  export declare const SVG_REQUEST: JSX.Element;
15
15
  export declare const SVG_ADD: JSX.Element;
16
16
  export declare const SVG_INFORMATION: JSX.Element;
17
+ export declare const SVG_CLOSE: JSX.Element;
@@ -25,3 +25,4 @@ export var SVG_ARROW_UP = _jsx("svg", __assign({ width: "20", height: "20", view
25
25
  export var SVG_REQUEST = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z", fill: "#393F5A" }), _jsx("path", { d: "M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z", fill: "#393F5A" }), _jsx("path", { d: "M12 14C12 14.5523 11.5523 15 11 15L5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13L11 13C11.5523 13 12 13.4477 12 14Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 4H18V18H2V4H6L6 2H2C0.895431 2 0 2.89543 0 4V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V4C20 2.89543 19.1046 2 18 2H14V4Z", fill: "#393F5A" })] }));
26
26
  export var SVG_ADD = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" })] }));
27
27
  export var SVG_INFORMATION = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: "9", stroke: "#9FA5B7", strokeWidth: "2" }), _jsx("path", { d: "M10 9V14", stroke: "#9FA5B7", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "1", fill: "#9FA5B7" })] }));
28
+ export var SVG_CLOSE = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.29289 3.29289C3.68342 2.90237 4.31658 2.90237 4.70711 3.29289L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L3.29289 4.70711C2.90237 4.31658 2.90237 3.68342 3.29289 3.29289Z", fill: "#9FA5B7" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.29289 16.7071C3.68342 17.0976 4.31658 17.0976 4.70711 16.7071L16.7071 4.70711C17.0976 4.31658 17.0976 3.68342 16.7071 3.29289C16.3166 2.90237 15.6834 2.90237 15.2929 3.29289L3.29289 15.2929C2.90237 15.6834 2.90237 16.3166 3.29289 16.7071Z", fill: "#9FA5B7" })] }));
@@ -104,4 +104,30 @@
104
104
  }
105
105
  }
106
106
  }
107
- }
107
+ }
108
+
109
+ .em-text-link {
110
+ display: inline-flex;
111
+ align-items: center;
112
+
113
+ span {
114
+ color: $green-dark;
115
+ font-weight: $font-bold;
116
+ font-size: $text-sm;
117
+ }
118
+
119
+ svg{
120
+ margin-left: 5px;
121
+ transition: $transition;
122
+
123
+ path, rect{
124
+ fill: $green;
125
+ }
126
+ }
127
+
128
+ &:hover{
129
+ svg{
130
+ transform: translateX(3px);
131
+ }
132
+ }
133
+ }
@@ -60,9 +60,5 @@
60
60
  background-color: $gray-light;
61
61
  }
62
62
  }
63
-
64
- .em-popover-i-close {
65
- cursor: pointer;
66
- }
67
63
  }
68
64
  }
@@ -235,21 +235,6 @@
235
235
  transform: translateX(2px);
236
236
  }
237
237
  }
238
-
239
- .modal-close {
240
- height: 40px;
241
- width: 40px;
242
- min-width: 40px;
243
- padding: 10px;
244
- box-shadow: none;
245
- border-radius: 10px;
246
- transition: $transition;
247
-
248
- &:hover {
249
- background-color: $blue-light1;
250
- box-shadow: inset 0 0 0 5px $blue-light1;
251
- }
252
- }
253
238
  }
254
239
  }
255
240
 
@@ -21,4 +21,19 @@ body {
21
21
  box-sizing: border-box;
22
22
  margin: 0;
23
23
  padding: 0;
24
+ }
25
+
26
+ .em-close {
27
+ height: 40px;
28
+ width: 40px;
29
+ min-width: 40px;
30
+ padding: 10px;
31
+ box-shadow: none;
32
+ border-radius: $border-radius-md;
33
+ transition: $transition;
34
+ cursor: pointer;
35
+
36
+ &:hover {
37
+ background-color: $blue-light;
38
+ }
24
39
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "empower-container",
3
- "version": "0.1.20",
3
+ "version": "0.1.23",
4
4
  "private": false,
5
5
  "main": "./dist/cjs/ndex.js",
6
6
  "module": "./dist/esm/index.js",