@zonos/elements 1.2.2 → 1.2.4-alpha.1

package/dist/collection/components/stripe/zonos-address/zonos-address.css

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -7,149 +7,149 @@ import { logError } from "../../utils/logging/logError";
  * This component is a wrapper for the stripe address element that would render default style object
  */
 export class ZonosAddress {
-  constructor() {
-    this.type = undefined;
-    this.titleText = undefined;
-    this.defaultAddress = null;
-    this.stripe = window.Zonos.stripe;
-  }
-  async watchInitStripe() {
-    var _a, _b;
-    this.stripe = window.Zonos.stripe;
-    if (!this.stripe || !stripeStore.stripeElements) {
-      logError("Stripe is not initialized. Couldn't load stripe element.");
-      return;
+    constructor() {
+        this.type = undefined;
+        this.titleText = undefined;
+        this.defaultAddress = null;
+        this.stripe = window.Zonos.stripe;
     }
-    const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
-    if (!phone) {
-      // remove phone from default address if it's not provided, stripe
-      // will throw error if key phone exist and its value is empty or 'undefined'.
-      (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
+    async watchInitStripe() {
+        var _a, _b;
+        this.stripe = window.Zonos.stripe;
+        if (!this.stripe || !stripeStore.stripeElements) {
+            logError("Stripe is not initialized. Couldn't load stripe element.");
+            return;
+        }
+        const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
+        if (!phone) {
+            // remove phone from default address if it's not provided, stripe
+            // will throw error if key phone exist and its value is empty or 'undefined'.
+            (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
+        }
+        const shippableCountries = localizationStore.shippingZoneCountries;
+        const addressElement = stripeStore.stripeAddressElement ||
+            stripeStore.stripeElements.create('address', {
+                allowedCountries: shippableCountries
+                    ? Object.values(shippableCountries).map(country => country.code)
+                    : [],
+                contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
+                defaultValues: {
+                    address: {
+                        country: localizationStore.selectedCountryCode || 'AL',
+                    },
+                },
+                display: {
+                    name: 'split',
+                },
+                fields: {
+                    phone: 'always',
+                },
+                mode: this.type,
+                validation: {
+                    phone: {
+                        required: 'always',
+                    },
+                },
+            });
+        addressElement.mount(this.el.querySelector('.zonos--address-component'));
+        addressElement.on('change', event => {
+            const eventValue = event.value;
+            stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
+            // run prefetch landed cost when address is changed
+            void stripeStorePrefetchLandedCost();
+        });
+        stripeStore.stripeAddressElement = addressElement;
     }
-    const shippableCountries = localizationStore.shippingZoneCountries;
-    const addressElement = stripeStore.stripeAddressElement ||
-      stripeStore.stripeElements.create('address', {
-        allowedCountries: shippableCountries
-          ? Object.values(shippableCountries).map(country => country.code)
-          : [],
-        contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
-        defaultValues: {
-          address: {
-            country: localizationStore.selectedCountryCode || 'AL',
-          },
-        },
-        display: {
-          name: 'split',
-        },
-        fields: {
-          phone: 'always',
-        },
-        mode: this.type,
-        validation: {
-          phone: {
-            required: 'always',
-          },
-        },
-      });
-    addressElement.mount(this.el.querySelector('.zonos--address-component'));
-    addressElement.on('change', event => {
-      const eventValue = event.value;
-      stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
-      // run prefetch landed cost when address is changed
-      void stripeStorePrefetchLandedCost();
-    });
-    stripeStore.stripeAddressElement = addressElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    void this.watchInitStripe();
-  }
-  render() {
-    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-    return (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
-  }
-  static get is() { return "zonos-address"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-address.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-address.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'billing' | 'shipping'",
-          "resolved": "\"billing\" | \"shipping\"",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The type of address element to render"
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "titleText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The title text for the address element"
-        },
-        "attribute": "title-text",
-        "reflect": false
-      },
-      "defaultAddress": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ContactOption | null",
-          "resolved": "ContactOption | null",
-          "references": {
-            "ContactOption": {
-              "location": "import",
-              "path": "@stripe/stripe-js",
-              "id": ""
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        void this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
+    }
+    static get is() { return "zonos-address"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-address.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-address.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'billing' | 'shipping'",
+                    "resolved": "\"billing\" | \"shipping\"",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of address element to render"
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "titleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title text for the address element"
+                },
+                "attribute": "title-text",
+                "reflect": false
+            },
+            "defaultAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContactOption | null",
+                    "resolved": "ContactOption | null",
+                    "references": {
+                        "ContactOption": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default address for stripe"
+                },
+                "defaultValue": "null"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default address for stripe"
-        },
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "stripe": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "stripe",
-        "methodName": "watchInitStripe"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "stripe": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "stripe",
+                "methodName": "watchInitStripe"
+            }];
+    }
 }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.css

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -5,82 +5,82 @@ import { stripeStore, stripeStorePrefetchLandedCost, } from "../../store/checkou
  * This component is a wrapper for the stripe authentication element that would render default style object
  */
 export class ZonosLinkAuthentication {
-  constructor() {
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-  }
-  watchInitStripe() {
-    if (!this.stripe || !stripeStore.stripeElements) {
-      return;
+    constructor() {
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
     }
-    // Create and mount the Authentication Element in ${type} mode
-    const linkAuthenticationElement = stripeStore.stripeLinkElement ||
-      stripeStore.stripeElements.create('linkAuthentication');
-    const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
-    if (!linkAuthenticationElementContainer) {
-      // eslint-disable-next-line no-console
-      console.error('Cannot find container element for linkAuthenticationElement');
-      return;
+    watchInitStripe() {
+        if (!this.stripe || !stripeStore.stripeElements) {
+            return;
+        }
+        // Create and mount the Authentication Element in ${type} mode
+        const linkAuthenticationElement = stripeStore.stripeLinkElement ||
+            stripeStore.stripeElements.create('linkAuthentication');
+        const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
+        if (!linkAuthenticationElementContainer) {
+            // eslint-disable-next-line no-console
+            console.error('Cannot find container element for linkAuthenticationElement');
+            return;
+        }
+        linkAuthenticationElement.mount(linkAuthenticationElementContainer);
+        linkAuthenticationElement.on('change', event => {
+            stripeStore.stripeLinkEventData = event;
+            // run prefetch landed cost when address is changed
+            void stripeStorePrefetchLandedCost();
+        });
+        stripeStore.stripeLinkElement = linkAuthenticationElement;
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
+    }
+    static get is() { return "zonos-link-authentication"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-link-authentication.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-link-authentication.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "titleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title text for the authentication element"
+                },
+                "attribute": "title-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stripe": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "stripe",
+                "methodName": "watchInitStripe"
+            }];
     }
-    linkAuthenticationElement.mount(linkAuthenticationElementContainer);
-    linkAuthenticationElement.on('change', event => {
-      stripeStore.stripeLinkEventData = event;
-      // run prefetch landed cost when address is changed
-      void stripeStorePrefetchLandedCost();
-    });
-    stripeStore.stripeLinkElement = linkAuthenticationElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    this.watchInitStripe();
-  }
-  render() {
-    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-    return (h(Host, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
-  }
-  static get is() { return "zonos-link-authentication"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-link-authentication.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-link-authentication.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "titleText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The title text for the authentication element"
-        },
-        "attribute": "title-text",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "stripe": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "stripe",
-        "methodName": "watchInitStripe"
-      }];
-  }
 }

package/dist/collection/components/stripe/zonos-payment/zonos-payment.css

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }

package/dist/collection/components/stripe/zonos-payment/zonos-payment.js

@@ -5,87 +5,87 @@ import { stripeStore } from "../../store/checkout/stripe";
  * This component is a wrapper for the stripe authentication element that would render default style object
  */
 export class ZonosPayment {
-  constructor() {
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-    this.stripeElements = stripeStore.stripeElements;
-  }
-  watchInitStripe() {
-    if (!this.stripeElements) {
-      return;
+    constructor() {
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
+        this.stripeElements = stripeStore.stripeElements;
     }
-    // Create and mount the Authentication Element in ${type} mode
-    const paymentElement = stripeStore.stripePaymentElement ||
-      this.stripeElements.create('payment', {
-        layout: 'tabs',
-      });
-    const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
-    if (!paymentElementContainer) {
-      // eslint-disable-next-line no-console
-      console.error('Cannot find container element for paymentElement');
-      return;
+    watchInitStripe() {
+        if (!this.stripeElements) {
+            return;
+        }
+        // Create and mount the Authentication Element in ${type} mode
+        const paymentElement = stripeStore.stripePaymentElement ||
+            this.stripeElements.create('payment', {
+                layout: 'tabs',
+            });
+        const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
+        if (!paymentElementContainer) {
+            // eslint-disable-next-line no-console
+            console.error('Cannot find container element for paymentElement');
+            return;
+        }
+        paymentElement.mount(paymentElementContainer);
+        paymentElement.on('change', event => {
+            stripeStore.stripePaymentEventData = event;
+        });
+        stripeStore.stripePaymentElement = paymentElement;
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { class: "zonos--payment-component" })));
+    }
+    static get is() { return "zonos-payment"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-payment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-payment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "titleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The title text for the authentication element"
+                },
+                "attribute": "title-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stripe": {},
+            "stripeElements": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "stripeElements",
+                "methodName": "watchInitStripe"
+            }, {
+                "propName": "stripe",
+                "methodName": "watchInitStripe"
+            }];
     }
-    paymentElement.mount(paymentElementContainer);
-    paymentElement.on('change', event => {
-      stripeStore.stripePaymentEventData = event;
-    });
-    stripeStore.stripePaymentElement = paymentElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    this.watchInitStripe();
-  }
-  render() {
-    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-    return (h(Host, { class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { class: "zonos--payment-component" })));
-  }
-  static get is() { return "zonos-payment"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-payment.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-payment.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "titleText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The title text for the authentication element"
-        },
-        "attribute": "title-text",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "stripe": {},
-      "stripeElements": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "stripeElements",
-        "methodName": "watchInitStripe"
-      }, {
-        "propName": "stripe",
-        "methodName": "watchInitStripe"
-      }];
-  }
 }