@zonos/elements 1.3.10 → 1.3.11-alpha.1

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

@@ -20,9 +20,15 @@ export const stringsArabic = {
     'Continue to shipping': {
         value: 'متابعة إلى الشحن',
     },
+    Customer: {
+        value: 'العميل',
+    },
     'Customer information': {
         value: 'معلومات العميل',
     },
+    Delivery: {
+        value: 'التوصيل',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'سيتم تطبيق الرسوم والضرائب على العناصر والشحن.',
     },
@@ -71,6 +77,9 @@ export const stringsArabic = {
     Pay: {
         value: 'دفع',
     },
+    Payment: {
+        value: 'الدفع',
+    },
     'Payment failed': {
         value: 'فشل الدفع',
     },

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

@@ -20,9 +20,15 @@ export const stringsBase = {
     'Continue to shipping': {
         value: 'Continue to shipping',
     },
+    Customer: {
+        value: 'Customer',
+    },
     'Customer information': {
         value: 'Customer information',
     },
+    Delivery: {
+        value: 'Delivery',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Duties and taxes will be applied to items and shipping.',
     },
@@ -71,6 +77,9 @@ export const stringsBase = {
     Pay: {
         value: 'Pay',
     },
+    Payment: {
+        value: 'Payment',
+    },
     'Payment failed': {
         value: 'Payment failed',
     },

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

@@ -20,9 +20,15 @@ export const stringsChinese = {
     'Continue to shipping': {
         value: '继续运送',
     },
+    Customer: {
+        value: '顾客',
+    },
     'Customer information': {
         value: '客户信息',
     },
+    Delivery: {
+        value: '送货',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: '商品和运费将征收关税和税款。',
     },
@@ -71,6 +77,9 @@ export const stringsChinese = {
     Pay: {
         value: '支付',
     },
+    Payment: {
+        value: '支付',
+    },
     'Payment failed': {
         value: '付款失败',
     },

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

@@ -20,9 +20,15 @@ export const stringsDanish = {
     'Continue to shipping': {
         value: 'Fortsæt til levering',
     },
+    Customer: {
+        value: 'Kunde',
+    },
     'Customer information': {
         value: 'Kundeinformation',
     },
+    Delivery: {
+        value: 'Levering',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Told og skatter vil blive pålagt varer og fragt.',
     },
@@ -71,6 +77,9 @@ export const stringsDanish = {
     Pay: {
         value: 'Betal',
     },
+    Payment: {
+        value: 'Betaling',
+    },
     'Payment failed': {
         value: 'Betaling mislykkedes',
     },

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

@@ -20,9 +20,15 @@ export const stringsDutch = {
     'Continue to shipping': {
         value: 'Ga verder naar verzending',
     },
+    Customer: {
+        value: 'Klant',
+    },
     'Customer information': {
         value: 'Klantinformatie',
     },
+    Delivery: {
+        value: 'Levering',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Belastingen en heffingen worden toegepast op artikelen en verzending.',
     },
@@ -71,6 +77,9 @@ export const stringsDutch = {
     Pay: {
         value: 'Betalen',
     },
+    Payment: {
+        value: 'Betaling',
+    },
     'Payment failed': {
         value: 'Betaling mislukt',
     },

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

@@ -20,9 +20,15 @@ export const stringsFrench = {
     'Continue to shipping': {
         value: 'Continuer vers la livraison',
     },
+    Customer: {
+        value: 'Client',
+    },
     'Customer information': {
         value: 'Informations client',
     },
+    Delivery: {
+        value: 'Livraison',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Des droits et taxes seront appliqués aux articles et à la livraison.',
     },
@@ -71,6 +77,9 @@ export const stringsFrench = {
     Pay: {
         value: 'Payer',
     },
+    Payment: {
+        value: 'Paiement',
+    },
     'Payment failed': {
         value: 'Échec du paiement',
     },

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

@@ -20,9 +20,15 @@ export const stringsGerman = {
     'Continue to shipping': {
         value: 'Weiter zur Lieferung',
     },
+    Customer: {
+        value: 'Kunde',
+    },
     'Customer information': {
         value: 'Kundeninformationen',
     },
+    Delivery: {
+        value: 'Lieferung',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Zölle und Steuern werden auf Artikel und Versand erhoben.',
     },
@@ -71,6 +77,9 @@ export const stringsGerman = {
     Pay: {
         value: 'Bezahlen',
     },
+    Payment: {
+        value: 'Zahlung',
+    },
     'Payment failed': {
         value: 'Zahlung fehlgeschlagen',
     },

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

@@ -20,9 +20,15 @@ export const stringsHebrew = {
     'Continue to shipping': {
         value: 'המשך למשלוח',
     },
+    Customer: {
+        value: 'לקוח',
+    },
     'Customer information': {
         value: 'פרטי לקוח',
     },
+    Delivery: {
+        value: 'מְסִירָה',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'מכס ומס יחולו על פריטים ומשלוח.',
     },
@@ -71,6 +77,9 @@ export const stringsHebrew = {
     Pay: {
         value: 'לשלם',
     },
+    Payment: {
+        value: 'תַשְׁלוּם',
+    },
     'Payment failed': {
         value: 'התשלום נכשל',
     },

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

@@ -20,9 +20,15 @@ export const stringsIndonesian = {
     'Continue to shipping': {
         value: 'Lanjutkan ke pengiriman',
     },
+    Customer: {
+        value: 'Pelanggan',
+    },
     'Customer information': {
         value: 'Informasi pelanggan',
     },
+    Delivery: {
+        value: 'Pengiriman',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Bea masuk dan pajak akan dikenakan pada barang dan pengiriman.',
     },
@@ -71,6 +77,9 @@ export const stringsIndonesian = {
     Pay: {
         value: 'Bayar',
     },
+    Payment: {
+        value: 'Pembayaran',
+    },
     'Payment failed': {
         value: 'Pembayaran gagal',
     },

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

@@ -20,9 +20,15 @@ export const stringsItalian = {
     'Continue to shipping': {
         value: 'Continua con la spedizione',
     },
+    Customer: {
+        value: 'Cliente',
+    },
     'Customer information': {
         value: 'Informazioni cliente',
     },
+    Delivery: {
+        value: 'Consegna',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Dazi e tasse saranno applicati agli articoli e alla spedizione.',
     },
@@ -71,6 +77,9 @@ export const stringsItalian = {
     Pay: {
         value: 'Paga',
     },
+    Payment: {
+        value: 'Pagamento',
+    },
     'Payment failed': {
         value: 'Pagamento non riuscito',
     },

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

@@ -20,9 +20,15 @@ export const stringsJapanese = {
     'Continue to shipping': {
         value: '配送オプションに進む',
     },
+    Customer: {
+        value: '顧客',
+    },
     'Customer information': {
         value: '顧客情報',
     },
+    Delivery: {
+        value: '配送',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: '関税と税金が商品と配送に適用されます。',
     },
@@ -71,6 +77,9 @@ export const stringsJapanese = {
     Pay: {
         value: '支払う',
     },
+    Payment: {
+        value: '支払い',
+    },
     'Payment failed': {
         value: '支払いに失敗しました',
     },

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

@@ -20,9 +20,15 @@ export const stringsKorean = {
     'Continue to shipping': {
         value: '배송 계속',
     },
+    Customer: {
+        value: '고객',
+    },
     'Customer information': {
         value: '고객 정보',
     },
+    Delivery: {
+        value: '배달',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: '물품과 배송에 관세와 세금이 부과됩니다.',
     },
@@ -71,6 +77,9 @@ export const stringsKorean = {
     Pay: {
         value: '지불',
     },
+    Payment: {
+        value: '지불',
+    },
     'Payment failed': {
         value: '결제 실패',
     },

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

@@ -20,9 +20,15 @@ export const stringsNorwegian = {
     'Continue to shipping': {
         value: 'Fortsett til frakt',
     },
+    Customer: {
+        value: 'Kunde',
+    },
     'Customer information': {
         value: 'Kundeinformasjon',
     },
+    Delivery: {
+        value: 'Levering',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Avgift og skatt vil legges til på varer og frakt.',
     },
@@ -71,6 +77,9 @@ export const stringsNorwegian = {
     Pay: {
         value: 'Betal',
     },
+    Payment: {
+        value: 'Betaling',
+    },
     'Payment failed': {
         value: 'Betaling mislyktes',
     },

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

@@ -20,9 +20,15 @@ export const stringsPolish = {
     'Continue to shipping': {
         value: 'Przejdź dalej do wysyłki',
     },
+    Customer: {
+        value: 'Klient',
+    },
     'Customer information': {
         value: 'Informacje o kliencie',
     },
+    Delivery: {
+        value: 'Dostawa',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Cła i podatki zostaną naliczone do towarów i wysyłki.',
     },
@@ -71,6 +77,9 @@ export const stringsPolish = {
     Pay: {
         value: 'Zapłać',
     },
+    Payment: {
+        value: 'Płatność',
+    },
     'Payment failed': {
         value: 'Płatność nieudana',
     },

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

@@ -20,9 +20,15 @@ export const stringsPortuguese = {
     'Continue to shipping': {
         value: 'Continuar para o envio',
     },
+    Customer: {
+        value: 'Cliente',
+    },
     'Customer information': {
         value: 'Informações do cliente',
     },
+    Delivery: {
+        value: 'Entrega',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Impostos e taxas serão aplicados aos itens e ao frete.',
     },
@@ -71,6 +77,9 @@ export const stringsPortuguese = {
     Pay: {
         value: 'Pagar',
     },
+    Payment: {
+        value: 'Pagamento',
+    },
     'Payment failed': {
         value: 'Falha no pagamento',
     },

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

@@ -20,9 +20,15 @@ export const stringsRussian = {
     'Continue to shipping': {
         value: 'Продолжить к доставке',
     },
+    Customer: {
+        value: 'Клиент',
+    },
     'Customer information': {
         value: 'Информация о клиенте',
     },
+    Delivery: {
+        value: 'Доставка',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Пошлины и налоги будут применены к товарам и доставке.',
     },
@@ -71,6 +77,9 @@ export const stringsRussian = {
     Pay: {
         value: 'Оплатить',
     },
+    Payment: {
+        value: 'Оплата',
+    },
     'Payment failed': {
         value: 'Ошибка оплаты',
     },

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

@@ -20,9 +20,15 @@ export const stringsSpanish = {
     'Continue to shipping': {
         value: 'Continuar con el envío',
     },
+    Customer: {
+        value: 'Cliente',
+    },
     'Customer information': {
         value: 'Información del cliente',
     },
+    Delivery: {
+        value: 'Entrega',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Los impuestos y aranceles se aplicarán a los artículos y al envío.',
     },
@@ -71,6 +77,9 @@ export const stringsSpanish = {
     Pay: {
         value: 'Pagar',
     },
+    Payment: {
+        value: 'Pago',
+    },
     'Payment failed': {
         value: 'Pago fallido',
     },

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

@@ -20,9 +20,15 @@ export const stringsSwedish = {
     'Continue to shipping': {
         value: 'Fortsätt till frakt',
     },
+    Customer: {
+        value: 'Kund',
+    },
     'Customer information': {
         value: 'Kundinformation',
     },
+    Delivery: {
+        value: 'Leverans',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Tull och skatter kommer att tillämpas på varor och frakt.',
     },
@@ -71,6 +77,9 @@ export const stringsSwedish = {
     Pay: {
         value: 'Betala',
     },
+    Payment: {
+        value: 'Betalning',
+    },
     'Payment failed': {
         value: 'Betalningen misslyckades',
     },

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

@@ -20,9 +20,15 @@ export const stringsTurkish = {
     'Continue to shipping': {
         value: 'Kargoya devam et',
     },
+    Customer: {
+        value: 'Müşteri',
+    },
     'Customer information': {
         value: 'Müşteri bilgileri',
     },
+    Delivery: {
+        value: 'Teslimat',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Ürünlere ve kargoya vergi ve gümrük vergisi uygulanacak.',
     },
@@ -71,6 +77,9 @@ export const stringsTurkish = {
     Pay: {
         value: 'Öde',
     },
+    Payment: {
+        value: 'Ödeme',
+    },
     'Payment failed': {
         value: 'Ödeme başarısız',
     },

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

@@ -20,9 +20,15 @@ export const stringsVietnamese = {
     'Continue to shipping': {
         value: 'Tiếp tục đến vận chuyển',
     },
+    Customer: {
+        value: 'Khách hàng',
+    },
     'Customer information': {
         value: 'Thông tin khách hàng',
     },
+    Delivery: {
+        value: 'Giao hàng',
+    },
     'Duties and taxes will be applied to items and shipping.': {
         value: 'Thuế và phí sẽ được áp dụng cho hàng hóa và vận chuyển.',
     },
@@ -71,6 +77,9 @@ export const stringsVietnamese = {
     Pay: {
         value: 'Thanh toán',
     },
+    Payment: {
+        value: 'Thanh toán',
+    },
     'Payment failed': {
         value: 'Thanh toán thất bại',
     },

package/dist/collection/components/store/zonosStore.js

@@ -2,7 +2,7 @@ import { createStore } from "@stencil/store";
 import { mergeConfig } from "../utils/mergeConfig";
 const { reset, state: zonosStore } = createStore(() => ({
     appearance: {
-        colorPrimary: 'purple',
+        colorPrimary: 'white',
         fontFamily: 'Inter',
         logoUrl: '',
         style: 'ROUNDED',

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

@@ -173,7 +173,7 @@ export class ZonosAddress {
     }
     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: '3927946760be161a50ccf924cef5a58503887ac8', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'ac95946a7322dbfab13b3d29df2e22d251ba553c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '552c6e94d64a842f702c5499320713c8b8fcab6b', class: "zonos--address-component" }), this.hasInvalidCharacters && (h("zonos-banner", { bannerTitle: translate('Please ensure your text uses the Latin alphabet only (A-Z, a-z).'), intent: "error" }))));
+        return (h(Host, { key: '94a81dc71b5425ac0ab7868bc55072fdd695fa7d', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '5bddb83ba17b50b779820fd9bdf0630ce03274b5', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '0f076c843b1997b8e1290caf2b8fe18b78114f65', class: "zonos--address-component" }), this.hasInvalidCharacters && (h("zonos-banner", { bannerTitle: translate('Please ensure your text uses the Latin alphabet only (A-Z, a-z).'), intent: "error" }))));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

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

@@ -36,7 +36,7 @@ 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: '671681b3ca3e95ab25a70cb44e84db7e2b3903e8', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '8d20c795500e3ce27b92cdeb0446908e550f9f13', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'b8374d7d7a4844b4c2cf6363b8d2d225bb52b21d', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: 'a434761e3f237cd44971e458512c7649f214eb4d', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '0c350ff6dabb1c71376e4e6539a68613d7174189', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'e9cc2bd1e68b64e2fed41851a0d2f2be40583337', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,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: 'e10a4ce1a9ecf05ad8efaceeb861284a92e475d2', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'a1b52de6a2cec2f707e00c39ebcd7752ad191af6', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'db50fedad509b3bc972cfe02d5973a3c93a6eb23', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'a773ce78377a70c57577eb1efdac9d2563d1a60d', class: "zonos--payment-component" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,16 @@
+import tinycolor from "tinycolor2";
+import { isDarkColor } from "./isDarkColor";
+export const getContrastColor = ({ backgroundColor, color, }) => {
+    // get readibility of the color
+    const colorReadibilityValue = tinycolor.readability(color, backgroundColor);
+    if (colorReadibilityValue > 2.5) {
+        // no need to change the color if it's already contrast enough
+        return color;
+    }
+    if (isDarkColor(color)) {
+        return '#ffffff';
+    }
+    else {
+        return tinycolor(color).darken(25).toHexString();
+    }
+};

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

@@ -4,7 +4,7 @@ export const isColorVariable = (color) => {
         (/--amino-/gi.test(color) ||
             // match 'gray-0'
             /(\-*)\w+-\d+/gi.test(color));
-    return (isAminoVariable &&
+    return (!!isAminoVariable &&
         // match rgb, rgba, hsl, hsla, hex, and css variable
         !color.includes('(') &&
         // match hex

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

@@ -0,0 +1,12 @@
+/**
+ * Filter out all of the undefined values from the object so we don't have undefined css variable values
+ */
+export const styles = (props) => {
+    // loop through the object and filter out all of the underfined values
+    return Object.entries(props).reduce((acc, [key, value]) => {
+        if (value) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+};

package/dist/components/getContrastColor.js

@@ -0,0 +1,18 @@
+import { t as tinycolor, i as isDarkColor } from './isDarkColor.js';
+
+const getContrastColor = ({ backgroundColor, color, }) => {
+    // get readibility of the color
+    const colorReadibilityValue = tinycolor.readability(color, backgroundColor);
+    if (colorReadibilityValue > 2.5) {
+        // no need to change the color if it's already contrast enough
+        return color;
+    }
+    if (isDarkColor(color)) {
+        return '#ffffff';
+    }
+    else {
+        return tinycolor(color).darken(25).toHexString();
+    }
+};
+
+export { getContrastColor as g };

package/dist/components/isColorVariable.js

@@ -4,7 +4,7 @@ const isColorVariable = (color) => {
         (/--amino-/gi.test(color) ||
             // match 'gray-0'
             /(\-*)\w+-\d+/gi.test(color));
-    return (isAminoVariable &&
+    return (!!isAminoVariable &&
         // match rgb, rgba, hsl, hsla, hex, and css variable
         !color.includes('(') &&
         // match hex

package/dist/components/isDarkColor.js

@@ -1196,4 +1196,4 @@ const isDarkColor = (color) => {
     return tinycolor(color).isDark();
 };
 
-export { isDarkColor as i };
+export { isDarkColor as i, tinycolor as t };