q2-tecton-elements 1.10.6 → 1.10.9

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"]