@zonos/elements 1.3.15-alpha.2 → 1.3.15

package/dist/components/zonos-address-display.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosAddressDisplay extends Components.ZonosAddressDisplay, HTMLElement {}
+export const ZonosAddressDisplay: {
+    prototype: ZonosAddressDisplay;
+    new (): ZonosAddressDisplay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-address-display.js

@@ -0,0 +1,6 @@
+import { Z as ZonosAddressDisplay$1, d as defineCustomElement$1 } from './zonos-address-display2.js';
+
+const ZonosAddressDisplay = ZonosAddressDisplay$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosAddressDisplay, defineCustomElement };

package/dist/components/zonos-address-display2.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as localizationStore } from './stripe.js';
+import { a as translate } from './translationStore.js';
+import { i as isTextContainsNonLatinChars } from './containsNonLatinChars.js';
+import { d as defineCustomElement$2 } from './zonos-country-flag2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosAddressDisplayCss = ":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--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--amino-gray-1200);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
+const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
+
+const ZonosAddressDisplay = /*@__PURE__*/ proxyCustomElement(class ZonosAddressDisplay extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.currentAddress = undefined;
+        this.addressType = undefined;
+    }
+    render() {
+        var _a;
+        const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;
+        const shippingZoneCountry = (_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[country];
+        const renderEnteredInfoText = ({ bold, content, }) => {
+            const textColor = isTextContainsNonLatinChars(content)
+                ? 'red-600'
+                : 'gray-1200';
+            return (h("zonos-text", { textColor: textColor, type: bold ? 'boldLabel' : 'body' }, content));
+        };
+        return (h(Host, { class: "zonos--address-form zonos--elements" }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+            ? translate('Shipping')
+            : translate('Billing'))), h("div", { class: "zonos--address-group" }, name && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (h("div", { class: "zonos--address-line" }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
+            content: shippingZoneCountry.displayName,
+        }))))));
+    }
+    static get style() { return ZonosAddressDisplayStyle0; }
+}, [1, "zonos-address-display", {
+        "currentAddress": [16],
+        "addressType": [1, "address-type"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-address-display", "zonos-country-flag", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-address-display":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosAddressDisplay);
+            }
+            break;
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosAddressDisplay as Z, defineCustomElement as d };

package/dist/components/zonos-address-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosAddressForm extends Components.ZonosAddressForm, HTMLElement {}
+export const ZonosAddressForm: {
+    prototype: ZonosAddressForm;
+    new (): ZonosAddressForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-address-form.js

@@ -0,0 +1,6 @@
+import { Z as ZonosAddressForm$1, d as defineCustomElement$1 } from './zonos-address-form2.js';
+
+const ZonosAddressForm = ZonosAddressForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosAddressForm, defineCustomElement };

package/dist/components/zonos-address-form2.js

@@ -0,0 +1,84 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as translate } from './translationStore.js';
+import { i as isTextContainsNonLatinChars } from './containsNonLatinChars.js';
+import { d as defineCustomElement$2 } from './zonos-input2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosAddressFormCss = ":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--title{margin-bottom:20px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:1px}:host .zonos--contact{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-row{display:-ms-flexbox;display:flex;gap:8px}:host .zonos--address-row>*{-ms-flex:1;flex:1}:host .zonos--address{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}";
+const ZonosAddressFormStyle0 = zonosAddressFormCss;
+
+const ZonosAddressForm = /*@__PURE__*/ proxyCustomElement(class ZonosAddressForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.addressChange = createEvent(this, "addressChange", 7);
+        this.onInputChange = ({ key, value, }) => {
+            this.addressChange.emit(Object.assign(Object.assign({}, this.localAddress), { [key]: value }));
+        };
+        this.currentAddress = undefined;
+        this.translatedAddress = undefined;
+        this.addressType = undefined;
+        this.localAddress = this.currentAddress;
+    }
+    watchCurrentAddress() {
+        var _a, _b, _c, _d, _e, _f;
+        const { city, line1, line2, name, postal_code, state } = this.currentAddress;
+        // Update the local address when the current address changes
+        // If translated address is available, use that instead
+        this.localAddress = Object.assign(Object.assign({}, this.currentAddress), { city: ((_a = this.translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city, line1: ((_b = this.translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1, line2: ((_c = this.translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2, name: ((_d = this.translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name, postal_code: ((_e = this.translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code, state: ((_f = this.translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state });
+    }
+    componentWillLoad() {
+        this.watchCurrentAddress();
+    }
+    render() {
+        const { city, country, line1, line2, name, phone, postal_code, state } = this.localAddress;
+        const firstName = name.split(' ')[0] || '';
+        const lastName = name.split(' ')[1] || '';
+        return (h(Host, { key: '9c1ee87200d1f90e9dfac58c49aabba1777373a9', class: "zonos--address-form zonos--elements" }, h("div", { key: 'eec3416268ff2324fd751408552705086905423d', class: "zonos--title" }, h("zonos-text", { key: 'a4c254f78420dcfc712e1a83b20dd3ac9e64c460', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+            ? translate('Shipping')
+            : translate('Billing'))), h("div", { key: 'b8109545d282fb8c06a2e791c30088018d6ffec0', class: "zonos--address-group" }, h("div", { key: '833a395984cd75242e5d97697fd6566f11932d1b', class: "zonos--contact" }, h("zonos-text", { key: 'e60f574e95162aabf6465b878fc9b16c708e8029', type: "label" }, translate('Contact')), h("zonos-input", { key: '24cd24a362a1bbc76d0c91718c48ae32baa20ae6', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '84e64ef44eb3b39ac7ab542e07d7a52a95377cae', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '26621aca0d57a7fee743874b8d11af5f58c91b69', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+                key: 'name',
+                value: `${e.detail} ${lastName}`,
+            }) }), h("zonos-input", { key: '01e3e5038b4a4311dd5874a1213f936451dc300d', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+                key: 'name',
+                value: `${firstName} ${e.detail}`,
+            }) }))), h("div", { key: 'eb42dece28082ff16a453110b3208de5b44b9fdb', class: "zonos--address" }, h("zonos-text", { key: '3557122c716533be7b36a8bd395ea616a7061665', type: "label" }, translate('Address')), h("zonos-input", { key: 'bcc7d84d530f2f3a10537117eb6ef143df7cc8e2', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: '6ce78e25151a129b69b501cf768604134a395e85', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: '6f7a18010e2d8131327154a31ba58544df56768c', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: '48afbf7a3cbd26fddfea4f2799005a51b1c3d3c6', class: "zonos--address-row" }, h("zonos-input", { key: '6decf8c430d8d25b2c555b110009da74e0ac9e5f', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), h("zonos-input", { key: '065e1be213d3cfec7749ab32890f96b0b484a25a', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), h("zonos-input", { key: 'a69244bf84c9fd007c9ad4aad2b6cc6d44420775', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '0bcc89de1ecc4aae8a69d74eff42dfd117ada40b', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+    }
+    static get watchers() { return {
+        "translatedAddress": ["watchCurrentAddress"]
+    }; }
+    static get style() { return ZonosAddressFormStyle0; }
+}, [1, "zonos-address-form", {
+        "currentAddress": [16],
+        "translatedAddress": [16],
+        "addressType": [1, "address-type"],
+        "localAddress": [32]
+    }, undefined, {
+        "translatedAddress": ["watchCurrentAddress"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-address-form", "zonos-input", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-address-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosAddressForm);
+            }
+            break;
+        case "zonos-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosAddressForm as Z, defineCustomElement as d };

package/dist/components/zonos-address-update-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosAddressUpdateDialog extends Components.ZonosAddressUpdateDialog, HTMLElement {}
+export const ZonosAddressUpdateDialog: {
+    prototype: ZonosAddressUpdateDialog;
+    new (): ZonosAddressUpdateDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-address-update-dialog.js

@@ -0,0 +1,6 @@
+import { Z as ZonosAddressUpdateDialog$1, d as defineCustomElement$1 } from './zonos-address-update-dialog2.js';
+
+const ZonosAddressUpdateDialog = ZonosAddressUpdateDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosAddressUpdateDialog, defineCustomElement };

package/dist/components/zonos-address-update-dialog2.js

@@ -0,0 +1,264 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as translate } from './translationStore.js';
+import { z as zonosStore } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { c as containsNonLatinChars } from './containsNonLatinChars.js';
+import { d as defineCustomElement$9 } from './zonos-address-display2.js';
+import { d as defineCustomElement$8 } from './zonos-address-form2.js';
+import { d as defineCustomElement$7 } from './zonos-button2.js';
+import { d as defineCustomElement$6 } from './zonos-country-flag2.js';
+import { d as defineCustomElement$5 } from './zonos-dialog2.js';
+import { d as defineCustomElement$4 } from './zonos-icon2.js';
+import { d as defineCustomElement$3 } from './zonos-input2.js';
+import { d as defineCustomElement$2 } from './zonos-spinner2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const RemoveIcon = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-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" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-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" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const zonosAddressUpdateDialogCss = ":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--body{padding:0 24px;position:relative}:host .zonos--dialog-header{margin-bottom:32px;position:-webkit-sticky;position:sticky;padding-top:24px;top:0;z-index:11;background:var(--amino-gray-0)}:host .zonos--dialog-title{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:12px}:host .zonos--group{overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px}:host .zonos--group::-webkit-scrollbar{width:10px}:host .zonos--group::-webkit-scrollbar-track{background:var(--amino-gray-50)}:host .zonos--group::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--group::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--address-display-group{display:-ms-flexbox;display:flex;gap:8px;margin-bottom:20px}:host .zonos--address-display-group zonos-address-display{-ms-flex:1;flex:1}:host .zonos--what-you-entered{margin-bottom:8px}:host .zonos--address-form-section{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}:host .zonos--group-btn{position:-webkit-sticky;position:sticky;padding:24px 0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:end;background:var(--amino-gray-0);z-index:11}:host .zonos--group-btn .zonos--button-wrapper{display:-ms-flexbox;display:flex;gap:8px}:host(.mobile) .zonos--button-wrapper{-ms-flex-direction:column;flex-direction:column;width:100%}:host(.mobile) .zonos--button-wrapper zonos-button{width:100%}:host(.mobile) .zonos--button-wrapper .zonos--cancel-btn{-ms-flex-order:2;order:2}:host(.mobile) .zonos--button-wrapper .zonos--update-btn{-ms-flex-order:1;order:1}";
+const ZonosAddressUpdateDialogStyle0 = zonosAddressUpdateDialogCss;
+
+const ZonosAddressUpdateDialog = /*@__PURE__*/ proxyCustomElement(class ZonosAddressUpdateDialog extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeDialog = createEvent(this, "closeDialog", 7);
+        this.continueClicked = createEvent(this, "continueClicked", 7);
+        /**
+         * handler for close button click
+         */
+        this.closeDialogHandler = () => {
+            this.closeDialog.emit();
+        };
+        /**
+         * Extract value from translated object
+         */
+        this.getTranslatedAddress = ({ currentAddress, translatedAddress, }) => {
+            var _a, _b, _c, _d, _e, _f;
+            const { city, line1, line2, name, postal_code, state } = currentAddress;
+            return {
+                city: ((_a = translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city,
+                line1: ((_b = translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1,
+                line2: ((_c = translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2,
+                name: ((_d = translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name,
+                postal_code: ((_e = translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code,
+                state: ((_f = translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state,
+            };
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = async () => {
+            var _a, _b, _c;
+            // set spinner for the continue button
+            this.continueLoading = true;
+            const translatedBillingAddress = this.billingAddress
+                ? this.getTranslatedAddress({
+                    currentAddress: this.billingAddress,
+                    translatedAddress: this.translatedBillingAddressState,
+                })
+                : null;
+            const translatedShippingAddress = this.getTranslatedAddress({
+                currentAddress: this.shippingAddress,
+                translatedAddress: this.translatedShippingAddressState,
+            });
+            // check to see if there are still non-latin characters in the translated address
+            const shippingNonlatinChars = containsNonLatinChars(Object.assign(Object.assign({}, translatedShippingAddress), { country: this.shippingAddress.country }));
+            // get list of non-latin characters field in the billing address
+            const billingNonLatinChars = translatedBillingAddress &&
+                this.billingAddress &&
+                containsNonLatinChars(Object.assign(Object.assign({}, translatedBillingAddress), { country: this.billingAddress.country }));
+            const shippingHasNonLatinChars = !!Object.keys(shippingNonlatinChars)
+                .length;
+            const billingHasNonLatinChars = !!billingNonLatinChars && !!Object.keys(billingNonLatinChars).length;
+            // if there are non-latin characters in the translated address, scroll to the error input so user can see and fix it
+            if (shippingHasNonLatinChars || billingHasNonLatinChars) {
+                // get scroll top of the first input has "has-error" class
+                const addressForms = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('zonos-address-form');
+                const shippingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[0];
+                const billingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[1];
+                const errorInput = ((_b = shippingAddressForm === null || shippingAddressForm === void 0 ? void 0 : shippingAddressForm.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.has-error')) ||
+                    ((_c = billingAddressForm === null || billingAddressForm === void 0 ? void 0 : billingAddressForm.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.has-error'));
+                // scroll to the first error input
+                if (errorInput) {
+                    errorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+                this.continueLoading = false;
+                return;
+            }
+            // Submit the translated address to the parent component
+            this.continueClicked.emit({
+                billingAddress: translatedBillingAddress,
+                shippingAddress: translatedShippingAddress,
+            });
+        };
+        /**
+         * This function builds a state object for a translated address.
+         * It takes the current and translated address as input and returns an object where each field is an object itself.
+         * The key of each field's object is the current address's field value and the value is the corresponding translated address's field value.
+         *
+         * @param {Object} params - The parameters for the function.
+         * @param {EnteredInfo} params.currentAddress - The current address information.
+         * @param {EnteredInfo} params.translatedAddress - The translated address information.
+         *
+         */
+        this.buildTranslateAddressState = ({ currentAddress, translatedAddress, }) => {
+            const { city, line1, line2, name, postal_code, state } = currentAddress;
+            return {
+                city: {
+                    [city]: translatedAddress.city,
+                },
+                line1: {
+                    [line1]: translatedAddress.line1,
+                },
+                line2: {
+                    [line2]: translatedAddress.line2,
+                },
+                name: {
+                    [name]: translatedAddress.name,
+                },
+                postal_code: {
+                    [postal_code]: translatedAddress.postal_code,
+                },
+                state: {
+                    [state]: translatedAddress.state,
+                },
+            };
+        };
+        this.continueLoading = false;
+        this.dialogLoading = undefined;
+        this.dialogOpen = false;
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.isMobile = false;
+        this.shippingAddress = undefined;
+        this.billingAddress = undefined;
+        this.translatedShippingAddress = undefined;
+        this.translatedBillingAddress = undefined;
+        this.showErrorBanner = false;
+        this.translatedShippingAddressState = {};
+        this.translatedBillingAddressState = {};
+    }
+    watchTranslatedShippingAddress() {
+        this.translatedShippingAddressState = this.translatedShippingAddress;
+    }
+    watchTranslatedBillingAddress() {
+        this.translatedBillingAddressState = this.translatedBillingAddress;
+    }
+    componentWillLoad() {
+        // update the state with the initial props
+        this.watchTranslatedBillingAddress();
+        this.watchTranslatedShippingAddress();
+    }
+    render() {
+        // dialog background white, so when the button background is also white, we need to change the button type to outline so it's visible
+        const submitBtnColor = this.submitBtnColor || zonosStore.appearance.colorSecondary;
+        const submitBtnType = submitBtnColor === '#ffffff'
+            ? 'outline'
+            : this.submitBtnType || 'standard';
+        const billing = this.billingAddress;
+        const shipping = this.shippingAddress;
+        return (h(Host, { key: '03535edacb348258592641baa349e9dcf14bf78c', class: classes([
+                'zonos--address-update-dialog zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("zonos-dialog", { key: 'c16871425dffe955d422ffa5b9aee1ece0da2890', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: 'e4fad501f7cfedc5783774d8b1bf785d6947d3c8', class: "zonos--body" }, h("div", { key: '973e7a8097b8c8f60e47e6ad9d8311a64a5a6ff0', class: "zonos--dialog-header" }, h("div", { key: '89c82b6ff3723056d161560da22bd16a992afee7', class: "zonos--dialog-title" }, h("zonos-text", { key: 'bf92ef0b40ea67a492164fedb95dd68b7d023e85', type: "title" }, translate('Update your address')), h("zonos-button", { key: '4e7a1905c976cec396db5c34f633b383bba0d55a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("zonos-text", { key: '47b42d8cc14c4757e3fc9f2f43eafbd8d9e9df38' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '28d9804f0a18f143ce541c2c511cbfa21a2a416f', class: "zonos--group" }, h("zonos-text", { key: '43ec5a9fc8594d065b256952ca8e9392fba03839', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'b7eb7781ce6aefe20f89b4d5fba190f0102eb5d1', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '152c53176a46575677723ca47386e484c659927a', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '6c7ac2b49d121c26ce45f09a1eac9ef456d45910', addressType: "billing", currentAddress: billing }))), h("div", { key: '2bda98bb0ac9bafcb009ff36fb97a9fc62ce7e2d', class: "zonos--address-form-section" }, h("zonos-text", { key: '87d3380072a049ccde71ba1b752aedd36830348b', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '2cb36251c6549da05e272183b2c37478b4166fea', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+                const address = e.detail;
+                this.translatedShippingAddressState =
+                    this.buildTranslateAddressState({
+                        currentAddress: shipping,
+                        translatedAddress: address,
+                    });
+            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: '9bf5ebd6fb08851716a72c855451bfeb3ee0ed68', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
+                const address = e.detail;
+                this.translatedBillingAddressState =
+                    this.buildTranslateAddressState({
+                        currentAddress: billing,
+                        translatedAddress: address,
+                    });
+            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '621df9c8919973b37c62aca5727bde3635086a6b', class: "zonos--group-btn" }, h("div", { key: '95e9fd31418abc8e89ceef24af7cc251ee45ac93', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'bef31fc81e7cc0f2b3f7ab875a29978b07865b6a', class: "zonos--cancel-btn", onClick: () => this.closeDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '9d183153541766b421c3420681c1159ffa599682', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "translatedShippingAddress": ["watchTranslatedShippingAddress"],
+        "translatedBillingAddress": ["watchTranslatedBillingAddress"]
+    }; }
+    static get style() { return ZonosAddressUpdateDialogStyle0; }
+}, [1, "zonos-address-update-dialog", {
+        "continueLoading": [4, "continue-loading"],
+        "dialogLoading": [4, "dialog-loading"],
+        "dialogOpen": [4, "dialog-open"],
+        "submitBtnType": [1, "submit-btn-type"],
+        "submitBtnColor": [1, "submit-btn-color"],
+        "isMobile": [4, "is-mobile"],
+        "shippingAddress": [16],
+        "billingAddress": [16],
+        "translatedShippingAddress": [16],
+        "translatedBillingAddress": [16],
+        "showErrorBanner": [32],
+        "translatedShippingAddressState": [32],
+        "translatedBillingAddressState": [32]
+    }, undefined, {
+        "translatedShippingAddress": ["watchTranslatedShippingAddress"],
+        "translatedBillingAddress": ["watchTranslatedBillingAddress"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-address-update-dialog", "zonos-address-display", "zonos-address-form", "zonos-button", "zonos-country-flag", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-address-update-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosAddressUpdateDialog);
+            }
+            break;
+        case "zonos-address-display":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "zonos-address-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { RemoveIcon as R, ZonosAddressUpdateDialog as Z, defineCustomElement as d };