@zonos/elements 1.2.3 → 1.2.4-alpha.2

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

@@ -1,130 +1,133 @@
 import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosNotification {
-  constructor() {
-    this.class = '';
-    this.notificationArray = [];
-  }
-  /**
-   * Show a notification
-   */
-  async showNotification(notification) {
-    // random generate id
-    const id = `id-${Math.random().toString(36).substring(2, 9)}`;
-    const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
-    this.notificationArray = [...this.notificationArray, notificationItem];
-    setTimeout(() => {
-      this.updateTransitionClass({
-        id,
-        transitionClass: 'show',
-      });
-    }, 50);
-    setTimeout(() => {
-      this.removeNotification(id);
-    }, notificationItem.timeout);
-  }
-  updateTransitionClass({ id, transitionClass, }) {
-    this.notificationArray = this.notificationArray.map(notification => {
-      if (notification.id === id) {
-        return Object.assign(Object.assign({}, notification), { transitionClass });
-      }
-      return notification;
-    });
-  }
-  /**
-   * Remove a notification
-   */
-  removeNotification(id) {
-    // add hide class before removing the item 100ms to trigger animation
-    this.updateTransitionClass({
-      id,
-      transitionClass: '',
-    });
-    setTimeout(() => {
-      this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
-    }, 300);
-  }
-  render() {
-    return (h(Host, { class: classes(['zonos--elements zonos--notification', this.class]) }, h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
-      return (h("div", { "aria-hidden": "true", class: classes([
-          'zonos--notification-item',
-          notification.type,
-          notification.transitionClass,
-        ]), key: notification.id, onClick: () => {
-          this.removeNotification(notification.id);
-        } }, h("zonos-text", { color: "gray-0" }, notification.message)));
-    }))));
-  }
-  static get is() { return "zonos-notification"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-notification.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-notification.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "class": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom class to add to the notification"
-        },
-        "attribute": "class",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "notificationArray": {}
-    };
-  }
-  static get methods() {
-    return {
-      "showNotification": {
-        "complexType": {
-          "signature": "(notification: NotificationInit) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "NotificationInit": {
-              "location": "local",
-              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-notification/zonos-notification.tsx",
-              "id": "src/components/common/zonos-notification/zonos-notification.tsx::NotificationInit"
-            },
-            "NotificationItem": {
-              "location": "global",
-              "id": "global::NotificationItem"
+    constructor() {
+        this.class = '';
+        this.notificationArray = [];
+    }
+    /**
+     * Show a notification
+     */
+    async showNotification(notification) {
+        // random generate id
+        const id = `id-${Math.random().toString(36).substring(2, 9)}`;
+        const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
+        this.notificationArray = [...this.notificationArray, notificationItem];
+        setTimeout(() => {
+            this.updateTransitionClass({
+                id,
+                transitionClass: 'show',
+            });
+        }, 50);
+        setTimeout(() => {
+            this.removeNotification(id);
+        }, notificationItem.timeout);
+    }
+    updateTransitionClass({ id, transitionClass, }) {
+        this.notificationArray = this.notificationArray.map(notification => {
+            if (notification.id === id) {
+                return Object.assign(Object.assign({}, notification), { transitionClass });
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Show a notification",
-          "tags": []
-        }
-      }
-    };
-  }
+            return notification;
+        });
+    }
+    /**
+     * Remove a notification
+     */
+    removeNotification(id) {
+        // add hide class before removing the item 100ms to trigger animation
+        this.updateTransitionClass({
+            id,
+            transitionClass: '',
+        });
+        setTimeout(() => {
+            this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
+        }, 300);
+    }
+    render() {
+        return (h(Host, { class: classes(['zonos--elements zonos--notification', this.class]), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            return (h("div", { "aria-hidden": "true", class: classes([
+                    'zonos--notification-item',
+                    notification.type,
+                    notification.transitionClass,
+                ]), key: notification.id, onClick: () => {
+                    this.removeNotification(notification.id);
+                } }, h("zonos-text", { color: "gray-0" }, notification.message)));
+        }))));
+    }
+    static get is() { return "zonos-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom class to add to the notification"
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "notificationArray": {}
+        };
+    }
+    static get methods() {
+        return {
+            "showNotification": {
+                "complexType": {
+                    "signature": "(notification: NotificationInit) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NotificationInit": {
+                            "location": "local",
+                            "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-notification/zonos-notification.tsx",
+                            "id": "src/components/common/zonos-notification/zonos-notification.tsx::NotificationInit"
+                        },
+                        "NotificationItem": {
+                            "location": "global",
+                            "id": "global::NotificationItem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show a notification",
+                    "tags": []
+                }
+            }
+        };
+    }
 }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.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%;
 }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -1,175 +1,175 @@
 import { h, Host, } from "@stencil/core";
-import { zonosStore } from "../../store/zonosStore";
+import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { isColorVariable } from "../../utils/isColorVariable";
 export class ZonosShippingRichRadio {
-  constructor() {
-    this.handleRichRadioSelect = (item) => {
-      var _a;
-      this.selectedItem = item;
-      (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
-    };
-    this.getRadioItemStyleVariables = () => {
-      const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;
-      const secondaryColor = isColorVariable(usedColor)
-        ? `var(--amino-${usedColor})`
-        : usedColor;
-      return {
-        '--border-radius': getBorderRadius(this.borderStyle),
-        '--selected-border-color': secondaryColor || 'unset',
-      };
-    };
-    this.items = undefined;
-    this.borderColor = undefined;
-    this.borderStyle = undefined;
-    this.theme = undefined;
-    this.selectedItem = null;
-  }
-  render() {
-    var _a;
-    return (h(Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: this.getRadioItemStyleVariables() }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
-      var _a;
-      const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
-      return (h("div", { "aria-hidden": "true", class: classes([
-          'zonos--shipping-rich-radio-item',
-          selected && 'selected',
-        ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { color: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
-    })));
-  }
-  static get is() { return "zonos-shipping-rich-radio"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-shipping-rich-radio.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-shipping-rich-radio.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "items": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ShippingRichRadioItem[]",
-          "resolved": "ShippingRichRadioItem[]",
-          "references": {
-            "ShippingRichRadioItem": {
-              "location": "local",
-              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx",
-              "id": "src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx::ShippingRichRadioItem"
+    constructor() {
+        this.handleRichRadioSelect = (item) => {
+            var _a;
+            this.selectedItem = item;
+            (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
+        };
+        this.getRadioItemStyleVariables = () => {
+            const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;
+            const secondaryColor = isColorVariable(usedColor)
+                ? `var(--amino-${usedColor})`
+                : usedColor;
+            return {
+                '--border-radius': getBorderRadius(this.borderStyle),
+                '--selected-border-color': secondaryColor || 'unset',
+            };
+        };
+        this.items = undefined;
+        this.borderColor = undefined;
+        this.borderStyle = undefined;
+        this.theme = undefined;
+        this.selectedItem = null;
+    }
+    render() {
+        var _a;
+        return (h(Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+            var _a;
+            const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
+            return (h("div", { "aria-hidden": "true", class: classes([
+                    'zonos--shipping-rich-radio-item',
+                    selected && 'selected',
+                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { color: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+        })));
+    }
+    static get is() { return "zonos-shipping-rich-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-shipping-rich-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-shipping-rich-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ShippingRichRadioItem[]",
+                    "resolved": "ShippingRichRadioItem[]",
+                    "references": {
+                        "ShippingRichRadioItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx",
+                            "id": "src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx::ShippingRichRadioItem"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of items to display"
+                }
+            },
+            "borderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color | (string & { _placeholder?: never })",
+                    "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override border color of the radio item"
+                },
+                "attribute": "border-color",
+                "reflect": false
+            },
+            "borderStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiStyle",
+                    "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
+                    "references": {
+                        "ElementsUiStyle": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::ElementsUiStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override border color of the radio item"
+                },
+                "attribute": "border-style",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiTheme",
+                    "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
+                    "references": {
+                        "ElementsUiTheme": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::ElementsUiTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the radio item"
+                },
+                "attribute": "theme",
+                "reflect": false
             }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "List of items to display"
-        }
-      },
-      "borderColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color | (string & { _placeholder?: never })",
-          "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "src/types",
-              "id": "src/types/index.ts::Color"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Override border color of the radio item"
-        },
-        "attribute": "border-color",
-        "reflect": false
-      },
-      "borderStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ElementsUiStyle",
-          "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
-          "references": {
-            "ElementsUiStyle": {
-              "location": "import",
-              "path": "src/types",
-              "id": "src/types/index.ts::ElementsUiStyle"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Override border color of the radio item"
-        },
-        "attribute": "border-style",
-        "reflect": false
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ElementsUiTheme",
-          "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
-          "references": {
-            "ElementsUiTheme": {
-              "location": "import",
-              "path": "src/types",
-              "id": "src/types/index.ts::ElementsUiTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the radio item"
-        },
-        "attribute": "theme",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "selectedItem": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "radioSelected",
-        "name": "radioSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when an item is selected"
-        },
-        "complexType": {
-          "original": "ShippingRichRadioItem",
-          "resolved": "{ caption?: string | undefined; label: string; price: string; sublabel?: string | undefined; value: string | number; }",
-          "references": {
-            "ShippingRichRadioItem": {
-              "location": "local",
-              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx",
-              "id": "src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx::ShippingRichRadioItem"
-            }
-          }
-        }
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "selectedItem": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioSelected",
+                "name": "radioSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when an item is selected"
+                },
+                "complexType": {
+                    "original": "ShippingRichRadioItem",
+                    "resolved": "{ caption?: string | undefined; label: string; price: string; sublabel?: string | undefined; value: string | number; }",
+                    "references": {
+                        "ShippingRichRadioItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx",
+                            "id": "src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx::ShippingRichRadioItem"
+                        }
+                    }
+                }
+            }];
+    }
 }

package/dist/collection/components/common/zonos-spinner/zonos-spinner.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%;
 }