@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,567 @@
+import { h, Component, Host, Element, Prop, Watch, State, Listen, Event } from "@stencil/core";
+import { intl, generateId, shouldOpenUp, isRelatedTarget } 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");
+        }
+        else {
+          this.moveDown(this.selectedOption);
+        }
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        if (this.isExpanded === false) {
+          this.open("previous");
+        }
+        else {
+          this.moveUp(this.selectedOption);
+        }
+        break;
+      case "Enter":
+      case " ":
+        if (this.isExpanded) {
+          ev.preventDefault();
+          this.handleOptionClick(this.selectedOption.textContent);
+        }
+        break;
+      case "Escape":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
+          this.close();
+        }
+        break;
+      case "Tab":
+        if (this.isExpanded) {
+          this.close();
+        }
+        break;
+      case "Home":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          this.focusOption(this.optionsList[0]);
+          this.setDropdownPosition("first");
+        }
+        break;
+      case "End":
+        ev.preventDefault();
+        if (this.isExpanded) {
+          this.focusOption(this.optionsList[this.optionsList.length - 1]);
+          this.setDropdownPosition("last");
+        }
+        break;
+    }
+  }
+  updateErrorState() {
+    this.displayedErrorMessage = this.errorMessage;
+  }
+  componentWillLoad() {
+    if (this.label === "") {
+      throw new Error("You must include a label prop for the datepicker input (for accessibility requirements), even if the label position is none.");
+    }
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
+    this.uid = this.el.id ? this.el.id : generateId();
+    this.updateErrorState();
+    this.timeFormat = intl.formatMessage({
+      id: "time.timeFormat",
+      defaultMessage: "hh:mm",
+    });
+    this.times = this.generateTimes();
+  }
+  componentDidLoad() {
+    this.optionsEl.classList.add("hidden");
+    this.optionsList = Array.from(this.optionsEl.querySelectorAll("li"));
+    if (this.value) {
+      this.processInput();
+    }
+  }
+  isValidTime(input) {
+    return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);
+  }
+  generateTimes() {
+    let times = [];
+    let startTime = 0;
+    for (let i = 0; startTime < 24 * 60; i++) {
+      const h = Math.floor(startTime / 60);
+      const hour = h.toString().padStart(2, "0");
+      const m = (startTime % 60).toString();
+      const min = m.padStart(2, "0");
+      times[i] = `${hour}:${min}`;
+      startTime = startTime + 15;
+    }
+    return times;
+  }
+  findNearestTimeInterval(time) {
+    let formattedTime = this.formatToStorage(time);
+    const minutes = parseInt(formattedTime.slice(3, 5));
+    // first find the closest 15 min increment
+    if (minutes % 15 !== 0) {
+      const hour = parseInt(formattedTime.slice(0, 2));
+      let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, "0");
+      if (roundedMinutes === "60") {
+        roundedMinutes = "00";
+        let roundedHour = hour + 1;
+        if (roundedHour === 24) {
+          roundedHour = 0;
+        }
+        formattedTime = formattedTime.replace(`${hour.toString().padStart(2, "0")}:`, `${roundedHour.toString().padStart(2, "0")}:`);
+      }
+      if (parseInt(roundedMinutes) < 8) {
+        roundedMinutes = "00";
+      }
+      time = formattedTime.replace(`:${minutes.toString().padStart(2, "0")}`, `:${roundedMinutes}`);
+    }
+    return time;
+  }
+  handleListSelection(time) {
+    time = this.findNearestTimeInterval(time);
+    const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];
+    // not DOM focus, just setting the proper ARIA attributes
+    option && this.focusOption(option);
+  }
+  setValue(time) {
+    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":
+        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": "{\n    value: string;\n    isValid: boolean;\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
+    }]; }
+}