@odus/checkout 1.1.0 → 1.2.1

package/dist/checkout.es.js

@@ -1,5 +1,5 @@
-import { c as q, a as W, f as L, d as Y, C as P, I as K, b as N, g as G, S as x, e as T, H as J, V as _, h as A, A as Z, P as X, E as Q, l as ee, i as te, j as se, k as ie, m as ae, n as ne, o as re, F as oe, p as R, q as le, r as F, s as E, t as de, u as U, v as H, w as he, x as ce } from "./shared.js";
-import { z as Ie, B as Be, D as Te, G as _e, J as Re, K as Ue, L as He, y as Oe, M as ze } from "./shared.js";
+import { k as q, n as W, t as L, p as Y, e as P, I as K, l as N, w as G, S as x, x as T, H as J, i as R, f as A, a as Z, P as Q, E as X, G as ee, C as te, s as se, j as ie, z as ae, A as ne, m as re, F as oe, V as _, B as le, N as F, c as E, b as de, Q as U, d as H, v as he, M as ce } from "./shared.js";
+import { o as Ie, q as Be, r as Te, u as Re, D as _e, K as Ue, L as He, O as Oe, R as ze } from "./shared.js";
 function I(o) {
   return {
     name: "Custom Appearance",
@@ -888,6 +888,8 @@ class ge {
   vgsHelperText = null;
   wrapperElement;
   _vgsFieldsReady = !1;
+  _fieldHeight = "38.5px";
+  _borderRadius = 0;
   constructor(e) {
     const {
       value: t,
@@ -910,7 +912,9 @@ class ge {
     );
   }
   buildVgsLayout(e, t) {
-    const s = e.styles.borderRadius, a = document.createElement("div");
+    const s = e.styles.borderRadius;
+    this._borderRadius = s;
+    const a = document.createElement("div");
     a.style.marginBottom = "4px";
     const i = document.createElement("label");
     i.className = "input-label", i.textContent = t("cardholderNameLabel"), i.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, i.style.fontSize = `${e.styles.fontSize}px`, a.appendChild(i), this.wrapperElement.appendChild(a), this.vgsWrapper = document.createElement("div"), this.vgsWrapper.className = "vgs-wrap", this.vgsWrapper.style.position = "relative", this.vgsWrapper.style.borderRadius = `${s}px`, this.vgsWrapper.style.height = "38.5px", this.vgsWrapper.style.width = "100%", this.vgsWrapper.style.overflow = "hidden";
@@ -945,16 +949,24 @@ class ge {
   }
   handleVgsStateChange(e, t) {
     if (!this.isVgsMode || !this.vgsWrapper) return;
-    const s = e[_.CARDHOLDER]?.isFocused;
+    const s = e[R.CARDHOLDER]?.isFocused;
     if (this._vgsFieldsReady && (this.vgsWrapper.style.boxShadow = s ? "0 0 0 1px rgba(50, 151, 211, 0.7), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3)" : "0 0 0 1px #e0e0e0, 0 2px 4px 0 rgba(0,0,0,0.07), 0 1px 1.5px 0 rgba(0,0,0,0.05)"), !t || !this.vgsHelperText) return;
-    const a = t[_.CARDHOLDER];
+    const a = t[R.CARDHOLDER];
     a ? (this.vgsHelperText.setText(a), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
   }
+  setFieldHeight(e) {
+    this._fieldHeight = e, this.vgsWrapper && (this.vgsWrapper.style.height = e);
+  }
+  setBorderRadius(e) {
+    this._borderRadius = e, this.vgsWrapper && (this.vgsWrapper.style.borderRadius = `${e}px`);
+  }
   hideFakePlaceholder() {
     if (!this.vgsWrapper) return;
     this._vgsFieldsReady = !0, this.vgsWrapper.style.overflow = "visible", this.vgsWrapper.style.transition = "box-shadow 0.1s ease-in", this.vgsWrapper.style.boxShadow = "0 0 0 1px #e0e0e0, 0 2px 4px 0 rgba(0,0,0,0.07), 0 1px 1.5px 0 rgba(0,0,0,0.05)";
     const e = this.vgsWrapper.querySelector(".vgs-field-skeleton");
-    e && e.remove(), this.vgsContainer?.querySelectorAll("iframe").forEach((t) => t.style.height = "38.5px");
+    e && e.remove(), this.vgsContainer?.querySelectorAll("iframe").forEach((t) => {
+      t.style.height = this._fieldHeight, t.style.borderRadius = `${this._borderRadius}px`;
+    });
   }
   getValue() {
     return this.isVgsMode ? "" : this.input?.getValue() ?? "";
@@ -1058,7 +1070,7 @@ class ye extends P {
       switch (y) {
         case "paypal": {
           if (a) {
-            const u = new X({
+            const u = new Q({
               checkoutProfile: t,
               formData: s,
               onSubmit: a
@@ -1242,7 +1254,7 @@ class Ce {
       ) || e.layout.shippingFields && Object.values(e.layout.shippingFields).some(
         (n) => n?.enabled
       );
-      this.emailField = new Q({
+      this.emailField = new X({
         value: t.email,
         onChange: this.onChange,
         onBlur: this.onBlur,
@@ -1525,6 +1537,12 @@ class Ce {
       e,
       a
     );
+    if (this.cardholderSection && i.cardholderName) {
+      const n = i.cardholderName;
+      typeof n.height == "string" && this.cardholderSection.setFieldHeight(n.height);
+      const r = n["border-radius"];
+      typeof r == "string" && this.cardholderSection.setBorderRadius(parseFloat(r));
+    }
     this.vgsService.mountCardFields(
       {
         cardNumber: t.cardNumber ? `#${t.cardNumber}` : void 0,
@@ -1827,7 +1845,7 @@ class Pe extends P {
   vgsJwt;
   vgsCardResult;
   constructor(e) {
-    super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new R()), this.checkoutProfile = ue({
+    super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new _()), this.checkoutProfile = ue({
       appearance: e.appearance
     }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new Ce({
       formElement: this.element,
@@ -2151,7 +2169,7 @@ class Pe extends P {
     ), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
   }
   associatePayment(e, t, s, a, i) {
-    this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), i && !this.vgsService && (this.vgsJwt = i, this.vgsService = new R(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((r) => {
+    this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), i && !this.vgsService && (this.vgsJwt = i, this.vgsService = new _(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((r) => {
       this.vgsService?.createForm(
         r,
         (d) => this.handleVgsStateChange(d)
@@ -2495,8 +2513,8 @@ export {
   Ie as deLocale,
   Be as enLocale,
   Te as esLocale,
-  _e as frLocale,
-  Re as itLocale,
+  Re as frLocale,
+  _e as itLocale,
   Ue as plLocale,
   He as ptLocale,
   ce as pushError,

package/dist/elements.es.js

@@ -1,4 +1,4 @@
-import { o as a, I as g, S as E, g as z, e as x, A as N, F as V, i as k, a as _, f as P, N as F, p as y, m as w, j as A, E as R, n as C, P as M, l as T, O as I, t as B, w as L, k as j } from "./shared.js";
+import { m as a, I as g, S as E, w as z, x, a as N, F as V, C as k, n as _, t as P, J as F, V as y, z as w, s as A, E as R, A as C, P as M, G as T, T as I, b as B, v as L, j } from "./shared.js";
 const p = ".form-helper-text{color:#dc2727;font-family:var(--odus-font-family, inherit);font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}", f = ".input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-size:var(--odus-input-font-size, 16px);font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}", m = ".input-label{font-family:var(--odus-font-family, inherit);font-size:var(--odus-label-font-size, 14px);font-weight:var(--odus-label-font-weight, 400);color:var(--odus-label-color, var(--odus-color-text, #1a1a1a));letter-spacing:var(--odus-label-letter-spacing, normal);line-height:var(--odus-label-line-height, 1.4);margin-bottom:var(--odus-label-margin-bottom, 6px)}", O = ":host{--odus-font-family: system-ui, sans-serif;--odus-font-size: 16px;--odus-color-error: #dc2727;--odus-color-text: #1a1a1a;--odus-color-background: #ffffff;--odus-border-color: #e0e0e0;--odus-border-radius: 6px;--odus-spacing-sm: 8px;--odus-spacing-md: 16px;--odus-spacing-lg: 24px;--odus-input-height: 44px;--odus-input-padding: 8px 12px;--odus-input-font-size: var(--odus-font-size);--odus-input-font-weight: 400;--odus-input-letter-spacing: .02em;--odus-input-line-height: 1.5;--odus-input-placeholder-color: #717173;--odus-input-placeholder-opacity: .3;--odus-input-focus-shadow: 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3);--odus-label-font-size: 14px;--odus-label-font-weight: 400;--odus-label-color: var(--odus-color-text);--odus-label-letter-spacing: normal;--odus-label-line-height: 1.4;--odus-label-margin-bottom: 6px;--odus-card-gap: 12px;--odus-button-height: 48px;--odus-button-border-radius: var(--odus-border-radius)}.form-input{opacity:1;font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:var( --odus-input-focus-shadow, 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3) );position:relative;z-index:2}.input-label{font-family:var(--odus-font-family, inherit)!important;font-size:var(--odus-label-font-size, 14px)!important;font-weight:var(--odus-label-font-weight, 400)!important;color:var(--odus-label-color, var(--odus-color-text, #1a1a1a))!important;letter-spacing:var(--odus-label-letter-spacing, normal)!important;line-height:var(--odus-label-line-height, 1.4)!important;margin-bottom:var(--odus-label-margin-bottom, 6px)!important}.form-helper-text{font-family:var(--odus-font-family, inherit)!important}";
 class u {
   shadowRoot = null;
@@ -200,7 +200,7 @@ class D extends u {
     return this._error;
   }
 }
-class K extends u {
+class J extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -265,7 +265,7 @@ class K extends u {
     return this._error;
   }
 }
-class Z extends u {
+class K extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -331,7 +331,7 @@ class Z extends u {
   }
 }
 const v = /* @__PURE__ */ new Set(["US", "CA"]);
-class J extends u {
+class Z extends u {
   _value = "";
   _country = "";
   _input = null;
@@ -1509,16 +1509,16 @@ class fe {
       get: () => (this._addressStreet || (this._addressStreet = new G(), this._trackElement(this._addressStreet)), this._addressStreet),
       enumerable: !0
     }), Object.defineProperty(s, "firstName", {
-      get: () => (this._addressFirstName || (this._addressFirstName = new K(), this._trackElement(this._addressFirstName)), this._addressFirstName),
+      get: () => (this._addressFirstName || (this._addressFirstName = new J(), this._trackElement(this._addressFirstName)), this._addressFirstName),
       enumerable: !0
     }), Object.defineProperty(s, "lastName", {
-      get: () => (this._addressLastName || (this._addressLastName = new Z(), this._trackElement(this._addressLastName)), this._addressLastName),
+      get: () => (this._addressLastName || (this._addressLastName = new K(), this._trackElement(this._addressLastName)), this._addressLastName),
       enumerable: !0
     }), Object.defineProperty(s, "city", {
       get: () => (this._addressCity || (this._addressCity = new q(), this._trackElement(this._addressCity)), this._addressCity),
       enumerable: !0
     }), Object.defineProperty(s, "state", {
-      get: () => (this._addressState || (this._addressState = new J(), this._trackElement(this._addressState)), this._addressState),
+      get: () => (this._addressState || (this._addressState = new Z(), this._trackElement(this._addressState)), this._addressState),
       enumerable: !0
     }), Object.defineProperty(s, "zipCode", {
       get: () => (this._addressZipCode || (this._addressZipCode = new U(), this._trackElement(this._addressZipCode)), this._addressZipCode),
@@ -1734,9 +1734,9 @@ class fe {
 export {
   q as AddressCityElement,
   D as AddressCountryElement,
-  K as AddressFirstNameElement,
-  Z as AddressLastNameElement,
-  J as AddressStateElement,
+  J as AddressFirstNameElement,
+  K as AddressLastNameElement,
+  Z as AddressStateElement,
   G as AddressStreetElement,
   U as AddressZipCodeElement,
   H as ApplePayElement,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",
@@ -117,12 +117,9 @@
           "^typecheck"
         ],
         "options": {
-          "command": "tsc --build --emitDeclarationOnly",
+          "command": "tsc --build --emitDeclarationOnly --force",
           "cwd": "libs/checkout"
         }
-      },
-      "vite:typecheck": {
-        "executor": "nx:noop"
       }
     }
   },

package/dist/phone.js

@@ -1,4 +1,4 @@
-import { Q as pe, R as Jt, C as P, h as pt, H as ve, T as be, b as Ce } from "./shared.js";
+import { g as pe, y as Jt, e as P, f as pt, H as ve, h as be, l as Ce } from "./shared.js";
 const Ne = (r, t, e) => {
   let n = 0, d = e.length;
   for (let i = 0; i < e.length; i++)

package/dist/shared.js

@@ -370,7 +370,7 @@ const ap = (r) => {
     url: e,
     app: {
       name: "odus-checkout",
-      version: "1.1.0",
+      version: "1.2.1",
       environment: r.environment === "test" ? "sandbox" : "production"
     },
     isolate: !0,
@@ -7352,51 +7352,51 @@ class Sp extends B {
   }
 }
 export {
-  bp as A,
-  Of as B,
-  B as C,
-  Gf as D,
+  Sp as A,
+  ap as B,
+  gp as C,
+  y0 as D,
   yp as E,
   fp as F,
-  n0 as G,
+  lp as G,
   ve as H,
   Bt as I,
-  y0 as J,
+  Wu as J,
   H0 as K,
   sv as L,
-  _v as M,
-  Wu as N,
-  Vv as O,
+  sp as M,
+  de as N,
+  op as O,
   Ep as P,
-  Qe as Q,
-  Zv as R,
+  Ie as Q,
+  _v as R,
   Je as S,
-  Oc as T,
-  X as V,
-  up as a,
-  He as b,
-  Lh as c,
-  It as d,
-  pp as e,
-  Cc as f,
-  vp as g,
-  We as h,
-  gp as i,
-  hp as j,
-  dp as k,
-  lp as l,
-  mp as m,
-  Sp as n,
-  Nc as o,
-  Rt as p,
-  ap as q,
-  de as r,
-  ue as s,
-  cp as t,
-  Ie as u,
-  we as v,
-  np as w,
-  sp as x,
-  op as y,
-  mf as z
+  Vv as T,
+  Rt as V,
+  bp as a,
+  cp as b,
+  ue as c,
+  we as d,
+  B as e,
+  We as f,
+  Qe as g,
+  Oc as h,
+  X as i,
+  dp as j,
+  Lh as k,
+  He as l,
+  Nc as m,
+  up as n,
+  mf as o,
+  It as p,
+  Of as q,
+  Gf as r,
+  hp as s,
+  Cc as t,
+  n0 as u,
+  np as v,
+  vp as w,
+  pp as x,
+  Zv as y,
+  mp as z
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",
@@ -117,12 +117,9 @@
           "^typecheck"
         ],
         "options": {
-          "command": "tsc --build --emitDeclarationOnly",
+          "command": "tsc --build --emitDeclarationOnly --force",
           "cwd": "libs/checkout"
         }
-      },
-      "vite:typecheck": {
-        "executor": "nx:noop"
       }
     }
   },