@zonos/elements 1.3.184 → 1.3.185

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

@@ -49,20 +49,19 @@
 
 :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;
+  height: calc(var(--zonos-elements-size-xl) - 2px);
 }
 :host .zonos--floated-input {
   box-sizing: border-box;
@@ -107,7 +106,7 @@
 :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 {
+: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 {

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

@@ -1,21 +1,32 @@
 import { h, Host, } from "@stencil/core";
 import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
+import { inheritAriaAttributes, inheritAttributes, } from "../../utils/checkout/form/helpers";
 import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { isDarkColor } from "../../utils/isDarkColor";
+let inputId = 0;
 /**
  * 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() {
+        /**
+         * Inherited attributes from the host element
+         */
+        this.inheritedAttributes = {};
+        this.inputId = `zonos--input-${++inputId}`;
+        this.name = undefined;
+        this.autoComplete = undefined;
         this.inputValue = '';
         this.inputLabel = undefined;
         this.overridePrimaryColor = undefined;
         this.overrideSecondaryColor = undefined;
         this.isDisabled = false;
         this.isError = false;
+        this.error = '';
         this.inputPlaceholder = '';
         this.value = '';
+        this.required = false;
         this.internalValue = this.inputValue;
     }
     onInputValueChange(newValue) {
@@ -26,37 +37,45 @@ export class ZonosStripeInput {
     onValueChange(newValue) {
         this.internalValue = newValue;
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, [
+            'tabindex',
+            'title',
+            'data-form-type',
+            'dir',
+        ]));
+    }
     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([
+        return (h(Host, { key: 'e6fbf3c60f08e70e9523f4d9fd38c757512af919', class: classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
-                this.isError && 'has-error',
+                (this.isError || !!this.error) && '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([
+            } }, h("div", { key: '0c10d623ec27ac18a321e2675e18cbb98224fe54', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '181c5230ddeb02e9cea646b7f0a8efa3a530796e', class: classes([
+            ]) }, h("input", Object.assign({ key: '8eb4653690896a81ee5436303b8555c07038a579' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
-                this.isError && 'has-error',
-            ]), disabled: this.isDisabled, id: "zonos--input", onChange: e => {
+                (this.isError || !!this.error) && 'has-error',
+            ]), disabled: this.isDisabled, id: this.inputId, name: this.name, 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: 'ac6e97971905ba130c3533da6a409de60f99ed6d', class: "zonos--floated-label" }, h("label", { key: '1643ab4ef5b9449332351c854f8e43db8d192164', htmlFor: "zonos--input" }, this.inputLabel)))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '7388dd7c3ca24bd1a40246215fa9b51c76ab519f', class: "zonos--floated-label" }, h("label", { key: 'c975933f597d145c8b9edbeb9ac417603922de9a', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: 'ca6d5471d2133fe574a916cd10d32bfef7faa0b8', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-input"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["zonos-stripe-input.scss"]
@@ -69,6 +88,44 @@ export class ZonosStripeInput {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Autocomplete attribute for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-complete",
+                "reflect": false
+            },
             "inputValue": {
                 "type": "string",
                 "mutable": false,
@@ -186,6 +243,26 @@ export class ZonosStripeInput {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "inputPlaceholder": {
                 "type": "string",
                 "mutable": false,
@@ -225,6 +302,26 @@ export class ZonosStripeInput {
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/common/zonos-stripe-phone-input/assets/ChevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

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

@@ -0,0 +1,222 @@
+: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;
+  margin: 1px;
+  position: relative;
+  display: block;
+}
+
+:host(.dark),
+:host([data-theme=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 {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+  width: 100%;
+}
+:host .zonos--label-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  height: calc(var(--zonos-elements-size-xl) - 2px);
+  background: var(--zonos--background-color);
+  border-radius: var(--zonos--border-radius);
+  border: var(--zonos--border);
+  outline-offset: 0;
+  outline-width: 2px;
+  overflow: visible;
+}
+:host .zonos--label-wrapper .zonos--select {
+  position: absolute;
+  opacity: 0;
+  inset: 0;
+  width: 100%;
+  cursor: pointer;
+}
+:host .zonos--label-wrapper .zonos--input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+:host .zonos--label-wrapper.focused::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--zonos--border-radius);
+  box-shadow: var(--zonos--glowing-color, var(--zonos--local-glowing-color));
+  pointer-events: none;
+}
+:host .zonos--label-wrapper.has-error::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--zonos--border-radius);
+  box-shadow: 0 0 0 2px #df1b41;
+  pointer-events: none;
+}
+:host .zonos--label-wrapper.disabled {
+  opacity: var(--zonos-elements-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+:host .zonos--select-wrapper {
+  flex: 0 0 auto;
+  width: auto;
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+:host .zonos--select-wrapper:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+:host .zonos--input-container {
+  flex: 1;
+  position: relative;
+  z-index: 2;
+  pointer-events: all;
+}
+:host .zonos--input-container.has-label .zonos--floated-input {
+  padding: 24px 12px 2px;
+}
+:host .zonos--floated-input {
+  background: transparent;
+  border: none;
+  width: 100%;
+  height: 100%;
+  padding: 0 12px;
+  font-size: var(--zonos--font-size);
+  color: var(--zonos-elements-text-color);
+  outline: none;
+  box-sizing: border-box;
+}
+:host .zonos--floated-input:disabled {
+  cursor: not-allowed;
+}
+:host .zonos--floated-input::placeholder {
+  opacity: 0;
+  transition: var(--zonos-elements-transition);
+}
+:host .zonos--floated-input:focus::placeholder {
+  opacity: var(--zonos-elements-opacity-disabled);
+}
+:host .zonos--floated-label {
+  display: block;
+  max-height: 0;
+  pointer-events: none;
+}
+: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);
+  left: 12px;
+  top: calc(50% - 8px);
+  z-index: 1;
+}
+:host .has-content .zonos--input-container .zonos--floated-label label,
+:host .focused .zonos--input-container .zonos--floated-label label {
+  top: 11px;
+  transform: scale(0.8);
+}
+
+.zonos--country-select {
+  position: relative;
+  height: 100%;
+}
+.zonos--country-select .zonos--country-select-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  height: 100%;
+  z-index: 1;
+}
+.zonos--country-select .zonos--country-select-selected {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.zonos--country-select .zonos--select-chevron-wrapper {
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+}
+.zonos--country-select .zonos--select-chevron-wrapper .zonos--select-chevron {
+  pointer-events: none;
+  color: var(--zonos-elements-gray-800);
+  padding-left: 4px;
+}
+.zonos--country-select .zonos--country-flag-wrapper {
+  display: flex;
+  align-items: center;
+}
+.zonos--country-select .zonos--country-flag {
+  border-radius: var(--zonos-elements-radius-4);
+  width: 20px;
+  height: 16px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--zonos-elements-v3-shadow-medium);
+}
+.zonos--country-select .zonos--country-code {
+  font-size: var(--zonos--font-size);
+  color: var(--zonos-elements-text-color);
+}