@esri/calcite-components 1.0.0-next.292 → 1.0.0-next.296

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

@@ -152,8 +152,7 @@
 }
 
 .thumb .handle__label {
-  font-size: 0.75rem;
-  line-height: 1.5;
+  font-size: var(--calcite-font-size--2);
   font-weight: 500;
   line-height: 1;
   color: var(--calcite-ui-text-2);
@@ -368,8 +367,7 @@
 
 .tick__label {
   position: absolute;
-  font-size: 0.75rem;
-  line-height: 1.5;
+  font-size: var(--calcite-font-size--2);
   font-weight: 500;
   color: var(--calcite-ui-text-2);
   width: 4em;
@@ -422,4 +420,19 @@
   right: unset;
   left: 0;
   text-align: left;
+}
+
+::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-slider/calcite-slider.js

@@ -8,6 +8,7 @@ import { getKey } from "../../utils/key";
 import { intersects } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSlider {
   constructor() {
     //--------------------------------------------------------------------------
@@ -35,6 +36,10 @@ export class CalciteSlider {
     this.mirrored = false;
     /** Use finer point for handles */
     this.precise = false;
+    /**
+     * When true, makes the component required for form-submission.
+     */
+    this.required = false;
     /** When true, enables snap selection along the step interval */
     this.snap = false;
     /** Interval to move on up/down keys */
@@ -107,14 +112,17 @@ export class CalciteSlider {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
     this.tickValues = this.generateTickValues();
     this.value = this.clamp(this.value);
+    afterConnectDefaultValueSet(this, this.value);
     if (this.snap) {
       this.value = this.getClosestStep(this.value);
     }
@@ -292,11 +300,12 @@ export class CalciteSlider {
         this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
         !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
         this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
-        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle)));
+        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle,
+        h(HiddenFormInputSlot, { component: this }))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
-      h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, width: 300 }))) : null;
+      h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min, width: 300 }))) : null;
   }
   renderTickLabel(tick) {
     const isMinTickLabel = tick === this.min;
@@ -980,6 +989,23 @@ export class CalciteSlider {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the slider"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "pageStep": {
       "type": "number",
       "mutable": false,
@@ -1015,6 +1041,24 @@ export class CalciteSlider {
       "reflect": false,
       "defaultValue": "false"
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "snap": {
       "type": "boolean",
       "mutable": false,
@@ -1132,8 +1176,8 @@ export class CalciteSlider {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteSliderInput instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calciteSliderInput instead"
           }],
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },

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

@@ -144,8 +144,8 @@ export class CalciteSplitButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Is the dropdown currently active or not"
       },

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

@@ -317,8 +317,8 @@ export class CalciteStepper {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       }
@@ -332,8 +332,8 @@ export class CalciteStepper {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "This event fires when the active stepper item has changed."
       },

package/dist/collection/components/calcite-stepper-item/calcite-stepper-item.js

@@ -280,8 +280,8 @@ export class CalciteStepperItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -300,8 +300,8 @@ export class CalciteStepperItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -321,8 +321,8 @@ export class CalciteStepperItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -347,8 +347,8 @@ export class CalciteStepperItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -365,8 +365,8 @@ export class CalciteStepperItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -383,8 +383,8 @@ export class CalciteStepperItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -401,8 +401,8 @@ export class CalciteStepperItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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.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

@@ -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

@@ -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": ""
       },