@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

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

@@ -1,46 +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.
- * v1.0.0-beta.97
+ * v1.0.0-beta.99
  */
 import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "./utils";
 import { dateFromRange, dateFromISO, dateToISO, getDaysDiff, setEndOfDay } from "../../utils/date";
-import { HEADING_LEVEL, TEXT } from "./resources";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { HEADING_LEVEL } from "./resources";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 export class DatePicker {
   constructor() {
-    /**
-     * Localized string for "previous month" (used for aria label)
-     *
-     * @default "Previous month"
-     */
-    this.intlPrevMonth = TEXT.prevMonth;
-    /**
-     * Localized string for "next month" (used for aria label)
-     *
-     * @default "Next month"
-     */
-    this.intlNextMonth = TEXT.nextMonth;
-    /**
-     * Localized string for "year" (used for aria label)
-     *
-     * @default "Year"
-     */
-    this.intlYear = TEXT.year;
-    /** specify the scale of the date picker */
-    this.scale = "m";
-    /** Range mode activation */
-    this.range = false;
-    /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
-    this.proximitySelectionDisabled = false;
-    this.globalAttributes = {};
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -156,16 +126,15 @@ export class DatePicker {
      * Reset active date and close
      */
     this.reset = () => {
-      var _a, _b, _c, _d, _e, _f;
       if (!Array.isArray(this.valueAsDate) &&
         this.valueAsDate &&
-        ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
+        this.valueAsDate?.getTime() !== this.activeDate?.getTime()) {
         this.activeDate = new Date(this.valueAsDate);
       }
-      if (this.startAsDate && ((_c = this.startAsDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = this.activeStartDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
+      if (this.startAsDate && this.startAsDate?.getTime() !== this.activeStartDate?.getTime()) {
         this.activeStartDate = new Date(this.startAsDate);
       }
-      if (this.endAsDate && ((_e = this.endAsDate) === null || _e === void 0 ? void 0 : _e.getTime()) !== ((_f = this.activeEndDate) === null || _f === void 0 ? void 0 : _f.getTime())) {
+      if (this.endAsDate && this.endAsDate?.getTime() !== this.activeEndDate?.getTime()) {
         this.activeEndDate = new Date(this.endAsDate);
       }
     };
@@ -176,11 +145,15 @@ export class DatePicker {
      */
     this.monthDateChange = (event) => {
       const date = new Date(event.detail);
+      const isoDate = dateToISO(date);
+      if (!this.range && isoDate === dateToISO(this.valueAsDate)) {
+        return;
+      }
       if (!this.range) {
-        this.value = date ? dateToISO(date) : "";
+        this.value = isoDate || "";
         this.valueAsDate = date || null;
         this.activeDate = date || null;
-        this.calciteDatePickerChange.emit(date);
+        this.calciteDatePickerChange.emit();
         return;
       }
       if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
@@ -226,11 +199,39 @@ export class DatePicker {
         }
         else {
           this.setStartDate(date);
-          this.endAsDate = this.activeEndDate = this.end = undefined;
+          this.endAsDate = this.activeEndDate = undefined;
         }
       }
-      this.calciteDatePickerChange.emit(date);
+      this.calciteDatePickerChange.emit();
     };
+    this.activeDate = undefined;
+    this.activeRange = undefined;
+    this.value = undefined;
+    this.headingLevel = undefined;
+    this.valueAsDate = undefined;
+    this.minAsDate = undefined;
+    this.maxAsDate = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.numberingSystem = undefined;
+    this.scale = "m";
+    this.range = false;
+    this.proximitySelectionDisabled = false;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.activeStartDate = undefined;
+    this.activeEndDate = undefined;
+    this.startAsDate = undefined;
+    this.endAsDate = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
+    this.localeData = undefined;
+    this.hoverRange = undefined;
+  }
+  activeDateWatcher(newActiveDate) {
+    if (this.activeRange === "end") {
+      this.activeEndDate = newActiveDate;
+    }
   }
   handleValueAsDate(date) {
     if (!Array.isArray(date) && date && date !== this.activeDate) {
@@ -252,6 +253,9 @@ export class DatePicker {
       this.maxAsDate = dateFromISO(max);
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -259,20 +263,13 @@ export class DatePicker {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectLocalized(this);
+    connectMessages(this);
     if (Array.isArray(this.value)) {
       this.valueAsDate = getValueAsDateRange(this.value);
-      this.start = this.value[0];
-      this.end = this.value[1];
     }
     else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
     }
-    if (this.start) {
-      this.setStartAsDate(dateFromISO(this.start));
-    }
-    if (this.end) {
-      this.setEndAsDate(dateFromISO(this.end));
-    }
     if (this.min) {
       this.minAsDate = dateFromISO(this.min);
     }
@@ -282,25 +279,23 @@ export class DatePicker {
   }
   disconnectedCallback() {
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
+    await setUpMessages(this);
   }
   render() {
-    var _a;
-    const date = dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
-    const activeStartDate = this.range
-      ? this.getActiveStartDate(date, this.minAsDate, this.maxAsDate)
-      : this.getActiveDate(date, this.minAsDate, this.maxAsDate);
-    let activeDate = activeStartDate;
-    const endDate = this.range
-      ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
+    const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    let activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
+    const endDate = this.range && Array.isArray(this.valueAsDate)
+      ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate)
       : null;
     const activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
     if ((this.activeRange === "end" ||
-      (((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.focused) === "end" && (!this.proximitySelectionDisabled || endDate))) &&
+      (this.hoverRange?.focused === "end" && (!this.proximitySelectionDisabled || endDate))) &&
       activeEndDate) {
       activeDate = activeEndDate;
     }
@@ -319,24 +314,17 @@ export class DatePicker {
       : this.maxAsDate;
     return (h(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   valueHandler(value) {
     if (Array.isArray(value)) {
       this.valueAsDate = getValueAsDateRange(value);
-      this.start = value[0];
-      this.end = value[1];
     }
     else if (value) {
       this.valueAsDate = dateFromISO(value);
-      this.start = "";
-      this.end = "";
     }
   }
-  startWatcher(start) {
-    this.setStartAsDate(dateFromISO(start));
-  }
-  endWatcher(end) {
-    this.setEndAsDate(dateFromISO(end));
-  }
   async loadLocaleData() {
     if (!Build.isBrowser) {
       return;
@@ -359,8 +347,8 @@ export class DatePicker {
    */
   renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
-      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
-      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerSelect: this.monthDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
+      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, localeData: this.localeData, max: maxDate, messages: this.messages, min: minDate, onCalciteInternalDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
+      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteInternalDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, onCalciteInternalDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
   /**
@@ -373,10 +361,7 @@ export class DatePicker {
     this.startAsDate = startDate;
     this.mostRecentRangeValue = this.startAsDate;
     if (emit) {
-      this.calciteDatePickerRangeChange.emit({
-        startDate,
-        endDate: this.endAsDate
-      });
+      this.calciteDatePickerRangeChange.emit();
     }
   }
   /**
@@ -389,19 +374,14 @@ export class DatePicker {
     this.endAsDate = endDate ? setEndOfDay(endDate) : endDate;
     this.mostRecentRangeValue = this.endAsDate;
     if (emit) {
-      this.calciteDatePickerRangeChange.emit({
-        startDate: this.startAsDate,
-        endDate
-      });
+      this.calciteDatePickerRangeChange.emit();
     }
   }
   setEndDate(date) {
-    this.end = date ? dateToISO(date) : "";
     this.setEndAsDate(date, true);
     this.activeEndDate = date || null;
   }
   setStartDate(date) {
-    this.start = date ? dateToISO(date) : "";
     this.setStartAsDate(date, true);
     this.activeStartDate = date || null;
   }
@@ -415,14 +395,12 @@ export class DatePicker {
   getActiveDate(value, min, max) {
     return dateFromRange(this.activeDate, min, max) || value || dateFromRange(new Date(), min, max);
   }
-  getActiveStartDate(value, min, max) {
-    return (dateFromRange(this.activeStartDate, min, max) || value || dateFromRange(new Date(), min, max));
-  }
   getActiveEndDate(value, min, max) {
     return (dateFromRange(this.activeEndDate, min, max) || value || dateFromRange(new Date(), min, max));
   }
   static get is() { return "calcite-date-picker"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["date-picker.scss"]
@@ -436,6 +414,25 @@ export class DatePicker {
   static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
+      "activeDate": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the component's active date."
+        }
+      },
       "activeRange": {
         "type": "string",
         "mutable": false,
@@ -445,10 +442,10 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Active range"
+          "text": "When `range` is true, specifies the active `range`. Where `\"start\"` specifies the starting range date and `\"end\"` the ending range date."
         },
         "attribute": "active-range",
         "reflect": true
@@ -462,10 +459,10 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Selected date"
+          "text": "Specifies the selected date as a string (`\"yyyy-mm-dd\"`), or an array of strings for `range` values (`[\"yyyy-mm-dd\", \"yyyy-mm-dd\"]`)."
         },
         "attribute": "value",
         "reflect": false
@@ -487,7 +484,7 @@ export class DatePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Number at which section headings should start for this component."
+          "text": "Specifies the number at which section headings should start."
         },
         "attribute": "heading-level",
         "reflect": true
@@ -505,54 +502,10 @@ export class DatePicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Selected date as full date object"
-        }
-      },
-      "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": "Selected start date as full date object"
-        }
-      },
-      "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": "Selected end date as full date object"
+          "text": "Specifies the selected date as a full date object (`new Date(\"yyyy-mm-dd\")`), or an array containing full date objects (`[new Date(\"yyyy-mm-dd\"), new Date(\"yyyy-mm-dd\")]`)."
         }
       },
       "minAsDate": {
@@ -568,10 +521,10 @@ export class DatePicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Earliest allowed date as full date object"
+          "text": "Specifies the earliest allowed date as a full date object (`new Date(\"yyyy-mm-dd\")`)."
         }
       },
       "maxAsDate": {
@@ -587,10 +540,10 @@ export class DatePicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Latest allowed date as full date object"
+          "text": "Specifies the latest allowed date as a full date object (`new Date(\"yyyy-mm-dd\")`)."
         }
       },
       "min": {
@@ -602,10 +555,10 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Earliest allowed date (\"yyyy-mm-dd\")"
+          "text": "Specifies the earliest allowed date (`\"yyyy-mm-dd\"`)."
         },
         "attribute": "min",
         "reflect": true
@@ -619,100 +572,14 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Latest allowed date (\"yyyy-mm-dd\")"
+          "text": "Specifies the latest allowed date (`\"yyyy-mm-dd\"`)."
         },
         "attribute": "max",
         "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)"
-        },
-        "attribute": "intl-prev-month",
-        "reflect": false,
-        "defaultValue": "TEXT.prevMonth"
-      },
-      "intlNextMonth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"Next month\""
-            }],
-          "text": "Localized string for \"next month\" (used for aria label)"
-        },
-        "attribute": "intl-next-month",
-        "reflect": false,
-        "defaultValue": "TEXT.nextMonth"
-      },
-      "intlYear": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"Year\""
-            }],
-          "text": "Localized string for \"year\" (used for aria label)"
-        },
-        "attribute": "intl-year",
-        "reflect": false,
-        "defaultValue": "TEXT.year"
-      },
-      "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
-      },
       "numberingSystem": {
         "type": "string",
         "mutable": false,
@@ -727,7 +594,7 @@ export class DatePicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed."
@@ -747,7 +614,7 @@ export class DatePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the scale of the date picker"
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true,
@@ -765,79 +632,86 @@ export class DatePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Range mode activation"
+          "text": "When `true`, activates the component's range mode to allow a start and end date."
         },
         "attribute": "range",
         "reflect": true,
         "defaultValue": "false"
       },
-      "start": {
-        "type": "string",
-        "mutable": true,
+      "proximitySelectionDisabled": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use value instead"
-            }],
-          "text": "Selected start date"
+          "tags": [],
+          "text": "When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range."
         },
-        "attribute": "start",
-        "reflect": true
+        "attribute": "proximity-selection-disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "end": {
-        "type": "string",
+      "messageOverrides": {
+        "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Partial<DatePickerMessages>",
+          "resolved": "{ nextMonth?: string; prevMonth?: string; year?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "DatePickerMessages": {
+              "location": "import",
+              "path": "./assets/date-picker/t9n"
+            }
+          }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use value instead"
-            }],
-          "text": "Selected end date"
-        },
-        "attribute": "end",
-        "reflect": true
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
       },
-      "proximitySelectionDisabled": {
-        "type": "boolean",
-        "mutable": false,
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "DatePickerMessages",
+          "resolved": "{ nextMonth: string; prevMonth: string; year: string; }",
+          "references": {
+            "DatePickerMessages": {
+              "location": "import",
+              "path": "./assets/date-picker/t9n"
+            }
+          }
         },
         "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."
-        },
-        "attribute": "proximity-selection-disabled",
-        "reflect": true,
-        "defaultValue": "false"
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
       }
     };
   }
   static get states() {
     return {
-      "activeDate": {},
       "activeStartDate": {},
       "activeEndDate": {},
-      "globalAttributes": {},
+      "startAsDate": {},
+      "endAsDate": {},
       "effectiveLocale": {},
+      "defaultMessages": {},
       "localeData": {},
       "hoverRange": {}
     };
@@ -851,16 +725,12 @@ export class DatePicker {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Trigger calcite date change when a user changes the date."
+          "text": "Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`."
         },
         "complexType": {
-          "original": "Date",
-          "resolved": "Date",
-          "references": {
-            "Date": {
-              "location": "global"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
         "method": "calciteDatePickerRangeChange",
@@ -869,27 +739,22 @@ export class DatePicker {
         "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)"
-            }],
-          "text": "Trigger calcite date change when a user changes the date range."
+          "tags": [],
+          "text": "Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`."
         },
         "complexType": {
-          "original": "DateRangeChange",
-          "resolved": "DateRangeChange",
-          "references": {
-            "DateRangeChange": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }];
   }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "activeDate",
+        "methodName": "activeDateWatcher"
+      }, {
         "propName": "valueAsDate",
         "methodName": "handleValueAsDate"
       }, {
@@ -905,14 +770,14 @@ export class DatePicker {
         "propName": "max",
         "methodName": "onMaxChanged"
       }, {
-        "propName": "value",
-        "methodName": "valueHandler"
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
-        "propName": "start",
-        "methodName": "startWatcher"
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }, {
-        "propName": "end",
-        "methodName": "endWatcher"
+        "propName": "value",
+        "methodName": "valueHandler"
       }, {
         "propName": "effectiveLocale",
         "methodName": "loadLocaleData"