@watermarkinsights/ripple 3.3.2-0 → 3.4.0-2

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

@@ -1,462 +1,462 @@
-import { h, Component, Host, Element, Event, Prop, Listen, Watch, State } from "@stencil/core";
-import { generateId, checkForFocusableElInShadow, intl, isRelatedTarget } from "../../global/functions";
-export class DatePicker {
-  constructor() {
-    this.value = "";
-    this.disabled = false;
-    this.dateFormat = "US";
-    this.errorMessage = "";
-    this.labelPosition = "top";
-    this.label = "";
-    this.requiredField = false;
-    this.displayError = "";
-    // we only want to fire the "change" event if the value has actually changed (that's
-    // how native elements do it), so we need to keep in state the last committed value.
-    this.lastCommittedValue = this.value;
-    // 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: intl.formatMessage({
-        id: "date.formatUS",
-        defaultMessage: "mm/dd/yyyy",
-      }),
-      INT: intl.formatMessage({
-        id: "date.formatINT",
-        defaultMessage: "dd/mm/yyyy",
-      }),
-      ISO: 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();
-    }
-  }
-  handleInput(ev) {
-    // keep component's value in sync with input's value
-    // validation only happens on blur and initial load,
-    // but component's value should reflect user input at any time
-    this.value = ev.target.value; // same as this.inputEl.value
-  }
-  // this is input blur, not component blur
-  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.dpWrapper.classList.remove("focus");
-  }
-  // this is input focus, not component focus
-  focusHandler() {
-    this.dpWrapper.classList.add("focus");
-  }
-  handlePopupClosed() {
-    this.el.tabIndex = 0;
-    this.el.focus();
-  }
-  getActiveElement() {
-    return checkForFocusableElInShadow(document.activeElement);
-  }
-  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
-    const event = new CustomEvent("input");
-    this.el.dispatchEvent(event);
-  }
-  processInput(isFirstLoad) {
-    // The required field error should not display on first load
-    const leftEmpty = !isFirstLoad && this.requiredField;
-    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();
-        }
-        //Prevents error from appearing if input field is empty
-      }
-      else if (this.inputEl.value.length) {
-        this.generateError();
-      }
-    }
-    else if (this.inputEl.value.length || leftEmpty || this.errorMessage) {
-      this.generateError();
-    }
-    else if (!this.inputEl.value.length && !leftEmpty) {
-      this.clearError();
-    }
-    if (isoDate !== this.lastCommittedValue) {
-      // value is set to the reformated date or whatever the user passed
-      this.value = isoDate;
-      const event = new CustomEvent("change");
-      this.el.dispatchEvent(event);
-      this.lastCommittedValue = this.value;
-    }
-    // event must fire after we set this.value
-    // only fire if new valid value is different from the previous one
-    if (this.isValidDate(isoDate) && isoDate !== this.lastValidValue) {
-      this.wmDatepickerNewValidValue.emit();
-      //Update prop passed into calendar to valid date
-      this.lastValidValue = 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 = intl.formatMessage({
-      id: "date.requiredDateError",
-      defaultMessage: "A date is required.",
-    });
-    const validDateErr = 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 : generateId();
-    if (this.value && this.isValidDate(this.value)) {
-      // update value passed into calendar so that it opens on the specified date
-      this.lastValidValue = this.value;
-    }
-  }
-  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);
-    this.processInput(true);
-  }
-  render() {
-    const dateFormat = 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 (h(Host, { id: this.uid, onBlur: () => {
-        this.el.removeAttribute("tabindex");
-      }, "aria-busy": "false", class: `${this.displayError ? "invalid" : ""}`, invalid: this.displayError ? "true" : null },
-      h("div", { ref: (d) => (this.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.displayError ? "invalid" : ""}` },
-        h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: `datepickerLabel-${this.uid}`, htmlFor: `date-input-${this.uid}`, class: "label", title: `${this.label} (${dateFormat})` },
-          this.label,
-          this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))),
-        h("div", null,
-          h("div", { class: "inner-wrapper" },
-            h("input", { disabled: this.disabled, type: "text", id: `date-input-${this.uid}`, class: "date-input", name: "date", placeholder: dateFormat, onFocus: this.focusHandler.bind(this), onInput: (ev) => this.handleInput(ev), 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 }),
-            h("priv-datepicker", { disabled: this.disabled, date: this.lastValidValue ? new Date(this.lastValidValue) : new Date(), parentId: this.uid })),
-          h("div", { id: `error-${this.uid}`, class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.displayError)))));
-  }
-  static get is() { return "wm-datepicker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-datepicker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-datepicker.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "dateFormat": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "date-format",
-      "reflect": false,
-      "defaultValue": "\"US\""
-    },
-    "errorMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "error-message",
-      "reflect": true,
-      "defaultValue": "\"\""
-    },
-    "labelPosition": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "\"top\" | \"left\" | \"none\"",
-        "resolved": "\"left\" | \"none\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-position",
-      "reflect": false,
-      "defaultValue": "\"top\""
-    },
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "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 {
-    "displayError": {}
-  }; }
-  static get events() { return [{
-      "method": "wmDatepickerNewValidValue",
-      "name": "wmDatepickerNewValidValue",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "errorMessage",
-      "methodName": "handleError"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleTabbingOn",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleTabbingOff",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "popupClosed",
-      "method": "handlePopupClosed",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "cellTriggered",
-      "method": "handleCellTriggered",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { h, Component, Host, Element, Event, Prop, Listen, Watch, State } from "@stencil/core";
+import { generateId, checkForFocusableElInShadow, intl, isRelatedTarget } from "../../global/functions";
+export class DatePicker {
+  constructor() {
+    this.value = "";
+    this.disabled = false;
+    this.dateFormat = "US";
+    this.errorMessage = "";
+    this.labelPosition = "top";
+    this.label = "";
+    this.requiredField = false;
+    this.displayError = "";
+    // we only want to fire the "change" event if the value has actually changed (that's
+    // how native elements do it), so we need to keep in state the last committed value.
+    this.lastCommittedValue = this.value;
+    // 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: intl.formatMessage({
+        id: "date.formatUS",
+        defaultMessage: "mm/dd/yyyy",
+      }),
+      INT: intl.formatMessage({
+        id: "date.formatINT",
+        defaultMessage: "dd/mm/yyyy",
+      }),
+      ISO: 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();
+    }
+  }
+  handleInput(ev) {
+    // keep component's value in sync with input's value
+    // validation only happens on blur and initial load,
+    // but component's value should reflect user input at any time
+    this.value = ev.target.value; // same as this.inputEl.value
+  }
+  // this is input blur, not component blur
+  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.dpWrapper.classList.remove("focus");
+  }
+  // this is input focus, not component focus
+  focusHandler() {
+    this.dpWrapper.classList.add("focus");
+  }
+  handlePopupClosed() {
+    this.el.tabIndex = 0;
+    this.el.focus();
+  }
+  getActiveElement() {
+    return checkForFocusableElInShadow(document.activeElement);
+  }
+  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
+    const event = new CustomEvent("input");
+    this.el.dispatchEvent(event);
+  }
+  processInput(isFirstLoad) {
+    // The required field error should not display on first load
+    const leftEmpty = !isFirstLoad && this.requiredField;
+    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();
+        }
+        //Prevents error from appearing if input field is empty
+      }
+      else if (this.inputEl.value.length) {
+        this.generateError();
+      }
+    }
+    else if (this.inputEl.value.length || leftEmpty || this.errorMessage) {
+      this.generateError();
+    }
+    else if (!this.inputEl.value.length && !leftEmpty) {
+      this.clearError();
+    }
+    if (isoDate !== this.lastCommittedValue) {
+      // value is set to the reformated date or whatever the user passed
+      this.value = isoDate;
+      const event = new CustomEvent("change");
+      this.el.dispatchEvent(event);
+      this.lastCommittedValue = this.value;
+    }
+    // event must fire after we set this.value
+    // only fire if new valid value is different from the previous one
+    if (this.isValidDate(isoDate) && isoDate !== this.lastValidValue) {
+      this.wmDatepickerNewValidValue.emit();
+      //Update prop passed into calendar to valid date
+      this.lastValidValue = 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 = intl.formatMessage({
+      id: "date.requiredDateError",
+      defaultMessage: "A date is required.",
+    });
+    const validDateErr = 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 : 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(true);
+  }
+  render() {
+    const dateFormat = 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 (h(Host, { id: this.uid, onBlur: () => {
+        this.el.removeAttribute("tabindex");
+      }, "aria-busy": "false", class: `${this.displayError ? "invalid" : ""}`, invalid: this.displayError ? "true" : null },
+      h("div", { ref: (d) => (this.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.displayError ? "invalid" : ""}` },
+        h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: `datepickerLabel-${this.uid}`, htmlFor: `date-input-${this.uid}`, class: "label", title: `${this.label} (${dateFormat})` },
+          this.label,
+          this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))),
+        h("div", null,
+          h("div", { class: "inner-wrapper" },
+            h("input", { disabled: this.disabled, type: "text", id: `date-input-${this.uid}`, class: "date-input", name: "date", placeholder: dateFormat, onFocus: this.focusHandler.bind(this), onInput: (ev) => this.handleInput(ev), 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 }),
+            h("priv-datepicker", { disabled: this.disabled, date: this.lastValidValue ? new Date(this.lastValidValue) : new Date(), parentId: this.uid })),
+          h("div", { id: `error-${this.uid}`, class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.displayError)))));
+  }
+  static get is() { return "wm-datepicker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-datepicker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-datepicker.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "dateFormat": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "date-format",
+      "reflect": false,
+      "defaultValue": "\"US\""
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "labelPosition": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "\"top\" | \"left\" | \"none\"",
+        "resolved": "\"left\" | \"none\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-position",
+      "reflect": false,
+      "defaultValue": "\"top\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "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 {
+    "displayError": {}
+  }; }
+  static get events() { return [{
+      "method": "wmDatepickerNewValidValue",
+      "name": "wmDatepickerNewValidValue",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "errorMessage",
+      "methodName": "handleError"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "handleTabbingOn",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "handleTabbingOff",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "popupClosed",
+      "method": "handlePopupClosed",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "cellTriggered",
+      "method": "handleCellTriggered",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}