@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -2,299 +2,299 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fae02cd7.js');
-const functions = require('./functions-91da05e9.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.js');
 
 const wmTimepickerCss = ":host{--wmcolor-timepicker-background:var(--wmcolor-background);--wmcolor-timepicker-input-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-timepicker-input-background:var(--wmcolor-input-background);--wmcolor-timepicker-input-border:var(--wmcolor-input-border);--wmcolor-timepicker-input-text-disabled:var(--wmcolor-input-text-disabled);--wmcolor-timepicker-input-text:var(--wmcolor-text);--wmcolor-timepicker-option-background-focus:var(--wmcolor-interactive-background-hover);--wmcolor-timepicker-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-timepicker-option-background:var(--wmcolor-option-background);--wmcolor-timepicker-option-border:var(--wmcolor-option-border);--wmcolor-timepicker-option-text:var(--wmcolor-option-text);--wmcolor-timepicker-toggle-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-timepicker-toggle-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-timepicker-toggle-background:var(--wmcolor-input-background);--wmcolor-timepicker-toggle-icon-disabled:var(--wmcolor-interactive-disabled);--wmcolor-timepicker-toggle-icon:var(--wmcolor-interactive);font-family:inherit}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .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:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid;border-color:var(--wmcolor-timepicker-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .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%;-ms-flex:1;flex:1;margin:0;font-family:inherit}:host .wrapper .inner-wrapper input:disabled{background-color:var(--wmcolor-timepicker-input-background-disabled);color:var(--wmcolor-timepicker-input-text-disabled)}:host .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:var(--wmcolor-timepicker-toggle-background);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}:host .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:\"\\f150\";color:var(--wmcolor-timepicker-toggle-icon);font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover{background:var(--wmcolor-timepicker-toggle-background-hover);-webkit-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled{pointer-events:none;-webkit-box-shadow:none;box-shadow:none;background-color:var(--wmcolor-timepicker-toggle-background-disabled)}:host .wrapper .inner-wrapper button:disabled .clock::after{color:var(--wmcolor-timepicker-toggle-icon-disabled)}[dir=RTL] :host .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus{outline:none}:host .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 var(--wmcolor-interactive-focus);-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 var(--wmcolor-interactive-focus);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 var(--wmcolor-interactive-focus)}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .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;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-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;z-index:100;width:100%;font-size:0.875rem}:host .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{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-timepicker-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-timepicker-option-text)}:host .wrapper .inner-wrapper .options [role=option]:hover{background:var(--wmcolor-timepicker-option-background-hover);outline:none}:host .wrapper .inner-wrapper .options [role=option]:focus{outline:none;background:var(--wmcolor-timepicker-option-background-focus)}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid;border-color:var(--wmcolor-timepicker-option-border)}:host .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{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper.invalid .error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);outline:none;border-color:var(--wmcolor-input-border-focus)}";
 
 const Timepicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmTimepickerInputBlurred = index.createEvent(this, "wmTimepickerInputBlurred", 7);
-    this.wmTimepickerTimeSelected = index.createEvent(this, "wmTimepickerTimeSelected", 7);
-    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 = functions.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 functions.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(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.wmTimepickerInputBlurred = index.createEvent(this, "wmTimepickerInputBlurred", 7);
+        this.wmTimepickerTimeSelected = index.createEvent(this, "wmTimepickerTimeSelected", 7);
+        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 = functions.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;
     }
-    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}`;
+    get selectedOption() {
+        return this.optionsList.filter((option) => option.tabIndex === 0)[0];
     }
-    else {
-      return time;
+    get optionsList() {
+        return Array.from(this.optionsEl.querySelectorAll("li"));
     }
-  }
-  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);
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return functions.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}`;
         }
-        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.movePrevious(this.selectedOption);
+            return time;
         }
-        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();
+    }
+    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 "Tab":
-        if (this.isExpanded) {
-          this.close(false);
+    }
+    handleDisabledChange() {
+        functions.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 "Home":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[0]);
+        this.timeFormat = functions.intl.formatMessage({
+            id: "time.timeFormat",
+            defaultMessage: "hh:mm",
+        });
+        functions.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 "End":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[this.optionsList.length - 1]);
+        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;
+        return [hours, minutes, amPm];
     }
-  }
-  handleDisabledChange() {
-    functions.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.");
+    open(itemToSelect) {
+        this.openUp = functions.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);
+            }
+        });
     }
-    this.timeFormat = functions.intl.formatMessage({
-      id: "time.timeFormat",
-      defaultMessage: "hh:mm",
-    });
-    functions.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;
+    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);
     }
-    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";
+    focusOption(item) {
+        this.optionsList.forEach((option) => {
+            option.tabIndex = -1;
+        });
+        item.tabIndex = 0;
+        item.scrollIntoView({ block: "nearest" });
+        item.focus();
     }
-    return [hours, minutes, amPm];
-  }
-  open(itemToSelect) {
-    this.openUp = functions.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];
+    movePrevious(optionEl) {
+        this.focusOption(optionEl.previousElementSibling
+            ? optionEl.previousElementSibling
+            : 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];
+    moveNext(optionEl) {
+        this.focusOption(optionEl.nextElementSibling ? optionEl.nextElementSibling : this.optionsList[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;
+    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$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
+    }
+    render() {
+        return (index.h(index.Host, { onBlur: () => this.close(false) }, index.h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*"))))), index.h("div", null, index.h("div", { class: "inner-wrapper" }, index.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") }), index.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();
+            } }, index.h("span", { class: "clock" })), index.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())), index.h("div", { id: "error", class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage)))));
     }
-    return time;
-  }
-  renderOptions() {
-    return this.times.map((time, index$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
-  }
-  render() {
-    return (index.h(index.Host, { onBlur: () => this.close(false) }, index.h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*"))))), index.h("div", null, index.h("div", { class: "inner-wrapper" }, index.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") }), index.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();
-      } }, index.h("span", { class: "clock" })), index.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())), index.h("div", { id: "error", class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage)))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "disabled": ["handleDisabledChange"],
-    "value": ["handleValueChange"]
-  }; }
+    static get delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": ["handleDisabledChange"],
+        "value": ["handleValueChange"]
+    }; }
 };
 Timepicker.style = wmTimepickerCss;