@esri/calcite-components 1.0.0-next.647 → 1.0.0-next.649

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "./utils";
@@ -10,37 +10,6 @@ import { TEXT } 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
@@ -235,6 +204,33 @@ export class DatePicker {
       }
       this.calciteDatePickerChange.emit(date);
     };
+    this.activeDate = undefined;
+    this.activeRange = undefined;
+    this.value = undefined;
+    this.headingLevel = undefined;
+    this.valueAsDate = undefined;
+    this.startAsDate = undefined;
+    this.endAsDate = undefined;
+    this.minAsDate = undefined;
+    this.maxAsDate = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.intlPrevMonth = TEXT.prevMonth;
+    this.intlNextMonth = TEXT.nextMonth;
+    this.intlYear = TEXT.year;
+    this.locale = undefined;
+    this.numberingSystem = undefined;
+    this.scale = "m";
+    this.range = false;
+    this.start = undefined;
+    this.end = undefined;
+    this.proximitySelectionDisabled = false;
+    this.activeStartDate = undefined;
+    this.activeEndDate = undefined;
+    this.globalAttributes = {};
+    this.effectiveLocale = "";
+    this.localeData = undefined;
+    this.hoverRange = undefined;
   }
   activeDateWatcher(newActiveDate) {
     if (this.activeRange === "end") {
@@ -455,7 +451,7 @@ export class DatePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Active date"
+          "text": "Specifies the component's active date."
         }
       },
       "activeRange": {
@@ -467,10 +463,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 +480,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 +505,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,10 +523,10 @@ export class DatePicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Selected 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\")]`)."
         }
       },
       "startAsDate": {
@@ -546,13 +542,13 @@ export class DatePicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use valueAsDate instead"
+              "text": "use `valueAsDate` instead."
             }],
-          "text": "Selected start date as full date object"
+          "text": "Specifies the selected start date as a full date object."
         }
       },
       "endAsDate": {
@@ -568,13 +564,13 @@ export class DatePicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use valueAsDate instead"
+              "text": "use `valueAsDate` instead."
             }],
-          "text": "Selected end date as full date object"
+          "text": "Specifies the selected end date as a full date object."
         }
       },
       "minAsDate": {
@@ -590,10 +586,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 +605,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 +620,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,10 +637,10 @@ 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
@@ -658,13 +654,13 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "default",
               "text": "\"Previous month\""
             }],
-          "text": "Localized string for \"previous month\" (used for aria label)"
+          "text": "Accessible name for the component's previous month button."
         },
         "attribute": "intl-prev-month",
         "reflect": false,
@@ -679,13 +675,13 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "default",
               "text": "\"Next month\""
             }],
-          "text": "Localized string for \"next month\" (used for aria label)"
+          "text": "Accessible name for the component's next month button."
         },
         "attribute": "intl-next-month",
         "reflect": false,
@@ -700,13 +696,13 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "default",
               "text": "\"Year\""
             }],
-          "text": "Localized string for \"year\" (used for aria label)"
+          "text": "Accessible name for the component's year input."
         },
         "attribute": "intl-year",
         "reflect": false,
@@ -721,7 +717,7 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "deprecated",
@@ -749,7 +745,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 +765,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,7 +783,7 @@ 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,
@@ -802,13 +798,13 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use value instead"
+              "text": "use `value` instead."
             }],
-          "text": "Selected start date"
+          "text": "Specifies the selected start date."
         },
         "attribute": "start",
         "reflect": true
@@ -822,13 +818,13 @@ export class DatePicker {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use value instead"
+              "text": "use `value` instead."
             }],
-          "text": "Selected end date"
+          "text": "Specifies the selected end date."
         },
         "attribute": "end",
         "reflect": true
@@ -845,7 +841,7 @@ export class DatePicker {
         "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."
+          "text": "When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range."
         },
         "attribute": "proximity-selection-disabled",
         "reflect": true,
@@ -872,7 +868,7 @@ 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",
@@ -894,7 +890,7 @@ export class DatePicker {
               "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."
+          "text": "Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`."
         },
         "complexType": {
           "original": "DateRangeChange",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 export const TEXT = {
   nextMonth: "Next month",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 import { getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "../../utils/locale";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 import { Host, h } from "@stencil/core";
 import { closestElementCrossShadowBoundary, getElementDir } from "../../utils/dom";
@@ -11,24 +11,6 @@ import { isActivationKey } from "../../utils/key";
 import { numberStringFormatter } from "../../utils/locale";
 export class DatePickerDay {
   constructor() {
-    /** Date is outside of range and can't be selected */
-    this.disabled = false;
-    /** Date is in the current month. */
-    this.currentMonth = false;
-    /** Date is the current selected date of the picker */
-    this.selected = false;
-    /** Date is currently highlighted as part of the range */
-    this.highlighted = false;
-    /** Showing date range */
-    this.range = false;
-    /** Date is the start of date range */
-    this.startOfRange = false;
-    /** Date is the end of date range */
-    this.endOfRange = false;
-    /** Date is being hovered and within the set range */
-    this.rangeHover = false;
-    /** Date is actively in focus for keyboard navigation */
-    this.active = false;
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
@@ -43,6 +25,18 @@ export class DatePickerDay {
         event.preventDefault();
       }
     };
+    this.day = undefined;
+    this.disabled = false;
+    this.currentMonth = false;
+    this.selected = false;
+    this.highlighted = false;
+    this.range = false;
+    this.startOfRange = false;
+    this.endOfRange = false;
+    this.rangeHover = false;
+    this.active = false;
+    this.scale = undefined;
+    this.value = undefined;
   }
   mouseoverHandler() {
     this.calciteInternalDayHover.emit();
@@ -117,7 +111,7 @@ export class DatePickerDay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Date is outside of range and can't be selected"
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -153,7 +147,7 @@ export class DatePickerDay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Date is the current selected date of the picker"
+          "text": "When `true`, the component is selected."
         },
         "attribute": "selected",
         "reflect": true,
@@ -189,7 +183,7 @@ export class DatePickerDay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Showing date range"
+          "text": "When `true`, activates the component's range mode to allow a start and end date."
         },
         "attribute": "range",
         "reflect": true,
@@ -261,7 +255,7 @@ export class DatePickerDay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Date is actively in focus for keyboard navigation"
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -284,7 +278,7 @@ export class DatePickerDay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the scale of the date picker"
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true
@@ -305,7 +299,7 @@ export class DatePickerDay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Date value for the day."
+          "text": "The component's value."
         }
       }
     };

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

@@ -1,14 +1,12 @@
 /*!
  * 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-next.647
+ * v1.0.0-next.649
  */
 import { Host, h } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
 export class DatePickerMonth {
   constructor() {
-    /** Date currently active.*/
-    this.activeDate = new Date();
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
@@ -83,6 +81,15 @@ export class DatePickerMonth {
       const target = event.target;
       this.calciteDatePickerSelect.emit(target.value);
     };
+    this.selectedDate = undefined;
+    this.activeDate = new Date();
+    this.startDate = undefined;
+    this.endDate = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.scale = undefined;
+    this.localeData = undefined;
+    this.hoverRange = undefined;
   }
   mouseoutHandler() {
     this.calciteInternalDatePickerMouseOut.emit();
@@ -404,7 +411,7 @@ export class DatePickerMonth {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Minimum date of the calendar below which is disabled."
+          "text": "Specifies the earliest allowed date (`\"yyyy-mm-dd\"`)."
         }
       },
       "max": {
@@ -423,7 +430,7 @@ export class DatePickerMonth {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Maximum date of the calendar above which is disabled."
+          "text": "Specifies the latest allowed date (`\"yyyy-mm-dd\"`)."
         }
       },
       "scale": {
@@ -443,7 +450,7 @@ export class DatePickerMonth {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the scale of the date picker"
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 import { h, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, getOrder } from "../../utils/date";
@@ -12,12 +12,6 @@ import { numberStringFormatter } from "../../utils/locale";
 import { closestElementCrossShadowBoundary } from "../../utils/dom";
 export class DatePickerMonthHeader {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    this.globalAttributes = {};
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -75,6 +69,19 @@ export class DatePickerMonthHeader {
       event.preventDefault();
       this.calciteDatePickerSelect.emit(date);
     };
+    this.selectedDate = undefined;
+    this.activeDate = undefined;
+    this.headingLevel = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.intlPrevMonth = undefined;
+    this.intlNextMonth = undefined;
+    this.intlYear = undefined;
+    this.scale = undefined;
+    this.localeData = undefined;
+    this.globalAttributes = {};
+    this.nextMonthDate = undefined;
+    this.prevMonthDate = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -238,7 +245,7 @@ export class DatePickerMonthHeader {
         "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": false
@@ -259,7 +266,7 @@ export class DatePickerMonthHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Minimum date of the calendar below which is disabled."
+          "text": "Specifies the earliest allowed date (`\"yyyy-mm-dd\"`)."
         }
       },
       "max": {
@@ -278,7 +285,7 @@ export class DatePickerMonthHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Maximum date of the calendar above which is disabled."
+          "text": "Specifies the latest allowed date (`\"yyyy-mm-dd\"`)."
         }
       },
       "intlPrevMonth": {
@@ -293,7 +300,7 @@ export class DatePickerMonthHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Localized string for previous month."
+          "text": "Accessible name for the component's previous month button."
         },
         "attribute": "intl-prev-month",
         "reflect": false
@@ -310,7 +317,7 @@ export class DatePickerMonthHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Localized string for next month."
+          "text": "Accessible name for the component's next month button."
         },
         "attribute": "intl-next-month",
         "reflect": false
@@ -327,7 +334,7 @@ export class DatePickerMonthHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Localized string for year."
+          "text": "Accessible name for the component's year input."
         },
         "attribute": "intl-year",
         "reflect": false
@@ -349,7 +356,7 @@ export class DatePickerMonthHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the scale of the date picker"
+          "text": "Specifies the size of the component."
         },
         "attribute": "scale",
         "reflect": true

package/dist/collection/components/date-picker-month-header/resources.js

@@ -1,6 +1,6 @@
 /*!
  * 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-next.647
+ * v1.0.0-next.649
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

package/dist/collection/components/dropdown/dropdown.css

@@ -96,7 +96,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-dropdown-width: the width of the dropdown wrapper
+* @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.
 */
 :host {
   display: inline-flex;