@axos-web-dev/shared-components 0.0.167 → 0.0.168

package/dist/icons/CalendarIcon/CalendarIcon.d.ts

@@ -0,0 +1,3 @@
+import { TIconProps } from '../../types/icon';
+
+export declare const CalendarIcon: import('react').NamedExoticComponent<TIconProps>;

package/dist/icons/CalendarIcon/CalendarIcon.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const Component = ({ height = 24, width = 24, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height,
+    viewBox: "0 -960 960 960",
+    width,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M180-80q-24 0-42-18t-18-42v-620q0-24 18-42t42-18h65v-60h65v60h340v-60h65v60h65q24 0 42 18t18 42v620q0 24-18 42t-42 18H180Zm0-60h600v-430H180v430Zm0-490h600v-130H180v130Zm0 0v-130 130Zm300 230q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" })
+  }
+);
+const CalendarIcon = memo(Component);
+export {
+  CalendarIcon
+};

package/dist/icons/CalendarIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarIcon';

package/dist/icons/CalendarIcon/index.js

@@ -0,0 +1,4 @@
+import { CalendarIcon } from "./CalendarIcon.js";
+export {
+  CalendarIcon
+};

package/dist/icons/CheckIcon/CheckIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                   */
-/* empty css                                      */
-/* empty css                             */
+/* empty css                                       */
+/* empty css                                          */
+/* empty css                                                     */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkColor = createRuntimeFn({ defaultClassName: "_1xajnqu0", variantClassNames: { variant: { primary: "_1xajnqu1", secondary: "_1xajnqu2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/icons/DownloadIcon/DownloadIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                   */
-/* empty css                                      */
-/* empty css                                */
+/* empty css                                       */
+/* empty css                                          */
+/* empty css                                                           */
 var DownloadColor = "_1r03g400";
 export {
   DownloadColor

package/dist/icons/FollowIcon/FollowIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                   */
-/* empty css                                      */
-/* empty css                              */
+/* empty css                                       */
+/* empty css                                          */
+/* empty css                                                       */
 var FollowColor = "_1wjdwci0";
 export {
   FollowColor

package/dist/icons/Star/Star.css.js

@@ -1,4 +1,4 @@
-/* empty css                        */
+/* empty css                                           */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Star = createRuntimeFn({ defaultClassName: "mi4mae0", variantClassNames: { variant: { gold: "mi4mae1", gray: "mi4mae2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/index.css.js

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

package/dist/main.js

@@ -108,11 +108,12 @@ import { ImageBillboardSet } from "./ImageBillboard/ImageBillboard.js";
 import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, header, imagePlacement, image_background, mh_330, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, two_inline, up_to } from "./ImageBillboard/ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboard/ImageBillboardSet.js";
 import { SetContainer } from "./SetContainer/SetContainer.js";
-import { heading, imageLinkContainer, inline_container, isolate_container, set_container, set_logo, setcontainer_section_text } from "./SetContainer/SetContainer.css.js";
+import { heading, imageLinkContainer, inline_container, isolate_container, set_container, set_container_cols, set_logo, setcontainer_section_text } from "./SetContainer/SetContainer.css.js";
 import "react";
 import { ImageLinkSet } from "./ImageLink/ImageLinkSet.js";
 import { Checkbox } from "./Input/Checkbox.js";
 import { CurrencyInput } from "./Input/CurrencyInput.js";
+import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { Dropdown } from "./Input/Dropdown.js";
 import { dp_input, selectInput } from "./Input/Dropdown.css.js";
 import { Input } from "./Input/Input.js";
@@ -120,7 +121,6 @@ import { container, helperText, iconContainer, iconContainerBase, iconInput, inp
 import { InputAmount } from "./Input/InputAmount.js";
 import { InputPhone } from "./Input/InputPhone.js";
 import { InputTextArea } from "./Input/InputTextArea.js";
-import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { CategorySelector, InsightItem } from "./Insight/Featured/CategorySelector.js";
 import { Featured, FeaturedItem } from "./Insight/Featured/Featured.js";
 import { featured_center_vertical, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";
@@ -167,6 +167,7 @@ import { findMoreAxosDomains, isAllowedUrl } from "./utils/allowedAxosDomains.js
 import { associatedEmail } from "./utils/EverestValidity.js";
 import { getVariant, getVariantWithRegex } from "./utils/getVariant.js";
 import { isAbsoluteUrl, isEmailLink, isPhoneLink, shortUrl, validateLink } from "./utils/validateExternalLinks.js";
+import { columnValues } from "./utils/variant.types.js";
 import { padding_in_footer, smb_section, smb_wrapper } from "./SocialMediaBar/SocialMediaBar.css.js";
 export {
   default20 as AASLogo,
@@ -371,6 +372,7 @@ export {
   calculator_headline,
   centerSelect,
   checkbox_group,
+  columnValues,
   comparison,
   comparison_buttons,
   comparison_container,
@@ -555,6 +557,7 @@ export {
   selection_section_icon,
   selection_section_icon_img,
   set_container,
+  set_container_cols,
   set_logo,
   setcontainer_section_text,
   shift,

package/dist/themes/axos.css.js

@@ -1,4 +1,4 @@
-/* empty css                        */
+/* empty css                                    */
 var axosTheme = "_1073cm80";
 var vars = { colors: { primary: { background: "var(--_1073cm81)", body: "var(--_1073cm82)", headline: "var(--_1073cm83)", textGradient: "var(--_1073cm84)", textButton: "var(--_1073cm85)", backgroundButton: "var(--_1073cm86)", border: "var(--_1073cm87)" }, secondary: { background: "var(--_1073cm88)", body: "var(--_1073cm89)", headline: "var(--_1073cm8a)", textGradient: "var(--_1073cm8b)", textButton: "var(--_1073cm8c)", backgroundButton: "var(--_1073cm8d)", border: "var(--_1073cm8e)" }, tertiary: { background: "var(--_1073cm8f)", body: "var(--_1073cm8g)", headline: "var(--_1073cm8h)", textGradient: "var(--_1073cm8i)", textButton: "var(--_1073cm8j)", backgroundButton: "var(--_1073cm8k)", border: "var(--_1073cm8l)" }, quaternary: { background: "var(--_1073cm8m)", body: "var(--_1073cm8n)", headline: "var(--_1073cm8o)", textGradient: "var(--_1073cm8p)", textButton: "var(--_1073cm8q)", backgroundButton: "var(--_1073cm8r)", border: "var(--_1073cm8s)" } }, error: "var(--_1073cm8t)", disabled: { border: "var(--_1073cm8u)", color: "var(--_1073cm8v)", background: "var(--_1073cm8w)" }, icons: { check: { primary: "var(--_1073cm8x)", secondary: "var(--_1073cm8y)" } }, table: { highlight: "var(--_1073cm8z)", color: "var(--_1073cm810)" }, footer: { link: { color: "var(--_1073cm811)" } } };
 export {

package/dist/themes/premier.css.js

@@ -1,5 +1,5 @@
-/* empty css                        */
-/* empty css                           */
+/* empty css                                    */
+/* empty css                                       */
 var premierTheme = "_1es6o1h0";
 export {
   premierTheme

package/dist/types/icon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export type TIconProps = SVGProps<SVGSVGElement>;

package/dist/types/icon.js

@@ -0,0 +1 @@
+

package/dist/types/popover.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export type TPopoverPosition = "left" | "center" | "right";
+export type TPopoverProps = {
+    children?: ReactNode;
+    trigger: ReactNode | ReactNode[];
+    position?: TPopoverPosition;
+};

package/dist/types/popover.js

@@ -0,0 +1 @@
+

package/dist/utils/allowedAxosDomains.js

@@ -29,7 +29,10 @@ const moreDomains = {
   "{JHALOAN}": process.env.JHA_LOANSPQ || "https://jha.loanspq.com",
   "{AXSECURITIES}": process.env.AXOS_SECURITIES_URL ?? "https://www.axossecurities.com",
   "{LIBSYN}": process.env.AXOS_LIBSYN || "https://sites.libsyn.com",
-  "{AXBBUSINESSCENTER}": process.env.AXOS_BUSINESS_CENTER || "https://www.axosbusinesscenter.com"
+  "{AXBC}": process.env.AXOS_BUSINESS_CENTER ?? "https://www.axosbusinesscenter.com",
+  "{AXMWDJ}": process.env.AXOS_MY_WORK_DAY_JOBS ?? "https://axos.wd5.myworkdayjobs.com/Axos",
+  "{AXMHA}": process.env.AXOS_MY_HOME_ADVANTAGE ?? "https://axos.myhomeadvantage.com",
+  "{AXTPL}": process.env.AXOS_THIRD_PARTY_LENDING ?? "https://thirdpartylending.axosbank.com"
 };
 const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);

package/dist/utils/constants/format.d.ts

@@ -0,0 +1 @@
+export declare const FORMAT_DATE = "MM.dd.yyyy";

package/dist/utils/constants/format.js

@@ -0,0 +1,4 @@
+const FORMAT_DATE = "MM.dd.yyyy";
+export {
+  FORMAT_DATE
+};

package/dist/utils/constants/popper.d.ts

@@ -0,0 +1,6 @@
+export declare const POPOVER_WIDTH = 512;
+export declare const POPOVER_POSITION_STYLES: {
+    left: string;
+    center: string;
+    right: string;
+};

package/dist/utils/constants/popper.js

@@ -0,0 +1,10 @@
+const POPOVER_WIDTH = 512;
+const POPOVER_POSITION_STYLES = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+export {
+  POPOVER_POSITION_STYLES,
+  POPOVER_WIDTH
+};

package/dist/utils/getNumber.d.ts

@@ -0,0 +1 @@
+export declare const getNumOfColumns: (text: string | undefined) => 1 | 2 | 3 | 4 | undefined;

package/dist/utils/getNumber.js

@@ -0,0 +1,17 @@
+const getNumOfColumns = (text) => {
+  if (text) {
+    if (text.includes("4")) {
+      return 4;
+    } else if (text.includes("3")) {
+      return 3;
+    } else if (text.includes("2")) {
+      return 2;
+    } else if (text.includes("1")) {
+      return 1;
+    }
+  }
+  return void 0;
+};
+export {
+  getNumOfColumns
+};

package/dist/utils/hooks/usePopover.d.ts

@@ -0,0 +1,25 @@
+import { TPopoverPosition } from '../../types/popover';
+import { CSSProperties, Dispatch, RefObject, SetStateAction } from 'react';
+
+type TUsePopoverResponse = {
+    attributes: {
+        [p: string]: {
+            [p: string]: string;
+        } | undefined;
+    };
+    onPopperElement: Dispatch<SetStateAction<HTMLDivElement | null | undefined>>;
+    onPopoverPosition: Dispatch<SetStateAction<TPopoverPosition>>;
+    onReferenceElement: Dispatch<SetStateAction<HTMLButtonElement | null | undefined>>;
+    popperElement?: HTMLDivElement | null | undefined;
+    popoverPosition: TPopoverPosition;
+    referenceElement?: HTMLButtonElement | null | undefined;
+    styles: {
+        [p: string]: CSSProperties;
+    };
+};
+type TProps = {
+    triggerRef: RefObject<HTMLDivElement>;
+};
+type TUsePopover = (props: TProps) => TUsePopoverResponse;
+export declare const usePopover: TUsePopover;
+export {};

package/dist/utils/hooks/usePopover.js

@@ -0,0 +1,64 @@
+"use client";
+import { useState, useEffect } from "react";
+import { usePopper } from "react-popper";
+import { POPOVER_WIDTH } from "../constants/popper.js";
+const usePopover = (props) => {
+  const { triggerRef } = props;
+  const position = "center";
+  const [popperElement, setPopperElement] = useState(null);
+  const [popoverPosition, setPopoverPosition] = useState(position);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: "flip",
+        options: {
+          altBoundary: true
+        }
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [0, 12]
+        }
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          altBoundary: true,
+          padding: 12
+        }
+      }
+    ]
+  });
+  useEffect(() => {
+    if (triggerRef.current && !position) {
+      const { right, width } = triggerRef.current.getBoundingClientRect();
+      const bodyWidth = document.body.clientWidth;
+      const centerWidth = POPOVER_WIDTH / 2;
+      const triggerCenter = right - width / 2;
+      const rightSize = bodyWidth - triggerCenter;
+      const isRight = rightSize < centerWidth;
+      const isLeft = centerWidth > triggerCenter;
+      if (isRight) {
+        setPopoverPosition("right");
+      }
+      if (isLeft) {
+        setPopoverPosition("left");
+      }
+    }
+  }, []);
+  return {
+    attributes,
+    onPopperElement: setPopperElement,
+    onPopoverPosition: setPopoverPosition,
+    onReferenceElement: setReferenceElement,
+    popperElement,
+    popoverPosition,
+    referenceElement,
+    styles
+  };
+};
+export {
+  usePopover
+};

package/dist/utils/index.js

@@ -2,8 +2,10 @@ import { findMoreAxosDomains, isAllowedUrl } from "./allowedAxosDomains.js";
 import { associatedEmail } from "./EverestValidity.js";
 import { getVariant, getVariantWithRegex } from "./getVariant.js";
 import { isAbsoluteUrl, isEmailLink, isPhoneLink, shortUrl, validateLink } from "./validateExternalLinks.js";
+import { columnValues } from "./variant.types.js";
 export {
   associatedEmail,
+  columnValues,
   findMoreAxosDomains,
   getVariant,
   getVariantWithRegex,

package/dist/utils/variant.types.d.ts

@@ -4,3 +4,5 @@ export type SecondaryTypes = "primary" | "secondary";
 export type QuaternaryTypes = "primary" | "secondary" | "tertiary" | "quaternary";
 export type SideProps = "left" | "right";
 export type StarIconTypes = "gold" | "gray";
+export declare const columnValues: readonly [1, 2, 3, 4, undefined];
+export type ColumnTypes = (typeof columnValues)[number];

package/dist/utils/variant.types.js

@@ -1 +1,4 @@
-
+const columnValues = [1, 2, 3, 4, void 0];
+export {
+  columnValues
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.167",
+  "version": "0.0.168",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",