@dilicorp/ui 0.2.31 → 0.2.33

package/dist/components/layout/authenticated-layout/authenticated-layout.js

@@ -2,7 +2,10 @@ import React from 'react';
 import { SideNavigationBar } from '../../side-navigation-bar/side-navigation-bar';
 import { Navbar } from '../../navbar/navbar';
 import { PluxeeLogo } from '../pluxee-logo/pluxee-logo';
-export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown }) => {
+export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown, logout = {
+    label: 'logout',
+    href: '/logout'
+} }) => {
     return (React.createElement("div", { className: "hv-md-100" },
         React.createElement("header", { className: "main-header" },
             React.createElement("div", { className: "logo-container" },
@@ -17,11 +20,8 @@ export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown })
             React.createElement("div", { className: "nav-container" },
                 React.createElement(Navbar, { showUserIcon: false, dropdown: dropdown, items: navItems }))),
         React.createElement("main", { className: "d-flex" },
-            React.createElement("div", null,
-                React.createElement(SideNavigationBar, { active: false, items: menuItems, logout: {
-                        label: 'logout',
-                        href: '/logout'
-                    } })),
+            React.createElement("div", { style: { minHeight: '100%' } },
+                React.createElement(SideNavigationBar, { active: false, items: menuItems, logout: logout })),
             React.createElement("div", { className: "w-100 overflow-y-auto" }, children))));
 };
 AuthenticatedLayout.displayName = 'AuthenticatedLayout';

package/dist/components/layout/layout.d.ts

@@ -5,6 +5,10 @@ export declare const Layout: {
         menuItems: import("../side-navigation-bar/side-navigation-bar-item").SideNavigationBarItemProps[];
         navItems?: import("react").ReactNode[] | undefined;
         dropdown: import("../..").DropdownProps;
+        logout?: {
+            href: string;
+            label: string;
+        } | undefined;
     }>;
     Content: {
         ({ children }: {

package/dist/components/layout/pluxee-logo/pluxee-logo-card.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type PluxeeLogoCardProps = {
+    width?: number;
+    height?: number;
+};
+export declare const PluxeeLogoCard: ({ width, height }: PluxeeLogoCardProps) => JSX.Element;
+export {};
+//# sourceMappingURL=pluxee-logo-card.d.ts.map

package/dist/components/layout/pluxee-logo/pluxee-logo-card.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export const PluxeeLogoCard = ({ width = 172, height = 48 }) => {
+    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 172 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { clipPath: "url(#clip0_17957_81019)" },
+            React.createElement("path", { d: "M157.187 16.4385C161.107 16.4385 162.689 19.1251 162.689 20.9716H151.686C151.686 19.1032 153.285 16.4385 157.187 16.4385ZM161.803 29.2628C161.071 30.6645 159.394 31.6128 157.228 31.6128C153.138 31.6128 151.521 28.7401 151.477 26.1813H171.795C171.852 25.821 172.001 24.7979 172.001 23.9999C172.001 14.9633 165.688 9.86133 157.156 9.86133C148.162 9.86133 141.872 14.9633 141.872 23.9999C141.872 33.1034 148.161 38.1387 157.209 38.1387C166.105 38.1387 170.285 33.3133 171.401 29.2628H161.803Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M15.624 30.0179C11.9753 30.0179 9.38446 27.442 9.38446 24.022C9.38446 20.7614 11.8177 18.0262 15.624 18.0262C19.431 18.0262 21.8628 20.7773 21.8628 24.022C21.8628 27.3177 19.3978 30.0179 15.624 30.0179ZM18.3541 10.1328C14.351 10.1328 10.9168 11.8721 9.14561 13.9163L9.13974 10.6659H0V47.9994H9.42205V34.6326C11.6321 36.9761 14.7101 37.8662 17.8223 37.8662C27.1561 37.8662 31.4857 30.9182 31.4857 23.9992C31.4857 15.4604 25.9245 10.1328 18.3541 10.1328Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M44.0499 0H34.5894V37.3333H44.0499V0Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M66.8777 10.666V24.5329C66.8777 26.6348 66.584 27.656 65.7098 28.6748C64.865 29.6593 63.5398 30.1235 62.0706 30.1235C60.6024 30.1235 59.2749 29.6593 58.4297 28.6748C57.5556 27.656 57.2635 26.6348 57.2635 24.5329V10.666H47.8384L47.8396 25.3569C47.8396 29.487 48.4808 32.1826 50.4937 34.4736C52.6229 36.8967 55.8749 37.8602 59.0589 37.8602C62.7884 37.8602 65.3717 36.4799 67.1572 34.4477L67.1632 37.3328H76.3028V10.666H66.8777Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M107.03 10.666H100.589L93.4917 17.7815L86.394 10.666H79.9536V17.0092L87.1784 23.9994L79.9538 30.9897V37.3329H86.3942L93.4917 30.2175L100.589 37.3329H107.03V30.9897L99.8051 23.9994L107.03 17.0092V10.666Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M124.436 16.4385C128.355 16.4385 129.937 19.1251 129.937 20.9716H118.934C118.934 19.1032 120.534 16.4385 124.436 16.4385ZM129.051 29.2628C128.319 30.6645 126.642 31.6128 124.476 31.6128C120.386 31.6128 118.769 28.7401 118.726 26.1813H139.043C139.1 25.821 139.25 24.7979 139.25 23.9999C139.25 14.9633 132.937 9.86133 124.404 9.86133C115.41 9.86133 109.12 14.9633 109.12 23.9999C109.12 33.1034 115.41 38.1387 124.457 38.1387C133.354 38.1387 137.533 33.3133 138.649 29.2628H129.051Z", fill: "#221C46" })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: "clip0_17957_81019" },
+                React.createElement("rect", { width: "172", height: "48", fill: "white" })))));
+};

package/dist/components/page-create/page-create.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormBuilderGroup } from '../form-builder/form-builder.types';
 import { DropdownItemProps } from '../../molecules/dropdown/dropdown-item';
-import { ModalProps } from '../modal/modal';
+import { ModalProps } from '../../molecules/modal/modal';
 import { FormikHelpers } from 'formik';
 declare type ExtraButtons = {
     label: string;

package/dist/components/page-create/page-create.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from '../modal/modal';
+import { Modal } from '../../molecules/modal/modal';
 import { Button, Col, Dropdown, FormBuilder, Icon, Link, Row, Typography } from '../../';
 export const PageCreate = (props) => {
     const { title, extraButtons = [], cancelButton, onSubmit, data, modal } = props;

package/dist/components/page-list/page-list.js

@@ -23,8 +23,12 @@ export const PageList = (props) => {
         return (React.createElement("div", { className: "my-5" },
             React.createElement(Spinner, null)));
     }
+    const showTitleContainer = Boolean(title) ||
+        Boolean(extraButtonsInline.length) ||
+        Boolean(addButton) ||
+        Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Row, { className: "page-title-container mb-3" },
+        showTitleContainer && (React.createElement(Row, { className: "page-title-container mb-3" },
             title && (React.createElement(Col, { className: "d-flex align-items-center" },
                 React.createElement(Typography, { className: "mb-0", variant: "h4", tag: "h1" }, title))),
             React.createElement(Col, { className: "ms-auto" },
@@ -36,7 +40,7 @@ export const PageList = (props) => {
                     Boolean(addButton) && (React.createElement(Button, { tag: Link, href: addButton === null || addButton === void 0 ? void 0 : addButton.uri }, addButton === null || addButton === void 0 ? void 0 :
                         addButton.label,
                         React.createElement(Icon, { icon: "fa-plus", pluxee: true, className: "ms-1" }))),
-                    Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length) && (React.createElement(Dropdown, { outline: true, color: "primary", align: "right", label: Array.isArray(extraButtons) ? React.createElement(Icon, { icon: "faEllipsisH" }) : extraButtons.label, items: Array.isArray(extraButtons) ? extraButtons : extraButtons.items }))))),
+                    Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length) && (React.createElement(Dropdown, { outline: true, color: "primary", align: "right", label: Array.isArray(extraButtons) ? React.createElement(Icon, { icon: "faEllipsisH" }) : extraButtons.label, items: Array.isArray(extraButtons) ? extraButtons : extraButtons.items })))))),
         !!customizeFilter && customizeFilter,
         !customizeFilter && filterList && (React.createElement(PageListGetFilters, { filterList: filterList, search: search, filter: filter, key: JSON.stringify(history) }, configList)),
         React.createElement("div", null, restList),

package/dist/components/side-navigation-bar/side-navigation-bar-item.d.ts

@@ -8,6 +8,7 @@ export declare type SideNavigationBarItemProps = LinkProps & {
     items?: SideNavigationBarItemProps[];
     dataLink?: boolean;
     pathname?: string;
+    iconSize?: 'lg' | 'md' | 'sm';
 };
 export declare const SideNavigationBarItem: React.FC<SideNavigationBarItemProps>;
 //# sourceMappingURL=side-navigation-bar-item.d.ts.map

package/dist/components/side-navigation-bar/side-navigation-bar-item.js

@@ -12,27 +12,52 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useState } from 'react';
 import { Icon } from '../../atoms/icon';
 import { Link } from '../../index';
-const InnerItem = ({ icon, pluxee, label, dataLink }) => {
+const InnerItem = ({ icon, iconSize = 'md', pluxee, label, dataLink }) => {
     return (React.createElement(React.Fragment, null,
-        icon && React.createElement(Icon, { icon: icon, pluxee: pluxee }),
-        React.createElement("span", { className: "link-name", "data-link": `${dataLink ? 'link' : 'container'}` }, label)));
+        icon && React.createElement(Icon, { title: label, icon: icon, pluxee: pluxee, size: iconSize }),
+        React.createElement("span", { title: label, style: Object.assign({}, (iconSize === 'sm' && { fontSize: 12 })), className: "link-name", "data-link": `${dataLink ? 'link' : 'container'}` }, label)));
 };
 export const SideNavigationBarItem = (props) => {
     var _a;
+    const [submenuOpen, setSubmenuOpen] = useState(false);
     const { className = '', items, index, pathname = '' } = props, attrs = __rest(props, ["className", "items", "index", "pathname"]);
-    const [active, setActive] = useState(false);
-    const sanitizedHref = (attrs === null || attrs === void 0 ? void 0 : attrs.href) ? (_a = attrs === null || attrs === void 0 ? void 0 : attrs.href) === null || _a === void 0 ? void 0 : _a.split('?')[0] : '';
-    const isHomePage = (sanitizedHref === '/' && pathname === '/');
-    const isPathActive = sanitizedHref && sanitizedHref !== '/' && pathname.includes(sanitizedHref);
-    const activeClass = isHomePage || isPathActive ? ' active' : '';
-    return (React.createElement("li", { className: `${className}${activeClass}` }, items
+    const sanitizedHref = ((attrs === null || attrs === void 0 ? void 0 : attrs.href) ? (_a = attrs === null || attrs === void 0 ? void 0 : attrs.href) === null || _a === void 0 ? void 0 : _a.split('?')[0] : '/').split('/')[1];
+    const sanitizedPath = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')[1];
+    const isHomePage = ((attrs === null || attrs === void 0 ? void 0 : attrs.href) === '/' && pathname === '/');
+    const isPathActive = sanitizedHref && (sanitizedPath === null || sanitizedPath === void 0 ? void 0 : sanitizedPath.includes(sanitizedHref));
+    const activeClass = (isHomePage || isPathActive) ? ' active' : '';
+    const itemclass = items && items.length > 0 ? ' submenu-li' : ' link-li';
+    const submenuActive = items && items.some(item => {
+        var _a, _b;
+        const linkpath = ((item === null || item === void 0 ? void 0 : item.href) ? (_a = item === null || item === void 0 ? void 0 : item.href) === null || _a === void 0 ? void 0 : _a.split('?')[0] : '/').split('/').slice(-1)[0];
+        return (_b = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')) === null || _b === void 0 ? void 0 : _b.some(sub => sub === linkpath);
+    })
+        ? ' active'
+        : '';
+    const handleSubmenuClick = () => {
+        const sidebar = document.querySelector('.sidebar');
+        if (!sidebar.className.includes('active') && !sidebar.className.includes('mobile')) {
+            const btn = document.querySelector('.btn-sidebar');
+            btn === null || btn === void 0 ? void 0 : btn.click();
+            setSubmenuOpen(true);
+            return;
+        }
+        setSubmenuOpen(prev => !prev);
+    };
+    return (React.createElement("li", { className: `${className}${activeClass}${itemclass}${submenuActive}` }, items
         ? React.createElement("div", { className: "sub-menu-container" },
-            React.createElement("div", { className: "sub-menu", onClick: () => setActive(prev => !prev) },
+            React.createElement("div", { onClick: handleSubmenuClick, className: `sub-menu${submenuOpen ? ' open' : ''}` },
                 React.createElement("div", null,
                     React.createElement(InnerItem, Object.assign({}, props))),
-                React.createElement(Icon, { icon: "fa-angle-down" })),
-            active && React.createElement("div", null,
-                React.createElement("ul", { className: "sub-menu-list" }, items.map((item, i) => (React.createElement(SideNavigationBarItem, Object.assign({ key: `side-navigation-bar-item-${index}-${i}` }, Object.assign(Object.assign({}, item), { index: i }))))))))
+                React.createElement(Icon, { pluxee: true, icon: "fa-chevron-down" })),
+            items && React.createElement(React.Fragment, null,
+                React.createElement("ul", { className: "sub-menu-list" }, items.map((item, i) => {
+                    var _a, _b;
+                    const lastpath = (_a = pathname === null || pathname === void 0 ? void 0 : pathname.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
+                    const linkpath = ((item === null || item === void 0 ? void 0 : item.href) ? (_b = item === null || item === void 0 ? void 0 : item.href) === null || _b === void 0 ? void 0 : _b.split('?')[0] : '/').split('/').slice(-1)[0];
+                    const itemclass = lastpath === linkpath ? 'active' : '';
+                    return (React.createElement(SideNavigationBarItem, Object.assign({ key: `side-navigation-bar-item-${index}-${i}`, iconSize: "sm", pathname: pathname, className: itemclass }, Object.assign(Object.assign({}, item), { index: i }), { icon: "fa-circle", pluxee: true })));
+                }))))
         : React.createElement(Link, Object.assign({}, attrs),
             React.createElement(InnerItem, Object.assign({}, props, { dataLink: true })))));
 };

package/dist/components/side-navigation-bar/side-navigation-bar.js

@@ -7,11 +7,11 @@ import { useLocation } from 'react-router-dom';
 const STORAGE_NAME = 'SIDEBAR_ACTIVE';
 export const SideNavigationBar = memo((props) => {
     const { logout, items = [], active = true, menuLabel = 'Menu' } = props;
+    const navlist = useRef(null);
+    const { pathname, search } = useLocation();
     const activeStorage = storageHelper.get(STORAGE_NAME);
     const showActive = activeStorage ? activeStorage === '1' : active;
     storageHelper.set(STORAGE_NAME, showActive ? '1' : '0');
-    const navlist = useRef(null);
-    const { pathname, search } = useLocation();
     const uri = `${pathname}${search}`;
     useEffect(() => {
         const btnMobile = document.querySelector('.btn-sidebar-mobile');