@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.71

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

@@ -233,4 +233,19 @@
 :host([checked]:focus) .calcite--rtl .handle {
   right: auto;
   left: -1px;
+}
+
+::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-switch/calcite-switch.js

@@ -2,13 +2,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, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
-import { hiddenInputStyle } from "../../utils/form";
-import { guid } from "../../utils/guid";
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
+import { focusElement, getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSwitch {
   constructor() {
     //--------------------------------------------------------------------------
@@ -26,24 +25,30 @@ export class CalciteSwitch {
     this.switched = false;
     /** True if the switch is initially on */
     this.checked = false;
-    this.inputEl = document.createElement("input");
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (e) => {
+      const key = getKey(e.key);
+      if (!this.disabled && (key === " " || key === "Enter")) {
+        this.toggle();
+      }
+    };
     this.clickHandler = () => {
       this.toggle();
     };
+    this.setSwitchEl = (el) => {
+      this.switchEl = el;
+    };
   }
   disabledWatcher(newDisabled) {
-    this.inputEl.disabled = newDisabled;
     this.tabindex = newDisabled ? -1 : 0;
   }
-  nameChanged(newName) {
-    this.inputEl.name = newName;
-  }
   switchedWatcher(switched) {
     this.checked = switched;
   }
-  checkedWatcher(checked) {
-    this.inputEl.checked = checked;
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -51,31 +56,14 @@ export class CalciteSwitch {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.el.focus();
+    focusElement(this.switchEl);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     if (!this.disabled) {
       this.toggle();
       this.setFocus();
     }
   }
-  setupInput() {
-    this.checked && this.inputEl.setAttribute("checked", "");
-    this.inputEl.disabled = this.disabled;
-    this.inputEl.id = `${this.guid}-input`;
-    this.inputEl.name = this.name;
-    this.inputEl.style.cssText = hiddenInputStyle;
-    this.inputEl.type = "checkbox";
-    if (this.value) {
-      this.inputEl.value = this.value != null ? this.value.toString() : "";
-    }
-    this.el.appendChild(this.inputEl);
-  }
   toggle() {
     this.checked = !this.checked;
     this.calciteSwitchChange.emit({
@@ -86,30 +74,24 @@ export class CalciteSwitch {
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyDownHandler(e) {
-    const key = getKey(e.key);
-    if (!this.disabled && (key === " " || key === "Enter")) {
-      this.toggle();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    const initiallyChecked = this.checked || this.switched;
+    if (initiallyChecked) {
+      // if either prop is set, we ensure both are synced initially
+      this.switched = this.checked = initiallyChecked;
+    }
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
-    this.guid = this.el.id || `calcite-switch-${guid()}`;
     this.tabindex = this.el.getAttribute("tabindex") || this.disabled ? -1 : 0;
-    this.setupInput();
   }
   // --------------------------------------------------------------------------
   //
@@ -118,10 +100,11 @@ export class CalciteSwitch {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    return (h(Host, { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), onClick: this.clickHandler, role: "switch", tabindex: this.tabindex },
-      h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h(Host, { onKeyDown: this.keyDownHandler },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.clickHandler, ref: this.setSwitchEl, role: "switch", tabindex: this.tabindex },
         h("div", { class: "track" },
-          h("div", { class: "handle" })))));
+          h("div", { class: "handle" })),
+        h(HiddenFormInputSlot, { component: this }))));
   }
   static get is() { return "calcite-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -176,7 +159,7 @@ export class CalciteSwitch {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The name of the switch input"
@@ -209,7 +192,7 @@ export class CalciteSwitch {
     },
     "switched": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -219,8 +202,8 @@ export class CalciteSwitch {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "use 'checked' instead.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use 'checked' instead."
           }],
         "text": "True if the switch is initially on"
       },
@@ -255,17 +238,16 @@ export class CalciteSwitch {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The value of the switch input"
       },
       "attribute": "value",
-      "reflect": true
+      "reflect": false
     }
   }; }
   static get states() { return {
-    "guid": {},
     "tabindex": {}
   }; }
   static get events() { return [{
@@ -306,21 +288,8 @@ export class CalciteSwitch {
   static get watchers() { return [{
       "propName": "disabled",
       "methodName": "disabledWatcher"
-    }, {
-      "propName": "name",
-      "methodName": "nameChanged"
     }, {
       "propName": "switched",
       "methodName": "switchedWatcher"
-    }, {
-      "propName": "checked",
-      "methodName": "checkedWatcher"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
     }]; }
 }

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

@@ -91,10 +91,15 @@
 :host {
   display: none;
   color: var(--calcite-ui-text-3);
+  width: 100%;
+  height: 100%;
 }
 
 :host([active]) {
   display: block;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
 }
 
 section {

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

@@ -155,8 +155,8 @@ export class CalciteTab {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component scale value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component scale value"
           }],
         "text": ""
       },
@@ -176,8 +176,8 @@ export class CalciteTab {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
-import { getElementDir, filterDirectChildren } from "../../utils/dom";
+import { getElementStyleDir, filterDirectChildren } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-tab-title`s.
  */
@@ -86,7 +86,7 @@ export class CalciteTabNav {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const width = `${this.indicatorWidth}px`;
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
@@ -147,7 +147,7 @@ export class CalciteTabNav {
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     const tabLeft = (_b = this.selectedTabEl) === null || _b === void 0 ? void 0 : _b.offsetLeft;
     const tabWidth = (_c = this.selectedTabEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;
@@ -235,8 +235,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component scale value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component scale value"
           }],
         "text": ""
       },
@@ -261,8 +261,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component layout value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component layout value"
           }],
         "text": ""
       },
@@ -287,8 +287,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component position value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component position value"
           }],
         "text": ""
       },
@@ -308,8 +308,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component bordered value when layout is \"inline\"",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component bordered value when layout is \"inline\""
           }],
         "text": ""
       },
@@ -329,8 +329,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -349,8 +349,8 @@ export class CalciteTabNav {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -370,8 +370,8 @@ export class CalciteTabNav {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)"
           }],
         "text": "Emitted when the active tab changes"
       },

package/dist/collection/components/calcite-tab-title/calcite-tab-title.js

@@ -4,7 +4,7 @@
  */
 import { Component, Prop, Event, Listen, Element, Method, h, Host, State, Build, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementDir, getElementProp, getElementStyleDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
@@ -130,7 +130,7 @@ export class CalciteTabTitle {
         e.preventDefault();
         break;
       case "ArrowRight":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusNext.emit();
         }
         else {
@@ -138,7 +138,7 @@ export class CalciteTabTitle {
         }
         break;
       case "ArrowLeft":
-        if (getElementDir(this.el) === "ltr") {
+        if (getElementStyleDir(this.el) === "ltr") {
           this.calciteTabsFocusPrevious.emit();
         }
         else {
@@ -302,8 +302,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component layout value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component layout value"
           }],
         "text": ""
       },
@@ -327,8 +327,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component or parent tab-nav component's position",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component or parent tab-nav component's position"
           }],
         "text": ""
       },
@@ -352,8 +352,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component or parent tab-nav component's scale",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component or parent tab-nav component's scale"
           }],
         "text": ""
       },
@@ -372,8 +372,8 @@ export class CalciteTabTitle {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Parent tabs component bordered value",
-            "name": "internal"
+            "name": "internal",
+            "text": "Parent tabs component bordered value"
           }],
         "text": ""
       },
@@ -411,8 +411,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-tab/interfaces.ts#L1)"
           }],
         "text": "Fires when a specific tab is activated (`event.details`)"
       },
@@ -434,8 +434,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -452,8 +452,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -470,8 +470,8 @@ export class CalciteTabTitle {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -142,6 +142,7 @@
   flex-direction: column;
   grid-gap: 0.5rem;
   gap: 0.5rem;
+  width: 10%;
 }
 
 .content-container {
@@ -153,6 +154,7 @@
   align-items: stretch;
   padding: 0;
   color: var(--calcite-ui-text-2);
+  width: 100%;
 }
 
 .content-slot-container {
@@ -177,6 +179,8 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   font-weight: var(--calcite-font-weight-medium);
   pointer-events: none;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .large-visual {

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

@@ -153,8 +153,8 @@ export class CalciteTile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the tile."
       },

package/dist/collection/components/calcite-tile-select/calcite-tile-select.js

@@ -22,8 +22,6 @@ export class CalciteTileSelect {
     this.disabled = false;
     /** The hidden state of the tile select. */
     this.hidden = false;
-    /** The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */
-    this.name = "";
     /** Display an interactive radio or checkbox. */
     this.inputEnabled = false;
     /** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
@@ -69,7 +67,7 @@ export class CalciteTileSelect {
     event.stopPropagation();
     this.calciteTileSelectChange.emit();
   }
-  checkboxFocusHandler(event) {
+  checkboxFocusBlurHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
       this.focused = event.detail;
@@ -91,7 +89,7 @@ export class CalciteTileSelect {
     }
     event.stopPropagation();
   }
-  radioButtonFocusHandler(event) {
+  radioButtonFocusBlurHandler(event) {
     const radioButton = event.target;
     if (radioButton === this.input) {
       this.focused = radioButton.focused;
@@ -273,11 +271,11 @@ export class CalciteTileSelect {
       "reflect": true
     },
     "name": {
-      "type": "string",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "any",
+        "resolved": "any",
         "references": {}
       },
       "required": false,
@@ -287,8 +285,7 @@ export class CalciteTileSelect {
         "text": "The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property."
       },
       "attribute": "name",
-      "reflect": true,
-      "defaultValue": "\"\""
+      "reflect": true
     },
     "inputEnabled": {
       "type": "boolean",
@@ -454,7 +451,13 @@ export class CalciteTileSelect {
       "passive": false
     }, {
       "name": "calciteInternalCheckboxFocus",
-      "method": "checkboxFocusHandler",
+      "method": "checkboxFocusBlurHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteInternalCheckboxBlur",
+      "method": "checkboxFocusBlurHandler",
       "target": undefined,
       "capture": false,
       "passive": false
@@ -472,7 +475,13 @@ export class CalciteTileSelect {
       "passive": false
     }, {
       "name": "calciteInternalRadioButtonFocus",
-      "method": "radioButtonFocusHandler",
+      "method": "radioButtonFocusBlurHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteInternalRadioButtonBlur",
+      "method": "radioButtonFocusBlurHandler",
       "target": undefined,
       "capture": false,
       "passive": false