@esri/calcite-components 1.0.0-beta.98 → 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.98
+ * 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);
       }
     };
@@ -184,7 +153,7 @@ export class DatePicker {
         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)) {
@@ -230,11 +199,34 @@ 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") {
@@ -261,6 +253,9 @@ export class DatePicker {
       this.maxAsDate = dateFromISO(max);
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -268,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);
     }
@@ -291,14 +279,15 @@ 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 && 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)
@@ -306,7 +295,7 @@ export class DatePicker {
       : 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;
     }
@@ -325,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;
@@ -365,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 })
     ]);
   }
   /**
@@ -379,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();
     }
   }
   /**
@@ -395,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;
   }
@@ -426,6 +400,7 @@ export class DatePicker {
   }
   static get is() { return "calcite-date-picker"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["date-picker.scss"]
@@ -455,7 +430,7 @@ export class DatePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Active date"
+          "text": "Specifies the component's active date."
         }
       },
       "activeRange": {
@@ -467,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
@@ -484,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
@@ -509,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
@@ -527,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": {
@@ -590,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": {
@@ -609,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": {
@@ -624,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
@@ -641,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,
@@ -749,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."
@@ -769,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,
@@ -787,69 +632,75 @@ 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"
+        }
       }
     };
   }
@@ -857,8 +708,10 @@ export class DatePicker {
     return {
       "activeStartDate": {},
       "activeEndDate": {},
-      "globalAttributes": {},
+      "startAsDate": {},
+      "endAsDate": {},
       "effectiveLocale": {},
+      "defaultMessages": {},
       "localeData": {},
       "hoverRange": {}
     };
@@ -872,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",
@@ -890,21 +739,13 @@ 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": {}
         }
       }];
   }
@@ -929,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"