q2-tecton-elements 1.25.2 → 1.26.0

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

@@ -2,7 +2,7 @@ import { h } from '@stencil/core';
 import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Checkbox {
   constructor() {
-    this.id = `checkbox-${createGuid()}`;
+    this._id = `checkbox-${createGuid()}`;
     ///// Actions ////////
     this.onInputClick = (event) => {
       const hasCustomHandler = !!this.hostElement.onchange;
@@ -24,16 +24,16 @@ export class Q2Checkbox {
     this.type = undefined;
     this.label = undefined;
     this.hideLabel = undefined;
-    this.ariaLabel = undefined;
     this.indeterminate = undefined;
     this.disabled = undefined;
     this.readonly = undefined;
     this.value = undefined;
     this.name = undefined;
-    this.hasError = undefined;
     this.groupDisabled = undefined;
     this.alignment = undefined;
     this.description = undefined;
+    this.hasError = undefined;
+    this.ariaLabel = undefined;
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -63,7 +63,7 @@ export class Q2Checkbox {
     const textLabelClasses = ['label-text'];
     if (this.hideLabel)
       textLabelClasses.push('sr');
-    return (h("div", { class: "container" }, h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }), h("label", { htmlFor: this.id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { class: textLabelClasses.join(' ') }, h("label", { "test-id": "checkboxLabel", htmlFor: this.id }, loc(this.label), h("slot", null))), this.description && (h("div", { class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+    return (h("div", { class: "container" }, h("input", { ref: el => (this.inputElement = el), id: this._id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this._id, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }), h("label", { htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { class: textLabelClasses.join(' ') }, h("label", { "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", null))), this.description && (h("div", { class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
   }
   generateCheckboxSVG() {
     if (this.type === 'favorite') {
@@ -119,8 +119,8 @@ export class Q2Checkbox {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'favorite' | 'toggle'",
+          "resolved": "\"favorite\" | \"toggle\"",
           "references": {}
         },
         "required": false,
@@ -166,23 +166,6 @@ export class Q2Checkbox {
         "attribute": "hide-label",
         "reflect": true
       },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": true
-      },
       "indeterminate": {
         "type": "boolean",
         "mutable": false,
@@ -268,7 +251,7 @@ export class Q2Checkbox {
         "attribute": "name",
         "reflect": true
       },
-      "hasError": {
+      "groupDisabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -282,15 +265,15 @@ export class Q2Checkbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "has-error",
+        "attribute": "group-disabled",
         "reflect": true
       },
-      "groupDisabled": {
-        "type": "boolean",
+      "alignment": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -299,10 +282,10 @@ export class Q2Checkbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "group-disabled",
+        "attribute": "alignment",
         "reflect": true
       },
-      "alignment": {
+      "description": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -316,12 +299,32 @@ export class Q2Checkbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "alignment",
+        "attribute": "description",
         "reflect": true
       },
-      "description": {
-        "type": "string",
+      "hasError": {
+        "type": "boolean",
         "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "has-error",
+        "reflect": true
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -330,10 +333,13 @@ export class Q2Checkbox {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
           "text": ""
         },
-        "attribute": "description",
+        "attribute": "aria-label",
         "reflect": true
       }
     };

package/dist/collection/components/q2-checkbox-group/index.js

@@ -2,7 +2,7 @@ import { h } from '@stencil/core';
 import { createGuid, loc } from 'src/utils';
 export class Q2CheckboxGroup {
   constructor() {
-    this.id = `checkbox-group-${createGuid()}`;
+    this._id = `checkbox-group-${createGuid()}`;
     this.onMutationObserved = () => {
       this.valueUpdated();
       this.disabledUpdated();

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

@@ -95,7 +95,6 @@ export class Q2Dropdown {
     this.icon = undefined;
     this.label = undefined;
     this.hideLabel = undefined;
-    this.ariaLabel = undefined;
     this.disabled = undefined;
     this.popDirection = undefined;
     this.name = undefined;
@@ -103,6 +102,7 @@ export class Q2Dropdown {
     this.contextValue = undefined;
     this.resolvedType = undefined;
     this.block = undefined;
+    this.ariaLabel = undefined;
     this.dropdownOpen = false;
   }
   resizeIframe() {
@@ -282,8 +282,8 @@ export class Q2Dropdown {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral'",
+          "resolved": "\"custom\" | \"fab\" | \"icon\" | \"neutral\" | \"primary\" | \"secondary\"",
           "references": {}
         },
         "required": false,
@@ -315,7 +315,7 @@ export class Q2Dropdown {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -332,7 +332,7 @@ export class Q2Dropdown {
       },
       "hideLabel": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -347,23 +347,6 @@ export class Q2Dropdown {
         "attribute": "hide-label",
         "reflect": true
       },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": true
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -482,6 +465,26 @@ export class Q2Dropdown {
         },
         "attribute": "block",
         "reflect": true
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       }
     };
   }

package/dist/collection/components/q2-dropdown-item/index.js

@@ -42,8 +42,8 @@ export class Q2DropdownItem {
     this.removable = undefined;
     this.separator = undefined;
     this.label = undefined;
-    this.ariaLabel = undefined;
     this.value = undefined;
+    this.ariaLabel = undefined;
   }
   /////// LIFECYCLE HOOKS //////
   componentWillLoad() {
@@ -157,7 +157,7 @@ export class Q2DropdownItem {
       },
       "label": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -172,7 +172,7 @@ export class Q2DropdownItem {
         "attribute": "label",
         "reflect": true
       },
-      "ariaLabel": {
+      "value": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -186,12 +186,12 @@ export class Q2DropdownItem {
           "tags": [],
           "text": ""
         },
-        "attribute": "aria-label",
+        "attribute": "value",
         "reflect": true
       },
-      "value": {
+      "ariaLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -200,10 +200,13 @@ export class Q2DropdownItem {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
           "text": ""
         },
-        "attribute": "value",
+        "attribute": "aria-label",
         "reflect": true
       }
     };

package/dist/collection/components/q2-editable-field/index.js

@@ -59,7 +59,6 @@ export class Q2EditableField {
     this.editing = false;
     this.label = '';
     this.hideLabel = undefined;
-    this.ariaLabel = undefined;
     this.type = undefined;
     this.formatModifier = undefined;
     this.truncated = undefined;
@@ -68,6 +67,7 @@ export class Q2EditableField {
     this.disabled = undefined;
     this.hints = undefined;
     this.errors = undefined;
+    this.ariaLabel = undefined;
   }
   get locLabel() {
     return (this.label && loc(this.label)) || '';
@@ -224,30 +224,18 @@ export class Q2EditableField {
         "attribute": "hide-label",
         "reflect": true
       },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": true
-      },
       "type": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Q2Input['type']",
+          "resolved": "\"alpha\" | \"alphanumeric\" | \"credit-card\" | \"currency\" | \"date\" | \"email\" | \"number\" | \"numeric\" | \"password\" | \"percentage\" | \"phone\" | \"postal\" | \"search\" | \"ssn\" | \"tel\" | \"text\" | \"url\"",
+          "references": {
+            "Q2Input": {
+              "location": "import",
+              "path": "../q2-input"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -276,11 +264,11 @@ export class Q2EditableField {
         "reflect": true
       },
       "truncated": {
-        "type": "string",
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -372,6 +360,26 @@ export class Q2EditableField {
           "tags": [],
           "text": ""
         }
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       }
     };
   }

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

@@ -9,6 +9,25 @@ import formatNumeric, { formatPercentage } from './formatting/numeric';
 import formatPostalCode from './formatting/postal';
 import formatDate from './formatting/date';
 import formatCreditCard from './formatting/credit-card';
+const inputTypeMap = {
+  text: 'text',
+  tel: 'tel',
+  number: 'number',
+  password: 'text',
+  search: 'search',
+  url: 'url',
+  email: 'email',
+  currency: 'text',
+  phone: 'tel',
+  ssn: 'text',
+  alphanumeric: 'text',
+  alpha: 'text',
+  numeric: 'text',
+  percentage: 'text',
+  postal: 'text',
+  date: 'text',
+  'credit-card': 'text',
+};
 export class Q2Input {
   constructor() {
     this.scheduledAfterRender = [];
@@ -100,11 +119,11 @@ export class Q2Input {
     this.ariaControls = undefined;
     this.role = undefined;
     this.ariaOwns = undefined;
-    this.ariaLabel = undefined;
     this.ariaHaspopup = undefined;
     this.ariaExpanded = undefined;
     this.ariaActivedescendant = undefined;
     this.current = undefined;
+    this.ariaLabel = undefined;
     this.errors = undefined;
     this.hints = undefined;
     this.formattedValueObject = undefined;
@@ -225,25 +244,6 @@ export class Q2Input {
     return classNames.join(' ');
   }
   get computedType() {
-    const inputTypeMap = {
-      text: 'text',
-      tel: 'tel',
-      number: 'number',
-      password: 'text',
-      search: 'search',
-      url: 'url',
-      email: 'email',
-      currency: 'text',
-      phone: 'tel',
-      ssn: 'text',
-      alphanumeric: 'text',
-      alpha: 'text',
-      numeric: 'text',
-      percentage: 'text',
-      postal: 'text',
-      date: 'text',
-      'credit-card': 'text',
-    };
     if (['password', 'text', 'ssn'].includes(this.type) && this.textHidden) {
       return 'password';
     }
@@ -371,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, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode })));
+    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, 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() {
@@ -497,9 +497,13 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "InputType",
+          "resolved": "\"alpha\" | \"alphanumeric\" | \"credit-card\" | \"currency\" | \"date\" | \"email\" | \"number\" | \"numeric\" | \"password\" | \"percentage\" | \"phone\" | \"postal\" | \"search\" | \"ssn\" | \"tel\" | \"text\" | \"url\"",
+          "references": {
+            "InputType": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -567,8 +571,8 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "'on' | 'off'",
+          "resolved": "\"off\" | \"on\"",
           "references": {}
         },
         "required": false,
@@ -618,9 +622,14 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "Q2Icon['type']",
           "resolved": "string",
-          "references": {}
+          "references": {
+            "Q2Icon": {
+              "location": "import",
+              "path": "../q2-icon"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -635,9 +644,14 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "Q2Icon['type']",
           "resolved": "string",
-          "references": {}
+          "references": {
+            "Q2Icon": {
+              "location": "import",
+              "path": "../q2-icon"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -857,9 +871,14 @@ export class Q2Input {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary' | 'secondary' | 'tertiary'",
+          "original": "Q2Badge['theme']",
           "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-          "references": {}
+          "references": {
+            "Q2Badge": {
+              "location": "import",
+              "path": "../q2-badge"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -921,23 +940,6 @@ export class Q2Input {
         "attribute": "aria-owns",
         "reflect": false
       },
-      "ariaLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "aria-label",
-        "reflect": true
-      },
       "ariaHaspopup": {
         "type": "string",
         "mutable": false,
@@ -1006,6 +1008,26 @@ export class Q2Input {
         "attribute": "current",
         "reflect": false
       },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
+      },
       "errors": {
         "type": "unknown",
         "mutable": false,