@zonos/elements 1.2.3 → 1.2.4-alpha.1

package/dist/components/zonos-shipping2.js

@@ -9,125 +9,125 @@ 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:Inter;display:block}.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--group-btn.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:calc(100% - 10px)}.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}.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--group-btn.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:calc(100% - 10px)}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
 
 const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.continueClicked = createEvent(this, "continueClicked", 7);
-    this.handleRadioSelected = async (e) => {
-      var _a;
-      this.selectedShippingMethod = e.detail;
-      if (!this.selectedShippingMethod) {
-        return;
-      }
-      const selectedShippingOption = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.find(item => { var _a; return item.id === ((_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value); })) || null;
-      if (!selectedShippingOption) {
-        return;
-      }
-      // save selected shipping option to store
-      const updateStatus = await cartStoreUpdateSelectedShippingOption(selectedShippingOption);
-      if (!updateStatus) {
-        return;
-      }
-      this.disabled = false;
-    };
-    /**
-     * handler for continue button click
-     */
-    this.continueClickHandler = () => {
-      this.continueClicked.emit();
-    };
-    this.continueLoading = false;
-    this.submitBtnColor = undefined;
-    this.submitBtnType = undefined;
-    this.selectedShippingMethod = null;
-    this.disabled = true;
-  }
-  watchFormComplete() {
-    if (!this.disabled) {
-      // submit google tag when the form is complete
-      submitGtag('zonos-checkout-shipping-info');
+    constructor() {
+        super();
+        this.__registerHost();
+        this.continueClicked = createEvent(this, "continueClicked", 7);
+        this.handleRadioSelected = async (e) => {
+            var _a;
+            this.selectedShippingMethod = e.detail;
+            if (!this.selectedShippingMethod) {
+                return;
+            }
+            const selectedShippingOption = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.find(item => { var _a; return item.id === ((_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value); })) || null;
+            if (!selectedShippingOption) {
+                return;
+            }
+            // save selected shipping option to store
+            const updateStatus = await cartStoreUpdateSelectedShippingOption(selectedShippingOption);
+            if (!updateStatus) {
+                return;
+            }
+            this.disabled = false;
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = () => {
+            this.continueClicked.emit();
+        };
+        this.continueLoading = false;
+        this.submitBtnColor = undefined;
+        this.submitBtnType = undefined;
+        this.selectedShippingMethod = null;
+        this.disabled = true;
+    }
+    watchFormComplete() {
+        if (!this.disabled) {
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-shipping-info');
+        }
     }
-  }
-  render() {
-    var _a;
-    const serviceLevels = (_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap((item) => {
-      var _a, _b;
-      const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
-      const sublabel = expectedDate
-        ? `${translate('Expected delivery')} ${expectedDate}`
-        : '';
-      const caption = minTransit && maxTransit
-        ? `(${minTransit}-${maxTransit} ${translate('business days')})`
-        : '';
-      const shippingAmount = ((_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
-      return {
-        caption,
-        label: item.displayName,
-        price: formatCurrency({
-          amount: shippingAmount,
-          currency: cartStore.currency,
-        }),
-        sublabel,
-        value: item.id,
-      };
-    });
-    return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) }))), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, 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 zonosShippingCss; }
+    render() {
+        var _a;
+        const serviceLevels = (_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap((item) => {
+            var _a, _b;
+            const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
+            const sublabel = expectedDate
+                ? `${translate('Expected delivery')} ${expectedDate}`
+                : '';
+            const caption = minTransit && maxTransit
+                ? `(${minTransit}-${maxTransit} ${translate('business days')})`
+                : '';
+            const shippingAmount = ((_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
+            return {
+                caption,
+                label: item.displayName,
+                price: formatCurrency({
+                    amount: shippingAmount,
+                    currency: cartStore.currency,
+                }),
+                sublabel,
+                value: item.id,
+            };
+        });
+        return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) }))), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, 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 zonosShippingCss; }
 }, [2, "zonos-shipping", {
-    "continueLoading": [4, "continue-loading"],
-    "submitBtnColor": [1, "submit-btn-color"],
-    "submitBtnType": [1, "submit-btn-type"],
-    "selectedShippingMethod": [32],
-    "disabled": [32]
-  }, undefined, {
-    "disabled": ["watchFormComplete"]
-  }]);
+        "continueLoading": [4, "continue-loading"],
+        "submitBtnColor": [1, "submit-btn-color"],
+        "submitBtnType": [1, "submit-btn-type"],
+        "selectedShippingMethod": [32],
+        "disabled": [32]
+    }, undefined, {
+        "disabled": ["watchFormComplete"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-shipping", "zonos-banner", "zonos-button", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-shipping":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosShipping);
-      }
-      break;
-    case "zonos-banner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "zonos-shipping-rich-radio":
-      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;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-shipping", "zonos-banner", "zonos-button", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-shipping":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosShipping);
+            }
+            break;
+        case "zonos-banner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-shipping-rich-radio":
+            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 { ZonosShipping as Z, defineCustomElement as d };

package/dist/components/zonos-spinner.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosSpinner extends Components.ZonosSpinner, HTMLElement {}
 export const ZonosSpinner: {
-  prototype: ZonosSpinner;
-  new (): ZonosSpinner;
+    prototype: ZonosSpinner;
+    new (): ZonosSpinner;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-spinner2.js

@@ -1,42 +1,42 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classes } from './classes.js';
 
-const zonosSpinnerCss = ":host{font-family:Inter;display:block}: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{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}";
+const zonosSpinnerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}";
 
 const ZonosSpinner = /*@__PURE__*/ proxyCustomElement(class ZonosSpinner extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = 32;
-    this.color = undefined;
-  }
-  render() {
-    if (!this.el.shadowRoot) {
-      return null;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = 32;
+        this.color = undefined;
     }
-    return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
-        '--size': `${this.size}px`,
-      } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
-  }
-  get el() { return this; }
-  static get style() { return zonosSpinnerCss; }
+    render() {
+        if (!this.el.shadowRoot) {
+            return null;
+        }
+        return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
+                '--size': `${this.size}px`,
+            } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
+    }
+    get el() { return this; }
+    static get style() { return zonosSpinnerCss; }
 }, [1, "zonos-spinner", {
-    "size": [2],
-    "color": [1]
-  }]);
+        "size": [2],
+        "color": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosSpinner);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosSpinner);
+            }
+            break;
+    } });
 }
 
 export { ZonosSpinner as Z, defineCustomElement as d };

package/dist/components/zonos-text.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosText extends Components.ZonosText, HTMLElement {}
 export const ZonosText: {
-  prototype: ZonosText;
-  new (): ZonosText;
+    prototype: ZonosText;
+    new (): ZonosText;
 };
 /**
  * Used to define this component and all nested components recursively.