@uxf/cms 11.74.0 → 11.74.2

package/lib/layout/breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+export interface BreadcrumbItemProps {
+    href?: string;
+    title: string;
+}
+export type BreadcrumbsProps = {
+    items: BreadcrumbItemProps[];
+};
+export declare const Breadcrumbs: FC<BreadcrumbsProps>;

package/lib/layout/breadcrumbs.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = void 0;
+const hide_1 = require("@uxf/core-react/components/hide");
+const icon_1 = require("@uxf/ui/icon");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const Breadcrumbs = (props) => {
+    if (props.items.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "uxf-cms-breadcrumbs" }, props.items.map((item, index) => (react_1.default.createElement("span", { className: "uxf-cms-breadcrumbs__item", key: index },
+        react_1.default.createElement(hide_1.Hide, { when: index === 0 },
+            react_1.default.createElement(icon_1.Icon, { className: "uxf-cms-breadcrumbs__divide-icon", name: "angleRight", size: 16 })),
+        item.href ? (react_1.default.createElement(link_1.default, { className: "uxf-cms-breadcrumbs__link", href: item.href },
+            react_1.default.createElement("span", null, item.title))) : (react_1.default.createElement("span", null, item.title)))))));
+};
+exports.Breadcrumbs = Breadcrumbs;

package/lib/layout/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./breadcrumbs";
+export * from "./layout";
+export * from "./types";

package/lib/layout/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./breadcrumbs"), exports);
+__exportStar(require("./layout"), exports);
+__exportStar(require("./types"), exports);

package/lib/layout/layout-container.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from "react";
+import { LayoutContainerProps } from "./types";
+export declare const LayoutContainer: FC<PropsWithChildren<LayoutContainerProps>>;

package/lib/layout/layout-container.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const maxWidthClassName = {
+    narrow: "uxf-cms-layout__container--narrow",
+    wide: "uxf-cms-layout__container--wide",
+    fullWidth: "",
+    none: "",
+};
+const LayoutContainer = (props) => {
+    var _a, _b;
+    const type = (_a = props.type) !== null && _a !== void 0 ? _a : "fullWidth";
+    if (type === "none") {
+        return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+    }
+    return (react_1.default.createElement("div", { className: `${maxWidthClassName[type]} uxf-cms-layout__container ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
+};
+exports.LayoutContainer = LayoutContainer;

package/lib/layout/layout.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { LayoutProps } from "./types";
+export declare const Layout: FC<LayoutProps>;

package/lib/layout/layout.js

@@ -0,0 +1,47 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+const rem_1 = require("@uxf/styles/units/rem");
+const loader_1 = require("@uxf/ui/loader/loader");
+const head_1 = __importDefault(require("next/head"));
+const react_1 = __importDefault(require("react"));
+const breadcrumbs_1 = require("./breadcrumbs");
+const layout_container_1 = require("./layout-container");
+const sidebar_1 = require("./sidebar");
+const styles_1 = require("./styles");
+const Layout = (props) => {
+    var _a, _b;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(head_1.default, null,
+            react_1.default.createElement("meta", { content: "width=device-width, initial-scale=1", name: "viewport" }),
+            react_1.default.createElement("meta", { charSet: "utf-8" }),
+            react_1.default.createElement("title", null, `${props.title} | ${props.appName}`)),
+        react_1.default.createElement("div", { className: "uxf-cms-layout" },
+            react_1.default.createElement("div", { className: "uxf-cms-layout__wrapper" },
+                react_1.default.createElement(sidebar_1.Sidebar, { Logo: props.Logo, menuConfiguration: props.menuConfiguration }),
+                react_1.default.createElement("main", { className: `uxf-cms-layout__main ${(_a = props.mainClassName) !== null && _a !== void 0 ? _a : ""}`, style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
+                    props.loading ? (react_1.default.createElement("div", { className: "uxf-cms-layout__loading" },
+                        react_1.default.createElement("div", { className: "uxf-cms-layout__loading-inner" },
+                            react_1.default.createElement(loader_1.Loader, null),
+                            react_1.default.createElement("p", { className: "uxf-cms-layout__loading-text" }, "Na\u010D\u00EDt\u00E1m\u2026")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        props.CustomHeader ? (props.CustomHeader) : (react_1.default.createElement("div", { className: `${props.Header ? "uxf-cms-layout__header" : ""} ${props.stickyHeader ? "uxf-cms-layout__header--sticky" : ""}` },
+                            props.ToolbarRight && (react_1.default.createElement("div", { className: "uxf-cms-layout__toolbar" }, props.ToolbarRight)),
+                            props.MessageBar,
+                            react_1.default.createElement(layout_container_1.LayoutContainer, { className: "uxf-cms-layout__container--basic", type: (_b = props.headerContainerType) !== null && _b !== void 0 ? _b : props.containerType },
+                                react_1.default.createElement("div", { className: "uxf-cms-layout__avatar-title-wrapper" },
+                                    props.Avatar,
+                                    react_1.default.createElement("div", { className: "uxf-cms-layout__breadcrumbs-title-wrapper" },
+                                        props.breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: props.breadcrumbs }),
+                                        react_1.default.createElement("div", { className: "uxf-cms-layout__title-wrapper" },
+                                            react_1.default.createElement("h1", { className: "uxf-cms-layout__title" }, props.title),
+                                            props.TitleRightContainer),
+                                        props.subtitle,
+                                        props.Header))))),
+                        react_1.default.createElement(layout_container_1.LayoutContainer, { type: props.containerType }, props.children))),
+                    props.FooterBar)))));
+};
+exports.Layout = Layout;

package/lib/layout/sidebar.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { SidebarProps } from "./types";
+export declare const Sidebar: FC<SidebarProps>;

package/lib/layout/sidebar.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const rem_1 = require("@uxf/styles/units/rem");
+const react_1 = __importStar(require("react"));
+const tw_screens_1 = require("../../ui/tw-tokens/tw-screens");
+const menu_1 = require("../menu");
+const mobile_bar_1 = require("../menu/mobile-bar");
+const user_menu_1 = require("../menu/ui/user-menu");
+const styles_1 = require("./styles");
+const uxfLogo = (react_1.default.createElement("svg", { height: "30", viewBox: "0 0 179 40", width: "134" },
+    react_1.default.createElement("path", { clipRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", fill: "#FFF", fillRule: "evenodd" }),
+    react_1.default.createElement("path", { clipRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", fill: "#FFF", fillRule: "evenodd" })));
+const Sidebar = (props) => {
+    var _a, _b, _c;
+    const [deviceHeight, setDeviceHeight] = (0, react_1.useState)(0);
+    const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
+    const toggleMenu = () => setIsMenuOpen((prev) => !prev);
+    (0, react_1.useEffect)(() => {
+        const handler = () => { var _a, _b; return setDeviceHeight((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight); };
+        handler();
+        window.addEventListener("resize", handler);
+        return () => {
+            window.removeEventListener("resize", handler);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const handler = () => {
+            if (!window.matchMedia(`(min-width: ${tw_screens_1.twScreens.md})`).matches && isMenuOpen) {
+                document.body.style.overflow = "hidden";
+            }
+            else {
+                document.body.style.overflow = "";
+            }
+        };
+        handler();
+        window.addEventListener("resize", handler);
+        return () => {
+            document.body.style.overflow = "";
+            window.removeEventListener("resize", handler);
+        };
+    }, [isMenuOpen]);
+    return ((_a = props.CustomSidebar) !== null && _a !== void 0 ? _a : (react_1.default.createElement("div", { className: "uxf-cms-sidebar", style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
+        react_1.default.createElement("div", { className: `uxf-cms-sidebar__content ${isMenuOpen ? "uxf-cms-sidebar__content--open" : "uxf-cms-sidebar__content--closed"}`, style: { "--device-height": (0, rem_1.rem)(deviceHeight) } },
+            react_1.default.createElement("div", { className: "uxf-cms-sidebar__logo" }, (_b = props.Logo) !== null && _b !== void 0 ? _b : uxfLogo),
+            props.menuConfiguration && props.menuConfiguration.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: `uxf-cms-sidebar__nav ${((_c = props.menuConfiguration.at(0)) === null || _c === void 0 ? void 0 : _c.type) === "super-section"
+                        ? "uxf-cms-sidebar__nav--super-section"
+                        : ""}` },
+                    react_1.default.createElement(menu_1.Menu, { menu: props.menuConfiguration })),
+                react_1.default.createElement(user_menu_1.UserMenu, { menu: props.menuConfiguration })))),
+        props.menuConfiguration && (react_1.default.createElement(mobile_bar_1.MobileBar, { menuConfiguration: props.menuConfiguration, toggleMenu: toggleMenu })))));
+};
+exports.Sidebar = Sidebar;

package/lib/layout/styles.d.ts

@@ -0,0 +1 @@
+export declare const drawerWidth = 264;

package/lib/layout/styles.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerWidth = void 0;
+exports.drawerWidth = 264;

package/lib/layout/types.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { MenuItem } from "../menu/model";
+import { BreadcrumbItemProps } from "./breadcrumbs";
+export type LayoutContainerType = "fullWidth" | "wide" | "narrow" | "none";
+export interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {
+    type?: LayoutContainerType;
+}
+export interface AppBarProps {
+    Logo?: ReactNode;
+    ToolbarRight?: ReactNode;
+}
+export interface SidebarProps {
+    Logo?: ReactNode;
+    menuConfiguration?: MenuItem[];
+    CustomSidebar?: ReactElement;
+}
+export type LayoutProps = SidebarProps & {
+    appName: string;
+    Avatar?: ReactNode;
+    children?: ReactNode;
+    containerType?: LayoutContainerType;
+    headerContainerType?: LayoutContainerType;
+    breadcrumbs?: BreadcrumbItemProps[];
+    Header?: ReactNode;
+    loading?: boolean;
+    Logo?: ReactNode;
+    mainClassName?: string;
+    MessageBar?: ReactNode;
+    subtitle?: ReactNode;
+    title?: string;
+    FooterBar?: ReactNode;
+    ToolbarRight?: ReactNode;
+    TitleRightContainer?: ReactNode;
+    stickyHeader?: boolean;
+    CustomHeader?: ReactNode;
+};

package/lib/layout/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/login-layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./login-layout";
+export * from "./types";

package/lib/login-layout/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./login-layout"), exports);
+__exportStar(require("./types"), exports);

package/lib/login-layout/login-layout.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { LoginLayoutProps } from "./types";
+export declare const LoginLayout: FC<LoginLayoutProps>;

package/lib/login-layout/login-layout.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginLayout = void 0;
+const paper_1 = require("@uxf/ui/paper/paper");
+const head_1 = __importDefault(require("next/head"));
+const react_1 = __importDefault(require("react"));
+const LoginLayout = (props) => {
+    return (react_1.default.createElement("div", { className: "uxf-cms-login-layout" },
+        react_1.default.createElement(head_1.default, null,
+            react_1.default.createElement("title", null, props.pageTitle || "")),
+        props.Logo && react_1.default.createElement("div", { className: "uxf-cms-login-layout__logo-wrapper" }, props.Logo),
+        props.title && (react_1.default.createElement("h1", { className: `uxf-cms-login-layout__title ${props.hideTitle ? "uxf-cms-login-layout__title--hidden" : ""}` }, props.title)),
+        props.subTitle && react_1.default.createElement("p", { className: "uxf-cms-login-layout__subtitle" }, props.subTitle),
+        react_1.default.createElement(paper_1.Paper, { className: "uxf-cms-login-layout__body" }, props.children)));
+};
+exports.LoginLayout = LoginLayout;

package/lib/login-layout/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface LoginLayoutProps {
+    hideTitle?: boolean;
+    title: ReactNode;
+    subTitle?: ReactNode;
+    pageTitle?: string;
+    Logo?: ReactNode;
+    children?: ReactNode;
+}

package/lib/login-layout/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/menu/active-item-resolver.d.ts

@@ -0,0 +1,7 @@
+import { Resolver } from "./types";
+export declare const ActiveItemResolver: {
+    anyOf: (routeNames: string[]) => Resolver;
+    exactMatch: () => Resolver;
+    exactMatchWithParams: () => Resolver;
+    tableLink: () => Resolver;
+};

package/lib/menu/active-item-resolver.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveItemResolver = void 0;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const exactMatch = () => (menuItem) => (_, activeRoute) => {
+    return activeRoute === menuItem.route;
+};
+const exactMatchWithParams = () => (menuItem) => (router, activeRoute) => {
+    const isQueryEqual = (menuQuery, itemQuery) => {
+        // match when both undefined or empty
+        if ((0, is_nil_1.isNil)(itemQuery)) {
+            return Object.keys(menuQuery).length === 0;
+        }
+        const keysMenu = Object.keys(menuQuery);
+        const keysItem = Object.keys(itemQuery);
+        if (keysMenu.length !== keysItem.length) {
+            return false;
+        }
+        return keysMenu.every((key) => key in itemQuery && String(menuQuery[key]) === String(itemQuery[key]));
+    };
+    return activeRoute === menuItem.route && isQueryEqual(router.query, menuItem.routeParams);
+};
+const anyOf = (routeNames) => (menuItem) => (_, activeRoute) => {
+    if (activeRoute === menuItem.route) {
+        return true;
+    }
+    return routeNames.some((routeName) => routeName === activeRoute);
+};
+const tableLink = () => (menuItem) => (router, activeRoute) => {
+    var _a;
+    const isQueryEqual = router.query.entityAlias === ((_a = menuItem.routeParams) === null || _a === void 0 ? void 0 : _a.entityAlias);
+    if (activeRoute === menuItem.route && isQueryEqual) {
+        return true;
+    }
+    return activeRoute === "cms/table-form" && isQueryEqual;
+};
+exports.ActiveItemResolver = {
+    anyOf,
+    exactMatch,
+    exactMatchWithParams,
+    tableLink,
+};

package/lib/menu/factory.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from "@uxf/ui/icon/types";
+import { ReactElement, ReactNode } from "react";
+import { MenuItem, UserMenuData } from "./model";
+export declare function createCustomContent(title: string, content: ReactNode): MenuItem;
+export declare function createSuperSection(title: string, children?: MenuItem[]): MenuItem;
+export declare function createSection(title: string, icon?: IconName, children?: MenuItem[]): MenuItem;
+export declare function createLink(title: string, routeName: string, routeParams?: any, icon?: IconName, endElement?: ReactElement): MenuItem;
+export declare function createExternalLink(title: string, href: string, icon?: IconName, endElement?: ReactElement): MenuItem;
+export declare function createUserMenu(userMenuData: UserMenuData, children?: MenuItem[]): MenuItem;
+export declare function createTableLink(title: string, entityAlias: string, icon?: IconName, endElement?: ReactElement): MenuItem;

package/lib/menu/factory.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCustomContent = createCustomContent;
+exports.createSuperSection = createSuperSection;
+exports.createSection = createSection;
+exports.createLink = createLink;
+exports.createExternalLink = createExternalLink;
+exports.createUserMenu = createUserMenu;
+exports.createTableLink = createTableLink;
+const active_item_resolver_1 = require("./active-item-resolver");
+const model_1 = require("./model");
+function createCustomContent(title, content) {
+    return model_1.MenuItem.create(title, "custom").setContent(content);
+}
+function createSuperSection(title, children) {
+    return model_1.MenuItem.create(title, "super-section").setChildren(children);
+}
+function createSection(title, icon, children) {
+    return model_1.MenuItem.create(title, "section").setIcon(icon).setChildren(children);
+}
+function createLink(title, routeName, routeParams, icon, endElement) {
+    return model_1.MenuItem.create(title, "link")
+        .setRoute(routeName, routeParams)
+        .setIcon(icon)
+        .setEndElement(endElement)
+        .setActiveResolver(active_item_resolver_1.ActiveItemResolver.anyOf([routeName]));
+}
+function createExternalLink(title, href, icon, endElement) {
+    return model_1.MenuItem.create(title, "link").setIsExternal(true).setIcon(icon).setEndElement(endElement).setUrl(href);
+}
+function createUserMenu(userMenuData, children) {
+    return model_1.MenuItem.create("Můj profil", "super-section").setUserMenuData(userMenuData).setChildren(children);
+}
+function createTableLink(title, entityAlias, icon, endElement) {
+    return model_1.MenuItem.create(title, "link")
+        .setRoute("cms/table", { entityAlias })
+        .setIcon(icon)
+        .setEndElement(endElement)
+        .setActiveResolver(active_item_resolver_1.ActiveItemResolver.tableLink());
+}

package/lib/menu/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./active-item-resolver";
+export * from "./factory";
+export * from "./types";
+export * from "./ui/menu";
+export * from "./ui/menu-item";

package/lib/menu/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./active-item-resolver"), exports);
+__exportStar(require("./factory"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./ui/menu"), exports);
+__exportStar(require("./ui/menu-item"), exports);

package/lib/menu/mobile-bar.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { MenuItem } from "./model";
+interface Props {
+    menuConfiguration: MenuItem[];
+    toggleMenu: () => void;
+}
+export declare const MobileBar: FC<Props>;
+export {};

package/lib/menu/mobile-bar.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileBar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const config_1 = require("../../config");
+const avatar_1 = require("../../ui/avatar");
+const get_avatar_user_letters_1 = require("../../ui/avatar/get-avatar-user-letters");
+const sub_menu_mobile_1 = require("./ui/sub-menu/sub-menu-mobile");
+const MobileBar = (props) => {
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    const mobileBarMenu = props.menuConfiguration
+        .flatMap((item) => {
+        if (item.type === "link" || item.type === "section") {
+            return item;
+        }
+        if (item.userMenuData) {
+            return item;
+        }
+        if (item.type === "super-section") {
+            return item.children.filter((i) => i.type === "link" || i.type === "section");
+        }
+        return undefined;
+    })
+        .filter((i) => i)
+        .filter((item) => (item === null || item === void 0 ? void 0 : item.isVisible(loggedUser)) && (!item.children.length || item.hasVisibleChildren(loggedUser)))
+        .splice(0, 4);
+    const buttonClassName = (0, cx_1.cx)("uxf-cms-mobile-bar__button", mobileBarMenu.length === 2 && "w-1/3", mobileBarMenu.length === 3 && "w-1/4", mobileBarMenu.length === 4 && "w-1/5");
+    return (react_1.default.createElement("div", { className: "uxf-cms-mobile-bar" },
+        mobileBarMenu.map((item, index) => {
+            var _a, _b, _c, _d;
+            if (item.children.length) {
+                return (react_1.default.createElement(sub_menu_mobile_1.SubMenuMobile, { content: item.children, key: index, title: item.title },
+                    react_1.default.createElement("button", { className: buttonClassName, type: "button" }, item.userMenuData ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-mobile-bar__avatar", letters: (0, get_avatar_user_letters_1.getAvatarUserLetters)(item.userMenuData.name), size: "sm", src: item.userMenuData.avatar, variant: "rounded" })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(icon_1.Icon, { name: (_a = item.icon) !== null && _a !== void 0 ? _a : "", size: 24 }),
+                        react_1.default.createElement(icon_1.Icon, { className: "uxf-cms-mobile-bar__caret", name: "caretDown", size: 16 }))))));
+            }
+            if (item.url || item.route) {
+                return (react_1.default.createElement(link_1.default, { className: buttonClassName, href: (_b = item.url) !== null && _b !== void 0 ? _b : config_1.container.get("route")(item.route, item.routeParams), key: index, rel: item.isExternal ? "noreferrer noopener" : undefined, target: item.isExternal ? "_blank" : undefined },
+                    react_1.default.createElement(icon_1.Icon, { name: (_c = item.icon) !== null && _c !== void 0 ? _c : "user", size: 24 })));
+            }
+            return (react_1.default.createElement("span", { className: buttonClassName, key: index },
+                react_1.default.createElement(icon_1.Icon, { name: (_d = item.icon) !== null && _d !== void 0 ? _d : "user", size: 24 })));
+        }),
+        react_1.default.createElement("button", { className: buttonClassName, onClick: props.toggleMenu, type: "button" },
+            react_1.default.createElement(icon_1.Icon, { name: "bars", size: 24 }))));
+};
+exports.MobileBar = MobileBar;

package/lib/menu/model.d.ts

@@ -0,0 +1,56 @@
+import { ImageSource } from "@uxf/core/utils/resizer";
+import { IconName } from "@uxf/ui/icon/types";
+import { NextRouter } from "next/router";
+import { ReactElement, ReactNode } from "react";
+import { LoggedUser } from "../../config/container";
+import { Resolver } from "./types";
+type ItemType = "custom" | "super-section" | "section" | "link";
+export type UserMenuData = {
+    avatar?: ImageSource;
+    name: string;
+    roles: string;
+};
+export declare class MenuItem {
+    private _type;
+    private _title;
+    private _children;
+    private _url?;
+    private _route?;
+    private _routeParams?;
+    private _isExternal?;
+    private _icon?;
+    private _endElement?;
+    private _activeItemResolver?;
+    private _allowedRoles?;
+    private _content?;
+    private _userMenuData?;
+    static create(title: string, type: ItemType): MenuItem;
+    constructor(title: string, type: ItemType);
+    setContent(content: ReactNode): MenuItem;
+    setIcon(icon?: IconName): MenuItem;
+    setEndElement(endElement?: ReactElement): MenuItem;
+    setChildren(children?: MenuItem[]): MenuItem;
+    setRoute(route: string, routeParams?: object): MenuItem;
+    setUrl(url: string): MenuItem;
+    setIsExternal(isExternal: boolean): MenuItem;
+    setUserMenuData(userMenuData: UserMenuData): MenuItem;
+    setActiveResolver(resolver: Resolver | null): MenuItem;
+    setAllowedRoles(roles: string[]): MenuItem;
+    isActive(router: NextRouter, activeRoute: string): boolean;
+    hasActiveChildren(router: NextRouter, activeRoute: string): boolean;
+    isVisible(loggedUser: LoggedUser): boolean;
+    hasVisibleChildren(loggedUser: LoggedUser): boolean;
+    get type(): ItemType;
+    get title(): string;
+    get children(): MenuItem[];
+    get url(): string | undefined;
+    get route(): string | undefined;
+    get routeParams(): any;
+    get isExternal(): boolean | undefined;
+    get icon(): IconName | undefined;
+    get endElement(): ReactElement | undefined;
+    get allowedRoles(): string[] | undefined;
+    get content(): ReactNode;
+    get userMenuData(): UserMenuData | undefined;
+}
+export {};