@axos-web-dev/shared-components 0.0.159 → 0.0.161

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/ATMLocator/ATMLocator.js +2 -1
  2. package/dist/Button/Button.js +1 -0
  3. package/dist/Calculators/Calculator.js +1 -0
  4. package/dist/Calculators/MarginTradingCalculator/index.js +1 -1
  5. package/dist/Carousel/index.js +1 -0
  6. package/dist/Chevron/index.js +1 -0
  7. package/dist/Comparison/Comparison.js +1 -0
  8. package/dist/FaqAccordion/index.js +1 -0
  9. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +1 -0
  10. package/dist/Forms/ContactUsBusiness.js +1 -0
  11. package/dist/Forms/ContactUsNMLSId.js +1 -0
  12. package/dist/Forms/EmailOnly.js +1 -0
  13. package/dist/Forms/MortgageRate/MortgageRateForm.js +1 -0
  14. package/dist/Forms/MortgageRate/MortgageRateWatch.js +1 -0
  15. package/dist/Forms/SuccesForm.js +1 -0
  16. package/dist/Hyperlink/index.js +1 -0
  17. package/dist/ImageLink/ImageLink.js +1 -0
  18. package/dist/ImageLink/ImageLinkSet.js +1 -0
  19. package/dist/ImageLink/index.js +1 -0
  20. package/dist/Insight/Featured/CategorySelector.js +1 -0
  21. package/dist/Insight/Featured/Featured.js +2 -1
  22. package/dist/Insight/Featured/Header.js +2 -1
  23. package/dist/Modal/Modal.js +1 -0
  24. package/dist/NavigationMenu/AxosBank/NavData.js +1 -0
  25. package/dist/NavigationMenu/AxosBank/SubNavBar.js +4 -3
  26. package/dist/NavigationMenu/AxosBank/index.js +3 -0
  27. package/dist/PageNavItem/PageNavItem.d.ts +0 -1
  28. package/dist/PageNavItem/PageNavItem.js +2 -3
  29. package/dist/PageNavSet/PageNavSet.js +74 -32
  30. package/dist/PageNavSet/PageNavigationSet.css.d.ts +0 -1
  31. package/dist/PageNavSet/PageNavigationSet.css.js +1 -3
  32. package/dist/Pagination/Pagination.css.d.ts +3 -0
  33. package/dist/Pagination/Pagination.css.js +9 -0
  34. package/dist/Pagination/Pagination.d.ts +5 -0
  35. package/dist/Pagination/Pagination.js +74 -0
  36. package/dist/SetContainer/SetContainer.js +1 -0
  37. package/dist/assets/Insight/Featured/Featured.css +2 -0
  38. package/dist/assets/PageNavItem/PageNavItem.css +6 -1
  39. package/dist/assets/PageNavSet/PageNavigationSet.css +25 -23
  40. package/dist/assets/Pagination/Pagination.css +17 -0
  41. package/dist/main.d.ts +2 -1
  42. package/dist/main.js +2 -0
  43. package/package.json +1 -1
@@ -25,8 +25,8 @@ import "../ArticlesSet/ArticlesSet.css.js";
25
25
  import "../Calculators/ApyCalculator/ApyCalculator.css.js";
26
26
  import clsx from "clsx";
27
27
  import "../Table/Table.css.js";
28
- import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
29
28
  import "../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
29
+ import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
30
30
  import { calculator_headline, calculator_description } from "../Calculators/calculator.css.js";
31
31
  /* empty css */
32
32
  import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
@@ -93,6 +93,7 @@ import "next/link.js";
93
93
  import "../PageNavItem/PageNavItem.css.js";
94
94
  import "react-slick";
95
95
  /* empty css */
96
+ /* empty css */
96
97
  /* empty css */
97
98
  /* empty css */
98
99
  import "../StepItem/StepItem.css.js";
@@ -94,6 +94,7 @@ import "next/link.js";
94
94
  import "../PageNavItem/PageNavItem.css.js";
95
95
  import "react-slick";
96
96
  /* empty css */
97
+ /* empty css */
97
98
  /* empty css */
98
99
  /* empty css */
99
100
  import "../StepItem/StepItem.css.js";
@@ -85,6 +85,7 @@ import "next/link.js";
85
85
  import "../PageNavItem/PageNavItem.css.js";
86
86
  import "react-slick";
87
87
  /* empty css */
88
+ /* empty css */
88
89
  /* empty css */
89
90
  /* empty css */
90
91
  import "../StepItem/StepItem.css.js";
@@ -360,7 +360,7 @@ const MarginTradingCalculator = ({
360
360
  /* @__PURE__ */ jsx("td", { className: `${tc} ${bbr}`, "data-label": "E*TRADE", children: /* @__PURE__ */ jsx("span", { id: "eTrd" }) })
361
361
  ] }) })
362
362
  ] }),
363
- /* @__PURE__ */ jsx("p", { children: "For illustrative purposes only." }),
363
+ /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("em", { children: "For illustrative purposes only." }) }),
364
364
  /* @__PURE__ */ jsxs("div", { className: "text_center push_up_32", children: [
365
365
  /* @__PURE__ */ jsxs(
366
366
  "div",
@@ -96,6 +96,7 @@ import "next/link.js";
96
96
  import "../PageNavItem/PageNavItem.css.js";
97
97
  import "react-slick";
98
98
  /* empty css */
99
+ /* empty css */
99
100
  /* empty css */
100
101
  /* empty css */
101
102
  import "../StepItem/StepItem.css.js";
@@ -96,6 +96,7 @@ import "next/link.js";
96
96
  import "../PageNavItem/PageNavItem.css.js";
97
97
  import "react-slick";
98
98
  /* empty css */
99
+ /* empty css */
99
100
  /* empty css */
100
101
  /* empty css */
101
102
  import "../StepItem/StepItem.css.js";
@@ -95,6 +95,7 @@ import "next/link.js";
95
95
  import "../PageNavItem/PageNavItem.css.js";
96
96
  import "react-slick";
97
97
  /* empty css */
98
+ /* empty css */
98
99
  /* empty css */
99
100
  /* empty css */
100
101
  import "../StepItem/StepItem.css.js";
@@ -96,6 +96,7 @@ import "next/link.js";
96
96
  import "../PageNavItem/PageNavItem.css.js";
97
97
  import "react-slick";
98
98
  /* empty css */
99
+ /* empty css */
99
100
  /* empty css */
100
101
  /* empty css */
101
102
  import "../StepItem/StepItem.css.js";
@@ -92,6 +92,7 @@ import "next/link.js";
92
92
  import "../../PageNavItem/PageNavItem.css.js";
93
93
  import "react-slick";
94
94
  /* empty css */
95
+ /* empty css */
95
96
  /* empty css */
96
97
  /* empty css */
97
98
  import "../../StepItem/StepItem.css.js";
@@ -98,6 +98,7 @@ import "next/link.js";
98
98
  import "../PageNavItem/PageNavItem.css.js";
99
99
  import "react-slick";
100
100
  /* empty css */
101
+ /* empty css */
101
102
  /* empty css */
102
103
  /* empty css */
103
104
  import "../StepItem/StepItem.css.js";
@@ -98,6 +98,7 @@ import "next/link.js";
98
98
  import "../PageNavItem/PageNavItem.css.js";
99
99
  import "react-slick";
100
100
  /* empty css */
101
+ /* empty css */
101
102
  /* empty css */
102
103
  /* empty css */
103
104
  import "../StepItem/StepItem.css.js";
@@ -99,6 +99,7 @@ import "next/link.js";
99
99
  import "../PageNavItem/PageNavItem.css.js";
100
100
  import "react-slick";
101
101
  /* empty css */
102
+ /* empty css */
102
103
  /* empty css */
103
104
  /* empty css */
104
105
  import "../StepItem/StepItem.css.js";
@@ -99,6 +99,7 @@ import "next/link.js";
99
99
  import "../../PageNavItem/PageNavItem.css.js";
100
100
  import "react-slick";
101
101
  /* empty css */
102
+ /* empty css */
102
103
  /* empty css */
103
104
  /* empty css */
104
105
  import "../../StepItem/StepItem.css.js";
@@ -94,6 +94,7 @@ import "next/link.js";
94
94
  import "../../PageNavItem/PageNavItem.css.js";
95
95
  import "react-slick";
96
96
  /* empty css */
97
+ /* empty css */
97
98
  /* empty css */
98
99
  /* empty css */
99
100
  import "../../StepItem/StepItem.css.js";
@@ -83,6 +83,7 @@ import "next/link.js";
83
83
  import "../PageNavItem/PageNavItem.css.js";
84
84
  import "react-slick";
85
85
  /* empty css */
86
+ /* empty css */
86
87
  /* empty css */
87
88
  /* empty css */
88
89
  import "../StepItem/StepItem.css.js";
@@ -93,6 +93,7 @@ import "next/link.js";
93
93
  import "../PageNavItem/PageNavItem.css.js";
94
94
  import "react-slick";
95
95
  /* empty css */
96
+ /* empty css */
96
97
  /* empty css */
97
98
  /* empty css */
98
99
  import "../StepItem/StepItem.css.js";
@@ -90,6 +90,7 @@ import "next/link.js";
90
90
  import "../PageNavItem/PageNavItem.css.js";
91
91
  import "react-slick";
92
92
  /* empty css */
93
+ /* empty css */
93
94
  /* empty css */
94
95
  /* empty css */
95
96
  import "../StepItem/StepItem.css.js";
@@ -96,6 +96,7 @@ import "next/link.js";
96
96
  import "../PageNavItem/PageNavItem.css.js";
97
97
  import "react-slick";
98
98
  /* empty css */
99
+ /* empty css */
99
100
  /* empty css */
100
101
  /* empty css */
101
102
  import "../StepItem/StepItem.css.js";
@@ -91,6 +91,7 @@ import "next/link.js";
91
91
  import "../PageNavItem/PageNavItem.css.js";
92
92
  import "react-slick";
93
93
  /* empty css */
94
+ /* empty css */
94
95
  /* empty css */
95
96
  /* empty css */
96
97
  import "../StepItem/StepItem.css.js";
@@ -91,6 +91,7 @@ import "next/link.js";
91
91
  import "../../PageNavItem/PageNavItem.css.js";
92
92
  import "react-slick";
93
93
  /* empty css */
94
+ /* empty css */
94
95
  /* empty css */
95
96
  /* empty css */
96
97
  import "../../StepItem/StepItem.css.js";
@@ -95,6 +95,7 @@ import "next/link.js";
95
95
  import "../../PageNavItem/PageNavItem.css.js";
96
96
  import "react-slick";
97
97
  /* empty css */
98
+ /* empty css */
98
99
  /* empty css */
99
100
  /* empty css */
100
101
  import "../../StepItem/StepItem.css.js";
@@ -115,7 +116,7 @@ const FeaturedItem = (props) => {
115
116
  } = props;
116
117
  const variant = getVariant(fullVariant);
117
118
  return /* @__PURE__ */ jsxs("a", { href: url ?? "/", className: featured_subgrid_item, children: [
118
- /* @__PURE__ */ jsx("h3", { className: clsx(supertag({ variant }), featured_supertag), children: supertagText ?? "" }),
119
+ /* @__PURE__ */ jsx("h3", { className: clsx(supertag({ variant }), featured_supertag), children: (typeof supertagText == "string" && supertagText.replaceAll("-", " ")) ?? "" }),
119
120
  /* @__PURE__ */ jsx("h2", { className: clsx(featured_subgrid_title, title({ variant })), children: featureItemTitle ?? "" }),
120
121
  /* @__PURE__ */ jsxs("div", { children: [
121
122
  /* @__PURE__ */ jsx(
@@ -91,6 +91,7 @@ import "next/link.js";
91
91
  import "../../PageNavItem/PageNavItem.css.js";
92
92
  import "react-slick";
93
93
  /* empty css */
94
+ /* empty css */
94
95
  /* empty css */
95
96
  /* empty css */
96
97
  import "../../StepItem/StepItem.css.js";
@@ -117,7 +118,7 @@ const BreadcumbHeader = (props) => {
117
118
  {
118
119
  className: clsx(title({ variant: "primary" }), header_title_featured),
119
120
  children: [
120
- section,
121
+ section?.replaceAll("-", " "),
121
122
  " Insights"
122
123
  ]
123
124
  }
@@ -92,6 +92,7 @@ import "next/link.js";
92
92
  import "../PageNavItem/PageNavItem.css.js";
93
93
  import "react-slick";
94
94
  /* empty css */
95
+ /* empty css */
95
96
  /* empty css */
96
97
  /* empty css */
97
98
  import "../StepItem/StepItem.css.js";
@@ -91,6 +91,7 @@ import "next/link.js";
91
91
  import "../../PageNavItem/PageNavItem.css.js";
92
92
  import "react-slick";
93
93
  /* empty css */
94
+ /* empty css */
94
95
  /* empty css */
95
96
  /* empty css */
96
97
  import "../../StepItem/StepItem.css.js";
@@ -90,6 +90,9 @@ import { subNavItems } from "./NavData.js";
90
90
  import "../../PageNavItem/PageNavItem.css.js";
91
91
  import "react-slick";
92
92
  /* empty css */
93
+ import Link from "next/link.js";
94
+ import { usePathname } from "next/navigation.js";
95
+ /* empty css */
93
96
  /* empty css */
94
97
  /* empty css */
95
98
  import "../../StepItem/StepItem.css.js";
@@ -100,9 +103,7 @@ import "../../StepItemSet/StepItemSet.css.js";
100
103
  import "next/script.js";
101
104
  /* empty css */
102
105
  /* empty css */
103
- import { usePathname } from "next/navigation.js";
104
106
  import Image from "next/image.js";
105
- import Link from "next/link.js";
106
107
  import { sub_nav, dd_media } from "./SubNavbar.css.js";
107
108
  function SubNavBar() {
108
109
  const pathname = usePathname();
@@ -2400,7 +2401,7 @@ function SubNavBar() {
2400
2401
  Link,
2401
2402
  {
2402
2403
  href: "/commercial/lending/commercial-term-loans",
2403
- children: "Comnmercial Term Loans"
2404
+ children: "Commercial Term Loans"
2404
2405
  }
2405
2406
  ) }),
2406
2407
  /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -89,6 +89,9 @@ import { NavItem } from "../NavItem/index.js";
89
89
  import "../../PageNavItem/PageNavItem.css.js";
90
90
  import "react-slick";
91
91
  /* empty css */
92
+ import "next/link.js";
93
+ import "next/navigation.js";
94
+ /* empty css */
92
95
  /* empty css */
93
96
  /* empty css */
94
97
  import "../../StepItem/StepItem.css.js";
@@ -6,6 +6,5 @@ export interface PageNavItemProps {
6
6
  variant?: SecondaryTypes;
7
7
  addClassName?: string;
8
8
  label?: string;
9
- onClick?: () => void;
10
9
  }
11
10
  export declare const PageNavItem: FC<PageNavItemProps>;
@@ -5,11 +5,10 @@ const PageNavItem = ({
5
5
  id,
6
6
  addClassName,
7
7
  label,
8
- variant: fullVariant = "primary",
9
- onClick
8
+ variant: fullVariant = "primary"
10
9
  }) => {
11
10
  const variant = getVariant(fullVariant);
12
- return /* @__PURE__ */ jsx("div", { onClick, className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx(
11
+ return /* @__PURE__ */ jsx("div", { className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx(
13
12
  "a",
14
13
  {
15
14
  href: `#${id?.replace(/ /g, "-")}`,
@@ -1,14 +1,18 @@
1
1
  "use client";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import clsx from "clsx";
4
- import { useState, useEffect } from "react";
4
+ import { useState, useRef, useEffect } from "react";
5
5
  import Slider from "react-slick";
6
6
  import "../PageNavItem/PageNavItem.css.js";
7
7
  import { PageNavItem } from "../PageNavItem/PageNavItem.js";
8
- import { sticky_nav, nav_wrapper, sticky_page_nav } from "./PageNavigationSet.css.js";
8
+ import { sticky_nav, nav_wrapper } from "./PageNavigationSet.css.js";
9
9
  const PageNavSet = ({ id, pageNavItems }) => {
10
10
  const SliderComponent = Slider.default ? Slider.default : Slider;
11
- const [activeSection, setActiveSection] = useState("");
11
+ const [activeSection, setActiveSection] = useState(
12
+ pageNavItems[0].id.replace(/ /g, "-")
13
+ );
14
+ const sliderRef = useRef(null);
15
+ const [isClient, setIsClient] = useState(false);
12
16
  const settings = {
13
17
  className: `${nav_wrapper} center`,
14
18
  slidesToShow: 7,
@@ -20,69 +24,107 @@ const PageNavSet = ({ id, pageNavItems }) => {
20
24
  {
21
25
  breakpoint: 1023,
22
26
  settings: {
23
- slidesToShow: 5,
24
- slidesToScroll: 5,
27
+ slidesToShow: 2.5,
28
+ slidesToScroll: 4,
25
29
  swipeToSlide: true,
26
30
  infinite: true,
27
31
  centerMode: true,
28
- centerPadding: "0",
29
- focusOnSelect: true
32
+ centerPadding: "140px",
33
+ focusOnSelect: true,
34
+ variableWidth: false
30
35
  }
31
36
  },
32
37
  {
33
- breakpoint: 768,
38
+ breakpoint: 735,
34
39
  settings: {
35
- slidesToShow: 3,
36
- slidesToScroll: 3,
40
+ slidesToShow: 1,
41
+ slidesToScroll: 1,
37
42
  swipeToSlide: true,
38
43
  infinite: true,
39
44
  centerMode: true,
40
- centerPadding: "0",
41
- focusOnSelect: true
45
+ centerPadding: "0px",
46
+ focusOnSelect: false
42
47
  }
43
48
  }
44
49
  ]
45
50
  };
51
+ useEffect(() => {
52
+ setIsClient(true);
53
+ }, []);
46
54
  const scrolledElement = (elem) => {
55
+ const docViewTop = window.scrollY + 200;
47
56
  if (elem) {
48
- const rect = elem.getBoundingClientRect();
49
- const viewHeight = Math.max(
50
- document.documentElement.clientHeight,
51
- window.innerHeight
52
- );
53
- return rect.bottom - viewHeight < 0;
57
+ const elemTop = elem.getBoundingClientRect().top + window.scrollY;
58
+ if (elemTop < docViewTop) {
59
+ return true;
60
+ }
54
61
  }
55
62
  };
56
63
  const handleScroll = () => {
57
- const main = document.querySelector("main");
58
- const bannerHeight = main.getElementsByTagName("section")[0].offsetHeight;
59
- const stickyElem = document.querySelector(`.${sticky_nav}`);
60
- const scrollTop = window.scrollY;
61
- if (scrollTop >= bannerHeight) {
62
- stickyElem.classList.add(sticky_page_nav);
63
- } else {
64
- stickyElem.classList.remove(sticky_page_nav);
65
- }
64
+ let selectedSection = pageNavItems[0].id.replace(/ /g, "-");
66
65
  const pageNav = document.getElementById("pageNav");
67
66
  const links = pageNav?.querySelectorAll("a");
68
67
  links?.forEach((link) => {
69
68
  if (scrolledElement(document.getElementById(link.hash.substring(1)))) {
70
- setActiveSection(link.hash.substring(1));
69
+ selectedSection = link.hash.substring(1);
70
+ setActiveSection(selectedSection);
71
71
  }
72
72
  });
73
+ const activeIndex = pageNavItems.findIndex(
74
+ (section) => section.id === selectedSection
75
+ );
76
+ if (sliderRef.current) {
77
+ sliderRef.current.slickGoTo(activeIndex, true);
78
+ }
73
79
  };
74
80
  useEffect(() => {
81
+ handleScroll();
75
82
  window.addEventListener("scroll", handleScroll);
83
+ window.addEventListener("resize", handleScroll);
76
84
  return () => {
77
85
  window.removeEventListener("scroll", handleScroll);
86
+ window.removeEventListener("resize", handleScroll);
78
87
  };
79
88
  }, []);
80
- return /* @__PURE__ */ jsx("nav", { className: clsx(sticky_nav), id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "", id: `id_${id}`, children: /* @__PURE__ */ jsx(SliderComponent, { ...settings, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
89
+ function smoothScrollTo(targetY, duration, easingFunction) {
90
+ const startY = window.scrollY;
91
+ const distance = targetY - startY;
92
+ const startTime = performance.now();
93
+ function animateScroll(currentTime) {
94
+ const elapsedTime = currentTime - startTime;
95
+ const progress = Math.min(elapsedTime / duration, 1);
96
+ const easedProgress = easingFunction(progress);
97
+ window.scrollTo(0, startY + distance * easedProgress);
98
+ if (progress < 1) {
99
+ requestAnimationFrame(animateScroll);
100
+ }
101
+ }
102
+ requestAnimationFrame(animateScroll);
103
+ }
104
+ function linear(t) {
105
+ return t;
106
+ }
107
+ useEffect(() => {
108
+ if (isClient) {
109
+ const pageNavLinks = document.querySelectorAll(
110
+ '#pageNav a[href*="#"]'
111
+ );
112
+ pageNavLinks.forEach((link) => {
113
+ link.addEventListener("click", (e) => {
114
+ e.preventDefault();
115
+ const targetId = link.getAttribute("href")?.substring(1);
116
+ const targetElement = document.getElementById(targetId || "");
117
+ if (targetElement) {
118
+ const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY - 110;
119
+ smoothScrollTo(offsetTop, 200, linear);
120
+ }
121
+ });
122
+ });
123
+ }
124
+ }, [isClient]);
125
+ return /* @__PURE__ */ jsx("nav", { className: clsx(sticky_nav), id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "containment", id: `id_${id}`, style: { width: "100%" }, children: /* @__PURE__ */ jsx(SliderComponent, { ...settings, ref: sliderRef, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
81
126
  PageNavItem,
82
127
  {
83
- onClick: () => {
84
- setActiveSection(section?.id?.replace(/ /g, "-"));
85
- },
86
128
  id: section?.id,
87
129
  label: section.label,
88
130
  addClassName: `nav_child ${activeSection === section?.id?.replace(/ /g, "-") ? "active" : ""}`
@@ -1,3 +1,2 @@
1
1
  export declare const nav_wrapper: string;
2
2
  export declare const sticky_nav: string;
3
- export declare const sticky_page_nav: string;
@@ -1,9 +1,7 @@
1
1
  /* empty css */
2
2
  var nav_wrapper = "_1qd6ohx0";
3
3
  var sticky_nav = "_1qd6ohx1";
4
- var sticky_page_nav = "_1qd6ohx2";
5
4
  export {
6
5
  nav_wrapper,
7
- sticky_nav,
8
- sticky_page_nav
6
+ sticky_nav
9
7
  };
@@ -0,0 +1,3 @@
1
+ export declare const pagination_container: string;
2
+ export declare const active_page: string;
3
+ export declare const disabled_arrows: string;
@@ -0,0 +1,9 @@
1
+ /* empty css */
2
+ var pagination_container = "o4qn1i0";
3
+ var active_page = "o4qn1i1";
4
+ var disabled_arrows = "o4qn1i2";
5
+ export {
6
+ active_page,
7
+ disabled_arrows,
8
+ pagination_container
9
+ };
@@ -0,0 +1,5 @@
1
+ type Props = {
2
+ totalPages: number;
3
+ };
4
+ export declare function Pagination({ totalPages }: Props): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -0,0 +1,74 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import "../icons/ArrowIcon/ArrowIcon.css.js";
4
+ import "../icons/CheckIcon/CheckIcon.css.js";
5
+ import SvgChevronDown from "../icons/ChevronDown.js";
6
+ /* empty css */
7
+ /* empty css */
8
+ /* empty css */
9
+ /* empty css */
10
+ import clsx from "clsx";
11
+ import Link from "next/link.js";
12
+ import { useSearchParams } from "next/navigation.js";
13
+ import { active_page, pagination_container, disabled_arrows } from "./Pagination.css.js";
14
+ function Pagination({ totalPages }) {
15
+ const searchParams = useSearchParams();
16
+ const page = searchParams.get("page") || 1;
17
+ const renderPages = Array.from({ length: totalPages }).map((_, index) => {
18
+ return /* @__PURE__ */ jsx(
19
+ "a",
20
+ {
21
+ href: `?page=${index + 1}`,
22
+ className: clsx(Number(page) === Number(index + 1) ? active_page : ""),
23
+ children: Number(index + 1)
24
+ },
25
+ "page_" + index
26
+ );
27
+ });
28
+ return /* @__PURE__ */ jsxs("section", { className: clsx("containmentht", pagination_container), children: [
29
+ /* @__PURE__ */ jsx(
30
+ Link,
31
+ {
32
+ rel: "prev",
33
+ href: `?page=${+page > 1 ? +page - 1 : +page}`,
34
+ className: clsx(page == 1 ? disabled_arrows : ""),
35
+ children: /* @__PURE__ */ jsx(
36
+ SvgChevronDown,
37
+ {
38
+ rotate: -90,
39
+ style: {
40
+ transform: "rotate(90deg)",
41
+ color: "#2F5B88",
42
+ fill: "#2F5B88",
43
+ stroke: "#2F5B88"
44
+ }
45
+ }
46
+ )
47
+ }
48
+ ),
49
+ renderPages,
50
+ /* @__PURE__ */ jsx(
51
+ Link,
52
+ {
53
+ rel: "next",
54
+ href: `?page=${+page < totalPages ? +page + 1 : +page}`,
55
+ className: clsx(page == totalPages ? disabled_arrows : ""),
56
+ children: /* @__PURE__ */ jsx(
57
+ SvgChevronDown,
58
+ {
59
+ rotate: -90,
60
+ style: {
61
+ transform: "rotate(-90deg)",
62
+ color: "#2F5B88",
63
+ fill: "#2F5B88",
64
+ stroke: "#2F5B88"
65
+ }
66
+ }
67
+ )
68
+ }
69
+ )
70
+ ] });
71
+ }
72
+ export {
73
+ Pagination
74
+ };
@@ -93,6 +93,7 @@ import "next/link.js";
93
93
  import "../PageNavItem/PageNavItem.css.js";
94
94
  import "react-slick";
95
95
  /* empty css */
96
+ /* empty css */
96
97
  /* empty css */
97
98
  /* empty css */
98
99
  import "../StepItem/StepItem.css.js";
@@ -35,6 +35,7 @@
35
35
  -webkit-line-clamp: 2;
36
36
  overflow: hidden;
37
37
  text-overflow: ellipsis;
38
+ width: 100%;
38
39
  }
39
40
  ._1sr2o6v7 {
40
41
  margin: clamp(24px, 28px, 38px) 0;
@@ -79,6 +80,7 @@
79
80
  -webkit-box-orient: vertical;
80
81
  line-clamp: 2;
81
82
  -webkit-line-clamp: 2;
83
+ width: 100%;
82
84
  }
83
85
  @media screen and (max-width:1024px) {
84
86
 
@@ -2,7 +2,6 @@
2
2
  background-color: transparent;
3
3
  border-radius: 8px;
4
4
  overflow: hidden;
5
- transition: all 0.15s ease-in;
6
5
  outline: 0 !important;
7
6
  text-align: center;
8
7
  }
@@ -60,4 +59,10 @@
60
59
  font: 400 16px / 1.5 var(--main-font-family);
61
60
  padding: 8px 24px;
62
61
  }
62
+ }
63
+ @media (max-width:1023px) {
64
+ ._13qd2mm3 {
65
+ width: 100%;
66
+ text-align: center;
67
+ }
63
68
  }
@@ -9,28 +9,34 @@
9
9
  .slick-slide + .slick-slide {
10
10
  margin-left: 8px;
11
11
  }
12
- .section_spacer:has(._1qd6ohx1) {
13
- margin-top: 0;
14
- position: sticky;
15
- top: 0;
16
- z-index: 999;
17
- }
18
12
  .slick-list:focus {
19
13
  outline: 0;
20
14
  }
21
15
  .slick-list.dragging {
22
16
  cursor: pointer;
23
17
  }
24
- ._1qd6ohx2 {
25
- position: fixed;
26
- top: 10px;
18
+ .slick-slide {
19
+ margin-left: 8px;
20
+ }
21
+ .section_spacer:has(#pageNav) {
22
+ margin-top: 0;
23
+ position: sticky;
24
+ top: 0;
27
25
  z-index: 999;
28
- animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
29
- margin: -10px 0;
30
- width: 100%;
31
26
  }
32
- @media Screen and (max-width: 1023px) {
33
- ._1qd6ohx1 containment {
27
+ @media screen and (max-width:735px) {
28
+ .slick-slide + .slick-slide {
29
+ margin-left: 4px;
30
+ }
31
+ .slick-track {
32
+ left: -23px !important;
33
+ }
34
+ .slick-slide {
35
+ flex: 0 0 214px;
36
+ }
37
+ }
38
+ @media screen and (max-width: 1023px) {
39
+ ._1qd6ohx1 .containment {
34
40
  width: 100% !important;
35
41
  max-width: 100%;
36
42
  }
@@ -54,6 +60,11 @@
54
60
  right: 0;
55
61
  }
56
62
  }
63
+ @media screen and (max-width: 500px) {
64
+ ._1qd6ohx1::before, ._1qd6ohx1::after {
65
+ width: 20px;
66
+ }
67
+ }
57
68
  @media screen and (min-width:1024px) {
58
69
  .slick-track {
59
70
  display: flex !important;
@@ -61,13 +72,4 @@
61
72
  width: auto !important;
62
73
  transform: none !important;
63
74
  }
64
- }
65
- @media screen and (max-width:1023px) {
66
- ._1qd6ohx2 {
67
- position: fixed;
68
- top: 10px;
69
- z-index: 999;
70
- animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
71
- margin: -10px 0;
72
- }
73
75
  }
@@ -0,0 +1,17 @@
1
+ .o4qn1i0 {
2
+ display: flex;
3
+ gap: 20px;
4
+ justify-content: center;
5
+ margin: 24px 0;
6
+ color: #2F5B88;
7
+ }
8
+ .o4qn1i1 {
9
+ font-weight: bolder;
10
+ cursor: not-allowed;
11
+ pointer-events: none;
12
+ }
13
+ .o4qn1i2 {
14
+ cursor: not-allowed;
15
+ pointer-events: none;
16
+ filter: grayscale(100%);
17
+ }
package/dist/main.d.ts CHANGED
@@ -12,8 +12,8 @@ export * from './Button';
12
12
  export * from './Calculators';
13
13
  export * from './Calculators/AnnualFeeCalculator';
14
14
  export * from './Calculators/ApyCalculator';
15
- export * from './Calculators/BalanceAPYCalculator';
16
15
  export * from './Calculators/AxosOneCalculator';
16
+ export * from './Calculators/BalanceAPYCalculator';
17
17
  export * from './Calculators/MarginTradingCalculator';
18
18
  export * from './Calculators/MonthlyPaymentCalculator';
19
19
  export * from './CallToActionBar';
@@ -45,6 +45,7 @@ export * from './Modal';
45
45
  export * from './NavigationMenu';
46
46
  export * from './PageNavItem';
47
47
  export * from './PageNavSet';
48
+ export * from './Pagination/Pagination';
48
49
  export * from './SecondaryFooter';
49
50
  export * from './SetContainer';
50
51
  export * from './SocialMediaBar';
package/dist/main.js CHANGED
@@ -140,6 +140,7 @@ import { default as default30 } from "./NavigationMenu/AxosFiduciary/index.js";
140
140
  import { pn_btn, pn_link } from "./PageNavItem/PageNavItem.css.js";
141
141
  import { PageNavItem } from "./PageNavItem/PageNavItem.js";
142
142
  import { PageNavSet } from "./PageNavSet/PageNavSet.js";
143
+ import { Pagination } from "./Pagination/Pagination.js";
143
144
  import { SecondaryFooter } from "./SecondaryFooter/index.js";
144
145
  import { SocialMediaBar } from "./SocialMediaBar/index.js";
145
146
  import { StepItem } from "./StepItem/StepItem.js";
@@ -282,6 +283,7 @@ export {
282
283
  default29 as NavBarAXC,
283
284
  PageNavItem,
284
285
  PageNavSet,
286
+ Pagination,
285
287
  QuickPricer,
286
288
  default16 as QuoteIconGrey,
287
289
  default17 as QuoteIconWhite,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@axos-web-dev/shared-components",
3
3
  "description": "Axos shared components library for web.",
4
- "version": "0.0.159",
4
+ "version": "0.0.161",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",