@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.70

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -1,9 +1,16 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { closestElementCrossShadowBoundary, focusElement } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { hiddenInputStyle } from "../../utils/form";
+import { HiddenFormInputSlot, connectForm, disconnectForm } from "../../utils/form";
 import { CSS } from "./resources";
+import { getKey } from "../../utils/key";
+import { getElementDir } from "../../utils/dom";
+import { getRoundRobinIndex } from "../../utils/array";
 export class CalciteRadioButton {
   constructor() {
     //--------------------------------------------------------------------------
@@ -37,52 +44,79 @@ export class CalciteRadioButton {
     //
     //--------------------------------------------------------------------------
     this.selectItem = (items, selectedIndex) => {
-      items.forEach((item, index) => {
-        const selected = index === selectedIndex;
-        item.checked = selected;
-        item.focused = selected;
-      });
+      items[selectedIndex].click();
+    };
+    this.queryButtons = () => {
+      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
     };
-    this.toggle = () => {
+    this.isDefaultSelectable = () => {
+      const radioButtons = this.queryButtons();
+      return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
+    };
+    this.check = () => {
+      if (this.disabled) {
+        return;
+      }
       this.uncheckAllRadioButtonsInGroup();
       this.checked = true;
-      this.focused = true;
       this.calciteRadioButtonChange.emit();
+      this.setFocus();
     };
     this.clickHandler = () => {
-      this.toggle();
+      this.check();
+    };
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
     };
-    this.onLabelClick = (event) => {
-      if (!this.disabled && !this.hidden) {
-        this.uncheckOtherRadioButtonsInGroup();
-        const label = event.currentTarget;
-        const radioButton = label.for
-          ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
-          : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
-        if (radioButton) {
-          radioButton.checked = true;
-          radioButton.focused = true;
+    this.handleKeyDown = (event) => {
+      const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+      const key = getKey(event.key);
+      const { el } = this;
+      if (keys.indexOf(key) === -1) {
+        return;
+      }
+      if (key === " ") {
+        this.check();
+        return;
+      }
+      let adjustedKey = key;
+      if (getElementDir(el) === "rtl") {
+        if (key === "ArrowRight") {
+          adjustedKey = "ArrowLeft";
+        }
+        if (key === "ArrowLeft") {
+          adjustedKey = "ArrowRight";
         }
-        this.calciteRadioButtonChange.emit();
-        this.setFocus();
+      }
+      const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+      let currentIndex = 0;
+      const radioButtonsLength = radioButtons.length;
+      radioButtons.some((item, index) => {
+        if (item.checked) {
+          currentIndex = index;
+          return true;
+        }
+      });
+      switch (adjustedKey) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength));
+          return;
+        case "ArrowRight":
+        case "ArrowDown":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));
+          return;
+        default:
+          return;
       }
     };
-    this.setInputEl = (el) => {
-      this.inputEl = el;
-    };
-    this.formResetHandler = () => {
-      var _a;
-      this.checked = this.initialChecked;
-      this.initialChecked && ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute("checked", ""));
-    };
-    this.hideInputEl = () => {
-      this.inputEl.style.cssText = hiddenInputStyle;
-    };
-    this.onInputBlur = () => {
+    this.onContainerBlur = () => {
       this.focused = false;
       this.calciteInternalRadioButtonBlur.emit();
     };
-    this.onInputFocus = () => {
+    this.onContainerFocus = () => {
       this.focused = true;
       this.calciteInternalRadioButtonFocus.emit();
     };
@@ -91,44 +125,15 @@ export class CalciteRadioButton {
     if (newChecked) {
       this.uncheckOtherRadioButtonsInGroup();
     }
-    if (this.inputEl) {
-      this.inputEl.checked = newChecked;
-    }
     this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
   }
-  disabledChanged(disabled) {
-    this.inputEl.disabled = disabled;
-  }
-  focusedChanged(focused) {
-    if (!this.inputEl) {
-      return;
-    }
-    if (focused && !this.el.hasAttribute("hidden")) {
-      this.inputEl.focus();
-    }
-    else {
-      this.inputEl.blur();
-    }
-  }
-  hiddenChanged(newHidden) {
-    this.inputEl.hidden = newHidden;
-  }
-  nameChanged(newName) {
-    if (this.name === newName) {
-      return;
-    }
-    if (this.inputEl) {
-      this.inputEl.name = newName;
-    }
+  nameChanged() {
     this.checkLastRadioButton();
     const currentValue = this.rootNode.querySelector(`input[name="${this.name}"]:checked`);
     if (!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.value)) {
       this.uncheckAllRadioButtonsInGroup();
     }
   }
-  requiredChanged(required) {
-    this.inputEl.required = required;
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -136,10 +141,25 @@ export class CalciteRadioButton {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.inputEl);
+    focusElement(this.containerEl);
+  }
+  onLabelClick(event) {
+    if (!this.disabled && !this.hidden) {
+      this.uncheckOtherRadioButtonsInGroup();
+      const label = event.currentTarget;
+      const radioButton = label.for
+        ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+        : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+      if (radioButton) {
+        radioButton.checked = true;
+        radioButton.focused = true;
+      }
+      this.calciteRadioButtonChange.emit();
+      this.setFocus();
+    }
   }
   checkLastRadioButton() {
-    const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
+    const radioButtons = this.queryButtons();
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
     if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
       const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
@@ -156,16 +176,17 @@ export class CalciteRadioButton {
     this.calciteInternalRadioButtonCheckedChange.emit();
   }
   uncheckAllRadioButtonsInGroup() {
-    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
-    otherRadioButtons.forEach((otherRadioButton) => {
-      if (otherRadioButton.checked) {
-        otherRadioButton.checked = false;
-        otherRadioButton.focused = false;
+    const radioButtons = this.queryButtons();
+    radioButtons.forEach((radioButton) => {
+      if (radioButton.checked) {
+        radioButton.checked = false;
+        radioButton.focused = false;
       }
     });
   }
   uncheckOtherRadioButtonsInGroup() {
-    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name && radioButton.guid !== this.guid);
+    const radioButtons = this.queryButtons();
+    const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid);
     otherRadioButtons.forEach((otherRadioButton) => {
       if (otherRadioButton.checked) {
         otherRadioButton.checked = false;
@@ -192,28 +213,20 @@ export class CalciteRadioButton {
   connectedCallback() {
     this.rootNode = this.el.getRootNode();
     this.guid = this.el.id || `calcite-radio-button-${guid()}`;
-    this.initialChecked = this.checked;
     if (this.name) {
       this.checkLastRadioButton();
     }
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.addEventListener("reset", this.formResetHandler);
-    }
     connectLabel(this);
+    connectForm(this);
   }
   componentDidLoad() {
-    this.hideInputEl();
     if (this.focused) {
-      this.inputEl.focus();
+      this.setFocus();
     }
   }
   disconnectedCallback() {
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.removeEventListener("reset", this.formResetHandler);
-    }
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -221,15 +234,13 @@ export class CalciteRadioButton {
   //
   // --------------------------------------------------------------------------
   render() {
-    var _a;
-    const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-    return (h(Host, { onClick: this.clickHandler },
-      h("div", { class: CSS.container },
-        h("input", { "aria-label": getLabelText(this), checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }),
-        h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale }))));
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: this.checked || this.isDefaultSelectable() ? 0 : -1 },
+        h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-radio-button"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["calcite-radio-button.scss"]
   }; }
@@ -285,8 +296,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio button."
       },
@@ -341,8 +352,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio button."
       },
@@ -362,8 +373,8 @@ export class CalciteRadioButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the radio input"
       },
@@ -430,7 +441,7 @@ export class CalciteRadioButton {
     },
     "value": {
       "type": "any",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "any",
         "resolved": "any",
@@ -454,8 +465,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is blurred."
       },
@@ -487,8 +498,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the checked property changes.  This is an internal event used for styling purposes only.\nUse calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms."
       },
@@ -505,8 +516,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is focused."
       },
@@ -557,21 +568,9 @@ export class CalciteRadioButton {
   static get watchers() { return [{
       "propName": "checked",
       "methodName": "checkedChanged"
-    }, {
-      "propName": "disabled",
-      "methodName": "disabledChanged"
-    }, {
-      "propName": "focused",
-      "methodName": "focusedChanged"
-    }, {
-      "propName": "hidden",
-      "methodName": "hiddenChanged"
     }, {
       "propName": "name",
       "methodName": "nameChanged"
-    }, {
-      "propName": "required",
-      "methodName": "requiredChanged"
     }]; }
   static get listeners() { return [{
       "name": "mouseenter",

package/dist/collection/components/calcite-radio-button/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
-  container: "calcite-radio-button__container"
+  container: "container"
 };

package/dist/collection/components/calcite-radio-button-group/calcite-radio-button-group.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
 /**
  * @slot - A slot for adding `calcite-radio-button`s.

package/dist/collection/components/calcite-radio-group/calcite-radio-group.css

@@ -121,4 +121,19 @@
 :host([disabled]) {
   opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }

package/dist/collection/components/calcite-radio-group/calcite-radio-group.js

@@ -1,7 +1,12 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 /**
  * @slot - A slot for adding `calcite-radio-group-item`s.
  */
@@ -16,10 +21,18 @@ export class CalciteRadioGroup {
     this.appearance = "solid";
     /** is the radio group disabled  */
     this.disabled = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the layout of the radio group, defaults to horizontal */
     this.layout = "horizontal";
     /** The scale of the radio group */
     this.scale = "m";
+    /** The value of the selectedItem */
+    this.value = null;
     /** specify the width of the group, defaults to auto */
     this.width = "auto";
     //--------------------------------------------------------------------------
@@ -32,25 +45,13 @@ export class CalciteRadioGroup {
         this.selectItem(event.target);
       }
     };
-    this.hiddenInput = (() => {
-      const input = document.createElement("input");
-      input.type = "hidden";
-      this.el.appendChild(input);
-      return input;
-    })();
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
   }
-  handleNameChange(value) {
-    this.hiddenInput.name = value;
+  valueHandler(value) {
+    const items = this.getItems();
+    items.forEach((item) => (item.checked = item.value === value));
   }
   handleSelectedItemChange(newItem, oldItem) {
+    this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value;
     if (newItem === oldItem) {
       return;
     }
@@ -82,24 +83,20 @@ export class CalciteRadioGroup {
     else if (items[0]) {
       items[0].tabIndex = 0;
     }
-    const { hiddenInput, name } = this;
-    if (name) {
-      hiddenInput.name = name;
-    }
-    if (lastChecked) {
-      hiddenInput.value = lastChecked.value;
-    }
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentDidLoad() {
     this.hasLoaded = true;
   }
   render() {
     return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null },
-      h("slot", null)));
+      h("slot", null),
+      h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
     // only fire after initial setup to prevent semi-infinite loops
@@ -163,6 +160,14 @@ export class CalciteRadioGroup {
     var _a;
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
@@ -183,14 +188,10 @@ export class CalciteRadioGroup {
       }
     });
     this.selectedItem = match;
-    this.syncWithInputProxy(match);
     if (Build.isBrowser && match) {
       match.focus();
     }
   }
-  syncWithInputProxy(item) {
-    this.hiddenInput.value = item ? item.value : "";
-  }
   static get is() { return "calcite-radio-group"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -241,6 +242,27 @@ export class CalciteRadioGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "layout": {
       "type": "string",
       "mutable": false,
@@ -304,6 +326,24 @@ export class CalciteRadioGroup {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the selectedItem"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "selectedItem": {
       "type": "unknown",
       "mutable": true,
@@ -386,8 +426,8 @@ export class CalciteRadioGroup {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "name",
-      "methodName": "handleNameChange"
+      "propName": "value",
+      "methodName": "valueHandler"
     }, {
       "propName": "selectedItem",
       "methodName": "handleSelectedItemChange"

package/dist/collection/components/calcite-radio-group/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.css

@@ -100,7 +100,7 @@
   pointer-events: none;
   align-items: center;
   margin: 0.125rem;
-  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
+  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
 }
 
 .label--horizontal {
@@ -177,10 +177,6 @@
   display: inline-flex;
   position: relative;
   margin: 0;
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
   line-height: inherit;
 }
 

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Event, h, Prop, Element, Host, Watch, State } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
@@ -203,8 +207,8 @@ export class CalciteRadioGroupItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the item has been selected."
       },

package/dist/collection/components/calcite-radio-group-item/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const SLOTS = {
   input: "input"
 };

package/dist/collection/components/calcite-rating/calcite-rating.css

@@ -225,4 +225,19 @@ calcite-chip {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }