@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

package/dist/collection/components/calcite-icon/assets/calcite-icon/superscript32.json

@@ -0,0 +1 @@
+"M22 13h6v1h-7v-1.487c5.204-5.272 6-5.695 6-7.313 0-3.01-4.916-2.718-4.916-.327h-1c0-3.76 6.916-3.99 6.916.327 0 2.153-1.278 2.936-6 7.726zm-9.612-7l8.286 20h-1.106l-2.463-6H6.895l-2.463 6H3.326l8.286-20zm4.307 13L12 7.561 7.305 19z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/verticalDistribute16.json

@@ -0,0 +1 @@
+"M2 6v4h6v2H3v4h11v-4H9v-2h6V6H9V4h3V0H5v4h3v2zm11 7v2H4v-2zM6 3V1h5v2zm8 4v2H3V7z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/verticalDistribute24.json

@@ -0,0 +1 @@
+"M13 7h4V2H8v5h4v2H3v6h9v2H6v5h13v-5h-6v-2h9V9h-9zM9 6V3h7v3zm9 12v3H7v-3zm3-8v4H4v-4z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/verticalDistribute32.json

@@ -0,0 +1 @@
+"M17 9h5V2H11v7h5v3H4v8h12v3H8v7h17v-7h-8v-3h12v-8H17zm-5-1V3h9v5zm12 16v5H9v-5zm4-11v6H5v-6z"

package/dist/collection/components/calcite-icon/calcite-icon.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 { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { CSS } from "./resources";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/calcite-icon/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 = {
   icon: "icon",
   flipRtl: "flip-rtl"

package/dist/collection/components/calcite-icon/utils.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 { getAssetPath } from "@stencil/core";
 /**
  * Icon data cache.

package/dist/collection/components/calcite-inline-editable/calcite-inline-editable.js

@@ -1,8 +1,13 @@
-import { Component, Element, Event, h, Listen, Prop, Watch } from "@stencil/core";
+/*!
+ * 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, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
 import { TEXT, CSS } from "./resources";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 /**
- * @slot - slot for rendering a `<calcite-input>`
+ * @slot - A slot for adding a `calcite-input`.
  */
 export class CalciteInlineEditable {
   constructor() {
@@ -112,6 +117,7 @@ export class CalciteInlineEditable {
   componentWillLoad() {
     this.inputElement = this.el.querySelector("calcite-input");
     this.inputElement.disabled = this.disabled;
+    this.inputElement.label = this.inputElement.label || getLabelText(this);
     this.scale =
       this.scale || this.inputElement.scale || getElementProp(this.el, "scale", undefined);
   }
@@ -121,6 +127,12 @@ export class CalciteInlineEditable {
       this.htmlInput.tabIndex = -1;
     }
   }
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+  }
   render() {
     return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd },
       h("div", { class: CSS.inputWrapper },
@@ -143,22 +155,21 @@ export class CalciteInlineEditable {
       this.disableEditing();
     }
   }
-  handleLabelFocus(e) {
-    const htmlTarget = e.target;
-    if (!(htmlTarget.parentElement.tagName === "LABEL" ||
-      htmlTarget.parentElement.tagName === "CALCITE-LABEL")) {
-      return;
-    }
-    if (!htmlTarget.parentElement.contains(this.el)) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
+  onLabelClick() {
+    this.setFocus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  async setFocus() {
+    var _a, _b;
     if (this.editingEnabled) {
-      this.inputElement.setFocus();
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
     }
     else {
-      this.enableEditingButton.setFocus();
+      (_b = this.enableEditingButton) === null || _b === void 0 ? void 0 : _b.setFocus();
     }
   }
   get shouldShowControls() {
@@ -257,8 +268,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Click to edit\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Click to edit\""
           }],
         "text": "specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`"
       },
@@ -278,8 +289,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Cancel\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Cancel\""
           }],
         "text": "specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`"
       },
@@ -299,8 +310,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Save\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Save\""
           }],
         "text": "specify text to be user for the confirm changes button's aria-label, defaults to `Save`"
       },
@@ -358,8 +369,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -376,8 +387,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -394,8 +405,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -405,6 +416,24 @@ export class CalciteInlineEditable {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "disabled",
@@ -416,11 +445,5 @@ export class CalciteInlineEditable {
       "target": undefined,
       "capture": false,
       "passive": false
-    }, {
-      "name": "click",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
     }]; }
 }

package/dist/collection/components/calcite-inline-editable/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 = {
   wrapper: "calcite-inline-editable__wrapper",
   confirmChangesButton: "calcite-inline-editable__confirm-changes-button",

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

@@ -1,11 +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, State, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, setRequestedIcon, closestElementCrossShadowBoundary } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { getDecimalSeparator, delocalizeNumberString, localizeNumberString } from "../../utils/locale";
 import { numberKeys } from "../../utils/key";
 import { hiddenInputStyle } from "../../utils/form";
-import { isValidDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { CSS_UTILITY, TEXT } from "../../utils/resources";
 /**
  * @slot action - A slot for positioning a button next to an input
@@ -63,11 +68,6 @@ export class CalciteInput {
     this.type = "text";
     /** keep track of the rendered child type */
     this.childElType = "input";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.clearInputValue = (nativeEvent) => {
       this.setValue(null, nativeEvent, true);
     };
@@ -151,17 +151,14 @@ export class CalciteInput {
         return;
       }
       const isShiftTabEvent = event.shiftKey && event.key === "Tab";
-      if (supportedKeys.includes(event.key) &&
-        (!event.shiftKey || isShiftTabEvent) &&
-        !(parseInt(this.value) === 0 && getKey(event.key) === "0")) {
+      if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) {
         if (event.key === "Enter") {
           this.calciteInputChange.emit();
         }
         return;
       }
       const decimalSeparator = getDecimalSeparator(this.locale);
-      if (event.key === decimalSeparator &&
-        (this.step === "any" || (this.step && isValidDecimal(this.step)))) {
+      if (event.key === decimalSeparator) {
         if (!this.value && !this.childNumberEl.value) {
           return;
         }
@@ -172,26 +169,21 @@ export class CalciteInput {
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {
-      var _a, _b;
-      if (this.type !== "number") {
+      if ((nativeEvent instanceof KeyboardEvent && nativeEvent.repeat) || this.type !== "number") {
         return;
       }
-      const value = this.value;
-      const decimals = ((_b = (_a = this.step) === null || _a === void 0 ? void 0 : _a.toString().split(".")[1]) === null || _b === void 0 ? void 0 : _b.length) || 0;
       const inputMax = this.maxString ? parseFloat(this.maxString) : null;
       const inputMin = this.minString ? parseFloat(this.minString) : null;
-      const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-      const inputVal = value && value !== "" ? (decimals ? parseFloat(value) : parseInt(value)) : 0;
-      let newValue = value;
-      if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
-        newValue = (inputVal + inputStep).toFixed(decimals);
-      }
-      if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
-        newValue = (inputVal - inputStep).toFixed(decimals);
-      }
-      this.setValue(newValue, nativeEvent, true);
+      const valueNudgeDelayInMs = 500;
+      this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      this.nudgeNumberValueIntervalId = setInterval(() => {
+        this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      }, valueNudgeDelayInMs);
     };
-    this.numberButtonClickHandler = (event) => {
+    this.numberButtonMouseUpAndMouseOutHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
+    this.numberButtonMouseDownHandler = (event) => {
       // todo, when dropping ie11 support, refactor to use stepup/stepdown
       // prevent blur and re-focus of input on mousedown
       event.preventDefault();
@@ -237,6 +229,9 @@ export class CalciteInput {
         }
       }
     };
+    this.inputKeyUpHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
   }
   disabledWatcher() {
     this.setDisabledAction();
@@ -289,10 +284,12 @@ export class CalciteInput {
         this.value = undefined;
       }
     }
+    connectLabel(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.form) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", this.reset);
+    disconnectLabel(this);
   }
   componentWillLoad() {
     var _a, _b;
@@ -345,6 +342,27 @@ export class CalciteInput {
       (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
     }
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
+  incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent) {
+    const value = this.value;
+    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
+    const inputVal = value && value !== "" ? parseFloat(value) : 0;
+    let newValue = value;
+    if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
+      newValue = (inputVal + inputStep).toString();
+    }
+    if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
+      newValue = (inputVal - inputStep).toString();
+    }
+    this.setValue(newValue, nativeEvent, true);
+  }
   setDisabledAction() {
     if (!this.slottedActionEl) {
       return;
@@ -370,21 +388,21 @@ export class CalciteInput {
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" },
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" },
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "chevron-down", scale: "s" })));
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper },
       numberButtonsHorizontalUp,
       numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": this.label, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
+    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
     const childEl = [
-      h(this.childElType, { "aria-label": this.label, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
+      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
       this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper },
         h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
     ];
@@ -543,8 +561,8 @@ export class CalciteInput {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -635,8 +653,8 @@ export class CalciteInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Toggles locale formatting for numbers."
       },
@@ -690,8 +708,8 @@ export class CalciteInput {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "use maxLength instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use maxLength instead"
           }],
         "text": "Maximum length of text input."
       },
@@ -969,8 +987,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -987,8 +1005,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -1020,8 +1038,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "This event fires each time a new value is typed and committed."
       },

package/dist/collection/components/calcite-input/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-input/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 = {
   loader: "calcite-input__loader",
   clearButton: "calcite-input__clear-button",

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.js

@@ -1,9 +1,14 @@
+/*!
+ * 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, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData } from "../calcite-date-picker/utils";
 import { getElementDir } from "../../utils/dom";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate } from "../../utils/date";
 import { getKey } from "../../utils/key";
 import { TEXT } from "../calcite-date-picker/resources";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 const DEFAULT_PLACEMENT = "bottom-leading";
 export class CalciteInputDatePicker {
@@ -30,18 +35,8 @@ export class CalciteInputDatePicker {
     this.proximitySelectionDisabled = false;
     /** Layout */
     this.layout = "horizontal";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.focusedInput = "start";
     this.activeTransitionProp = "opacity";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active
@@ -130,17 +125,22 @@ export class CalciteInputDatePicker {
     }
     this.active = false;
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
   //  Public Methods
   //
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.startInput) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
   /** Updates the position of the component. */
   async reposition() {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: DEFAULT_PLACEMENT,
@@ -170,12 +170,14 @@ export class CalciteInputDatePicker {
       this.maxAsDate = dateFromISO(this.max);
     }
     this.createPopper();
+    connectLabel(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
   }
   disconnectedCallback() {
     this.destroyPopper();
+    disconnectLabel(this);
   }
   render() {
     var _a, _b;
@@ -188,7 +190,7 @@ export class CalciteInputDatePicker {
     const dir = getElementDir(this.el);
     return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", dir: dir, role: "application" },
       h("div", { class: "input-wrapper", ref: this.setStartWrapper },
-        h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
+        h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
       h("div", { "aria-hidden": (!this.active).toString(), class: "menu-container", ref: this.setMenuEl },
         h("div", { class: {
             ["calendar-picker-wrapper"]: true,
@@ -215,6 +217,14 @@ export class CalciteInputDatePicker {
         : startWrapper || endWrapper;
     this.createPopper();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
@@ -573,8 +583,8 @@ export class CalciteInputDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Previous month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous month\""
           }],
         "text": "Localized string for \"previous month\" (used for aria label)"
       },
@@ -594,8 +604,8 @@ export class CalciteInputDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Next month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next month\""
           }],
         "text": "Localized string for \"next month\" (used for aria label)"
       },
@@ -782,8 +792,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
           }],
         "text": "Trigger calcite date change when a user changes the date range."
       },
@@ -805,8 +815,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -823,8 +833,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -835,6 +845,22 @@ export class CalciteInputDatePicker {
       }
     }]; }
   static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Updates the position of the component.",
+        "tags": []
+      }
+    },
     "reposition": {
       "complexType": {
         "signature": "() => Promise<void>",