@axos-web-dev/shared-components 2.0.0-dev.30-toasts.1 → 2.0.0-dev.31

package/dist/NavigationMenu/ServerNavigation/SubNavbar.css.d.ts

@@ -0,0 +1,60 @@
+export declare const sub_nav: string;
+export declare const dd_media: string;
+export declare const dd_media_cta_actions: string;
+export declare const dd_media_banner_button: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            selectors: {
+                "&&": {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+                "&&:hover": {
+                    backgroundColor: "transparent";
+                    borderColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+                "&&:active": {
+                    backgroundColor: `var(--${string})`;
+                    borderColor: "transparent";
+                    color: `var(--${string})`;
+                };
+            };
+        };
+        secondary: {
+            selectors: {
+                "&&": {
+                    backgroundColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+                "&&:hover": {
+                    backgroundColor: "transparent";
+                    borderColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+                "&&:active": {
+                    backgroundColor: `var(--${string})`;
+                    borderColor: "transparent";
+                    color: `var(--${string})`;
+                };
+            };
+        };
+        tertiary: {
+            selectors: {
+                "&&": {
+                    backgroundColor: "transparent";
+                    borderColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+                "&&:hover": {
+                    backgroundColor: "transparent";
+                    borderColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
+export declare const dd_media_banner_chevron_wrapper: string;
+export declare const dd_main_btn: string;
+export declare const dd_cta_link: string;

package/dist/NavigationMenu/ServerNavigation/SubNavbar.css.js

@@ -0,0 +1,22 @@
+import '../../assets/NavigationMenu/ServerNavigation/SubNavbar.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+/* empty css                                      */
+/* empty css                                  */
+/* empty css                                       */
+/* empty css                             */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var sub_nav = "ff9a9z0";
+var dd_media = "ff9a9z1";
+var dd_media_cta_actions = "ff9a9z2";
+var dd_media_banner_button = createRuntimeFn({ defaultClassName: "ff9a9z3", variantClassNames: { variant: { primary: "ff9a9z4", secondary: "ff9a9z5", tertiary: "ff9a9z6" } }, defaultVariants: {}, compoundVariants: [] });
+var dd_media_banner_chevron_wrapper = "ff9a9z7";
+var dd_main_btn = "ff9a9z3 ff9a9z5";
+var dd_cta_link = "ff9a9z7";
+export {
+  dd_cta_link,
+  dd_main_btn,
+  dd_media,
+  dd_media_banner_button,
+  dd_media_banner_chevron_wrapper,
+  dd_media_cta_actions,
+  sub_nav
+};

package/dist/NavigationMenu/ServerNavigation/index.d.ts

@@ -0,0 +1,7 @@
+import { Navigation } from '../utils';
+
+declare function NavBar({ project, items, }: {
+    project?: string | null;
+    items?: Navigation;
+}): import("react").JSX.Element | null;
+export default NavBar;

package/dist/NavigationMenu/ServerNavigation/index.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../Accordion/Accordion.js";
+import "../../Accordion/Accordion.css.js";
+import "../../icons/ArrowIcon/ArrowIcon.css.js";
+import "../../icons/CheckIcon/CheckIcon.css.js";
+import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/TopicalNavSet/TopicalNavSet.css';import '../../assets/TopicalNavItem/TopicalNavItem.css';import '../../assets/Topic/Topic.css';import '../../assets/TextBlock/TextBlock.css';import '../../assets/SocialMediaBar/SocialMediaBar.css';import '../../assets/SecondaryFooter/SecondaryFooter.css';import '../../assets/Pagination/Pagination.css';import '../../assets/PageNavSet/PageNavigationSet.css';import '../../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../../assets/NavigationMenu/AxosBank/NavBar2.css';import '../../assets/Insight/Featured/Header.css';import '../../assets/Insight/Featured/CategorySelector.css';import '../../assets/Insight/Featured/Featured.css';import '../../assets/ImageLink/ImageLink.css';import '../../assets/VideoTile/VideoTile.css';import '../../assets/HelpArticle/HelpArticle.css';import '../../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../../assets/DownloadTile/DownloadTile.css';import '../../assets/CollectInformationAlert/CollectInformationAlert.css';import '../../assets/Chatbot/ChatWindow.css';import '../../assets/Chatbot/Bubble.css';import '../../assets/Chatbot/AnimatedGradientBorder.css';import '../../assets/CallToActionBar/CallToActionBar.css';import '../../assets/Insight/Insight.css';import '../../assets/AwardsItem/AwardsItem.css';import '../../assets/AwardsBanner/AwardsBanner.css';import '../../assets/Auth/SignIn.css';import '../../assets/Auth/ErrorAlert.css';import '../../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../../assets/Forms/QuickPricer/UserInformation.css';import '../../assets/Forms/QuickPricer/QuickPricerResults.css';import '../../assets/ImageToast/ImageToast.css';import '../../assets/Modal/Modal.css';import '../../assets/BulletItem/BulletItem.css';import '../../assets/Typography/Typography.css';import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+/* empty css                                      */
+/* empty css                                  */
+/* empty css                                       */
+/* empty css                                                       */
+/* empty css                                                   */
+import { appendQueryParams } from "../../utils/appendQueryParams.js";
+import { useState, useRef, useMemo, useEffect, useCallback } from "react";
+import "clsx";
+import "../../Chevron/Chevron.css.js";
+import "../../AlertBanner/AlertBanner.css.js";
+import "../../Article/Article.css.js";
+import "../../IconBillboard/IconBillboard.css.js";
+/* empty css                                             */
+/* empty css                                             */
+import "../../Interstitial/Interstitial-variants.css.js";
+/* empty css                                   */
+import { useGlobalContext } from "../../Modal/contextApi/store.js";
+import "../../Button/Button.css.js";
+import { useClickAway } from "react-use";
+import "../../ArticlesSet/ArticlesSet.css.js";
+import "../../Calculators/calculator.css.js";
+import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
+import "next/image.js";
+import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
+import "../../Calculators/ApyCalculatorUserTest/ApyCalculatorUserTest.css.js";
+import "../../HeroBanner/LargeBanner.css.js";
+import "../../HeroBanner/HeroBanner.css.js";
+import "../../HeroBanner/SelectionBanner.css.js";
+/* empty css                                             */
+import "../../SetContainer/SetContainer.css.js";
+import "../../Table/Table.css.js";
+import "../../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
+import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
+import "@hookform/resolvers/zod";
+import "../../Input/Checkbox.js";
+import "../../Input/CurrencyInput.js";
+import "../../Input/Dropdown.js";
+import "../../Input/Dropdown.css.js";
+import "../../Input/Input.js";
+import "../../Input/Input.css.js";
+import "../../Input/InputAmount.js";
+import "../../Input/InputPhone.js";
+import "../../Input/InputTextArea.js";
+import "../../Input/DownPaymentInput.js";
+import "../../Input/RadioButton.js";
+import "../../Input/PercentageInput.js";
+import "react-hook-form";
+import "../../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
+import "../../Forms/Forms.css.js";
+import "../../Forms/HoneyPot/index.js";
+import "../../Forms/SalesforceFieldsForm.js";
+import "../../Input/RadioButton.css.js";
+import "../../Input/Checkbox.css.js";
+import "../../LoadingIndicator/LoadingIndicator.css.js";
+import "../../Inputs/Input.css.js";
+/* empty css                                                            */
+import "../../Hyperlink/Hyperlink.css.js";
+/* empty css                                                         */
+import "iframe-resizer";
+/* empty css                                                                                   */
+import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/MonthlyPaymentLVFCalculator/MonthlyPaymentCalculator.css.js";
+import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
+/* empty css                                       */
+import "react-dom";
+/* empty css                                   */
+import "../../Auth/SignInPassword.js";
+/* empty css                                                 */
+/* empty css                                             */
+/* empty css                                       */
+/* empty css                                                       */
+import "../../Carousel/index.js";
+/* empty css                                                      */
+import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
+/* empty css                                      */
+import "../../Chatbot/store/chat.js";
+import "../../Chatbot/Chatbot.js";
+/* empty css                                          */
+import "../../Chatbot/store/messages.js";
+/* empty css                                                                       */
+import "../../Comparison/Comparison.css.js";
+import "../../Tab/Tab.css.js";
+import "../../icons/Star/Star.css.js";
+import "../../ContentBanner/ContentBanner.css.js";
+/* empty css                                                 */
+import "../../ExecutiveBio/ExecutiveBio.css.js";
+import "../../FaqAccordion/index.js";
+import "../../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                             */
+/* empty css                                                            */
+/* empty css                                               */
+import "../../ImageBillboard/ImageBillboard.css.js";
+import "next/script.js";
+/* empty css                                           */
+/* empty css                                           */
+/* empty css                                                 */
+/* empty css                                                         */
+/* empty css                                               */
+import "../../LandingPageHeader/LandingPageHeader.css.js";
+import "next/link.js";
+/* empty css                                    */
+import { NavItem } from "../NavItem/index.js";
+/* empty css                                       */
+import { usePathname } from "next/navigation.js";
+/* empty css                                          */
+/* empty css                                               */
+/* empty css                                                  */
+/* empty css                                       */
+/* empty css                                        */
+/* empty css                                    */
+/* empty css                                      */
+import { getPathFromNavUrl } from "../utils.js";
+import "../../PageNavItem/PageNavItem.css.js";
+import "react-slick";
+/* empty css                                                    */
+/* empty css                                             */
+/* empty css                                                       */
+/* empty css                                                     */
+import "../../StepItem/StepItem.css.js";
+import "../../StepItemSet/StepItemSet.css.js";
+/* empty css                                           */
+/* empty css                                   */
+/* empty css                                                     */
+/* empty css                                                   */
+/* empty css                                                 */
+import { DropwdownButton } from "./DropwdownButton.js";
+import MobileDrawerMenu from "./MobileMenu/MobileMenu.js";
+import styles from "./NavBar.module.js";
+import { main_nav_link, highlight } from "./NavigationBar.css.js";
+import SubNavBar from "./SubNavBar.js";
+function NavBar({
+  project = "AXB",
+  items
+}) {
+  const pathname = usePathname();
+  const { resolveUrl } = useGlobalContext();
+  const [isOpenSignIn, setisOpenSignIn] = useState(false);
+  const ref = useRef(null);
+  const toggle = () => setisOpenSignIn(!isOpenSignIn);
+  const [isClient, setIsClient] = useState(false);
+  const normalizeNavPath = (path) => path.replace(/\/$/, "") || "/";
+  const isNavPathActive = (navPath, currentPath) => {
+    if (!navPath) return false;
+    const normalizedNavPath = normalizeNavPath(navPath);
+    if (currentPath === "/" || currentPath.includes("/tools")) {
+      return normalizedNavPath === "/personal";
+    }
+    if (currentPath.includes("/commercial")) {
+      return normalizedNavPath === "/business";
+    }
+    return currentPath === normalizedNavPath || currentPath.startsWith(`${normalizedNavPath}/`);
+  };
+  const activeIndex = useMemo(() => {
+    if (!items?.subNavBar) return -1;
+    if (pathname === "/" || pathname.includes("/tools")) {
+      return items.subNavBar.findIndex((item) => {
+        const navPath = getPathFromNavUrl(item.url, resolveUrl);
+        return normalizeNavPath(navPath) === "/personal";
+      });
+    }
+    if (pathname === "/commercial") return 1;
+    return items.subNavBar.findIndex(
+      (item) => isNavPathActive(getPathFromNavUrl(item.url, resolveUrl), pathname)
+    );
+  }, [items?.subNavBar, pathname, resolveUrl]);
+  useClickAway(ref, (e) => {
+    if (e?.target?.tagName !== "A") {
+      setisOpenSignIn(false);
+    }
+  });
+  useEffect(() => {
+    appendQueryParams();
+  }, [pathname]);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const handleKeyDownContainer = (e) => {
+    if (e.key === "Tab") {
+      const focusableElements = ref.current?.querySelectorAll(
+        'button, [href], a, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusableElements && isClient) {
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const isShiftPressed = e.shiftKey;
+        if (!isShiftPressed && document.activeElement === lastElement) {
+          e.preventDefault();
+          toggle();
+        }
+      }
+    }
+  };
+  const mainItems = useCallback(
+    () => items?.subNavBar?.map((item, i) => {
+      return !item.rightSide && !!item.displayInNavigation ? /* @__PURE__ */ jsx(
+        NavItem,
+        {
+          className: `${styles.main_nav_link} ${main_nav_link}`,
+          index: i,
+          name: item?.label,
+          url: item?.url,
+          isActive: activeIndex === i
+        },
+        item.id
+      ) : null;
+    }),
+    [items, activeIndex]
+  );
+  const rightSideItems = useCallback(
+    () => items?.subNavBar?.map((item, i) => {
+      if (item.rightSide && item.dropdown)
+        return /* @__PURE__ */ jsx(DropwdownButton, { item }, item.id);
+      return item.rightSide ? /* @__PURE__ */ jsx(
+        NavItem,
+        {
+          className: `link list_unstyled ${styles.main_nav_link} ${main_nav_link} ${styles.highlight} ${highlight}`,
+          index: i,
+          name: item?.label,
+          url: resolveUrl(item?.url),
+          isActive: activeIndex === i
+        },
+        item.id
+      ) : null;
+    }),
+    [items?.subNavBar, activeIndex]
+  );
+  const subNavBarItems = items?.subNavBar?.find(
+    (item) => isNavPathActive(getPathFromNavUrl(item.url, resolveUrl), pathname)
+  );
+  if (!items) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("header", { id: "header", children: [
+    /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+      /* @__PURE__ */ jsx("a", { href: "#main-body", id: "skip_content", className: styles.skip_btn, children: "Skip to main content" }),
+      /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
+        /* @__PURE__ */ jsx("div", { className: `${styles.desktop_only} flex_row middle`, children: /* @__PURE__ */ jsxs("div", { className: `${styles.main_nav} flex_row middle`, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.logo_wrap, children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: project === "AXI" ? "/invest" : "/",
+              "aria-label": "return to homepage",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: items.logo?.url,
+                  alt: items.logo?.alt,
+                  height: 30
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx("nav", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menubar", children: mainItems() }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: `${styles.mobile_only} ${styles.mobile_logo}`, children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: project === "AXI" ? "/invest" : "/",
+              "aria-label": "return to homepage",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: items.logo?.url,
+                  alt: items.logo?.alt,
+                  width: 137,
+                  height: 30
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(MobileDrawerMenu, { menu: items })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.signin_wrap, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${styles.desktop_only} flex_row middle relative`,
+            ref,
+            onKeyDown: handleKeyDownContainer,
+            role: "menubar",
+            children: rightSideItems()
+          }
+        ) })
+      ] })
+    ] }) }),
+    subNavBarItems && /* @__PURE__ */ jsx(SubNavBar, { items: subNavBarItems })
+  ] });
+}
+export {
+  NavBar as default
+};

package/dist/NavigationMenu/index.d.ts

@@ -1,7 +1,9 @@
 export { default as NavBarAXA } from './AxosAdvisor';
 export { default as NavBarAAS } from './AxosAdvisorServices';
+export { default as NavBar } from './ServerNavigation';
 export { default as NavBarAXB } from './AxosBank';
 export { default as NavBarAXC } from './AxosClearing';
 export { default as NavBarAFS } from './AxosFiduciary';
 export { default as NavBarALT } from './AxosALTS';
 export { default as NavBarLVF } from './LaVictoire';
+export * from './utils';

package/dist/NavigationMenu/index.js

@@ -1,16 +1,25 @@
 import { default as default2 } from "./AxosAdvisor/index.js";
 import { default as default3 } from "./AxosAdvisorServices/index.js";
-import { default as default4 } from "./AxosBank/index.js";
-import { default as default5 } from "./AxosClearing/index.js";
-import { default as default6 } from "./AxosFiduciary/index.js";
-import { default as default7 } from "./AxosALTS/index.js";
-import { default as default8 } from "./LaVictoire/index.js";
+import { default as default4 } from "./ServerNavigation/index.js";
+import { default as default5 } from "./AxosBank/index.js";
+import { default as default6 } from "./AxosClearing/index.js";
+import { default as default7 } from "./AxosFiduciary/index.js";
+import { default as default8 } from "./AxosALTS/index.js";
+import { default as default9 } from "./LaVictoire/index.js";
+import { extractChildrenTargets, getFirstLevelMenuItems, getLogo, getNavMenuItems, getPathFromNavUrl, getQuickLinks } from "./utils.js";
 export {
+  default4 as NavBar,
   default3 as NavBarAAS,
-  default6 as NavBarAFS,
-  default7 as NavBarALT,
+  default7 as NavBarAFS,
+  default8 as NavBarALT,
   default2 as NavBarAXA,
-  default4 as NavBarAXB,
-  default5 as NavBarAXC,
-  default8 as NavBarLVF
+  default5 as NavBarAXB,
+  default6 as NavBarAXC,
+  default9 as NavBarLVF,
+  extractChildrenTargets,
+  getFirstLevelMenuItems,
+  getLogo,
+  getNavMenuItems,
+  getPathFromNavUrl,
+  getQuickLinks
 };