text: import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3673963.js';
  import { g as guid } from './guid-09142681.js';
  import { g as getKey, n as numberKeys, i as isActivationKey } from './key-ec82f942.js';
  import { i as isValidNumber } from './number-358ca1d4.js';
  
  const maxTenthForMinuteAndSecond = 5;
  function getMeridiem(hour) {
    if (!isValidNumber(hour)) {
      return null;
    }
    const hourAsNumber = parseInt(hour);
    return hourAsNumber >= 0 && hourAsNumber <= 11 ? "AM" : "PM";
  }
  function getMeridiemHour(hour) {
    if (!isValidNumber(hour)) {
      return null;
    }
    const hourAsNumber = parseInt(hour);
    if (hourAsNumber === 0) {
      return "12";
    }
    return hourAsNumber > 12 ? formatTimePart(hourAsNumber - 12) : hour;
  }
  function parseTimeString(value) {
    const timeString = formatTimeString(value);
    const [hour, minute, second] = timeString ? timeString.split(":") : [null, null, null];
    return {
      hour,
      minute,
      second: second || (hour && minute ? "00" : null)
    };
  }
  function formatTimeString(value) {
    if (!value || value.endsWith(":") || value.startsWith(":")) {
      return null;
    }
    const splitValue = value.split(":");
    if (splitValue.length > 1) {
      const [hour, minute, second] = splitValue;
      const hourAsNumber = parseInt(splitValue[0]);
      const minuteAsNumber = parseInt(splitValue[1]);
      const secondAsNumber = parseInt(splitValue[2]);
      const hourValid = isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
      const minuteValid = isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
      const secondValid = isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
      if ((hourValid && minuteValid && !second) || (hourValid && minuteValid && secondValid)) {
        let newValue = `${formatTimePart(hourAsNumber)}:${formatTimePart(minuteAsNumber)}`;
        if (secondValid) {
          newValue = `${newValue}:${formatTimePart(secondAsNumber)}`;
        }
        return newValue;
      }
    }
    return null;
  }
  function formatTimePart(number) {
    const numberAsString = number.toString();
    return number >= 0 && number <= 9 ? numberAsString.padStart(2, "0") : numberAsString;
  }
  
  const calciteInputTimePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
  
  const CalciteInputTimePicker = class {
    constructor(hostRef) {
      registerInstance(this, hostRef);
      this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
      //--------------------------------------------------------------------------
      //
      //  Properties
      //
      //--------------------------------------------------------------------------
      /** The active state of the time input */
      this.active = false;
      /** The disabled state of the time input */
      this.disabled = false;
      /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
      this.hourDisplayFormat = "12";
      /** The scale (size) of the time input */
      this.scale = "m";
      /** number that specifies the granularity that the value must adhere to */
      this.step = 60;
      /** The selected time */
      this.value = null;
      /** whether the value of the input was changed as a result of user typing or not */
      this.internalValueChange = false;
      this.previousValidValue = null;
      this.referenceElementId = `input-time-picker-${guid()}`;
      //--------------------------------------------------------------------------
      //
      //  Event Listeners
      //
      //--------------------------------------------------------------------------
      this.calciteInputBlurHandler = () => {
        this.active = false;
        const newValue = formatTimeString(this.calciteInputEl.value) || formatTimeString(this.value);
        if (newValue !== this.calciteInputEl.value) {
          this.setInputValue(newValue);
        }
      };
      this.calciteInputFocusHandler = () => {
        this.active = true;
      };
      this.calciteInputInputHandler = (event) => {
        this.setValue({ value: event.detail.value });
      };
      // --------------------------------------------------------------------------
      //
      //  Private Methods
      //
      // --------------------------------------------------------------------------
      this.setCalciteInputEl = (el) => {
        this.calciteInputEl = el;
      };
      this.setCalciteTimePickerEl = (el) => {
        this.calciteTimePickerEl = el;
      };
      this.setInputValue = (newInputValue) => {
        if (!this.calciteInputEl) {
          return;
        }
        if (this.hourDisplayFormat === "12") {
          const { hour, minute, second } = parseTimeString(newInputValue);
          this.calciteInputEl.value = newInputValue
            ? `${getMeridiemHour(hour)}:${minute}${this.step !== 60 ? ":" + second : ""} ${getMeridiem(hour)}`
            : null;
        }
        else {
          this.calciteInputEl.value = newInputValue;
        }
      };
      this.setValue = ({ value, origin = "input" }) => {
        const previousValue = this.value;
        const validatedNewValue = formatTimeString(value);
        this.internalValueChange = origin !== "external" && origin !== "loading";
        const shouldEmit = origin !== "loading" &&
          origin !== "external" &&
          ((value !== this.previousValidValue && !value) ||
            !!(!this.previousValidValue && validatedNewValue) ||
            (validatedNewValue !== this.previousValidValue && validatedNewValue));
        if (value) {
          if (shouldEmit) {
            this.previousValidValue = validatedNewValue;
          }
          if (validatedNewValue && validatedNewValue !== this.value) {
            this.value = validatedNewValue;
          }
        }
        else {
          this.value = value;
        }
        if (origin === "time-picker" || origin === "external") {
          this.setInputValue(validatedNewValue);
        }
        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 = validatedNewValue;
          }
        }
      };
    }
    valueWatcher(newValue) {
      if (!this.internalValueChange) {
        this.setValue({ value: newValue, origin: "external" });
      }
      this.internalValueChange = false;
    }
    clickHandler(event) {
      if (event.composedPath().includes(this.calciteTimePickerEl)) {
        return;
      }
      this.setFocus();
    }
    keyUpHandler(event) {
      if (getKey(event.key) === "Escape" && this.active) {
        this.active = false;
      }
    }
    timePickerBlurHandler(event) {
      event.preventDefault();
      event.stopPropagation();
      this.active = false;
    }
    timePickerChangeHandler(event) {
      event.preventDefault();
      event.stopPropagation();
      if (event.detail) {
        const { hour, minute, second } = event.detail;
        let value;
        if (hour && minute) {
          if (second && this.step !== 60) {
            value = `${hour}:${minute}:${second}`;
          }
          else {
            value = `${hour}:${minute}`;
          }
        }
        else {
          value = "";
        }
        this.setValue({ value, origin: "time-picker" });
      }
    }
    timePickerFocusHandler(event) {
      event.preventDefault();
      event.stopPropagation();
      this.active = true;
    }
    // --------------------------------------------------------------------------
    //
    //  Public Methods
    //
    // --------------------------------------------------------------------------
    async setFocus() {
      this.calciteInputEl.setFocus();
    }
    //--------------------------------------------------------------------------
    //
    //  Lifecycle
    //
    //--------------------------------------------------------------------------
    connectedCallback() {
      if (this.value) {
        this.setValue({ value: this.value, origin: "loading" });
      }
    }
    componentDidLoad() {
      if (this.calciteInputEl.value !== this.value) {
        this.setInputValue(this.value);
      }
    }
    // --------------------------------------------------------------------------
    //
    //  Render Methods
    //
    // --------------------------------------------------------------------------
    render() {
      const { hour, minute, second } = parseTimeString(this.value);
      const popoverId = `${this.referenceElementId}-popover`;
      return (h(Host, null, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", name: this.name, onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId }, h("calcite-time-picker", { hour: hour, "hour-display-format": this.hourDisplayFormat, 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, minute: minute, ref: this.setCalciteTimePickerEl, scale: this.scale, second: second, step: this.step }))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
      "value": ["valueWatcher"]
    }; }
  };
  CalciteInputTimePicker.style = calciteInputTimePickerCss;
  
  const CSS = {
    buttonBottomLeft: "button--bottom-left",
    buttonBottomRight: "button--bottom-right",
    button: "button",
    delimiter: "delimiter",
    hour: "hour",
    buttonHourDown: "button--hour-down",
    buttonHourUp: "button--hour-up",
    input: "input",
    meridiem: "meridiem",
    buttonMeridiemDown: "button--meridiem-down",
    buttonMeridiemUp: "button--meridiem-up",
    minute: "minute",
    buttonMinuteDown: "button--minute-down",
    buttonMinuteUp: "button--minute-up",
    second: "second",
    buttonSecondDown: "button--second-down",
    buttonSecondUp: "button--second-up",
    timePicker: "time-picker",
    buttonTopLeft: "button--top-left",
    buttonTopRight: "button--top-right"
  };
  const TEXT = {
    hour: "Hour",
    hourDown: "Decrease hour",
    hourUp: "Increase hour",
    meridiem: "AM/PM",
    meridiemDown: "Decrease AM/PM",
    meridiemUp: "Increase AM/PM",
    minute: "Minute",
    minuteDown: "Decrease minute",
    minuteUp: "Increase minute",
    second: "Second",
    secondDown: "Decrease second",
    secondUp: "Increase second"
  };
  
  const calciteTimePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{color:var(--calcite-ui-text-1);display:inline-block;font-weight:var(--calcite-font-weight-medium);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.time-picker{-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;border-radius:var(--calcite-border-radius)}span{-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center}span.button{cursor:pointer}span.button:hover,span.button:focus{background-color:var(--calcite-ui-foreground-2)}span.button:focus{outline:2px solid transparent;outline-offset:2px}span.button:active{background-color:var(--calcite-ui-foreground-3)}span.button.top-left{border-top-left-radius:var(--calcite-border-radius)}span.button.bottom-left{border-bottom-left-radius:var(--calcite-border-radius)}span.button.top-right{border-top-right-radius:var(--calcite-border-radius)}span.button.bottom-right{border-bottom-right-radius:var(--calcite-border-radius)}span.button calcite-icon{color:var(--calcite-ui-text-3)}span.input{font-weight:var(--calcite-font-weight-medium);position:relative}span.input:hover{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2)}span.input:focus,span.input:hover:focus{outline:2px solid transparent;outline-offset:2px;-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([scale=s]){font-size:var(--calcite-font-size--1)}:host([scale=s]) span{height:24px;width:40px}:host([scale=s]) .delimiter{height:72px}:host([scale=s][hour-display-format=\"12\"]) .time-picker{width:124.2px}:host([scale=s][hour-display-format=\"12\"]:not([step=\"60\"])) .time-picker{width:168px}:host([scale=s][hour-display-format=\"24\"]) .time-picker{width:84.2px}:host([scale=s][hour-display-format=\"24\"]:not([step=\"60\"])) .time-picker{width:128.4px}:host([scale=m]){font-size:var(--calcite-font-size-0)}:host([scale=m]) span{height:32px;width:44px}:host([scale=m]) .delimiter{height:96px}:host([scale=m][hour-display-format=\"12\"]) .time-picker{width:136.8px}:host([scale=m][hour-display-format=\"12\"]:not([step=\"60\"])) .time-picker{width:186px}:host([scale=m][hour-display-format=\"24\"]) .time-picker{width:92.8px}:host([scale=m][hour-display-format=\"24\"]:not([step=\"60\"])) .time-picker{width:141.6px}:host([scale=l]){font-size:var(--calcite-font-size-1)}:host([scale=l]) span{height:48px;width:64px}:host([scale=l]) .delimiter{height:144px}:host([scale=l][hour-display-format=\"12\"]) .time-picker{width:198px}:host([scale=l][hour-display-format=\"12\"]:not([step=\"60\"])) .time-picker{width:268px}:host([scale=l][hour-display-format=\"24\"]) .time-picker{width:134px}:host([scale=l][hour-display-format=\"24\"]:not([step=\"60\"])) .time-picker{width:204px}";
  
  const CalciteTimePicker = class {
    constructor(hostRef) {
      registerInstance(this, hostRef);
      this.calciteTimePickerBlur = createEvent(this, "calciteTimePickerBlur", 7);
      this.calciteTimePickerChange = createEvent(this, "calciteTimePickerChange", 7);
      this.calciteTimePickerFocus = createEvent(this, "calciteTimePickerFocus", 7);
      //--------------------------------------------------------------------------
      //
      //  Properties
      //
      //--------------------------------------------------------------------------
      /** The hour value (24-hour format) */
      this.hour = null;
      /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
      this.hourDisplayFormat = "12";
      /** aria-label for the hour input
       * @default "Hour"
       */
      this.intlHour = TEXT.hour;
      /** aria-label for the hour down button
       * @default "Decrease hour"
       */
      this.intlHourDown = TEXT.hourDown;
      /** aria-label for the hour up button
       * @default "Increase hour"
       */
      this.intlHourUp = TEXT.hourUp;
      /** aria-label for the meridiem (am/pm) input
       * @default "AM/PM"
       */
      this.intlMeridiem = TEXT.meridiem;
      /** 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
       * @default "Increase AM/PM"
       */
      this.intlMeridiemUp = TEXT.meridiemUp;
      /** aria-label for the minute input
       * @default "Minute"
       */
      this.intlMinute = TEXT.minute;
      /** aria-label for the minute down button
       * @default "Decrease minute"
       */
      this.intlMinuteDown = TEXT.minuteDown;
      /** aria-label for the minute up button
       * @default "Increase minute"
       */
      this.intlMinuteUp = TEXT.minuteUp;
      /** aria-label for the second input
       * @default "Second"
       */
      this.intlSecond = TEXT.second;
      /** aria-label for the second down button
       * @default "Decrease second"
       */
      this.intlSecondDown = TEXT.secondDown;
      /** aria-label for the second up button
       * @default "Increase second"
       */
      this.intlSecondUp = TEXT.secondUp;
      /** The minute value */
      this.minute = null;
      /** The second value */
      this.second = null;
      /** The scale (size) of the time picker */
      this.scale = "m";
      /** number that specifies the granularity that the value must adhere to */
      this.step = 60;
      this.timeChanged = false;
      // --------------------------------------------------------------------------
      //
      //  State
      //
      // --------------------------------------------------------------------------
      /** The am/pm value */
      this.meridiem = null;
      this.displayHour = this.getDisplayHour();
      // --------------------------------------------------------------------------
      //
      //  Private Methods
      //
      // --------------------------------------------------------------------------
      this.decrementHour = () => {
        const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
        this.setTime("hour", newHour);
      };
      this.decrementMeridiem = () => {
        const newMeridiem = this.meridiem === "PM" ? "AM" : "PM";
        this.setTime("meridiem", newMeridiem);
      };
      this.decrementMinuteOrSecond = (key) => {
        let newValue;
        if (isValidNumber(this[key])) {
          const valueAsNumber = parseInt(this[key]);
          if (valueAsNumber === 0) {
            newValue = 59;
          }
          else {
            newValue = valueAsNumber - 1;
          }
        }
        else {
          newValue = 59;
        }
        this.setTime(key, newValue);
      };
      this.decrementMinute = () => {
        this.decrementMinuteOrSecond("minute");
      };
      this.decrementSecond = () => {
        this.decrementMinuteOrSecond("second");
      };
      this.focusHandler = (event) => {
        this.activeEl = event.currentTarget;
      };
      this.hourDownButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.decrementHour();
        }
      };
      this.hourKeyDownHandler = (event) => {
        const key = getKey(event.key);
        if (numberKeys.includes(key)) {
          const keyAsNumber = parseInt(key);
          let newHour;
          if (isValidNumber(this.hour)) {
            switch (this.hourDisplayFormat) {
              case "12":
                if (this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2) {
                  newHour = `1${keyAsNumber}`;
                }
                else {
                  newHour = keyAsNumber;
                }
                break;
              case "24":
                if (this.hour === "01") {
                  newHour = `1${keyAsNumber}`;
                }
                else if (this.hour === "02" && keyAsNumber >= 0 && keyAsNumber <= 3) {
                  newHour = `2${keyAsNumber}`;
                }
                else {
                  newHour = keyAsNumber;
                }
                break;
            }
          }
          else {
            newHour = keyAsNumber;
          }
          this.setTime("hour", newHour);
        }
        else {
          switch (key) {
            case "Backspace":
            case "Delete":
              this.setTime("hour", null);
              break;
            case "ArrowDown":
              event.preventDefault();
              this.decrementHour();
              break;
            case "ArrowUp":
              event.preventDefault();
              this.incrementHour();
              break;
            case " ":
            case "Spacebar":
              event.preventDefault();
              break;
          }
        }
      };
      this.hourUpButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.incrementHour();
        }
      };
      this.incrementMeridiem = () => {
        const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
        this.setTime("meridiem", newMeridiem);
      };
      this.incrementHour = () => {
        const newHour = isValidNumber(this.hour)
          ? this.hour === "23"
            ? 0
            : parseInt(this.hour) + 1
          : 1;
        this.setTime("hour", newHour);
      };
      this.incrementMinuteOrSecond = (key) => {
        const newValue = isValidNumber(this[key])
          ? this[key] === "59"
            ? 0
            : parseInt(this[key]) + 1
          : 0;
        this.setTime(key, newValue);
      };
      this.incrementMinute = () => {
        this.incrementMinuteOrSecond("minute");
      };
      this.incrementSecond = () => {
        this.incrementMinuteOrSecond("second");
      };
      this.meridiemDownButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.decrementMeridiem();
        }
      };
      this.meridiemKeyDownHandler = (event) => {
        switch (getKey(event.key)) {
          case "a":
            this.setTime("meridiem", "AM");
            break;
          case "p":
            this.setTime("meridiem", "PM");
            break;
          case "Backspace":
          case "Delete":
            this.setTime("meridiem", null);
            break;
          case "ArrowUp":
            event.preventDefault();
            this.incrementMeridiem();
            break;
          case "ArrowDown":
            event.preventDefault();
            this.decrementMeridiem();
            break;
          case " ":
          case "Spacebar":
            event.preventDefault();
            break;
        }
      };
      this.meridiemUpButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.incrementMeridiem();
        }
      };
      this.minuteDownButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.decrementMinute();
        }
      };
      this.minuteKeyDownHandler = (event) => {
        const key = getKey(event.key);
        if (numberKeys.includes(key)) {
          const keyAsNumber = parseInt(key);
          let newMinute;
          if (isValidNumber(this.minute) && this.minute.startsWith("0")) {
            const minuteAsNumber = parseInt(this.minute);
            if (minuteAsNumber > maxTenthForMinuteAndSecond) {
              newMinute = keyAsNumber;
            }
            else {
              newMinute = `${minuteAsNumber}${keyAsNumber}`;
            }
          }
          else {
            newMinute = keyAsNumber;
          }
          this.setTime("minute", newMinute);
        }
        else {
          switch (key) {
            case "Backspace":
            case "Delete":
              this.setTime("minute", null);
              break;
            case "ArrowDown":
              event.preventDefault();
              this.decrementMinute();
              break;
            case "ArrowUp":
              event.preventDefault();
              this.incrementMinute();
              break;
            case " ":
            case "Spacebar":
              event.preventDefault();
              break;
          }
        }
      };
      this.minuteUpButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.incrementMinute();
        }
      };
      this.secondDownButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.decrementSecond();
        }
      };
      this.secondKeyDownHandler = (event) => {
        const key = getKey(event.key);
        if (numberKeys.includes(key)) {
          const keyAsNumber = parseInt(key);
          let newSecond;
          if (isValidNumber(this.second) && this.second.startsWith("0")) {
            const secondAsNumber = parseInt(this.second);
            if (secondAsNumber > maxTenthForMinuteAndSecond) {
              newSecond = keyAsNumber;
            }
            else {
              newSecond = `${secondAsNumber}${keyAsNumber}`;
            }
          }
          else {
            newSecond = keyAsNumber;
          }
          this.setTime("second", newSecond);
        }
        else {
          switch (key) {
            case "Backspace":
            case "Delete":
              this.setTime("second", null);
              break;
            case "ArrowDown":
              event.preventDefault();
              this.decrementSecond();
              break;
            case "ArrowUp":
              event.preventDefault();
              this.incrementSecond();
              break;
            case " ":
            case "Spacebar":
              event.preventDefault();
              break;
          }
        }
      };
      this.secondUpButtonKeyDownHandler = (event) => {
        if (this.buttonActivated(event)) {
          this.incrementSecond();
        }
      };
      this.setTime = (key, value, emit = true) => {
        switch (key) {
          default:
            return;
          case "hour":
            this.hour = typeof value === "number" ? formatTimePart(value) : value;
            break;
          case "minute":
            this.minute = typeof value === "number" ? formatTimePart(value) : value;
            break;
          case "second":
            this.second = typeof value === "number" ? formatTimePart(value) : value;
            break;
          case "meridiem":
            if (isValidNumber(this.hour)) {
              const hourAsNumber = parseInt(this.hour);
              switch (value) {
                case "AM":
                  if (hourAsNumber >= 12) {
                    this.hour = formatTimePart(hourAsNumber - 12);
                  }
                  break;
                case "PM":
                  if (hourAsNumber < 12) {
                    this.hour = formatTimePart(hourAsNumber + 12);
                  }
                  break;
              }
              this.meridiem = value;
            }
            else {
              this.meridiem = value;
            }
            break;
        }
        this.timeChanged = true;
        if (emit) {
          this.calciteTimePickerChange.emit(this.getTime());
        }
      };
    }
    hourChanged(newHour) {
      if (this.hourDisplayFormat === "12" && isValidNumber(newHour)) {
        this.meridiem = getMeridiem(newHour);
      }
    }
    timeChangeHandler() {
      const { hour, minute } = this.getTime();
      if (!hour && !minute) {
        this.setTime("meridiem", null, false);
      }
      if (this.timeChanged) {
        this.timeChanged = false;
      }
    }
    //--------------------------------------------------------------------------
    //
    //  Event Listeners
    //
    //--------------------------------------------------------------------------
    hostBlurHandler() {
      this.calciteTimePickerBlur.emit();
    }
    hostFocusHandler() {
      this.calciteTimePickerFocus.emit();
    }
    keyDownHandler(event) {
      const key = getKey(event.key);
      switch (this.activeEl) {
        case this.hourEl:
          if (key === "ArrowRight") {
            this.setFocus("minute");
          }
          break;
        case this.minuteEl:
          switch (key) {
            case "ArrowLeft":
              this.setFocus("hour");
              break;
            case "ArrowRight":
              if (this.step !== 60) {
                this.setFocus("second");
              }
              else if (this.hourDisplayFormat === "12") {
                this.setFocus("meridiem");
              }
              break;
          }
          break;
        case this.secondEl:
          switch (key) {
            case "ArrowLeft":
              this.setFocus("minute");
              break;
            case "ArrowRight":
              if (this.hourDisplayFormat === "12") {
                this.setFocus("meridiem");
              }
              break;
          }
          break;
        case this.meridiemEl:
          switch (key) {
            case "ArrowLeft":
              if (this.step !== 60) {
                this.setFocus("second");
              }
              else {
                this.setFocus("minute");
              }
              break;
          }
          break;
      }
    }
    //--------------------------------------------------------------------------
    //
    //  Public Methods
    //
    //--------------------------------------------------------------------------
    async setFocus(target) {
      var _a;
      (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
    }
    buttonActivated(event) {
      const key = getKey(event.key);
      if (key === " ") {
        event.preventDefault();
      }
      return isActivationKey(key);
    }
    getDisplayHour() {
      if (!this.hour) {
        return "--";
      }
      if (this.hourDisplayFormat === "12") {
        return getMeridiemHour(this.hour);
      }
      return this.hour;
    }
    getTime() {
      return {
        hour: this.hour,
        minute: this.minute,
        second: this.second
      };
    }
    // --------------------------------------------------------------------------
    //
    //  Lifecycle
    //
    // --------------------------------------------------------------------------
    connectedCallback() {
      if (this.hourDisplayFormat === "12") {
        this.meridiem = getMeridiem(this.hour);
      }
      if (isValidNumber(this.hour)) {
        this.hour = formatTimePart(parseInt(this.hour));
      }
      if (isValidNumber(this.minute)) {
        this.minute = formatTimePart(parseInt(this.minute));
      }
      if (isValidNumber(this.second)) {
        this.second = formatTimePart(parseInt(this.second));
      }
    }
    // --------------------------------------------------------------------------
    //
    //  Render Methods
    //
    // --------------------------------------------------------------------------
    render() {
      const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
      const includeSeconds = this.step !== 60;
      const hourIsNumber = isValidNumber(this.hour);
      const minuteIsNumber = isValidNumber(this.minute);
      const secondIsNumber = isValidNumber(this.second);
      return (h(Host, null, h("div", { class: CSS.timePicker }, h("div", { 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), "aria-valuetext": this.hour, class: {
          [CSS.input]: true,
          [CSS.hour]: true
        }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: (el) => (this.hourEl = el), role: "spinbutton", tabIndex: 0 }, this.getDisplayHour()), 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 }, ":"), h("div", { 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), "aria-valuetext": this.minute, class: {
          [CSS.input]: true,
          [CSS.minute]: true
        }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: (el) => (this.minuteEl = el), role: "spinbutton", tabIndex: 0 }, this.minute ? this.minute : "--"), 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 }))), includeSeconds && h("span", { class: CSS.delimiter }, ":"), includeSeconds && (h("div", { 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), "aria-valuetext": this.second, class: {
          [CSS.input]: true,
          [CSS.second]: true
        }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: (el) => (this.secondEl = el), role: "spinbutton", tabIndex: 0 }, this.second ? this.second : "--"), 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.hourDisplayFormat === "12" && (h("div", { 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 === "AM" ? "1" : this.meridiem === "PM" ? "2" : undefined, "aria-valuetext": this.meridiem, class: {
          [CSS.input]: true,
          [CSS.meridiem]: true
        }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: (el) => (this.meridiemEl = el), role: "spinbutton", tabIndex: 0 }, this.meridiem ? this.meridiem : "--"), 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 })))))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
      "hour": ["hourChanged", "timeChangeHandler"],
      "minute": ["timeChangeHandler"],
      "second": ["timeChangeHandler"]
    }; }
  };
  CalciteTimePicker.style = calciteTimePickerCss;
  
  export { CalciteInputTimePicker as calcite_input_time_picker, CalciteTimePicker as calcite_time_picker };
  