@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,382 +0,0 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-d5997567.js';
-import { i as intl, g as generateId, a as shouldOpenUp, h as isRelatedTarget } from './functions-316c1b23.js';
-
-const wmTimepickerCss = "@charset \"UTF-8\";:host,wm-timepicker{font-family:inherit}:host *,wm-timepicker *{box-sizing:border-box}:host .sr-only,wm-timepicker .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper,wm-timepicker .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-timepicker .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-timepicker .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-timepicker .wrapper.label-left{flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-timepicker .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-timepicker .wrapper.label-left .label-wrapper .label{display:flex;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-timepicker .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-timepicker .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-timepicker .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-timepicker .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-timepicker .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-timepicker .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper input,wm-timepicker .wrapper .inner-wrapper input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;flex:1;margin:0}:host .wrapper .inner-wrapper input:disabled,wm-timepicker .wrapper .inner-wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper .inner-wrapper input:focus,wm-timepicker .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button,wm-timepicker .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:#fff;border:none;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-top-left-radius:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button .clock::after,wm-timepicker .wrapper .inner-wrapper button .clock::after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";color:#575195;font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover,wm-timepicker .wrapper .inner-wrapper button:hover{background:#e6e6e6;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled,wm-timepicker .wrapper .inner-wrapper button:disabled{background-color:rgba(74, 74, 74, 0.05);pointer-events:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled .clock::after,wm-timepicker .wrapper .inner-wrapper button:disabled .clock::after{color:#7b7b7b}[dir=RTL] :host .wrapper .inner-wrapper button,[dir=RTL] wm-timepicker .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus,wm-timepicker .wrapper .inner-wrapper button:focus{outline:none}:host .wrapper .inner-wrapper button.user-is-tabbing:focus,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper .options,wm-timepicker .wrapper .inner-wrapper .options{margin:0;padding:0;-webkit-overflow-scrolling:touch;overflow:auto;max-height:19.0625rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:2.5rem;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .wrapper .inner-wrapper .options.upwards,wm-timepicker .wrapper .inner-wrapper .options.upwards{top:unset;bottom:2.5rem;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .wrapper .inner-wrapper .options.hidden,wm-timepicker .wrapper .inner-wrapper .options.hidden{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option],wm-timepicker .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a}:host .wrapper .inner-wrapper .options [role=option]:hover,wm-timepicker .wrapper .inner-wrapper .options [role=option]:hover{background:#f4f4f4;outline:none}:host .wrapper .inner-wrapper .options [role=option][aria-selected=true],wm-timepicker .wrapper .inner-wrapper .options [role=option][aria-selected=true]{outline:none;background:#f4f4f4}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child),wm-timepicker .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .wrapper .inner-wrapper .options.open,wm-timepicker .wrapper .inner-wrapper .options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper.invalid .inner-wrapper,wm-timepicker .wrapper.invalid .inner-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error,wm-timepicker .wrapper.invalid .error{color:#c0392b;margin-top:4px;margin-bottom:4px;display:block;top:100%;left:0;font-style:italic}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-wrapper,wm-timepicker .wrapper:focus .inner-wrapper,wm-timepicker .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}";
-
-const Timepicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmTimepickerOnChange = createEvent(this, "wmTimepickerOnChange", 7);
-    this.disabled = false;
-    this.value = "";
-    this.label = "";
-    this.labelPosition = "top";
-    this.requiredField = false;
-    this.isExpanded = false;
-    this.isTabbing = false;
-    this.twelveHrValid = /^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;
-    this.twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;
-    this.uid = "";
-    this.timeFormat = "hh:mm";
-    this.times = [];
-    this.openUp = false;
-    this.buttonAriaLabel = intl.formatMessage({
-      id: "time.selectTime",
-      defaultMessage: "Select time",
-    });
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  blurHandler(ev) {
-    if (ev.target !== this.el && this.isExpanded) {
-      this.close();
-    }
-  }
-  handleKey(ev) {
-    switch (ev.key) {
-      case "ArrowDown":
-        ev.preventDefault();
-        if (this.isExpanded === false) {
-          this.open("next");
-        }
-        else {
-          this.moveDown(this.selectedOption);
-        }
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        if (this.isExpanded === false) {
-          this.open("previous");
-        }
-        else {
-          this.moveUp(this.selectedOption);
-        }
-        break;
-      case "Enter":
-      case " ":
-        if (this.isExpanded) {
-          ev.preventDefault();
-          this.handleOptionClick(this.selectedOption.textContent);
-        }
-        break;
-      case "Escape":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
-          this.close();
-        }
-        break;
-      case "Tab":
-        if (this.isExpanded) {
-          this.close();
-        }
-        break;
-      case "Home":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[0]);
-          this.setDropdownPosition("first");
-        }
-        break;
-      case "End":
-        ev.preventDefault();
-        if (this.isExpanded) {
-          this.focusOption(this.optionsList[this.optionsList.length - 1]);
-          this.setDropdownPosition("last");
-        }
-        break;
-    }
-  }
-  updateErrorState() {
-    this.displayedErrorMessage = this.errorMessage;
-  }
-  componentWillLoad() {
-    if (this.label === "") {
-      throw new Error("You must include a label prop for the datepicker input (for accessibility requirements), even if the label position is none.");
-    }
-    this.el.focus = function () {
-      if (!this.disabled) {
-        this.shadowRoot.querySelector("input").focus();
-      }
-    };
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.updateErrorState();
-    this.timeFormat = intl.formatMessage({
-      id: "time.timeFormat",
-      defaultMessage: "hh:mm",
-    });
-    this.times = this.generateTimes();
-  }
-  componentDidLoad() {
-    this.optionsEl.classList.add("hidden");
-    this.optionsList = Array.from(this.optionsEl.querySelectorAll("li"));
-    if (this.value) {
-      this.processInput();
-    }
-  }
-  isValidTime(input) {
-    return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);
-  }
-  generateTimes() {
-    let times = [];
-    let startTime = 0;
-    for (let i = 0; startTime < 24 * 60; i++) {
-      const h = Math.floor(startTime / 60);
-      const hour = h.toString().padStart(2, "0");
-      const m = (startTime % 60).toString();
-      const min = m.padStart(2, "0");
-      times[i] = `${hour}:${min}`;
-      startTime = startTime + 15;
-    }
-    return times;
-  }
-  findNearestTimeInterval(time) {
-    let formattedTime = this.formatToStorage(time);
-    const minutes = parseInt(formattedTime.slice(3, 5));
-    // first find the closest 15 min increment
-    if (minutes % 15 !== 0) {
-      const hour = parseInt(formattedTime.slice(0, 2));
-      let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, "0");
-      if (roundedMinutes === "60") {
-        roundedMinutes = "00";
-        let roundedHour = hour + 1;
-        if (roundedHour === 24) {
-          roundedHour = 0;
-        }
-        formattedTime = formattedTime.replace(`${hour.toString().padStart(2, "0")}:`, `${roundedHour.toString().padStart(2, "0")}:`);
-      }
-      if (parseInt(roundedMinutes) < 8) {
-        roundedMinutes = "00";
-      }
-      time = formattedTime.replace(`:${minutes.toString().padStart(2, "0")}`, `:${roundedMinutes}`);
-    }
-    return time;
-  }
-  handleListSelection(time) {
-    time = this.findNearestTimeInterval(time);
-    const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];
-    // not DOM focus, just setting the proper ARIA attributes
-    option && this.focusOption(option);
-  }
-  setValue(time) {
-    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)))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["updateErrorState"]
-  }; }
-};
-Timepicker.style = wmTimepickerCss;
-
-export { Timepicker as wm_timepicker };

package/dist/componentlibrary/wm-toggletip.entry.js

@@ -1,124 +0,0 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-d5997567.js';
-import { i as intl, a as shouldOpenUp, o as shouldOpenDown, s as shouldShiftRight, p as shouldShiftLeft } from './functions-316c1b23.js';
-
-const wmToggletipCss = "@charset \"UTF-8\";:host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;justify-content:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button:before{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:\"\";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
-
-const Toggletip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tooltipPosition = "bottom-right";
-    this.isOpen = false;
-    this.isTabbing = false;
-    this.tooltipMessage = intl.formatMessage({
-      id: "toggletip.moreInformation",
-      defaultMessage: "More information",
-    });
-  }
-  componentWillLoad() {
-    const validTooltipPositions = [
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "top-right",
-      "top-left",
-      "bottom-right",
-      "bottom-left",
-    ];
-    if (!this.label) {
-      console.error("wm-toggletip must have a label property");
-    }
-    if (!this.tooltipText) {
-      console.error("wm-toggletip must have a tooltip-text property");
-    }
-    if (!validTooltipPositions.includes(this.tooltipPosition)) {
-      console.error(`wm-toggletip property tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPositions}`);
-    }
-    this.el.focus = function () {
-      this.shadowRoot.querySelector("button").focus();
-    };
-  }
-  handleKeydown(ev) {
-    switch (ev.key) {
-      case "Escape":
-        ev.preventDefault();
-        if (this.isOpen) {
-          ev.stopPropagation(); // prevent closing modal if within one
-          this.close();
-        }
-        break;
-      case "Tab":
-        if (this.isOpen) {
-          this.close();
-        }
-    }
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleClick(ev) {
-    if (this.isOpen) {
-      if (ev.target === this.el || this.el.contains(ev.target)) {
-        // Re-announce if clicking any part of the component while open
-        this.announceToggletip();
-      }
-      else {
-        this.close();
-      }
-    }
-  }
-  open() {
-    this.isOpen = true;
-    this.announceToggletip();
-  }
-  close() {
-    this.isOpen = false;
-    this.hideTooltip();
-  }
-  showTooltip() {
-    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class
-    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars
-    this.setToggletipPosition();
-    this.tooltipEl.classList.add("hover");
-  }
-  hideTooltip() {
-    this.tooltipEl.classList.remove("hover");
-  }
-  announceToggletip() {
-    this.liveRegionEl.innerHTML = "";
-    setTimeout(() => {
-      this.liveRegionEl.innerHTML = this.tooltipText;
-    }, 10);
-  }
-  setToggletipPosition() {
-    // Vertical
-    if (this.tooltipPosition.includes("bottom") && shouldOpenUp(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("bottom", "top");
-    }
-    else if (this.tooltipPosition.includes("top") && shouldOpenDown(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("top", "bottom");
-    }
-    // Horizontal
-    if (this.tooltipPosition.includes("left") && shouldShiftRight(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("left", "right");
-    }
-    else if (this.tooltipPosition.includes("right") && shouldShiftLeft(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("right", "left");
-    }
-  }
-  render() {
-    return (h(Host, null, h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => {
-        this.setToggletipPosition();
-        this.open();
-      },
-      // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-      onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.hideTooltip() }), h("div", { ref: (el) => (this.tooltipEl = el), class: `tooltip ${this.tooltipPosition} ${this.isOpen ? "hidden" : ""}`, "aria-hidden": "true" }, this.tooltipMessage), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltipText), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
-  }
-  get el() { return getElement(this); }
-};
-Toggletip.style = wmToggletipCss;
-
-export { Toggletip as wm_toggletip };