@zonos/elements 1.3.183 → 1.3.185

package/dist/collection/components/common/zonos-stripe-select/zonos-stripe-select.js

@@ -0,0 +1,455 @@
+import { h, Host, } from "@stencil/core";
+import { translate } from "../../store/translationStore";
+import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
+import { inheritAriaAttributes, inheritAttributes, } from "../../utils/checkout/form/helpers";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isDarkColor } from "../../utils/isDarkColor";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronDownIcon from "./assets/ChevronDownIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
+let selectId = 0;
+export class ZonosStripeSelect {
+    constructor() {
+        /**
+         * Inherited attributes from the host element
+         */
+        this.inheritedAttributes = {};
+        this.selectId = `zonos--select-${++selectId}`;
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.internalValue = '';
+            this.selectChange.emit('');
+            this.el.selectedValue = '';
+            this.el.dispatchEvent(new Event('change'));
+        };
+        this.name = undefined;
+        this.selectedValue = '';
+        this.selectLabel = undefined;
+        this.overridePrimaryColor = undefined;
+        this.overrideSecondaryColor = undefined;
+        this.isDisabled = false;
+        this.isError = false;
+        this.error = '';
+        this.selectPlaceholder = '';
+        this.options = [];
+        this.autoComplete = '';
+        this.value = '';
+        this.required = false;
+        this.isClearable = false;
+        this.minWidth = undefined;
+        this.internalValue = this.selectedValue;
+        this.internalOptions = this.options;
+    }
+    onOptionsChange(newValue) {
+        this.internalOptions = newValue;
+    }
+    onSelectedValueChange(newValue) {
+        this.internalValue = newValue;
+        this.selectChange.emit(newValue);
+        this.value = newValue;
+        // If the value is not found in the options, clear the value to force user to select an option
+        this.handleNotFoundOption(newValue);
+    }
+    onValueChange(newValue) {
+        this.internalValue = newValue;
+        // If the value is not found in the options, clear the value to force user to select an option
+        this.handleNotFoundOption(newValue);
+    }
+    // If the value is not found in the options, clear the value to force user to select an option
+    handleNotFoundOption(value) {
+        const foundOption = this.internalOptions.find(option => option.value === value || option.label === value);
+        if (!foundOption) {
+            this.internalValue = '';
+            this.selectChange.emit('');
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, [
+            'tabindex',
+            'title',
+            'data-form-type',
+            'dir',
+        ]));
+    }
+    render() {
+        const primaryColor = this.overridePrimaryColor || zonosStore.appearance.colorPrimary;
+        const secondaryColor = this.overrideSecondaryColor || zonosStore.appearance.colorSecondary;
+        const isDark = primaryColor && isDarkColor(primaryColor);
+        const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
+        const hasContent = this.internalValue || this.selectPlaceholder;
+        const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
+        return (h(Host, { key: 'f5b178d5cbd48e9aff8701764a1fde4de03a6569', class: classes([
+                'zonos--select zonos--elements',
+                isDark && 'dark',
+                this.isError && 'has-error',
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'd7b3b8148777aa61f15c1489f44871589aadf00f', class: classes([
+                'zonos--label-wrapper',
+                this.isDisabled && 'disabled',
+            ]) }, h("select", Object.assign({ key: '629f7437fa445634db0589f217acb59b59e558d3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+                'zonos--floated-select',
+                !!this.selectLabel && 'has-label',
+                hasContent && 'has-content',
+                this.isError && 'has-error',
+            ]), disabled: this.isDisabled, id: this.selectId, name: this.name, onChange: e => {
+                const select = e.target;
+                this.selectChange.emit(select.value);
+                this.selectedValue = select.value;
+                this.el.dispatchEvent(new Event('change'));
+            }, required: this.required }), h("option", { key: '9b50f769fc79f136b7b77916edd71acdcda199b7', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
+                // Sometimes google returns the label not the code for some countries
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: '0ff44083dee7939d6f7bc2372990ccbef6066fed', class: "zonos--floated-label" }, h("label", { key: '8f9965fa3de61b705fa95e7ddc68013a3027464d', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '09aa1851295b86e30488ca69720d58d1246ad67c', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '1db5be171f74849cedc3a8804bac23fdfa43aaa5', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '2ca7e2da61eef16d6feb74c4d6a6198f1762ad16', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'c0050a27a619cb9b844282be841a320648f9d008', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'c0a3eb551533c4cb24f92ad6fd7a4b44cd24044c', textColor: "red-600" }, this.error))));
+    }
+    static get is() { return "zonos-stripe-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-stripe-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-stripe-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "selectedValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected value of the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "selectLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Select label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-label",
+                "reflect": false
+            },
+            "overridePrimaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary color to override primary color from appearance primary color in setting."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-primary-color",
+                "reflect": false
+            },
+            "overrideSecondaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary color to override secondary color from appearance secondary color in setting"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-secondary-color",
+                "reflect": false
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state of the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message of the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "selectPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "global",
+                            "id": "global::SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options for the select. Must be set using a query selector."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The autoComplete attribute for the select."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-complete",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the select."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isClearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select can be cleared"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width of the select"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-width",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "internalOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectChange",
+                "name": "selectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when select value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "onOptionsChange"
+            }, {
+                "propName": "selectedValue",
+                "methodName": "onSelectedValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}

package/dist/collection/components/common/zonos-toggle/zonos-toggle.js

@@ -7,9 +7,9 @@ export class ZonosToggle {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '01958140c90fdadecbfca64fe65dbf1132af2cc1', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: '8426e15a4596ecd6fc2cab945cdb2f0c4fe1ac79', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '5362589929c25b5ba897d23a308f6dd2759c4ac0', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: 'e26f354255febe40918b30100ed5d42410a30413', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.js

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: 'fa16c20a254958721bcc44dbe96f6588545e86f0', class: "zonos--elements" }, h("div", { key: '0e57607df02b12d5df9fb84b64c8345b40b2e823', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '9faf457a730046b789a5b822fb6ab89d88970d59' }), h("div", { key: 'f85dbf49e172f9a1c1b57443b1ea22d819b4099c', class: classes([
+        return (h(Host, { key: 'fbd7f669ae886586c2512b00975fc5acf1e40eca', class: "zonos--elements" }, h("div", { key: '618d6ff79308540f5eeb3d8a23e7c520fb35a91a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '303eaf31b4b3dc9fd35ed0db252be84274b7d46c' }), h("div", { key: '7429949912c8e3fb683ab4cbc4958d8fb6b2fd81', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '6e90bfe3f346cbe5d49aab4e03c868b3138aeca7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1c10f75f13ae427737fcf4ece41b9f7ba13fb76d', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '31704a564bb877fac16c1ab11a686e9ba72940ea', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1e2cafbfaf769b30256c8d4609953961bcd10a06', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '32154740511a038c4ca04ad55bc7d77d96496654', style: {
+        return (h(Host, { key: 'b591378d641a09bac2c4fab00c8c1977ae21a14c', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'f80f8b0e51554a3db9efa960706ac9bb450155cb', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '711a207eb1b4c59672be4df8b19a3c7200d44f29' }))));
+            } }, h("div", { key: 'c9f3b482ace4b36813fa5412dd497c0deea7e3c0', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '75cf9b483367945bc57279b76519205c8f0901eb' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -56,12 +56,12 @@ export class ZonosVirtualScroll {
                 } }, this.renderItem(i)));
             accHeight += itemHeight;
         }
-        return (h(Host, { key: '0f132a5b60586fb22d1d5536aa7abef6199e0748' }, h("div", { key: 'a947229cd3d53b79312855cf8ddf8c9985035e1e',
+        return (h(Host, { key: '294ce5251b10f4779b7113d16a98845153f50c72' }, h("div", { key: '4a8b0032df979568ebf1f20356cb0aa13e2a742a',
             // to capture scroll action
             class: "scroller", style: {
                 height: `${this.totalHeight}px`,
                 width: `${W}px`,
-            } }), h("div", { key: '63013fe7bc53d76152fda74e7b6ef054e7c3a9ef',
+            } }), h("div", { key: 'c162402da38f659edf5d8de18229a7a6eeed89db',
             // to display items
             class: "item-container", ref: el => (this.container = el), style: {
                 height: `${this.totalHeight}px`,

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '63b0c771133fd495f36e2c67601d64d6e56f5f2b' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'c35d0331d2d3724792e82b1d0a22d096fbbcddb7' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -18,9 +18,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: 'f84d021e99271bd6a00da32edd35fdc5e0520c5a', class: "zonos--elements" }, h("div", { key: 'db35a5022b1ef1a70e3cace021fcc14d6e8ea987', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'c346c1f0dff9e6f5b4399ae9a82216d3804f6df5', class: "zonos--elements" }, h("div", { key: '928406c88c458360530d20f6d0dd1e0563c27c99', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: 'bbbc50bf395e2658239e2a1a0342122b04e43a5f', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '3c80a7ba8dd9509d45bde7de20e7689f632aedc8', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'add64f376e48cc71f6b5672aafe7b1ef62ab2354', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'a0a5059ad4a48b2cc3ea05696aa79ffce33b4bf2', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '2608dba553f846c5016e8395dbce079beda0aa5a', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: '273303784ffec118ac20e280e91c575bb1c002ac', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '50ac525028c2b4081a47cbec44c45448d9b2c1d4', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '96118c74b078d06065e5cef80962ffb3ad3c5f3e', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd30aec7d60dc9b67f4a3babfda89b2620c667224', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'd64c7ae9af7d55057b580977750bf7f28c03710e', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -232,18 +232,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '1fce2b616b062a02f97f711f674836d75ad25035', class: "zonos--elements" }, h("div", { key: 'caa338a462d1c0cde1727e5147268c782d6063f0', class: classes([
+        return (h(Host, { key: '0345651f8cf8b06b95b21e5ad2cc427339932229', class: "zonos--elements" }, h("div", { key: '4089308c6460f903130eb4d99b03a7e65937973d', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '49968ece06cddb09bf870c7fac18999d9d43ad75' }, h("div", { key: '0557a439e3676dcda4668324e0ed4701a50cb365', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'ccf16ff294f2168d1c3b3735a1b364cc71e5d392', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '7aa4d6322cf48204a4eb4aa62b2ebdaab637e96b', spacing: 24 }, h("zonos-country-flag", { key: '1152da449f95ebd8f2cc3364c2ba742ed0696b0c', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'c449283c10a1e71f1e55d7da04ae51234bb58ccf', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '2adb9745513f6f9041509d07a9584cf421a22ee9', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'ece4b349db2f121b2245090a04327927775162f0', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '30849c1c301eed69fe3d1db06755164d852ef547', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '8f5dcc0f0bbd4e3f103105baab5b3d87636930f3' }, h("div", { key: '04b20f5394ddf48861ee97cde4d13000c5765348', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '176b0173785632b211affb603380f7fef9fa0027', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: 'b21f5ab0438f8f5ab922800047bae222d6738e0e', spacing: 24 }, h("zonos-country-flag", { key: 'd153054f02852e8c565997a118f2bea8e5834bc0', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'b6f6f630f44ed19eca3ee62baaca9b22867635d5', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '47b5d0a2dd74f39337b4d5a5a968a94ead40a45e', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '9038333f6574e110b6f860ffa0e3b6ebdad81dc0', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '8afaf9eb87813ace65475467d422f150b487fe30', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { key: 'fbd14cc231da833e4930a52483f40c32b1e24e2d', spacing: "12px" }, h("zonos-v-stack", { key: '75da2be8ba28555258e8ff50e78c5b1ffa2403ac', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '6c15ad7d36590e1b93007e3786c0e0db191b4b8d', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'fae16c45b01ed1345d439c77267d1c80ce908598' }, h("zonos-country-select", { key: 'a6abe0661ee91ad227877ebbb5ee21253b110ea0', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '7550bec8646301a4bd5afb94b79b18b62698891b' }, h("zonos-language-select", { key: 'da2e8007ebf7e33723baaf3bdd2818334090c81c', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '522ba22b8709a962fd7c39ae4e1386b2a696072c', spacing: "12px" }, h("zonos-v-stack", { key: '86fa97265982e6ca5bf9aa078b845c99056d55bf', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '7421346614aed925f25e3571cbe935045e392615', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '35560fe611d0424186e79aa1ff56f15c89d122b6' }, h("zonos-country-select", { key: 'c437335dcbcfcf74dab7baeddf663cc216f0b377', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '4692f2be013dc35e821cf1ee9c20d05cf0de9d8e' }, h("zonos-language-select", { key: '19337a5bb390beb9f7629e577f296f2c9f806c98', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,6 +7,8 @@ import { getZonosSettings } from "../utils/api/getZonosSettings";
 import { initCheckout } from "../utils/checkout/initCheckout";
 import { handleFetch } from "../utils/handleFetch";
 import { initHello } from "../utils/hello/initHello";
+import { CheckoutAddressService } from "../utils/iframe/CheckoutAddressService";
+import { iframeServices, injectPrivateIframe, } from "../utils/iframe/IframeHelpers";
 import { log } from "../utils/logging/log";
 export class ZonosController {
     constructor() {
@@ -117,6 +119,25 @@ export class ZonosController {
             document.body.appendChild(scriptToInject);
         });
     }
+    async initGooglePlacesService(settings) {
+        const genericSettings = settings === null || settings === void 0 ? void 0 : settings.genericSettings;
+        if (!genericSettings) {
+            return;
+        }
+        const signedPayload = genericSettings.signedTokenGooglePlaces;
+        if (!signedPayload) {
+            return;
+        }
+        // Create private iframe to load google places api
+        injectPrivateIframe({
+            id: iframeServices.GOOGLE_PLACES,
+            onload: () => {
+                // init checkout address service
+                zonosStore.checkoutAddressService = new CheckoutAddressService();
+            },
+            src: `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/iframe/google-maps?signedToken=${signedPayload}`,
+        });
+    }
     async componentWillLoad() {
         this.initHistoryListener();
         zonosStore.zonosApiKey = this.zonosApiKey;
@@ -201,6 +222,8 @@ export class ZonosController {
             this.stripeInitEvent.emit({
                 publishableKey: publishableKey.token,
             });
+            // init google places service
+            void this.initGooglePlacesService(json);
         })();
     }
     /**
@@ -251,7 +274,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'eed6d0d8b034a43bb4bccf5937b8eccc5d5744c9', class: "zonos--elements" });
+        return h(Host, { key: '44123a5f1c76f9bb6309aaf1f72defc9dad729ce', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class ZonosPaypalPayment {
         void this.loadPaypal();
     }
     render() {
-        return (h(Host, { key: '7be3c38f702c8fb105c54e652774f69fbbcfd34c', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '6845b53c2a5d1f2637f3ae9d867d2c6de48ab1b5', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '093fd3a8fb9cc021243ca5feff2737f1b1c10b7c', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '686412f4de97c57a309e6134312641c481c5a9fe', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }