@zonos/elements 1.3.142 → 1.3.144

package/dist/collection/components/common/zonos-stripe-input/zonos-stripe-input.css

@@ -0,0 +1,162 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  --zonos--background-color: #f1f1f1;
+  --zonos--local-glowing-color: 0 0 0 3px hsla(0, 0%, 100%, 25%),
+    0 0 0 1px var(--zonos--primary-color);
+  --zonos--border: 1px solid #e8e8e8;
+}
+
+:host(.dark) {
+  color-scheme: dark;
+  --zonos--background-color: #30313d;
+  --zonos--local-glowing-color: 0px 2px 4px rgba(0, 0, 0, 0.5),
+    0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(0, 0%, 100%, 25%),
+    0 1px 1px 0 rgba(255, 255, 255, 0.12);
+  --zonos--border: 1px solid var(--zonos--primary-color);
+}
+
+:host {
+  margin: 1px;
+  height: calc(var(--zonos-elements-size-xl) - 2px);
+  /**disabled state */
+}
+:host .zonos--label-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  background: var(--zonos--background-color);
+  border-radius: var(--zonos--border-radius);
+  border: var(--zonos--border);
+  outline-offset: 0;
+  outline-width: 2px;
+}
+:host .zonos--floated-input {
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 16px;
+  outline: none;
+  transition: var(--zonos-elements-transition);
+  width: 100%;
+  border-radius: var(--zonos--border-radius);
+  background: var(--zonos--background-color);
+  border: var(--zonos--border);
+  order: 2;
+  font-weight: 400;
+  font-size: var(--zonos--font-size);
+}
+:host .zonos--floated-input :-internal-autofill-selected {
+  border-radius: var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6);
+}
+:host .zonos--floated-input :-internal-autofill-selected + label + div {
+  background-color: #e8f0fe;
+}
+:host .zonos--floated-input.has-label {
+  padding: 24px 4px 2px 16px;
+}
+:host .zonos--floated-input.has-label.has-input-prefix {
+  padding-left: 0;
+}
+:host .zonos--floated-input.has-label.has-input-prefix ~ .zonos--floated-label label {
+  margin-left: 0;
+}
+:host .zonos--floated-input:not(.has-label)::placeholder {
+  opacity: var(--zonos-elements-opacity-disabled);
+}
+:host .zonos--floated-input::placeholder {
+  transition: var(--zonos-elements-transition);
+  opacity: 0;
+}
+:host .zonos--floated-input:focus {
+  outline: none;
+  border: var(--zonos--border);
+}
+:host .zonos--floated-input:focus ~ .zonos--floated-label::after {
+  box-shadow: var(--zonos--glowing-color, var(--zonos--local-glowing-color));
+}
+:host .zonos--floated-input.has-error + .zonos--floated-label::after {
+  box-shadow: 0 0 0 2px #df1b41;
+}
+:host .zonos--floated-input.has-content::placeholder, :host .zonos--floated-input:focus::placeholder {
+  opacity: var(--zonos-elements-opacity-disabled);
+}
+:host .zonos--floated-input.has-content ~ .zonos--floated-label label, :host .zonos--floated-input:focus ~ .zonos--floated-label label {
+  top: 11px;
+  transform: scale(0.8);
+}
+:host .zonos--floated-input:-webkit-autofill, :host .zonos--floated-input:-moz-autofill {
+  background-color: var(--zonos-elements-input-background);
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--floated-label {
+  display: block;
+  max-height: 0;
+  pointer-events: none;
+  order: 1;
+}
+:host .zonos--floated-label label {
+  color: var(--zonos-elements-gray-800);
+  position: absolute;
+  font-size: 16px;
+  line-height: 16px;
+  display: inline-block;
+  filter: blur(0);
+  transform-origin: left top;
+  transition: var(--zonos-elements-transition);
+  margin-left: 16px;
+  top: calc(50% - 8px);
+  z-index: 1;
+}
+:host .zonos--floated-label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--zonos--border-radius);
+}
+:host .disabled .zonos--floated-label {
+  pointer-events: inherit;
+}
+:host .disabled .zonos--floated-label::after {
+  cursor: not-allowed;
+  z-index: 1;
+}
+
+:host(.dark) .zonos--label-wrapper {
+  background: #30313d;
+}

package/dist/collection/components/common/zonos-stripe-input/zonos-stripe-input.js

@@ -0,0 +1,264 @@
+import { h, Host, } from "@stencil/core";
+import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isDarkColor } from "../../utils/isDarkColor";
+/**
+ * This component is input that has similar style to Stripe since we will use it with other Stripe elements when we don't want to use Link authentication element
+ */
+export class ZonosStripeInput {
+    constructor() {
+        this.inputValue = '';
+        this.inputLabel = undefined;
+        this.overridePrimaryColor = undefined;
+        this.overrideSecondaryColor = undefined;
+        this.isDisabled = false;
+        this.isError = false;
+        this.inputPlaceholder = '';
+        this.value = '';
+        this.internalValue = this.inputValue;
+    }
+    onInputValueChange(newValue) {
+        this.internalValue = newValue;
+        this.inputChange.emit(newValue);
+        this.value = newValue;
+    }
+    onValueChange(newValue) {
+        this.internalValue = newValue;
+    }
+    render() {
+        const primaryColor = this.overridePrimaryColor || zonosStore.appearance.colorPrimary;
+        const secondaryColor = this.overrideSecondaryColor || zonosStore.appearance.colorSecondary;
+        const isDark = primaryColor && isDarkColor(primaryColor);
+        const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
+        return (h(Host, { key: 'd78f2aee99ac4e6d95cf1628e058e6d3bb70e309', class: classes([
+                'zonos--input zonos--elements',
+                isDark && 'dark',
+                this.isError && 'has-error',
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: {
+                '--zonos--border-radius': getBorderRadius(),
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--font-size': `${fontSize}px`,
+                '--zonos--primary-color': secondaryColor,
+            } }, h("div", { key: 'a3e7f765b0081a564c5955e387ff4b521a28d1a5', class: classes([
+                'zonos--label-wrapper',
+                this.isDisabled && 'disabled',
+            ]) }, h("input", { key: '999a54381e24e5da6f2a5fd9cde56c4fa87d37b1', class: classes([
+                'zonos--floated-input',
+                !!this.inputLabel && 'has-label',
+                this.internalValue && 'has-content',
+                this.isError && 'has-error',
+            ]), disabled: this.isDisabled, id: "zonos--input", onInput: e => {
+                const input = e.target;
+                this.inputChange.emit(input.value);
+                this.el.inputValue = input.value;
+                this.el.dispatchEvent(new Event('change'));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.internalValue }), h("div", { key: '251f9bfc2399e47f2a4dad359d2511400ec10b41', class: "zonos--floated-label" }, h("label", { key: 'eb23eea3a74af98c7439294621a4caf282fdbbb1', htmlFor: "zonos--input" }, this.inputLabel)))));
+    }
+    static get is() { return "zonos-stripe-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-stripe-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-stripe-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the stripeInput"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-label",
+                "reflect": false
+            },
+            "overridePrimaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary color to override primary color from appearance primary color in setting."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-primary-color",
+                "reflect": false
+            },
+            "overrideSecondaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary color to override secondary color from appearance secondary color in setting"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-secondary-color",
+                "reflect": false
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputChange",
+                "name": "inputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when input value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "inputValue",
+                "methodName": "onInputValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}

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

@@ -105,6 +105,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "The icon element to display"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "text-color",
                 "reflect": false,
                 "defaultValue": "'gray-1000'"
@@ -129,6 +131,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "The size of the text"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false
             },
@@ -152,6 +156,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "Type of the text to display"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'body'"
@@ -176,6 +182,8 @@ export class ZonosText {
                     "tags": [],
                     "text": "The weight of the text"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "weight",
                 "reflect": false
             }

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

@@ -7,9 +7,9 @@ export class ZonosToggle {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '318787cdd63c418c3ff8c3090a56485c7746a225', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: '01958140c90fdadecbfca64fe65dbf1132af2cc1', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'f91f378b5f3b0114ccec5972fb93fd17093bb016', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: '5362589929c25b5ba897d23a308f6dd2759c4ac0', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);
@@ -50,6 +50,8 @@ export class ZonosToggle {
                     "tags": [],
                     "text": "Options for the toggle"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "value": {
@@ -66,6 +68,8 @@ export class ZonosToggle {
                     "tags": [],
                     "text": "The selected option"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '7ddbd67ee8737db3bb449e4b0e3bb7aa201750e8', class: "zonos--elements" }, h("div", { key: 'd1389e596398fef4610e2682a06f9025bb3cb755', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '33cb09297417473b1c609258007dcdb600aba5ab' }), h("div", { key: 'dd02d87b040708d7998a3a5ca7be217c37a35625', class: classes([
+        return (h(Host, { key: 'fa16c20a254958721bcc44dbe96f6588545e86f0', class: "zonos--elements" }, h("div", { key: '0e57607df02b12d5df9fb84b64c8345b40b2e823', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '9faf457a730046b789a5b822fb6ab89d88970d59' }), h("div", { key: 'f85dbf49e172f9a1c1b57443b1ea22d819b4099c', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '8252086536ddf4e91547c5c9c26042bfe5e2d7b2', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'b795a982ba2ea7f0388aa578168021cf32ef5f95', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '6e90bfe3f346cbe5d49aab4e03c868b3138aeca7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1c10f75f13ae427737fcf4ece41b9f7ba13fb76d', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -40,6 +40,8 @@ export class ZonosTooltip {
                     "tags": [],
                     "text": "The title of the tooltip"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -58,6 +60,8 @@ export class ZonosTooltip {
                     "tags": [],
                     "text": "The subtitle of the tooltip"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subtitle",
                 "reflect": false,
                 "defaultValue": "''"

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '4d2a0ea6c3c427e04bb9bca7ac0d035bd2c7143e', style: {
+        return (h(Host, { key: '32154740511a038c4ca04ad55bc7d77d96496654', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6ea72ff37210b0d719fd15506bd78810658d59ac', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'fa0abf999f3737852cb181b7678a89ce6b52a471' }))));
+            } }, h("div", { key: 'f80f8b0e51554a3db9efa960706ac9bb450155cb', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '711a207eb1b4c59672be4df8b19a3c7200d44f29' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -48,6 +48,8 @@ export class VStack {
                         }],
                     "text": "The spacing between elements in the stack"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spacing",
                 "reflect": false,
                 "defaultValue": "24"

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -56,12 +56,12 @@ export class ZonosVirtualScroll {
                 } }, this.renderItem(i)));
             accHeight += itemHeight;
         }
-        return (h(Host, { key: 'c09f341c0436d53ad245f0dc4ed54d5ead9a0e39' }, h("div", { key: 'e7f9cbb0dd33d0fab1bffd01672e9f5a3bc11f04',
+        return (h(Host, { key: '0f132a5b60586fb22d1d5536aa7abef6199e0748' }, h("div", { key: 'a947229cd3d53b79312855cf8ddf8c9985035e1e',
             // to capture scroll action
             class: "scroller", style: {
                 height: `${this.totalHeight}px`,
                 width: `${W}px`,
-            } }), h("div", { key: '93071acbc731dda4e9a1f453aa76526cd1639191',
+            } }), h("div", { key: '63013fe7bc53d76152fda74e7b6ef054e7c3a9ef',
             // to display items
             class: "item-container", ref: el => (this.container = el), style: {
                 height: `${this.totalHeight}px`,
@@ -104,7 +104,9 @@ export class ZonosVirtualScroll {
                 "docs": {
                     "tags": [],
                     "text": "Render item"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "itemWidth": {
                 "type": "number",
@@ -120,6 +122,8 @@ export class ZonosVirtualScroll {
                     "tags": [],
                     "text": "Width of each item"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "item-width",
                 "reflect": false
             },
@@ -137,6 +141,8 @@ export class ZonosVirtualScroll {
                     "tags": [],
                     "text": "Height that is used as a fallback if height is not provided"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fallback-item-height",
                 "reflect": false
             },
@@ -153,7 +159,9 @@ export class ZonosVirtualScroll {
                 "docs": {
                     "tags": [],
                     "text": "Heights list of each item"
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '564c34a7a93a16b8e619a0e140f8d99fabc91c34' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '63b0c771133fd495f36e2c67601d64d6e56f5f2b' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }
@@ -40,6 +40,8 @@ export class ZonosComponent {
                     "tags": [],
                     "text": "The first name"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "first",
                 "reflect": false,
                 "defaultValue": "''"
@@ -58,6 +60,8 @@ export class ZonosComponent {
                     "tags": [],
                     "text": "The middle name"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "middle",
                 "reflect": false,
                 "defaultValue": "''"
@@ -76,6 +80,8 @@ export class ZonosComponent {
                     "tags": [],
                     "text": "The last name"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "last",
                 "reflect": false,
                 "defaultValue": "''"

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

@@ -423,6 +423,8 @@ export class ZonosHello {
                         }],
                     "text": "Force mobile styling instead of media query and use the passed location value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile-location-override",
                 "reflect": false
             },
@@ -443,6 +445,8 @@ export class ZonosHello {
                         }],
                     "text": "Force left animation instead of detecting which side has more space"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animate-from-left-override",
                 "reflect": false
             },
@@ -469,7 +473,9 @@ export class ZonosHello {
                 "docs": {
                     "tags": [],
                     "text": "Override the appearance settings"
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }