@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/esm/wm-chart.entry.js.map

@@ -1 +1 @@
-{"file":"wm-chart.entry.js","mappings":"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","names":[],"sources":["./src/components/charts/wm-chart/wm-chart.scss?tag=wm-chart&encapsulation=shadow","./src/components/charts/wm-chart/wm-chart.tsx"],"sourcesContent":[":host,\r\nwm-chart {\r\n  @extend %chart-styles;\r\n}\r\n\r\n:host(:focus) {\r\n  @extend %chart-focus-styles;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen } from \"@stencil/core\";\r\nimport { forceUpdate } from \"@stencil/core\";\r\nimport { debounce, generateId, intl } from \"../../../global/functions\";\r\nimport {\r\n  amountToPercent,\r\n  exitChart,\r\n  getDetails,\r\n  handleChartKeydown,\r\n  renderStackedBar,\r\n  renderSimpleBar,\r\n  renderCompletionMessage,\r\n  renderDoughnut,\r\n  renderHiddenValuesMessage,\r\n  renderInstructionsText,\r\n  renderLegend,\r\n  allChartsDetails,\r\n} from \"../chartFunctions\";\r\nimport { ChartType, SliceDetails, SliceElement } from \"../../../global/interfaces\";\r\n\r\n@Component({\r\n  tag: \"wm-chart\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-chart.scss\",\r\n})\r\nexport class Chart {\r\n  @Element() el!: HTMLWmChartElement;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\r\n  private componentWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() chartType: ChartType | \"hybrid\" = \"doughnut1\"; // hybrid is not a real ChartType, it gets converted to something else.\r\n  @Prop() label?: string;\r\n  @Prop() labelWidth: string = \"150px\";\r\n  @Prop() subinfo?: string;\r\n  @Prop() completionMessage?: string;\r\n  @Prop() valueFormat?: \"percentage\" | \"amount\";\r\n  @Prop() showValues?: \"percentage\" | \"amount\"; // DEPRECATED in favor of value-format\r\n  @Prop() showGrid?: boolean = true; \r\n  get tempValueFormat() {\r\n    // use of this getter should be replaced with dateFormat when showValues is fully phased out\r\n    return this.valueFormat || this.showValues || \"none\";\r\n  }\r\n  @Prop() showLegend: boolean = true;\r\n  @Prop() showBarLegend: boolean = false;\r\n  @Prop() notStartedColor: boolean = false;\r\n  // left labels are a temporary solution for the lack of a stacked bar chart and is undocumented\r\n  // it only works with bar4 and should be used without a legend\r\n  @Prop() labelPosition: \"left\" | \"top\" = \"top\";\r\n  @State() isTabbing: boolean = false;\r\n  @State() userIsNavigating: boolean = false;\r\n  @State() hasHiddenBarValue: boolean = false;\r\n\r\n  get hybridType(): \"doughnut0\" | \"bar1\" {\r\n    return window.innerWidth > 1340 ? \"doughnut0\" : \"bar1\";\r\n  }\r\n  private uid: string = generateId();\r\n  private total!: number;\r\n  private slicesDetails: SliceDetails[] = [];\r\n\r\n  get popoverEl() {\r\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\r\n  }\r\n\r\n  get sliceEls(): SliceElement[] {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\"));\r\n  }\r\n\r\n  get currentChartType(): ChartType {\r\n    let current = this.chartType as ChartType;\r\n\r\n    if (this.chartType === \"hybrid\") {\r\n      current = this.hybridType;\r\n    } else if (this.chartType === \"doughnut2\" && this.el.children.length > 3) {\r\n      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices\r\n      current = \"doughnut2plus\";\r\n    }\r\n    return current; \r\n  }\r\n\r\n  get chartDetails() {\r\n    return allChartsDetails[this.currentChartType];\r\n  }\r\n\r\n  get ariaLabelText() {\r\n    let text = `${this.label}`;\r\n    if (this.subinfo) {\r\n      text += ` ${this.subinfo}`;\r\n    }\r\n    return text;\r\n  }\r\n\r\n  get isDoughnut() {\r\n    return this.chartDetails.category === \"doughnut\";\r\n  }\r\n\r\n  get isStackedBar() {\r\n    return this.chartDetails.category === \"stackedBar\";\r\n  }\r\n\r\n  get isSimpleBar() {\r\n    return this.chartDetails.category === \"simpleBar\";\r\n  }\r\n\r\n  get isBar() {\r\n    return this.isStackedBar || this.isSimpleBar;\r\n  }\r\n\r\n  get chartRoleDescription(): string {\r\n    return intl.formatMessage({\r\n      id: \"chart.roleDescription\",\r\n      defaultMessage: \"Interactive chart\",\r\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\r\n    });\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    handleChartKeydown.call(this, ev);\r\n  }\r\n\r\n  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */\r\n\r\n  async componentWillLoad() {\r\n    if (!this.label) {\r\n      throw new Error(\r\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\r\n      );\r\n    }\r\n    if (this.showValues) {\r\n      console.warn(\"wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.\");\r\n    }\r\n    await getDetails.call(this, this.currentChartType);\r\n\r\n    // rerender on resize\r\n    // unnecessary for doughnuts (except hybrid) as layout doesn't change\r\n    if (this.chartType === \"hybrid\" || !this.isDoughnut) {\r\n      const resizeObserver = new ResizeObserver(() => {\r\n        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();\r\n      });\r\n      resizeObserver.observe(this.el);\r\n    }\r\n  }\r\n\r\n  handleStackedBarResize = debounce(async () => {\r\n    let hasHiddenBarValue = false;\r\n\r\n    // if any value text overlaps with another, hide it and display warning\r\n    const valueEls = this.el.shadowRoot!.querySelectorAll(\".value\");\r\n\r\n    if (valueEls.length) {\r\n      let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;\r\n      let margin = 4;\r\n\r\n      valueEls.forEach((valueEl, idx) => {\r\n        // checks are to the left of each valueEl, so skip the first one\r\n        if (idx > 0) {\r\n          const bounds = valueEl.getBoundingClientRect();\r\n\r\n          if (bounds.left - margin < lastVisibleRightEdge) {\r\n            // left edge of current value is overlapping right edge of last visible value\r\n            valueEl.classList.add(\"hidden\");\r\n            hasHiddenBarValue = true;\r\n          } else {\r\n            valueEl.classList.remove(\"hidden\");\r\n            lastVisibleRightEdge = bounds.right;\r\n          }\r\n        }\r\n      });\r\n    }\r\n\r\n    this.hasHiddenBarValue = hasHiddenBarValue;\r\n  }, 100);\r\n\r\n  debouncedUpdate = debounce(async () => {\r\n    forceUpdate(this.el);\r\n  }, 10);\r\n\r\n  debouncedSliceUpdate = debounce(async () => {\r\n    await getDetails.call(this, this.currentChartType);\r\n    forceUpdate(this.el);\r\n  }, 100);\r\n\r\n  @Listen(\"wmChartSliceUpdated\")\r\n  handleSliceUpdate() {\r\n    this.debouncedSliceUpdate();\r\n  }\r\n\r\n  /* RENDERING */\r\n  renderBarText(s: SliceDetails, idx: number) {\r\n    let val;\r\n    if (this.tempValueFormat === \"percentage\") {\r\n      // if segment has an amount, but \"0\" percentage (it's below 0.5% and rounded down), still display it as <1%\r\n      val = s.perc === 0 && s.amount > 0 ? \"<1%\" : `${s.perc}%`;\r\n    } else if (this.tempValueFormat === \"amount\") {\r\n      val = s.amount;\r\n    }\r\n\r\n    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper\r\n    // in order to not disturb the positioning of the other value texts in the entire row\r\n    return (\r\n      <div\r\n        class=\"value-wrapper\"\r\n        style={{\r\n          width: `calc(${amountToPercent(s.amount, this.total, false)}%\r\n        ${idx !== this.slicesDetails.length - 1 ? \" - 2px\" : \"\"}`,\r\n        }}\r\n      >\r\n        <span class=\"value\">{s.amount > 0 && val}</span>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  drawAxis() {\r\n    if (this.currentChartType === \"bar3\") {\r\n      return (\r\n        <svg class=\"axis\">\r\n          <line x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\" />\r\n          <line x1=\"0\" x2=\"0\" y1=\"0\" y2=\"-85px\" />\r\n          <line class=\"tick\" x1=\"0.5\" x2=\"0.5\" y1=\"0\" y2=\"6\" />\r\n          <text x=\"0.5\" y=\"-6\">\r\n            0%\r\n          </text>\r\n          <line class=\"tick\" x1=\"100%\" x2=\"100%\" y1=\"0\" y2=\"6\" />\r\n          <text x=\"100%\" y=\"-6\">\r\n            100%\r\n          </text>\r\n        </svg>\r\n      );\r\n    }\r\n  }\r\n\r\n  renderChart() {\r\n    if (this.total > 0) {\r\n      if (this.isStackedBar) {\r\n        return renderStackedBar.call(this, this.currentChartType);\r\n      } else if (this.isSimpleBar) {\r\n        return renderSimpleBar.call(this, this.currentChartType);\r\n      } else if (this.isDoughnut) {\r\n        return renderDoughnut.call(this, this.currentChartType);\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onBlur={() => exitChart.call(this)}>\r\n        <div\r\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\r\n          class={`component-wrapper ${this.currentChartType} ${\r\n            this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"\r\n          } ${this.labelPosition === \"left\" && this.currentChartType === \"bar4\" ? \"left-label\" : \"\"}`}\r\n          role=\"application\"\r\n          aria-label={this.ariaLabelText}\r\n          tabindex={0}\r\n          aria-roledescription={this.chartRoleDescription}\r\n          aria-describedby=\"chart-instructions\"\r\n        >\r\n          <label class=\"label\" id={`label-${this.uid}`} htmlFor={`graphic-${this.uid}`}>\r\n            <span class=\"label-text\">{this.label}</span>\r\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\r\n          </label>\r\n          {this.isBar && renderLegend.call(this, this.currentChartType)}\r\n          {this.renderChart()}\r\n          {this.isDoughnut && renderLegend.call(this, this.currentChartType)}\r\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\r\n          {this.currentChartType === \"doughnut0\" ? renderCompletionMessage.call(this) : \"\"}\r\n          {this.hasHiddenBarValue && renderHiddenValuesMessage()}\r\n        </div>\r\n        {renderInstructionsText()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"wm-chart.entry.js","mappings":"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","names":[],"sources":["./src/components/charts/wm-chart/wm-chart.scss?tag=wm-chart&encapsulation=shadow","./src/components/charts/wm-chart/wm-chart.tsx"],"sourcesContent":[":host,\nwm-chart {\n  @extend %chart-styles;\n}\n\n:host(:focus) {\n  @extend %chart-focus-styles;\n}\n","import { Component, Element, h, Host, Prop, State, Listen } from \"@stencil/core\";\nimport { forceUpdate } from \"@stencil/core\";\nimport { debounce, generateId, intl } from \"../../../global/functions\";\nimport {\n  amountToPercent,\n  exitChart,\n  getDetails,\n  handleChartKeydown,\n  renderStackedBar,\n  renderSimpleBar,\n  renderCompletionMessage,\n  renderDoughnut,\n  renderHiddenValuesMessage,\n  renderInstructionsText,\n  renderLegend,\n  allChartsDetails,\n} from \"../chartFunctions\";\nimport { ChartType, SliceDetails, SliceElement } from \"../../../global/interfaces\";\n\n@Component({\n  tag: \"wm-chart\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-chart.scss\",\n})\nexport class Chart {\n  @Element() el!: HTMLWmChartElement;\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\n  private componentWrapperEl!: HTMLDivElement;\n\n  @Prop() chartType: ChartType | \"hybrid\" = \"doughnut1\"; // hybrid is not a real ChartType, it gets converted to something else.\n  @Prop() label?: string;\n  @Prop() labelWidth: string = \"150px\";\n  @Prop() subinfo?: string;\n  @Prop() completionMessage?: string;\n  @Prop() valueFormat?: \"percentage\" | \"amount\";\n  @Prop() showValues?: \"percentage\" | \"amount\"; // DEPRECATED in favor of value-format\n  @Prop() showGrid?: boolean = true; \n  get tempValueFormat() {\n    // use of this getter should be replaced with dateFormat when showValues is fully phased out\n    return this.valueFormat || this.showValues || \"none\";\n  }\n  @Prop() showLegend: boolean = true;\n  @Prop() showBarLegend: boolean = false;\n  @Prop() notStartedColor: boolean = false;\n  // left labels are a temporary solution for the lack of a stacked bar chart and is undocumented\n  // it only works with bar4 and should be used without a legend\n  @Prop() labelPosition: \"left\" | \"top\" = \"top\";\n  @State() isTabbing: boolean = false;\n  @State() userIsNavigating: boolean = false;\n  @State() hasHiddenBarValue: boolean = false;\n\n  get hybridType(): \"doughnut0\" | \"bar1\" {\n    return window.innerWidth > 1340 ? \"doughnut0\" : \"bar1\";\n  }\n  private uid: string = generateId();\n  private total!: number;\n  private slicesDetails: SliceDetails[] = [];\n\n  get popoverEl() {\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\n  }\n\n  get sliceEls(): SliceElement[] {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\"));\n  }\n\n  get currentChartType(): ChartType {\n    let current = this.chartType as ChartType;\n\n    if (this.chartType === \"hybrid\") {\n      current = this.hybridType;\n    } else if (this.chartType === \"doughnut2\" && this.el.children.length > 3) {\n      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices\n      current = \"doughnut2plus\";\n    }\n    return current; \n  }\n\n  get chartDetails() {\n    return allChartsDetails[this.currentChartType];\n  }\n\n  get ariaLabelText() {\n    let text = `${this.label}`;\n    if (this.subinfo) {\n      text += ` ${this.subinfo}`;\n    }\n    return text;\n  }\n\n  get isDoughnut() {\n    return this.chartDetails.category === \"doughnut\";\n  }\n\n  get isStackedBar() {\n    return this.chartDetails.category === \"stackedBar\";\n  }\n\n  get isSimpleBar() {\n    return this.chartDetails.category === \"simpleBar\";\n  }\n\n  get isBar() {\n    return this.isStackedBar || this.isSimpleBar;\n  }\n\n  get chartRoleDescription(): string {\n    return intl.formatMessage({\n      id: \"chart.roleDescription\",\n      defaultMessage: \"Interactive chart\",\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\n    });\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    handleChartKeydown.call(this, ev);\n  }\n\n  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */\n\n  async componentWillLoad() {\n    if (!this.label) {\n      throw new Error(\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\n      );\n    }\n    if (this.showValues) {\n      console.warn(\"wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.\");\n    }\n    await getDetails.call(this, this.currentChartType);\n\n    // rerender on resize\n    // unnecessary for doughnuts (except hybrid) as layout doesn't change\n    if (this.chartType === \"hybrid\" || !this.isDoughnut) {\n      const resizeObserver = new ResizeObserver(() => {\n        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();\n      });\n      resizeObserver.observe(this.el);\n    }\n  }\n\n  handleStackedBarResize = debounce(async () => {\n    let hasHiddenBarValue = false;\n\n    // if any value text overlaps with another, hide it and display warning\n    const valueEls = this.el.shadowRoot!.querySelectorAll(\".value\");\n\n    if (valueEls.length) {\n      let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;\n      let margin = 4;\n\n      valueEls.forEach((valueEl, idx) => {\n        // checks are to the left of each valueEl, so skip the first one\n        if (idx > 0) {\n          const bounds = valueEl.getBoundingClientRect();\n\n          if (bounds.left - margin < lastVisibleRightEdge) {\n            // left edge of current value is overlapping right edge of last visible value\n            valueEl.classList.add(\"hidden\");\n            hasHiddenBarValue = true;\n          } else {\n            valueEl.classList.remove(\"hidden\");\n            lastVisibleRightEdge = bounds.right;\n          }\n        }\n      });\n    }\n\n    this.hasHiddenBarValue = hasHiddenBarValue;\n  }, 100);\n\n  debouncedUpdate = debounce(async () => {\n    forceUpdate(this.el);\n  }, 10);\n\n  debouncedSliceUpdate = debounce(async () => {\n    await getDetails.call(this, this.currentChartType);\n    forceUpdate(this.el);\n  }, 100);\n\n  @Listen(\"wmChartSliceUpdated\")\n  handleSliceUpdate() {\n    this.debouncedSliceUpdate();\n  }\n\n  /* RENDERING */\n  renderBarText(s: SliceDetails, idx: number) {\n    let val;\n    if (this.tempValueFormat === \"percentage\") {\n      // if segment has an amount, but \"0\" percentage (it's below 0.5% and rounded down), still display it as <1%\n      val = s.perc === 0 && s.amount > 0 ? \"<1%\" : `${s.perc}%`;\n    } else if (this.tempValueFormat === \"amount\") {\n      val = s.amount;\n    }\n\n    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper\n    // in order to not disturb the positioning of the other value texts in the entire row\n    return (\n      <div\n        class=\"value-wrapper\"\n        style={{\n          width: `calc(${amountToPercent(s.amount, this.total, false)}%\n        ${idx !== this.slicesDetails.length - 1 ? \" - 2px\" : \"\"}`,\n        }}\n      >\n        <span class=\"value\">{s.amount > 0 && val}</span>\n      </div>\n    );\n  }\n\n  drawAxis() {\n    if (this.currentChartType === \"bar3\") {\n      return (\n        <svg class=\"axis\">\n          <line x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\" />\n          <line x1=\"0\" x2=\"0\" y1=\"0\" y2=\"-85px\" />\n          <line class=\"tick\" x1=\"0.5\" x2=\"0.5\" y1=\"0\" y2=\"6\" />\n          <text x=\"0.5\" y=\"-6\">\n            0%\n          </text>\n          <line class=\"tick\" x1=\"100%\" x2=\"100%\" y1=\"0\" y2=\"6\" />\n          <text x=\"100%\" y=\"-6\">\n            100%\n          </text>\n        </svg>\n      );\n    }\n  }\n\n  renderChart() {\n    if (this.total > 0) {\n      if (this.isStackedBar) {\n        return renderStackedBar.call(this, this.currentChartType);\n      } else if (this.isSimpleBar) {\n        return renderSimpleBar.call(this, this.currentChartType);\n      } else if (this.isDoughnut) {\n        return renderDoughnut.call(this, this.currentChartType);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host onBlur={() => exitChart.call(this)}>\n        <div\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\n          class={`component-wrapper ${this.currentChartType} ${\n            this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"\n          } ${this.labelPosition === \"left\" && this.currentChartType === \"bar4\" ? \"left-label\" : \"\"}`}\n          role=\"application\"\n          aria-label={this.ariaLabelText}\n          tabindex={0}\n          aria-roledescription={this.chartRoleDescription}\n          aria-describedby=\"chart-instructions\"\n        >\n          <label class=\"label\" id={`label-${this.uid}`} htmlFor={`graphic-${this.uid}`}>\n            <span class=\"label-text\">{this.label}</span>\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\n          </label>\n          {this.isBar && renderLegend.call(this, this.currentChartType)}\n          {this.renderChart()}\n          {this.isDoughnut && renderLegend.call(this, this.currentChartType)}\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\n          {this.currentChartType === \"doughnut0\" ? renderCompletionMessage.call(this) : \"\"}\n          {this.hasHiddenBarValue && renderHiddenValuesMessage()}\n        </div>\n        {renderInstructionsText()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,270 +1,270 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-84a6ae22.js';
-import { i as intl, e as isRelatedTarget, h as checkForFocusableElInShadow, g as generateId } from './functions-bb1309d0.js';
+import { i as intl, e as isRelatedTarget, h as checkForFocusableElInShadow, g as generateId } from './functions-dc9964aa.js';
 
-const wmDatepickerCss = ":host,wm-datepicker{font-family:inherit}:host *,wm-datepicker *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-datepicker .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-ms-flex-direction:row;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:-ms-flexbox;display:flex;-ms-flex-align:center;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;-webkit-clip-path:inset(50%) !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:\"\\f026\";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;-ms-flex-align:center;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;-ms-flex-pack:justify;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%;-ms-flex:1;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{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}: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 wmDatepickerCss = ":host,wm-datepicker{font-family:inherit}:host *,wm-datepicker *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-datepicker .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-ms-flex-direction:row;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:-ms-flexbox;display:flex;-ms-flex-align:center;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;-webkit-clip-path:inset(50%) !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:\"\\f026\";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;-ms-flex-align:center;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;-ms-flex-pack:justify;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%;-ms-flex:1;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{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}:host .wrapper.focus .inner-wrapper,wm-datepicker .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}: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) {
-    registerInstance(this, hostRef);
-    this.wmDatepickerNewValidValue = createEvent(this, "wmDatepickerNewValidValue", 7);
-    // 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 delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["handleError"]
-  }; }
-};
+const DatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmDatepickerNewValidValue = createEvent(this, "wmDatepickerNewValidValue", 7);
+    // 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 delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["handleError"]
+  }; }
+};
 DatePicker.style = wmDatepickerCss;
 
 export { DatePicker as wm_datepicker };