@zonos/elements 1.2.3 → 1.2.4-alpha.1

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

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

package/dist/components/zonos-collapse2.js

@@ -1,55 +1,57 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 
-const zonosCollapseCss = ":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
+const zonosCollapseCss = ":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
 
 const ZonosCollapse = /*@__PURE__*/ proxyCustomElement(class ZonosCollapse extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.collapsed = false;
-    this.collapseSize = 0;
-    this.height = this.el.scrollHeight;
-  }
-  getElementHeight() {
-    const fullHeight = `${this.height}px`;
-    const collapsedHeight = `${this.collapseSize}px`;
-    return this.collapsed ? collapsedHeight : fullHeight;
-  }
-  componentDidLoad() {
-    this.height = this.el.scrollHeight;
-  }
-  componentDidRender() {
-    var _a, _b, _c;
-    (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
-      this.height = this.el.scrollHeight;
-    });
-  }
-  render() {
-    this.height = this.el.scrollHeight;
-    return (h(Host, { class: 'zonos--elements zonos--collapse', style: {
-        height: this.getElementHeight(),
-      } }, h("div", null, h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", null))));
-  }
-  get el() { return this; }
-  static get style() { return zonosCollapseCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.collapsed = false;
+        this.collapseSize = 0;
+        this.height = this.el.scrollHeight;
+    }
+    getElementHeight() {
+        const fullHeight = `${this.height}px`;
+        const collapsedHeight = `${this.collapseSize}px`;
+        return this.collapsed ? collapsedHeight : fullHeight;
+    }
+    componentDidLoad() {
+        this.height = this.el.scrollHeight;
+    }
+    componentDidRender() {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+            this.height = this.el.scrollHeight;
+        });
+    }
+    render() {
+        this.height = this.el.scrollHeight;
+        return (h(Host, { class: 'zonos--elements zonos--collapse', style: {
+                '--font-family': zonosStoreFontFamily(),
+                height: this.getElementHeight(),
+            } }, h("div", null, h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", null))));
+    }
+    get el() { return this; }
+    static get style() { return zonosCollapseCss; }
 }, [1, "zonos-collapse", {
-    "collapsed": [4],
-    "collapseSize": [2, "collapse-size"],
-    "height": [32]
-  }]);
+        "collapsed": [4],
+        "collapseSize": [2, "collapse-size"],
+        "height": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-collapse"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-collapse":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCollapse);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-collapse"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-collapse":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCollapse);
+            }
+            break;
+    } });
 }
 
 export { ZonosCollapse as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-component.js

@@ -1,44 +1,44 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 function format(first, middle, last) {
-  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+    return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
 }
 
-const zonosComponentCss = ":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}div{color:red;font-size:large}";
+const zonosComponentCss = ":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}div{color:red;font-size:large}";
 
 const ZonosComponent$1 = /*@__PURE__*/ proxyCustomElement(class ZonosComponent extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.first = '';
-    this.middle = '';
-    this.last = '';
-  }
-  getText() {
-    return format(this.first, this.middle, this.last);
-  }
-  render() {
-    return h("div", null, "Hello, World! I'm ", this.getText());
-  }
-  static get style() { return zonosComponentCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.first = '';
+        this.middle = '';
+        this.last = '';
+    }
+    getText() {
+        return format(this.first, this.middle, this.last);
+    }
+    render() {
+        return h("div", null, "Hello, World! I'm ", this.getText());
+    }
+    static get style() { return zonosComponentCss; }
 }, [1, "zonos-component", {
-    "first": [1],
-    "middle": [1],
-    "last": [1]
-  }]);
+        "first": [1],
+        "middle": [1],
+        "last": [1]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-component"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-component":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosComponent$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-component"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-component":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosComponent$1);
+            }
+            break;
+    } });
 }
 
 const ZonosComponent = ZonosComponent$1;

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

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