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

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

@@ -1,6 +1,7 @@
-import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement, closestElementCrossShadowBoundary } from "../../utils/dom";
+import { closestElementCrossShadowBoundary, focusElement } from "../../utils/dom";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { hiddenInputStyle } from "../../utils/form";
 import { CSS } from "./resources";
 export class CalciteRadioButton {
@@ -16,20 +17,56 @@ export class CalciteRadioButton {
     this.disabled = false;
     /**
      * The focused state of the radio button.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
     this.hidden = false;
     /**
      * The hovered state of the radio button.
-     * @private
+     * @internal
      */
     this.hovered = false;
     /** Requires that a value is selected for the radio button group before the parent form will submit. */
     this.required = false;
     /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.selectItem = (items, selectedIndex) => {
+      items.forEach((item, index) => {
+        const selected = index === selectedIndex;
+        item.checked = selected;
+        item.focused = selected;
+      });
+    };
+    this.toggle = () => {
+      this.uncheckAllRadioButtonsInGroup();
+      this.checked = true;
+      this.focused = true;
+      this.calciteRadioButtonChange.emit();
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    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.calciteRadioButtonChange.emit();
+        this.setFocus();
+      }
+    };
     this.setInputEl = (el) => {
       this.inputEl = el;
     };
@@ -43,11 +80,11 @@ export class CalciteRadioButton {
     };
     this.onInputBlur = () => {
       this.focused = false;
-      this.calciteRadioButtonFocusedChange.emit();
+      this.calciteInternalRadioButtonBlur.emit();
     };
     this.onInputFocus = () => {
       this.focused = true;
-      this.calciteRadioButtonFocusedChange.emit();
+      this.calciteInternalRadioButtonFocus.emit();
     };
   }
   checkedChanged(newChecked) {
@@ -57,7 +94,7 @@ export class CalciteRadioButton {
     if (this.inputEl) {
       this.inputEl.checked = newChecked;
     }
-    this.calciteRadioButtonCheckedChange.emit(newChecked);
+    this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
   }
   disabledChanged(disabled) {
     this.inputEl.disabled = disabled;
@@ -97,14 +134,10 @@ export class CalciteRadioButton {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.inputEl);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   checkLastRadioButton() {
     const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
@@ -120,7 +153,7 @@ export class CalciteRadioButton {
   }
   /** @internal */
   async emitCheckedChange() {
-    this.calciteRadioButtonCheckedChange.emit();
+    this.calciteInternalRadioButtonCheckedChange.emit();
   }
   uncheckAllRadioButtonsInGroup() {
     const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
@@ -145,18 +178,6 @@ export class CalciteRadioButton {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  check(event) {
-    // Prevent parent label from clicking the first radio when calcite-radio-button is clicked
-    if (this.el.closest("label") && event.composedPath().includes(this.el)) {
-      event.preventDefault();
-    }
-    if (!this.disabled && !this.hidden) {
-      this.uncheckOtherRadioButtonsInGroup();
-      this.checked = true;
-      this.focused = true;
-      this.calciteRadioButtonChange.emit();
-    }
-  }
   mouseenter() {
     this.hovered = true;
   }
@@ -179,6 +200,7 @@ export class CalciteRadioButton {
     if (form) {
       form.addEventListener("reset", this.formResetHandler);
     }
+    connectLabel(this);
   }
   componentDidLoad() {
     this.hideInputEl();
@@ -191,6 +213,7 @@ export class CalciteRadioButton {
     if (form) {
       form.removeEventListener("reset", this.formResetHandler);
     }
+    disconnectLabel(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -200,9 +223,10 @@ export class CalciteRadioButton {
   render() {
     var _a;
     const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-    return (h("div", { class: CSS.container },
-      h("input", { "aria-label": this.label || null, 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 },
+      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 }))));
   }
   static get is() { return "calcite-radio-button"; }
   static get encapsulation() { return "scoped"; }
@@ -262,7 +286,7 @@ export class CalciteRadioButton {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The focused state of the radio button."
       },
@@ -318,7 +342,7 @@ export class CalciteRadioButton {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The hovered state of the radio button."
       },
@@ -423,6 +447,24 @@ export class CalciteRadioButton {
     }
   }; }
   static get events() { return [{
+      "method": "calciteInternalRadioButtonBlur",
+      "name": "calciteInternalRadioButtonBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": "Fires when the radio button is blurred."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "calciteRadioButtonChange",
       "name": "calciteRadioButtonChange",
       "bubbles": true,
@@ -438,8 +480,8 @@ export class CalciteRadioButton {
         "references": {}
       }
     }, {
-      "method": "calciteRadioButtonCheckedChange",
-      "name": "calciteRadioButtonCheckedChange",
+      "method": "calciteInternalRadioButtonCheckedChange",
+      "name": "calciteInternalRadioButtonCheckedChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -456,8 +498,8 @@ export class CalciteRadioButton {
         "references": {}
       }
     }, {
-      "method": "calciteRadioButtonFocusedChange",
-      "name": "calciteRadioButtonFocusedChange",
+      "method": "calciteInternalRadioButtonFocus",
+      "name": "calciteInternalRadioButtonFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -466,7 +508,7 @@ export class CalciteRadioButton {
             "text": undefined,
             "name": "internal"
           }],
-        "text": "Fires when the radio button is either focused or blurred."
+        "text": "Fires when the radio button is focused."
       },
       "complexType": {
         "original": "any",
@@ -487,7 +529,7 @@ export class CalciteRadioButton {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     },
@@ -532,12 +574,6 @@ export class CalciteRadioButton {
       "methodName": "requiredChanged"
     }]; }
   static get listeners() { return [{
-      "name": "click",
-      "method": "check",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "mouseenter",
       "method": "mouseenter",
       "target": undefined,

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

@@ -1,4 +1,7 @@
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-radio-button`s.
+ */
 export class CalciteRadioButtonGroup {
   constructor() {
     //--------------------------------------------------------------------------
@@ -205,11 +208,8 @@ export class CalciteRadioButtonGroup {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "text": "doc",
-            "name": "todo"
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Emitted when the radio button group has changed."
       },
       "complexType": {
         "original": "any",

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

@@ -1,6 +1,10 @@
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
-import { getElementDir, hasLabel } from "../../utils/dom";
+import { getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
+import { connectLabel, disconnectLabel } from "../../utils/label";
+/**
+ * @slot - A slot for adding `calcite-radio-group-item`s.
+ */
 export class CalciteRadioGroup {
   constructor() {
     //--------------------------------------------------------------------------
@@ -10,6 +14,8 @@ export class CalciteRadioGroup {
     //--------------------------------------------------------------------------
     /** specify the appearance style of the radio group, defaults to solid. */
     this.appearance = "solid";
+    /** is the radio group disabled  */
+    this.disabled = false;
     /** specify the layout of the radio group, defaults to horizontal */
     this.layout = "horizontal";
     /** The scale of the radio group */
@@ -18,15 +24,28 @@ export class CalciteRadioGroup {
     this.width = "auto";
     //--------------------------------------------------------------------------
     //
-    //  Private State/Props
+    //  Event Listeners
     //
     //--------------------------------------------------------------------------
+    this.handleClick = (event) => {
+      if (event.target.localName === "calcite-radio-group-item") {
+        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;
@@ -70,29 +89,18 @@ export class CalciteRadioGroup {
     if (lastChecked) {
       hiddenInput.value = lastChecked.value;
     }
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
   }
   componentDidLoad() {
     this.hasLoaded = true;
   }
   render() {
-    return (h(Host, { role: "radiogroup", tabIndex: this.disabled ? -1 : null },
+    return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null },
       h("slot", null)));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (hasLabel(e.detail.labelEl, this.el)) {
-      this.setFocus();
-    }
-  }
-  handleClick(event) {
-    if (event.target.localName === "calcite-radio-group-item") {
-      this.selectItem(event.target);
-    }
-  }
   handleSelected(event) {
     // only fire after initial setup to prevent semi-infinite loops
     if (this.hasLoaded) {
@@ -150,16 +158,11 @@ export class CalciteRadioGroup {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Focuses the selected item. If there is no selection, it focuses the first item. */
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
@@ -229,13 +232,14 @@ export class CalciteRadioGroup {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "is the radio group disabled"
       },
       "attribute": "disabled",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "layout": {
       "type": "string",
@@ -375,7 +379,7 @@ export class CalciteRadioGroup {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Focuses the selected item. If there is no selection, it focuses the first item.",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -389,18 +393,6 @@ export class CalciteRadioGroup {
       "methodName": "handleSelectedItemChange"
     }]; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "calciteRadioGroupItemChange",
       "method": "handleSelected",
       "target": undefined,

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

@@ -1,6 +1,7 @@
-import { Component, Event, h, Prop, Element, Host, Watch, Build, State } from "@stencil/core";
+import { Component, Event, h, Prop, Element, Host, Watch, State } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
+import { createObserver } from "../../utils/observers";
 export class CalciteRadioGroupItem {
   constructor() {
     //--------------------------------------------------------------------------
@@ -10,9 +11,11 @@ export class CalciteRadioGroupItem {
     //--------------------------------------------------------------------------
     /** Indicates whether the control is checked. */
     this.checked = false;
+    /** flip the icon in rtl */
+    this.iconFlipRtl = false;
     /** optionally used with icon, select where to position the icon */
     this.iconPosition = "start";
-    this.mutationObserver = this.getMutationObserver();
+    this.mutationObserver = createObserver("mutation", () => this.syncFromExternalInput());
   }
   handleCheckedChange() {
     this.calciteRadioGroupItemChange.emit();
@@ -24,18 +27,18 @@ export class CalciteRadioGroupItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
     if (inputProxy) {
       this.value = inputProxy.value;
       this.checked = inputProxy.checked;
-      if (Build.isBrowser) {
-        this.mutationObserver.observe(inputProxy, { attributes: true });
-      }
+      (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
     }
     this.inputProxy = inputProxy;
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   componentWillLoad() {
     // only use default slot content in browsers that support shadow dom
@@ -68,9 +71,6 @@ export class CalciteRadioGroupItem {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  getMutationObserver() {
-    return Build.isBrowser && new MutationObserver(() => this.syncFromExternalInput());
-  }
   syncFromExternalInput() {
     if (this.inputProxy) {
       this.value = this.inputProxy.value;
@@ -142,13 +142,14 @@ export class CalciteRadioGroupItem {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "flip the icon in rtl"
       },
       "attribute": "icon-flip-rtl",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "iconPosition": {
       "type": "string",

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

@@ -1,6 +1,7 @@
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } from "@stencil/core";
-import { getElementDir, hasLabel } from "../../utils/dom";
+import { getElementDir } from "../../utils/dom";
 import { guid } from "../../utils/guid";
+import { connectLabel, disconnectLabel } from "../../utils/label";
 import { TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteRating {
@@ -28,20 +29,32 @@ export class CalciteRating {
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT.stars;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
+  //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (hasLabel(e.detail.labelEl, this.el) &&
-      e.detail.interactedEl !== this.el &&
-      !this.el.contains(e.detail.interactedEl)) {
-      this.setFocus();
-    }
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
   blurHandler() {
     this.hasFocus = false;
   }
@@ -86,11 +99,6 @@ export class CalciteRating {
           count.toString(),
           ")"))) : null));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   updateValue(value) {
     this.value = value;
     this.calciteRatingChange.emit({ value });
@@ -100,6 +108,7 @@ export class CalciteRating {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.inputFocusRef.focus();
   }
@@ -318,19 +327,13 @@ export class CalciteRating {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
   }; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
       "name": "blur",
       "method": "blurHandler",
       "target": undefined,

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

@@ -1,5 +1,8 @@
 import { Component, Element, Prop, h } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
+/**
+ * @slot - A slot for adding custom content, primarily loading information.
+ */
 export class CalciteScrim {
   constructor() {
     // --------------------------------------------------------------------------