@zonos/elements 1.3.31 → 1.3.32

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-ba9e541e.js';
-import { r as handleFetch, l as localizationStore, u as isValidSelector, t as translate, w as getZCountryUrlParam, x as setZCountryUrlParam, y as currencyDisplay, z as currencyConvertAndFormat, A as currencyConvert, B as currencyFormat } from './cart-b96aaa4f.js';
+import { r as handleFetch, l as localizationStore, u as isValidSelector, t as translate, w as getZCountryUrlParam, x as setZCountryUrlParam, y as currencyDisplay, z as currencyConvertAndFormat, A as currencyConvert, B as currencyFormat } from './cart-a90aa9ae.js';
 import { c as classes } from './classes-0d95c529.js';
 import { a as logError, l as log } from './logError-c456c092.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';

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

@@ -23,17 +23,17 @@ const ZonosInput = class {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: 'f2bf9e34ef694f026eceed1327603659bbd4c5a4', class: classes([
+        return (h(Host, { key: 'f4b7ad75b2aebce3bc05a482fe20fee290a3a4e7', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0fe9066fc683f6a683c494209fa29b10c0076dc5', class: classes([
+            } }, h("div", { key: '356e16c11c1cd9edf137f69978ebaa3eb2c28d4e', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: 'f185418ddc6a83e829a9d2dd44a021288f00d4d5', class: classes([
+            ]) }, h("input", { key: '71659072bd58942efebb88be65ced18ad29be8ab', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -41,7 +41,7 @@ const ZonosInput = class {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '3d4ab801e27af15d819b17db226f0d5f719ac903', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: 'b84c60836fc969c23aedc314c67337e8e87f2ab6', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/zonos-language-select_2.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
+import { H as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-a90aa9ae.js';
+import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { l as languages } from './ILanguage-cd6acb72.js';
+import './logError-c456c092.js';
+import './isDarkColor-f8324c10.js';
+import './getBorderRadius-947c24de.js';
+
+const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
+</svg>
+`;
+
+const zonosLanguageSelectCss = ":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 .zonos--language-select{width:100%}:host .zonos--language-select .zonos--language-select-content{display:grid;grid-template-columns:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-columns:repeat(3, minmax(max-content, 1fr));padding:16px;padding-top:0px}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button{display:-ms-flexbox;display:flex;padding:8px;gap:4px;-ms-flex-align:center;align-items:center;border-radius:var(--zonos-elements-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button:hover{background:var(--zonos-elements-gray-100)}@media (max-width: 400px){:host .zonos--language-select .zonos--language-select-content{grid-template-columns:1fr 1fr}}";
+const ZonosLanguageSelectStyle0 = zonosLanguageSelectCss;
+
+const ZonosLanguageSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.languageSelected = (languageCode) => {
+            // mutate the selected language code in store
+            void localizationStoreUpdateSelectedLocale(languageCode);
+            this.handleOnClose();
+        };
+        this.handleOnClose = () => { };
+    }
+    render() {
+        const { selectedLocale } = localizationStore;
+        return (h(Host, { key: '6682af3d631bac1a8d3783418c30364ff7694792', class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '9f7e60bc5c4e9d1c0cc31afcbbaec444a7da630e', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'f790ef85eeb0bed05773d98793437ab4d6e64c8d', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '7385a1134b21ae4b39947483ee643da021e6c54c', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+    }
+};
+ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;
+
+const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
+
+const zonosSelectDialogHeaderCss = ":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 .zonos--select-dialog-header-wrapper{position:-webkit-sticky;position:sticky;top:0;background:var(--zonos-elements-surface-color);padding:16px}:host .zonos--select-dialog-header-wrapper .zonos--select-dialog-header{position:relative;-ms-flex-pack:justify;justify-content:space-between;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
+const ZonosSelectDialogHeaderStyle0 = zonosSelectDialogHeaderCss;
+
+const ZonosSelectDialogHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.handleOnClose = () => { };
+        this.label = '';
+    }
+    render() {
+        return (h(Host, { key: '21cd3c3e35baf172ecad7f47a76810e8f39bdeff', class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("zonos-v-stack", { key: '0470633326b6fca9b45a8be67e0d77819561f634', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '8713cbf368658af22bb88825d32175117d47c95b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '2f94e9f6139570398897ca55934c5244df7f82e8', type: "boldLabel" }, this.label), h("zonos-button", { key: 'c247dabcc8f487a4cc5a814fb1aa4d9a68fa4ba3', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '26727e634ec09a3b9e3912ada3b920a87a1ba4d0' }))));
+    }
+};
+ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;
+
+export { ZonosLanguageSelect as zonos_language_select, ZonosSelectDialogHeader as zonos_select_dialog_header };

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

@@ -12,7 +12,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: 'a148ed9b4d285cd39b63da348dcfcc11f4973f04', class: "zonos--elements" }, h("a", { key: '121b299148c4227c0b500ecb6ded03470476aa90', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'cf6637f399d3c069bd6ea3d0f3a900fd0740afc5' }))));
+        return (h(Host, { key: 'bba0da02c0dee468bd0cacd268f339f7ec4f1008', class: "zonos--elements" }, h("a", { key: '19515197e397b2b24237e77d3e89de75382c14e1', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '63d597a3091e954c9302e461030646b38ee2396e' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

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

@@ -15,11 +15,11 @@ const ZonosLogo = class {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: 'c790c72d413c586a873c5046a1aee797c1f0af36', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '08ef20244bc204125a7a308efed42cd7fc86c885', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '68efd2097a0d8488308de0b50bef30cc67deb6fa', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, H as Host, d as getElement } from './index-3b46f3c3.js';
+import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { c as classes } from './classes-0d95c529.js';
+import { h as stripeStore } from './cart-a90aa9ae.js';
+import { a as logError } from './logError-c456c092.js';
+import './isDarkColor-f8324c10.js';
+import './getBorderRadius-947c24de.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;
+
+const ZonosNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.notificationArray = [];
+    }
+    /**
+     * Show a notification
+     */
+    async showNotification(notification) {
+        // random generate id
+        const id = `id-${Math.random().toString(36).substring(2, 9)}`;
+        const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
+        this.notificationArray = [...this.notificationArray, notificationItem];
+        setTimeout(() => {
+            this.updateTransitionClass({
+                id,
+                transitionClass: 'show',
+            });
+        }, 50);
+        setTimeout(() => {
+            this.removeNotification(id);
+        }, notificationItem.timeout);
+    }
+    updateTransitionClass({ id, transitionClass, }) {
+        this.notificationArray = this.notificationArray.map(notification => {
+            if (notification.id === id) {
+                return Object.assign(Object.assign({}, notification), { transitionClass });
+            }
+            return notification;
+        });
+    }
+    /**
+     * Remove a notification
+     */
+    removeNotification(id) {
+        // add hide class before removing the item 100ms to trigger animation
+        this.updateTransitionClass({
+            id,
+            transitionClass: '',
+        });
+        setTimeout(() => {
+            this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
+        }, 300);
+    }
+    render() {
+        return (h(Host, { key: '17c08c90c6c1dfade4e43451c196127a0f53429e', class: classes(['zonos--elements zonos--notification']), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '6624419d86a5c7518539069dbc5c9d7c08262c75', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            return (h("div", { "aria-hidden": "true", class: classes([
+                    'zonos--notification-item',
+                    notification.type,
+                    notification.transitionClass,
+                ]), key: notification.id, onClick: () => {
+                    this.removeNotification(notification.id);
+                } }, h("zonos-text", { textColor: "gray-0" }, notification.message)));
+        }))));
+    }
+};
+ZonosNotification.style = ZonosNotificationStyle0;
+
+const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:16px}";
+const ZonosPaymentStyle0 = zonosPaymentCss;
+
+const ZonosPayment = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
+        this.stripeElements = stripeStore.stripeElements;
+    }
+    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) {
+            logError('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, { key: '870d7a4cb6132332368d356488c5eedd1dea16f3', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '7aef62f6daae0c5b59caa685c4255fb78eebc1be', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '073976bceadf5f8efa78d0b1f6098e94bfa3d1a6', class: "zonos--payment-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripeElements": ["watchInitStripe"],
+        "stripe": ["watchInitStripe"]
+    }; }
+};
+ZonosPayment.style = ZonosPaymentStyle0;
+
+export { ZonosNotification as zonos_notification, ZonosPayment as zonos_payment };

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

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
+import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.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}";
+const ZonosVStackStyle0 = zonosVStackCss;
+
+const VStack = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.spacing = 24;
+    }
+    render() {
+        return (h(Host, { key: '8cdee94089af0eac57784a7914e169f363472577', style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'd60da826d77b4cf7e5349b75927fc746f0053ddd', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '97b0e8232cbac73938225e1310712c1607997073' }))));
+    }
+};
+VStack.style = ZonosVStackStyle0;
+
+export { VStack as zonos_v_stack };