@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/cjs/calcite-input-time-picker_2.cjs.entry.js

@@ -1,19 +1,20 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ab066772.js');
-const guid = require('./guid-364777e6.js');
-const number = require('./number-99949cb0.js');
-const label = require('./label-e53e11ab.js');
-const form = require('./form-cfcc3b12.js');
-const interactive = require('./interactive-3808ad50.js');
-require('./dom-66c5cb56.js');
+const index = require('./index-8fbe74dd.js');
+const guid = require('./guid-263ed05b.js');
+const locale = require('./locale-0becaa93.js');
+const label = require('./label-f1317d82.js');
+const form = require('./form-901b31de.js');
+const interactive = require('./interactive-b2df5d51.js');
+const key = require('./key-0fe936c7.js');
+require('./dom-69c7e941.js');
 
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter(locale, includeSeconds = true) {
@@ -83,7 +84,7 @@ function getLocalizedTimePart(part, parts) {
   return ((_d = parts.find(({ type }) => (part == "meridiem" ? type === "dayPeriod" : type === part))) === null || _d === void 0 ? void 0 : _d.value) || null;
 }
 function getMeridiem(hour) {
-  if (!number.isValidNumber(hour)) {
+  if (!locale.isValidNumber(hour)) {
     return null;
   }
   const hourAsNumber = parseInt(hour);
@@ -102,9 +103,9 @@ function isValidTime(value) {
   const hourAsNumber = parseInt(splitValue[0]);
   const minuteAsNumber = parseInt(splitValue[1]);
   const secondAsNumber = parseInt(splitValue[2]);
-  const hourValid = number.isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
-  const minuteValid = number.isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
-  const secondValid = number.isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
+  const hourValid = locale.isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
+  const minuteValid = locale.isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
+  const secondValid = locale.isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
   if ((hourValid && minuteValid && !second) || (hourValid && minuteValid && secondValid)) {
     return true;
   }
@@ -113,7 +114,7 @@ function isValidTimePart(value, part) {
   if (part === "meridiem") {
     return value === "AM" || value === "PM";
   }
-  if (!number.isValidNumber(value)) {
+  if (!locale.isValidNumber(value)) {
     return false;
   }
   const valueAsNumber = Number(value);
@@ -208,6 +209,7 @@ const InputTimePicker = class {
     this.disabled = false;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -221,6 +223,7 @@ const InputTimePicker = class {
     this.scale = "m";
     /**
      * Determines where the popover will be positioned relative to the input.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -237,14 +240,15 @@ const InputTimePicker = class {
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    this.calciteInputBlurHandler = () => {
+    this.calciteInternalInputBlurHandler = () => {
       this.active = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
       const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
-    this.calciteInputFocusHandler = () => {
+    this.calciteInternalInputFocusHandler = (event) => {
       this.active = true;
+      event.stopPropagation();
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
@@ -255,6 +259,20 @@ const InputTimePicker = class {
       const target = event.target;
       const value = target.value;
       this.setValue({ value, origin: "time-picker" });
+      event.stopPropagation();
+    };
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (event.key === "Enter" && !event.defaultPrevented) {
+        form.submitForm(this);
+      }
+    };
+    this.setCalcitePopoverEl = (el) => {
+      this.popoverEl = el;
     };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
@@ -311,7 +329,9 @@ const InputTimePicker = class {
   activeHandler() {
     if (this.disabled) {
       this.active = false;
+      return;
     }
+    this.reposition();
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -355,13 +375,14 @@ const InputTimePicker = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.calciteInputEl.setFocus();
+    var _a;
+    (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  /** Updates the position of the component. */
+  async reposition() {
+    var _a;
+    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition();
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
   onLabelClick() {
     this.setFocus();
   }
@@ -397,7 +418,7 @@ const InputTimePicker = class {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (index.h(index.Host, null, index.h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, index.h("calcite-input", { disabled: this.disabled, icon: "clock", label: label.getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), index.h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, referenceElement: this.referenceElementId }, index.h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), index.h(form.HiddenFormInputSlot, { component: this })));
+    return (index.h(index.Host, { onKeyDown: this.keyDownHandler }, index.h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, index.h("calcite-input", { disabled: this.disabled, icon: "clock", label: label.getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), index.h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId }, index.h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), index.h(form.HiddenFormInputSlot, { component: this })));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -461,64 +482,89 @@ function capitalize(str) {
 const TimePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.calciteTimePickerBlur = index.createEvent(this, "calciteTimePickerBlur", 7);
-    this.calciteTimePickerChange = index.createEvent(this, "calciteTimePickerChange", 7);
-    this.calciteTimePickerFocus = index.createEvent(this, "calciteTimePickerFocus", 7);
+    this.calciteInternalTimePickerBlur = index.createEvent(this, "calciteInternalTimePickerBlur", 7);
+    this.calciteInternalTimePickerChange = index.createEvent(this, "calciteInternalTimePickerChange", 7);
+    this.calciteInternalTimePickerFocus = index.createEvent(this, "calciteInternalTimePickerFocus", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** aria-label for the hour input
+    /**
+     * aria-label for the hour input
+     *
      * @default "Hour"
      */
     this.intlHour = TEXT.hour;
-    /** aria-label for the hour down button
+    /**
+     * aria-label for the hour down button
+     *
      * @default "Decrease hour"
      */
     this.intlHourDown = TEXT.hourDown;
-    /** aria-label for the hour up button
+    /**
+     * aria-label for the hour up button
+     *
      * @default "Increase hour"
      */
     this.intlHourUp = TEXT.hourUp;
-    /** aria-label for the meridiem (am/pm) input
+    /**
+     * aria-label for the meridiem (am/pm) input
+     *
      * @default "AM/PM"
      */
     this.intlMeridiem = TEXT.meridiem;
-    /** aria-label for the meridiem (am/pm) down button
+    /**
+     * aria-label for the meridiem (am/pm) down button
+     *
      * @default "Decrease AM/PM"
      */
     this.intlMeridiemDown = TEXT.meridiemDown;
-    /** aria-label for the meridiem (am/pm) up button
+    /**
+     * aria-label for the meridiem (am/pm) up button
+     *
      * @default "Increase AM/PM"
      */
     this.intlMeridiemUp = TEXT.meridiemUp;
-    /** aria-label for the minute input
+    /**
+     * aria-label for the minute input
+     *
      * @default "Minute"
      */
     this.intlMinute = TEXT.minute;
-    /** aria-label for the minute down button
+    /**
+     * aria-label for the minute down button
+     *
      * @default "Decrease minute"
      */
     this.intlMinuteDown = TEXT.minuteDown;
-    /** aria-label for the minute up button
+    /**
+     * aria-label for the minute up button
+     *
      * @default "Increase minute"
      */
     this.intlMinuteUp = TEXT.minuteUp;
-    /** aria-label for the second input
+    /**
+     * aria-label for the second input
+     *
      * @default "Second"
      */
     this.intlSecond = TEXT.second;
-    /** aria-label for the second down button
+    /**
+     * aria-label for the second down button
+     *
      * @default "Decrease second"
      */
     this.intlSecondDown = TEXT.secondDown;
-    /** aria-label for the second up button
+    /**
+     * aria-label for the second up button
+     *
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT.secondUp;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -539,7 +585,7 @@ const TimePicker = class {
     };
     this.decrementMinuteOrSecond = (key) => {
       let newValue;
-      if (number.isValidNumber(this[key])) {
+      if (locale.isValidNumber(this[key])) {
         const valueAsNumber = parseInt(this[key]);
         newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
       }
@@ -563,11 +609,11 @@ const TimePicker = class {
       }
     };
     this.hourKeyDownHandler = (event) => {
-      const key = event.key;
-      if (number.numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+      const key$1 = event.key;
+      if (key.numberKeys.includes(key$1)) {
+        const keyAsNumber = parseInt(key$1);
         let newHour;
-        if (number.isValidNumber(this.hour)) {
+        if (locale.isValidNumber(this.hour)) {
           switch (this.hourCycle) {
             case "12":
               newHour =
@@ -594,7 +640,7 @@ const TimePicker = class {
         this.setValuePart("hour", newHour);
       }
       else {
-        switch (key) {
+        switch (key$1) {
           case "Backspace":
           case "Delete":
             this.setValuePart("hour", null);
@@ -624,7 +670,7 @@ const TimePicker = class {
       this.setValuePart("meridiem", newMeridiem);
     };
     this.incrementHour = () => {
-      const newHour = number.isValidNumber(this.hour)
+      const newHour = locale.isValidNumber(this.hour)
         ? this.hour === "23"
           ? 0
           : parseInt(this.hour) + 1
@@ -632,7 +678,7 @@ const TimePicker = class {
       this.setValuePart("hour", newHour);
     };
     this.incrementMinuteOrSecond = (key) => {
-      const newValue = number.isValidNumber(this[key])
+      const newValue = locale.isValidNumber(this[key])
         ? this[key] === "59"
           ? 0
           : parseInt(this[key]) + 1
@@ -687,11 +733,11 @@ const TimePicker = class {
       }
     };
     this.minuteKeyDownHandler = (event) => {
-      const key = event.key;
-      if (number.numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+      const key$1 = event.key;
+      if (key.numberKeys.includes(key$1)) {
+        const keyAsNumber = parseInt(key$1);
         let newMinute;
-        if (number.isValidNumber(this.minute) && this.minute.startsWith("0")) {
+        if (locale.isValidNumber(this.minute) && this.minute.startsWith("0")) {
           const minuteAsNumber = parseInt(this.minute);
           newMinute =
             minuteAsNumber > maxTenthForMinuteAndSecond
@@ -704,7 +750,7 @@ const TimePicker = class {
         this.setValuePart("minute", newMinute);
       }
       else {
-        switch (key) {
+        switch (key$1) {
           case "Backspace":
           case "Delete":
             this.setValuePart("minute", null);
@@ -735,11 +781,11 @@ const TimePicker = class {
       }
     };
     this.secondKeyDownHandler = (event) => {
-      const key = event.key;
-      if (number.numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+      const key$1 = event.key;
+      if (key.numberKeys.includes(key$1)) {
+        const keyAsNumber = parseInt(key$1);
         let newSecond;
-        if (number.isValidNumber(this.second) && this.second.startsWith("0")) {
+        if (locale.isValidNumber(this.second) && this.second.startsWith("0")) {
           const secondAsNumber = parseInt(this.second);
           newSecond =
             secondAsNumber > maxTenthForMinuteAndSecond
@@ -752,7 +798,7 @@ const TimePicker = class {
         this.setValuePart("second", newSecond);
       }
       else {
-        switch (key) {
+        switch (key$1) {
           case "Backspace":
           case "Delete":
             this.setValuePart("second", null);
@@ -816,14 +862,14 @@ const TimePicker = class {
         this.value = null;
       }
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
     this.setValuePart = (key, value, emit = true) => {
       var _a;
       if (key === "meridiem") {
         this.meridiem = value;
-        if (number.isValidNumber(this.hour)) {
+        if (locale.isValidNumber(this.hour)) {
           const hourAsNumber = parseInt(this.hour);
           switch (value) {
             case "AM":
@@ -855,7 +901,7 @@ const TimePicker = class {
         ? ((_a = localizeTimeStringToParts(this.value, this.locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
         : localizeTimePart(this.meridiem, "meridiem", this.locale);
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
   }
@@ -872,10 +918,10 @@ const TimePicker = class {
   //
   //--------------------------------------------------------------------------
   hostBlurHandler() {
-    this.calciteTimePickerBlur.emit();
+    this.calciteInternalTimePickerBlur.emit();
   }
   hostFocusHandler() {
-    this.calciteTimePickerFocus.emit();
+    this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
     const key = event.key;
@@ -931,7 +977,11 @@ const TimePicker = class {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param target
+   */
   async setFocus(target) {
     var _a;
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -942,11 +992,11 @@ const TimePicker = class {
   //
   // --------------------------------------------------------------------------
   buttonActivated(event) {
-    const key = event.key;
-    if (key === " ") {
+    const key$1 = event.key;
+    if (key$1 === " ") {
       event.preventDefault();
     }
-    return number.isActivationKey(key);
+    return key.isActivationKey(key$1);
   }
   getMeridiemOrder(formatParts) {
     const isRTLKind = this.locale === "ar" || this.locale === "he";
@@ -973,10 +1023,10 @@ const TimePicker = class {
   //
   // --------------------------------------------------------------------------
   render() {
-    const hourIsNumber = number.isValidNumber(this.hour);
+    const hourIsNumber = locale.isValidNumber(this.hour);
     const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
-    const minuteIsNumber = number.isValidNumber(this.minute);
-    const secondIsNumber = number.isValidNumber(this.second);
+    const minuteIsNumber = locale.isValidNumber(this.minute);
+    const secondIsNumber = locale.isValidNumber(this.second);
     const showMeridiem = this.hourCycle === "12";
     return (index.h("div", { class: {
         [CSS.timePicker]: true,