@esri/calcite-components 1.0.0-next.294 → 1.0.0-next.298

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

@@ -4,10 +4,13 @@
  */
 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() {
     //--------------------------------------------------------------------------
@@ -47,31 +50,77 @@ export class CalciteRadioButton {
         item.focused = selected;
       });
     };
-    this.toggle = () => {
+    this.queryButtons = () => {
+      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+    };
+    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.clickHandler = () => {
-      this.toggle();
+      this.check();
     };
-    this.setInputEl = (el) => {
-      this.inputEl = el;
+    this.setContainerEl = (el) => {
+      this.containerEl = 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.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";
+        }
+      }
+      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.onInputBlur = () => {
+    this.onContainerBlur = () => {
       this.focused = false;
       this.calciteInternalRadioButtonBlur.emit();
     };
-    this.onInputFocus = () => {
+    this.onContainerFocus = () => {
       this.focused = true;
       this.calciteInternalRadioButtonFocus.emit();
     };
@@ -80,44 +129,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
@@ -125,7 +145,7 @@ export class CalciteRadioButton {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.inputEl);
+    focusElement(this.containerEl);
   }
   onLabelClick(event) {
     if (!this.disabled && !this.hidden) {
@@ -143,7 +163,7 @@ export class CalciteRadioButton {
     }
   }
   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];
@@ -160,16 +180,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;
@@ -196,28 +217,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.containerEl.focus();
     }
   }
   disconnectedCallback() {
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.removeEventListener("reset", this.formResetHandler);
-    }
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -225,15 +238,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"]
   }; }
@@ -434,7 +445,7 @@ export class CalciteRadioButton {
     },
     "value": {
       "type": "any",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "any",
         "resolved": "any",
@@ -561,21 +572,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

@@ -3,5 +3,5 @@
  * 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-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

@@ -6,6 +6,7 @@ import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method
 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.
  */
@@ -20,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";
     //--------------------------------------------------------------------------
@@ -36,17 +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;
-    })();
   }
-  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;
     }
@@ -78,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
@@ -187,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 {
@@ -245,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,
@@ -308,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,
@@ -390,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-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;
 }

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

@@ -6,6 +6,7 @@ import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } f
 import { getElementDir } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteRating {
@@ -33,6 +34,12 @@ export class CalciteRating {
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT.stars;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
@@ -42,9 +49,11 @@ export class CalciteRating {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -93,7 +102,8 @@ export class CalciteRating {
         !!count && h("span", { class: "number--count" },
           "(", count === null || count === void 0 ? void 0 :
           count.toString(),
-          ")"))) : null));
+          ")"))) : null,
+      h(HiddenFormInputSlot, { component: this })));
   }
   //--------------------------------------------------------------------------
   //
@@ -254,6 +264,23 @@ export class CalciteRating {
       "attribute": "average",
       "reflect": true
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the rating"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "intlRating": {
       "type": "string",
       "mutable": false,
@@ -295,6 +322,27 @@ export class CalciteRating {
       "attribute": "intl-stars",
       "reflect": false,
       "defaultValue": "TEXT.stars"
+    },
+    "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"
     }
   }; }
   static get states() { return {

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

@@ -242,4 +242,19 @@ select:disabled {
 
 .select:focus ~ .icon-container {
   border-color: transparent;
+}
+
+::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;
 }