@esri/calcite-components 1.4.0-next.15 → 1.4.0-next.16

package/dist/collection/components/input-time-picker/assets/input-time-picker/nls/dayjs/locale/zh-tw.js

@@ -0,0 +1,65 @@
+// Chinese (Taiwan) [zh-tw]
+
+var locale = {
+  name: 'zh-tw',
+  weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+  weekdaysShort: '週日_週一_週二_週三_週四_週五_週六'.split('_'),
+  weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+  months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
+  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  ordinal: function ordinal(number, period) {
+    switch (period) {
+      case 'W':
+        return number + "\u9031";
+
+      default:
+        return number + "\u65E5";
+    }
+  },
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'YYYY/MM/DD',
+    LL: 'YYYY年M月D日',
+    LLL: 'YYYY年M月D日 HH:mm',
+    LLLL: 'YYYY年M月D日dddd HH:mm',
+    l: 'YYYY/M/D',
+    ll: 'YYYY年M月D日',
+    lll: 'YYYY年M月D日 HH:mm',
+    llll: 'YYYY年M月D日dddd HH:mm'
+  },
+  relativeTime: {
+    future: '%s內',
+    past: '%s前',
+    s: '幾秒',
+    m: '1 分鐘',
+    mm: '%d 分鐘',
+    h: '1 小時',
+    hh: '%d 小時',
+    d: '1 天',
+    dd: '%d 天',
+    M: '1 個月',
+    MM: '%d 個月',
+    y: '1 年',
+    yy: '%d 年'
+  },
+  meridiem: function meridiem(hour, minute) {
+    var hm = hour * 100 + minute;
+
+    if (hm < 600) {
+      return '凌晨';
+    } else if (hm < 900) {
+      return '早上';
+    } else if (hm < 1100) {
+      return '上午';
+    } else if (hm < 1300) {
+      return '中午';
+    } else if (hm < 1800) {
+      return '下午';
+    }
+
+    return '晚上';
+  }
+};
+
+export default locale;

package/dist/collection/components/input-time-picker/assets/input-time-picker/nls/dayjs/locale/zh.js

@@ -0,0 +1,67 @@
+// Chinese [zh]
+
+var locale = {
+  name: 'zh',
+  weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+  weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
+  weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+  months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
+  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  ordinal: function ordinal(number, period) {
+    switch (period) {
+      case 'W':
+        return number + "\u5468";
+
+      default:
+        return number + "\u65E5";
+    }
+  },
+  weekStart: 1,
+  yearStart: 4,
+  formats: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'YYYY/MM/DD',
+    LL: 'YYYY年M月D日',
+    LLL: 'YYYY年M月D日Ah点mm分',
+    LLLL: 'YYYY年M月D日ddddAh点mm分',
+    l: 'YYYY/M/D',
+    ll: 'YYYY年M月D日',
+    lll: 'YYYY年M月D日 HH:mm',
+    llll: 'YYYY年M月D日dddd HH:mm'
+  },
+  relativeTime: {
+    future: '%s后',
+    past: '%s前',
+    s: '几秒',
+    m: '1 分钟',
+    mm: '%d 分钟',
+    h: '1 小时',
+    hh: '%d 小时',
+    d: '1 天',
+    dd: '%d 天',
+    M: '1 个月',
+    MM: '%d 个月',
+    y: '1 年',
+    yy: '%d 年'
+  },
+  meridiem: function meridiem(hour, minute) {
+    var hm = hour * 100 + minute;
+
+    if (hm < 600) {
+      return '凌晨';
+    } else if (hm < 900) {
+      return '早上';
+    } else if (hm < 1100) {
+      return '上午';
+    } else if (hm < 1300) {
+      return '中午';
+    } else if (hm < 1800) {
+      return '下午';
+    }
+
+    return '晚上';
+  }
+};
+
+export default locale;

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

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.15
+ * v1.4.0-next.16
  */
-import { h, Host } from "@stencil/core";
+import { getAssetPath, h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { guid } from "../../utils/guid";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -12,74 +12,90 @@ import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap } from "../../utils/focusTrapComponent";
-import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
+import { formatTimeString, isValidTime, localizeTimeString, toISOTimeString } from "../../utils/time";
 import { connectMessages, disconnectMessages, setUpMessages } from "../../utils/t9n";
 import { CSS } from "./resources";
+import dayjs from "dayjs/esm";
+import customParseFormat from "dayjs/esm/plugin/customParseFormat";
+import localeData from "dayjs/esm/plugin/localeData";
+import localizedFormat from "dayjs/esm/plugin/localizedFormat";
+import preParsePostFormat from "dayjs/esm/plugin/preParsePostFormat";
+import updateLocale from "dayjs/esm/plugin/updateLocale";
+dayjs.extend(customParseFormat);
+dayjs.extend(localeData);
+dayjs.extend(localizedFormat);
+dayjs.extend(preParsePostFormat);
+dayjs.extend(updateLocale);
 export class InputTimePicker {
   constructor() {
     this.focusOnOpen = false;
     this.dialogId = `time-picker-dialog--${guid()}`;
     /** whether the value of the input was changed as a result of user typing or not */
-    this.internalValueChange = false;
-    this.previousValidValue = null;
+    this.userChangedValue = false;
     this.referenceElementId = `input-time-picker-${guid()}`;
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    this.calciteInternalInputBlurHandler = () => {
-      const shouldIncludeSeconds = this.shouldIncludeSeconds();
-      const { effectiveLocale: locale, numberingSystem, value, calciteInputEl } = this;
-      numberStringFormatter.numberFormatOptions = {
-        locale,
-        numberingSystem,
-        useGrouping: false
-      };
-      const delocalizedValue = numberStringFormatter.delocalize(calciteInputEl.value);
-      const localizedInputValue = localizeTimeString({
-        value: delocalizedValue,
-        includeSeconds: shouldIncludeSeconds,
-        locale,
-        numberingSystem
+    this.hostBlurHandler = () => {
+      const inputValue = this.calciteInputEl.value;
+      const delocalizedInputValue = this.delocalizeTimeString(inputValue);
+      if (!delocalizedInputValue) {
+        this.setValue("");
+        return;
+      }
+      if (delocalizedInputValue !== this.value) {
+        this.setValue(delocalizedInputValue);
+      }
+      const localizedTimeString = localizeTimeString({
+        value: this.value,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds: this.shouldIncludeSeconds()
       });
-      this.setInputValue(localizedInputValue ||
-        localizeTimeString({ value, locale, numberingSystem, includeSeconds: shouldIncludeSeconds }));
+      if (localizedTimeString !== inputValue) {
+        this.setInputValue(localizedTimeString);
+      }
+      this.deactivate();
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
         event.stopPropagation();
       }
     };
-    this.calciteInputInputHandler = (event) => {
-      const target = event.target;
-      numberStringFormatter.numberFormatOptions = {
-        locale: this.effectiveLocale,
-        numberingSystem: this.numberingSystem,
-        useGrouping: false
-      };
-      const delocalizedValue = numberStringFormatter.delocalize(target.value);
-      this.setValue({ value: delocalizedValue });
-      // only translate the numerals until blur
-      const localizedValue = delocalizedValue
-        .split("")
-        .map((char) => numberKeys.includes(char)
-        ? numberStringFormatter.numberFormatter.format(Number(char))
-        : char)
-        .join("");
-      this.setInputValue(localizedValue);
+    this.calciteInternalInputInputHandler = (event) => {
+      const { effectiveLocale: locale, numberingSystem } = this;
+      if (numberingSystem && numberingSystem !== "latn") {
+        const target = event.target;
+        numberStringFormatter.numberFormatOptions = {
+          locale,
+          numberingSystem,
+          useGrouping: false
+        };
+        const valueInNumberingSystem = numberStringFormatter
+          .delocalize(target.value)
+          .split("")
+          .map((char) => numberKeys.includes(char)
+          ? numberStringFormatter.numberFormatter.format(Number(char))
+          : char)
+          .join("");
+        this.setInputValue(valueInNumberingSystem);
+      }
     };
     this.timePickerChangeHandler = (event) => {
       event.stopPropagation();
       const target = event.target;
       const value = target.value;
-      this.setValue({ value, origin: "time-picker" });
+      const includeSeconds = this.shouldIncludeSeconds();
+      this.setValue(toISOTimeString(value, includeSeconds));
+      this.setInputValue(localizeTimeString({
+        value,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds
+      }));
     };
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.popoverCloseHandler = () => {
       deactivateFocusTrap(this, {
         onDeactivate: () => {
@@ -108,6 +124,20 @@ export class InputTimePicker {
           event.preventDefault();
           this.calciteInputEl.setFocus();
         }
+        if (event.composedPath().includes(this.calciteTimePickerEl)) {
+          return;
+        }
+        const newValue = this.delocalizeTimeString(this.calciteInputEl.value);
+        this.setValue(newValue);
+        const localizedTimeString = localizeTimeString({
+          value: this.value,
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem,
+          includeSeconds: this.shouldIncludeSeconds()
+        });
+        if (newValue && this.calciteInputEl.value !== localizedTimeString) {
+          this.setInputValue(localizedTimeString);
+        }
       }
       else if (key === "ArrowDown") {
         this.open = true;
@@ -142,50 +172,50 @@ export class InputTimePicker {
       }
       this.calciteInputEl.value = newInputValue;
     };
-    this.setValue = ({ value, origin = "input" }) => {
-      const previousValue = this.value;
-      const newValue = formatTimeString(value);
-      const newLocalizedValue = localizeTimeString({
-        value: newValue,
-        locale: this.effectiveLocale,
-        numberingSystem: this.numberingSystem,
-        includeSeconds: this.shouldIncludeSeconds()
-      });
-      this.internalValueChange = origin !== "external" && origin !== "loading";
-      const shouldEmit = origin !== "loading" &&
-        origin !== "external" &&
-        ((value !== this.previousValidValue && !value) ||
-          !!(!this.previousValidValue && newValue) ||
-          (newValue !== this.previousValidValue && newValue));
-      if (value) {
-        if (shouldEmit) {
-          this.previousValidValue = newValue;
-        }
-        if (newValue && newValue !== this.value) {
-          this.value = newValue;
-        }
-        this.localizedValue = newLocalizedValue;
-      }
-      else {
-        this.value = value;
-        this.localizedValue = null;
+    /**
+     * Sets the value and emits a change event.
+     * This is used to update the value as a result of user interaction.
+     *
+     * @param value
+     */
+    this.setValue = (value) => {
+      const oldValue = this.value;
+      const newValue = formatTimeString(value) || "";
+      if (newValue === oldValue) {
+        return;
       }
-      if (origin === "time-picker" || origin === "external") {
-        this.setInputValue(newLocalizedValue);
-      }
-      if (shouldEmit) {
-        const changeEvent = this.calciteInputTimePickerChange.emit();
-        if (changeEvent.defaultPrevented) {
-          this.internalValueChange = false;
-          this.value = previousValue;
-          this.setInputValue(previousValue);
-          this.previousValidValue = previousValue;
-        }
-        else {
-          this.previousValidValue = newValue;
-        }
+      this.userChangedValue = true;
+      this.value = newValue || "";
+      const changeEvent = this.calciteInputTimePickerChange.emit();
+      if (changeEvent.defaultPrevented) {
+        this.userChangedValue = false;
+        this.value = oldValue;
+        this.setInputValue(localizeTimeString({
+          value: oldValue,
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem,
+          includeSeconds: this.shouldIncludeSeconds()
+        }));
       }
     };
+    /**
+     * Sets the value directly without emitting a change event.
+     * This is used to update the value on initial load and when props change that are not the result of user interaction.
+     *
+     * @param value
+     */
+    this.setValueDirectly = (value) => {
+      const includeSeconds = this.shouldIncludeSeconds();
+      this.value = toISOTimeString(value, includeSeconds);
+      this.setInputValue(this.value
+        ? localizeTimeString({
+          value: this.value,
+          includeSeconds,
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem
+        })
+        : "");
+    };
     this.onInputWrapperClick = () => {
       this.open = !this.open;
     };
@@ -209,7 +239,6 @@ export class InputTimePicker {
     this.value = null;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
-    this.localizedValue = undefined;
   }
   openHandler(value) {
     if (this.disabled || this.readOnly) {
@@ -234,16 +263,31 @@ export class InputTimePicker {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  numberingSystemWatcher(numberingSystem) {
+    this.setInputValue(localizeTimeString({
+      value: this.value,
+      locale: this.effectiveLocale,
+      numberingSystem,
+      includeSeconds: this.shouldIncludeSeconds()
+    }));
+  }
+  stepWatcher(newStep, oldStep) {
+    if ((oldStep >= 60 && newStep > 0 && newStep < 60) ||
+      (newStep >= 60 && oldStep > 0 && oldStep < 60)) {
+      this.setValueDirectly(this.value);
+    }
+  }
   valueWatcher(newValue) {
-    if (!this.internalValueChange) {
-      this.setValue({ value: newValue, origin: "external" });
+    if (!this.userChangedValue) {
+      this.setValueDirectly(newValue);
     }
-    this.internalValueChange = false;
+    this.userChangedValue = false;
   }
-  valueRelatedPropChange() {
+  async effectiveLocaleWatcher(locale) {
+    await this.loadDateTimeLocaleData();
     this.setInputValue(localizeTimeString({
       value: this.value,
-      locale: this.effectiveLocale,
+      locale,
       numberingSystem: this.numberingSystem,
       includeSeconds: this.shouldIncludeSeconds()
     }));
@@ -266,6 +310,105 @@ export class InputTimePicker {
   async reposition(delayed = false) {
     this.popoverEl?.reposition(delayed);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  delocalizeTimeString(value) {
+    // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
+    dayjs.locale(this.effectiveLocale.toLowerCase());
+    const dayjsParseResult = dayjs(value, ["LTS", "LT"]);
+    if (dayjsParseResult.isValid()) {
+      let unformattedTimeString = `${dayjsParseResult.get("hour")}:${dayjsParseResult.get("minute")}`;
+      if (this.shouldIncludeSeconds()) {
+        unformattedTimeString += `:${dayjsParseResult.get("seconds") || 0}`;
+      }
+      return formatTimeString(unformattedTimeString) || "";
+    }
+    return "";
+  }
+  async loadDateTimeLocaleData() {
+    const { effectiveLocale } = this;
+    if (effectiveLocale === "en" || effectiveLocale === "en-US") {
+      return;
+    }
+    let dayjsLocale = effectiveLocale.toLowerCase();
+    if (effectiveLocale === "pt-PT") {
+      dayjsLocale = "pt";
+    }
+    if (effectiveLocale === "no") {
+      dayjsLocale = "nb";
+    }
+    const { default: localeConfig } = await import(getAssetPath(`./assets/input-time-picker/nls/dayjs/locale/${dayjsLocale}.js`));
+    dayjs.locale(localeConfig, null, true);
+    dayjs.updateLocale(dayjsLocale, this.getExtendedLocaleConfig(dayjsLocale));
+  }
+  getExtendedLocaleConfig(locale) {
+    if (locale === "ar") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "م" : "ص"),
+        formats: {
+          LT: "HH:mm A",
+          LTS: "HH:mm:ss A",
+          L: "DD/MM/YYYY",
+          LL: "D MMMM YYYY",
+          LLL: "D MMMM YYYY HH:mm A",
+          LLLL: "dddd D MMMM YYYY HH:mm A"
+        }
+      };
+    }
+    if (locale === "en-au") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+      };
+    }
+    if (locale === "en-ca") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "p.m." : "a.m.")
+      };
+    }
+    if (locale === "el") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "μ.μ." : "π.μ.")
+      };
+    }
+    if (locale === "hi") {
+      return {
+        formats: {
+          LT: "h:mm A",
+          LTS: "h:mm:ss A",
+          L: "DD/MM/YYYY",
+          LL: "D MMMM YYYY",
+          LLL: "D MMMM YYYY, h:mm A",
+          LLLL: "dddd, D MMMM YYYY, h:mm A"
+        },
+        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+      };
+    }
+    if (locale === "ko") {
+      return {
+        meridiem: (hour) => (hour > 12 ? "오후" : "오전")
+      };
+    }
+    if (locale === "zh-tw") {
+      return {
+        formats: {
+          LT: "AHH:mm",
+          LTS: "AHH:mm:ss"
+        }
+      };
+    }
+    if (locale === "zh-hk") {
+      return {
+        formats: {
+          LT: "AHH:mm",
+          LTS: "AHH:mm:ss"
+        },
+        meridiem: (hour) => (hour > 12 ? "下午" : "上午")
+      };
+    }
+  }
   onLabelClick() {
     this.setFocus();
   }
@@ -279,8 +422,22 @@ export class InputTimePicker {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLocalized(this);
-    if (this.value) {
-      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
+    let { effectiveLocale } = this;
+    if (effectiveLocale === "en-US") {
+      effectiveLocale = "en";
+    }
+    if (effectiveLocale === "pt-PT") {
+      effectiveLocale = "pt";
+    }
+    if (effectiveLocale === "no") {
+      effectiveLocale = "nb";
+    }
+    this.effectiveLocale = effectiveLocale;
+    if (isValidTime(this.value)) {
+      this.setValueDirectly(this.value);
+    }
+    else {
+      this.value = undefined;
     }
     connectLabel(this);
     connectForm(this);
@@ -288,11 +445,18 @@ export class InputTimePicker {
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    await setUpMessages(this);
+    await Promise.all([setUpMessages(this), this.loadDateTimeLocaleData()]);
   }
   componentDidLoad() {
     setComponentLoaded(this);
-    this.setInputValue(this.localizedValue);
+    if (isValidTime(this.value)) {
+      this.setInputValue(localizeTimeString({
+        value: this.value,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds: this.shouldIncludeSeconds()
+      }));
+    }
   }
   disconnectedCallback() {
     disconnectLabel(this);
@@ -311,9 +475,9 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, messages, readOnly, dialogId } = this;
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
+    return (h(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setCalciteInputEl }), this.renderToggleIcon(this.open)), h("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
+      ref: this.setCalciteInputEl }), this.renderToggleIcon(this.open)), h("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
       // eslint-disable-next-line react/jsx-sort-props
@@ -639,7 +803,7 @@ export class InputTimePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The component's value in UTC (always 24-hour format)."
+          "text": "The time value in ISO (24-hour) format."
         },
         "attribute": "value",
         "reflect": false,
@@ -650,8 +814,7 @@ export class InputTimePicker {
   static get states() {
     return {
       "defaultMessages": {},
-      "effectiveLocale": {},
-      "localizedValue": {}
+      "effectiveLocale": {}
     };
   }
   static get events() {
@@ -734,15 +897,18 @@ export class InputTimePicker {
       }, {
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
+      }, {
+        "propName": "numberingSystem",
+        "methodName": "numberingSystemWatcher"
+      }, {
+        "propName": "step",
+        "methodName": "stepWatcher"
       }, {
         "propName": "value",
         "methodName": "valueWatcher"
       }, {
         "propName": "effectiveLocale",
-        "methodName": "valueRelatedPropChange"
-      }, {
-        "propName": "step",
-        "methodName": "valueRelatedPropChange"
+        "methodName": "effectiveLocaleWatcher"
       }];
   }
 }

package/dist/collection/components/input-time-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.4.0-next.15
+ * v1.4.0-next.16
  */
 export const CSS = {
   toggleIcon: "toggle-icon"

package/dist/collection/components/label/label.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.4.0-next.15
+ * v1.4.0-next.16
  */
 import { h, Host } from "@stencil/core";
 import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";

package/dist/collection/components/label/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.4.0-next.15
+ * v1.4.0-next.16
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/link/link.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.4.0-next.15
+ * v1.4.0-next.16
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";