empower-container 0.1.2 → 0.1.5

package/src/main/DatetimeFormatter.tsx

@@ -137,6 +137,8 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                         newFormat = dayName + ", " + dayDate + " " + monthName + " " + year;
                         break;
                     case "momentsAgo":
+                        let diff = 0;
+                        let diffMinute = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -144,7 +146,7 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                             } else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    let diff = todayTS - dateTS;
+                                    diff = todayTS - dateTS;
                                     if (diff === 0) {
                                         newFormat = "An hour ago";
                                     }
@@ -154,11 +156,11 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                                 } else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        let diff = todayTS - dateTS;
+                                        diff = todayTS - dateTS;
                                         if (diff === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        let diffMinute = diff / 60;
+                                        diffMinute = diff / 60;
                                         diffMinute = ~~diffMinute
                                         newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
                                     } else {
@@ -177,6 +179,7 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
 
                         break;
                     case "momentsAgoConvo":
+                        let diffHour = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -188,7 +191,7 @@ const datetimeFormatter = (timestamp: string | Date | any, format: string = "dat
                                     if (diff === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    let diffHour = diff / 3600;
+                                    diffHour = diff / 3600;
                                     diffHour = ~~diffHour
                                     newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
                                 } else {

package/src/main/Information.js

@@ -22,16 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-// @ts-ignore
-var react_render_html_1 = __importDefault(require("react-render-html"));
 var Information = function (_a) {
     var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
     var _b = (0, react_1.useState)(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
+    var renderHtml = function (html) {
+        return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
+    };
     var showRowDetails = function (e, idx) {
         e && e.preventDefault();
         if (rowAnchorEl === idx) {
@@ -44,22 +42,22 @@ var Information = function (_a) {
     };
     var View = function () {
         return react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "popover popover-i" }, typeof desc != 'undefined' && desc ? (react_1.default.createElement("div", { className: "popover-i-content" },
-                react_1.default.createElement("div", { className: "popover-i-title" },
+            react_1.default.createElement("div", { className: "em-popover-i" }, typeof desc != 'undefined' && desc ? (react_1.default.createElement("div", { className: "em-popover-i-content" },
+                react_1.default.createElement("div", { className: "em-popover-i-title" },
                     react_1.default.createElement("h6", null, title),
-                    react_1.default.createElement("div", { className: "popover-i-close", onClick: hide })),
-                react_1.default.createElement("div", null, typeof items != 'undefined' && items ? (0, react_render_html_1.default)(items) : ''))) : (react_1.default.createElement("div", { className: "popover-i-content" },
-                react_1.default.createElement("div", { className: "popover-i-title" },
+                    react_1.default.createElement("div", { className: "em-popover-i-close", onClick: hide })),
+                react_1.default.createElement("div", null, typeof items != 'undefined' && items ? renderHtml(items) : ''))) : (react_1.default.createElement("div", { className: "em-popover-i-content" },
+                react_1.default.createElement("div", { className: "em-popover-i-title" },
                     react_1.default.createElement("h6", null, title),
-                    react_1.default.createElement("div", { className: "popover-i-close", onClick: hide })),
+                    react_1.default.createElement("div", { className: "em-popover-i-close", onClick: hide })),
                 listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (react_1.default.createElement(react_1.default.Fragment, { key: key },
-                    react_1.default.createElement("div", { className: "popover-i-category", onClick: function (event) { return showRowDetails(event, key); } },
+                    react_1.default.createElement("div", { className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } },
                         react_1.default.createElement("div", null,
                             react_1.default.createElement("h6", null, item)),
                         rowAnchorEl === key ? (react_1.default.createElement("img", { src: "/images/icons/icon-arrowup-gray.svg", alt: "" })) : (react_1.default.createElement("img", { src: "/images/icons/icon-arrowdown-gray.svg", alt: "" }))),
-                    rowAnchorEl === key ? (react_1.default.createElement("div", { className: "popover-i-details" }, item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? (0, react_render_html_1.default)(items.companyPolicy) : '') :
-                        (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? (0, react_render_html_1.default)(items.systemPolicy) : '') :
-                            (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? (0, react_render_html_1.default)(items.instruction) : '')))) : null)); })) : null) : null))));
+                    rowAnchorEl === key ? (react_1.default.createElement("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) : '') :
+                            (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')))) : null)); })) : null) : null))));
     };
     return View();
 };

package/src/main/Information.tsx

@@ -1,31 +1,35 @@
 
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 // @ts-ignore
-import renderHtml from 'react-render-html';
+// 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
         }
@@ -33,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>
@@ -70,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) : '') :
@@ -91,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);
             }
         }
     };
@@ -477,11 +480,12 @@ var MenuBar = function (_a) {
                         // Title Information Configuration
                         config && config.titleDescription ? (react_1.default.createElement("p", null, config.titleDescription)) : null),
                     // Information Configuration
-                    config && config.nativePopover === undefined && config.showInfo && config.showInfo.constructor === Boolean ? (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" },
-                            react_1.default.createElement("i", { className: "belt-icon" })),
-                        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,
+                    config && config.showInfo.constructor === Boolean && config.showInfo === true ? (react_1.default.createElement(react_1.Fragment, 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,12 +1,10 @@
 /* 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 } from './assets/Asset';
+import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN, SVG_INFORMATION } from './assets/Asset';
 import { CHECKBOX, MONTH_LIST, INFO_LOADER, PAGE_OPTION } from "./constants/Constant";
 import Information from './Information';
 import Input from './inputs/InputSelectionHandler';
@@ -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 {
@@ -565,28 +567,30 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
 
                         {
                             // Information Configuration
-                            config && config.nativePopover === undefined && config.showInfo && config.showInfo.constructor === Boolean ? (
+                            config && config.showInfo.constructor === Boolean && config.showInfo===true ? (
                                 <Fragment>
-                                    <a href="#" className="belt-info" onClick={event => popoverRequestHandler(event, 'info')}
-                                        data-testid="menubar-information">
-                                        <i className="belt-icon"></i>
-                                    </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.d.ts

@@ -12,3 +12,4 @@ export declare const SVG_ARROWLEFT: JSX.Element;
 export declare const SVG_ARROWDOWN: JSX.Element;
 export declare const SVG_REQUEST: JSX.Element;
 export declare const SVG_ADD: JSX.Element;
+export declare const SVG_INFORMATION: JSX.Element;

package/src/main/assets/Asset.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVG_ADD = exports.SVG_REQUEST = 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;
+exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = 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;
 var react_1 = __importDefault(require("react"));
 exports.SVG_BACK = 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: "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" }),
@@ -41,3 +41,7 @@ exports.SVG_REQUEST = react_1.default.createElement("svg", { width: "20", height
 exports.SVG_ADD = 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: "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("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

@@ -64,3 +64,12 @@ export const SVG_ADD = <svg width="20" height="20" viewBox="0 0 20 20" fill="non
     <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"/>
     <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"/>
 </svg>
+
+
+
+export const SVG_INFORMATION = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <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;