@odus/checkout 0.30.0-beta.0 → 0.30.0-beta.2

package/dist/elements.es.js

@@ -1,4 +1,4 @@
-import { n as a, I as m, S as y, g as C, b as g, A as E, F as k, i as z, a as c, f as N, J as S, E as P, m as x, P as F, h as R, y as A, o as V, p as M, j as B } from "./shared.js";
+import { n as a, I as m, S as y, g as C, b as g, A as E, F as k, i as z, a as c, f as N, J as P, E as S, m as x, P as F, h as R, y as A, o as V, p as M, j as B } from "./shared.js";
 const l = ".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}", h = ".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}", u = ".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)}", I = ":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 d {
   shadowRoot = null;
@@ -336,30 +336,21 @@ class D extends d {
   _country = "";
   _input = null;
   _select = null;
-  _allowedStates;
-  setStates(e) {
-    this._allowedStates = e.length > 0 ? e : void 0, this._value && this._allowedStates && !this._allowedStates.includes(this._value) && (this._value = "", this.emit("change", this._value)), this.shadowRoot && this.render();
-  }
   setCountry(e) {
     const t = this._country;
     if (this._country = e, !this.shadowRoot) return;
     const r = b.has(t), o = b.has(e);
     if (r && o && t !== e) {
       const { t: s } = a(), i = e, p = s(i === "US" ? "address.chooseState" : "address.chooseProvince");
-      this._select?.setOptions(
-        g(this._allowedStates, i),
-        p
-      ), this._value = "";
+      this._select?.setOptions(g(i), p), this._value = "";
       return;
     }
     r !== o && (this._value = "", this.render());
   }
   render() {
     if (!this.shadowRoot) return;
-    this._input?.getElement().remove(), this._select?.getElement().remove(), this._input = null, this._select = null;
-    const e = b.has(this._country);
-    if (this._allowedStates || e) {
-      const t = e ? this._country : "US";
+    if (this._input?.getElement().remove(), this._select?.getElement().remove(), this._input = null, this._select = null, b.has(this._country)) {
+      const t = this._country;
       this._renderSelect(t);
     } else
       this._renderInput();
@@ -381,7 +372,7 @@ class D extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   _renderSelect(e) {
-    const { t } = a(), r = g(this._allowedStates, e), o = t(e === "US" ? "address.chooseState" : "address.chooseProvince");
+    const { t } = a(), r = g(e), o = t(e === "US" ? "address.chooseState" : "address.chooseProvince");
     this._select = new y({
       name: "billingAddress.state",
       label: t("address.state"),
@@ -572,7 +563,7 @@ class Z extends d {
     return this._error;
   }
 }
-const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}", U = {
+const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}", Q = {
   name: "odus-elements",
   styles: {
     fontSize: 14,
@@ -597,7 +588,7 @@ const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-butt
   },
   additionalPaymentMethods: {}
 };
-class Q extends d {
+class U extends d {
   _paymentContext = null;
   _applePayData = null;
   _authorized = !1;
@@ -620,7 +611,7 @@ class Q extends d {
       onAuthorize: w
     } = this._paymentContext;
     i?.length && o?.countryCode && !i.map((f) => f.toUpperCase()).includes(o.countryCode.toUpperCase()) || (this._button = new E({
-      checkoutProfile: U,
+      checkoutProfile: Q,
       paymentId: e,
       checkoutKey: t,
       environment: r,
@@ -790,7 +781,7 @@ class Y extends d {
     };
   }
   getPayload() {
-    const e = this._environment === "live" ? H : J, t = new S();
+    const e = this._environment === "live" ? H : J, t = new P();
     t.setPublicKey(e);
     const r = this._cardNumber.replace(/\s+/g, ""), o = this._cardExpiry.replace(/\s+/g, "").split("/"), s = o[0] ?? "";
     let i = o[1] ?? "";
@@ -948,7 +939,7 @@ class ee extends d {
     if (!this.shadowRoot) return;
     this._field?.getElement().remove(), this.options.initialValue && !this._email && (this._email = String(this.options.initialValue));
     const { t: e } = a();
-    this._field = new P({
+    this._field = new S({
       value: this._email,
       error: !1,
       checkoutProfile: $,
@@ -1259,7 +1250,7 @@ class ue {
     });
     const r = {};
     Object.defineProperty(r, "applePay", {
-      get: () => (this._applePay || (this._applePay = new Q(), this._trackElement(this._applePay), this._paymentState.paymentId && this._paymentState.checkoutKey && this._applePay.setPaymentContext({
+      get: () => (this._applePay || (this._applePay = new U(), this._trackElement(this._applePay), this._paymentState.paymentId && this._paymentState.checkoutKey && this._applePay.setPaymentContext({
         paymentId: this._paymentState.paymentId,
         checkoutKey: this._paymentState.checkoutKey,
         environment: this._config.environment,
@@ -1489,7 +1480,7 @@ export {
   D as AddressStateElement,
   O as AddressStreetElement,
   Z as AddressZipCodeElement,
-  Q as ApplePayElement,
+  U as ApplePayElement,
   d as BaseElement,
   Y as CardElement,
   X as CardholderElement,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.30.0-beta.0",
+  "version": "0.30.0-beta.2",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",
@@ -106,6 +106,16 @@
           }
         }
       },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "dependsOn": [
+          "^typecheck"
+        ],
+        "options": {
+          "command": "tsc --build --emitDeclarationOnly",
+          "cwd": "libs/checkout"
+        }
+      },
       "vite:typecheck": {
         "executor": "nx:noop"
       }

package/dist/phone.js

@@ -3290,7 +3290,12 @@ class qd extends E {
       if (a?.countryCode && a.countryCode !== this.currentCountryCode) {
         this.currentCountryCode = a.countryCode, this.updateSelectAndFlag(a.countryCode), r.placeholder = T(a.countryCode);
         const o = this.countryCodeInput.getElement();
-        o.value = a.countryCode, o.dispatchEvent(new Event("input", { bubbles: !0 }));
+        o.value = a.countryCode;
+        const u = new Event("input", { bubbles: !0 });
+        Object.defineProperty(u, "target", {
+          writable: !1,
+          value: { name: "phoneCountryCode", value: a.countryCode }
+        }), this.onChange(u);
       }
     } else {
       const a = this.countrySelect.getElement().value;
@@ -3319,7 +3324,10 @@ class qd extends E {
     const d = this.countryCodeInput.getElement();
     d.value = t;
     const i = new Event("input", { bubbles: !0 });
-    if (d.dispatchEvent(i), this.onChange(i), n.startsWith("+")) {
+    if (Object.defineProperty(i, "target", {
+      writable: !1,
+      value: { name: "phoneCountryCode", value: t }
+    }), this.onChange(i), n.startsWith("+")) {
       const a = A(n);
       !a || a.countryCode !== t ? this.showValidationError() : this.clearValidationError();
       return;