@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

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

@@ -1,15 +1,14 @@
 /*!
  * 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.596
+ * v1.0.0-next.598
  */
-import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
+import { h } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";
 import { isValidNumber } from "../../utils/number";
-import { formatTimePart, maxTenthForMinuteAndSecond, getMeridiem, isValidTime, localizeTimeStringToParts, parseTimeString, localizeTimePart, getLocaleHourCycle, getTimeParts } from "../../utils/time";
+import { formatTimePart, getLocaleHourCycle, getMeridiem, getTimeParts, isValidTime, localizeTimePart, localizeTimeStringToParts, maxTenthForMinuteAndSecond, parseTimeString } from "../../utils/time";
 import { CSS, TEXT } from "./resources";
-import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
-import { getLocale } from "../../utils/locale";
+import { connectLocalized, disconnectLocalized, updateEffectiveLocale } from "../../utils/locale";
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
@@ -94,7 +93,7 @@ export class TimePicker {
     this.intlSecondUp = TEXT.secondUp;
     /** Specifies the size of the component. */
     this.scale = "m";
-    /** Specifies the granularity the "value" must adhere to (in seconds). */
+    /** Specifies the granularity the `value` must adhere to (in seconds). */
     this.step = 60;
     /** The component's value in UTC (always 24-hour format). */
     this.value = null;
@@ -103,7 +102,7 @@ export class TimePicker {
     //  State
     //
     // --------------------------------------------------------------------------
-    this.globalAttributes = {};
+    this.effectiveLocale = "";
     this.showSecond = this.step < 60;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
@@ -356,8 +355,8 @@ export class TimePicker {
     this.setValue = (value, emit = true) => {
       if (isValidTime(value)) {
         const { hour, minute, second } = parseTimeString(value);
-        const locale = getLocale(this);
-        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts(value, locale);
+        const { effectiveLocale: locale, numberingSystem } = this;
+        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts({ value, locale, numberingSystem });
         this.localizedHour = localizedHour;
         this.localizedHourSuffix = localizedHourSuffix;
         this.localizedMinute = localizedMinute;
@@ -370,7 +369,7 @@ export class TimePicker {
         if (localizedMeridiem) {
           this.localizedMeridiem = localizedMeridiem;
           this.meridiem = getMeridiem(this.hour);
-          const formatParts = getTimeParts(value, locale);
+          const formatParts = getTimeParts({ value, locale, numberingSystem });
           this.meridiemOrder = this.getMeridiemOrder(formatParts);
         }
       }
@@ -394,7 +393,7 @@ export class TimePicker {
     };
     this.setValuePart = (key, value, emit = true) => {
       var _a;
-      const locale = getLocale(this);
+      const { effectiveLocale: locale, numberingSystem } = this;
       if (key === "meridiem") {
         this.meridiem = value;
         if (isValidNumber(this.hour)) {
@@ -411,12 +410,22 @@ export class TimePicker {
               }
               break;
           }
-          this.localizedHour = localizeTimePart(this.hour, "hour", locale);
+          this.localizedHour = localizeTimePart({
+            value: this.hour,
+            part: "hour",
+            locale,
+            numberingSystem
+          });
         }
       }
       else {
         this[key] = typeof value === "number" ? formatTimePart(value) : value;
-        this[`localized${capitalize(key)}`] = localizeTimePart(this[key], key, locale);
+        this[`localized${capitalize(key)}`] = localizeTimePart({
+          value: this[key],
+          part: key,
+          locale,
+          numberingSystem
+        });
       }
       if (this.hour && this.minute) {
         const showSeconds = this.second && this.showSecond;
@@ -426,19 +435,22 @@ export class TimePicker {
         this.value = null;
       }
       this.localizedMeridiem = this.value
-        ? ((_a = localizeTimeStringToParts(this.value, locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
-        : localizeTimePart(this.meridiem, "meridiem", locale);
+        ? ((_a = localizeTimeStringToParts({ value: this.value, locale, numberingSystem })) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
+        : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
       if (emit) {
         this.calciteInternalTimePickerChange.emit();
       }
     };
   }
-  localeWatcher() {
-    this.updateLocale();
+  localeChanged() {
+    updateEffectiveLocale(this);
   }
   valueWatcher(newValue) {
     this.setValue(newValue, false);
   }
+  effectiveLocaleWatcher() {
+    this.updateLocale();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -537,7 +549,7 @@ export class TimePicker {
     return isActivationKey(key);
   }
   getMeridiemOrder(formatParts) {
-    const locale = getLocale(this);
+    const locale = this.effectiveLocale;
     const isRTLKind = locale === "ar" || locale === "he";
     if (formatParts && !isRTLKind) {
       const index = formatParts.findIndex((parts) => {
@@ -548,8 +560,7 @@ export class TimePicker {
     return 0;
   }
   updateLocale() {
-    const locale = getLocale(this);
-    this.hourCycle = getLocaleHourCycle(locale);
+    this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
     this.setValue(this.value, false);
   }
   // --------------------------------------------------------------------------
@@ -558,13 +569,16 @@ export class TimePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     this.updateLocale();
-    const locale = getLocale(this);
-    this.meridiemOrder = this.getMeridiemOrder(getTimeParts("0:00:00", locale));
-    watchGlobalAttributes(this, ["lang"]);
+    this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
+      value: "0:00:00",
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem
+    }));
   }
   disconnectedCallback() {
-    unwatchGlobalAttributes(this);
+    disconnectLocalized(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -582,555 +596,566 @@ export class TimePicker {
         [CSS.showMeridiem]: showMeridiem,
         [CSS.showSecond]: this.showSecond,
         [CSS[`scale-${this.scale}`]]: true
-      }, dir: "ltr" },
-      h("div", { class: CSS.column, role: "group" },
-        h("span", { "aria-label": this.intlHourUp, class: {
-            [CSS.button]: true,
-            [CSS.buttonHourUp]: true,
-            [CSS.buttonTopLeft]: true
-          }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-up", scale: iconScale })),
-        h("span", { "aria-label": this.intlHour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
-            [CSS.input]: true,
-            [CSS.hour]: true
-          }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"),
-        h("span", { "aria-label": this.intlHourDown, class: {
-            [CSS.button]: true,
-            [CSS.buttonHourDown]: true,
-            [CSS.buttonBottomLeft]: true
-          }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-down", scale: iconScale }))),
-      h("span", { class: CSS.delimiter }, this.localizedHourSuffix),
-      h("div", { class: CSS.column, role: "group" },
-        h("span", { "aria-label": this.intlMinuteUp, class: {
-            [CSS.button]: true,
-            [CSS.buttonMinuteUp]: true
-          }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-up", scale: iconScale })),
-        h("span", { "aria-label": this.intlMinute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
-            [CSS.input]: true,
-            [CSS.minute]: true
-          }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"),
-        h("span", { "aria-label": this.intlMinuteDown, class: {
-            [CSS.button]: true,
-            [CSS.buttonMinuteDown]: true
-          }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-down", scale: iconScale }))),
-      this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix),
-      this.showSecond && (h("div", { class: CSS.column, role: "group" },
-        h("span", { "aria-label": this.intlSecondUp, class: {
-            [CSS.button]: true,
-            [CSS.buttonSecondUp]: true
-          }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-up", scale: iconScale })),
-        h("span", { "aria-label": this.intlSecond, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
-            [CSS.input]: true,
-            [CSS.second]: true
-          }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"),
-        h("span", { "aria-label": this.intlSecondDown, class: {
-            [CSS.button]: true,
-            [CSS.buttonSecondDown]: true
-          }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-down", scale: iconScale })))),
-      this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)),
-      showMeridiem && (h("div", { class: {
-          [CSS.column]: true,
-          [CSS.meridiemStart]: this.meridiemOrder === 0
-        }, role: "group" },
-        h("span", { "aria-label": this.intlMeridiemUp, class: {
-            [CSS.button]: true,
-            [CSS.buttonMeridiemUp]: true,
-            [CSS.buttonTopRight]: true
-          }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-up", scale: iconScale })),
-        h("span", { "aria-label": this.intlMeridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
-            [CSS.input]: true,
-            [CSS.meridiem]: true
-          }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"),
-        h("span", { "aria-label": this.intlMeridiemDown, class: {
-            [CSS.button]: true,
-            [CSS.buttonMeridiemDown]: true,
-            [CSS.buttonBottomRight]: true
-          }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button", tabIndex: -1 },
-          h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
+      }, dir: "ltr" }, h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlHourUp, class: {
+        [CSS.button]: true,
+        [CSS.buttonHourUp]: true,
+        [CSS.buttonTopLeft]: true
+      }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlHour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
+        [CSS.input]: true,
+        [CSS.hour]: true
+      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { "aria-label": this.intlHourDown, class: {
+        [CSS.button]: true,
+        [CSS.buttonHourDown]: true,
+        [CSS.buttonBottomLeft]: true
+      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlMinuteUp, class: {
+        [CSS.button]: true,
+        [CSS.buttonMinuteUp]: true
+      }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlMinute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
+        [CSS.input]: true,
+        [CSS.minute]: true
+      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { "aria-label": this.intlMinuteDown, class: {
+        [CSS.button]: true,
+        [CSS.buttonMinuteDown]: true
+      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlSecondUp, class: {
+        [CSS.button]: true,
+        [CSS.buttonSecondUp]: true
+      }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlSecond, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
+        [CSS.input]: true,
+        [CSS.second]: true
+      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { "aria-label": this.intlSecondDown, class: {
+        [CSS.button]: true,
+        [CSS.buttonSecondDown]: true
+      }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
+        [CSS.column]: true,
+        [CSS.meridiemStart]: this.meridiemOrder === 0
+      }, role: "group" }, h("span", { "aria-label": this.intlMeridiemUp, class: {
+        [CSS.button]: true,
+        [CSS.buttonMeridiemUp]: true,
+        [CSS.buttonTopRight]: true
+      }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlMeridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
+        [CSS.input]: true,
+        [CSS.meridiem]: true
+      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.intlMeridiemDown, class: {
+        [CSS.button]: true,
+        [CSS.buttonMeridiemDown]: true,
+        [CSS.buttonBottomRight]: true
+      }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   static get is() { return "calcite-time-picker"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["time-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["time-picker.css"]
-  }; }
-  static get properties() { return {
-    "intlHour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Hour\""
-          }],
-        "text": "Accessible name for the component's hour input."
-      },
-      "attribute": "intl-hour",
-      "reflect": false,
-      "defaultValue": "TEXT.hour"
-    },
-    "intlHourDown": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Decrease hour\""
-          }],
-        "text": "Accessible name for the component's hour down button."
-      },
-      "attribute": "intl-hour-down",
-      "reflect": false,
-      "defaultValue": "TEXT.hourDown"
-    },
-    "intlHourUp": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Increase hour\""
-          }],
-        "text": "Accessible name for the component's hour up button."
-      },
-      "attribute": "intl-hour-up",
-      "reflect": false,
-      "defaultValue": "TEXT.hourUp"
-    },
-    "intlMeridiem": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"AM/PM\""
-          }],
-        "text": "Accessible name for the component's meridiem (AM/PM) input."
-      },
-      "attribute": "intl-meridiem",
-      "reflect": false,
-      "defaultValue": "TEXT.meridiem"
-    },
-    "intlMeridiemDown": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Decrease AM/PM\""
-          }],
-        "text": "Accessible name for the component's meridiem (AM/PM) down button."
-      },
-      "attribute": "intl-meridiem-down",
-      "reflect": false,
-      "defaultValue": "TEXT.meridiemDown"
-    },
-    "intlMeridiemUp": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Increase AM/PM\""
-          }],
-        "text": "Accessible name for the component's meridiem (AM/PM) up button."
-      },
-      "attribute": "intl-meridiem-up",
-      "reflect": false,
-      "defaultValue": "TEXT.meridiemUp"
-    },
-    "intlMinute": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Minute\""
-          }],
-        "text": "Accessible name for the component's minute input."
+  static get originalStyleUrls() {
+    return {
+      "$": ["time-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["time-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "intlHour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Hour\""
+            }],
+          "text": "Accessible name for the component's hour input."
+        },
+        "attribute": "intl-hour",
+        "reflect": false,
+        "defaultValue": "TEXT.hour"
       },
-      "attribute": "intl-minute",
-      "reflect": false,
-      "defaultValue": "TEXT.minute"
-    },
-    "intlMinuteDown": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlHourDown": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Decrease hour\""
+            }],
+          "text": "Accessible name for the component's hour down button."
+        },
+        "attribute": "intl-hour-down",
+        "reflect": false,
+        "defaultValue": "TEXT.hourDown"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Decrease minute\""
-          }],
-        "text": "Accessible name for the component's minute down button."
+      "intlHourUp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Increase hour\""
+            }],
+          "text": "Accessible name for the component's hour up button."
+        },
+        "attribute": "intl-hour-up",
+        "reflect": false,
+        "defaultValue": "TEXT.hourUp"
       },
-      "attribute": "intl-minute-down",
-      "reflect": false,
-      "defaultValue": "TEXT.minuteDown"
-    },
-    "intlMinuteUp": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlMeridiem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"AM/PM\""
+            }],
+          "text": "Accessible name for the component's meridiem (AM/PM) input."
+        },
+        "attribute": "intl-meridiem",
+        "reflect": false,
+        "defaultValue": "TEXT.meridiem"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Increase minute\""
-          }],
-        "text": "Accessible name for the component's minute up button."
+      "intlMeridiemDown": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Decrease AM/PM\""
+            }],
+          "text": "Accessible name for the component's meridiem (AM/PM) down button."
+        },
+        "attribute": "intl-meridiem-down",
+        "reflect": false,
+        "defaultValue": "TEXT.meridiemDown"
       },
-      "attribute": "intl-minute-up",
-      "reflect": false,
-      "defaultValue": "TEXT.minuteUp"
-    },
-    "intlSecond": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlMeridiemUp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Increase AM/PM\""
+            }],
+          "text": "Accessible name for the component's meridiem (AM/PM) up button."
+        },
+        "attribute": "intl-meridiem-up",
+        "reflect": false,
+        "defaultValue": "TEXT.meridiemUp"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Second\""
-          }],
-        "text": "Accessible name for the component's second input."
+      "intlMinute": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Minute\""
+            }],
+          "text": "Accessible name for the component's minute input."
+        },
+        "attribute": "intl-minute",
+        "reflect": false,
+        "defaultValue": "TEXT.minute"
       },
-      "attribute": "intl-second",
-      "reflect": false,
-      "defaultValue": "TEXT.second"
-    },
-    "intlSecondDown": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlMinuteDown": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Decrease minute\""
+            }],
+          "text": "Accessible name for the component's minute down button."
+        },
+        "attribute": "intl-minute-down",
+        "reflect": false,
+        "defaultValue": "TEXT.minuteDown"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Decrease second\""
-          }],
-        "text": "Accessible name for the component's second down button."
+      "intlMinuteUp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Increase minute\""
+            }],
+          "text": "Accessible name for the component's minute up button."
+        },
+        "attribute": "intl-minute-up",
+        "reflect": false,
+        "defaultValue": "TEXT.minuteUp"
       },
-      "attribute": "intl-second-down",
-      "reflect": false,
-      "defaultValue": "TEXT.secondDown"
-    },
-    "intlSecondUp": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlSecond": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Second\""
+            }],
+          "text": "Accessible name for the component's second input."
+        },
+        "attribute": "intl-second",
+        "reflect": false,
+        "defaultValue": "TEXT.second"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Increase second\""
-          }],
-        "text": "Accessible name for the component's second up button."
+      "intlSecondDown": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Decrease second\""
+            }],
+          "text": "Accessible name for the component's second down button."
+        },
+        "attribute": "intl-second-down",
+        "reflect": false,
+        "defaultValue": "TEXT.secondDown"
       },
-      "attribute": "intl-second-up",
-      "reflect": false,
-      "defaultValue": "TEXT.secondUp"
-    },
-    "locale": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "intlSecondUp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Increase second\""
+            }],
+          "text": "Accessible name for the component's second up button."
+        },
+        "attribute": "intl-second-up",
+        "reflect": false,
+        "defaultValue": "TEXT.secondUp"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }, {
-            "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": "BCP 47 language tag for desired language and country format."
+      "locale": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }, {
+              "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": "BCP 47 language tag for desired language and country format."
+        },
+        "attribute": "locale",
+        "reflect": false
       },
-      "attribute": "locale",
-      "reflect": false
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the size of the component."
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the granularity the \"value\" must adhere to (in seconds)."
-      },
-      "attribute": "step",
-      "reflect": true,
-      "defaultValue": "60"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's value in UTC (always 24-hour format)."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "null"
-    }
-  }; }
-  static get states() { return {
-    "globalAttributes": {},
-    "hour": {},
-    "hourCycle": {},
-    "localizedHour": {},
-    "localizedHourSuffix": {},
-    "localizedMeridiem": {},
-    "localizedMinute": {},
-    "localizedMinuteSuffix": {},
-    "localizedSecond": {},
-    "localizedSecondSuffix": {},
-    "meridiem": {},
-    "minute": {},
-    "second": {},
-    "showSecond": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteInternalTimePickerBlur",
-      "name": "calciteInternalTimePickerBlur",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInternalTimePickerChange",
-      "name": "calciteInternalTimePickerChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the granularity the `value` must adhere to (in seconds)."
+        },
+        "attribute": "step",
+        "reflect": true,
+        "defaultValue": "60"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInternalTimePickerFocus",
-      "name": "calciteInternalTimePickerFocus",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+      "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."
+        },
+        "attribute": "numbering-system",
+        "reflect": false
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's value in UTC (always 24-hour format)."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "null"
       }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(target: TimePart) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "target"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {},
+      "hour": {},
+      "hourCycle": {},
+      "localizedHour": {},
+      "localizedHourSuffix": {},
+      "localizedMeridiem": {},
+      "localizedMinute": {},
+      "localizedMinuteSuffix": {},
+      "localizedSecond": {},
+      "localizedSecondSuffix": {},
+      "meridiem": {},
+      "minute": {},
+      "second": {},
+      "showSecond": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteInternalTimePickerBlur",
+        "name": "calciteInternalTimePickerBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInternalTimePickerChange",
+        "name": "calciteInternalTimePickerChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInternalTimePickerFocus",
+        "name": "calciteInternalTimePickerFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(target: TimePart) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "target"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TimePart": {
+              "location": "import",
+              "path": "../../utils/time"
+            }
           },
-          "TimePart": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": [{
-            "name": "param",
-            "text": "target"
-          }]
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": [{
+              "name": "param",
+              "text": "target"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "globalAttributes",
-      "methodName": "localeWatcher"
-    }, {
-      "propName": "locale",
-      "methodName": "localeWatcher"
-    }, {
-      "propName": "value",
-      "methodName": "valueWatcher"
-    }]; }
-  static get listeners() { return [{
-      "name": "blur",
-      "method": "hostBlurHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "hostFocusHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "locale",
+        "methodName": "localeChanged"
+      }, {
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "blur",
+        "method": "hostBlurHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "hostFocusHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "keyDownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }