@zonos/elements 1.3.39 → 1.3.41

package/dist/esm/{zonos-notification_2.entry.js → zonos-notification_3.entry.js}

@@ -1,10 +1,11 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-3b46f3c3.js';
-import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { r as registerInstance, h, H as Host, d as getElement, c as createEvent } from './index-86b8247e.js';
+import { d as zonosStoreFontFamily } from './zonosStore-8fc9ceb2.js';
 import { c as classes } from './classes-0d95c529.js';
-import { h as stripeStore } from './cart-eb75b113.js';
-import { a as logError } from './logError-c456c092.js';
-import './isDarkColor-f8324c10.js';
-import './getBorderRadius-947c24de.js';
+import { j as stripeStore } from './cart-f53c9f90.js';
+import { a as logError, l as log } from './logError-c456c092.js';
+import { d as paypalStoreInitButtons } from './paypal-72296ae6.js';
+import './isDarkColor-3119e351.js';
+import './getBorderRadius-3ba98361.js';
 
 const zonosNotificationCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";
 const ZonosNotificationStyle0 = zonosNotificationCss;
@@ -86,7 +87,7 @@ const ZonosPayment = class {
         // Create and mount the Authentication Element in ${type} mode
         const paymentElement = stripeStore.stripePaymentElement ||
             this.stripeElements.create('payment', {
-                layout: 'tabs',
+                layout: 'accordion',
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
         if (!paymentElementContainer) {
@@ -105,7 +106,7 @@ const ZonosPayment = class {
     }
     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: 'c940b38c3bb7e8a7856ce28e62ee40d60eb445a1', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '7625e3865a13cdf4fc6c05d7a2e0c7b84ae5ebd4', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '92cde315378611a675b19cdce46b1bf6ac2221a1', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'ab601d9a0cc6fe2fee19f45d6321dcc81b418cff', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '27857c99c59e4913fa403ef5b23b5b7d7f32bd45', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '329b5a5617f0c5942b209df1ccf3bfcb4ddabb0c', class: "zonos--payment-component" }), h("div", { key: '7abb08922e9f607314713fc9fa762a3bb8a35b13', class: "zonos--payment-paypal-container" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -115,4 +116,54 @@ const ZonosPayment = class {
 };
 ZonosPayment.style = ZonosPaymentStyle0;
 
-export { ZonosNotification as zonos_notification, ZonosPayment as zonos_payment };
+const zonosPaypalPaymentCss = ".sc-zonos-paypal-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-paypal-payment-h *.sc-zonos-paypal-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-paypal-payment-h img.sc-zonos-paypal-payment{max-width:100%}.sc-zonos-paypal-payment-h dl.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h dd.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h1.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h2.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h3.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h4.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h5.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h h6.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h hr.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h figure.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h p.sc-zonos-paypal-payment,.sc-zonos-paypal-payment-h pre.sc-zonos-paypal-payment{margin:0}.sc-zonos-paypal-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-paypal-payment-h{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}";
+const ZonosPaypalPaymentStyle0 = zonosPaypalPaymentCss;
+
+const ZonosPaypalPayment = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paypalSessionDone = createEvent(this, "paypalSessionDone", 7);
+        this.paypalSessionFail = createEvent(this, "paypalSessionFail", 7);
+    }
+    async loadPaypal() {
+        if (!window.Zonos.paypal) {
+            log('Paypal is not available');
+            return;
+        }
+        // Init paypal store buttons
+        const paypalButtons = paypalStoreInitButtons({
+            onPaypalFail: () => {
+                log('onPaypalFail');
+                this.paypalSessionFail.emit();
+            },
+            onPaypalSessionDone: ({ orderId }) => {
+                log('onPaypalSessionDone', 'info', { orderId });
+                this.paypalSessionDone.emit({ orderId });
+            },
+        });
+        if (!(paypalButtons === null || paypalButtons === void 0 ? void 0 : paypalButtons.length)) {
+            log('There are no paypal buttons available');
+            return;
+        }
+        const container = this.el.querySelector('.zonos--payment-paypal-container');
+        if (!container) {
+            log('Cannot find container element for paypal buttons');
+            return;
+        }
+        // render paypal buttons
+        paypalButtons.forEach(async (paypalButton) => {
+            await paypalButton.render(container);
+        });
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        void this.loadPaypal();
+    }
+    render() {
+        return (h(Host, { key: 'a09fe5b66b1ac971c10529ecb6213479f2870f08', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '6ba337785b8a90965e0cba05fd62681bc92633fe', class: "zonos--payment-paypal-container" })));
+    }
+    get el() { return getElement(this); }
+};
+ZonosPaypalPayment.style = ZonosPaypalPaymentStyle0;
+
+export { ZonosNotification as zonos_notification, ZonosPayment as zonos_payment, ZonosPaypalPayment as zonos_paypal_payment };

package/dist/esm/zonos-shipping-rich-radio.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-3b46f3c3.js';
-import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-ba9e541e.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-86b8247e.js';
+import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-8fc9ceb2.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-947c24de.js';
+import { g as getBorderRadius } from './getBorderRadius-3ba98361.js';
 import { i as isColorVariable } from './isColorVariable-82457bef.js';
 
 const zonosShippingRichRadioCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--zonos-elements-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:16px;-ms-flex-align:center;align-items:center;gap:16px;cursor:pointer;border:1px solid var(--zonos-elements-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--zonos-elements-radius-10));border-top-right-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--zonos-elements-radius-10));border-bottom-left-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--zonos-elements-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";

package/dist/esm/zonos-text.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
-import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { r as registerInstance, h, H as Host } from './index-86b8247e.js';
+import { d as zonosStoreFontFamily } from './zonosStore-8fc9ceb2.js';
 import { c as classes } from './classes-0d95c529.js';
 import { i as isColorVariable } from './isColorVariable-82457bef.js';
 

package/dist/esm/zonos-v-stack.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
-import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { r as registerInstance, h, H as Host } from './index-86b8247e.js';
+import { d as zonosStoreFontFamily } from './zonosStore-8fc9ceb2.js';
 import { c as classes } from './classes-0d95c529.js';
 
 const zonosVStackCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
@@ -11,9 +11,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '8cdee94089af0eac57784a7914e169f363472577', style: {
+        return (h(Host, { key: 'e542ff8bbefa3223f157ad4bd6e537af8e5d5a5d', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'd60da826d77b4cf7e5349b75927fc746f0053ddd', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '97b0e8232cbac73938225e1310712c1607997073' }))));
+            } }, h("div", { key: '9bd1cc8fdf94265d7d2767d507af7ad21d77234d', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'c8a294410e4c1348405c53283cf4dba176d5b27b' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/esm/{zonosStore-ba9e541e.js → zonosStore-8fc9ceb2.js}

@@ -1,4 +1,4 @@
-import { g as getRenderingRef, f as forceUpdate } from './index-3b46f3c3.js';
+import { g as getRenderingRef, f as forceUpdate } from './index-86b8247e.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -2769,6 +2769,9 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
     checkoutSettings: {
         allowedCharacterSets: 'ALL',
         analyticsProviders: [],
+        externalPaymentMethods: [],
+        externalServiceTokens: [],
+        mode: 'TEST',
         orderNotifications: {
             abandonedCart: {
                 delay: 0,
@@ -2832,6 +2835,7 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
     // toggle to know if the config has been loaded with graphql
     stripeApiKey: '',
     zonosApiKey: '',
+    zonosMode: null,
 }));
 let savedZonosSettings = null;
 /**