empower-container 0.1.4 → 0.1.7

package/src/main/Information.tsx

@@ -1,30 +1,35 @@
 
-import React, {useState} from 'react';
-import renderHtml from 'react-render-html';
+import React, { useState } from 'react';
+// @ts-ignore
+// import renderHtml from 'react-render-html';
 
 
 interface IInformationProps {
     items: any,
-    listRow:Array<string | object>,
-    desc:boolean,
-    title?:string
-    hide: (event: React.DOMAttributes<HTMLDivElement> |  React.MouseEventHandler<HTMLDivElement> | undefined | any) => void
+    listRow: Array<string | object>,
+    desc: boolean,
+    title?: string
+    hide: (event: React.DOMAttributes<HTMLDivElement> | React.MouseEventHandler<HTMLDivElement> | undefined | any) => void
 
 
 }
 
-const Information: React.FunctionComponent<IInformationProps> = ({items, listRow, desc,title, hide}) => {
+const Information: React.FunctionComponent<IInformationProps> = ({ items, listRow, desc, title, hide }) => {
 
-    let [rowAnchorEl, setRowAnchorEl] = useState<number|null>(null);
+    let [rowAnchorEl, setRowAnchorEl] = useState<number | null>(null);
+
+    const renderHtml = (html: any) => {
+
+        return <div dangerouslySetInnerHTML={{ __html: html }} />;
+    }
 
-    
 
 
-    const  showRowDetails = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, idx:number) => {
+    const showRowDetails = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, idx: number) => {
         e && e.preventDefault();
-       
+
         if (rowAnchorEl === idx) {
-            rowAnchorEl =  null
+            rowAnchorEl = null
         } else {
             rowAnchorEl = idx
         }
@@ -32,33 +37,33 @@ const Information: React.FunctionComponent<IInformationProps> = ({items, listRow
         setRowAnchorEl(rowAnchorEl)
     }
 
-    
-    const View = () =>{
+
+    const View = () => {
         return <React.Fragment>
-        <div className="popover popover-i">
-
-            {
-                typeof desc != 'undefined' && desc ? (
-                    <div className="popover-i-content">
-                        <div className="popover-i-title">
-                            <h6>{title}</h6>
-                            <div className="popover-i-close" onClick={hide}></div>
-                        </div>
-                        <div>{typeof items != 'undefined' && items ? renderHtml(items) : ''}
+            <div className="em-popover-i">
+
+                {
+                    typeof desc != 'undefined' && desc ? (
+                        <div className="em-popover-i-content">
+                            <div className="em-popover-i-title">
+                                <h6>{title}</h6>
+                                <div className="em-popover-i-close" onClick={hide}></div>
+                            </div>
+                            <div>{typeof items != 'undefined' && items ? renderHtml(items) : ''}
+                            </div>
                         </div>
-                    </div>
-                ) : (
-                        <div className="popover-i-content">
-                            <div className="popover-i-title">
+                    ) : (
+                        <div className="em-popover-i-content">
+                            <div className="em-popover-i-title">
                                 <h6>{title}</h6>
-                                <div className="popover-i-close" onClick={hide}></div>
+                                <div className="em-popover-i-close" onClick={hide}></div>
                             </div>
                             {listRow ? (
                                 listRow.length >= 1 ? (
-                                    listRow.map((item:any, key) => (
+                                    listRow.map((item: any, key) => (
 
                                         <React.Fragment key={key}>
-                                            <div className="popover-i-category" onClick={(event) => showRowDetails(event, key)}>
+                                            <div className="em-popover-i-category" onClick={(event) => showRowDetails(event, key)}>
                                                 <div>
                                                     <h6>{item}</h6>
                                                 </div>
@@ -69,7 +74,7 @@ const Information: React.FunctionComponent<IInformationProps> = ({items, listRow
                                             </div>
                                             {
                                                 rowAnchorEl === key ? (
-                                                    <div className="popover-i-details">
+                                                    <div className="em-popover-i-details">
                                                         {item === 'COMPANY POLICY' ? (
                                                             typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
                                                             (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
@@ -90,13 +95,13 @@ const Information: React.FunctionComponent<IInformationProps> = ({items, listRow
                             }
                         </div>
                     )
-            }
-        </div>
-    </React.Fragment>
+                }
+            </div>
+        </React.Fragment>
     }
 
 
-  return View();
+    return View();
 };
 
 export default Information;

package/src/main/MenuBar.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../scss/style.scss';
-import '../scss/library/menubar.scss';
 interface IMenuBarProps {
     config?: any;
     info?: any;

package/src/main/MenuBar.js

@@ -50,7 +50,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable jsx-a11y/anchor-is-valid */
 var react_1 = __importStar(require("react"));
 require("../scss/style.scss");
-require("../scss/library/menubar.scss");
 // Imports
 var Asset_1 = require("./assets/Asset");
 var Constant_1 = require("./constants/Constant");
@@ -82,15 +81,16 @@ var MenuBar = function (_a) {
     var _s = (0, react_1.useState)(undoButton && undoButton.show ? true : false), undoShow = _s[0], setUndoShow = _s[1];
     var _t = (0, react_1.useState)(false), doneTimer = _t[0], setDoneTimer = _t[1];
     (0, react_1.useEffect)(function () {
+        var filteredMonthList = [];
         if (dropdown && dropdown.minMonth) {
-            var filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
+            filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
             if (filteredMonthList.length > 0) {
                 minMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMinMonthIdx(minMonthIdx);
             }
         }
         if (dropdown && dropdown.maxMonth) {
-            var filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
+            filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
             if (filteredMonthList.length > 0) {
                 maxMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMaxMonthIdx(maxMonthIdx);
@@ -352,6 +352,11 @@ var MenuBar = function (_a) {
     var dateMonthlyPickerHandler = function (e, action, data) {
         if (data === void 0) { data = ''; }
         var _a = __assign({}, dropdown), maxYear = _a.maxYear, minYear = _a.minYear;
+        var newDateValue = null;
+        var standardDate = null;
+        var selectedMonthDate = null;
+        var monthIdx = null;
+        var fullYear = null;
         if (action === 'next') {
             if (!maxYear || (maxYear && parseInt(maxYear) >= calendarYear + 1)) {
                 calendarYear += 1;
@@ -365,15 +370,14 @@ var MenuBar = function (_a) {
             }
         }
         else if (action === 'month-selection') {
-            var newDateValue = (0, DatetimeFormatter_1.default)(data + ' ' + calendarYear, 'month-year');
+            newDateValue = (0, DatetimeFormatter_1.default)(data + ' ' + calendarYear, 'month-year');
             actionRequestHandler(e, 'dropdown', newDateValue);
         }
         else if (action === 'next-month') {
-            var standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
-            var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-            var monthIdx = selectedMonthDate.getMonth();
-            var fullYear = selectedMonthDate.getFullYear();
+            standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx + 1 < 12) {
                 monthIdx = monthIdx + 1;
             }
@@ -382,16 +386,15 @@ var MenuBar = function (_a) {
                 fullYear = fullYear + 1;
             }
             if ((!maxYear && !maxMonthIdx) || fullYear < parseInt(maxYear) || (fullYear === parseInt(maxYear) && monthIdx <= parseInt(maxMonthIdx))) {
-                var newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
+                newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
                 actionRequestHandler(e, 'dropdown', newDateValue, false);
             }
         }
         else if (action === 'prev-month') {
-            var standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
-            var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-            var monthIdx = selectedMonthDate.getMonth();
-            var fullYear = selectedMonthDate.getFullYear();
+            standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx - 1 >= 0) {
                 monthIdx = monthIdx - 1;
             }
@@ -400,8 +403,8 @@ var MenuBar = function (_a) {
                 fullYear = fullYear - 1;
             }
             if ((!minYear && !minMonthIdx) || fullYear > parseInt(minYear) || (fullYear === parseInt(minYear) && monthIdx >= parseInt(minMonthIdx))) {
-                var newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
-                actionRequestHandler(e, 'dropdown', newDateValue, false);
+                var newDateValue_1 = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
+                actionRequestHandler(e, 'dropdown', newDateValue_1, false);
             }
         }
     };
@@ -478,9 +481,11 @@ var MenuBar = function (_a) {
                         config && config.titleDescription ? (react_1.default.createElement("p", null, config.titleDescription)) : null),
                     // Information Configuration
                     config && config.showInfo.constructor === Boolean && config.showInfo === true ? (react_1.default.createElement(react_1.Fragment, null,
-                        react_1.default.createElement("a", { href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, Asset_1.SVG_INFORMATION),
-                        react_1.default.createElement(Select_1.Popover, { id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } },
-                            react_1.default.createElement(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,
+                        react_1.default.createElement("div", { className: "em-belt-info" },
+                            react_1.default.createElement("a", { href: "#", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" },
+                                react_1.default.createElement("div", { className: "em-info-icon" }, Asset_1.SVG_INFORMATION)),
+                            react_1.default.createElement(Select_1.Popover, { id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } },
+                                react_1.default.createElement(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 ? (react_1.default.createElement("p", null, config.addedTitle)) : null),
                 react_1.default.createElement("div", { className: "em-beltleft-cta" },

package/src/main/MenuBar.tsx

@@ -1,9 +1,7 @@
 /* eslint-disable no-useless-concat */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState, Fragment, useEffect } from "react";
-
 import '../scss/style.scss';
-import '../scss/library/menubar.scss';
 
 // Imports
 import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN, SVG_INFORMATION } from './assets/Asset';
@@ -65,15 +63,16 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
     let [doneTimer, setDoneTimer] = useState<boolean>(false);
 
     useEffect(() => {
+        let filteredMonthList = []
         if (dropdown && dropdown.minMonth) {
-            let filteredMonthList = [...MONTH_LIST].filter(item => (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()));
+            filteredMonthList = [...MONTH_LIST].filter(item => (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()));
             if (filteredMonthList.length > 0) {
                 minMonthIdx = MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMinMonthIdx(minMonthIdx);
             }
         }
         if (dropdown && dropdown.maxMonth) {
-            let filteredMonthList = [...MONTH_LIST].filter(item => (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()));
+            filteredMonthList = [...MONTH_LIST].filter(item => (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()));
             if (filteredMonthList.length > 0) {
                 maxMonthIdx = MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMaxMonthIdx(maxMonthIdx);
@@ -380,6 +379,11 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
     let dateMonthlyPickerHandler = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent>, action: string, data: string = '') => {
         type opt = { maxYear: string; minYear: string; }
         let { maxYear, minYear }: opt = { ...dropdown }
+        let newDateValue = null;
+        let standardDate = null;
+        let selectedMonthDate=null;
+        let monthIdx = null;
+        let fullYear = null;
         if (action === 'next') {
             if (!maxYear || (maxYear && parseInt(maxYear) >= calendarYear + 1)) {
                 calendarYear += 1;
@@ -391,14 +395,13 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                 setCalendarYear(calendarYear)
             }
         } else if (action === 'month-selection') {
-            let newDateValue = datetimeFormatter(data + ' ' + calendarYear, 'month-year');
+            newDateValue = datetimeFormatter(data + ' ' + calendarYear, 'month-year');
             actionRequestHandler(e, 'dropdown', newDateValue);
         } else if (action === 'next-month') {
-            let standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
-            let selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-            let monthIdx = selectedMonthDate.getMonth();
-            let fullYear = selectedMonthDate.getFullYear();
+            standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx + 1 < 12) {
                 monthIdx = monthIdx + 1;
             } else {
@@ -406,16 +409,15 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                 fullYear = fullYear + 1;
             }
             if ((!maxYear && !maxMonthIdx) || fullYear < parseInt(maxYear) || (fullYear === parseInt(maxYear) && monthIdx <= parseInt(maxMonthIdx))) {
-                let newDateValue = datetimeFormatter(MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
+                newDateValue = datetimeFormatter(MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
                 actionRequestHandler(e, 'dropdown', newDateValue, false);
             }
         } else if (action === 'prev-month') {
-            let standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
-            let selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-
-            let monthIdx = selectedMonthDate.getMonth();
-            let fullYear = selectedMonthDate.getFullYear();
+            standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+           
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx - 1 >= 0) {
                 monthIdx = monthIdx - 1;
             } else {
@@ -567,26 +569,28 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
                             // Information Configuration
                             config && config.showInfo.constructor === Boolean && config.showInfo===true ? (
                                 <Fragment>
-                                    <a href="#" className="belt-info" onClick={event => popoverRequestHandler(event, 'info')}
-                                        data-testid="menubar-information">
-                                        {SVG_INFORMATION}
-                                    </a>
-                                    <Popover
-                                        id="InfoPopOver"
-                                        open={Boolean(infoPopover)}
-                                        className={Boolean(dropdownPopover) ? 'open-popover' : ''}
-                                        onClick={event => popoverRequestHandler(event, 'info')}
-                                    >
+                                    <div className="em-belt-info">
+                                        <a href="#"  onClick={event => popoverRequestHandler(event, 'info')}
+                                            data-testid="menubar-information">
+                                            <div className="em-info-icon">{SVG_INFORMATION}</div>
+                                        </a>
+                                        <Popover
+                                            id="InfoPopOver"
+                                            open={Boolean(infoPopover)}
+                                            className={Boolean(dropdownPopover) ? 'open-popover' : ''}
+                                            onClick={event => popoverRequestHandler(event, 'info')}
+                                        >
 
-                                        <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={event => popoverRequestHandler(event, 'info', true)}
-                                        />
+                                            <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={event => popoverRequestHandler(event, 'info', true)}
+                                            />
 
-                                    </Popover>
+                                        </Popover>
+                                    </div>
                                 </Fragment>
                             ) : null
                         }

package/src/main/Modal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import '../scss/style.scss';
 interface IModalProps {
     id?: string;
     show: boolean;

package/src/main/Modal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var MenuBar_1 = __importDefault(require("./MenuBar"));
+require("../scss/style.scss");
 var Modal = function (_a) {
     var id = _a.id, show = _a.show, hideMenuBar = _a.hideMenuBar, config = _a.config, getActions = _a.getActions, children = _a.children, button = _a.button, dropdown = _a.dropdown, search = _a.search, pagination = _a.pagination, pivot = _a.pivot, check = _a.check, toggle = _a.toggle, undoButton = _a.undoButton, mainButton = _a.mainButton, buttonFooter = _a.buttonFooter, info = _a.info, customClass = _a.customClass;
     var sendActions = function (actions, data) {
@@ -15,10 +16,9 @@ var Modal = function (_a) {
         if (addedParam === void 0) { addedParam = null; }
         return getActions ? getActions(action, data, addedParam) : false;
     };
-    console.log(hideMenuBar, 'hideMenuBar');
-    return (show ? react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "e-modal" },
-        react_1.default.createElement("div", { className: "e-modal-container", "data-testid": id ? id : 'default-modal-test' },
-            react_1.default.createElement("div", { className: "card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, !hideMenuBar ? (react_1.default.createElement(MenuBar_1.default, { 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); } },
-                react_1.default.createElement("div", { className: "card-content" }, children))) : react_1.default.createElement("div", { className: "card-content" }, children)))), document.getElementById('root')) : null);
+    return (show ? react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "em-modal " + customClass },
+        react_1.default.createElement("div", { className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' },
+            react_1.default.createElement("div", { className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, !hideMenuBar ? (react_1.default.createElement(MenuBar_1.default, { 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); } },
+                react_1.default.createElement("div", { className: "em-card-content" }, children))) : react_1.default.createElement("div", { className: "em-card-content card-content" }, children)))), document.getElementById('root')) : null);
 };
 exports.default = Modal;

package/src/main/Modal.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import MenuBar from "./MenuBar";
+import '../scss/style.scss';
+
 
 interface IModalProps {
     id?:string,
@@ -45,16 +47,11 @@ const Modal: React.FunctionComponent<IModalProps> = ({id, show,hideMenuBar, conf
         return getActions ? getActions(action, data, addedParam) : false;
     }
 
-
-    console.log(hideMenuBar, 'hideMenuBar')
-   
-
-
     return (
         show ? ReactDOM.createPortal(
-            <div className="e-modal">
-                <div className="e-modal-container" data-testid={id ? id : 'default-modal-test'}>
-                     <div className={`card card-modal modal-${config.modalSize ? config.modalSize :   'md'}`}>
+            <div className={"em-modal "+ customClass }>
+                <div className="em-modal-container" data-testid={id ? id : 'default-modal-test'}>
+                     <div className={`em-card card-modal modal-${config.modalSize ? config.modalSize :   'md'}`}>
                         {
                             !hideMenuBar ? (
                                 <MenuBar 
@@ -71,9 +68,9 @@ const Modal: React.FunctionComponent<IModalProps> = ({id, show,hideMenuBar, conf
                                     info={info}
                                     getActions={(actions:any,data:any) => sendActions(actions,data)}
                                 >
-                                    <div className="card-content">{ children }</div>
+                                    <div className="em-card-content">{ children }</div>
                                 </MenuBar>
-                            ) : <div className="card-content">{ children }</div>
+                            ) : <div className="em-card-content card-content">{ children }</div>
                         }
                     </div>
                 </div>

package/src/main/assets/Asset.js

@@ -42,6 +42,6 @@ exports.SVG_ADD = react_1.default.createElement("svg", { width: "20", height: "2
     react_1.default.createElement("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" }),
     react_1.default.createElement("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" }));
 exports.SVG_INFORMATION = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z", fill: "#393F5A" }),
-    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z", fill: "#393F5A" }),
-    react_1.default.createElement("path", { d: "M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z", fill: "#393F5A" }));
+    react_1.default.createElement("rect", { x: "1", y: "1", width: "18", height: "18", rx: "9", stroke: "#9FA5B7", strokeWidth: "2" }),
+    react_1.default.createElement("path", { d: "M10 9V14", stroke: "#9FA5B7", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("circle", { cx: "10", cy: "6", r: "1", fill: "#9FA5B7" }));

package/src/main/assets/Asset.tsx

@@ -68,8 +68,8 @@ export const SVG_ADD = <svg width="20" height="20" viewBox="0 0 20 20" fill="non
 
 
 export const SVG_INFORMATION = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z" fill="#393F5A" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z" fill="#393F5A" />
-    <path d="M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z" fill="#393F5A" />
+    <rect x="1" y="1" width="18" height="18" rx="9" stroke="#9FA5B7" strokeWidth="2"/>
+    <path d="M10 9V14" stroke="#9FA5B7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <circle cx="10" cy="6" r="1" fill="#9FA5B7"/>
 </svg>
 

package/src/main/inputs/Input.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../../scss/style.scss';
-import '../../scss/library/input.scss';
 interface IProps {
     config: {
         id: string | keyof Object;

package/src/main/inputs/Input.js

@@ -36,7 +36,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 require("../../scss/style.scss");
-require("../../scss/library/input.scss");
 var sanitizeValue = function (txt, props) {
     var pattern = null;
     var newTxt = txt;

package/src/main/inputs/Input.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment } from "react";
 import '../../scss/style.scss';
-import '../../scss/library/input.scss';
 
 
 interface IProps {

package/src/main/inputs/Select.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../../scss/style.scss';
-import '../../scss/library/select.scss';
 interface IPropsPopover {
     id: String;
     className: String;

package/src/main/inputs/Select.js

@@ -46,7 +46,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 var react_1 = __importStar(require("react"));
 require("../../scss/style.scss");
-require("../../scss/library/select.scss");
 // Imports
 var Asset_1 = require("../assets/Asset");
 var Popover = function (_a) {
@@ -223,9 +222,10 @@ var Dropdown = function (_a) {
     * @param {*} values - selected values of multi-select
     */
     function filterOptions(search, values) {
+        var selectedOptionsVariable = null;
         if (type === 'multi-select') {
             if (optionsArray && optionsArray.constructor === Array) {
-                var selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (options && options.constructor === Array && options.length > 0) {
                     optionsArray = options.filter(function (item) {
                         return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
@@ -238,7 +238,7 @@ var Dropdown = function (_a) {
             }
             else if (optionsArray && optionsArray.constructor === Object) {
                 var optionsArrayCopy_1 = {};
-                var selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (selectedOptionsVariable.length > 0) {
                     selectedOptionsVariable = selectedOptionsVariable.filter(function (item) {
                         return item.label.toLowerCase().search(search.toLowerCase()) > -1;

package/src/main/inputs/Select.tsx

@@ -1,6 +1,5 @@
 import React, { useState, Fragment } from "react";
 import '../../scss/style.scss';
-import '../../scss/library/select.scss';
 
 // Imports
 import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN } from '../assets/Asset';
@@ -253,9 +252,10 @@ const Dropdown: React.FC<IPropsDropDown> = ({ config, customClass, onChanged, is
     * @param {*} values - selected values of multi-select
     */
     function filterOptions(search: string, values: any) {
+        let selectedOptionsVariable = null;
         if (type === 'multi-select') {
             if (optionsArray && optionsArray.constructor === Array) {
-                let selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (options && options.constructor===Array && options.length > 0) {
                     optionsArray = options.filter((item:any) => {
                         return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
@@ -268,7 +268,7 @@ const Dropdown: React.FC<IPropsDropDown> = ({ config, customClass, onChanged, is
                 setOptionsArray([...values, ...optionsArray]);
             } else if (optionsArray && optionsArray.constructor === Object) {
                 let optionsArrayCopy:{[index: string]:any} = {};
-                let selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (selectedOptionsVariable.length > 0) {
                     selectedOptionsVariable = selectedOptionsVariable.filter((item:any) => {
                         return item.label.toLowerCase().search(search.toLowerCase()) > -1;

package/src/main/tsconfig.common.json

@@ -21,6 +21,7 @@
       "suppressImplicitAnyIndexErrors": true,
       "jsx": "react-jsx",
       "outDir": "../../dist/cjs",
+      
     
    
    

package/src/main/tsconfig.json

@@ -12,7 +12,7 @@
       "skipLibCheck": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
-      "strict": false,
+      "strict": true,
       "forceConsistentCasingInFileNames": true,
       "noFallthroughCasesInSwitch": true,
       "declaration": true,
@@ -21,6 +21,7 @@
       "suppressImplicitAnyIndexErrors": true,
       "jsx": "react-jsx",
       "outDir": "../../dist/esm",
+      
      }
      
    

package/src/sample/App.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import './App.css';
 declare function App(): JSX.Element;
 export default App;

package/src/sample/App.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-require("./App.css");
+// import './App.css';
 var TestMenuBar_1 = __importDefault(require("./TestMenuBar"));
 function App() {
     return (react_1.default.createElement("div", { className: "App" },