@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

@@ -1,550 +1,546 @@
 import { h, Host } from "@stencil/core";
 import { intl, shouldOpenUp, toBool, handleDisabledAttribute } from "../../global/functions";
 export class Timepicker {
-    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;
-        this.isTabbing = 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);
-    }
-    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}`;
+  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;
+    this.isTabbing = 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);
+  }
+  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}`;
+    }
+    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 {
+      return time;
+    }
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleKey(ev) {
+    switch (ev.key) {
+      case "ArrowDown":
+        ev.preventDefault();
+        if (this.isExpanded === false) {
+          this.open("next");
         }
-        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.moveNext(this.selectedOption);
+        }
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        if (this.isExpanded === false) {
+          this.open("previous");
         }
         else {
-            return time;
+          this.movePrevious(this.selectedOption);
         }
-    }
-    toggleTabbingOn() {
-        this.isTabbing = true;
-    }
-    toggleTabbingOff() {
-        this.isTabbing = false;
-    }
-    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 "Enter":
+      case " ":
+        if (this.isExpanded) {
+          ev.preventDefault();
+          this.handleOptionClick(this.selectedOption.dataset.time);
         }
-    }
-    handleDisabledChange() {
-        handleDisabledAttribute(this.el, this.isDisabled);
-    }
-    handleValueChange() {
-        this.inputEl.value = this.value ? this.value : "";
-    }
-    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 "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();
         }
-        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");
-    }
-    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;
+      case "Tab":
+        if (this.isExpanded) {
+          this.close(false);
         }
-        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";
+        break;
+      case "Home":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          this.focusOption(this.optionsList[0]);
         }
-        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];
+        break;
+      case "End":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          this.focusOption(this.optionsList[this.optionsList.length - 1]);
         }
-        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];
+        break;
+    }
+  }
+  handleDisabledChange() {
+    handleDisabledAttribute(this.el, this.isDisabled);
+  }
+  handleValueChange() {
+    this.inputEl.value = this.value ? this.value : "";
+  }
+  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.");
+    }
+    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");
+  }
+  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;
+    }
+    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";
+    }
+    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 === (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;
         }
-        // position option in center of dropdown
-        this.optionsEl.scrollTop =
-            (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}`);
+        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, { onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { 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", { id: "btn", class: this.isTabbing ? "user-is-tabbing" : "", 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", { class: "clock" })), h("ul", { 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", { id: "error", class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage)))));
+  }
+  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 | 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"
+      },
+      "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": {},
+      "isTabbing": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmTimepickerInputBlurred",
+        "name": "wmTimepickerInputBlurred",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
-        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, { onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { 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", { id: "btn", class: this.isTabbing ? "user-is-tabbing" : "", 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", { class: "clock" })), h("ul", { 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", { id: "error", class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage)))));
-    }
-    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 | 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"
-            },
-            "preselected": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "preselected",
-                "reflect": false
+      }, {
+        "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": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
             }
-        };
-    }
-    static get states() {
-        return {
-            "isExpanded": {},
-            "isTabbing": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmTimepickerInputBlurred",
-                "name": "wmTimepickerInputBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "reformatTime": {
+        "complexType": {
+          "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
             }, {
-                "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": [{
-                            "tags": [],
-                            "text": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TimeFormat12": {
+              "location": "import",
+              "path": "../../global/interfaces"
             },
-            "reformatTime": {
-                "complexType": {
-                    "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
-                    "parameters": [{
-                            "tags": [],
-                            "text": ""
-                        }, {
-                            "tags": [],
-                            "text": ""
-                        }],
-                    "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": []
-                }
+            "TimeFormat24": {
+              "location": "import",
+              "path": "../../global/interfaces"
             }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "disabled",
-                "methodName": "handleDisabledChange"
-            }, {
-                "propName": "value",
-                "methodName": "handleValueChange"
-            }];
-    }
-    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": "keydown",
-                "method": "handleKey",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
+          },
+          "return": "Promise<string>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
+      }, {
+        "propName": "value",
+        "methodName": "handleValueChange"
+      }];
+  }
+  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": "keydown",
+        "method": "handleKey",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }