q2-tecton-elements 1.23.0 → 1.25.0

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

@@ -1,5 +1,5 @@
 import { h, Fragment } from '@stencil/core';
-import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement, } from 'src/utils';
+import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement, isMobile, } from 'src/utils';
 import formatCurrency from './formatting/currency';
 import formatPhoneNumber from './formatting/phone';
 import formatSSN from './formatting/ssn';
@@ -12,15 +12,20 @@ import formatCreditCard from './formatting/credit-card';
 export class Q2Input {
   constructor() {
     this.scheduledAfterRender = [];
+    this.isMobile = isMobile();
     this.guid = createGuid();
     ///// ACTIONS ////////
     this.onToggleVisibility = () => {
       this.textHidden = !this.textHidden;
     };
+    this.onInputClick = () => {
+      if (this.shouldCursorStayAtEnd)
+        this.placeCursorAtEnd();
+    };
     this.onInputFocus = () => {
-      this.scheduledAfterRender.push(() => {
-        this.setCursorPosition(this.calculateCursorPositionOnFocus());
-      });
+      this.scheduledAfterRender.push(() => this.shouldCursorStayAtEnd
+        ? this.placeCursorAtEnd()
+        : this.setCursorPosition(this.calculateCursorPositionOnFocus()));
       this.hasFocus = true;
       setMessageHeight(this);
       this.valueOnFocus = this.value;
@@ -47,7 +52,11 @@ export class Q2Input {
       }
     };
     this.onInputKeydown = (event) => {
-      if (event.key === 'Enter' && this.valueOnFocus !== this.formattedValueObject.value) {
+      const keysThatMoveCursor = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+      const { key } = event;
+      if (this.shouldCursorStayAtEnd && keysThatMoveCursor.includes(key))
+        event.preventDefault();
+      if (key === 'Enter' && this.valueOnFocus !== this.formattedValueObject.value) {
         this.valueOnFocus = this.formattedValueObject.value;
         this.change.emit(Object.assign({ value: this.formattedValueObject.value, formattedValue: this.formattedValueObject.fullyFormattedValue, minFormattedLength: this.formattedValueObject.minFormattedLength }, (this.formattedValueObject.type && { type: this.formattedValueObject.type })));
       }
@@ -149,6 +158,9 @@ export class Q2Input {
   get canClear() {
     return this.clearable && !!this.value;
   }
+  get shouldCursorStayAtEnd() {
+    return this.isMobile && this.type === 'currency';
+  }
   get hasError() {
     return Array.isArray(this.errors) && this.errors.length > 0;
   }
@@ -221,16 +233,16 @@ export class Q2Input {
       search: 'search',
       url: 'url',
       email: 'email',
-      currency: 'tel',
+      currency: 'text',
       phone: 'tel',
-      ssn: 'tel',
+      ssn: 'text',
       alphanumeric: 'text',
       alpha: 'text',
-      numeric: 'tel',
-      percentage: 'tel',
-      postal: 'tel',
-      date: 'tel',
-      'credit-card': 'tel',
+      numeric: 'text',
+      percentage: 'text',
+      postal: 'text',
+      date: 'text',
+      'credit-card': 'text',
     };
     if (['password', 'text', 'ssn'].includes(this.type) && this.textHidden) {
       return 'password';
@@ -240,7 +252,7 @@ export class Q2Input {
     }
   }
   get computedAutocomplete() {
-    // force off for currenty type
+    // force off for currency type
     if (this.type === 'currency')
       return 'transaction-amount';
     return this.autocomplete || 'off';
@@ -283,6 +295,18 @@ export class Q2Input {
       this.inputField.value = this.formattedValueObject.formattedValue;
     }
   }
+  get inputMode() {
+    const inputModeMap = {
+      currency: 'numeric',
+      ssn: 'numeric',
+      numeric: 'decimal',
+      percentage: 'decimal',
+      postal: 'numeric',
+      date: 'numeric',
+      'credit-card': 'numeric',
+    };
+    return (this.type && inputModeMap[this.type]) || undefined;
+  }
   //////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -347,7 +371,7 @@ export class Q2Input {
     const inputClasses = ['input-field'];
     if (hasCustomDisplaySlot)
       inputClasses.push('sr');
-    return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })));
+    return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode })));
   }
   /* tslint:enable:cyclomatic-complexity */
   pseudoInputDOM() {
@@ -361,6 +385,10 @@ export class Q2Input {
     }
     return (h("div", { class: "pseudo-input-container" }, h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": this.ariaExpanded === 'true' ? 'true' : undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}${ariaLabelSuffix}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" }, h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))))));
   }
+  placeCursorAtEnd() {
+    const { inputField } = this;
+    inputField.selectionStart = inputField.selectionEnd = inputField.value.length;
+  }
   calculateCursorPositionOnInput() {
     const input = this.inputField;
     const formattedLength = this.formattedValueObject.formattedValue.length;
@@ -374,9 +402,10 @@ export class Q2Input {
     };
   }
   calculateCursorPositionOnFocus() {
-    const input = this.inputField;
-    const valueLength = input && input.value ? input.value.length : 0;
-    const startingPosition = (input && input.selectionStart) || valueLength;
+    var _a, _b, _c;
+    const { inputField } = this;
+    const valueLength = (_b = (_a = inputField === null || inputField === void 0 ? void 0 : inputField.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    const startingPosition = (_c = inputField === null || inputField === void 0 ? void 0 : inputField.selectionStart) !== null && _c !== void 0 ? _c : valueLength;
     return {
       startingPosition,
       valueLength,

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

@@ -147,7 +147,7 @@ export class Q2Loading {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

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

@@ -76,6 +76,6 @@ button {
   font-weight: var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));
   text-transform: var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));
   position: sticky;
-  top: var(--comp-multi-select-header-height, 0);
-  z-index: 1;
+  top: calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));
+  z-index: 5;
 }

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

@@ -2,17 +2,14 @@ import { h, Host } from '@stencil/core';
 export class Q2Option {
   constructor() {
     this.role = 'option';
-    this.tabindex = '-1';
     this.display = undefined;
     this.value = undefined;
     this.disabled = undefined;
-    this.optionId = undefined;
     this.disabledGroup = undefined;
     this.selected = undefined;
     this.hidden = undefined;
     this.multiline = undefined;
     this.active = undefined;
-    this.noSelect = undefined;
     this._multiSelectHidden = false;
   }
   componentWillLoad() {
@@ -26,7 +23,7 @@ export class Q2Option {
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
-    return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
+    return (h(Host, { tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
   }
   static get is() { return "q2-option"; }
   static get encapsulation() { return "shadow"; }
@@ -46,8 +43,8 @@ export class Q2Option {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'option' | 'menuitem'",
+          "resolved": "\"menuitem\" | \"option\"",
           "references": {}
         },
         "required": false,
@@ -60,24 +57,6 @@ export class Q2Option {
         "reflect": true,
         "defaultValue": "'option'"
       },
-      "tabindex": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tabindex",
-        "reflect": true,
-        "defaultValue": "'-1'"
-      },
       "display": {
         "type": "string",
         "mutable": true,
@@ -129,23 +108,6 @@ export class Q2Option {
         "attribute": "disabled",
         "reflect": true
       },
-      "optionId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "option-id",
-        "reflect": true
-      },
       "disabledGroup": {
         "type": "boolean",
         "mutable": false,
@@ -231,23 +193,6 @@ export class Q2Option {
         "attribute": "active",
         "reflect": true
       },
-      "noSelect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "_no-select",
-        "reflect": true
-      },
       "_multiSelectHidden": {
         "type": "boolean",
         "mutable": false,

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

@@ -78,6 +78,13 @@ button {
   gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 
+:host(:focus),
+:host(:hover),
+:host([active]) {
+  position: relative;
+  z-index: 1;
+}
+
 :host([multiline]) {
   --comp-padding: var(--app-scale-2, 10px) var(--app-scale-2, 10px);
   --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px));