@zonos/elements 1.3.124 → 1.3.126

package/dist/collection/components/main/zonos-controller.js

@@ -55,13 +55,15 @@ export class ZonosController {
         searchParams.set('family', fontSelected);
         const { errors, json } = await handleFetch(`/api/zonos-elements/get-font-detail?${searchParams.toString()}`);
         // Keep using Inter font, font in the setting maybe outdated and not found in google font, API will return Inter font instead
-        if (errors.length > 0 || !(json === null || json === void 0 ? void 0 : json.fontUrl)) {
+        if (errors.length > 0) {
             log(`Failed to load font ${fontSelected}`, 'warn');
             zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.appearance), { fontFamily: 'Inter' });
             return;
         }
-        const fontUrl = json.fontUrl;
-        (_b = (_a = window.Zonos).injectSupportGoogleFont) === null || _b === void 0 ? void 0 : _b.call(_a, fontUrl);
+        const fontUrl = json === null || json === void 0 ? void 0 : json.fontUrl;
+        if (fontUrl) {
+            (_b = (_a = window.Zonos).injectSupportGoogleFont) === null || _b === void 0 ? void 0 : _b.call(_a, fontUrl);
+        }
         if (!overrideFont) {
             return;
         }
@@ -204,7 +206,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '8e6c4a23893a1d3913d996a62bd14fd000612e42', class: "zonos--elements" });
+        return h(Host, { key: '20b7c1424c04dcf837b80edf57a3e8d74d1d230a', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/components/store/checkout/cart.js

@@ -48,7 +48,7 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
         shipping: {
             index: 2,
             isDone: false,
-            label: 'Delivery',
+            label: 'Shipping',
             value: 'shipping',
         },
         // eslint-disable-next-line sort-keys/sort-keys-fix

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -221,6 +221,9 @@ export const stringsArabic = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'يرجى التأكد من أن نصك يستخدم الأبجدية اللاتينية فقط (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'يرجى إدخال عنوان بريد إلكتروني صالح.',
+    },
     'Postal code': {
         value: 'الرمز البريدي',
     },

package/dist/collection/components/store/translationStore/strings.base.js

@@ -221,6 +221,9 @@ export const stringsBase = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Please ensure your text uses the Latin alphabet only (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Please enter a valid email address.',
+    },
     'Postal code': {
         value: 'Postal code',
     },

package/dist/collection/components/store/translationStore/strings.chinese.js

@@ -221,6 +221,9 @@ export const stringsChinese = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: '请确保您的文本仅使用拉丁字母表（A-Z, a-z）。',
     },
+    'Please enter a valid email address.': {
+        value: '请输入有效的电子邮件地址。',
+    },
     'Postal code': {
         value: '邮政编码',
     },

package/dist/collection/components/store/translationStore/strings.danish.js

@@ -221,6 +221,9 @@ export const stringsDanish = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Sørg venligst for, at din tekst kun bruger det latinske alfabet (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Indtast venligst en gyldig e-mailadresse.',
+    },
     'Postal code': {
         value: 'Postnummer',
     },

package/dist/collection/components/store/translationStore/strings.dutch.js

@@ -221,6 +221,9 @@ export const stringsDutch = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Zorg ervoor dat uw tekst alleen het Latijnse alfabet gebruikt (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Voer een geldig e-mailadres in.',
+    },
     'Postal code': {
         value: 'Postcode',
     },

package/dist/collection/components/store/translationStore/strings.french.js

@@ -221,6 +221,9 @@ export const stringsFrench = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: "Veuillez vous assurer que votre texte utilise uniquement l'alphabet latin (A-Z, a-z).",
     },
+    'Please enter a valid email address.': {
+        value: 'Veuillez entrer une adresse e-mail valide.',
+    },
     'Postal code': {
         value: 'Code postal',
     },

package/dist/collection/components/store/translationStore/strings.german.js

@@ -221,6 +221,9 @@ export const stringsGerman = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Bitte stellen Sie sicher, dass Ihr Text nur das lateinische Alphabet verwendet (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    },
     'Postal code': {
         value: 'Postleitzahl',
     },

package/dist/collection/components/store/translationStore/strings.hebrew.js

@@ -221,6 +221,9 @@ export const stringsHebrew = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'אנא ודא שהטקסט שלך משתמש באלפבית הלטיני בלבד (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'אנא הזן כתובת דוא"ל חוקית.',
+    },
     'Postal code': {
         value: 'מיקוד',
     },

package/dist/collection/components/store/translationStore/strings.indonesian.js

@@ -221,6 +221,9 @@ export const stringsIndonesian = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Harap pastikan teks Anda hanya menggunakan alfabet Latin (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Silakan masukkan alamat email yang valid.',
+    },
     'Postal code': {
         value: 'Kode Pos',
     },

package/dist/collection/components/store/translationStore/strings.italian.js

@@ -221,6 +221,9 @@ export const stringsItalian = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: "Si prega di assicurarsi che il testo utilizzi solo l'alfabeto latino (A-Z, a-z).",
     },
+    'Please enter a valid email address.': {
+        value: 'Per favore, inserisci un indirizzo email valido.',
+    },
     'Postal code': {
         value: 'Codice postale',
     },

package/dist/collection/components/store/translationStore/strings.japanese.js

@@ -221,6 +221,9 @@ export const stringsJapanese = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'テキストがラテンアルファベットのみを使用していることを確認してください（A-Z、a-z）。',
     },
+    'Please enter a valid email address.': {
+        value: '有効なメールアドレスを入力してください。',
+    },
     'Postal code': {
         value: '郵便番号',
     },

package/dist/collection/components/store/translationStore/strings.korean.js

@@ -221,6 +221,9 @@ export const stringsKorean = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: '텍스트가 라틴 알파벳만 사용하는지 확인해 주세요 (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: '유효한 이메일 주소를 입력하세요.',
+    },
     'Postal code': {
         value: '우편 번호',
     },

package/dist/collection/components/store/translationStore/strings.norwegian.js

@@ -221,6 +221,9 @@ export const stringsNorwegian = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Vennligst sørg for at teksten din kun bruker det latinske alfabetet (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Vennligst skriv inn en gyldig e-postadresse.',
+    },
     'Postal code': {
         value: 'Postnummer',
     },

package/dist/collection/components/store/translationStore/strings.polish.js

@@ -221,6 +221,9 @@ export const stringsPolish = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Proszę upewnić się, że tekst używa tylko alfabetu łacińskiego (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Proszę wprowadzić prawidłowy adres e-mail.',
+    },
     'Postal code': {
         value: 'Kod pocztowy',
     },

package/dist/collection/components/store/translationStore/strings.portuguese.js

@@ -221,6 +221,9 @@ export const stringsPortuguese = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Por favor, certifique-se de que seu texto utilize apenas o alfabeto latino (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Por favor, insira um endereço de e-mail válido.',
+    },
     'Postal code': {
         value: 'Código Postal',
     },

package/dist/collection/components/store/translationStore/strings.russian.js

@@ -221,6 +221,9 @@ export const stringsRussian = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Пожалуйста, убедитесь, что ваш текст использует только латинский алфавит (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Пожалуйста, введите действительный адрес электронной почты.',
+    },
     'Postal code': {
         value: 'Почтовый индекс',
     },

package/dist/collection/components/store/translationStore/strings.spanish.js

@@ -221,6 +221,9 @@ export const stringsSpanish = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Por favor, asegúrese de que su texto use solo el alfabeto latino (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Por favor, introduce una dirección de correo electrónico válida.',
+    },
     'Postal code': {
         value: 'Código postal',
     },

package/dist/collection/components/store/translationStore/strings.swedish.js

@@ -221,6 +221,9 @@ export const stringsSwedish = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Vänligen se till att din text endast använder det latinska alfabetet (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Vänligen ange en giltig e-postadress.',
+    },
     'Postal code': {
         value: 'Postnummer',
     },

package/dist/collection/components/store/translationStore/strings.turkish.js

@@ -221,6 +221,9 @@ export const stringsTurkish = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Lütfen metninizin sadece Latin alfabesini kullandığından emin olun (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Lütfen geçerli bir e-posta adresi girin.',
+    },
     'Postal code': {
         value: 'Posta kodu',
     },

package/dist/collection/components/store/translationStore/strings.vietnamese.js

@@ -221,6 +221,9 @@ export const stringsVietnamese = {
     'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
         value: 'Vui lòng đảm bảo rằng văn bản của bạn chỉ sử dụng bảng chữ cái Latinh (A-Z, a-z).',
     },
+    'Please enter a valid email address.': {
+        value: 'Vui lòng nhập địa chỉ email hợp lệ.',
+    },
     'Postal code': {
         value: 'Mã bưu điện',
     },

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

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

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -33,4 +33,8 @@
 
 :host .zonos--title {
   margin-bottom: 16px;
+}
+:host .zonos--input-invalid {
+  border: 2px solid var(--zonos-elements-red-600);
+  border-radius: var(--zonos--border-radius);
 }

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

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { stripeStore } from "../../store/checkout/stripe";
+import { translate } from "../../store/translationStore";
+import { getBorderRadius } from "../../utils/getBorderRadius";
 import { logError } from "../../utils/logging/logError";
 /**
  * This component is a wrapper for the stripe authentication element that would render default style object
@@ -9,6 +11,7 @@ export class ZonosLinkAuthentication {
     constructor() {
         this.titleText = undefined;
         this.defaultEmail = null;
+        this.isEmailError = false;
         this.stripe = stripeStore.stripe;
     }
     watchInitStripe() {
@@ -32,7 +35,9 @@ export class ZonosLinkAuthentication {
         }
         linkAuthenticationElement.mount(linkAuthenticationElementContainer);
         linkAuthenticationElement.on('change', event => {
+            var _a;
             stripeStore.stripeLinkEventData = event;
+            (_a = this.linkAuthenticationChange) === null || _a === void 0 ? void 0 : _a.emit();
         });
         stripeStore.stripeLinkElement = linkAuthenticationElement;
     }
@@ -42,7 +47,9 @@ export class ZonosLinkAuthentication {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'f0b26abf99ef99c6665dabdddebc9ff086b6816c', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '898dbdffac06fe2a68af90610a22044bb72391ce', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'e2ec9abb0cf76a39a1262e1366e375dd898450cd', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '7950960b06faca8192a2132d8543013a99a0e5ba', class: "zonos--link-authentication zonos--elements", style: {
+                '--zonos--border-radius': getBorderRadius(),
+            } }, h("zonos-text", { key: '1f8f7f96e39f0d0c0b4012846b27fef994aa9db1', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '4b6b2471fe7254cea24b628284451bd46146f001', class: `zonos--link-authentication-component ${this.isEmailError && 'zonos--input-invalid'}` }), this.isEmailError && (h("zonos-text", { key: '3d55092ae5c569641c0ae915e63abe005f362207', textColor: "red-600" }, translate('Please enter a valid email address.')))));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }
@@ -92,6 +99,24 @@ export class ZonosLinkAuthentication {
                 "attribute": "default-email",
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "isEmailError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Email error text to dispaly"
+                },
+                "attribute": "is-email-error",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -100,6 +125,24 @@ export class ZonosLinkAuthentication {
             "stripe": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "linkAuthenticationChange",
+                "name": "linkAuthenticationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the authentication element changes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

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

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

@@ -36,7 +36,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'adcbeae4dadcaff59781ae47f779032e9fe43f5c', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'c83017ca67410a6715cacf6c0e524ed7b4304837', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '55c6d6dde8efaffec4411a838c62b7ede3efe30a', class: "zonos--payment-component" }), h("div", { key: 'd27b440253222daf94e4a6ad862c901efa54bfe5', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'cf616ec959fd1b7396ed86b23561f459e0da8722', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'e5564db71ba2c0d67d372cb1804d6d462cdf1b33', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '3ea47f2c0a541590210d181bc73ecb3fb27e7783', class: "zonos--payment-component" }), h("div", { key: 'd3a46a127448568caf4309806e88556594075c12', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/isColorVariable.js

@@ -2,6 +2,8 @@ export const isColorVariable = (color) => {
     const isAminoVariable = color &&
         // match --zonos-elements-<color>
         (/--zonos-elements-/gi.test(color) ||
+            // match --zonos--<color>
+            /--zonos--/gi.test(color) ||
             // match 'gray-0'
             /(\-*)\w+-\d+/gi.test(color));
     return (!!isAminoVariable &&

package/dist/collection/styles/stripe/addressRuleStyle.js

@@ -1,3 +1,4 @@
+import { zonosStore } from "../../components/store/zonosStore";
 export const addressRuleStyle = ({ theme, }) => {
     const defaultStyle = {
         '.AccordionItem': {
@@ -11,6 +12,9 @@ export const addressRuleStyle = ({ theme, }) => {
         },
         '.Input': {
             boxShadow: 'none',
+            fontSize: zonosStore.appearance.fontSizeInputValue
+                ? `${zonosStore.appearance.fontSizeInputValue}px`
+                : undefined,
             // need to reset everything and the paddingTop to default, otherwise the paddingTop will not be updated.
             padding: '0',
             paddingBottom: '8px',
@@ -19,6 +23,11 @@ export const addressRuleStyle = ({ theme, }) => {
             // any value here will be add up to the default paddingTop (20px).
             paddingTop: '6px',
         },
+        '.Label--resting': {
+            fontSize: zonosStore.appearance.fontSizeInputLabel
+                ? `${zonosStore.appearance.fontSizeInputLabel}px`
+                : undefined,
+        },
         '.PickerItem--highlight': {
             boxShadow: '0 0 0 2px var(--colorBackground)',
         },