q2-tecton-elements 1.10.4 → 1.10.7

package/dist/collection/components/q2-icon/icons.js

@@ -1221,6 +1221,13 @@ const icons = {
       h("path", { d: "M19.6 8.133H24v11h-2.933V22.8l-5.134-3.667h-4.4", class: "stroke-secondary" }),
       h("path", { d: "M19.6 3H2v12.467h3.667V20.6l5.866-5.133H19.6z", class: "stroke-primary filled" })))
   },
+  'chat-question': {
+    markup: () => (h("g", null,
+      h("path", { d: "M21.295 17.534c1.587-1.55 2.525-3.534 2.525-5.698 0-4.905-4.833-8.656-10.82-8.656S2.18 6.931 2.18 11.836c0 4.905 4.833 8.836 10.82 8.836 1.046 0 2.056-.144 3.03-.36l5.626 2.344-.36-5.122z", class: "stroke-primary filled" }),
+      h("g", { class: "stroke-secondary", transform: "translate(10.5 7.5)" },
+        h("circle", { cx: "2.375", cy: "8.875", r: "1" }),
+        h("path", { d: "M0 1.5C.39.625 1.328 0 2.396 0 3.828 0 5 1.125 5 2.5S3.828 5 2.396 5v1.5" }))))
+  },
   'chat-bubbles': {
     markup: () => (h("g", null,
       h("path", { d: "M11.197 19.46c1.338.916 3.107 1.474 5.049 1.474a9.7 9.7 0 0 0 2.471-.32l2.939 1.763v-3.178c1.337-1.04 2.164-2.464 2.164-4.035 0-.766-.197-1.496-.553-2.164", class: "stroke-secondary" }),
@@ -1264,6 +1271,18 @@ const icons = {
   'checkmark-outline': {
     markup: () => (h("path", { d: "M9.912 21.175l-7.719-7.719 3.088-3.088L9.912 15 20.719 4.193l3.088 3.088z", class: "stroke-primary filled" }))
   },
+  'chevron-double-right': {
+    markup: () => (h("g", { class: "chevron-double-right" },
+      h("g", { class: "stroke-primary" },
+        h("path", { d: "M12 2l11 11-11 11" }),
+        h("path", { d: "M3 2l11 11L3 24" }))))
+  },
+  'chevron-double-left': {
+    markup: () => (h("g", { class: "chevron-double-left" },
+      h("g", { class: "stroke-primary" },
+        h("path", { d: "M14 24L3 13 14 2" }),
+        h("path", { d: "M23 24L12 13 23 2" }))))
+  },
   'chevron-down': {
     markup: () => h("path", { d: "M24 8L13 19 2 8", class: "stroke-primary" })
   },
@@ -1357,6 +1376,15 @@ const icons = {
       h("path", { class: "stroke-primary", d: "M6.2 2.2l7.2 9.6 7.2-9.6m-7.2 9.6v12" }),
       h("path", { class: "stroke-secondary", d: "M7 12.2h12.8M7 17h12.8" })))
   },
+  dashboard: {
+    markup: () => (h("g", { class: "dashboard" },
+      h("path", { d: "M0 0h26v26H0z" }),
+      h("g", { class: "stroke-primary filled" },
+        h("path", { d: "M3 3h9v12H3z" }),
+        h("path", { d: "M3 18h9v5H3z" }),
+        h("path", { d: "M14.5 3h9v7h-9z" }),
+        h("path", { d: "M14.5 13h9v10h-9z" }))))
+  },
   desktop: {
     markup: () => (h("g", null,
       h("path", { class: "stroke-primary", d: "M22.377 19.77H3.623a1.443 1.443 0 0 1-1.443-1.442V4.623c0-.797.646-1.443 1.443-1.443h18.754c.796 0 1.442.646 1.442 1.443v13.705c0 .796-.646 1.442-1.442 1.442zM2.18 15.442h21.64" }),
@@ -1370,6 +1398,13 @@ const icons = {
         h("path", { d: "M6.387 5.677v6.417l-2.839-1.449-2.838 1.42V5.677" }),
         h("circle", { cx: "3.548", cy: "3.548", r: "3.548" }))))
   },
+  divider: {
+    markup: () => (h("g", { class: "divider" },
+      h("g", { class: "stroke-primary" },
+        h("path", { d: "M3 5h20v5H3z" }),
+        h("path", { d: "M3 17h20v5H3z" })),
+      h("path", { d: "M2 13.5h22", class: "stroke-secondary" })))
+  },
   document: {
     markup: () => (h("g", null,
       h("path", { d: "M15.733 2H4v22h17.6V7.867z", class: "stroke-primary" }),
@@ -1827,6 +1862,11 @@ const icons = {
       h("path", { d: "M21.492 18.552c-.473 1.03-.7 1.49-1.31 2.399-.849 1.27-2.047 2.852-3.532 2.865-1.319.013-1.658-.842-3.448-.832-1.79.01-2.164.848-3.483.836-1.485-.014-2.62-1.442-3.47-2.713-2.376-3.552-2.624-7.721-1.159-9.937 1.042-1.576 2.686-2.497 4.23-2.497 1.574 0 2.563.847 3.864.847 1.262 0 2.031-.848 3.85-.848 1.375 0 2.832.735 3.87 2.005-3.401 1.83-2.848 6.6.588 7.875z", class: "stroke-primary" }),
       h("path", { d: "M16.125 5.587c.69-.884 1.211-2.131 1.022-3.407-1.125.077-2.44.793-3.208 1.726-.698.846-1.274 2.102-1.05 3.322 1.228.039 2.498-.695 3.236-1.641z", class: "stroke-secondary" })))
   },
+  key: {
+    markup: () => (h("g", null,
+      h("path", { d: "M18.455 3l-7.486 7.485a6.32 6.32 0 0 0-1.605-.212 6.364 6.364 0 1 0 6.363 6.363c0-.81-.157-1.581-.432-2.294l2.25-2.251V9.364h2.728L23 6.636V3h-4.545z", class: "stroke-primary filled" }),
+      h("circle", { cx: "9.364", cy: "16.636", r: "1.818", class: "stroke-secondary" })))
+  },
   laptop: {
     markup: () => (h("g", null,
       h("path", { class: "stroke-primary", d: "M4.344 15.721V5.623c0-.797.646-1.443 1.443-1.443h14.426c.797 0 1.442.646 1.442 1.443V15.72m-9.377-9.376h1.443" }),
@@ -1930,7 +1970,10 @@ const icons = {
     markup: () => (h("path", { d: "M24 12.345L14.517 4v4.931C8.443 8.931 2 10.751 2 21.448c2.781-3.793 5.043-4.93 12.517-4.93v4.93L24 12.345z", class: "stroke-primary" }))
   },
   'message-reply': {
-    markup: () => (h("path", { d: "M2 12.345L11.483 4v4.931C17.557 8.931 24 10.751 24 21.448c-2.781-3.793-5.043-4.93-12.517-4.93v4.93L2 12.345z", class: "stroke-primary" }))
+    markup: () => (h("path", { d: "M2 12.345L11.483 4v4.931C17.557 8.931 24 10.751 24 21.448c-2.781-3.793-5.043-4.93-12.517-4.93v4.93L2 12.345z", class: "stroke-primary filled" }))
+  },
+  'message-response': {
+    markup: () => (h("path", { d: "M24 12.345L14.517 4v4.931C7.043 8.931 4.661 7.598 2 4c0 11.14 7.006 12.517 12.517 12.517v4.931L24 12.345z", class: "stroke-primary filled" }))
   },
   'mobile-button': {
     markup: () => (h("g", null,
@@ -2785,6 +2828,15 @@ const icons = {
         h("path", { d: "M5.71 5.71l8.129 8.129M3 7.065l6.774 6.774m6.774-8.129l6.775 6.774M12.484 5.71l8.129 8.129" }),
         h("path", { d: "M3 5.71h20.323v8.129H3z", class: "filled" }))))
   },
+  section: {
+    markup: () => (h("g", { class: "Icons/actions/section" },
+      h("g", { class: "stroke-primary" },
+        h("path", { d: "M2 2h22v22H2z", class: "filled" }),
+        h("path", { d: "M5 6h13v2H5zm0 6h7v3H5z" }),
+        h("path", { d: "M5 18h7v3H5z" }),
+        h("path", { d: "M14 12h7v3h-7z" }),
+        h("path", { d: "M14 18h7v3h-7z" }))))
+  },
   'sign-closed': {
     markup: () => (h("g", null,
       h("g", { "stroke-width": "1.5", class: "stroke-primary", transform: "translate(7.773 3.318)" },
@@ -2853,6 +2905,14 @@ const icons = {
         h("path", { d: "M13 19V2.867m5.866 5.866L13 2.867 7.133 8.733" })),
       h("path", { d: "M2 19.233v4.4h22v-4.4", class: "stroke-primary" })))
   },
+  'venmo-colored': {
+    markup: () => (h("g", { class: "venmo-colored" },
+      h("path", { d: "M20.9876187,3 C21.6854112,4.15247726 22,5.33953062 22,6.83902303 C22,11.6216335 17.9173318,17.8345841 14.6037582,22.197265 L7.03535243,22.197265 L4,4.04713657 L10.6269682,3.41795887 L12.2318013,16.3329419 C13.7312937,13.8900412 15.5817425,10.0510182 15.5817425,7.43362462 C15.5817425,6.00095547 15.3363059,5.02512093 14.952744,4.22162948 L20.9876187,3 Z", id: "Path", fill: "#3D95CE", "fill-rule": "nonzero" })))
+  },
+  'venmo-filled': {
+    markup: () => (h("g", { class: "venmo-filled" },
+      h("path", { d: "M20.988 3C21.685 4.152 22 5.34 22 6.839c0 4.783-4.083 10.996-7.396 15.358H7.035L4 4.047l6.627-.629 1.605 12.915c1.5-2.443 3.35-6.282 3.35-8.9 0-1.432-.246-2.408-.63-3.211L20.989 3z", class: "filled" })))
+  },
   virus: {
     markup: () => (h("g", null,
       h("g", { class: "stroke-secondary", transform: "translate(8.742 8.742)" },

package/dist/collection/components/q2-icon/styles.css

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  font-family: inherit;
+  font-size: inherit;
 }
 
 :host(.sr),
 :host(.sr) button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .sr,
 .sr button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 :host {

package/dist/collection/components/q2-input/index.js

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, State, Event, h, Watch, Listen } from '@stencil/core';
-import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel } from 'src/utils';
+import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';
 import formatCurrency from './formatting/currency';
 import formatPhoneNumber from './formatting/phone';
 import formatSSN from './formatting/ssn';
@@ -73,14 +73,15 @@ export class Q2Input {
     }
     this.formattedValueObject = this.getFormattedValue(this.stringValue, true);
     handleAriaLabel(this);
+    if (this.textHidden === undefined) {
+      this.textHidden = this.type === 'password';
+    }
   }
   componentDidLoad() {
     if (!this.pseudo) {
       this.inputField.value = this.formattedValueObject.formattedValue;
     }
-    if (this.textHidden === undefined) {
-      this.textHidden = this.type === 'password';
-    }
+    overrideFocus(this.hostElement);
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
@@ -246,9 +247,10 @@ export class Q2Input {
     this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
   }
   ///////// HOST ELEMENT EVENTS //////
-  onHostElementFocus() {
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
     this.inputField.focus();
-    this.inputField.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
   }
   onHostElementChange(event) {
     if (event.target === this.hostElement && !this.hostElement.onchange) {
@@ -345,7 +347,7 @@ export class Q2Input {
   static get is() { return "q2-input"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]