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

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

@@ -1,12 +1,13 @@
 /*!
  * 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, Event, Element, Host, State, Watch, Build } from "@stencil/core";
+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 { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 export class DatePicker {
   constructor() {
     /**
@@ -27,14 +28,19 @@ export class DatePicker {
      * @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 */
     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
@@ -252,6 +258,7 @@ export class DatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     if (Array.isArray(this.value)) {
       this.valueAsDate = getValueAsDateRange(this.value);
       this.start = this.value[0];
@@ -272,6 +279,14 @@ export class DatePicker {
     if (this.max) {
       this.maxAsDate = dateFromISO(this.max);
     }
+    numberStringFormatter.numberFormatOptions = {
+      numberingSystem: this.numberingSystem,
+      locale: this.effectiveLocale,
+      useGrouping: false
+    };
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -331,8 +346,12 @@ export class DatePicker {
     if (!Build.isBrowser) {
       return;
     }
-    const { locale } = this;
-    this.localeData = await getLocaleData(locale);
+    numberStringFormatter.numberFormatOptions = {
+      numberingSystem: this.numberingSystem,
+      locale: this.effectiveLocale,
+      useGrouping: false
+    };
+    this.localeData = await getLocaleData(this.effectiveLocale);
   }
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
@@ -409,458 +428,499 @@ export class DatePicker {
   }
   static get is() { return "calcite-date-picker"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["date-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["date-picker.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["date-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["date-picker.css"]
+    };
+  }
   static get assetsDirs() { return ["assets"]; }
-  static get properties() { return {
-    "activeRange": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"start\" | \"end\"",
-        "resolved": "\"end\" | \"start\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Active range"
-      },
-      "attribute": "active-range",
-      "reflect": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Selected date"
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "headingLevel": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "HeadingLevel",
-        "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-        "references": {
-          "HeadingLevel": {
-            "location": "import",
-            "path": "../functional/Heading"
+  static get properties() {
+    return {
+      "activeRange": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"start\" | \"end\"",
+          "resolved": "\"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Active range"
+        },
+        "attribute": "active-range",
+        "reflect": true
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Selected date"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "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."
-      },
-      "attribute": "heading-level",
-      "reflect": true
-    },
-    "valueAsDate": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date | Date[]",
-        "resolved": "Date | Date[]",
-        "references": {
-          "Date": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number at which section headings should start for this component."
+        },
+        "attribute": "heading-level",
+        "reflect": true
+      },
+      "valueAsDate": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date | Date[]",
+          "resolved": "Date | Date[]",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Selected date as 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": "Selected start date as 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": "Selected end date as 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": "Earliest allowed date as 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": "Latest allowed date as 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
+      },
+      "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,
+        "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": 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
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"s\" | \"m\" | \"l\"",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the scale of the date picker"
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "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"
+      },
+      "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": [{
+              "name": "deprecated",
+              "text": "use value instead"
+            }],
+          "text": "Selected end date"
+        },
+        "attribute": "end",
+        "reflect": true
+      },
+      "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."
+        },
+        "attribute": "proximity-selection-disabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    },
-    "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
-    },
-    "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": [],
-        "text": "BCP 47 language tag for desired language and country format"
-      },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "document.documentElement.lang || \"en\""
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"s\" | \"m\" | \"l\"",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the scale of the date picker"
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "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"
-    },
-    "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": [{
-            "name": "deprecated",
-            "text": "use value instead"
-          }],
-        "text": "Selected end date"
-      },
-      "attribute": "end",
-      "reflect": true
-    },
-    "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."
-      },
-      "attribute": "proximity-selection-disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "activeDate": {},
-    "activeStartDate": {},
-    "activeEndDate": {},
-    "localeData": {},
-    "hoverRange": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteDatePickerChange",
-      "name": "calciteDatePickerChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Trigger calcite date change when a user changes the date."
-      },
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "activeDate": {},
+      "activeStartDate": {},
+      "activeEndDate": {},
+      "globalAttributes": {},
+      "effectiveLocale": {},
+      "localeData": {},
+      "hoverRange": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteDatePickerChange",
+        "name": "calciteDatePickerChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Trigger calcite date change 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)"
-          }],
-        "text": "Trigger calcite date change when a user changes the date range."
-      },
-      "complexType": {
-        "original": "DateRangeChange",
-        "resolved": "DateRangeChange",
-        "references": {
-          "DateRangeChange": {
-            "location": "import",
-            "path": "./interfaces"
+      }, {
+        "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)"
+            }],
+          "text": "Trigger calcite date change when a user changes the date range."
+        },
+        "complexType": {
+          "original": "DateRangeChange",
+          "resolved": "DateRangeChange",
+          "references": {
+            "DateRangeChange": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "valueAsDate",
-      "methodName": "handleValueAsDate"
-    }, {
-      "propName": "startAsDate",
-      "methodName": "handleRangeChange"
-    }, {
-      "propName": "endAsDate",
-      "methodName": "handleRangeChange"
-    }, {
-      "propName": "min",
-      "methodName": "onMinChanged"
-    }, {
-      "propName": "max",
-      "methodName": "onMaxChanged"
-    }, {
-      "propName": "value",
-      "methodName": "valueHandler"
-    }, {
-      "propName": "start",
-      "methodName": "startWatcher"
-    }, {
-      "propName": "end",
-      "methodName": "endWatcher"
-    }, {
-      "propName": "locale",
-      "methodName": "loadLocaleData"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "valueAsDate",
+        "methodName": "handleValueAsDate"
+      }, {
+        "propName": "startAsDate",
+        "methodName": "handleRangeChange"
+      }, {
+        "propName": "endAsDate",
+        "methodName": "handleRangeChange"
+      }, {
+        "propName": "min",
+        "methodName": "onMinChanged"
+      }, {
+        "propName": "max",
+        "methodName": "onMaxChanged"
+      }, {
+        "propName": "value",
+        "methodName": "valueHandler"
+      }, {
+        "propName": "start",
+        "methodName": "startWatcher"
+      }, {
+        "propName": "end",
+        "methodName": "endWatcher"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "loadLocaleData"
+      }];
+  }
 }