@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -1,567 +1,553 @@
-import { h, Component, Host, Element, Prop, Watch, State, Listen, Event } from "@stencil/core";
-import { intl, generateId, shouldOpenUp, isRelatedTarget } from "../../global/functions";
+import { h, Host } from "@stencil/core";
+import { intl, shouldOpenUp, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../global/functions";
 export class Timepicker {
-  constructor() {
-    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");
+    constructor() {
+        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.timeFormat = "hh:mm";
+        this.times = this.generateTimeIntervals();
+        this.openUp = false;
+        this.buttonAriaLabel = intl.formatMessage({
+            id: "time.selectTime",
+            defaultMessage: "Select time",
+            description: "Button text for screen readers.",
+        });
+        this.disabled = false;
+        this.value = "";
+        this.errorMessage = undefined;
+        this.label = "";
+        this.labelPosition = "top";
+        this.requiredField = false;
+        this.preselected = undefined;
+        this.isExpanded = false;
+    }
+    get selectedOption() {
+        return this.optionsList.filter((option) => option.tabIndex === 0)[0];
+    }
+    get optionsList() {
+        return Array.from(this.optionsEl.querySelectorAll("li"));
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    async isValidTime(input) {
+        return this.isValidTimeInternal(input);
+    }
+    isValidTimeInternal(input) {
+        return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);
+    }
+    async reformatTime(format, time) {
+        return this.reformatTimeInternal(format, time);
+    }
+    announce(message) {
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
         }
-        else {
-          this.moveDown(this.selectedOption);
+        this.liveRegionEl.textContent = message;
+    }
+    reformatTimeInternal(format, time) {
+        let [hours, minutes, amPm] = this.splitTime(time);
+        if (format === "12") {
+            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}`;
         }
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        if (this.isExpanded === false) {
-          this.open("previous");
+        else if (format === "24") {
+            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}`;
         }
         else {
-          this.moveUp(this.selectedOption);
+            return time;
         }
-        break;
-      case "Enter":
-      case " ":
-        if (this.isExpanded) {
-          ev.preventDefault();
-          this.handleOptionClick(this.selectedOption.textContent);
+    }
+    handleKey(ev) {
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                if (this.isExpanded === false) {
+                    this.open("next");
+                }
+                else {
+                    this.moveNext(this.selectedOption);
+                }
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                if (this.isExpanded === false) {
+                    this.open("previous");
+                }
+                else {
+                    this.movePrevious(this.selectedOption);
+                }
+                break;
+            case "Enter":
+            case " ":
+                if (this.isExpanded) {
+                    ev.preventDefault();
+                    this.handleOptionClick(this.selectedOption.dataset.time);
+                }
+                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(false);
+                }
+                break;
+            case "Home":
+                ev.preventDefault();
+                if (this.isExpanded) {
+                    this.focusOption(this.optionsList[0]);
+                }
+                break;
+            case "End":
+                ev.preventDefault();
+                if (this.isExpanded) {
+                    this.focusOption(this.optionsList[this.optionsList.length - 1]);
+                }
+                break;
         }
-        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();
+    }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    handleValueChange() {
+        this.inputEl.value = this.value ? this.value : "";
+    }
+    announceError() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage), 100);
         }
-        break;
-      case "Tab":
-        if (this.isExpanded) {
-          this.close();
+    }
+    componentWillLoad() {
+        if (this.label === "") {
+            console.error("You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.");
         }
-        break;
-      case "Home":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[0]);
-          this.setDropdownPosition("first");
+        this.timeFormat = intl.formatMessage({
+            id: "time.timeFormat",
+            defaultMessage: "hh:mm",
+        });
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    componentDidLoad() {
+        this.optionsEl.classList.add("hidden");
+    }
+    handleOptionClick(time) {
+        this.close();
+        this.wmTimepickerTimeSelected.emit({ time: time });
+    }
+    handleInputBlur() {
+        this.wmTimepickerInputBlurred.emit();
+        this.tpWrapper.classList.remove("focus");
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
         }
-        break;
-      case "End":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[this.optionsList.length - 1]);
-          this.setDropdownPosition("last");
+    }
+    generateTimeIntervals() {
+        let timeIntervals = [];
+        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");
+            timeIntervals[i] = `${hour}:${min}`;
+            startTime = startTime + 15;
         }
-        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;
+        return timeIntervals;
+    }
+    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";
         }
-        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) {
-    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);
-    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() {
-    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
-      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":
+        return [hours, minutes, amPm];
+    }
+    open(itemToSelect) {
+        this.openUp = shouldOpenUp(this.el, this.optionsEl.clientHeight);
+        this.isExpanded = true;
+        this.optionsEl.classList.remove("hidden");
+        // focus hierarchy: preselected prop -> parsed time -> 09:00
+        let focusOnOpenEl = this.optionsList[36]; // 09:00
+        if (this.preselected) {
+            focusOnOpenEl = this.optionsList.filter((option) => option.dataset.time == this.preselected)[0];
+        }
+        else if (this.isValidTimeInternal(this.value)) {
+            const nearestTime = this.findNearestTimeInterval(this.reformatTimeInternal("24", this.value));
+            focusOnOpenEl = this.optionsList.filter((option) => option.dataset.time == nearestTime)[0];
+        }
+        // position option in center of dropdown
         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.value = 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);
-    }
-  }
-  handleBlur(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 },
-      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.handleBlur(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)))));
-  }
-  static get is() { return "wm-timepicker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-timepicker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-timepicker.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "\"\""
-    },
-    "errorMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "null | string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "error-message",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "labelPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"top\" | \"left\" | \"none\"",
-        "resolved": "\"left\" | \"none\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-position",
-      "reflect": false,
-      "defaultValue": "\"top\""
-    },
-    "requiredField": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required-field",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "preventValidation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "prevent-validation",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "selectedOption": {},
-    "isExpanded": {},
-    "isTabbing": {},
-    "displayedErrorMessage": {}
-  }; }
-  static get events() { return [{
-      "method": "wmTimepickerOnChange",
-      "name": "wmTimepickerOnChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{\r\n    value: string;\r\n    isValid: boolean;\r\n  }",
-        "resolved": "{ value: string; isValid: boolean; }",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "errorMessage",
-      "methodName": "updateErrorState"
-    }]; }
-  static get listeners() { return [{
-      "name": "wmUserIsTabbing",
-      "method": "toggleTabbingOn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsNotTabbing",
-      "method": "toggleTabbingOff",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "blurHandler",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "handleKey",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+            (this.optionsList.findIndex((x) => x.textContent === (focusOnOpenEl === null || focusOnOpenEl === void 0 ? void 0 : focusOnOpenEl.textContent)) - 2) *
+                focusOnOpenEl.offsetHeight;
+        this.focusOption(focusOnOpenEl);
+        window.requestAnimationFrame(() => {
+            if (itemToSelect === "next") {
+                this.moveNext(this.selectedOption);
+            }
+            else if (itemToSelect === "previous") {
+                this.movePrevious(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) {
+        this.optionsList.forEach((option) => {
+            option.tabIndex = -1;
+        });
+        item.tabIndex = 0;
+        item.scrollIntoView({ block: "nearest" });
+        item.focus();
+    }
+    movePrevious(optionEl) {
+        this.focusOption(optionEl.previousElementSibling
+            ? optionEl.previousElementSibling
+            : this.optionsList[this.optionsList.length - 1]);
+    }
+    moveNext(optionEl) {
+        this.focusOption(optionEl.nextElementSibling ? optionEl.nextElementSibling : this.optionsList[0]);
+    }
+    findNearestTimeInterval(time) {
+        // accepts time in 24hr format
+        const minutes = parseInt(time.slice(3, 5));
+        // first find the closest 15 min increment
+        if (minutes % 15 !== 0) {
+            const hour = parseInt(time.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;
+                }
+                time = time.replace(`${hour.toString().padStart(2, "0")}:`, `${roundedHour.toString().padStart(2, "0")}:`);
+            }
+            if (parseInt(roundedMinutes) < 8) {
+                roundedMinutes = "00";
+            }
+            time = time.replace(`:${minutes.toString().padStart(2, "0")}`, `:${roundedMinutes}`);
+        }
+        return time;
+    }
+    renderOptions() {
+        return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
+    }
+    render() {
+        return (h(Host, { key: 'f057602385c3afa3fa41bfaede121e1a71046e04', onBlur: () => this.close(false) }, h("div", { key: 'ac40efb8246f22f8952e4a5719a86ad44d946125', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '63a8f7cc6531e0755e08d4828de669f8b4e7995b', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: 'cb8841c9d1cc202514f6de78e0c143dc905cb22e', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'ad989be822d6ebf295481098ea02b88c1983a680', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'c8cea84d56c4e198d9466820fb574090d62f4f82' }, h("div", { key: '02fdd089d088ec43a569ade536fde18ea31a39a9', class: "inner-wrapper" }, h("input", { key: '30080a9b2c5af94c17c278bd23c0123d1da95822', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '90a7fd0188f1d590509579b013cc506150749f9e', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+            // This addresses an issue in Safari, where clicking buttons does not focus them
+            // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
+            onMouseDown: (ev) => {
+                ev.preventDefault();
+                this.buttonEl.focus();
+            } }, h("span", { key: 'b9b7f2326eaf2047ae3cfbbaa1b853c02f92013d', class: "svg-icon svg-time" })), h("ul", { key: '321445600548b008758c69b2246d6965e8e93a6a', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '18e73b79a9b9372eb498b6a0c3438ef785b846f8', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'c80be090a83309d0a23daad6d0ebe6191082597e', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+    }
+    static get is() { return "wm-timepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-timepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-timepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"left\" | \"none\"",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "\"top\""
+            },
+            "requiredField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required-field",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "preselected": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "preselected",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmTimepickerInputBlurred",
+                "name": "wmTimepickerInputBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmTimepickerTimeSelected",
+                "name": "wmTimepickerTimeSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isValidTime": {
+                "complexType": {
+                    "signature": "(input: string) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "input",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reformatTime": {
+                "complexType": {
+                    "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
+                    "parameters": [{
+                            "name": "format",
+                            "type": "\"12\" | \"24\"",
+                            "docs": ""
+                        }, {
+                            "name": "time",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TimeFormat12": {
+                            "location": "import",
+                            "path": "../../global/interfaces",
+                            "id": "src/global/interfaces.ts::TimeFormat12"
+                        },
+                        "TimeFormat24": {
+                            "location": "import",
+                            "path": "../../global/interfaces",
+                            "id": "src/global/interfaces.ts::TimeFormat24"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "errorMessage",
+                "methodName": "announceError"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }