@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,257 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmDatepickerCss = "@charset \"UTF-8\";:host,wm-datepicker{font-family:inherit}:host *,wm-datepicker *{box-sizing:border-box}:host .wrapper,wm-datepicker .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-datepicker .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-datepicker .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-datepicker .wrapper.label-left{flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-datepicker .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-datepicker .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-datepicker .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-datepicker .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-datepicker .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-datepicker .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-datepicker .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper,wm-datepicker .wrapper{position:relative}:host .wrapper .required,wm-datepicker .wrapper .required{color:#c4431c}:host .wrapper .inner-wrapper,wm-datepicker .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;height:2.5rem;border:1px solid;border-color:rgba(35, 35, 35, 0.6);-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 .date-input,wm-datepicker .wrapper .inner-wrapper .date-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 .date-input:disabled,wm-datepicker .wrapper .inner-wrapper .date-input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper .inner-wrapper .date-input:focus,wm-datepicker .wrapper .inner-wrapper .date-input:focus{outline:none}:host .wrapper.invalid .inner-wrapper,wm-datepicker .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-datepicker .wrapper.invalid .error{margin-top:4px;margin-bottom:4px;display:block;top:100%;left:0;font-style:italic;font-size:0.875rem;color:#c0392b}:host .wrapper.focus .inner-wrapper,wm-datepicker .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}:host .user-is-tabbing .toggle:focus:not(:active),wm-datepicker .user-is-tabbing .toggle:focus:not(:active){border:none;z-index:11}";
+
+const DatePicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.value = "";
+    this.disabled = false;
+    this.dateFormat = "US";
+    this.errorMessage = "";
+    this.labelPosition = "top";
+    this.label = "";
+    this.requiredField = false;
+    this.displayError = "";
+    // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits
+    this.parsableEntry = /^(\d{1}|\d{2}|\d{4})[\-\.\/]\d{1,2}[\-\.\/](\d{1}|\d{2}|\d{4})$/;
+    this.isoEntry = /^\d\d\d\d[-]\d\d[-]\d\d$/;
+    this.eightDigitsEntry = /^\d{8}$/;
+    this.dateFormats = {
+      US: functions.intl.formatMessage({
+        id: "date.formatUS",
+        defaultMessage: "mm/dd/yyyy",
+      }),
+      INT: functions.intl.formatMessage({
+        id: "date.formatINT",
+        defaultMessage: "dd/mm/yyyy",
+      }),
+      ISO: functions.intl.formatMessage({
+        id: "date.formatISO",
+        defaultMessage: "yyyy/mm/dd",
+      }),
+    };
+  }
+  handleTabbingOn() {
+    this.dpWrapper && this.dpWrapper.classList.add("user-is-tabbing");
+  }
+  handleTabbingOff() {
+    this.dpWrapper && this.dpWrapper.classList.remove("user-is-tabbing");
+  }
+  handleError() {
+    if (this.errorMessage) {
+      this.generateError();
+    }
+    else {
+      this.clearError();
+      this.processInput();
+    }
+  }
+  handleValue() {
+    this.inputEl.value = this.reformatDate(this.dateFormat, this.value);
+    if (this.isValidDate(this.value)) {
+      this.lastValidValue = this.value;
+    }
+    this.processInput();
+  }
+  handleBlur(ev) {
+    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
+    const shouldPreventValidation = this.preventValidation && functions.isRelatedTarget(ev, this.preventValidation);
+    if (!shouldPreventValidation) {
+      this.processInput();
+    }
+    this.dpWrapper.classList.remove("focus");
+  }
+  generateBlur() {
+    this.el.tabIndex = 0;
+    this.el.focus();
+    this.el.blur();
+  }
+  generateBlurAndFocusButton() {
+    this.generateBlur();
+  }
+  getActiveElement() {
+    return functions.checkForFocusableElInShadow(document.activeElement);
+  }
+  /* End blur stuff. Back to our normal programming :) */
+  handleCellTriggered(ev) {
+    let dateElement = ev.detail;
+    let isoDate = dateElement.getAttribute("data-year") +
+      "-" +
+      dateElement.getAttribute("data-month") +
+      "-" +
+      dateElement.textContent;
+    this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);
+    this.processInput();
+    // Create event to trigger onInput function on host element, to get the updated value
+    // Because  there are more ways to input than just typing, we are firing this event upon cellTriggered
+    let event = document.createEvent("Event");
+    event.initEvent("input", true, true);
+    this.el.dispatchEvent(event);
+  }
+  focusHandler() {
+    this.dpWrapper.classList.add("focus");
+  }
+  processInput() {
+    let isoDate = this.inputEl.value;
+    //If input is 8 digits, add slashes as a courtesy and process anyway
+    if (this.eightDigitsEntry.test(this.inputEl.value)) {
+      this.inputEl.value = this.addSlashes(this.inputEl.value);
+    }
+    // if we don't have 2 separators we can't reformat so we'll return what was passed in
+    if (this.parsableEntry.test(this.inputEl.value)) {
+      //ISO format for submission
+      isoDate = this.reformatDate("ISO", this.inputEl.value);
+      //User-specific format for display
+      this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);
+      if (this.isValidDate(isoDate)) {
+        //If there's no errorMessage on state, all errors can be cleared. If there IS an error message, it will clear any internal validation errors by overriding them.
+        if (this.errorMessage) {
+          this.generateError();
+        }
+        else {
+          this.clearError();
+        }
+        //Update prop passed into calendar to valid date
+        this.lastValidValue = isoDate;
+        //Prevents error from appearing if input field is empty
+      }
+      else if (this.inputEl.value.length) {
+        this.generateError();
+      }
+    }
+    else if (this.inputEl.value.length || this.requiredField || this.errorMessage) {
+      this.generateError();
+    }
+    else if (!this.inputEl.value.length && !this.requiredField) {
+      this.clearError();
+    }
+    // value is set to the reformated date or whatever the user passed
+    this.value = isoDate;
+  }
+  // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.
+  reformatDate(toFormat, date) {
+    if (!date) {
+      return "";
+    }
+    else if (!this.parsableEntry.test(date)) {
+      return date;
+    }
+    else {
+      let dateArr = date.replace(/[\-\.]/gi, "/").split("/");
+      switch (toFormat) {
+        case "US":
+        case this.dateFormats["US"]:
+          return dateArr[1].padStart(2, "0") + "/" + dateArr[2].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
+        case "INT":
+        case this.dateFormats["INT"]:
+          return dateArr[2].padStart(2, "0") + "/" + dateArr[1].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
+        case "ISO":
+        case this.dateFormats["ISO"]:
+          if (this.dateFormat === "US" || this.dateFormat === this.dateFormats["US"]) {
+            return dateArr[2].padStart(4, "20") + "-" + dateArr[0].padStart(2, "0") + "-" + dateArr[1].padStart(2, "0");
+          }
+          else if (this.dateFormat === "INT" || this.dateFormat === this.dateFormats["INT"]) {
+            return dateArr[2].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[0].padStart(2, "0");
+          }
+          else if (this.dateFormat === "ISO" || this.dateFormat === this.dateFormats["ISO"]) {
+            return dateArr[0].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[2].padStart(2, "0");
+          }
+        default:
+          return dateArr.join("/");
+      }
+    }
+  }
+  isValidDate(input) {
+    // if it's not ISO it's not valid
+    if (!input || !this.isoEntry.test(input)) {
+      return false;
+    }
+    else {
+      // Parse the ISO date parts to integers
+      let parts = input.split("-");
+      let day = parseInt(parts[2], 10);
+      let month = parseInt(parts[1], 10);
+      let year = parseInt(parts[0], 10);
+      // Check the ranges of month and year
+      if (year < 1000 || year > 3000 || month == 0 || month > 12)
+        return false;
+      let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+      // Adjust for leap years
+      if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
+        monthLength[1] = 29;
+      // Check the range of the day
+      return day > 0 && day <= monthLength[month - 1];
+    }
+  }
+  generateError() {
+    const requiredDateErr = functions.intl.formatMessage({
+      id: "date.requiredDateError",
+      defaultMessage: "A date is required.",
+    });
+    const validDateErr = functions.intl.formatMessage({
+      id: "date.invalidDate",
+      defaultMessage: "Please enter a valid date in the format {dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} iso {yyyy/mm/dd}}.",
+    }, { dateFormat: this.dateFormat.toLowerCase() });
+    if (this.errorMessage) {
+      this.displayError = this.errorMessage;
+    }
+    else if (this.inputEl.value.length) {
+      this.displayError = validDateErr;
+    }
+    else if (!this.inputEl.value.length && this.requiredField) {
+      this.displayError = requiredDateErr;
+    }
+  }
+  clearError() {
+    this.displayError = "";
+  }
+  addSlashes(input) {
+    if (this.dateFormat === "ISO" || this.dateFormat === this.dateFormats["ISO"]) {
+      return input.substring(0, 4) + "/" + input.substring(4, 6) + "/" + input.substring(6);
+    }
+    else {
+      return input.substring(0, 2) + "/" + input.substring(2, 4) + "/" + input.substring(4);
+    }
+  }
+  componentWillLoad() {
+    if (this.label === "") {
+      throw new Error("You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.");
+    }
+    if (this.errorMessage) {
+      this.generateError();
+    }
+    this.uid = this.el.id ? this.el.id : functions.generateId();
+  }
+  componentDidLoad() {
+    // convert passed-in starting date from ISO to locale format, update displayed input to proper format
+    this.inputEl.value = this.reformatDate(this.dateFormat, this.value);
+    if (this.value && this.isValidDate(this.value)) {
+      // update value passed into calendar so that it opens on the specified date
+      this.lastValidValue = this.value;
+    }
+    this.processInput();
+  }
+  render() {
+    const dateFormat = functions.intl.formatMessage({
+      id: "date.format",
+      defaultMessage: "{dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} iso {yyyy/mm/dd}}",
+    }, { dateFormat: this.dateFormat.toLowerCase() });
+    return (index.h(index.Host, { id: this.uid, onBlur: () => {
+        this.el.removeAttribute("tabindex");
+      }, "aria-busy": "false", class: `${this.displayError ? "invalid" : ""}`, invalid: this.displayError ? "true" : null }, index.h("div", { ref: (d) => (this.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.displayError ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { id: `datepickerLabel-${this.uid}`, htmlFor: `date-input-${this.uid}`, class: "label", title: `${this.label} (${dateFormat})` }, this.label, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*"))))), index.h("div", null, index.h("div", { class: "inner-wrapper" }, index.h("input", { disabled: this.disabled, type: "text", id: `date-input-${this.uid}`, class: "date-input", name: "date", placeholder: dateFormat, onFocus: this.focusHandler.bind(this), onBlur: (ev) => this.handleBlur(ev), ref: (input) => (this.inputEl = input), "aria-describedby": `error-${this.uid}`, "aria-controls": `popup-${this.uid}`, "aria-label": this.label, required: this.requiredField }), index.h("priv-datepicker", { disabled: this.disabled, date: this.lastValidValue ? new Date(this.lastValidValue) : new Date(), parentId: this.uid })), index.h("div", { id: `error-${this.uid}`, class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.displayError)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["handleError"],
+    "value": ["handleValue"]
+  }; }
+};
+DatePicker.style = wmDatepickerCss;
+
+exports.wm_datepicker = DatePicker;

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

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmInputCss = "@charset \"UTF-8\";:host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{box-sizing:border-box}:host .wrapper,wm-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-input .wrapper.label-left{flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-input .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-input .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-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-input .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-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-input .wrapper .inner-wrapper{width:100%}:host .wrapper .inputfield-wrapper,wm-input .wrapper .inputfield-wrapper{height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:flex;align-items:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;align-self:stretch}:host .wrapper input,wm-input .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:disabled,wm-input .wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper input:focus,wm-input .wrapper input:focus{outline:none}:host .wrapper .info,wm-input .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper,wm-input .wrapper.invalid .inputfield-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-message,wm-input .wrapper.invalid .error-message{color:#c0392b;margin:4px 0;display:block;font-style:italic;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper,wm-input .wrapper:focus .inputfield-wrapper,wm-input .wrapper.focus .inputfield-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}:host .sr-only,wm-input .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 Input = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.labelPosition = "top";
+    this.value = "";
+    this.disabled = false;
+    this.placeholder = "";
+    this.requiredField = false;
+    this.charCount = 0;
+    this.announcement = "";
+    this.uid = "";
+    this.requiredErrorMessage = functions.intl.formatMessage({
+      id: "global.requiredError",
+      defaultMessage: "This field is required.",
+    });
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : functions.generateId();
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
+    if (!this.label) {
+      console.error("wm-input requires the label property");
+    }
+  }
+  componentDidLoad() {
+    if (this.value) {
+      this.inputEl.value = this.value;
+    }
+  }
+  handleKeyDown(ev) {
+    // in most browsers, onInput doesn't fire if the input's maxLength is reached
+    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
+    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
+    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
+    const hasReachedCharacterLimit = isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;
+    if (hasReachedCharacterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleBlur(ev) {
+    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
+    const shouldPreventValidation = this.preventValidation && functions.isRelatedTarget(ev, this.preventValidation);
+    if (this.requiredField && !shouldPreventValidation) {
+      this.errorMessage = this.updateRequiredError(this.errorMessage, this.requiredErrorMessage, this.value);
+    }
+    this.inputWrapperEl.classList.remove("focus");
+  }
+  handleInput(ev) {
+    this.value = ev.target.value;
+    this.charCount = this.value.length;
+    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleFocus() {
+    this.inputWrapperEl.classList.add("focus");
+  }
+  updateRequiredError(errorMessage, requiredErrorMessage, value) {
+    const errorPresent = !!errorMessage && errorMessage !== "";
+    let newErrorMessage = errorMessage || "";
+    // no error and empty value generates required error message
+    if (!errorPresent && value === "") {
+      newErrorMessage = requiredErrorMessage;
+    }
+    // if there is an error and a value, clear error message
+    // unless it's a custom error set by the dev
+    else if (errorPresent && value !== "") {
+      if (errorMessage === requiredErrorMessage) {
+        newErrorMessage = "";
+      }
+    }
+    return newErrorMessage;
+  }
+  announce(message) {
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  generateCharacterLimitWarning(charCount, charLimit) {
+    const charactersEnteredMessage = functions.intl.formatMessage({
+      id: "input.charactersEntered",
+      defaultMessage: "{x, number} of {y, number} characters entered.",
+    }, { x: charCount, y: charLimit });
+    const characterLimitReachedMessage = functions.intl.formatMessage({
+      id: "input.characterLimitReached",
+      defaultMessage: "No additional characters will be entered.",
+    });
+    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
+  }
+  render() {
+    return (index.h(index.Host, { id: this.uid }, index.h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" }, this.label, this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*"))))), index.h("div", { class: "inner-wrapper" }, index.h("div", { class: "inputfield-wrapper" }, index.h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-label": this.label, "aria-describedby": `info-${this.uid} error-${this.uid}`, onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: this.handleFocus.bind(this), placeholder: this.placeholder, autocomplete: "off", required: this.requiredField, maxLength: this.characterLimit || undefined }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { id: `info-${this.uid}`, class: "info" }, this.info)), index.h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.errorMessage), index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+  }
+  get el() { return index.getElement(this); }
+};
+Input.style = wmInputCss;
+
+exports.wm_input = Input;

package/dist/cjs/wm-modal-footer.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmModalFooterCss = "wm-modal-footer{-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;-ms-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px;margin-top:-1px}wm-modal-footer .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper.footer-text{flex-direction:column;align-items:flex-start}}wm-modal-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-footer .wm-wrapper .wm-info:focus{outline:none}";
+
+const ModalFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.secondaryText = "";
+    this.primaryText = "";
+    this.infoText = "";
+    this.primaryActionDisabled = false;
+    this.deleteStyle = false;
+  }
+  //Trap focus when user tabs past first element in modal
+  focusLastEl() {
+    functions.checkForFocusableElInShadow(this.lastElement).focus();
+  }
+  componentWillLoad() {
+    this.uid = this.el.parentElement.uid;
+  }
+  emitParentPrimaryEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitPrimaryEvent();
+  }
+  emitParentSecondaryEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitSecondaryEvent();
+  }
+  render() {
+    return (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), index.h("wm-button", { buttonStyle: this.deleteStyle ? "secondary" : "primary", permanentlyDelete: this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+  }
+  get el() { return index.getElement(this); }
+};
+ModalFooter.style = wmModalFooterCss;
+
+exports.wm_modal_footer = ModalFooter;

package/dist/cjs/wm-modal-header.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmModalHeaderCss = "wm-modal-header{-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:#4a4a4a;line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";
+
+const ModalHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = "";
+    this.subheading = "";
+    this.closeTooltip = functions.intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+  }
+  //Trap focus when user tabs past last element in modal
+  focusFirstEl() {
+    functions.checkForFocusableElInShadow(this.firstElement).focus();
+  }
+  componentWillLoad() {
+    this.uid = this.el.parentElement.uid;
+  }
+  emitParentCloseEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitCloseEvent();
+  }
+  // @Listen("click")
+  // directFocusOnClick() {
+  //   this.headingElement.tabIndex = 0;
+  //   this.headingElement.focus();
+  // }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-style": "navigational", icon: "f156", tooltip: this.closeTooltip, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.firstElement = el), onClick: () => this.emitParentCloseEvent() }))));
+  }
+  get el() { return index.getElement(this); }
+};
+ModalHeader.style = wmModalHeaderCss;
+
+exports.wm_modal_header = ModalHeader;

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

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmModalCss = "wm-modal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal *{box-sizing:border-box}wm-modal>*{width:80vw;max-width:750px;background:#fff}wm-modal>*:focus{outline:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem}wm-modal wm-modal-header{z-index:2003}wm-modal wm-modal-footer{z-index:2003}wm-modal>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal.wm-modal wm-modal-header{border-bottom:1px solid #f4f3f6}wm-modal.wm-modal wm-modal-footer{border-top:1px solid #f4f3f6}@media only screen and (max-width: 768px){wm-modal.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal.wm-modal>*{max-width:none;width:100vw}wm-modal.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal.wm-dialog>:not(wm-modal-header):not(wm-modal-footer){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal.hide{visibility:hidden}wm-modal .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;top:0;left:0}";
+
+const Modal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.focusLastElement = index.createEvent(this, "focusLastElement", 7);
+    this.focusFirstElement = index.createEvent(this, "focusFirstElement", 7);
+    this.wmCloseTriggered = index.createEvent(this, "wmCloseTriggered", 7);
+    this.wmPrimaryTriggered = index.createEvent(this, "wmPrimaryTriggered", 7);
+    this.wmSecondaryTriggered = index.createEvent(this, "wmSecondaryTriggered", 7);
+    this.isOpen = false;
+    this.elementToFocus = "";
+    this.isTypeDialog = false;
+    this.bodyFocusListener = () => this.redirectFocusOnBody();
+  }
+  //App can open modal by toggling the prop
+  toggleModal() {
+    this.isOpen ? this.showModal() : this.hideModal();
+  }
+  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
+  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
+  // @Listen("wmShowModal", { target: "window" })
+  // doesEventMatchId(ev: CustomEvent) {
+  //   ev.detail === this.uid && this.showModal();
+  // }
+  showModal() {
+    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
+    document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
+    document.body.tabIndex = 0;
+    document.body.removeEventListener("focus", this.bodyFocusListener, true);
+    document.body.addEventListener("focus", this.bodyFocusListener, true);
+    window.requestAnimationFrame(() => {
+      this.setElToFocusOnOpen();
+      window.requestAnimationFrame(() => this.focusOnOpen.focus()); //Bring focus to element inside modal
+    });
+  }
+  handleClick(ev) {
+    this.isOpen && ev.target === this.overlayEl && this.focusOnOpen.focus();
+  }
+  closeModalOnEscape(ev) {
+    if (ev.key === "Escape") {
+      this.wmCloseTriggered.emit();
+      this.isOpen = false;
+    }
+  }
+  //Close the modal and focus the triggering element when the modal buttons emit their events
+  hideModal() {
+    document.body.style.overflow = "visible";
+    document.body.tabIndex = -1;
+    document.body.removeEventListener("focus", this.bodyFocusListener, true);
+    window.requestAnimationFrame(() => this.focusOnClose.focus()); //Return focus
+  }
+  componentWillLoad() {
+    if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+      if (!this.el.id) {
+        throw new Error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
+      }
+    }
+    this.uid = this.el.id ? this.el.id : functions.generateId();
+  }
+  componentDidLoad() {
+    if (this.isOpen) {
+      this.showModal();
+    }
+  }
+  async emitCloseEvent() {
+    this.wmCloseTriggered.emit();
+  }
+  async emitPrimaryEvent() {
+    this.wmPrimaryTriggered.emit();
+  }
+  async emitSecondaryEvent() {
+    this.wmSecondaryTriggered.emit();
+  }
+  //If the dev hasn't specified an element to focus, element to focus first will be the close (X) button
+  setElToFocusOnOpen() {
+    const closeBtn = functions.getFirstFocusableDescendant(this.el.querySelector(`#wm-modal-close-${this.uid}`));
+    if (this.elementToFocus) {
+      if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+        this.setAriaDescribedbyOnModal();
+        this.elementToFocus = `wm-${this.elementToFocus}-${this.uid}`;
+      }
+      const elToFocus = this.el.querySelector(`#${this.elementToFocus}`);
+      if (elToFocus) {
+        const firstEl = functions.getFirstFocusableDescendant(elToFocus);
+        if (firstEl) {
+          this.focusOnOpen = firstEl;
+        }
+        else {
+          console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+          this.focusOnOpen = closeBtn;
+        }
+      }
+      else {
+        console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+        this.focusOnOpen = closeBtn;
+      }
+    }
+    else {
+      this.focusOnOpen = closeBtn;
+    }
+  }
+  setAriaDescribedbyOnModal() {
+    const modalBody = document.getElementById(`content-${this.uid}`);
+    if (!modalBody) {
+      console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
+    }
+    else {
+      this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+    }
+  }
+  setElToFocusOnClose() {
+    const elToFocus = document.activeElement;
+    if (elToFocus.tagName === "WM-MENUITEM") {
+      this.focusOnClose = elToFocus.parentElement;
+    }
+    else {
+      this.focusOnClose = functions.checkForActiveElInShadow(elToFocus);
+    }
+  }
+  redirectFocusOnBody() {
+    if (document.activeElement.tagName === "BODY") {
+      this.setElToFocusOnOpen();
+      this.focusOnOpen.focus();
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: (this.isOpen ? "" : "hide ") + (this.isTypeDialog ? "wm-dialog" : "wm-modal"), role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.isOpen ? 0 : null, onFocus: () => {
+        this.focusLastElement.emit();
+      } }, index.h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), index.h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
+        this.focusFirstElement.emit();
+      } })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["toggleModal"]
+  }; }
+};
+Modal.style = wmModalCss;
+
+exports.wm_modal = Modal;