npm - @watermarkinsights/ripple - Versions diffs - 3.25.0-2 → 3.25.0 - Mend

@watermarkinsights/ripple 3.25.0-2 → 3.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (605) hide show

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

@@ -1,492 +1,492 @@
-import { h, Host } from "@stencil/core";
-import { generateId, checkForFocusableElInShadow, intl, isRelatedTarget } from "../../global/functions";
-export class DatePicker {
-  constructor() {
-    // 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",
-      }),
-    };
-    this.value = "";
-    this.disabled = false;
-    this.dateFormat = "US";
-    this.errorMessage = "";
-    this.labelPosition = "top";
-    this.label = "";
-    this.requiredField = false;
-    this.requiredFieldMessage = undefined;
-    this.preventValidation = undefined;
-    this.displayError = "";
-  }
-  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");
-  }
-  handlePopupBlurred(ev) {
-    // emit blur event when leaving component from priv-datepicker
-    if (ev.detail.relatedTarget !== this.el) {
-      const event = new CustomEvent("blur");
-      // @ts-ignore
-      event.relatedTarget = ev.detail.relatedTarget;
-      this.el.dispatchEvent(event);
-    }
-  }
-  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();
-    }
-    // value is set to the reformated date or whatever the user passed
-    this.value = isoDate;
-    if (isoDate !== this.lastCommittedValue) {
-      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 = this.requiredFieldMessage ||
-      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} other {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 === "") {
-      console.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} other {yyyy/mm/dd}}",
-    }, { dateFormat: this.dateFormat.toLowerCase() });
-    return (h(Host, { id: this.uid, "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, "aria-required": this.requiredField ? "true" : null }), 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 delegatesFocus() { return true; }
-  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"
-      },
-      "requiredFieldMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required-field-message",
-        "reflect": 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": "popupBlurred",
-        "method": "handlePopupBlurred",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "cellTriggered",
-        "method": "handleCellTriggered",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=wm-datepicker.js.map
+import { h, Host } from "@stencil/core";
+import { generateId, checkForFocusableElInShadow, intl, isRelatedTarget } from "../../global/functions";
+export class DatePicker {
+  constructor() {
+    // 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",
+      }),
+    };
+    this.value = "";
+    this.disabled = false;
+    this.dateFormat = "US";
+    this.errorMessage = "";
+    this.labelPosition = "top";
+    this.label = "";
+    this.requiredField = false;
+    this.requiredFieldMessage = undefined;
+    this.preventValidation = undefined;
+    this.displayError = "";
+  }
+  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");
+  }
+  handlePopupBlurred(ev) {
+    // emit blur event when leaving component from priv-datepicker
+    if (ev.detail.relatedTarget !== this.el) {
+      const event = new CustomEvent("blur");
+      // @ts-ignore
+      event.relatedTarget = ev.detail.relatedTarget;
+      this.el.dispatchEvent(event);
+    }
+  }
+  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();
+    }
+    // value is set to the reformated date or whatever the user passed
+    this.value = isoDate;
+    if (isoDate !== this.lastCommittedValue) {
+      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 = this.requiredFieldMessage ||
+      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} other {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 === "") {
+      console.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} other {yyyy/mm/dd}}",
+    }, { dateFormat: this.dateFormat.toLowerCase() });
+    return (h(Host, { id: this.uid, "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, "aria-required": this.requiredField ? "true" : null }), 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 delegatesFocus() { return true; }
+  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"
+      },
+      "requiredFieldMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required-field-message",
+        "reflect": 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": "popupBlurred",
+        "method": "handlePopupBlurred",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "cellTriggered",
+        "method": "handleCellTriggered",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=wm-datepicker.js.map