@axos-web-dev/shared-components 0.0.115 → 0.0.117

package/dist/Insight/Featured/CategorySelector.css.js

@@ -1,7 +1,7 @@
-/* empty css                            */
 /* empty css                                   */
 /* empty css                                      */
 /* empty css                                             */
+/* empty css                            */
 /* empty css                                    */
 var selector_section = "_13y9ptj0";
 var selector_link = "_13y9ptj1";

package/dist/Insight/Featured/CategorySelector.js

@@ -38,11 +38,11 @@ import "../../Input/InputTextArea.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
+import "../../Input/RadioButton.css.js";
+import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../../Input/RadioButton.js";
-import "../../Input/RadioButton.css.js";
-import "../../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
@@ -81,8 +81,8 @@ import "next/navigation.js";
 /* empty css                                                         */
 /* empty css                                                          */
 import "../../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
+/* empty css                                                    */
 /* empty css                                                       */
 /* empty css                                                     */
 import "../../StepItem/StepItem.css.js";

package/dist/Insight/Featured/Featured.js

@@ -41,10 +41,10 @@ import "../../Input/InputTextArea.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
-import "../../LoadingIndicator/LoadingIndicator.css.js";
-import "../../Input/RadioButton.js";
 import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
+import "../../LoadingIndicator/LoadingIndicator.css.js";
+import "../../Input/RadioButton.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
@@ -85,8 +85,8 @@ import "next/navigation.js";
 /* empty css                                                         */
 /* empty css                                                          */
 import "../../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
+/* empty css                                                    */
 /* empty css                                                       */
 /* empty css                                                     */
 import "../../StepItem/StepItem.css.js";

package/dist/Modal/Modal.js

@@ -36,10 +36,10 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
-import "../LoadingIndicator/LoadingIndicator.css.js";
-import "../Input/RadioButton.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
@@ -82,8 +82,8 @@ import "next/navigation.js";
 /* empty css                                                      */
 /* empty css                                                       */
 import "../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
+/* empty css                                                 */
 /* empty css                                                    */
 /* empty css                                                  */
 import "../StepItem/StepItem.css.js";

package/dist/NavigationMenu/AxosBank/NavData.js

@@ -39,10 +39,10 @@ import "../../Input/InputTextArea.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
-import "../../LoadingIndicator/LoadingIndicator.css.js";
-import "../../Input/RadioButton.js";
 import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
+import "../../LoadingIndicator/LoadingIndicator.css.js";
+import "../../Input/RadioButton.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
@@ -81,8 +81,8 @@ import "next/navigation.js";
 /* empty css                             */
 /* empty css                                        */
 import "../../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
+/* empty css                                                    */
 /* empty css                                                       */
 /* empty css                                                     */
 import "../../StepItem/StepItem.css.js";

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -40,10 +40,10 @@ import "../../Input/InputTextArea.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
-import "../../LoadingIndicator/LoadingIndicator.css.js";
-import "../../Input/RadioButton.js";
 import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
+import "../../LoadingIndicator/LoadingIndicator.css.js";
+import "../../Input/RadioButton.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
@@ -80,8 +80,8 @@ import styles from "./NavBar.module.js";
 import { subNavItems } from "./NavData.js";
 /* empty css                                        */
 import "../../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
+/* empty css                                                    */
 /* empty css                                                       */
 /* empty css                                                     */
 import "../../StepItem/StepItem.css.js";

package/dist/NavigationMenu/AxosBank/index.js

@@ -37,10 +37,10 @@ import "../../Input/InputTextArea.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
-import "../../LoadingIndicator/LoadingIndicator.css.js";
-import "../../Input/RadioButton.js";
 import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
+import "../../LoadingIndicator/LoadingIndicator.css.js";
+import "../../Input/RadioButton.js";
 import "iframe-resizer";
 import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
@@ -79,8 +79,8 @@ import { NavItem } from "../NavItem/index.js";
 /* empty css                                                  */
 /* empty css                                        */
 import "../../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
+/* empty css                                                    */
 /* empty css                                                       */
 /* empty css                                                     */
 import "../../StepItem/StepItem.css.js";

package/dist/NavigationMenu/AxosClearing/index.js

@@ -291,7 +291,7 @@ function NavBar() {
                             href: "/who-we-serve",
                             className: styles.main,
                             role: "heading",
-                            children: "Who We Serve Home"
+                            children: "Who We Serve"
                           }
                         ),
                         /* @__PURE__ */ jsx("a", { href: "/who-we-serve/broker-dealers", role: "menuitem", children: "Broker Dealers" }),
@@ -364,7 +364,7 @@ function NavBar() {
                             href: "/products-and-services",
                             className: styles.main,
                             role: "heading",
-                            children: "Products and Services Home"
+                            children: "Products and Services"
                           }
                         ),
                         /* @__PURE__ */ jsx(
@@ -460,7 +460,7 @@ function NavBar() {
                             href: "/axos-advantage",
                             className: styles.main,
                             role: "heading",
-                            children: "Axos Advantage Home"
+                            children: "Axos Advantage"
                           }
                         ),
                         /* @__PURE__ */ jsx("a", { href: "/axos-advantage/contact-us", role: "menuitem", children: "Contact Us" }),

package/dist/PageNavItem/PageNavItem.d.ts

@@ -1,10 +1,11 @@
-import { FC } from 'react';
 import { SecondaryTypes } from '../utils/variant.types';
+import { FC } from 'react';
 
 export interface PageNavItemProps {
     id: string;
     variant?: SecondaryTypes;
     addClassName?: string;
     label?: string;
+    onClick?: () => void;
 }
 export declare const PageNavItem: FC<PageNavItemProps>;

package/dist/PageNavItem/PageNavItem.js

@@ -5,10 +5,11 @@ const PageNavItem = ({
   id,
   addClassName,
   label,
-  variant: fullVariant = "primary"
+  variant: fullVariant = "primary",
+  onClick
 }) => {
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("div", { className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: `${pn_link({ variant })}`, children: label }) });
+  return /* @__PURE__ */ jsx("div", { onClick, className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: `${pn_link({ variant })}`, children: label }) });
 };
 export {
   PageNavItem

package/dist/PageNavSet/PageNavSet.js

@@ -1,91 +1,91 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { throttle } from "lodash";
+import clsx from "clsx";
 import { useState, useRef, useEffect } from "react";
 import Slider from "react-slick";
 import "../PageNavItem/PageNavItem.css.js";
 import { PageNavItem } from "../PageNavItem/PageNavItem.js";
-import css from "./PageNavSet.module.js";
+import { sticky_nav, nav_wrapper, sticky_page_nav } from "./PageNavigationSet.css.js";
 const PageNavSet = ({ id, pageNavItems }) => {
-  console.log(id, pageNavItems, "Teeeeeest");
-  const [activeSection, setActiveSection] = useState(pageNavItems[0].id);
+  const SliderComponent = Slider.default ? Slider.default : Slider;
+  const [activeSection, setActiveSection] = useState("");
   const sliderRef = useRef(null);
   const settings = {
+    className: `${nav_wrapper} center`,
     dots: false,
     arrows: false,
     infinite: false,
     slidesToShow: 3,
     variableWidth: true,
     centerMode: false,
+    centerPadding: "60px",
     slidesToScroll: 1,
     responsive: [
       {
         breakpoint: 1023,
         settings: {
-          variableWidth: false,
+          arrows: false,
           centerMode: true,
-          infinite: true
+          slidesToShow: 5,
+          variableWidth: true,
+          infinite: true,
+          centerPadding: "40px"
         }
       },
       {
         breakpoint: 768,
         settings: {
-          slidesToShow: 1,
+          arrows: false,
+          centerMode: true,
+          slidesToShow: 3,
           slidesToScroll: 1,
           infinite: true,
-          centerPadding: "0px",
-          centerMode: true,
-          focusOnSelect: true
+          focusOnSelect: true,
+          centerPadding: "40px"
         }
       }
     ]
   };
-  function autoSizer() {
-    const children = Array.from(document.querySelectorAll(".nav_child"));
-    if (children !== null) {
-      let totalWidth = 0;
-      const gaps = (children.length - 1) * 8;
-      children.forEach(
-        (child) => totalWidth += parseInt(child.offsetWidth, 10)
+  const scrolledElement = (elem) => {
+    if (elem) {
+      const rect = elem.getBoundingClientRect();
+      const viewHeight = Math.max(
+        document.documentElement.clientHeight,
+        window.innerHeight
       );
-      const containment = document.querySelector(
-        "#pageNav > .containment"
-      );
-      if (containment) {
-        containment.style.width = `min(${totalWidth + gaps + 6}px, 100%)`;
-      }
+      return rect.bottom - viewHeight < 100;
     }
-  }
-  window.onload = () => autoSizer();
-  window.onresize = () => autoSizer();
-  const handleScroll = throttle(() => {
-    const scrollPosition = typeof window !== "undefined" ? window.scrollY : 0;
-    let selectedSection = pageNavItems[0].id;
-    pageNavItems.forEach((section) => {
-      const element = document.getElementById(section.id);
-      if (element.offsetTop <= scrollPosition + window.innerHeight / 2) {
-        selectedSection = section.id;
+  };
+  const handleScroll = () => {
+    const main = document.querySelector("main");
+    const bannerHeight = main.getElementsByTagName("section")[0].offsetHeight;
+    const stickyElem = document.querySelector(`.${sticky_nav}`);
+    const scrollTop = window.scrollY;
+    if (scrollTop >= bannerHeight) {
+      stickyElem.classList.add(sticky_page_nav);
+    } else {
+      stickyElem.classList.remove(sticky_page_nav);
+    }
+    const pageNav = document.getElementById("pageNav");
+    const links = pageNav?.querySelectorAll("a");
+    links?.forEach((link) => {
+      if (scrolledElement(document.getElementById(link.hash.substring(1)))) {
+        setActiveSection(link.hash.substring(1));
       }
     });
-    setActiveSection(selectedSection);
-    const activeIndex = pageNavItems.findIndex(
-      (section) => section.id === selectedSection
-    );
-    if (sliderRef.current) {
-      sliderRef.current.slickGoTo(activeIndex, false);
-    }
-  }, 100);
+  };
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      window.addEventListener("scroll", handleScroll);
-      return () => {
-        window.removeEventListener("scroll", handleScroll);
-      };
-    }
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
   }, []);
-  return /* @__PURE__ */ jsx("nav", { className: css.sticky_nav, id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "containment", id: `id_${id}`, children: /* @__PURE__ */ jsx(Slider, { ref: sliderRef, ...settings, className: css.nav_wrapper, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("nav", { className: clsx(sticky_nav), id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "containment", id: `id_${id}`, children: /* @__PURE__ */ jsx(SliderComponent, { ...settings, ref: sliderRef, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
     PageNavItem,
     {
+      onClick: () => {
+        setActiveSection(section.id);
+      },
       id: section?.id,
       label: section.label,
       addClassName: `nav_child ${activeSection === section.id ? "active" : ""}`

package/dist/PageNavSet/PageNavigationSet.css.d.ts

@@ -0,0 +1,3 @@
+export declare const nav_wrapper: string;
+export declare const sticky_nav: string;
+export declare const sticky_page_nav: string;

package/dist/PageNavSet/PageNavigationSet.css.js

@@ -0,0 +1,9 @@
+/* empty css                                     */
+var nav_wrapper = "_1qd6ohx0";
+var sticky_nav = "_1qd6ohx1";
+var sticky_page_nav = "_1qd6ohx2";
+export {
+  nav_wrapper,
+  sticky_nav,
+  sticky_page_nav
+};

package/dist/PageNavSet/index.d.ts

@@ -1,2 +1 @@
-export * from './PageNavSet.module.css';
 export * from './PageNavSet';

package/dist/PageNavSet/index.js

@@ -1,8 +1,4 @@
-import { containment, nav_wrapper, sticky_nav } from "./PageNavSet.module.js";
 import { PageNavSet } from "./PageNavSet.js";
 export {
-  PageNavSet,
-  containment,
-  nav_wrapper,
-  sticky_nav
+  PageNavSet
 };

package/dist/SetContainer/SetContainer.js

@@ -37,11 +37,11 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "../Input/RadioButton.css.js";
+import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../Input/RadioButton.js";
-import "../Input/RadioButton.css.js";
-import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
@@ -82,8 +82,8 @@ import "next/navigation.js";
 /* empty css                                                      */
 /* empty css                                                       */
 import "../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
+/* empty css                                                 */
 /* empty css                                                    */
 /* empty css                                                  */
 import "../StepItem/StepItem.css.js";

package/dist/assets/ExecutiveBio/ExecutiveBio.css

@@ -83,7 +83,7 @@
 }
 .txcb8dl {
   flex: 1 1 0%;
-  max-width: 50%;
+  max-width: 100%;
 }
 .txcb8dl a {
   color: inherit;
@@ -111,6 +111,8 @@
   font-family: var(--header-font-family);
   text-decoration: none;
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .txcb8dp {
   color: #0062B3;
@@ -127,6 +129,13 @@
 .txcb8do a {
   text-decoration: none;
 }
+.txcb8dt {
+  display: flex;
+  flex-direction: column;
+}
+.txcb8du {
+  width: 50%;
+}
 $.txcb8dl + .txcb8du {
   margin-left: 1.5rem;
 }
@@ -266,6 +275,7 @@ $.txcb8dl + .txcb8du {
     margin-top: 16px;
   }
   .txcb8du {
+    width: 90%;
     margin-top: 16px;
   }
   .txcb8dw {

package/dist/assets/PageNavSet/PageNavigationSet.css

@@ -0,0 +1,76 @@
+._1qd6ohx1 {
+  background-color: #fff;
+  padding: 1.5rem 0;
+}
+._1qd6ohx0 .slick-track {
+  display: flex;
+  justify-content: center;
+}
+.slick-slide + .slick-slide {
+  margin-left: 8px;
+}
+main > .section_spacer:has(.sticky_nav) {
+  margin-top: 0;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+.slick-slider {
+  height: 56px;
+}
+.slick-list:focus {
+  outline: 0;
+}
+.slick-list.dragging {
+  cursor: pointer;
+}
+.slick-track {
+  display: flex !important;
+  justify-content: center !important;
+  width: auto !important;
+}
+._1qd6ohx2 {
+  position: fixed;
+  top: 10px;
+  z-index: 999;
+  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
+  margin: -10px 0;
+  width: 100%;
+}
+@media Screen and (max-width: 1023px) {
+  ._1qd6ohx1 containment {
+    width: 100% !important;
+    max-width: 100%;
+  }
+  ._1qd6ohx1::before, ._1qd6ohx1::after {
+    content: "";
+    position: absolute;
+    background-image: linear-gradient(270deg,#fff 10.8%,rgba(255, 255, 255, 0) 100%);
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1;
+    height: 100%;
+    width: 13%;
+  }
+  ._1qd6ohx1::before {
+    left: 0;
+    -webkit-transform: rotate(-180deg);
+    -ms-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+    right: 0;
+  }
+}
+@media screen and (min-width:1024px) {
+  .slick-track {
+    transform: none !important;
+  }
+}
+@media screen and (max-width:1023px) {
+  ._1qd6ohx2 {
+    position: fixed;
+    top: 10px;
+    z-index: 999;
+    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
+    margin: -10px 0;
+  }
+}

package/dist/index.css.js

@@ -1,3 +1,3 @@
-/* empty css                           */
 /* empty css                                         */
+/* empty css                           */
 /* empty css                         */

package/dist/main.js

@@ -42,12 +42,14 @@ import { FooterContent, FooterDisclosure, FooterIcons, FooterParagraph } from ".
 import { AxosFooterSiteMap } from "./FooterSiteMap/AxosBank/FooterSiteMap.js";
 import { app_col, footer_mobile, footer_section, footer_wrapper, ft_col, ft_col_header, ft_col_subheader, ft_panel, ft_panel_group, nested_grid } from "./FooterSiteMap/AxosBank/FooterSiteMap.css.js";
 import { ApplicationStart } from "./Forms/ApplicationStart.js";
+import { ClearingForm } from "./Forms/ClearingForm.js";
 import { CommercialLending } from "./Forms/CommercialLending.js";
 import { ContactCompany } from "./Forms/ContactCompany.js";
 import { ContactUs } from "./Forms/ContactUs.js";
 import { ContactUsAAS } from "./Forms/ContactUsAAS.js";
 import { ContactUsBusiness } from "./Forms/ContactUsBusiness.js";
 import { ContactUsNMLSId } from "./Forms/ContactUsNMLSId.js";
+import { CpraRequest } from "./Forms/CpraRequest.js";
 import { DealerServices } from "./Forms/DealerServices.js";
 import { EmailOnly } from "./Forms/EmailOnly.js";
 import { EmailUs } from "./Forms/EmailUs.js";
@@ -58,8 +60,6 @@ import { ScheduleCall } from "./Forms/ScheduleCall.js";
 import { ScheduleCallPremier } from "./Forms/ScheduleCallPremier.js";
 import { SuccesFormWrapper } from "./Forms/SuccesForm.js";
 import { WCPLSurvey } from "./Forms/WcplSurvey.js";
-import { ClearingForm } from "./Forms/ClearingForm.js";
-import { CpraRequest } from "./Forms/CpraRequest.js";
 import { HeroBanner } from "./HeroBanner/HeroBanner.js";
 import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, logout, reversed, reversed_lg_image } from "./HeroBanner/HeroBanner.css.js";
 import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./HeroBanner/SelectionBanner.css.js";
@@ -126,7 +126,6 @@ import { default as default29 } from "./NavigationMenu/AxosClearing/index.js";
 import { default as default30 } from "./NavigationMenu/AxosFiduciary/index.js";
 import { pn_btn, pn_link } from "./PageNavItem/PageNavItem.css.js";
 import { PageNavItem } from "./PageNavItem/PageNavItem.js";
-import { containment, nav_wrapper, sticky_nav } from "./PageNavSet/PageNavSet.module.js";
 import { PageNavSet } from "./PageNavSet/PageNavSet.js";
 import { SecondaryFooter } from "./SecondaryFooter/index.js";
 import { SocialMediaBar } from "./SocialMediaBar/index.js";
@@ -360,7 +359,6 @@ export {
   contacts,
   container,
   containerIconBillboard,
-  containment,
   content,
   copy,
   description,
@@ -464,7 +462,6 @@ export {
   media,
   mh_330,
   modifier,
-  nav_wrapper,
   nested_grid,
   ol,
   one_row,
@@ -516,7 +513,6 @@ export {
   smb_wrapper,
   step_num,
   steps_wrapper,
-  sticky_nav,
   sub_bullets,
   succes_check_mark,
   success_circle,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.115",
+  "version": "0.0.117",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -58,7 +58,8 @@
     "next": "^14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-slick": "^0.30.2"
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.8.0",

package/dist/PageNavSet/PageNavSet.module.js

@@ -1,14 +0,0 @@
-const sticky_nav = "_sticky_nav_g0p9u_1";
-const containment = "_containment_g0p9u_11";
-const nav_wrapper = "_nav_wrapper_g0p9u_15";
-const css = {
-  sticky_nav,
-  containment,
-  nav_wrapper
-};
-export {
-  containment,
-  css as default,
-  nav_wrapper,
-  sticky_nav
-};