@zonos/elements 1.3.15-alpha.0 → 1.3.15-alpha.2

package/dist/components/zonos-link-authentication2.js

@@ -38,7 +38,7 @@ const ZonosLinkAuthentication = /*@__PURE__*/ proxyCustomElement(class ZonosLink
     }
     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: '675de93a982a3cc558b64f24971441c227955e6f', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'd75a5a301e869325c9a249275ce10d4905c0198c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'fbf58d00fa76d7e715f2d1056a298840043e1056', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '97c3c388d1a035e6a46ecdbd3bc66d80a589b19f', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'e799af821045b2c1792d2971843afa0c7d3ece5b', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'eaf9be27a11d279c13f261e1312ee8a46e4620f7', class: "zonos--link-authentication-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-link.js

@@ -14,7 +14,7 @@ const ZonosLink$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLink extends HTM
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: '7af1c9dfc60d61837c25ed586b34d03737e190b7', class: "zonos--elements" }, h("a", { key: '6be4c2839936832d9d512e9afe4b8fe4e69889bf', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '897ec8e65f325161cf80d71b6efbcf05c4a444ae' }))));
+        return (h(Host, { key: 'af4c861f0a7f0a86c60c2ba6fe12a37721d50c1b', class: "zonos--elements" }, h("a", { key: 'b8fc607e0aa5269f2c3c1ccf51e233b52fac6693', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '98ebca9c8962143426fd1c88d9189b92fc402505' }))));
     }
     static get style() { return ZonosLinkStyle0; }
 }, [1, "zonos-link", {

package/dist/components/zonos-logo.js

@@ -17,11 +17,11 @@ const ZonosLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLogo extends HTM
         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: 'eb9e895db6d309b91f24aaba07b6bef785d64982', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'c196e8372ff0f602b135c582a1a4cdf2ba75274d', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '411e92bcfdab9d8b7362b3fbeeffb836d8d20756', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '668abac552ed1e133f29b0b0aa8f17d158c5441b', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosLogoStyle0; }

package/dist/components/zonos-payment2.js

@@ -39,7 +39,7 @@ const ZonosPayment = /*@__PURE__*/ proxyCustomElement(class ZonosPayment extends
     }
     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: '4886087d915369f60296b6ba86fe9400ae6db8dd', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'ac83371e795b8ae833087143c719cf6dfc066ab3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '2895560e50d856a071bef08c800b3112899e22e8', class: "zonos--payment-component" })));
+        return (h(Host, { key: '2ac7d34f60a5e4fc21fed92218e8b467e49bee33', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'a0360edd61bf571645fbc0781a43a94cf02e9acc', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '41a1daa79d640eecf197e520145c41cf957fbee1', class: "zonos--payment-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-select-dialog-header2.js

@@ -20,9 +20,9 @@ const ZonosSelectDialogHeader = /*@__PURE__*/ proxyCustomElement(class ZonosSele
         this.label = '';
     }
     render() {
-        return (h(Host, { key: 'cd3cc096f08cdb3dd2170d9e8d578f603155b0d0', class: "zonos--elements", style: {
+        return (h(Host, { key: 'c571a648772792abb553c87a9c238e36d2fd63fb', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '40ddbfe738428ca388cb4b3a8244d86e5e26d876', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '4706e9acb42c11b213044084e25be8a5c13119f1', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'b5c5289219bb4ff380aa5e3c0738ae9029d00cdf', type: "boldLabel" }, this.label), h("zonos-button", { key: '6d8c62ee077ab7883081a693825a00fd06cded69', 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: '42241292083a7041d600ac4af3034e61c5d4a6b1' }))));
+            } }, h("zonos-v-stack", { key: 'f8d2c7a95bb985e17c7c6fa4fdeb2d6c692dd266', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'dd87a6fd7d2f84e907b99a440e62b1260273ae0d', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'a5573f14f446c343bf7d5ed7f1c4564788435513', type: "boldLabel" }, this.label), h("zonos-button", { key: '3edfd71ce5da3a2366c856ca739aaea928a836de', 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: '155ec43e2791f871a4182edff8a6dd2304951f72' }))));
     }
     static get style() { return ZonosSelectDialogHeaderStyle0; }
 }, [1, "zonos-select-dialog-header", {

package/dist/components/zonos-shipping2.js

@@ -9,7 +9,7 @@ import { d as defineCustomElement$3 } from './zonos-shipping-rich-radio2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--error-banner.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
 const ZonosShippingStyle0 = zonosShippingCss;
 
 const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping extends HTMLElement {
@@ -34,13 +34,27 @@ const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping exten
                 return;
             }
             this.isSelecting = false;
-            this.disabled = false;
+        };
+        this.handleValidate = () => {
+            return !!this.selectedShippingMethod;
         };
         /**
          * handler for continue button click
          */
         this.continueClickHandler = () => {
+            var _a;
+            // show error banner if the form is not complete
+            if (!this.handleValidate()) {
+                this.showErrorBanner = true;
+                return;
+            }
+            this.showErrorBanner = false;
             this.continueClicked.emit();
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-shipping-info');
+            void trackConversionEvent('checkout_shippingInfoCompleted', {
+                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+            });
         };
         this.initServiceLevels = () => {
             var _a;
@@ -72,37 +86,26 @@ const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping exten
         this.submitBtnType = undefined;
         this.selectedShippingMethod = null;
         this.isSelecting = false;
-        this.disabled = true;
+        this.showErrorBanner = false;
         this.serviceLevels = [];
     }
-    watchFormComplete() {
-        var _a;
-        if (!this.disabled) {
-            // submit google tag when the form is complete
-            submitGtag('zonos-checkout-shipping-info');
-            void trackConversionEvent('checkout_shippingInfoCompleted', {
-                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
-            });
-        }
-    }
     componentWillLoad() {
         this.initServiceLevels();
         const selectedServiceLevel = this.serviceLevels.find(item => { var _a; return item.value === ((_a = cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
         if (selectedServiceLevel) {
             this.selectedShippingMethod = selectedServiceLevel;
         }
-        // enable continue button if there is a selected shipping option
-        this.disabled = !selectedServiceLevel;
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '0ded6474793fbb142e8e9a3bc10f1b5ae88858a7', class: "zonos--shipping zonos--elements" }, h("div", { key: '334d49db61fe69bf43f2bf68828c724cb7c9851e', class: "zonos--group" }, h("zonos-text", { key: '57ac7f10aff623a7e9c009bee86a4e88c979417f', class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { key: 'bb7679250828b859f90940617dc03c20addb6252', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'ace80fcc503601d577fb7751777b00331c027f16', class: "zonos--group-btn" }, h("zonos-button", { key: 'd48000ef65953b5f99d95c4b404bb7a47351dbce', backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        var _a, _b, _c;
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        return (h(Host, { key: 'c172dbd75de8a0d5d32d7e3e1814a124aaa05c05', class: "zonos--shipping zonos--elements" }, h("div", { key: '3dbbfadac7c8fb2bd4f3337206da535add7c4dd5', class: "zonos--group" }, h("zonos-text", { key: '93c2e9f56359a0c046e23a0e8c70af9af2dad3f4', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: 'dc0aa4f036719929344071fe68dd8bf98d493642', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '98dd599d8a87e3a350b928a5d0d9300aa197d731', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'a59a2833967bde37cd2b31dca4209e8730ec92dc', class: "zonos--group-btn" }, h("zonos-button", { key: 'ef100ac737c28901f609b188bfa0b9e58d4363e8', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }
-    static get watchers() { return {
-        "disabled": ["watchFormComplete"]
-    }; }
     static get style() { return ZonosShippingStyle0; }
 }, [2, "zonos-shipping", {
         "continueLoading": [4, "continue-loading"],
@@ -110,10 +113,8 @@ const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping exten
         "submitBtnType": [1, "submit-btn-type"],
         "selectedShippingMethod": [32],
         "isSelecting": [32],
-        "disabled": [32],
+        "showErrorBanner": [32],
         "serviceLevels": [32]
-    }, undefined, {
-        "disabled": ["watchFormComplete"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/zonos-tooltip2.js

@@ -15,10 +15,10 @@ const ZonosTooltip = /*@__PURE__*/ proxyCustomElement(class ZonosTooltip extends
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '5226e33bb8f9280965b254c51235c38e2e5f6ab6', class: "zonos--elements" }, h("div", { key: 'fd9bc052cc1081cbd87eaa3f4e6f0f53070c5b53', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '82d9885a2afb7e28707ddf6b24cb7c2dc148ef33' }), h("div", { key: 'c59b3beaca558dc95149455c9a15a8ce26bb0d70', class: classes([
+        return (h(Host, { key: '3b1bc52074428e85d2e3939b0fb6dbf4e8146e1c', class: "zonos--elements" }, h("div", { key: 'ded9a789ec041c9bd01c4a225ad0706a097c2215', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '2052001f18e774bf5f364f2f94fb83fbc161e510' }), h("div", { key: 'ed207e64c5361aadf6deb25574b736bbbb32cf49', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: 'f5213ba0f401359e5bccd289df3eae18e7b18a1d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '3bfad7df7cf6715230ffc0bc1c0b49b8900955b7', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'c2b064cac7a7851bbb8cd55ec116655160fffe6b', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'e03b47929a5b1856b6770e97403c85088d6a6c77', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get style() { return ZonosTooltipStyle0; }
 }, [1, "zonos-tooltip", {

package/dist/components/zonos-v-stack2.js

@@ -13,9 +13,9 @@ const VStack = /*@__PURE__*/ proxyCustomElement(class VStack extends HTMLElement
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '415d652d553042161ef364e2a8ccd226fcfe3d84', style: {
+        return (h(Host, { key: '39a71bdb43f87fd7beec0370aa384a94c7603417', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '1d8df528db72b8c1102742203eb53ce81efb1aae', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '66d247c7e8c8da9e311014695ce3a50b38709c33' }))));
+            } }, h("div", { key: '37ef89d4d2aecfebbf6a47f1754ce5f45fcd2566', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'd34be5394fef1bf5e7f37cb6dbd468ae48454df8' }))));
     }
     static get style() { return ZonosVStackStyle0; }
 }, [1, "zonos-v-stack", {