@zonos/elements 1.2.3 → 1.2.4-alpha.1

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

@@ -15,280 +15,280 @@ import MoneyIcon from "./assets/moneyIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/removeIcon.svg";
 export class ZonosHelloDialog {
-  constructor() {
-    this.clickOutsideDialogHandler = (e) => {
-      if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
-        this.setIsOpen(false);
-      }
-    };
-    this.getCurrentPageEnum = () => {
-      switch (zonosStore.currentHelloPage) {
-        case 'home':
-          return 'hello_homepage';
-        case 'cart':
-          return 'hello_cart';
-        case 'productList':
-          return 'hello_item_list';
-        case 'productDetail':
-          return 'hello_item_details';
-        default:
-          return null;
-      }
-    };
-    this.setShowCountrySelect = async (value) => {
-      this.showCountrySelect = value;
-    };
-    this.isOpen = false;
-    this.setIsOpen = () => { };
-    this.mobileLocationOverride = undefined;
-    this.animateFromLeftOverride = undefined;
-    this.appearanceSettings = undefined;
-    this.restrictedItems = [];
-    this.welcomeMessage = 'Welcome to our Demo App!';
-    this.showCountrySelect = false;
-  }
-  globalClickHandler(e) {
-    this.clickOutsideDialogHandler(e);
-  }
-  isOpenHandler(isOpen) {
-    if (!isOpen) {
-      void this.setShowCountrySelect(false);
-    }
-  }
-  render() {
-    var _a;
-    const { countryLandedCost, selectedCountryCode } = localizationStore;
-    // Our Robby API spells deminimis wrong here
-    const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
-      ? currencyFormat(countryLandedCost.dutyDeminimus)
-      : null;
-    // If Canada, use 40 CAD (courier duty de minimis)
-    const dutyDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
-      ? currencyFormat(40)
-      : dutyDeminimis;
-    // If deminimis is undefined or null, assume it's $0
-    const dutyDeMinimisMessage = dutyDeminimisToUse
-      ? `${translate('Spend')} ${dutyDeminimisToUse} ${translate('duty free')}`
-      : translate('Duties will apply to all orders');
-    // Our Robby API spells deminimis wrong here
-    const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
-      ? currencyFormat(countryLandedCost.vatTaxDeminimus)
-      : null;
-    // If Canada, use 150 CAD (courier tax de minimis)
-    const taxDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
-      ? currencyFormat(150)
-      : taxDeminimis;
-    const taxDeMinimisMessage = taxDeminimisToUse
-      ? `${translate('Spend')} ${taxDeminimisToUse} ${translate('tax free')}`
-      : translate('Taxes will apply to all orders');
-    const animateLeft = this.animateFromLeftOverride ||
-      (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
-    const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
-    const { customMessages } = localizationStore;
-    const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
-    const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
-      translate('Know about duties and taxes before you buy. Shop with confidence!');
-    const currentPage = this.getCurrentPageEnum();
-    const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-    return (h(Host, { class: "zonos--elements" }, h("div", { "aria-hidden": "true", 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',
-      ]), ref: el => el && (this.dialogRef = el) }, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { 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", { color: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-    }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));
-  }
-  static get is() { return "zonos-hello-dialog"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-hello-dialog.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-hello-dialog.css"]
-    };
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get properties() {
-    return {
-      "isOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the dialog is open"
-        },
-        "attribute": "is-open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "setIsOpen": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(isOpen: boolean) => void",
-          "resolved": "(isOpen: boolean) => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "() => {}"
-            }],
-          "text": "The function to set the open state"
-        },
-        "defaultValue": "() => {}"
-      },
-      "mobileLocationOverride": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "HelloMobileLocation",
-          "resolved": "\"BOTTOM_LEFT\" | \"BOTTOM_RIGHT\" | \"TOP_LEFT\" | \"TOP_RIGHT\" | undefined",
-          "references": {
-            "HelloMobileLocation": {
-              "location": "import",
-              "path": "src/types",
-              "id": "src/types/index.ts::HelloMobileLocation"
+    constructor() {
+        this.clickOutsideDialogHandler = (e) => {
+            if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
+                this.setIsOpen(false);
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Force mobile styling instead of media query and use the passed location value"
-        },
-        "attribute": "mobile-location-override",
-        "reflect": false
-      },
-      "animateFromLeftOverride": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Force left animation instead of detecting which side has more space"
-        },
-        "attribute": "animate-from-left-override",
-        "reflect": false
-      },
-      "appearanceSettings": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Partial<AppearanceConfig>",
-          "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
-          "references": {
-            "Partial": {
-              "location": "global",
-              "id": "global::Partial"
-            },
-            "AppearanceConfig": {
-              "location": "import",
-              "path": "src/types",
-              "id": "src/types/index.ts::AppearanceConfig"
+        };
+        this.getCurrentPageEnum = () => {
+            switch (zonosStore.currentHelloPage) {
+                case 'home':
+                    return 'hello_homepage';
+                case 'cart':
+                    return 'hello_cart';
+                case 'productList':
+                    return 'hello_item_list';
+                case 'productDetail':
+                    return 'hello_item_details';
+                default:
+                    return null;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Override the appearance settings"
+        };
+        this.setShowCountrySelect = async (value) => {
+            this.showCountrySelect = value;
+        };
+        this.isOpen = false;
+        this.setIsOpen = () => { };
+        this.mobileLocationOverride = undefined;
+        this.animateFromLeftOverride = undefined;
+        this.appearanceSettings = undefined;
+        this.restrictedItems = [];
+        this.welcomeMessage = 'Welcome to our Demo App!';
+        this.showCountrySelect = false;
+    }
+    globalClickHandler(e) {
+        this.clickOutsideDialogHandler(e);
+    }
+    isOpenHandler(isOpen) {
+        if (!isOpen) {
+            void this.setShowCountrySelect(false);
         }
-      },
-      "restrictedItems": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "RestrictedItem[]",
-          "resolved": "({ action: ItemRestrictionAction | null; id: string; itemDescription: string | null; itemRestrictions: ({ hsCode: string; id: string; note: string; sources: (string | null)[] | null; type: ItemRestrictionType; } | null)[] | null; } & { name?: string | undefined; })[]",
-          "references": {
-            "RestrictedItem": {
-              "location": "import",
-              "path": "src/types/hello/RestrictedItem",
-              "id": "src/types/hello/RestrictedItem.ts::RestrictedItem"
+    }
+    render() {
+        var _a;
+        const { countryLandedCost, selectedCountryCode } = localizationStore;
+        // Our Robby API spells deminimis wrong here
+        const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
+            ? currencyFormat(countryLandedCost.dutyDeminimus)
+            : null;
+        // If Canada, use 40 CAD (courier duty de minimis)
+        const dutyDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+            ? currencyFormat(40)
+            : dutyDeminimis;
+        // If deminimis is undefined or null, assume it's $0
+        const dutyDeMinimisMessage = dutyDeminimisToUse
+            ? `${translate('Spend')} ${dutyDeminimisToUse} ${translate('duty free')}`
+            : translate('Duties will apply to all orders');
+        // Our Robby API spells deminimis wrong here
+        const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
+            ? currencyFormat(countryLandedCost.vatTaxDeminimus)
+            : null;
+        // If Canada, use 150 CAD (courier tax de minimis)
+        const taxDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+            ? currencyFormat(150)
+            : taxDeminimis;
+        const taxDeMinimisMessage = taxDeminimisToUse
+            ? `${translate('Spend')} ${taxDeminimisToUse} ${translate('tax free')}`
+            : translate('Taxes will apply to all orders');
+        const animateLeft = this.animateFromLeftOverride ||
+            (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
+        const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
+        const { customMessages } = localizationStore;
+        const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
+        const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+            translate('Know about duties and taxes before you buy. Shop with confidence!');
+        const currentPage = this.getCurrentPageEnum();
+        const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
+        return (h(Host, { class: "zonos--elements" }, h("div", { "aria-hidden": "true", 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',
+            ]), ref: el => el && (this.dialogRef = el) }, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { 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", { color: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
+        }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));
+    }
+    static get is() { return "zonos-hello-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-hello-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-hello-dialog.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is open"
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "setIsOpen": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(isOpen: boolean) => void",
+                    "resolved": "(isOpen: boolean) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "() => {}"
+                        }],
+                    "text": "The function to set the open state"
+                },
+                "defaultValue": "() => {}"
+            },
+            "mobileLocationOverride": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HelloMobileLocation",
+                    "resolved": "\"BOTTOM_LEFT\" | \"BOTTOM_RIGHT\" | \"TOP_LEFT\" | \"TOP_RIGHT\" | undefined",
+                    "references": {
+                        "HelloMobileLocation": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::HelloMobileLocation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Force mobile styling instead of media query and use the passed location value"
+                },
+                "attribute": "mobile-location-override",
+                "reflect": false
+            },
+            "animateFromLeftOverride": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Force left animation instead of detecting which side has more space"
+                },
+                "attribute": "animate-from-left-override",
+                "reflect": false
+            },
+            "appearanceSettings": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<AppearanceConfig>",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "AppearanceConfig": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::AppearanceConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the appearance settings"
+                }
+            },
+            "restrictedItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RestrictedItem[]",
+                    "resolved": "({ action: ItemRestrictionAction | null; id: string; itemDescription: string | null; itemRestrictions: ({ hsCode: string; id: string; note: string; sources: (string | null)[] | null; type: ItemRestrictionType; } | null)[] | null; } & { name?: string | undefined; })[]",
+                    "references": {
+                        "RestrictedItem": {
+                            "location": "import",
+                            "path": "src/types/hello/RestrictedItem",
+                            "id": "src/types/hello/RestrictedItem.ts::RestrictedItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Item restrictions array if any"
+                },
+                "defaultValue": "[]"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "[]"
-            }],
-          "text": "Item restrictions array if any"
-        },
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "welcomeMessage": {},
-      "showCountrySelect": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "closeDialog",
-        "name": "closeDialog",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Close dialog button click"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get watchers() {
-    return [{
-        "propName": "isOpen",
-        "methodName": "isOpenHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "globalClickHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "welcomeMessage": {},
+            "showCountrySelect": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeDialog",
+                "name": "closeDialog",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close dialog button click"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "isOpenHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "globalClickHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }