@watermarkinsights/ripple 3.4.0 → 3.5.0-0

package/dist/esm/wm-timepicker.entry.js

@@ -1,390 +1,390 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f8b130b6.js';
-import { i as intl, g as generateId, l as shouldOpenUp, e as isRelatedTarget } from './functions-5aebd578.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-66f8130e.js';
+import { i as intl, g as generateId, l as shouldOpenUp, e as isRelatedTarget } from './functions-e528c934.js';
 
 const wmTimepickerCss = "@charset \"UTF-8\";:host,wm-timepicker{font-family:inherit}:host *,wm-timepicker *{box-sizing:border-box}:host .sr-only,wm-timepicker .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper,wm-timepicker .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-timepicker .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-timepicker .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-timepicker .wrapper.label-left{flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-timepicker .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-timepicker .wrapper.label-left .label-wrapper .label{display:flex;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-timepicker .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-timepicker .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-timepicker .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-timepicker .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-timepicker .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-timepicker .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper input,wm-timepicker .wrapper .inner-wrapper input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;flex:1;margin:0}:host .wrapper .inner-wrapper input:disabled,wm-timepicker .wrapper .inner-wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper .inner-wrapper input:focus,wm-timepicker .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button,wm-timepicker .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:#fff;border:none;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-top-left-radius:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button .clock::after,wm-timepicker .wrapper .inner-wrapper button .clock::after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";color:#575195;font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover,wm-timepicker .wrapper .inner-wrapper button:hover{background:#e6e6e6;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled,wm-timepicker .wrapper .inner-wrapper button:disabled{background-color:rgba(74, 74, 74, 0.05);pointer-events:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled .clock::after,wm-timepicker .wrapper .inner-wrapper button:disabled .clock::after{color:#7b7b7b}[dir=RTL] :host .wrapper .inner-wrapper button,[dir=RTL] wm-timepicker .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus,wm-timepicker .wrapper .inner-wrapper button:focus{outline:none}:host .wrapper .inner-wrapper button.user-is-tabbing:focus,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper .options,wm-timepicker .wrapper .inner-wrapper .options{margin:0;padding:0;-webkit-overflow-scrolling:touch;overflow:auto;max-height:19.0625rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:2.5rem;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .wrapper .inner-wrapper .options.upwards,wm-timepicker .wrapper .inner-wrapper .options.upwards{top:unset;bottom:2.5rem;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .wrapper .inner-wrapper .options.hidden,wm-timepicker .wrapper .inner-wrapper .options.hidden{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option],wm-timepicker .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a}:host .wrapper .inner-wrapper .options [role=option]:hover,wm-timepicker .wrapper .inner-wrapper .options [role=option]:hover{background:#f4f4f4;outline:none}:host .wrapper .inner-wrapper .options [role=option][aria-selected=true],wm-timepicker .wrapper .inner-wrapper .options [role=option][aria-selected=true]{outline:none;background:#f4f4f4}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child),wm-timepicker .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .wrapper .inner-wrapper .options.open,wm-timepicker .wrapper .inner-wrapper .options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper.invalid .inner-wrapper,wm-timepicker .wrapper.invalid .inner-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error,wm-timepicker .wrapper.invalid .error{color:#c0392b;margin-top:4px;margin-bottom:4px;display:block;top:100%;left:0;font-style:italic}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-wrapper,wm-timepicker .wrapper:focus .inner-wrapper,wm-timepicker .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}";
 
-const Timepicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmTimepickerNewValidValue = createEvent(this, "wmTimepickerNewValidValue", 7);
-    this.wmTimepickerOnChange = createEvent(this, "wmTimepickerOnChange", 7);
-    this.disabled = false;
-    this.value = "";
-    this.label = "";
-    this.labelPosition = "top";
-    this.requiredField = false;
-    this.isExpanded = false;
-    this.isTabbing = false;
-    this.twelveHrValid = /^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;
-    this.twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;
-    this.uid = "";
-    this.timeFormat = "hh:mm";
-    this.times = [];
-    this.openUp = false;
-    this.buttonAriaLabel = intl.formatMessage({
-      id: "time.selectTime",
-      defaultMessage: "Select time",
-    });
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  blurHandler(ev) {
-    if (ev.target !== this.el && this.isExpanded) {
-      this.close();
-    }
-  }
-  handleKey(ev) {
-    switch (ev.key) {
-      case "ArrowDown":
-        ev.preventDefault();
-        if (this.isExpanded === false) {
-          this.open("next");
-        }
-        else {
-          this.moveDown(this.selectedOption);
-        }
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        if (this.isExpanded === false) {
-          this.open("previous");
-        }
-        else {
-          this.moveUp(this.selectedOption);
-        }
-        break;
-      case "Enter":
-      case " ":
-        if (this.isExpanded) {
-          ev.preventDefault();
-          this.handleOptionClick(this.selectedOption.textContent);
-        }
-        break;
-      case "Escape":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
-          this.close();
-        }
-        break;
-      case "Tab":
-        if (this.isExpanded) {
-          this.close();
-        }
-        break;
-      case "Home":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[0]);
-          this.setDropdownPosition("first");
-        }
-        break;
-      case "End":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[this.optionsList.length - 1]);
-          this.setDropdownPosition("last");
-        }
-        break;
-    }
-  }
-  updateErrorState() {
-    this.displayedErrorMessage = this.errorMessage;
-  }
-  componentWillLoad() {
-    if (this.label === "") {
-      throw new Error("You must include a label prop for the datepicker input (for accessibility requirements), even if the label position is none.");
-    }
-    this.el.focus = function () {
-      if (!this.disabled) {
-        this.shadowRoot.querySelector("input").focus();
-      }
-    };
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.updateErrorState();
-    this.timeFormat = intl.formatMessage({
-      id: "time.timeFormat",
-      defaultMessage: "hh:mm",
-    });
-    this.times = this.generateTimes();
-  }
-  componentDidLoad() {
-    this.optionsEl.classList.add("hidden");
-    this.optionsList = Array.from(this.optionsEl.querySelectorAll("li"));
-    if (this.value) {
-      this.processInput();
-    }
-  }
-  isValidTime(input) {
-    return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);
-  }
-  generateTimes() {
-    let times = [];
-    let startTime = 0;
-    for (let i = 0; startTime < 24 * 60; i++) {
-      const h = Math.floor(startTime / 60);
-      const hour = h.toString().padStart(2, "0");
-      const m = (startTime % 60).toString();
-      const min = m.padStart(2, "0");
-      times[i] = `${hour}:${min}`;
-      startTime = startTime + 15;
-    }
-    return times;
-  }
-  findNearestTimeInterval(time) {
-    let formattedTime = this.formatToStorage(time);
-    const minutes = parseInt(formattedTime.slice(3, 5));
-    // first find the closest 15 min increment
-    if (minutes % 15 !== 0) {
-      const hour = parseInt(formattedTime.slice(0, 2));
-      let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, "0");
-      if (roundedMinutes === "60") {
-        roundedMinutes = "00";
-        let roundedHour = hour + 1;
-        if (roundedHour === 24) {
-          roundedHour = 0;
-        }
-        formattedTime = formattedTime.replace(`${hour.toString().padStart(2, "0")}:`, `${roundedHour.toString().padStart(2, "0")}:`);
-      }
-      if (parseInt(roundedMinutes) < 8) {
-        roundedMinutes = "00";
-      }
-      time = formattedTime.replace(`:${minutes.toString().padStart(2, "0")}`, `:${roundedMinutes}`);
-    }
-    return time;
-  }
-  handleListSelection(time) {
-    time = this.findNearestTimeInterval(time);
-    const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];
-    // not DOM focus, just setting the proper ARIA attributes
-    option && this.focusOption(option);
-  }
-  setValue(time) {
-    const previousValue = this.value;
-    this.inputEl.value = this.formatToDisplay(time);
-    this.value = this.formatToStorage(time);
-    // update the selection in the list
-    // so it opens on the closest item
-    this.handleListSelection(time);
-    if (previousValue !== this.value) {
-      this.wmTimepickerNewValidValue.emit({ value: this.value });
-    }
-    // deprecated in favor of wmTimepickerNewValidValue and input
-    this.wmTimepickerOnChange.emit({
-      value: this.value,
-      isValid: !!this.displayedErrorMessage,
-    });
-  }
-  processInput() {
-    if (this.isValidTime(this.value)) {
-      this.setValue(this.value);
-    }
-    const newErrorMessage = this.determineErrorMessage();
-    this.displayedErrorMessage = newErrorMessage;
-  }
-  determineErrorMessage() {
-    let message = this.errorMessage;
-    const requiredError = intl.formatMessage({
-      id: "time.requiredError",
-      defaultMessage: "A time is required.",
-    });
-    const invalidError = intl.formatMessage({
-      id: "time.invalidTime",
-      defaultMessage: "Please enter a valid time.",
-    });
-    const isValid = this.isValidTime(this.value);
-    if (isValid && !this.errorMessage) {
-      message = null;
-    }
-    else if (!isValid && !this.errorMessage) {
-      if (this.requiredField && !this.value) {
-        message = requiredError;
-      }
-      else if (this.value) {
-        message = invalidError;
-      }
-      else {
-        message = null;
-      }
-    }
-    return message;
-  }
-  splitTime(time) {
-    const splitTime = this.twelveHrValid.exec(time) || this.twentyFourHrValid.exec(time);
-    let hours = parseInt(splitTime[1]);
-    let minutes = splitTime[2] || "00";
-    let amPm = splitTime ? splitTime[3] : undefined;
-    // handles edge case uncaught by regex '0pm'
-    if (hours === 0 && (amPm === null || amPm === void 0 ? void 0 : amPm.toUpperCase().includes("P"))) {
-      // if user types '0pm' we change it to midnight
-      amPm = "AM";
-    }
-    return [hours, minutes, amPm];
-  }
-  formatToDisplay(time) {
-    let [hours, minutes, amPm] = this.splitTime(time);
-    // at the moment the component only displays in 12hr AM/PM
-    if (hours === 12 && !amPm) {
-      amPm = "PM";
-    }
-    if (hours === 0 || hours === 24) {
-      hours = 12;
-    }
-    if (hours > 12) {
-      hours -= 12;
-      amPm = "PM";
-    }
-    if (amPm && amPm.toUpperCase().includes("P")) {
-      amPm = "PM";
-    }
-    else {
-      amPm = "AM";
-    }
-    return `${hours.toString().padStart(2, "0")}:${minutes} ${amPm}`;
-  }
-  formatToStorage(time) {
-    let [hours, minutes, amPm] = this.splitTime(time);
-    if (hours === 24) {
-      hours = 0;
-    }
-    if (hours === 12 && amPm && amPm.toUpperCase().includes("A")) {
-      hours -= 12;
-    }
-    if (amPm && amPm.toUpperCase().includes("P") && hours !== 12) {
-      hours += 12;
-    }
-    return `${hours.toString().padStart(2, "0")}:${minutes}`;
-  }
-  open(itemToSelect) {
-    this.el.focus();
-    this.openUp = shouldOpenUp(this.el, this.optionsEl);
-    this.isExpanded = true;
-    this.optionsEl.classList.remove("hidden");
-    if (this.errorMessage || !this.value) {
-      this.handleListSelection("09:00");
-    }
-    this.setDropdownPosition("center", this.selectedOption);
-    window.requestAnimationFrame(() => {
-      if (itemToSelect === "next") {
-        this.moveDown(this.selectedOption);
-      }
-      else if (itemToSelect === "previous") {
-        this.moveUp(this.selectedOption);
-      }
-    });
-  }
-  close(returnFocus = true) {
-    this.isExpanded = false;
-    window.setTimeout(() => {
-      this.optionsEl.classList.add("hidden");
-      // Returns focus to button after popup closes (no need if user is tabbing)
-      // Delay is necessary for screenreader to get new expanded state before focus
-      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
-      // also UX wise, it makes sense for the button to only be focused after the animation is complete
-      if (returnFocus) {
-        this.buttonEl.focus();
-      }
-    }, 150);
-  }
-  focusOption(item) {
-    // not an actual focus, just accessibility stuff
-    this.optionsList.forEach((option) => {
-      option.removeAttribute("aria-selected");
-    });
-    this.inputEl.setAttribute("aria-activedescendant", item.id);
-    item.setAttribute("aria-selected", "true");
-    this.selectedOption = item;
-  }
-  setDropdownPosition(position, item) {
-    switch (position) {
-      case "top":
-        const prevItem = item === null || item === void 0 ? void 0 : item.previousElementSibling;
-        this.optionsEl.scrollTop =
-          prevItem.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;
-        break;
-      case "bottom":
-        const nextItem = item === null || item === void 0 ? void 0 : item.nextElementSibling;
-        this.optionsEl.scrollTop =
-          nextItem.getBoundingClientRect().bottom -
-            this.optionsEl.getBoundingClientRect().top +
-            this.optionsEl.scrollTop -
-            this.optionsEl.offsetHeight;
-        break;
-      case "center":
-        this.optionsEl.scrollTop =
-          (this.optionsList.findIndex((x) => x.textContent === (item === null || item === void 0 ? void 0 : item.textContent)) - 2) * item.offsetHeight;
-        break;
-      case "first":
-        this.optionsEl.scrollTop = 0;
-        break;
-      case "last":
-        this.optionsEl.scrollTop = this.optionsList[0].clientHeight * this.optionsList.length;
-        break;
-    }
-  }
-  moveUp(el) {
-    const prevEl = el.previousElementSibling;
-    if (prevEl) {
-      // scroll option to top of dropdown if partially obscured / out of view
-      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {
-        this.setDropdownPosition("top", el);
-      }
-      this.focusOption(prevEl);
-    }
-    else {
-      this.focusOption(this.optionsList[this.optionsList.length - 1]);
-      this.setDropdownPosition("last");
-    }
-  }
-  moveDown(el) {
-    const nextEl = el.nextElementSibling;
-    if (nextEl) {
-      // scroll option to bottom of dropdown if partially obscured / out of view
-      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {
-        this.setDropdownPosition("bottom", el);
-      }
-      this.focusOption(nextEl);
-    }
-    else {
-      this.focusOption(this.optionsList[0]);
-      this.setDropdownPosition("first");
-    }
-  }
-  handleOptionClick(time) {
-    this.close();
-    this.setValue(time);
-    this.processInput();
-  }
-  handleInput() {
-    this.value = this.inputEl.value;
-    if (this.isValidTime(this.value)) {
-      this.handleListSelection(this.findNearestTimeInterval(this.value));
-      this.setDropdownPosition("center", this.selectedOption);
-    }
-  }
-  handleInputBlur(ev) {
-    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
-    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
-    if (!shouldPreventValidation) {
-      this.processInput();
-    }
-    this.tpWrapper.classList.remove("focus");
-  }
-  renderOptions() {
-    return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, role: "option", "aria-selected": time === "09:00" ? "true" : false, onClick: () => this.handleOptionClick(time) }, this.formatToDisplay(time))));
-  }
-  render() {
-    return (h(Host, { id: this.uid, invalid: !!this.displayedErrorMessage ? "true" : null, onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.displayedErrorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: `label-${this.uid}`, class: "label", htmlFor: `time-input-${this.uid}` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { id: `time-input-${this.uid}`, "aria-label": this.label, "aria-describedby": `error-${this.uid}`, ref: (el) => (this.inputEl = el), onBlur: (ev) => this.handleInputBlur(ev), onInput: () => this.handleInput(), disabled: this.disabled, required: this.requiredField, placeholder: this.timeFormat, autocomplete: "off", onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { id: `btn-${this.uid}`, class: this.isTabbing ? "user-is-tabbing" : "", ref: (el) => (this.buttonEl = el), disabled: this.disabled, "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": `time-input-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()) }, h("span", { class: "clock" })), h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, role: "listbox", "aria-labelledby": `label-${this.uid}`, "aria-describedby": this.isExpanded ? "collapsed" : null, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { id: `error-${this.uid}`, class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.displayedErrorMessage)))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["updateErrorState"]
-  }; }
-};
+const Timepicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmTimepickerNewValidValue = createEvent(this, "wmTimepickerNewValidValue", 7);
+    this.wmTimepickerOnChange = createEvent(this, "wmTimepickerOnChange", 7);
+    this.disabled = false;
+    this.value = "";
+    this.label = "";
+    this.labelPosition = "top";
+    this.requiredField = false;
+    this.isExpanded = false;
+    this.isTabbing = false;
+    this.twelveHrValid = /^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;
+    this.twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;
+    this.uid = "";
+    this.timeFormat = "hh:mm";
+    this.times = [];
+    this.openUp = false;
+    this.buttonAriaLabel = intl.formatMessage({
+      id: "time.selectTime",
+      defaultMessage: "Select time",
+    });
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  blurHandler(ev) {
+    if (ev.target !== this.el && this.isExpanded) {
+      this.close();
+    }
+  }
+  handleKey(ev) {
+    switch (ev.key) {
+      case "ArrowDown":
+        ev.preventDefault();
+        if (this.isExpanded === false) {
+          this.open("next");
+        }
+        else {
+          this.moveDown(this.selectedOption);
+        }
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        if (this.isExpanded === false) {
+          this.open("previous");
+        }
+        else {
+          this.moveUp(this.selectedOption);
+        }
+        break;
+      case "Enter":
+      case " ":
+        if (this.isExpanded) {
+          ev.preventDefault();
+          this.handleOptionClick(this.selectedOption.textContent);
+        }
+        break;
+      case "Escape":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
+          this.close();
+        }
+        break;
+      case "Tab":
+        if (this.isExpanded) {
+          this.close();
+        }
+        break;
+      case "Home":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          this.focusOption(this.optionsList[0]);
+          this.setDropdownPosition("first");
+        }
+        break;
+      case "End":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          this.focusOption(this.optionsList[this.optionsList.length - 1]);
+          this.setDropdownPosition("last");
+        }
+        break;
+    }
+  }
+  updateErrorState() {
+    this.displayedErrorMessage = this.errorMessage;
+  }
+  componentWillLoad() {
+    if (this.label === "") {
+      throw new Error("You must include a label prop for the datepicker input (for accessibility requirements), even if the label position is none.");
+    }
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
+    this.uid = this.el.id ? this.el.id : generateId();
+    this.updateErrorState();
+    this.timeFormat = intl.formatMessage({
+      id: "time.timeFormat",
+      defaultMessage: "hh:mm",
+    });
+    this.times = this.generateTimes();
+  }
+  componentDidLoad() {
+    this.optionsEl.classList.add("hidden");
+    this.optionsList = Array.from(this.optionsEl.querySelectorAll("li"));
+    if (this.value) {
+      this.processInput();
+    }
+  }
+  isValidTime(input) {
+    return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);
+  }
+  generateTimes() {
+    let times = [];
+    let startTime = 0;
+    for (let i = 0; startTime < 24 * 60; i++) {
+      const h = Math.floor(startTime / 60);
+      const hour = h.toString().padStart(2, "0");
+      const m = (startTime % 60).toString();
+      const min = m.padStart(2, "0");
+      times[i] = `${hour}:${min}`;
+      startTime = startTime + 15;
+    }
+    return times;
+  }
+  findNearestTimeInterval(time) {
+    let formattedTime = this.formatToStorage(time);
+    const minutes = parseInt(formattedTime.slice(3, 5));
+    // first find the closest 15 min increment
+    if (minutes % 15 !== 0) {
+      const hour = parseInt(formattedTime.slice(0, 2));
+      let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, "0");
+      if (roundedMinutes === "60") {
+        roundedMinutes = "00";
+        let roundedHour = hour + 1;
+        if (roundedHour === 24) {
+          roundedHour = 0;
+        }
+        formattedTime = formattedTime.replace(`${hour.toString().padStart(2, "0")}:`, `${roundedHour.toString().padStart(2, "0")}:`);
+      }
+      if (parseInt(roundedMinutes) < 8) {
+        roundedMinutes = "00";
+      }
+      time = formattedTime.replace(`:${minutes.toString().padStart(2, "0")}`, `:${roundedMinutes}`);
+    }
+    return time;
+  }
+  handleListSelection(time) {
+    time = this.findNearestTimeInterval(time);
+    const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];
+    // not DOM focus, just setting the proper ARIA attributes
+    option && this.focusOption(option);
+  }
+  setValue(time) {
+    const previousValue = this.value;
+    this.inputEl.value = this.formatToDisplay(time);
+    this.value = this.formatToStorage(time);
+    // update the selection in the list
+    // so it opens on the closest item
+    this.handleListSelection(time);
+    if (previousValue !== this.value) {
+      this.wmTimepickerNewValidValue.emit({ value: this.value });
+    }
+    // deprecated in favor of wmTimepickerNewValidValue and input
+    this.wmTimepickerOnChange.emit({
+      value: this.value,
+      isValid: !!this.displayedErrorMessage,
+    });
+  }
+  processInput() {
+    if (this.isValidTime(this.value)) {
+      this.setValue(this.value);
+    }
+    const newErrorMessage = this.determineErrorMessage();
+    this.displayedErrorMessage = newErrorMessage;
+  }
+  determineErrorMessage() {
+    let message = this.errorMessage;
+    const requiredError = intl.formatMessage({
+      id: "time.requiredError",
+      defaultMessage: "A time is required.",
+    });
+    const invalidError = intl.formatMessage({
+      id: "time.invalidTime",
+      defaultMessage: "Please enter a valid time.",
+    });
+    const isValid = this.isValidTime(this.value);
+    if (isValid && !this.errorMessage) {
+      message = null;
+    }
+    else if (!isValid && !this.errorMessage) {
+      if (this.requiredField && !this.value) {
+        message = requiredError;
+      }
+      else if (this.value) {
+        message = invalidError;
+      }
+      else {
+        message = null;
+      }
+    }
+    return message;
+  }
+  splitTime(time) {
+    const splitTime = this.twelveHrValid.exec(time) || this.twentyFourHrValid.exec(time);
+    let hours = parseInt(splitTime[1]);
+    let minutes = splitTime[2] || "00";
+    let amPm = splitTime ? splitTime[3] : undefined;
+    // handles edge case uncaught by regex '0pm'
+    if (hours === 0 && (amPm === null || amPm === void 0 ? void 0 : amPm.toUpperCase().includes("P"))) {
+      // if user types '0pm' we change it to midnight
+      amPm = "AM";
+    }
+    return [hours, minutes, amPm];
+  }
+  formatToDisplay(time) {
+    let [hours, minutes, amPm] = this.splitTime(time);
+    // at the moment the component only displays in 12hr AM/PM
+    if (hours === 12 && !amPm) {
+      amPm = "PM";
+    }
+    if (hours === 0 || hours === 24) {
+      hours = 12;
+    }
+    if (hours > 12) {
+      hours -= 12;
+      amPm = "PM";
+    }
+    if (amPm && amPm.toUpperCase().includes("P")) {
+      amPm = "PM";
+    }
+    else {
+      amPm = "AM";
+    }
+    return `${hours.toString().padStart(2, "0")}:${minutes} ${amPm}`;
+  }
+  formatToStorage(time) {
+    let [hours, minutes, amPm] = this.splitTime(time);
+    if (hours === 24) {
+      hours = 0;
+    }
+    if (hours === 12 && amPm && amPm.toUpperCase().includes("A")) {
+      hours -= 12;
+    }
+    if (amPm && amPm.toUpperCase().includes("P") && hours !== 12) {
+      hours += 12;
+    }
+    return `${hours.toString().padStart(2, "0")}:${minutes}`;
+  }
+  open(itemToSelect) {
+    this.el.focus();
+    this.openUp = shouldOpenUp(this.el, this.optionsEl);
+    this.isExpanded = true;
+    this.optionsEl.classList.remove("hidden");
+    if (this.errorMessage || !this.value) {
+      this.handleListSelection("09:00");
+    }
+    this.setDropdownPosition("center", this.selectedOption);
+    window.requestAnimationFrame(() => {
+      if (itemToSelect === "next") {
+        this.moveDown(this.selectedOption);
+      }
+      else if (itemToSelect === "previous") {
+        this.moveUp(this.selectedOption);
+      }
+    });
+  }
+  close(returnFocus = true) {
+    this.isExpanded = false;
+    window.setTimeout(() => {
+      this.optionsEl.classList.add("hidden");
+      // Returns focus to button after popup closes (no need if user is tabbing)
+      // Delay is necessary for screenreader to get new expanded state before focus
+      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
+      // also UX wise, it makes sense for the button to only be focused after the animation is complete
+      if (returnFocus) {
+        this.buttonEl.focus();
+      }
+    }, 150);
+  }
+  focusOption(item) {
+    // not an actual focus, just accessibility stuff
+    this.optionsList.forEach((option) => {
+      option.removeAttribute("aria-selected");
+    });
+    this.inputEl.setAttribute("aria-activedescendant", item.id);
+    item.setAttribute("aria-selected", "true");
+    this.selectedOption = item;
+  }
+  setDropdownPosition(position, item) {
+    switch (position) {
+      case "top":
+        const prevItem = item === null || item === void 0 ? void 0 : item.previousElementSibling;
+        this.optionsEl.scrollTop =
+          prevItem.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;
+        break;
+      case "bottom":
+        const nextItem = item === null || item === void 0 ? void 0 : item.nextElementSibling;
+        this.optionsEl.scrollTop =
+          nextItem.getBoundingClientRect().bottom -
+            this.optionsEl.getBoundingClientRect().top +
+            this.optionsEl.scrollTop -
+            this.optionsEl.offsetHeight;
+        break;
+      case "center":
+        this.optionsEl.scrollTop =
+          (this.optionsList.findIndex((x) => x.textContent === (item === null || item === void 0 ? void 0 : item.textContent)) - 2) * item.offsetHeight;
+        break;
+      case "first":
+        this.optionsEl.scrollTop = 0;
+        break;
+      case "last":
+        this.optionsEl.scrollTop = this.optionsList[0].clientHeight * this.optionsList.length;
+        break;
+    }
+  }
+  moveUp(el) {
+    const prevEl = el.previousElementSibling;
+    if (prevEl) {
+      // scroll option to top of dropdown if partially obscured / out of view
+      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {
+        this.setDropdownPosition("top", el);
+      }
+      this.focusOption(prevEl);
+    }
+    else {
+      this.focusOption(this.optionsList[this.optionsList.length - 1]);
+      this.setDropdownPosition("last");
+    }
+  }
+  moveDown(el) {
+    const nextEl = el.nextElementSibling;
+    if (nextEl) {
+      // scroll option to bottom of dropdown if partially obscured / out of view
+      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {
+        this.setDropdownPosition("bottom", el);
+      }
+      this.focusOption(nextEl);
+    }
+    else {
+      this.focusOption(this.optionsList[0]);
+      this.setDropdownPosition("first");
+    }
+  }
+  handleOptionClick(time) {
+    this.close();
+    this.setValue(time);
+    this.processInput();
+  }
+  handleInput() {
+    this.value = this.inputEl.value;
+    if (this.isValidTime(this.value)) {
+      this.handleListSelection(this.findNearestTimeInterval(this.value));
+      this.setDropdownPosition("center", this.selectedOption);
+    }
+  }
+  handleInputBlur(ev) {
+    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
+    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
+    if (!shouldPreventValidation) {
+      this.processInput();
+    }
+    this.tpWrapper.classList.remove("focus");
+  }
+  renderOptions() {
+    return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, role: "option", "aria-selected": time === "09:00" ? "true" : false, onClick: () => this.handleOptionClick(time) }, this.formatToDisplay(time))));
+  }
+  render() {
+    return (h(Host, { id: this.uid, invalid: !!this.displayedErrorMessage ? "true" : null, onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.displayedErrorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: `label-${this.uid}`, class: "label", htmlFor: `time-input-${this.uid}` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { id: `time-input-${this.uid}`, "aria-label": this.label, "aria-describedby": `error-${this.uid}`, ref: (el) => (this.inputEl = el), onBlur: (ev) => this.handleInputBlur(ev), onInput: () => this.handleInput(), disabled: this.disabled, required: this.requiredField, placeholder: this.timeFormat, autocomplete: "off", onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { id: `btn-${this.uid}`, class: this.isTabbing ? "user-is-tabbing" : "", ref: (el) => (this.buttonEl = el), disabled: this.disabled, "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": `time-input-${this.uid}`, onClick: () => (this.isExpanded ? this.close() : this.open()) }, h("span", { class: "clock" })), h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, role: "listbox", "aria-labelledby": `label-${this.uid}`, "aria-describedby": this.isExpanded ? "collapsed" : null, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { id: `error-${this.uid}`, class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.displayedErrorMessage)))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["updateErrorState"]
+  }; }
+};
 Timepicker.style = wmTimepickerCss;
 
 export { Timepicker as wm_timepicker };