@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

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

@@ -1,20 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
-import { Component, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
+import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate, setEndOfDay } from "../../utils/date";
 import { TEXT } from "../date-picker/resources";
 import { CSS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
+import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
-import { debounce } from "lodash-es";
+import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
+import { numberKeys } from "../../utils/key";
 export class InputDatePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -23,55 +24,53 @@ export class InputDatePicker {
     //
     //--------------------------------------------------------------------------
     /**
-     * When false, the component won't be interactive.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, still focusable but controls are gone and the value cannot be modified.
+     * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
     /**
-     * Expand or collapse when calendar does not have input
+     * When `true`, the component is active.
      *
-     * @deprecated use open instead
+     * @deprecated use `open` instead.
      */
     this.active = false;
-    /** Expand or collapse when calendar does not have input */
+    /** When `true`, displays the `calcite-date-picker` component. */
     this.open = false;
     /**
-     * Localized string for "previous month" (used for aria label)
+     * Accessible name for the component's previous month button.
      *
      * @default "Previous month"
      */
     this.intlPrevMonth = TEXT.prevMonth;
     /**
-     * Localized string for "next month" (used for aria label)
+     * Accessible name for the component's next month button.
      *
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
     /**
-     * Localized string for "year" (used for aria label)
+     * Accessible name for the component's year input.
      *
      * @default "Year"
      */
     this.intlYear = TEXT.year;
-    /** BCP 47 language tag for desired language and country format */
-    this.locale = document.documentElement.lang || "en";
-    /** specify the scale of the date picker */
+    /** Specifies the size of the component. */
     this.scale = "m";
     /**
-     * Determines where the date-picker component will be positioned relative to the input.
+     * Specifies the placement of the `calcite-date-picker` relative to the component.
      *
      * @default "bottom-start"
      */
     this.placement = defaultMenuPlacement;
-    /** Range mode activation */
+    /** When `true`, activates a range for the component. */
     this.range = false;
     /**
-     * When true, makes the component required for form-submission.
+     * When `true`, the component must have a value in order for the form to submit.
      *
      * @internal
      */
@@ -79,22 +78,28 @@ export class InputDatePicker {
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
-    /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
+    /**
+     * When `true`, disables the default behavior on the third click of narrowing or extending the range.
+     * Instead starts a new range.
+     */
     this.proximitySelectionDisabled = false;
-    /** Layout */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
+    this.effectiveLocale = "";
     this.focusedInput = "start";
+    this.globalAttributes = {};
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -142,8 +147,17 @@ export class InputDatePicker {
       }
       this.focusedInput = "end";
     };
-    this.inputInput = (event) => {
-      this.input(event.detail.value);
+    this.startInputInput = () => {
+      const parsedValue = this.parseNumerals(this.startInput.value);
+      const formattedValue = this.formatNumerals(parsedValue);
+      this.startInput.value = formattedValue;
+      this.input(parsedValue);
+    };
+    this.endInputInput = () => {
+      const parsedValue = this.parseNumerals(this.endInput.value);
+      const formattedValue = this.formatNumerals(parsedValue);
+      this.endInput.value = formattedValue;
+      this.input(parsedValue);
     };
     this.setFloatingEl = (el) => {
       if (el) {
@@ -186,6 +200,25 @@ export class InputDatePicker {
         (_b = this.startInput) === null || _b === void 0 ? void 0 : _b.setFocus();
       }
     };
+    this.commonDateSeparators = [".", "-", "/"];
+    this.formatNumerals = (value) => value
+      ? value
+        .split("")
+        .map((char) => 
+      // convert common separators to the locale's
+      this.commonDateSeparators.includes(char)
+        ? this.localeData.separator
+        : numberKeys.includes(char)
+          ? numberStringFormatter.numberFormatter.format(Number(char))
+          : char)
+        .join("")
+      : "";
+    this.parseNumerals = (value) => value
+      ? value
+        .split("")
+        .map((char) => numberKeys.includes(char) ? numberStringFormatter.delocalize(char) : char)
+        .join("")
+      : "";
   }
   handleDisabledAndReadOnlyChange(value) {
     if (!value) {
@@ -211,7 +244,7 @@ export class InputDatePicker {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   onMinChanged(min) {
     if (min) {
@@ -229,13 +262,21 @@ export class InputDatePicker {
   openHandler(value) {
     this.active = value;
     if (this.disabled || this.readOnly) {
+      if (!value) {
+        updateAfterClose(this.floatingEl);
+      }
       this.open = false;
       return;
     }
-    this.debouncedReposition();
+    if (value) {
+      this.reposition(true);
+    }
+    else {
+      updateAfterClose(this.floatingEl);
+    }
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   //--------------------------------------------------------------------------
   //
@@ -256,22 +297,26 @@ export class InputDatePicker {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Updates the position of the component. */
+  /** Sets focus on 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() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl,
       referenceEl,
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
       type: "menu"
-    });
+    }, delayed);
   }
   // --------------------------------------------------------------------------
   //
@@ -279,6 +324,7 @@ export class InputDatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     const isOpen = this.active || this.open;
     isOpen && this.activeHandler(isOpen);
     isOpen && this.openHandler(isOpen);
@@ -308,7 +354,12 @@ export class InputDatePicker {
     connectForm(this);
     connectOpenCloseComponent(this);
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
+    numberStringFormatter.numberFormatOptions = {
+      numberingSystem: this.numberingSystem,
+      locale: this.effectiveLocale,
+      useGrouping: false
+    };
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -316,13 +367,14 @@ export class InputDatePicker {
     this.onMaxChanged(this.max);
   }
   componentDidLoad() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
+    disconnectLocalized(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -334,33 +386,24 @@ export class InputDatePicker {
     const endDate = this.range
       ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
       : null;
-    const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
-    const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" },
-      this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" },
-        h("div", { class: "input-wrapper", ref: this.setStartWrapper },
-          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
-        h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
-            [CSS.menu]: true,
-            [CSS.menuActive]: this.open
-          }, ref: this.setFloatingEl },
-          h("div", { class: {
-              ["calendar-picker-wrapper"]: true,
-              ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
-              [FloatingCSS.animation]: true,
-              [FloatingCSS.animationActive]: this.open
-            }, ref: this.setTransitionEl },
-            h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
-        this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" },
-          h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))),
-        this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" },
-          h("calcite-icon", { icon: "arrow-down", scale: "s" }))),
-        this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper },
-          h("calcite-input", { class: {
-              input: true,
-              "border-top-color-one": this.layout === "vertical" && this.range
-            }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
-      h(HiddenFormInputSlot, { component: this })));
+    const formattedEndDate = endDate
+      ? this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale))
+      : "";
+    const formattedDate = date
+      ? this.formatNumerals(date.toLocaleDateString(this.effectiveLocale))
+      : "";
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), lang: this.effectiveLocale, "number-button-type": "none", numberingSystem: this.numberingSystem, onCalciteInputInput: this.startInputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })), h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
+        [CSS.menu]: true,
+        [CSS.menuActive]: this.open
+      }, ref: this.setFloatingEl }, h("div", { class: {
+        ["calendar-picker-wrapper"]: true,
+        ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
+        [FloatingCSS.animation]: true,
+        [FloatingCSS.animationActive]: this.open
+      }, ref: this.setTransitionEl }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, lang: this.effectiveLocale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, numberingSystem: this.numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
+        input: true,
+        "border-top-color-one": this.layout === "vertical" && this.range
+      }, disabled: disabled, icon: "calendar", lang: this.effectiveLocale, "number-button-type": "none", numberingSystem: this.numberingSystem, onCalciteInputInput: this.endInputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -395,8 +438,7 @@ export class InputDatePicker {
     if (!Build.isBrowser) {
       return;
     }
-    const { locale } = this;
-    this.localeData = await getLocaleData(locale);
+    this.localeData = await getLocaleData(this.effectiveLocale);
   }
   clearCurrentValue() {
     if (!this.range) {
@@ -472,19 +514,20 @@ export class InputDatePicker {
    * @param target
    */
   blur(target) {
-    const { locale, focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
+    const { focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
+    const locale = this.effectiveLocale;
     const date = this.getDateFromInput(target.value);
     if (!date) {
       if (!range && valueAsDate) {
-        target.value = Array.isArray(valueAsDate)
+        target.value = this.formatNumerals(Array.isArray(valueAsDate)
           ? valueAsDate[focusedInput === "end" ? 1 : 0].toLocaleDateString(locale)
-          : valueAsDate.toLocaleDateString(locale);
+          : valueAsDate.toLocaleDateString(locale));
       }
       else if (focusedInput === "start" && startAsDate) {
-        target.value = startAsDate.toLocaleDateString(locale);
+        target.value = this.formatNumerals(startAsDate.toLocaleDateString(locale));
       }
       else if (focusedInput === "end" && endAsDate) {
-        target.value = endAsDate.toLocaleDateString(locale);
+        target.value = this.formatNumerals(endAsDate.toLocaleDateString(locale));
       }
     }
   }
@@ -531,789 +574,843 @@ export class InputDatePicker {
   }
   static get is() { return "calcite-input-date-picker"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["input-date-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["input-date-picker.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When false, the component won't be interactive."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readOnly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
-          }],
-        "text": "When true, still focusable but controls are gone and the value cannot be modified."
+  static get originalStyleUrls() {
+    return {
+      "$": ["input-date-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input-date-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "read-only",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+            }],
+          "text": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified."
+        },
+        "attribute": "read-only",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selected date"
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's value."
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "attribute": "value",
-      "reflect": false
-    },
-    "flipPlacements": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "EffectivePlacement[]",
-        "resolved": "Placement[]",
-        "references": {
-          "EffectivePlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "flipPlacements": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EffectivePlacement[]",
+          "resolved": "Placement[]",
+          "references": {
+            "EffectivePlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the available placements that can be used when a flip occurs."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the available placements that can be used when a flip occurs."
-      }
-    },
-    "headingLevel": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "HeadingLevel",
-        "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-        "references": {
-          "HeadingLevel": {
-            "location": "import",
-            "path": "../functional/Heading"
+      "headingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "HeadingLevel",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "HeadingLevel": {
+              "location": "import",
+              "path": "../functional/Heading"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Number at which section headings should start for this component."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the number at which section headings should start."
+        },
+        "attribute": "heading-level",
+        "reflect": true
       },
-      "attribute": "heading-level",
-      "reflect": true
-    },
-    "valueAsDate": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date | Date[]",
-        "resolved": "Date | Date[]",
-        "references": {
-          "Date": {
-            "location": "global"
+      "valueAsDate": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date | Date[]",
+          "resolved": "Date | Date[]",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The component's value as a full date object."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Selected date as full date object"
-      }
-    },
-    "startAsDate": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "startAsDate": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `valueAsDate` instead."
+            }],
+          "text": "The component's start date as a full date object."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use valueAsDate instead"
-          }],
-        "text": "Selected start date as full date object"
-      }
-    },
-    "endAsDate": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "endAsDate": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `valueAsDate` instead."
+            }],
+          "text": "The component's end date as a full date object."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use valueAsDate instead"
-          }],
-        "text": "Selected end date as full date object"
-      }
-    },
-    "minAsDate": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "minAsDate": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the earliest allowed date as a full date object."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Earliest allowed date as full date object"
-      }
-    },
-    "maxAsDate": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "maxAsDate": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the latest allowed date as a full date object."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Latest allowed date as full date object"
-      }
-    },
-    "min": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Earliest allowed date (\"yyyy-mm-dd\")"
-      },
-      "attribute": "min",
-      "reflect": true
-    },
-    "max": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Latest allowed date (\"yyyy-mm-dd\")"
-      },
-      "attribute": "max",
-      "reflect": true
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use open instead"
-          }],
-        "text": "Expand or collapse when calendar does not have input"
-      },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expand or collapse when calendar does not have input"
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The picker's name. Gets submitted with the form."
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "intlPrevMonth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Previous month\""
-          }],
-        "text": "Localized string for \"previous month\" (used for aria label)"
+      "min": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the earliest allowed date (\"yyyy-mm-dd\")."
+        },
+        "attribute": "min",
+        "reflect": false
       },
-      "attribute": "intl-prev-month",
-      "reflect": false,
-      "defaultValue": "TEXT.prevMonth"
-    },
-    "intlNextMonth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "max": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the latest allowed date (\"yyyy-mm-dd\")."
+        },
+        "attribute": "max",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Next month\""
-          }],
-        "text": "Localized string for \"next month\" (used for aria label)"
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `open` instead."
+            }],
+          "text": "When `true`, the component is active."
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "intl-next-month",
-      "reflect": false,
-      "defaultValue": "TEXT.nextMonth"
-    },
-    "intlYear": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, displays the `calcite-date-picker` component."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Year\""
-          }],
-        "text": "Localized string for \"year\" (used for aria label)"
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the name of the component on form submission."
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "intl-year",
-      "reflect": false,
-      "defaultValue": "TEXT.year"
-    },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlPrevMonth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Previous month\""
+            }],
+          "text": "Accessible name for the component's previous month button."
+        },
+        "attribute": "intl-prev-month",
+        "reflect": false,
+        "defaultValue": "TEXT.prevMonth"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "BCP 47 language tag for desired language and country format"
+      "intlNextMonth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Next month\""
+            }],
+          "text": "Accessible name for the component's next month button."
+        },
+        "attribute": "intl-next-month",
+        "reflect": false,
+        "defaultValue": "TEXT.nextMonth"
       },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "document.documentElement.lang || \"en\""
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"s\" | \"m\" | \"l\"",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {}
+      "intlYear": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Year\""
+            }],
+          "text": "Accessible name for the component's year input."
+        },
+        "attribute": "intl-year",
+        "reflect": false,
+        "defaultValue": "TEXT.year"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the scale of the date picker"
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "set the global `lang` attribute on the element instead."
+            }, {
+              "name": "mdn",
+              "text": "[lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)"
+            }],
+          "text": "Specifies the BCP 47 language tag for the desired language and country format."
+        },
+        "attribute": "locale",
+        "reflect": false
       },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "MenuPlacement",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
-        "references": {
-          "MenuPlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"bottom-start\""
-          }],
-        "text": "Determines where the date-picker component will be positioned relative to the input."
-      },
-      "attribute": "placement",
-      "reflect": true,
-      "defaultValue": "defaultMenuPlacement"
-    },
-    "range": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Range mode activation"
-      },
-      "attribute": "range",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "When true, makes the component required for form-submission."
-      },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "start": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use value instead"
-          }],
-        "text": "Selected start date"
-      },
-      "attribute": "start",
-      "reflect": true
-    },
-    "end": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed."
+        },
+        "attribute": "numbering-system",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use value instead"
-          }],
-        "text": "Selected end date"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"s\" | \"m\" | \"l\"",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       },
-      "attribute": "end",
-      "reflect": true
-    },
-    "overlayPositioning": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OverlayPositioning",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {
-          "OverlayPositioning": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "MenuPlacement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
+          "references": {
+            "MenuPlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
-      },
-      "attribute": "overlay-positioning",
-      "reflect": true,
-      "defaultValue": "\"absolute\""
-    },
-    "proximitySelectionDisabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"bottom-start\""
+            }],
+          "text": "Specifies the placement of the `calcite-date-picker` relative to the component."
+        },
+        "attribute": "placement",
+        "reflect": true,
+        "defaultValue": "defaultMenuPlacement"
       },
-      "attribute": "proximity-selection-disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"horizontal\" | \"vertical\"",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {}
+      "range": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, activates a range for the component."
+        },
+        "attribute": "range",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Layout"
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When `true`, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "layout",
-      "reflect": true,
-      "defaultValue": "\"horizontal\""
-    }
-  }; }
-  static get states() { return {
-    "focusedInput": {},
-    "localeData": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteDatePickerChange",
-      "name": "calciteDatePickerChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use `calciteInputDatePickerChange` instead."
-          }],
-        "text": "Trigger calcite date change when a user changes the date."
+      "start": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `value` instead."
+            }],
+          "text": "The component's start date."
+        },
+        "attribute": "start",
+        "reflect": true
       },
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "calciteDatePickerRangeChange",
-      "name": "calciteDatePickerRangeChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "[DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
-          }, {
-            "name": "deprecated",
-            "text": "use `calciteInputDatePickerChange` instead."
-          }],
-        "text": "Trigger calcite date change when a user changes the date range."
+      "end": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `value` instead."
+            }],
+          "text": "The component's end date."
+        },
+        "attribute": "end",
+        "reflect": true
       },
-      "complexType": {
-        "original": "DateRangeChange",
-        "resolved": "DateRangeChange",
-        "references": {
-          "DateRangeChange": {
-            "location": "import",
-            "path": "../date-picker/interfaces"
+      "overlayPositioning": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OverlayPositioning",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "OverlayPositioning": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      }
-    }, {
-      "method": "calciteInputDatePickerChange",
-      "name": "calciteInputDatePickerChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "This event fires when the input date picker value changes."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInputDatePickerBeforeClose",
-      "name": "calciteInputDatePickerBeforeClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is requested to be closed and before the closing transition begins."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInputDatePickerClose",
-      "name": "calciteInputDatePickerClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is closed and animation is complete."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInputDatePickerBeforeOpen",
-      "name": "calciteInputDatePickerBeforeOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`."
+        },
+        "attribute": "overlay-positioning",
+        "reflect": true,
+        "defaultValue": "\"absolute\""
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInputDatePickerOpen",
-      "name": "calciteInputDatePickerOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is open and animation is complete."
+      "proximitySelectionDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, disables the default behavior on the third click of narrowing or extending the range.\nInstead starts a new range."
+        },
+        "attribute": "proximity-selection-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"horizontal\" | \"vertical\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the layout of the component."
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"horizontal\""
       }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {},
+      "focusedInput": {},
+      "globalAttributes": {},
+      "localeData": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteDatePickerChange",
+        "name": "calciteDatePickerChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `calciteInputDatePickerChange` instead."
+            }],
+          "text": "Fires when a user changes the date."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        }
+      }, {
+        "method": "calciteDatePickerRangeChange",
+        "name": "calciteDatePickerRangeChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "[DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/date-picker/interfaces.ts#L1)"
+            }, {
+              "name": "deprecated",
+              "text": "use `calciteInputDatePickerChange` instead."
+            }],
+          "text": "Fires when a user changes the date range."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Updates the position of the component.",
-        "tags": []
-      }
-    },
-    "reposition": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "DateRangeChange",
+          "resolved": "DateRangeChange",
+          "references": {
+            "DateRangeChange": {
+              "location": "import",
+              "path": "../date-picker/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "calciteInputDatePickerChange",
+        "name": "calciteInputDatePickerChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component's value changes."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInputDatePickerBeforeClose",
+        "name": "calciteInputDatePickerBeforeClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is requested to be closed and before the closing transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInputDatePickerClose",
+        "name": "calciteInputDatePickerClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is closed and animation is complete."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInputDatePickerBeforeOpen",
+        "name": "calciteInputDatePickerBeforeOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInputDatePickerOpen",
+        "name": "calciteInputDatePickerOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is open and animation is complete."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Updates the position of the component.",
-        "tags": []
+      "reposition": {
+        "complexType": {
+          "signature": "(delayed?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "delayed"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Updates the position of the component.",
+          "tags": [{
+              "name": "param",
+              "text": "delayed"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "handleDisabledAndReadOnlyChange"
-    }, {
-      "propName": "readOnly",
-      "methodName": "handleDisabledAndReadOnlyChange"
-    }, {
-      "propName": "value",
-      "methodName": "valueHandler"
-    }, {
-      "propName": "flipPlacements",
-      "methodName": "flipPlacementsHandler"
-    }, {
-      "propName": "min",
-      "methodName": "onMinChanged"
-    }, {
-      "propName": "max",
-      "methodName": "onMaxChanged"
-    }, {
-      "propName": "active",
-      "methodName": "activeHandler"
-    }, {
-      "propName": "open",
-      "methodName": "openHandler"
-    }, {
-      "propName": "overlayPositioning",
-      "methodName": "overlayPositioningHandler"
-    }, {
-      "propName": "layout",
-      "methodName": "setReferenceEl"
-    }, {
-      "propName": "focusedInput",
-      "methodName": "setReferenceEl"
-    }, {
-      "propName": "start",
-      "methodName": "startWatcher"
-    }, {
-      "propName": "end",
-      "methodName": "endWatcher"
-    }, {
-      "propName": "locale",
-      "methodName": "loadLocaleData"
-    }]; }
-  static get listeners() { return [{
-      "name": "calciteDatePickerChange",
-      "method": "handleDateOrRangeChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "calciteDatePickerRangeChange",
-      "method": "handleDateOrRangeChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "calciteDaySelect",
-      "method": "calciteDaySelectHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "handleDisabledAndReadOnlyChange"
+      }, {
+        "propName": "readOnly",
+        "methodName": "handleDisabledAndReadOnlyChange"
+      }, {
+        "propName": "value",
+        "methodName": "valueHandler"
+      }, {
+        "propName": "flipPlacements",
+        "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "min",
+        "methodName": "onMinChanged"
+      }, {
+        "propName": "max",
+        "methodName": "onMaxChanged"
+      }, {
+        "propName": "active",
+        "methodName": "activeHandler"
+      }, {
+        "propName": "open",
+        "methodName": "openHandler"
+      }, {
+        "propName": "overlayPositioning",
+        "methodName": "overlayPositioningHandler"
+      }, {
+        "propName": "layout",
+        "methodName": "setReferenceEl"
+      }, {
+        "propName": "focusedInput",
+        "methodName": "setReferenceEl"
+      }, {
+        "propName": "start",
+        "methodName": "startWatcher"
+      }, {
+        "propName": "end",
+        "methodName": "endWatcher"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "loadLocaleData"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "calciteDatePickerChange",
+        "method": "handleDateOrRangeChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteDatePickerRangeChange",
+        "method": "handleDateOrRangeChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteDaySelect",
+        "method": "calciteDaySelectHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }