q2-tecton-elements 1.18.0 → 1.19.1

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

@@ -1,10 +1,7 @@
-import { Component, Prop, Element, h, Listen, Event, Watch, Fragment, } from '@stencil/core';
+import { h, Fragment, } from '@stencil/core';
 import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2RadioGroup {
   constructor() {
-    this.disabled = false;
-    this.tileAlignment = 'center';
-    this.hasError = false;
     this.id = `radio-group-${createGuid()}`;
     this.onMutationObserved = () => {
       this.valueUpdated(this.value);
@@ -19,6 +16,16 @@ export class Q2RadioGroup {
         return;
       this.change.emit({ value: event.detail.value });
     };
+    this.label = undefined;
+    this.value = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.optional = undefined;
+    this.readonly = undefined;
+    this.tileLayout = undefined;
+    this.tileAlignment = 'center';
+    this.hasError = false;
+    this.tilelayout = undefined;
   }
   get radioElements() {
     return Array.from(this.hostElement.querySelectorAll('q2-radio'));
@@ -110,271 +117,272 @@ export class Q2RadioGroup {
     else if (optional) {
       helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
     }
-    return (h(Fragment, null,
-      label && loc(label),
-      !!helpText && h("span", { class: "optional-tag" }, helpText)));
+    return (h(Fragment, null, label && loc(label), !!helpText && h("span", { class: "optional-tag" }, helpText)));
   }
   render() {
     const showLabel = this.label || this.optional || this.readonly;
     const { hasError } = this;
     const showLabelRow = showLabel || hasError;
-    return (h(Fragment, null,
-      showLabelRow && (h("div", { class: "label-row" },
-        showLabel && h("div", { class: "group-legend" }, this.labelDOM()),
-        hasError && (h("q2-icon", { type: "error", "test-id": "iconError" })))),
-      h("fieldset", { onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}`, "aria-invalid": `${this.hasError}` },
-        showLabel && h("legend", { class: "sr" }, this.labelDOM()),
-        this.inputDom())));
+    return (h(Fragment, null, showLabelRow && (h("div", { class: "label-row" }, showLabel && h("div", { class: "group-legend" }, this.labelDOM()), hasError && (h("q2-icon", { type: "error", "test-id": "iconError" })))), h("fieldset", { onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}`, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { class: "sr" }, this.labelDOM()), this.inputDom())));
   }
   inputDom() {
     if (this.tileLayout) {
       const { tileAlignment } = this;
       const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';
-      return (h("div", { class: `tile-container ${alignment}` },
-        h("div", { class: "options-container" },
-          h("slot", null))));
+      return (h("div", { class: `tile-container ${alignment}` }, h("div", { class: "options-container" }, h("slot", null))));
     }
     else {
-      return (h("div", { class: "options-container" },
-        h("slot", null)));
+      return (h("div", { class: "options-container" }, h("slot", null)));
     }
   }
   static get is() { return "q2-radio-group"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "optional": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "optional",
-      "reflect": true
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": true
-    },
-    "tileLayout": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "attribute": "tile-layout",
-      "reflect": true
-    },
-    "tileAlignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'center' | 'right'",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "tile-alignment",
-      "reflect": true,
-      "defaultValue": "'center'"
-    },
-    "hasError": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "optional": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "optional",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true
       },
-      "attribute": "has-error",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "tilelayout": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "tileLayout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tile-layout",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "tileAlignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'center' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tile-alignment",
+        "reflect": true,
+        "defaultValue": "'center'"
       },
-      "attribute": "tilelayout",
-      "reflect": true
-    }
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hasError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-error",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "tilelayout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tilelayout",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "valueUpdated"
-    }, {
-      "propName": "name",
-      "methodName": "nameUpdated"
-    }, {
-      "propName": "disabled",
-      "methodName": "disabledUpdated"
-    }, {
-      "propName": "readonly",
-      "methodName": "readonlyUpdated"
-    }, {
-      "propName": "tilelayout",
-      "methodName": "tilelayoutUpdated"
-    }, {
-      "propName": "tileLayout",
-      "methodName": "tileLayoutUpdated"
-    }]; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "onHostElementChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "keydownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueUpdated"
+      }, {
+        "propName": "name",
+        "methodName": "nameUpdated"
+      }, {
+        "propName": "disabled",
+        "methodName": "disabledUpdated"
+      }, {
+        "propName": "readonly",
+        "methodName": "readonlyUpdated"
+      }, {
+        "propName": "tilelayout",
+        "methodName": "tilelayoutUpdated"
+      }, {
+        "propName": "tileLayout",
+        "methodName": "tileLayoutUpdated"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "change",
+        "method": "onHostElementChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "keydownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-radio-group/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {