pds-dev-kit-web-test 0.0.2 → 0.0.5

package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js

@@ -72,9 +72,9 @@ function DesktopAlertDialog(_a) {
                     titleText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
                     contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" })))),
             react_1.default.createElement(S_Footer, null,
-                btn3Mode.includes(btnMode) && tBtn3Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3 })),
+                btn3Mode.includes(btnMode) && tBtn3Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                btn2Mode.includes(btnMode) && tBtn2Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2 })),
+                btn2Mode.includes(btnMode) && tBtn2Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
                 btn1Mode.includes(btnMode) && tBtn1Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1 }))))), container);
 }
@@ -88,7 +88,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_base;
 }, function (_a) {

package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js

@@ -35,9 +35,9 @@ function DesktopTabBar(_a) {
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
-        var handelClickTabItem_1 = function (item) {
+        var handelClickTabItem_1 = function (item, e) {
             if (item.onClick) {
-                item.onClick();
+                item.onClick(e);
             }
         };
         var textLabel_1 = function (item, isSubText) {
@@ -53,8 +53,8 @@ function DesktopTabBar(_a) {
         };
         return (react_1.default.createElement(S_TabBox, null,
             itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
-                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () { return handelClickTabItem_1(item); } }, textLabel_1(item, false)),
-                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handelClickTabItem_1(subItem); } }, textLabel_1(subItem, true))); }))))); }),
+                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
+                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); }),
             itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
     }
     if (textArray) {

package/dist/src/desktop/components/DynamicDesktopNavBar/DynamicDesktopNavBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrandLogo, UserProfile } from './blocks';
-import { DynamicDesktopTemplateType } from './templates/types';
+import { TemplateNamesType } from './templates';
 import { ParsedNode } from './types';
 declare type BrandLogo = {
     src: string;
@@ -17,7 +17,7 @@ export declare type Props = {
     userProfile: UserProfile;
     primaryMenus: ParsedNode[];
     secondaryMenus: ParsedNode[] | null;
-    template: DynamicDesktopTemplateType;
+    template: TemplateNamesType;
     basePath: string;
 };
 export declare const BasePathContext: React.Context<{

package/dist/src/desktop/components/DynamicDesktopNavBar/DynamicDesktopNavBar.js

@@ -28,26 +28,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasePathContext = void 0;
 var react_1 = __importStar(require("react"));
-var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var BoxLayout_1 = require("../../../common/components/BoxLayout");
 var blocks_1 = require("./blocks");
+var templates_1 = require("./templates");
 exports.BasePathContext = (0, react_1.createContext)({
     basePath: ''
 });
 function DynamicDesktopNavBar(_a) {
     var _b = _a.isPreview, isPreview = _b === void 0 ? false : _b, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath;
-    var gridStyle = template.gridStyle, gridTemplate = template.gridTemplate, showSecondaryMenu = template.showSecondaryMenu, primaryMenuOptions = template.primaryMenuOptions, secondaryMenuOptions = template.secondaryMenuOptions, userProfileOptions = template.userProfileOptions;
+    var _c = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _c.gridStyle, gridTemplate = _c.gridTemplate, showSecondaryMenu = _c.showSecondaryMenu, primaryMenuOptions = _c.primaryMenuOptions, secondaryMenuOptions = _c.secondaryMenuOptions, userProfileOptions = _c.userProfileOptions;
     var slicedPrimaryMenus = (0, react_1.useMemo)(function () { return primaryMenus === null || primaryMenus === void 0 ? void 0 : primaryMenus.slice(0, primaryMenuOptions.maxLength); }, [primaryMenus, primaryMenuOptions]);
     var slicedSecondaryMenus = (0, react_1.useMemo)(function () { var _a; return (_a = secondaryMenus === null || secondaryMenus === void 0 ? void 0 : secondaryMenus.slice(0, secondaryMenuOptions.maxLength)) !== null && _a !== void 0 ? _a : []; }, [secondaryMenus, secondaryMenuOptions]);
     return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath } },
-        react_1.default.createElement(react_router_dom_1.BrowserRouter, { basename: basePath },
-            react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
-                react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
-                    react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
-                    react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
-                    showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
-                    react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, style: userProfileOptions.style }))))));
+        react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
+            react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
+                react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
+                react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
+                showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
+                react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, style: userProfileOptions.style })))));
 }
 var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -44,8 +44,8 @@ var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMen
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
     return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
-        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }) })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
+        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
+        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuNavs.js

@@ -31,17 +31,31 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ContextMenu_1 = require("../../../ContextMenu");
 function ContextMenuNavs(_a) {
     var parentRef = _a.parentRef, children = _a.children;
-    var contextRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
+    var _b = (0, react_1.useState)(null), contextRef = _b[0], setContextRef = _b[1];
+    var contextCallbackRef = (0, react_1.useCallback)(function (node) {
+        if (!node) {
+            return;
+        }
+        setContextRef(node);
+    }, []);
+    var _c = (0, react_1.useState)({ top: 0, left: 0 }), position = _c[0], setPosition = _c[1];
     (0, react_1.useLayoutEffect)(function () {
         if (!parentRef.current) {
             return;
         }
         var PARENT_HEIGHT = 48;
         var _a = parentRef.current.getBoundingClientRect(), top = _a.top, left = _a.left;
-        setPosition({ top: top + PARENT_HEIGHT, left: left });
-    }, [parentRef]);
-    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextRef, style: { top: position.top, left: position.left } },
+        if (!contextRef) {
+            setPosition({ top: top + PARENT_HEIGHT, left: left });
+            return;
+        }
+        var contextBound = contextRef.getBoundingClientRect();
+        if (contextRef.getBoundingClientRect().right > window.innerWidth) {
+            setPosition({ top: top + PARENT_HEIGHT, left: window.innerWidth - contextBound.width });
+            return;
+        }
+    }, [parentRef, contextRef]);
+    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextCallbackRef, style: { top: position.top, left: position.left } },
         react_1.default.createElement(ContextMenu_1.ContextMenu, null, children)));
 }
 var S_AbsoluteWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"], ["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"])));

package/dist/src/desktop/components/DynamicDesktopNavBar/components/LogoNav.js

@@ -17,6 +17,6 @@ function LogoNav(_a) {
         react_1.default.createElement(S_Box, null, logoSrc ? (react_1.default.createElement(S_Logo, { src: logoSrc })) : (react_1.default.createElement(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 })))));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"])));
-var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
+var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
 exports.default = LogoNav;
 var templateObject_1, templateObject_2;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.js

@@ -54,11 +54,12 @@ function MenuItemNav(_a) {
     var handleMouseOut = (0, react_1.useCallback)(function () {
         setIsContextOpen(false);
     }, []);
-    return (react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
-        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
-        showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" })),
-        isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
+            menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
+        showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"])));
 exports.default = MenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.d.ts

@@ -6,6 +6,7 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'pAppCode'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
 };
-declare function PAppMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function PAppMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
 export default PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.js

@@ -24,26 +24,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
 var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function PAppMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
     var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
     var match = (0, react_router_dom_1.useRouteMatch)("" + basePath);
     var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/:activeKey");
     var isActive = (0, react_1.useMemo)(function () {
         return (activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.params.activeKey) === menu.pAppCode;
-    }, [match, activeMatch]);
+    }, [menu, match, activeMatch]);
     if (showMenuAsIcon) {
-        if (menu.iconSrc) {
-            return react_1.default.createElement(ImageIconNav_1.default, { to: "/" + menu.pAppCode, iconSrc: menu.iconSrc, openNewTab: false });
-        }
         if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
+            return react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName });
+        }
+        if (menu.iconSrc) {
+            return (react_1.default.createElement(ImageIconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconSrc: menu.iconSrc, openNewTab: false }));
         }
     }
-    return (react_1.default.createElement(TextLabelNav_1.default, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name }));
 }
 exports.default = PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.d.ts

@@ -6,6 +6,7 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
 };
-declare function WebMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
 export default WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function WebMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
             return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: true });
@@ -17,6 +17,6 @@ function WebMenuItemNav(_a) {
             return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
         }
     }
-    return react_1.default.createElement(TextLabelNav_1.default, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name });
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name }));
 }
 exports.default = WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/index.d.ts

@@ -1 +1,2 @@
 export { default as DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+export { DynamicDesktopNavBarTemplates } from './templates';

package/dist/src/desktop/components/DynamicDesktopNavBar/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicDesktopNavBar = void 0;
+exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = void 0;
 var DynamicDesktopNavBar_1 = require("./DynamicDesktopNavBar");
 Object.defineProperty(exports, "DynamicDesktopNavBar", { enumerable: true, get: function () { return __importDefault(DynamicDesktopNavBar_1).default; } });
+var templates_1 = require("./templates");
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return templates_1.DynamicDesktopNavBarTemplates; } });

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/{MenuDesignTemplates.d.ts → DynamicDesktopNavBarTemplates.d.ts}

@@ -1,5 +1,5 @@
 import { TemplateNamesType } from './types';
-declare class MenuDesignTemplates {
+declare class DynamicDesktopNavBarTemplates {
     private static data;
     private static names;
     static getNames(): Record<"W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005", "W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005">;
@@ -24,6 +24,7 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
         };
     } | {
         gridTemplate: string;
@@ -39,8 +40,11 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -57,7 +61,9 @@ declare class MenuDesignTemplates {
             maxLength: number;
             style: {};
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -74,8 +80,11 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -96,7 +105,9 @@ declare class MenuDesignTemplates {
                 justifyContent: string;
             };
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
 }
-export default MenuDesignTemplates;
+export default DynamicDesktopNavBarTemplates;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/{MenuDesignTemplates.js → DynamicDesktopNavBarTemplates.js}

@@ -12,20 +12,20 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var constants_1 = require("./constants");
-var MenuDesignTemplates = /** @class */ (function () {
-    function MenuDesignTemplates() {
+var DynamicDesktopNavBarTemplates = /** @class */ (function () {
+    function DynamicDesktopNavBarTemplates() {
     }
-    MenuDesignTemplates.getNames = function () {
-        return MenuDesignTemplates.names;
+    DynamicDesktopNavBarTemplates.getNames = function () {
+        return DynamicDesktopNavBarTemplates.names;
     };
-    MenuDesignTemplates.getTemplate = function (name) {
-        return MenuDesignTemplates.data[name];
+    DynamicDesktopNavBarTemplates.getTemplate = function (name) {
+        return DynamicDesktopNavBarTemplates.data[name];
     };
-    MenuDesignTemplates.data = constants_1.TEMPLATES_DATA;
-    MenuDesignTemplates.names = (Object.keys(constants_1.TEMPLATES_DATA).reduce(function (acc, cur) {
+    DynamicDesktopNavBarTemplates.data = constants_1.TEMPLATES_DATA;
+    DynamicDesktopNavBarTemplates.names = (Object.keys(constants_1.TEMPLATES_DATA).reduce(function (acc, cur) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[cur] = cur, _a)));
     }, {}));
-    return MenuDesignTemplates;
+    return DynamicDesktopNavBarTemplates;
 }());
-exports.default = MenuDesignTemplates;
+exports.default = DynamicDesktopNavBarTemplates;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.d.ts

@@ -20,6 +20,7 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
         };
     };
     W1_0002: {
@@ -36,8 +37,11 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     };
     W1_0003: {
         gridTemplate: string;
@@ -55,7 +59,9 @@ export declare const TEMPLATES_DATA: {
             maxLength: number;
             style: {};
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
     W1_0004: {
         gridTemplate: string;
@@ -73,8 +79,11 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     };
     W1_0005: {
         gridTemplate: string;
@@ -96,6 +105,8 @@ export declare const TEMPLATES_DATA: {
                 justifyContent: string;
             };
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
 };

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.js

@@ -22,7 +22,8 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         }
     },
     W1_0002: {
@@ -38,9 +39,12 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0003: {
         gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
@@ -58,7 +62,9 @@ exports.TEMPLATES_DATA = {
             maxLength: 3,
             style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0004: {
         gridTemplate: 'BRAND_LOGO PRIMARY_MENU USER_PROFILE',
@@ -75,19 +81,22 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0005: {
-        gridTemplate: 'BRAND_LOGO SECONDARY_MENU PRIMARY_MENU USER_PROFILE',
+        gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
         gridStyle: {
-            gridTemplateColumns: 'max-content max-content auto max-content'
+            gridTemplateColumns: 'max-content auto max-content max-content'
         },
         showSecondaryMenu: true,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -96,9 +105,11 @@ exports.TEMPLATES_DATA = {
             showMenuAsIcon: true,
             maxLength: 3,
             style: {
-                justifyContent: 'flex-start'
+                justifyContent: 'flex-end'
             }
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     }
 };

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/index.d.ts

@@ -1,2 +1,2 @@
-export { default as MenuDesignTemplates } from './MenuDesignTemplates';
+export { default as DynamicDesktopNavBarTemplates } from './DynamicDesktopNavBarTemplates';
 export * from './types';

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuDesignTemplates = void 0;
-var MenuDesignTemplates_1 = require("./MenuDesignTemplates");
-Object.defineProperty(exports, "MenuDesignTemplates", { enumerable: true, get: function () { return __importDefault(MenuDesignTemplates_1).default; } });
+exports.DynamicDesktopNavBarTemplates = void 0;
+var DynamicDesktopNavBarTemplates_1 = require("./DynamicDesktopNavBarTemplates");
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return __importDefault(DynamicDesktopNavBarTemplates_1).default; } });
 __exportStar(require("./types"), exports);

package/dist/src/desktop/components/DynamicDesktopNavBar/types.d.ts

@@ -1,11 +1,12 @@
 import { PDSIconType } from '../../../common';
+export type { DynamicDesktopTemplateType, TemplateNamesType, TemplatesDataType } from './templates/types';
 export declare type ParsedNode = {
     menuItemType: 'NAV_P_APP' | 'WEB_LINK';
     type: 'GENERAL_NODE';
     name: string;
     iconSrc?: string;
     iconName?: PDSIconType;
-    visibilityLevel: boolean;
+    visibilityLevel: string;
     pAppCode?: string;
     conversionLinkSrc?: string;
     parsedNodes: Array<ParsedNode>;