@zonos/elements 1.3.18-alpha.1 → 1.3.18-alpha.2

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.js

@@ -68,6 +68,7 @@ export class ZonosCheckout {
         this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
+        this.confirmDialogOpen = false;
     }
     /**
      * Init cart info handler event
@@ -76,10 +77,27 @@ export class ZonosCheckout {
         const cartItems = e.detail;
         void cartStoreUpdateItems(cartItems);
     }
+    async handleKeyPress(e) {
+        if (e.key === 'Escape') {
+            void this.closeDialogHandler();
+        }
+    }
     /**
      * Close dialog action
      */
-    async closeDialogHandler() {
+    async closeDialogHandler(props) {
+        var _a, _b;
+        if (!this.open) {
+            // Do nothing if the checkout is not even open
+            return;
+        }
+        // Only proceed when user select confirmed.
+        if (!(props === null || props === void 0 ? void 0 : props.confirmed)) {
+            this.confirmDialogOpen = true;
+            return;
+        }
+        // Close the confirm dialog
+        this.confirmDialogOpen = false;
         submitGtag('zonos-checkout-close');
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cartStore.step === 'finish') {
@@ -90,6 +108,10 @@ export class ZonosCheckout {
         cartStore.step = 'customer-info';
         // reset the tab item, so that user needs to click on Continue button to re-quote the landed cost if needed.
         cartStoreResetTabItems();
+        /**
+         * Trigger callback when the checkout is closed
+         */
+        (_b = (_a = zonosStore.checkoutSettings).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     async buildCartAndInit() {
         // if tempCartUUID is provided, use it instead of buildCartDetail
@@ -494,7 +516,11 @@ export class ZonosCheckout {
                 hasFooter && 'has-footer',
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
+                this.confirmDialogOpen = false;
+            },
+            // Mark user selected confirm to close the dialog
+            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) })));
     }
     static get is() { return "zonos-checkout"; }
     static get encapsulation() { return "scoped"; }
@@ -627,15 +653,20 @@ export class ZonosCheckout {
             "storybookPaymentStatusOverride": {},
             "domesticRedirectedBtnSelector": {},
             "legacyCheckoutHiddenBtnSelector": {},
-            "isLegacyCheckout": {}
+            "isLegacyCheckout": {},
+            "confirmDialogOpen": {}
         };
     }
     static get methods() {
         return {
             "closeDialogHandler": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(props?: { confirmed: boolean; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "props",
+                            "type": "{ confirmed: boolean; } | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -717,6 +748,12 @@ export class ZonosCheckout {
                 "target": "body",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyPress",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "resize",
                 "method": "handleWindowResize",

package/dist/collection/components/common/zonos-button/zonos-button.css

@@ -73,6 +73,18 @@
   margin: 1px;
   /** Button size */
 }
+:host button:not([disabled]):hover {
+  background-image: var(--zonos-elements-button-standard-hover);
+}
+:host button:not([disabled]):active {
+  background: var(--zonos-elements-gray-700);
+}
+:host button:not([disabled]):focus {
+  box-shadow: var(--zonos-elements-focus-button);
+}
+:host button.with-box-shadow {
+  box-shadow: var(--zonos-elements-shadow-button-standard);
+}
 :host button.sm.no-background, :host button.md.no-background, :host button.lg.no-background {
   background: none;
   outline: none;

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

@@ -14,6 +14,7 @@ export class ZonosButton {
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
+        this.getColorVarProperty = (color) => color.replace('var(', '').replace(')', '');
         this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
@@ -23,6 +24,7 @@ export class ZonosButton {
         this.size = 'sm';
         this.variant = 'standard';
         this.noBackground = false;
+        this.withBoxShadow = false;
         this.noPaddingLeft = false;
         this.noPaddingRight = false;
         this.loading = false;
@@ -52,15 +54,22 @@ export class ZonosButton {
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
+        // use the variable if it's a color variable, otherwise use the color
+        const backgroundColor = this.backgroundColor && isColorVariable(this.backgroundColor)
+            ? `var(--zonos-elements-${this.backgroundColor})`
+            : this.backgroundColor;
         // use override background if it exists, otherwise use color from setting
-        const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
+        const overrideBackground = backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
-            ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
+        const backgroundActualColor = overrideBackground &&
+            isColorVariable(this.getColorVarProperty(overrideBackground))
+            ? window
+                .getComputedStyle(this.ele)
+                .getPropertyValue(this.getColorVarProperty(overrideBackground))
             : overrideBackground;
         // use the variable if it's a color variable, otherwise use the color
         const color = this.buttonColor && isColorVariable(this.buttonColor)
@@ -75,28 +84,30 @@ export class ZonosButton {
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: 'f5fd039f9ceeacae2448a09228bacc1bd6476be7', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '6e361b1a80fd43a72a99a8201ca5d7cb86404656', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': contrastColor,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'bcd3c7bf52464dd1e7485cdac6b0e3defbf63af3', class: classes([
+            }) }, h("button", { key: 'fd4335b2d9bfe74b509f1355fa620dc4c53f58c6', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
                 this.noPaddingLeft && 'no-padding-left',
                 this.noPaddingRight && 'no-padding-right',
                 this.iconRight && 'icon-right',
+                this.withBoxShadow && 'with-box-shadow',
                 variant,
                 this.size,
                 // only override background if variant is set to standard
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: 'ea73d8c4b4973f3a8ed6e5b85c2236c0f20b4c6f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'cdbe444e0aee0e64facd757a1b5ebd74208359e0', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e7a46cced38d7916873e5dea8aff4c33e137cdf6', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: '7b37a1d30604de0d9e1f5d07bf6034724dcd8875', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'e4e3cbda9ae02c2ac9a7c17767bda93076ea67ad', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e9b7287f2c4d9143f04103fe43d3f4dfd669341e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["zonos-button.scss"]
@@ -288,8 +299,14 @@ export class ZonosButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The variance of the button\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+                    "tags": [{
+                            "name": "note",
+                            "text": "If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+                        }, {
+                            "name": "default",
+                            "text": "standard"
+                        }],
+                    "text": "The variance of the button"
                 },
                 "attribute": "variant",
                 "reflect": false,
@@ -316,6 +333,24 @@ export class ZonosButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "withBoxShadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the button has a box shadow"
+                },
+                "attribute": "with-box-shadow",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "noPaddingLeft": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/common/zonos-confirm-dialog/assets/ExclamationMarkDuotoneIcon.svg

@@ -0,0 +1,4 @@
+<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-400)"></path>
+  <path d="M12.75 9a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V9Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>

package/dist/collection/components/common/zonos-confirm-dialog/assets/HelpDuotoneIcon.svg

@@ -0,0 +1,4 @@
+<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-400)"></path>
+  <path d="M10.25 10.25a1.75 1.75 0 1 1 2.431 1.613c-.616.26-1.431.885-1.431 1.887a.75.75 0 0 0 1.5 0c0-.053.02-.128.108-.228.092-.104.236-.205.408-.278A3.25 3.25 0 1 0 8.75 10.25a.75.75 0 0 0 1.5 0Zm2.5 5.75a.75.75 0 0 0-1.5 0v.25a.75.75 0 0 0 1.5 0V16Z" fill="currentColor"></path>
+</svg>

package/dist/collection/components/common/zonos-confirm-dialog/assets/WarningDuotoneIcon.svg

@@ -0,0 +1,4 @@
+<svg color="var(--zonos-elements-orange-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M14.46 5.492c-1.014-2.027-3.906-2.027-4.92 0L4.276 16.02c-.914 1.83.416 3.98 2.46 3.98h10.528c2.044 0 3.374-2.151 2.46-3.98L14.46 5.492Z" data-is-secondary-color="true" fill="var(--zonos-elements-orange-400)"></path>
+  <path d="M12.75 10a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V10Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.css

@@ -0,0 +1,125 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--backdrop,
+:host .zonos--confirm-layout {
+  opacity: 0;
+  z-index: -999;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+:host .zonos--backdrop {
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  background: var(--zonos-elements-backdrop-color);
+  position: fixed;
+}
+:host .zonos--confirm-layout {
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--confirm-dialog {
+  position: relative;
+  background: var(--zonos-elements-gray-0);
+  max-width: 90vw;
+  max-height: 90vh;
+  width: 350px;
+  border-radius: var(--border-radius, 10px);
+  outline: none;
+  box-shadow: var(--zonos-elements-v3-shadow-xxl);
+  border: var(--zonos-elements-border);
+  display: flex;
+  flex-direction: column;
+}
+:host .wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  gap: 24px;
+}
+:host .icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  background: var(--zonos-elements-blue-100);
+}
+:host .warn .icon-wrapper {
+  background: var(--zonos-elements-orange-100);
+}
+:host .danger .icon-wrapper {
+  background: var(--zonos-elements-red-100);
+}
+:host .footer {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+:host .footer zonos-button {
+  flex: 1;
+}
+:host .content {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+:host .content zonos-text {
+  text-align: center;
+}
+
+:host(.open) .zonos--confirm-layout,
+:host(.open) .zonos--backdrop {
+  visibility: visible;
+}
+:host(.open) .zonos--backdrop {
+  z-index: 10003;
+  opacity: 0.65;
+}
+:host(.open) .zonos--confirm-layout {
+  opacity: 1;
+  z-index: 10004;
+  transform: scale(1);
+}