@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

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.82
+ * v1.0.0-beta.85
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5c65e149.js');
-const guid = require('./guid-8b6d6cb4.js');
-const number = require('./number-364babbc.js');
-const label = require('./label-165fc611.js');
-const form = require('./form-11926121.js');
-const interactive = require('./interactive-e294111f.js');
-require('./dom-9ac0341c.js');
+const index = require('./index-341e1ec4.js');
+const guid = require('./guid-f166e155.js');
+const locale = require('./locale-075bf13d.js');
+const label = require('./label-1b7bed3e.js');
+const form = require('./form-09b0739e.js');
+const interactive = require('./interactive-97aea507.js');
+const key = require('./key-7a6d198d.js');
+require('./dom-1b4e0097.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);
@@ -206,8 +207,15 @@ const InputTimePicker = class {
     this.active = false;
     /** The disabled state of the time input */
     this.disabled = false;
+    /**
+     * When true, still focusable but controls are gone and the value cannot be modified.
+     *
+     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     */
+    this.readOnly = false;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -221,6 +229,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 +246,17 @@ 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.active = true;
+    this.calciteInternalInputFocusHandler = (event) => {
+      if (!this.readOnly) {
+        this.active = true;
+        event.stopPropagation();
+      }
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
@@ -255,6 +267,7 @@ const InputTimePicker = class {
       const target = event.target;
       const value = target.value;
       this.setValue({ value, origin: "time-picker" });
+      event.stopPropagation();
     };
     // --------------------------------------------------------------------------
     //
@@ -322,13 +335,13 @@ const InputTimePicker = class {
     };
   }
   activeHandler() {
-    if (this.disabled) {
+    if (this.disabled || this.readOnly) {
       this.active = false;
       return;
     }
     this.reposition();
   }
-  handleDisabledChange(value) {
+  handleDisabledAndReadOnlyChange(value) {
     if (!value) {
       this.active = false;
     }
@@ -361,7 +374,9 @@ const InputTimePicker = class {
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.active = true;
+    if (!this.readOnly) {
+      this.active = true;
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -370,7 +385,8 @@ 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() {
@@ -412,12 +428,13 @@ const InputTimePicker = class {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    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), 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, 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, 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, readOnly: this.readOnly, 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, triggerDisabled: true }, 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 {
     "active": ["activeHandler"],
-    "disabled": ["handleDisabledChange"],
+    "disabled": ["handleDisabledAndReadOnlyChange"],
+    "readOnly": ["handleDisabledAndReadOnlyChange"],
     "locale": ["localeWatcher"],
     "value": ["valueWatcher"]
   }; }
@@ -476,64 +493,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";
@@ -554,7 +596,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;
       }
@@ -578,11 +620,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 =
@@ -609,7 +651,7 @@ const TimePicker = class {
         this.setValuePart("hour", newHour);
       }
       else {
-        switch (key) {
+        switch (key$1) {
           case "Backspace":
           case "Delete":
             this.setValuePart("hour", null);
@@ -639,7 +681,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
@@ -647,7 +689,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
@@ -702,11 +744,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
@@ -719,7 +761,7 @@ const TimePicker = class {
         this.setValuePart("minute", newMinute);
       }
       else {
-        switch (key) {
+        switch (key$1) {
           case "Backspace":
           case "Delete":
             this.setValuePart("minute", null);
@@ -750,11 +792,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
@@ -767,7 +809,7 @@ const TimePicker = class {
         this.setValuePart("second", newSecond);
       }
       else {
-        switch (key) {
+        switch (key$1) {
           case "Backspace":
           case "Delete":
             this.setValuePart("second", null);
@@ -831,14 +873,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":
@@ -870,7 +912,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();
       }
     };
   }
@@ -887,10 +929,10 @@ const TimePicker = class {
   //
   //--------------------------------------------------------------------------
   hostBlurHandler() {
-    this.calciteTimePickerBlur.emit();
+    this.calciteInternalTimePickerBlur.emit();
   }
   hostFocusHandler() {
-    this.calciteTimePickerFocus.emit();
+    this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
     const key = event.key;
@@ -946,7 +988,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();
@@ -957,11 +1003,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";
@@ -988,10 +1034,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,