@axos-web-dev/shared-components 2.0.0-dev.12 → 2.0.0-dev.13-stepForm

package/dist/Forms/MortgageRate/mortgageLeadForm.config.d.ts

@@ -0,0 +1,101 @@
+export declare const mortgageTypeOptions: readonly [{
+    readonly label: "Purchase rates";
+    readonly value: "purchase-rates";
+}, {
+    readonly label: "Refinance rates";
+    readonly value: "refinance-rates";
+}];
+export declare const propertyTypeOptions: readonly [{
+    readonly label: "Single family home";
+    readonly value: "single-family-home";
+}, {
+    readonly label: "Condo";
+    readonly value: "condo";
+}, {
+    readonly label: "Co-op";
+    readonly value: "co-op";
+}, {
+    readonly label: "Manufactured Single Wide";
+    readonly value: "manufactured-single-wide";
+}, {
+    readonly label: "Manufactured Double Wide";
+    readonly value: "manufactured-double-wide";
+}];
+export declare const propertyUseOptions: readonly [{
+    readonly label: "Primary residence";
+    readonly value: "primary-residence";
+}, {
+    readonly label: "Vacation home";
+    readonly value: "vacation-home";
+}, {
+    readonly label: "Investment";
+    readonly value: "investment";
+}];
+export declare const creditScoreOptions: readonly [{
+    readonly label: "740+";
+    readonly value: "740+";
+}, {
+    readonly label: "739-720";
+    readonly value: "739-720";
+}, {
+    readonly label: "719-700";
+    readonly value: "719-700";
+}, {
+    readonly label: "699-680";
+    readonly value: "699-680";
+}, {
+    readonly label: "679-660";
+    readonly value: "679-660";
+}, {
+    readonly label: "659-640";
+    readonly value: "659-640";
+}, {
+    readonly label: "639-620";
+    readonly value: "639-620";
+}, {
+    readonly label: "Below 620";
+    readonly value: "below-620";
+}];
+export declare const amortizationTypeOptions: readonly [{
+    readonly label: "Fixed";
+    readonly value: "fixed";
+}, {
+    readonly label: "ARM";
+    readonly value: "arm";
+}];
+export declare const fixedLoanTypeOptions: readonly [{
+    readonly label: "Conforming";
+    readonly value: "conforming";
+}, {
+    readonly label: "Non-Conforming";
+    readonly value: "non-conforming";
+}, {
+    readonly label: "FHA";
+    readonly value: "fha";
+}, {
+    readonly label: "VA";
+    readonly value: "va";
+}];
+export declare const fixedLoanTermOptions: readonly [{
+    readonly label: "30 Year";
+    readonly value: "30-year";
+}, {
+    readonly label: "20 Year";
+    readonly value: "20-year";
+}, {
+    readonly label: "15 Year";
+    readonly value: "15-year";
+}, {
+    readonly label: "10 Year";
+    readonly value: "10-year";
+}];
+export declare const armLoanTermOptions: readonly [{
+    readonly label: "5 Year";
+    readonly value: "5-year";
+}, {
+    readonly label: "7 Year";
+    readonly value: "7-year";
+}, {
+    readonly label: "10 Year";
+    readonly value: "10-year";
+}];

package/dist/Forms/MortgageRate/mortgageLeadForm.config.js

@@ -0,0 +1,57 @@
+const mortgageTypeOptions = [
+  { label: "Purchase rates", value: "purchase-rates" },
+  { label: "Refinance rates", value: "refinance-rates" }
+];
+const propertyTypeOptions = [
+  { label: "Single family home", value: "single-family-home" },
+  { label: "Condo", value: "condo" },
+  { label: "Co-op", value: "co-op" },
+  { label: "Manufactured Single Wide", value: "manufactured-single-wide" },
+  { label: "Manufactured Double Wide", value: "manufactured-double-wide" }
+];
+const propertyUseOptions = [
+  { label: "Primary residence", value: "primary-residence" },
+  { label: "Vacation home", value: "vacation-home" },
+  { label: "Investment", value: "investment" }
+];
+const creditScoreOptions = [
+  { label: "740+", value: "740+" },
+  { label: "739-720", value: "739-720" },
+  { label: "719-700", value: "719-700" },
+  { label: "699-680", value: "699-680" },
+  { label: "679-660", value: "679-660" },
+  { label: "659-640", value: "659-640" },
+  { label: "639-620", value: "639-620" },
+  { label: "Below 620", value: "below-620" }
+];
+const amortizationTypeOptions = [
+  { label: "Fixed", value: "fixed" },
+  { label: "ARM", value: "arm" }
+];
+const fixedLoanTypeOptions = [
+  { label: "Conforming", value: "conforming" },
+  { label: "Non-Conforming", value: "non-conforming" },
+  { label: "FHA", value: "fha" },
+  { label: "VA", value: "va" }
+];
+const fixedLoanTermOptions = [
+  { label: "30 Year", value: "30-year" },
+  { label: "20 Year", value: "20-year" },
+  { label: "15 Year", value: "15-year" },
+  { label: "10 Year", value: "10-year" }
+];
+const armLoanTermOptions = [
+  { label: "5 Year", value: "5-year" },
+  { label: "7 Year", value: "7-year" },
+  { label: "10 Year", value: "10-year" }
+];
+export {
+  amortizationTypeOptions,
+  armLoanTermOptions,
+  creditScoreOptions,
+  fixedLoanTermOptions,
+  fixedLoanTypeOptions,
+  mortgageTypeOptions,
+  propertyTypeOptions,
+  propertyUseOptions
+};

package/dist/Forms/MortgageRate/mortgageLeadForm.types.d.ts

@@ -0,0 +1,29 @@
+export type MortgageIntent = "purchase-rates" | "refinance-rates";
+export type PropertyType = "single-family-home" | "condo" | "co-op" | "manufactured-single-wide" | "manufactured-double-wide";
+export type PropertyUse = "primary-residence" | "vacation-home" | "investment";
+export type CreditScoreRange = "740+" | "739-720" | "719-700" | "699-680" | "679-660" | "659-640" | "639-620" | "below-620";
+export type AmortizationType = "fixed" | "arm";
+export type FixedLoanType = "conforming" | "non-conforming" | "fha" | "va";
+export type LoanTerm = "30-year" | "20-year" | "15-year" | "10-year" | "7-year" | "5-year";
+export interface MortgageLeadFormValues {
+    mortgageType: MortgageIntent | "";
+    propertyType: PropertyType | "";
+    propertyUse: PropertyUse | "";
+    creditScore: CreditScoreRange | "";
+    purchasePrice: string;
+    downPaymentPercent: number;
+    downPaymentAmount: string;
+    estimatedHomeValue: string;
+    currentLoanBalance: string;
+    cashOutAmount: string;
+    zipCode: string;
+    amortizationType: AmortizationType | "";
+    fixedLoanType: FixedLoanType | "";
+    loanTerm: LoanTerm | "";
+    desiredRate: string;
+    discountPoints: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phoneNumber: string;
+}

package/dist/Forms/MortgageRate/mortgageLeadForm.types.js

@@ -0,0 +1 @@
+

package/dist/Forms/MortgageRate/mortgageLeadForm.utils.d.ts

@@ -0,0 +1,11 @@
+export declare function onlyDigits(value: string): string;
+export declare function formatPhoneInput(value: string): string;
+export declare function validatePhone(phone: string): boolean;
+export declare function parseCurrencyInput(value: string): number;
+export declare function formatCurrencyInput(value: string): string;
+export declare function formatCurrency(value: number): string;
+export declare function validateZipCode(zip: string): boolean;
+export declare function validateEmail(email: string): boolean;
+export declare function calculatePercentAmount(base: string, percent: number): string;
+export declare function formatPercentInput(value: string): string;
+export declare function normalizePercentDisplay(value: string): string;

package/dist/Forms/MortgageRate/mortgageLeadForm.utils.js

@@ -0,0 +1,74 @@
+function onlyDigits(value) {
+  return value.replace(/\D/g, "");
+}
+function formatPhoneInput(value) {
+  const digits = onlyDigits(value).slice(0, 10);
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+}
+function validatePhone(phone) {
+  return onlyDigits(phone).length === 10;
+}
+function parseCurrencyInput(value) {
+  const cleaned = value.replace(/[^\d.]/g, "");
+  const parsed = parseFloat(cleaned);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+function formatCurrencyInput(value) {
+  const numeric = parseCurrencyInput(value);
+  if (!numeric) return "";
+  return new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 0
+  }).format(numeric);
+}
+function formatCurrency(value) {
+  if (!Number.isFinite(value)) return "$0";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function validateZipCode(zip) {
+  return /^\d{5}$/.test(zip);
+}
+function validateEmail(email) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+function calculatePercentAmount(base, percent) {
+  const numericBase = parseCurrencyInput(base);
+  if (!numericBase) return "";
+  const amount = numericBase * (percent / 100);
+  return String(Math.round(amount));
+}
+function formatPercentInput(value) {
+  const cleaned = value.replace(/[^\d.]/g, "");
+  if (!cleaned) return "";
+  const parts = cleaned.split(".");
+  const whole = parts[0] ?? "";
+  const decimal = parts[1] ?? "";
+  const normalizedWhole = whole.replace(/^0+(?=\d)/, "") || "0";
+  const normalizedDecimal = decimal.slice(0, 3);
+  if (cleaned.includes(".")) {
+    return `${normalizedWhole}.${normalizedDecimal}`;
+  }
+  return normalizedWhole;
+}
+function normalizePercentDisplay(value) {
+  const cleaned = formatPercentInput(value);
+  return cleaned ? `${cleaned}%` : "";
+}
+export {
+  calculatePercentAmount,
+  formatCurrency,
+  formatCurrencyInput,
+  formatPercentInput,
+  formatPhoneInput,
+  normalizePercentDisplay,
+  onlyDigits,
+  parseCurrencyInput,
+  validateEmail,
+  validatePhone,
+  validateZipCode
+};

package/dist/assets/Forms/MortgageRate/MortgageRateStep.css

@@ -0,0 +1,339 @@
+@keyframes _13s19j312 {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(220%);
+  }
+}
+._13s19j30 {
+  background: #e9f8ff;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  isolation: isolate;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: 56px 24px;
+  position: relative;
+}
+._13s19j31 {
+  background: #fff;
+  border: 1px solid #c9e6f7;
+  border-radius: 24px;
+  box-shadow: 0 16px 40px rgba(20, 38, 61, 0.08);
+  margin-inline: auto;
+  max-width: 760px;
+  padding: 32px;
+  width: 100%;
+}
+._13s19j32 {
+  margin-bottom: 28px;
+}
+._13s19j33 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 12px;
+}
+._13s19j34 {
+  color: #1e3860;
+  font-size: 14px;
+  font-weight: 700;
+}
+._13s19j35 {
+  background: #dff1fb;
+  border-radius: 999px;
+  height: 10px;
+  overflow: hidden;
+}
+._13s19j36 {
+  background: linear-gradient(90deg, #1e629a 0%, #1e3860 100%);
+  border-radius: 999px;
+  height: 100%;
+  transition: width 220ms ease;
+}
+._13s19j37 {
+  display: flex;
+  flex-direction: column;
+  min-height: 430px;
+}
+._13s19j38 {
+  color: #1e3860;
+  font-size: clamp(22px, 4vw, 32px);
+  font-weight: 700;
+  line-height: 1.15;
+  margin: 0;
+}
+._13s19j39 {
+  margin: 10px 0 24px;
+  color: #58677a;
+  font-size: 14px;
+  line-height: 1.5;
+}
+._13s19j3a {
+  display: grid;
+  gap: 10px;
+}
+._13s19j3b {
+  color: #b42318;
+  font-size: 13px;
+  font-weight: 600;
+}
+._13s19j3c {
+  color: #1e3860;
+  font-weight: 700;
+  font-size: 14px;
+}
+._13s19j3a:has(._13s19j3b) ._13s19j3c {
+  color: #b42318;
+}
+._13s19j3d {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
+}
+._13s19j3e {
+  display: block;
+  border-radius: 12px;
+  border: 1px solid #c9e6f7;
+  background: #fff;
+  padding: 16px 18px;
+  cursor: pointer;
+  transition: all 180ms ease;
+}
+._13s19j3e:hover {
+  border-color: #1e629a;
+  background: #e9f8ff;
+}
+._13s19j3f {
+  border-color: #1e3860;
+  background: #f2fbff;
+  box-shadow: 0 0 0 1px #1e3860;
+  position: relative;
+}
+._13s19j3f::after {
+  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTguNSIgaGVpZ2h0PSIxOC41IiB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xhc3M9Il8xeGFqbnF1MCBfMXhham5xdTEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTcuNzUgOUMxNy43NSA0LjE2NzUxIDEzLjgzMjUgMC4yNSA5IDAuMjVDNC4xNjc1MSAwLjI1IDAuMjUgNC4xNjc1MSAwLjI1IDlDMC4yNSAxMy44MzI1IDQuMTY3NTEgMTcuNzUgOSAxNy43NUMxMy44MzI1IDE3Ljc1IDE3Ljc1IDEzLjgzMjUgMTcuNzUgOVpNMTIuOTMzIDYuMDU4MDdMMTMuODE2OSA2Ljk0MTk1TDcuNzQ5OTcgMTMuMDA4OUw0LjE4MzAzIDkuNDQxOTVMNS4wNjY5MSA4LjU1ODA3TDcuNzQ5OTcgMTEuMjQwNkwxMi45MzMgNi4wNTgwN1oiIGZpbGw9IiMxRTM4NjAiPjwvcGF0aD48L3N2Zz4=);
+  position: absolute;
+  right: 18px;
+  top: 18px;
+}
+._13s19j3g {
+  color: #1e3860;
+  font-weight: 700;
+  font-family: var(--header-font-family);
+}
+._13s19j3h {
+  display: grid;
+  gap: 16px;
+  align-items: start;
+}
+._13s19j3i {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+._13s19j3j {
+  background: #fff;
+  border: 1px solid #c9e6f7;
+  border-radius: 12px;
+  color: #14263d;
+  outline: none;
+  padding: 14px 16px;
+  font-family: var(--header-font-family);
+}
+._13s19j3j:focus {
+  border-color: #1e629a;
+  box-shadow: 0 0 0 3px #e9f8ff;
+}
+._13s19j3a:has(._13s19j3b) ._13s19j3j {
+  border-color: #b42318;
+}
+._13s19j3k {
+  color: #58677a;
+  font-size: 13px;
+  line-height: 1.5;
+}
+._13s19j3l {
+  background: #e9f8ff;
+  border: 1px solid #c9e6f7;
+  border-radius: 16px;
+  margin-block: 8px;
+  padding: 14px 16px;
+}
+._13s19j3m {
+  display: block;
+  color: #1e3860;
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+._13s19j3n {
+  color: #14263d;
+  font-size: 24px;
+  font-weight: 700;
+}
+._13s19j3o {
+  display: grid;
+  gap: 8px;
+}
+._13s19j3p {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+._13s19j3q {
+  color: #1e3860;
+  font-size: 15px;
+  font-weight: 700;
+}
+._13s19j3r {
+  accent-color: #1e3860;
+  cursor: pointer;
+}
+._13s19j3s {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 28px;
+  flex: 1 1 0%;
+  align-items: flex-end;
+}
+._13s19j3t {
+  border-radius: 8px;
+  padding: 12px 20px;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 180ms ease;
+  border: none;
+  font-family: var(--header-font-family);
+}
+._13s19j3u {
+  background: #fff;
+  color: #1e3860;
+  border: 1px solid #c9e6f7;
+}
+._13s19j3u:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+._13s19j3v {
+  background: #1e3860;
+  color: #fff;
+}
+._13s19j3v:hover {
+  background: #14263d;
+}
+._13s19j3w {
+  padding: 12px 0;
+}
+._13s19j3x {
+  margin: 0 0 12px;
+  color: #1e3860;
+  font-size: 30px;
+  line-height: 1.15;
+  font-weight: 700;
+}
+._13s19j3y {
+  color: #58677a;
+  font-size: 16px;
+  line-height: 1.6;
+  margin: 0;
+}
+._13s19j3z {
+  border-top: 1px solid #c9e6f7;
+  margin-top: 24px;
+  padding-top: 20px;
+}
+._13s19j310 {
+  color: #1e3860;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  margin: 0 0 8px;
+  text-transform: uppercase;
+}
+._13s19j311 {
+  color: #58677a;
+  font-size: 12px;
+  line-height: 1.6;
+  margin: 0;
+}
+._13s19j313 {
+  margin-top: 8px;
+  color: #58677a;
+  font-size: 12px;
+  line-height: 1.5;
+}
+._13s19j314 {
+  color: #58677a;
+  font-weight: 500;
+  font-size: 12px;
+}
+._13s19j315 {
+  margin-top: 10px;
+  display: grid;
+  gap: 6px;
+}
+._13s19j316 {
+  color: #1e3860;
+  font-size: 12px;
+  font-weight: 700;
+}
+._13s19j317 {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+  background: #dff1fb;
+  overflow: hidden;
+}
+._13s19j318 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 35%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #98ddff 0%, #1e629a 100%);
+  animation: _13s19j312 1.2s linear infinite;
+}
+._13s19j319 {
+  font-size: 56px;
+  color: #1e3860;
+  line-height: 1.15;
+  font-weight: 700;
+}
+._13s19j31a {
+  color: inherit;
+  line-height: 1.5;
+  margin-top: 8px;
+}
+@media screen and (max-width: 768px) {
+  ._13s19j30 {
+    padding-block: 32px;
+  }
+  ._13s19j319 {
+    font-size: 38px;
+  }
+}
+@media screen and (max-width: 640px) {
+  ._13s19j3i {
+    grid-template-columns: 1fr;
+  }
+}
+@media screen and (max-width: 500px) {
+  ._13s19j319 {
+    font-size: 32px;
+  }
+}
+@media screen and (min-width: 851px) {
+  ._13s19j31b {
+    opacity: 0.8 !important;
+  }
+}

package/dist/assets/globals.css

@@ -43,9 +43,6 @@ span#personalized-refi-table:has(*) {
 .page_body_contents > div:first-child > .billboard {
   margin-top: 3.5rem;
 }
-.flex, [class*='flex_'] {
-  display: flex;
-}
 .flex_row {
   flex-direction: row;
 }
@@ -249,6 +246,9 @@ p:empty, ul:empty {
   .containment {
     width: min(1200px, calc(100% - 4rem));
   }
+  .flex, [class*='flex_'] {
+    display: flex;
+  }
   .rounded {
     border-radius: 1rem;
     overflow: hidden;