@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/collection/components/common/zonos-country-flag/zonos-country-flag.js

@@ -1,105 +1,110 @@
 import { h, Host } from "@stencil/core";
 import { localizationStore } from "../../store/hello/localization";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 const FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;
 export class ZonosCountryFlag {
-  constructor() {
-    this.class = '';
-    this.countryCode = localizationStore.selectedCountryCode;
-    this.size = undefined;
-  }
-  render() {
-    if (!this.el.shadowRoot || !this.countryCode) {
-      return null;
+    constructor() {
+        this.class = '';
+        this.countryCode = localizationStore.selectedCountryCode;
+        this.size = undefined;
     }
-    const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;
-    return (h(Host, { class: "zonos--elements", style: this.size
-        ? {
-          height: `${this.size}px`,
-          width: `${this.size}px`,
+    render() {
+        if (!this.el.shadowRoot || !this.countryCode) {
+            return null;
         }
-        : {} }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
-  }
-  static get is() { return "zonos-country-flag"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-country-flag.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-country-flag.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "class": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The class name for the flag"
-        },
-        "attribute": "class",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "countryCode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CountryCode | null",
-          "resolved": "CountryCode | null",
-          "references": {
-            "CountryCode": {
-              "location": "import",
-              "path": "src/types/generated/graphql.customer.types",
-              "id": "src/types/generated/graphql.customer.types.ts::CountryCode"
+        const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;
+        const font = zonosStoreFontFamily();
+        return (h(Host, { class: "zonos--elements", style: this.size
+                ? {
+                    '--font-family': font,
+                    height: `${this.size}px`,
+                    width: `${this.size}px`,
+                }
+                : {
+                    '--font-family': font,
+                } }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
+    }
+    static get is() { return "zonos-country-flag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-country-flag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-country-flag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The class name for the flag"
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "countryCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode | null",
+                    "resolved": "CountryCode | null",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "localizationStore.selectedCountryCode"
+                        }, {
+                            "name": "example",
+                            "text": "'US'"
+                        }],
+                    "text": "The country code for the flag"
+                },
+                "attribute": "country-code",
+                "reflect": false,
+                "defaultValue": "localizationStore.selectedCountryCode"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the flag"
+                },
+                "attribute": "size",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "localizationStore.selectedCountryCode"
-            }, {
-              "name": "example",
-              "text": "'US'"
-            }],
-          "text": "The country code for the flag"
-        },
-        "attribute": "country-code",
-        "reflect": false,
-        "defaultValue": "localizationStore.selectedCountryCode"
-      },
-      "size": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size of the flag"
-        },
-        "attribute": "size",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
+        };
+    }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/common/zonos-country-select/zonos-country-select.css

@@ -1,6 +1,10 @@
 :host {
-  font-family: Inter;
+  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%;

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

@@ -2,77 +2,80 @@ import { h, Host } from "@stencil/core";
 import Fuse from "fuse.js";
 import { localizationStore, localizationStoreUpdateSelectedCountryCode, } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ArrowLeftBlue from "../../common/zonos-country-select/assets/arrowLeftBlue.svg";
 export class ZonosCountrySelect {
-  constructor() {
-    this.countrySelected = (countryCode) => {
-      // mutate the selected country code in store
-      void localizationStoreUpdateSelectedCountryCode(countryCode);
-      this.closeCountrySelect();
-    };
-    this.handleInputChange = (event) => {
-      const input = event.target;
-      this.inputValue = input.value;
-    };
-    this.closeCountrySelect = () => { };
-    this.inputValue = '';
-  }
-  render() {
-    var _a;
-    const { selectedCountryCode, shippingZoneCountries } = localizationStore;
-    const countries = shippingZoneCountries
-      ? Object.values(shippingZoneCountries)
-      : [];
-    const fuse = new Fuse(countries, {
-      keys: ['displayName'],
-    });
-    const fuseObject = fuse.search(this.inputValue.toLowerCase());
-    const filteredCountries = this.inputValue
-      ? fuseObject.map(country => country.item)
-      : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-    return (h(Host, { class: "zonos--elements" }, h("div", { class: "zonos--country-select" }, h("zonos-v-stack", null, h("div", { class: "zonos--country-select-header" }, h("zonos-button", { class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", null, shippingZoneCountries &&
-      selectedCountryCode &&
-      ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { spacing: 8 }, h("input", { class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", null, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
-  }
-  static get is() { return "zonos-country-select"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-country-select.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-country-select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "closeCountrySelect": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "() => void",
-          "resolved": "() => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "() => {}"
-            }],
-          "text": "Function to close the country select"
-        },
-        "defaultValue": "() => {}"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "inputValue": {}
-    };
-  }
+    constructor() {
+        this.countrySelected = (countryCode) => {
+            // mutate the selected country code in store
+            void localizationStoreUpdateSelectedCountryCode(countryCode);
+            this.closeCountrySelect();
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.inputValue = input.value;
+        };
+        this.closeCountrySelect = () => { };
+        this.inputValue = '';
+    }
+    render() {
+        var _a;
+        const { selectedCountryCode, shippingZoneCountries } = localizationStore;
+        const countries = shippingZoneCountries
+            ? Object.values(shippingZoneCountries)
+            : [];
+        const fuse = new Fuse(countries, {
+            keys: ['displayName'],
+        });
+        const fuseObject = fuse.search(this.inputValue.toLowerCase());
+        const filteredCountries = this.inputValue
+            ? fuseObject.map(country => country.item)
+            : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
+        return (h(Host, { class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { class: "zonos--country-select" }, h("zonos-v-stack", null, h("div", { class: "zonos--country-select-header" }, h("zonos-button", { class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", null, shippingZoneCountries &&
+            selectedCountryCode &&
+            ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { spacing: 8 }, h("input", { class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", null, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
+    }
+    static get is() { return "zonos-country-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-country-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-country-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "closeCountrySelect": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "() => {}"
+                        }],
+                    "text": "Function to close the country select"
+                },
+                "defaultValue": "() => {}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {}
+        };
+    }
 }

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.css

@@ -1,6 +1,10 @@
 :host {
-  font-family: Inter;
+  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%;

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -1,62 +1,65 @@
 import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
 export class ZonosCustomMessage {
-  constructor() {
-    this.icon = '';
-    this.message = '';
-  }
-  render() {
-    return (h(Host, { class: "zonos--elements" }, h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: this.icon }), h("zonos-text", null, this.message)))));
-  }
-  static get is() { return "zonos-custom-message"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-custom-message.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-custom-message.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The custom message icon"
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "message": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The custom message text"
-        },
-        "attribute": "message",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
+    constructor() {
+        this.icon = '';
+        this.message = '';
+    }
+    render() {
+        return (h(Host, { class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: this.icon }), h("zonos-text", null, this.message)))));
+    }
+    static get is() { return "zonos-custom-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-custom-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-custom-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The custom message icon"
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The custom message text"
+                },
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
 }

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

@@ -1,6 +1,10 @@
 :host {
-  font-family: Inter;
+  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%;