@elliemae/pui-app-bridge 2.18.1 → 2.19.1

package/dist/cjs/app.config.json

@@ -85,6 +85,11 @@
           "app.css"
         ]
       }
+    },
+     "ssfapp": {
+      "name": "SSF App",
+      "hostUrl": "./ssf-app",
+      "microappManager": "ssf"
     }
   },
   "serviceEndpoints": {

package/dist/cjs/config/app.js

@@ -28,7 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var app_exports = {};
 __export(app_exports, {
-  CAppConfig: () => CAppConfig
+  CAppConfig: () => CAppConfig,
+  LaunchMode: () => LaunchMode,
+  MicroAppManager: () => MicroAppManager
 });
 module.exports = __toCommonJS(app_exports);
 var import_clone = __toESM(require("lodash/clone"), 1);
@@ -39,6 +41,16 @@ var import_merge = __toESM(require("lodash/merge"), 1);
 var import_app_config = __toESM(require("../app.config.json"), 1);
 var import_constant = require("../constant.js");
 var import_utils = require("../utils.js");
+var LaunchMode = /* @__PURE__ */ ((LaunchMode2) => {
+  LaunchMode2["DEVELOPMENT"] = "development";
+  LaunchMode2["PRODUCTION"] = "production";
+  return LaunchMode2;
+})(LaunchMode || {});
+var MicroAppManager = /* @__PURE__ */ ((MicroAppManager2) => {
+  MicroAppManager2["SSF"] = "ssf";
+  MicroAppManager2["APPSDK"] = "appsdk";
+  return MicroAppManager2;
+})(MicroAppManager || {});
 class CAppConfig {
   #gAppConfig = import_app_config.default;
   #version;

package/dist/cjs/config/microFE.js

@@ -33,13 +33,14 @@ __export(microFE_exports, {
 module.exports = __toCommonJS(microFE_exports);
 var import_merge = __toESM(require("lodash/merge"), 1);
 var import_utils = require("../utils.js");
+var import_app = require("./app.js");
 var import_constant = require("../constant.js");
 var import_common = require("../typings/common.js");
 const CONFIG_KEY = "microFrontendApps";
 const isCIBuild = () => process.env.CI === "true";
 const isProduction = (mode) => {
   if (isCIBuild()) return true;
-  if (mode) return mode === "production";
+  return String(mode).toLowerCase() === import_app.LaunchMode.PRODUCTION.toLowerCase();
   return true;
 };
 const getPathName = (url) => url ? new URL(url).pathname : "";
@@ -60,28 +61,34 @@ const isFileListValid = (files) => {
   return files.every((file) => typeof file === "string");
 };
 const validate = (id, mfeConfig) => {
-  const { mode = "production" } = mfeConfig;
-  if (mode !== "production" && mode !== "development")
-    throw new Error(`invalid mode '${mode}' for ${id}`);
-  const { production, development } = mfeConfig;
-  if (mode === "production") {
-    if (!production) {
-      throw new Error(
-        `microFrontendApps.${id} is missing production section in app.config.json`
-      );
-    }
-    if (!isFileListValid(production.files)) {
-      throw new Error(`invalid value for production.files`);
-    }
-  }
-  if (mode === "development") {
-    if (!development) {
-      throw new Error(
-        `microFrontendApps.${id} is missing development section in app.config.json`
-      );
+  const { mode = import_app.LaunchMode.PRODUCTION } = mfeConfig;
+  if (String(mode).toLowerCase() !== import_app.LaunchMode.PRODUCTION.toLowerCase() && String(mode).toLowerCase() !== import_app.LaunchMode.DEVELOPMENT.toLowerCase())
+    throw new Error(`invalid mode '${String(mode)}' for ${id}`);
+  const {
+    production,
+    development,
+    microappManager = import_app.MicroAppManager.APPSDK
+  } = mfeConfig;
+  if (String(microappManager).toLowerCase() === import_app.MicroAppManager.APPSDK.toLowerCase()) {
+    if (String(mode).toLowerCase() === import_app.LaunchMode.PRODUCTION.toLowerCase()) {
+      if (!production) {
+        throw new Error(
+          `microFrontendApps.${id} is missing production section in app.config.json`
+        );
+      }
+      if (!isFileListValid(production.files)) {
+        throw new Error(`invalid value for production.files`);
+      }
     }
-    if (!isFileListValid(development.files)) {
-      throw new Error(`invalid value for development.files`);
+    if (String(mode).toLowerCase() === import_app.LaunchMode.DEVELOPMENT.toLowerCase()) {
+      if (!development) {
+        throw new Error(
+          `microFrontendApps.${id} is missing development section in app.config.json`
+        );
+      }
+      if (!isFileListValid(development.files)) {
+        throw new Error(`invalid value for development.files`);
+      }
     }
   }
 };
@@ -90,7 +97,7 @@ const getConfig = ({
   config,
   version = "latest"
 }) => {
-  const { mode = "production" } = config;
+  const { mode = import_app.LaunchMode.PRODUCTION } = config;
   const envConfig = isProduction(mode) ? config.production : config.development;
   if (config.production)
     delete config.production;
@@ -100,7 +107,7 @@ const getConfig = ({
     { id },
     {
       name: id,
-      mode: "production",
+      mode: import_app.LaunchMode.PRODUCTION,
       manifestPath: "./{SYSTEM_VERSION}/",
       securityContext: import_common.SecurityContext.USER,
       isJsModule: true

package/dist/esm/app.config.json

@@ -85,6 +85,11 @@
           "app.css"
         ]
       }
+    },
+     "ssfapp": {
+      "name": "SSF App",
+      "hostUrl": "./ssf-app",
+      "microappManager": "ssf"
     }
   },
   "serviceEndpoints": {

package/dist/esm/config/app.js

@@ -6,6 +6,16 @@ import lodashMerge from "lodash/merge";
 import appConfig from "../app.config.json";
 import { LATEST_VERSION } from "../constant.js";
 import { appendTrailingSlash } from "../utils.js";
+var LaunchMode = /* @__PURE__ */ ((LaunchMode2) => {
+  LaunchMode2["DEVELOPMENT"] = "development";
+  LaunchMode2["PRODUCTION"] = "production";
+  return LaunchMode2;
+})(LaunchMode || {});
+var MicroAppManager = /* @__PURE__ */ ((MicroAppManager2) => {
+  MicroAppManager2["SSF"] = "ssf";
+  MicroAppManager2["APPSDK"] = "appsdk";
+  return MicroAppManager2;
+})(MicroAppManager || {});
 class CAppConfig {
   #gAppConfig = appConfig;
   #version;
@@ -84,5 +94,7 @@ class CAppConfig {
   };
 }
 export {
-  CAppConfig
+  CAppConfig,
+  LaunchMode,
+  MicroAppManager
 };

package/dist/esm/config/microFE.js

@@ -1,12 +1,16 @@
 import merge from "lodash/merge";
 import { appendTrailingSlash } from "../utils.js";
+import {
+  LaunchMode,
+  MicroAppManager
+} from "./app.js";
 import { LATEST_VERSION } from "../constant.js";
 import { SecurityContext } from "../typings/common.js";
 const CONFIG_KEY = "microFrontendApps";
 const isCIBuild = () => process.env.CI === "true";
 const isProduction = (mode) => {
   if (isCIBuild()) return true;
-  if (mode) return mode === "production";
+  return String(mode).toLowerCase() === LaunchMode.PRODUCTION.toLowerCase();
   return true;
 };
 const getPathName = (url) => url ? new URL(url).pathname : "";
@@ -27,28 +31,34 @@ const isFileListValid = (files) => {
   return files.every((file) => typeof file === "string");
 };
 const validate = (id, mfeConfig) => {
-  const { mode = "production" } = mfeConfig;
-  if (mode !== "production" && mode !== "development")
-    throw new Error(`invalid mode '${mode}' for ${id}`);
-  const { production, development } = mfeConfig;
-  if (mode === "production") {
-    if (!production) {
-      throw new Error(
-        `microFrontendApps.${id} is missing production section in app.config.json`
-      );
-    }
-    if (!isFileListValid(production.files)) {
-      throw new Error(`invalid value for production.files`);
-    }
-  }
-  if (mode === "development") {
-    if (!development) {
-      throw new Error(
-        `microFrontendApps.${id} is missing development section in app.config.json`
-      );
+  const { mode = LaunchMode.PRODUCTION } = mfeConfig;
+  if (String(mode).toLowerCase() !== LaunchMode.PRODUCTION.toLowerCase() && String(mode).toLowerCase() !== LaunchMode.DEVELOPMENT.toLowerCase())
+    throw new Error(`invalid mode '${String(mode)}' for ${id}`);
+  const {
+    production,
+    development,
+    microappManager = MicroAppManager.APPSDK
+  } = mfeConfig;
+  if (String(microappManager).toLowerCase() === MicroAppManager.APPSDK.toLowerCase()) {
+    if (String(mode).toLowerCase() === LaunchMode.PRODUCTION.toLowerCase()) {
+      if (!production) {
+        throw new Error(
+          `microFrontendApps.${id} is missing production section in app.config.json`
+        );
+      }
+      if (!isFileListValid(production.files)) {
+        throw new Error(`invalid value for production.files`);
+      }
     }
-    if (!isFileListValid(development.files)) {
-      throw new Error(`invalid value for development.files`);
+    if (String(mode).toLowerCase() === LaunchMode.DEVELOPMENT.toLowerCase()) {
+      if (!development) {
+        throw new Error(
+          `microFrontendApps.${id} is missing development section in app.config.json`
+        );
+      }
+      if (!isFileListValid(development.files)) {
+        throw new Error(`invalid value for development.files`);
+      }
     }
   }
 };
@@ -57,7 +67,7 @@ const getConfig = ({
   config,
   version = "latest"
 }) => {
-  const { mode = "production" } = config;
+  const { mode = LaunchMode.PRODUCTION } = config;
   const envConfig = isProduction(mode) ? config.production : config.development;
   if (config.production)
     delete config.production;
@@ -67,7 +77,7 @@ const getConfig = ({
     { id },
     {
       name: id,
-      mode: "production",
+      mode: LaunchMode.PRODUCTION,
       manifestPath: "./{SYSTEM_VERSION}/",
       securityContext: SecurityContext.USER,
       isJsModule: true

package/dist/public/app.config.json

@@ -85,6 +85,11 @@
           "app.css"
         ]
       }
+    },
+     "ssfapp": {
+      "name": "SSF App",
+      "hostUrl": "./ssf-app",
+      "microappManager": "ssf"
     }
   },
   "serviceEndpoints": {

package/dist/public/frame.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="mobile-web-app-capable" content="yes"/><link rel="icon" href="/favicon.ico"/><title>Application</title><script nonce="__CSP_NONCE__">!function(e,t,n,a,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(n),s=t.getElementsByTagName(n)[0],o.async=1,o.src="https://www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga")</script><style nonce="__CSP_NONCE__">.full-width{width:100%}.full-height{height:100%}</style><script defer="defer" src="js/emuiAppBridge.15885c97dc211897b3a0.js"></script></head><body class="full-width full-height"><noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript><div id="pui-app-container-" class="full-width full-height"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="mobile-web-app-capable" content="yes"/><link rel="icon" href="/favicon.ico"/><title>Application</title><script nonce="__CSP_NONCE__">!function(e,t,n,a,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(n),s=t.getElementsByTagName(n)[0],o.async=1,o.src="https://www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga")</script><style nonce="__CSP_NONCE__">.full-width{width:100%}.full-height{height:100%}</style><script defer="defer" src="js/emuiAppBridge.023287a6115d74cc7707.js"></script></head><body class="full-width full-height"><noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript><div id="pui-app-container-" class="full-width full-height"></div></body></html>

package/dist/public/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Host</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://cdn.qa1.ice.com/pui-diagnostics@3"></script><script defer="defer" src="js/emuiAppBridge.15885c97dc211897b3a0.js"></script></head><body><header class="bg-indigo-300 h-10 flex place-items-center"><div class="px-2">ICE Mortgage Product</div></header><main class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"><div class="min-w-0 flex-1 mt-4"><h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">Loan Application</h1></div><div id="successFeedback" class="hidden rounded-md bg-green-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg></div><div class="ml-3"><p class="text-sm font-medium text-green-800">Loan Saved Successfully</p></div></div></div><div id="errorFeedback" class="hidden rounded-md bg-red-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg></div><div class="ml-3"><h3 class="text-sm font-medium text-red-800">Credit Score is not meeting the requirement</h3></div></div></div><div class="mt-2 sm:grid sm:grid-cols-2 sm:gap-2"><form class="px-2 py-2 space-y-8 divide-y divide-gray-200 bg-gray-50"><div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"><div class="space-y-6 sm:space-y-5"><div><h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="firstName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">First name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="firstName" id="firstName" autocomplete="given-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="John" placeholder="John"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="lastName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Last name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="lastName" id="lastName" autocomplete="family-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="Doe" placeholder="Doe"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="ssn" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">SSN</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="ssn" id="ssn" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="123456789" placeholder="123456789"/></div></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Loan Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="amount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Amount</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="amount" id="amount" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="500000" placeholder="500000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="Term" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Term (years)</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="term" id="term" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="30" placeholder="30"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="downPayment" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Down Payment</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="downPayment" id="downPayment" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="50000" placeholder="50000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="creditScore" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Credit Score</label><div class="mt-1 sm:mt-0"><output id="creditScore" class="block w-full max-w-lg pl-2 pt-2 sm:max-w-xs sm:text-sm">NA</output></div><div class="mt-1 sm:mt-0"><button id="getCreditScore" type="button" class="inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-1 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg></button></div></div></div></div></div><button id="saveLoan" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button></form><div id="aside-container" class="flex flex-col gap-4 items-start mt-4 border-2 p-2 rounded-lg border-dashed border-cyan-300 sm:mt-0"></div></div><div id="bottom-container" class="flex flex-col gap-4 items-start mt-4 p-2 sm:mt-0"></div></main><script src="./init.js" type="module"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Host</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://cdn.qa1.ice.com/pui-diagnostics@3"></script><script defer="defer" src="js/emuiAppBridge.023287a6115d74cc7707.js"></script></head><body><header class="bg-indigo-300 h-10 flex place-items-center"><div class="px-2">ICE Mortgage Product</div></header><main class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"><div class="min-w-0 flex-1 mt-4"><h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">Loan Application</h1></div><div id="successFeedback" class="hidden rounded-md bg-green-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg></div><div class="ml-3"><p class="text-sm font-medium text-green-800">Loan Saved Successfully</p></div></div></div><div id="errorFeedback" class="hidden rounded-md bg-red-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg></div><div class="ml-3"><h3 class="text-sm font-medium text-red-800">Credit Score is not meeting the requirement</h3></div></div></div><div class="mt-2 sm:grid sm:grid-cols-2 sm:gap-2"><form class="px-2 py-2 space-y-8 divide-y divide-gray-200 bg-gray-50"><div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"><div class="space-y-6 sm:space-y-5"><div><h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="firstName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">First name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="firstName" id="firstName" autocomplete="given-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="John" placeholder="John"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="lastName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Last name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="lastName" id="lastName" autocomplete="family-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="Doe" placeholder="Doe"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="ssn" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">SSN</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="ssn" id="ssn" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="123456789" placeholder="123456789"/></div></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Loan Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="amount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Amount</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="amount" id="amount" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="500000" placeholder="500000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="Term" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Term (years)</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="term" id="term" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="30" placeholder="30"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="downPayment" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Down Payment</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="downPayment" id="downPayment" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="50000" placeholder="50000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="creditScore" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Credit Score</label><div class="mt-1 sm:mt-0"><output id="creditScore" class="block w-full max-w-lg pl-2 pt-2 sm:max-w-xs sm:text-sm">NA</output></div><div class="mt-1 sm:mt-0"><button id="getCreditScore" type="button" class="inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-1 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg></button></div></div></div></div></div><button id="saveLoan" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button></form><div id="aside-container" class="flex flex-col gap-4 items-start mt-4 border-2 p-2 rounded-lg border-dashed border-cyan-300 sm:mt-0"></div></div><div id="bottom-container" class="flex flex-col gap-4 items-start mt-4 p-2 sm:mt-0"></div></main><script src="./init.js" type="module"></script></body></html>