@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

@@ -1 +1 @@
-{"version":3,"names":["wmChartCss","Chart","this","uid","generateId","slicesDetails","handleStackedBarResize","debounce","__awaiter","_this","hasHiddenBarValue","valueEls","el","shadowRoot","querySelectorAll","length","lastVisibleRightEdge_1","getBoundingClientRect","right","margin_1","forEach","valueEl","idx","bounds","left","classList","add","remove","debouncedUpdate","forceUpdate","debouncedSliceUpdate","getDetails","call","currentChartType","_a","sent","Object","defineProperty","class_1","prototype","valueFormat","showValues","window","innerWidth","querySelector","Array","from","current","chartType","hybridType","children","allChartsDetails","text","concat","label","subinfo","chartDetails","category","isStackedBar","isSimpleBar","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","componentWillLoad","Error","console","warn","isDoughnut","resizeObserver","ResizeObserver","observe","handleSliceUpdate","renderBarText","s","val","tempValueFormat","perc","amount","h","class","style","width","amountToPercent","total","drawAxis","x1","x2","y1","y2","x","y","renderChart","renderStackedBar","renderSimpleBar","renderDoughnut","render","Host","onBlur","exitChart","ref","componentWrapperEl","userIsNavigating","labelPosition","role","ariaLabelText","tabindex","chartRoleDescription","htmlFor","isBar","renderLegend","renderCompletionMessage","renderHiddenValuesMessage","renderInstructionsText"],"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"],"mappings":"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"}
+{"version":3,"names":["wmChartCss","Chart","this","uid","generateId","slicesDetails","handleStackedBarResize","debounce","__awaiter","_this","hasHiddenBarValue","valueEls","el","shadowRoot","querySelectorAll","length","lastVisibleRightEdge_1","getBoundingClientRect","right","margin_1","forEach","valueEl","idx","bounds","left","classList","add","remove","debouncedUpdate","forceUpdate","debouncedSliceUpdate","getDetails","call","currentChartType","_a","sent","Object","defineProperty","class_1","prototype","valueFormat","showValues","window","innerWidth","querySelector","Array","from","current","chartType","hybridType","children","allChartsDetails","text","concat","label","subinfo","chartDetails","category","isStackedBar","isSimpleBar","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","componentWillLoad","Error","console","warn","isDoughnut","resizeObserver","ResizeObserver","observe","handleSliceUpdate","renderBarText","s","val","tempValueFormat","perc","amount","h","class","style","width","amountToPercent","total","drawAxis","x1","x2","y1","y2","x","y","renderChart","renderStackedBar","renderSimpleBar","renderDoughnut","render","Host","onBlur","exitChart","ref","componentWrapperEl","userIsNavigating","labelPosition","role","ariaLabelText","tabindex","chartRoleDescription","htmlFor","isBar","renderLegend","renderCompletionMessage","renderHiddenValuesMessage","renderInstructionsText"],"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"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-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";var 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}';var DatePicker=function(){function e(e){registerInstance(this,e);this.wmDatepickerNewValidValue=createEvent(this,"wmDatepickerNewValidValue",7);this.lastCommittedValue=this.value;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=""}e.prototype.handleTabbingOn=function(){this.dpWrapper&&this.dpWrapper.classList.add("user-is-tabbing")};e.prototype.handleTabbingOff=function(){this.dpWrapper&&this.dpWrapper.classList.remove("user-is-tabbing")};e.prototype.handleError=function(){if(this.errorMessage){this.generateError()}else{this.clearError();this.processInput()}};e.prototype.handleInput=function(e){this.value=e.target.value};e.prototype.handleBlur=function(e){var t=this.preventValidation&&isRelatedTarget(e,this.preventValidation);if(!t){this.processInput()}this.dpWrapper.classList.remove("focus")};e.prototype.focusHandler=function(){this.dpWrapper.classList.add("focus")};e.prototype.handlePopupBlurred=function(e){if(e.detail.relatedTarget!==this.el){var t=new CustomEvent("blur");t.relatedTarget=e.detail.relatedTarget;this.el.dispatchEvent(t)}};e.prototype.getActiveElement=function(){return checkForFocusableElInShadow(document.activeElement)};e.prototype.handleCellTriggered=function(e){var t=e.detail;var r=t.getAttribute("data-year")+"-"+t.getAttribute("data-month")+"-"+t.textContent;this.inputEl.value=this.reformatDate(this.dateFormat,r);this.processInput();var a=new CustomEvent("input");this.el.dispatchEvent(a)};e.prototype.processInput=function(e){var t=!e&&this.requiredField;var r=this.inputEl.value;if(this.eightDigitsEntry.test(this.inputEl.value)){this.inputEl.value=this.addSlashes(this.inputEl.value)}if(this.parsableEntry.test(this.inputEl.value)){r=this.reformatDate("ISO",this.inputEl.value);this.inputEl.value=this.reformatDate(this.dateFormat,r);if(this.isValidDate(r)){if(this.errorMessage){this.generateError()}else{this.clearError()}}else if(this.inputEl.value.length){this.generateError()}}else if(this.inputEl.value.length||t||this.errorMessage){this.generateError()}else if(!this.inputEl.value.length&&!t){this.clearError()}this.value=r;if(r!==this.lastCommittedValue){var a=new CustomEvent("change");this.el.dispatchEvent(a);this.lastCommittedValue=this.value}if(this.isValidDate(r)&&r!==this.lastValidValue){this.wmDatepickerNewValidValue.emit();this.lastValidValue=r}};e.prototype.reformatDate=function(e,t){if(!t){return""}else if(!this.parsableEntry.test(t)){return t}else{var r=t.replace(/[\-\.]/gi,"/").split("/");switch(e){case"US":case this.dateFormats["US"]:return r[1].padStart(2,"0")+"/"+r[2].padStart(2,"0")+"/"+r[0].padStart(4,"20");case"INT":case this.dateFormats["INT"]:return r[2].padStart(2,"0")+"/"+r[1].padStart(2,"0")+"/"+r[0].padStart(4,"20");case"ISO":case this.dateFormats["ISO"]:if(this.dateFormat==="US"||this.dateFormat===this.dateFormats["US"]){return r[2].padStart(4,"20")+"-"+r[0].padStart(2,"0")+"-"+r[1].padStart(2,"0")}else if(this.dateFormat==="INT"||this.dateFormat===this.dateFormats["INT"]){return r[2].padStart(4,"20")+"-"+r[1].padStart(2,"0")+"-"+r[0].padStart(2,"0")}else if(this.dateFormat==="ISO"||this.dateFormat===this.dateFormats["ISO"]){return r[0].padStart(4,"20")+"-"+r[1].padStart(2,"0")+"-"+r[2].padStart(2,"0")}default:return r.join("/")}}};e.prototype.isValidDate=function(e){if(!e||!this.isoEntry.test(e)){return false}else{var t=e.split("-");var r=parseInt(t[2],10);var a=parseInt(t[1],10);var i=parseInt(t[0],10);if(i<1e3||i>3e3||a==0||a>12)return false;var s=[31,28,31,30,31,30,31,31,30,31,30,31];if(i%400==0||i%100!=0&&i%4==0)s[1]=29;return r>0&&r<=s[a-1]}};e.prototype.generateError=function(){var e=this.requiredFieldMessage||intl.formatMessage({id:"date.requiredDateError",defaultMessage:"A date is required."});var t=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=t}else if(!this.inputEl.value.length&&this.requiredField){this.displayError=e}};e.prototype.clearError=function(){this.displayError=""};e.prototype.addSlashes=function(e){if(this.dateFormat==="ISO"||this.dateFormat===this.dateFormats["ISO"]){return e.substring(0,4)+"/"+e.substring(4,6)+"/"+e.substring(6)}else{return e.substring(0,2)+"/"+e.substring(2,4)+"/"+e.substring(4)}};e.prototype.componentWillLoad=function(){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)){this.lastValidValue=this.value}};e.prototype.componentDidLoad=function(){this.inputEl.value=this.reformatDate(this.dateFormat,this.value);this.processInput(true)};e.prototype.render=function(){var e=this;var t=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:"".concat(this.displayError?"invalid":""),invalid:this.displayError?"true":null},h("div",{ref:function(t){return e.dpWrapper=t},class:"wrapper label-".concat(this.labelPosition," ").concat(this.displayError?"invalid":"")},h("div",{class:"label-wrapper"},this.labelPosition!=="none"&&h("label",{id:"datepickerLabel-".concat(this.uid),htmlFor:"date-input-".concat(this.uid),class:"label",title:"".concat(this.label," (").concat(t,")")},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-".concat(this.uid),class:"date-input",name:"date",placeholder:t,onFocus:this.focusHandler.bind(this),onInput:function(t){return e.handleInput(t)},onBlur:function(t){return e.handleBlur(t)},ref:function(t){return e.inputEl=t},"aria-describedby":"error-".concat(this.uid),"aria-controls":"popup-".concat(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-".concat(this.uid),class:"error","aria-live":"assertive","aria-atomic":"true"},this.displayError))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["handleError"]}},enumerable:false,configurable:true});return e}();DatePicker.style=wmDatepickerCss;export{DatePicker as wm_datepicker};
+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-dc9964aa.js";var 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}';var DatePicker=function(){function e(e){registerInstance(this,e);this.wmDatepickerNewValidValue=createEvent(this,"wmDatepickerNewValidValue",7);this.lastCommittedValue=this.value;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=""}e.prototype.handleTabbingOn=function(){this.dpWrapper&&this.dpWrapper.classList.add("user-is-tabbing")};e.prototype.handleTabbingOff=function(){this.dpWrapper&&this.dpWrapper.classList.remove("user-is-tabbing")};e.prototype.handleError=function(){if(this.errorMessage){this.generateError()}else{this.clearError();this.processInput()}};e.prototype.handleInput=function(e){this.value=e.target.value};e.prototype.handleBlur=function(e){var t=this.preventValidation&&isRelatedTarget(e,this.preventValidation);if(!t){this.processInput()}this.dpWrapper.classList.remove("focus")};e.prototype.focusHandler=function(){this.dpWrapper.classList.add("focus")};e.prototype.handlePopupBlurred=function(e){if(e.detail.relatedTarget!==this.el){var t=new CustomEvent("blur");t.relatedTarget=e.detail.relatedTarget;this.el.dispatchEvent(t)}};e.prototype.getActiveElement=function(){return checkForFocusableElInShadow(document.activeElement)};e.prototype.handleCellTriggered=function(e){var t=e.detail;var r=t.getAttribute("data-year")+"-"+t.getAttribute("data-month")+"-"+t.textContent;this.inputEl.value=this.reformatDate(this.dateFormat,r);this.processInput();var a=new CustomEvent("input");this.el.dispatchEvent(a)};e.prototype.processInput=function(e){var t=!e&&this.requiredField;var r=this.inputEl.value;if(this.eightDigitsEntry.test(this.inputEl.value)){this.inputEl.value=this.addSlashes(this.inputEl.value)}if(this.parsableEntry.test(this.inputEl.value)){r=this.reformatDate("ISO",this.inputEl.value);this.inputEl.value=this.reformatDate(this.dateFormat,r);if(this.isValidDate(r)){if(this.errorMessage){this.generateError()}else{this.clearError()}}else if(this.inputEl.value.length){this.generateError()}}else if(this.inputEl.value.length||t||this.errorMessage){this.generateError()}else if(!this.inputEl.value.length&&!t){this.clearError()}this.value=r;if(r!==this.lastCommittedValue){var a=new CustomEvent("change");this.el.dispatchEvent(a);this.lastCommittedValue=this.value}if(this.isValidDate(r)&&r!==this.lastValidValue){this.wmDatepickerNewValidValue.emit();this.lastValidValue=r}};e.prototype.reformatDate=function(e,t){if(!t){return""}else if(!this.parsableEntry.test(t)){return t}else{var r=t.replace(/[\-\.]/gi,"/").split("/");switch(e){case"US":case this.dateFormats["US"]:return r[1].padStart(2,"0")+"/"+r[2].padStart(2,"0")+"/"+r[0].padStart(4,"20");case"INT":case this.dateFormats["INT"]:return r[2].padStart(2,"0")+"/"+r[1].padStart(2,"0")+"/"+r[0].padStart(4,"20");case"ISO":case this.dateFormats["ISO"]:if(this.dateFormat==="US"||this.dateFormat===this.dateFormats["US"]){return r[2].padStart(4,"20")+"-"+r[0].padStart(2,"0")+"-"+r[1].padStart(2,"0")}else if(this.dateFormat==="INT"||this.dateFormat===this.dateFormats["INT"]){return r[2].padStart(4,"20")+"-"+r[1].padStart(2,"0")+"-"+r[0].padStart(2,"0")}else if(this.dateFormat==="ISO"||this.dateFormat===this.dateFormats["ISO"]){return r[0].padStart(4,"20")+"-"+r[1].padStart(2,"0")+"-"+r[2].padStart(2,"0")}default:return r.join("/")}}};e.prototype.isValidDate=function(e){if(!e||!this.isoEntry.test(e)){return false}else{var t=e.split("-");var r=parseInt(t[2],10);var a=parseInt(t[1],10);var i=parseInt(t[0],10);if(i<1e3||i>3e3||a==0||a>12)return false;var s=[31,28,31,30,31,30,31,31,30,31,30,31];if(i%400==0||i%100!=0&&i%4==0)s[1]=29;return r>0&&r<=s[a-1]}};e.prototype.generateError=function(){var e=this.requiredFieldMessage||intl.formatMessage({id:"date.requiredDateError",defaultMessage:"A date is required."});var t=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=t}else if(!this.inputEl.value.length&&this.requiredField){this.displayError=e}};e.prototype.clearError=function(){this.displayError=""};e.prototype.addSlashes=function(e){if(this.dateFormat==="ISO"||this.dateFormat===this.dateFormats["ISO"]){return e.substring(0,4)+"/"+e.substring(4,6)+"/"+e.substring(6)}else{return e.substring(0,2)+"/"+e.substring(2,4)+"/"+e.substring(4)}};e.prototype.componentWillLoad=function(){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)){this.lastValidValue=this.value}};e.prototype.componentDidLoad=function(){this.inputEl.value=this.reformatDate(this.dateFormat,this.value);this.processInput(true)};e.prototype.render=function(){var e=this;var t=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:"".concat(this.displayError?"invalid":""),invalid:this.displayError?"true":null},h("div",{ref:function(t){return e.dpWrapper=t},class:"wrapper label-".concat(this.labelPosition," ").concat(this.displayError?"invalid":"")},h("div",{class:"label-wrapper"},this.labelPosition!=="none"&&h("label",{id:"datepickerLabel-".concat(this.uid),htmlFor:"date-input-".concat(this.uid),class:"label",title:"".concat(this.label," (").concat(t,")")},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-".concat(this.uid),class:"date-input",name:"date",placeholder:t,onFocus:this.focusHandler.bind(this),onInput:function(t){return e.handleInput(t)},onBlur:function(t){return e.handleBlur(t)},ref:function(t){return e.inputEl=t},"aria-describedby":"error-".concat(this.uid),"aria-controls":"popup-".concat(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-".concat(this.uid),class:"error","aria-live":"assertive","aria-atomic":"true"},this.displayError))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["handleError"]}},enumerable:false,configurable:true});return e}();DatePicker.style=wmDatepickerCss;export{DatePicker as wm_datepicker};
 //# sourceMappingURL=wm-datepicker.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["wmDatepickerCss","DatePicker","this","lastCommittedValue","value","parsableEntry","isoEntry","eightDigitsEntry","dateFormats","US","intl","formatMessage","id","defaultMessage","INT","ISO","prototype","handleTabbingOn","dpWrapper","classList","add","handleTabbingOff","remove","handleError","errorMessage","generateError","clearError","processInput","handleInput","ev","target","handleBlur","shouldPreventValidation","preventValidation","isRelatedTarget","focusHandler","handlePopupBlurred","detail","relatedTarget","el","event","CustomEvent","dispatchEvent","getActiveElement","checkForFocusableElInShadow","document","activeElement","handleCellTriggered","dateElement","isoDate","getAttribute","textContent","inputEl","reformatDate","dateFormat","isFirstLoad","leftEmpty","requiredField","test","addSlashes","isValidDate","length","lastValidValue","wmDatepickerNewValidValue","emit","toFormat","date","dateArr","replace","split","padStart","join","input","parts","day","parseInt","month","year","monthLength","requiredDateErr","requiredFieldMessage","validDateErr","toLowerCase","displayError","substring","componentWillLoad","label","console","error","uid","generateId","componentDidLoad","render","_this","h","Host","class","concat","invalid","ref","d","labelPosition","htmlFor","title","disabled","type","name","placeholder","onFocus","bind","onInput","onBlur","Date","parentId"],"sources":["src/components/wm-datepicker/wm-datepicker.scss?tag=wm-datepicker&encapsulation=shadow","src/components/wm-datepicker/wm-datepicker.tsx"],"sourcesContent":[":host,\r\nwm-datepicker {\r\n  font-family: inherit;\r\n\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  @include label;\r\n\r\n  .wrapper {\r\n    position: relative;\r\n\r\n    .required {\r\n      color: $datepicker-required-input;\r\n    }\r\n\r\n    .inner-wrapper {\r\n      @include displayFlex();\r\n      align-items: center;\r\n      height: rem-calc(40);\r\n      border: 1px solid;\r\n      border-color: $datepicker-input-border-color;\r\n      @include border-radius(3px);\r\n      max-width: 236px; /* input is 200px or smaller, button is 36px */\r\n      justify-content: space-between;\r\n      position: relative;\r\n\r\n      .date-input {\r\n        -moz-border-top-left-radius: 3px;\r\n        -webkit-border-top-left-radius: 3px;\r\n        border-top-left-radius: 3px;\r\n        -moz-border-bottom-left-radius: 3px;\r\n        -webkit-border-bottom-left-radius: 3px;\r\n        border-bottom-left-radius: 3px;\r\n        border: none;\r\n        font-size: rem-calc(14);\r\n        padding: rem-calc(10 15 8);\r\n        min-width: 0;\r\n        height: 100%;\r\n        flex: 1;\r\n        margin: 0;\r\n\r\n        &:disabled {\r\n          background-color: $input-disabled-bg;\r\n          color: $input-disabled-color;\r\n        }\r\n\r\n        &:focus {\r\n          outline: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.invalid {\r\n      .inner-wrapper {\r\n        @include invalidBorder;\r\n      }\r\n\r\n      .error {\r\n        @include errorMessage;\r\n        margin-bottom: 4px;\r\n        top: 100%;\r\n        left: 0;\r\n      }\r\n    }\r\n\r\n    &.focus {\r\n      .inner-wrapper {\r\n        @include field-focus;\r\n      }\r\n    }\r\n  }\r\n\r\n  .user-is-tabbing {\r\n    .toggle:focus {\r\n      &:not(:active) {\r\n        border: none;\r\n        z-index: 11;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Host, Element, Event, EventEmitter, Prop, Listen, Watch, State } from \"@stencil/core\";\r\nimport { generateId, checkForFocusableElInShadow, intl, isRelatedTarget } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-datepicker\",\r\n  styleUrl: \"wm-datepicker.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DatePicker {\r\n  @Element() el!: HTMLWmDatepickerElement;\r\n  private dpWrapper!: HTMLDivElement;\r\n  private inputEl!: HTMLInputElement;\r\n\r\n  @Prop({ mutable: true }) value?: string = \"\";\r\n  @Prop() disabled: boolean = false;\r\n  @Prop({ mutable: true }) dateFormat: string = \"US\";\r\n  @Prop({ reflect: true }) errorMessage: string = \"\";\r\n  @Prop({ mutable: true }) labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\r\n  @Prop({ mutable: true }) label: string = \"\";\r\n  @Prop() requiredField: boolean = false;\r\n  @Prop() requiredFieldMessage?: string;\r\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\r\n  @State() displayError: string = \"\";\r\n  @Event() wmDatepickerNewValidValue!: EventEmitter;\r\n\r\n  // we only want to fire the \"change\" event if the value has actually changed (that's\r\n  // how native elements do it), so we need to keep in state the last committed value.\r\n  private lastCommittedValue?: string = this.value;\r\n  private lastValidValue?: string;\r\n  private uid!: string;\r\n\r\n  // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits\r\n  private parsableEntry = /^(\\d{1}|\\d{2}|\\d{4})[\\-\\.\\/]\\d{1,2}[\\-\\.\\/](\\d{1}|\\d{2}|\\d{4})$/;\r\n  private isoEntry = /^\\d\\d\\d\\d[-]\\d\\d[-]\\d\\d$/;\r\n  private eightDigitsEntry = /^\\d{8}$/;\r\n\r\n  dateFormats: any = {\r\n    US: intl.formatMessage({\r\n      id: \"date.formatUS\",\r\n      defaultMessage: \"mm/dd/yyyy\",\r\n    }),\r\n    INT: intl.formatMessage({\r\n      id: \"date.formatINT\",\r\n      defaultMessage: \"dd/mm/yyyy\",\r\n    }),\r\n    ISO: intl.formatMessage({\r\n      id: \"date.formatISO\",\r\n      defaultMessage: \"yyyy/mm/dd\",\r\n    }),\r\n  };\r\n\r\n  @Listen(\"keydown\")\r\n  handleTabbingOn() {\r\n    this.dpWrapper && this.dpWrapper.classList.add(\"user-is-tabbing\");\r\n  }\r\n\r\n  @Listen(\"click\")\r\n  handleTabbingOff() {\r\n    this.dpWrapper && this.dpWrapper.classList.remove(\"user-is-tabbing\");\r\n  }\r\n\r\n  @Watch(\"errorMessage\")\r\n  handleError() {\r\n    if (this.errorMessage) {\r\n      this.generateError();\r\n    } else {\r\n      this.clearError();\r\n      this.processInput();\r\n    }\r\n  }\r\n\r\n  handleInput(ev: Event) {\r\n    // keep component's value in sync with input's value\r\n    // validation only happens on blur and initial load,\r\n    // but component's value should reflect user input at any time\r\n    this.value = (ev.target! as HTMLInputElement).value; // same as this.inputEl.value\r\n  }\r\n\r\n  // this is input blur, not component blur\r\n  handleBlur(ev: FocusEvent) {\r\n    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)\r\n    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);\r\n    if (!shouldPreventValidation) {\r\n      this.processInput();\r\n    }\r\n    this.dpWrapper.classList.remove(\"focus\");\r\n  }\r\n\r\n  // this is input focus, not component focus\r\n  focusHandler() {\r\n    this.dpWrapper.classList.add(\"focus\");\r\n  }\r\n\r\n  @Listen(\"popupBlurred\")\r\n  handlePopupBlurred(ev: CustomEvent) {\r\n    // emit blur event when leaving component from priv-datepicker\r\n    if (ev.detail.relatedTarget !== this.el) {\r\n      const event = new CustomEvent(\"blur\");\r\n      // @ts-ignore\r\n      event.relatedTarget = ev.detail.relatedTarget;\r\n      this.el.dispatchEvent(event);\r\n    }\r\n  }\r\n\r\n  getActiveElement() {\r\n    return checkForFocusableElInShadow(document.activeElement as HTMLElement);\r\n  }\r\n\r\n  @Listen(\"cellTriggered\")\r\n  handleCellTriggered(ev: CustomEvent) {\r\n    let dateElement = ev.detail as HTMLTableCellElement;\r\n    let isoDate =\r\n      dateElement.getAttribute(\"data-year\")! +\r\n      \"-\" +\r\n      dateElement.getAttribute(\"data-month\")! +\r\n      \"-\" +\r\n      dateElement.textContent!;\r\n    this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);\r\n    this.processInput();\r\n\r\n    // Create event to trigger onInput function on host element, to get the updated value\r\n    // Because there are more ways to input than just typing, we are firing this event upon cellTriggered\r\n    const event = new CustomEvent(\"input\");\r\n    this.el.dispatchEvent(event);\r\n  }\r\n\r\n  processInput(isFirstLoad?: boolean) {\r\n    // The required field error should not display on first load\r\n    const leftEmpty = !isFirstLoad && this.requiredField;\r\n\r\n    let isoDate = this.inputEl.value;\r\n\r\n    //If input is 8 digits, add slashes as a courtesy and process anyway\r\n    if (this.eightDigitsEntry.test(this.inputEl.value)) {\r\n      this.inputEl.value = this.addSlashes(this.inputEl.value);\r\n    }\r\n\r\n    // if we don't have 2 separators we can't reformat so we'll return what was passed in\r\n    if (this.parsableEntry.test(this.inputEl.value)) {\r\n      //ISO format for submission\r\n      isoDate = this.reformatDate(\"ISO\", this.inputEl.value);\r\n\r\n      //User-specific format for display\r\n      this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);\r\n\r\n      if (this.isValidDate(isoDate)) {\r\n        //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.\r\n        if (this.errorMessage) {\r\n          this.generateError();\r\n        } else {\r\n          this.clearError();\r\n        }\r\n        //Prevents error from appearing if input field is empty\r\n      } else if (this.inputEl.value.length) {\r\n        this.generateError();\r\n      }\r\n    } else if (this.inputEl.value.length || leftEmpty || this.errorMessage) {\r\n      this.generateError();\r\n    } else if (!this.inputEl.value.length && !leftEmpty) {\r\n      this.clearError();\r\n    }\r\n\r\n    // value is set to the reformated date or whatever the user passed\r\n    this.value = isoDate;\r\n\r\n    if (isoDate !== this.lastCommittedValue) {\r\n      const event = new CustomEvent(\"change\");\r\n      this.el.dispatchEvent(event);\r\n      this.lastCommittedValue = this.value;\r\n    }\r\n\r\n    // event must fire after we set this.value\r\n    // only fire if new valid value is different from the previous one\r\n    if (this.isValidDate(isoDate) && isoDate !== this.lastValidValue) {\r\n      this.wmDatepickerNewValidValue.emit();\r\n      //Update prop passed into calendar to valid date\r\n      this.lastValidValue = isoDate;\r\n    }\r\n  }\r\n\r\n  // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.\r\n  reformatDate(toFormat: string, date?: string): string {\r\n    if (!date) {\r\n      return \"\";\r\n    } else if (!this.parsableEntry.test(date)) {\r\n      return date;\r\n    } else {\r\n      let dateArr = date.replace(/[\\-\\.]/gi, \"/\").split(\"/\");\r\n      switch (toFormat) {\r\n        case \"US\":\r\n        case this.dateFormats[\"US\"]:\r\n          return dateArr[1].padStart(2, \"0\") + \"/\" + dateArr[2].padStart(2, \"0\") + \"/\" + dateArr[0].padStart(4, \"20\");\r\n        case \"INT\":\r\n        case this.dateFormats[\"INT\"]:\r\n          return dateArr[2].padStart(2, \"0\") + \"/\" + dateArr[1].padStart(2, \"0\") + \"/\" + dateArr[0].padStart(4, \"20\");\r\n        case \"ISO\":\r\n        case this.dateFormats[\"ISO\"]:\r\n          if (this.dateFormat === \"US\" || this.dateFormat === this.dateFormats[\"US\"]) {\r\n            return dateArr[2].padStart(4, \"20\") + \"-\" + dateArr[0].padStart(2, \"0\") + \"-\" + dateArr[1].padStart(2, \"0\");\r\n          } else if (this.dateFormat === \"INT\" || this.dateFormat === this.dateFormats[\"INT\"]) {\r\n            return dateArr[2].padStart(4, \"20\") + \"-\" + dateArr[1].padStart(2, \"0\") + \"-\" + dateArr[0].padStart(2, \"0\");\r\n          } else if (this.dateFormat === \"ISO\" || this.dateFormat === this.dateFormats[\"ISO\"]) {\r\n            return dateArr[0].padStart(4, \"20\") + \"-\" + dateArr[1].padStart(2, \"0\") + \"-\" + dateArr[2].padStart(2, \"0\");\r\n          }\r\n        default:\r\n          return dateArr.join(\"/\");\r\n      }\r\n    }\r\n  }\r\n\r\n  isValidDate(input?: string) {\r\n    // if it's not ISO it's not valid\r\n    if (!input || !this.isoEntry.test(input)) {\r\n      return false;\r\n    } else {\r\n      // Parse the ISO date parts to integers\r\n      let parts = input.split(\"-\");\r\n      let day = parseInt(parts[2], 10);\r\n      let month = parseInt(parts[1], 10);\r\n      let year = parseInt(parts[0], 10);\r\n      // Check the ranges of month and year\r\n      if (year < 1000 || year > 3000 || month == 0 || month > 12) return false;\r\n      let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\r\n      // Adjust for leap years\r\n      if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) monthLength[1] = 29;\r\n      // Check the range of the day\r\n      return day > 0 && day <= monthLength[month - 1];\r\n    }\r\n  }\r\n\r\n  generateError() {\r\n    const requiredDateErr: string =\r\n      this.requiredFieldMessage ||\r\n      intl.formatMessage({\r\n        id: \"date.requiredDateError\",\r\n        defaultMessage: \"A date is required.\",\r\n      });\r\n    const validDateErr = intl.formatMessage(\r\n      {\r\n        id: \"date.invalidDate\",\r\n        defaultMessage:\r\n          \"Please enter a valid date in the format {dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} other {yyyy/mm/dd}}.\",\r\n      },\r\n      { dateFormat: this.dateFormat.toLowerCase() }\r\n    );\r\n    if (this.errorMessage) {\r\n      this.displayError = this.errorMessage;\r\n    } else if (this.inputEl.value.length) {\r\n      this.displayError = validDateErr;\r\n    } else if (!this.inputEl.value.length && this.requiredField) {\r\n      this.displayError = requiredDateErr;\r\n    }\r\n  }\r\n\r\n  clearError() {\r\n    this.displayError = \"\";\r\n  }\r\n\r\n  addSlashes(input: string) {\r\n    if (this.dateFormat === \"ISO\" || this.dateFormat === this.dateFormats[\"ISO\"]) {\r\n      return input.substring(0, 4) + \"/\" + input.substring(4, 6) + \"/\" + input.substring(6);\r\n    } else {\r\n      return input.substring(0, 2) + \"/\" + input.substring(2, 4) + \"/\" + input.substring(4);\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.label === \"\") {\r\n      console.error(\r\n        \"You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.\"\r\n      );\r\n    }\r\n    if (this.errorMessage) {\r\n      this.generateError();\r\n    }\r\n\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n\r\n    if (this.value && this.isValidDate(this.value)) {\r\n      // update value passed into calendar so that it opens on the specified date\r\n      this.lastValidValue = this.value;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // convert passed-in starting date from ISO to locale format, update displayed input to proper format\r\n    this.inputEl.value = this.reformatDate(this.dateFormat, this.value);\r\n    this.processInput(true);\r\n  }\r\n\r\n  render() {\r\n    const dateFormat = intl.formatMessage(\r\n      {\r\n        id: \"date.format\",\r\n        defaultMessage: \"{dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} other {yyyy/mm/dd}}\",\r\n      },\r\n      { dateFormat: this.dateFormat.toLowerCase() }\r\n    );\r\n    return (\r\n      <Host\r\n        id={this.uid}\r\n        aria-busy=\"false\"\r\n        class={`${this.displayError ? \"invalid\" : \"\"}`}\r\n        invalid={this.displayError ? \"true\" : null}\r\n      >\r\n        <div\r\n          ref={(d) => (this.dpWrapper = d as HTMLDivElement)}\r\n          class={`wrapper label-${this.labelPosition} ${this.displayError ? \"invalid\" : \"\"}`}\r\n        >\r\n          <div class=\"label-wrapper\">\r\n            {this.labelPosition !== \"none\" && (\r\n              <label\r\n                id={`datepickerLabel-${this.uid}`}\r\n                htmlFor={`date-input-${this.uid}`}\r\n                class=\"label\"\r\n                title={`${this.label} (${dateFormat})`}\r\n              >\r\n                {this.label}\r\n                {this.requiredField && (\r\n                  <span aria-hidden=\"true\" class=\"required\">\r\n                    *\r\n                  </span>\r\n                )}\r\n              </label>\r\n            )}\r\n          </div>\r\n          <div>\r\n            <div class=\"inner-wrapper\">\r\n              <input\r\n                disabled={this.disabled}\r\n                type=\"text\"\r\n                id={`date-input-${this.uid}`}\r\n                class=\"date-input\"\r\n                name=\"date\"\r\n                placeholder={dateFormat}\r\n                onFocus={this.focusHandler.bind(this)}\r\n                onInput={(ev) => this.handleInput(ev)}\r\n                onBlur={(ev) => this.handleBlur(ev)}\r\n                ref={(input) => (this.inputEl = input as HTMLInputElement)}\r\n                aria-describedby={`error-${this.uid}`}\r\n                aria-controls={`popup-${this.uid}`}\r\n                aria-label={this.label}\r\n                aria-required={this.requiredField ? \"true\" : null}\r\n              />\r\n              <priv-datepicker\r\n                disabled={this.disabled}\r\n                date={this.lastValidValue ? new Date(this.lastValidValue) : new Date()}\r\n                parentId={this.uid}\r\n              />\r\n            </div>\r\n            <div id={`error-${this.uid}`} class=\"error\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n              {this.displayError}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}
+{"version":3,"names":["wmDatepickerCss","DatePicker","this","lastCommittedValue","value","parsableEntry","isoEntry","eightDigitsEntry","dateFormats","US","intl","formatMessage","id","defaultMessage","INT","ISO","prototype","handleTabbingOn","dpWrapper","classList","add","handleTabbingOff","remove","handleError","errorMessage","generateError","clearError","processInput","handleInput","ev","target","handleBlur","shouldPreventValidation","preventValidation","isRelatedTarget","focusHandler","handlePopupBlurred","detail","relatedTarget","el","event","CustomEvent","dispatchEvent","getActiveElement","checkForFocusableElInShadow","document","activeElement","handleCellTriggered","dateElement","isoDate","getAttribute","textContent","inputEl","reformatDate","dateFormat","isFirstLoad","leftEmpty","requiredField","test","addSlashes","isValidDate","length","lastValidValue","wmDatepickerNewValidValue","emit","toFormat","date","dateArr","replace","split","padStart","join","input","parts","day","parseInt","month","year","monthLength","requiredDateErr","requiredFieldMessage","validDateErr","toLowerCase","displayError","substring","componentWillLoad","label","console","error","uid","generateId","componentDidLoad","render","_this","h","Host","class","concat","invalid","ref","d","labelPosition","htmlFor","title","disabled","type","name","placeholder","onFocus","bind","onInput","onBlur","Date","parentId"],"sources":["src/components/wm-datepicker/wm-datepicker.scss?tag=wm-datepicker&encapsulation=shadow","src/components/wm-datepicker/wm-datepicker.tsx"],"sourcesContent":[":host,\nwm-datepicker {\n  font-family: inherit;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  @include label;\n\n  .wrapper {\n    position: relative;\n\n    .required {\n      color: $datepicker-required-input;\n    }\n\n    .inner-wrapper {\n      @include displayFlex();\n      align-items: center;\n      height: rem-calc(40);\n      border: 1px solid;\n      border-color: $datepicker-input-border-color;\n      @include border-radius(3px);\n      max-width: 236px; /* input is 200px or smaller, button is 36px */\n      justify-content: space-between;\n      position: relative;\n\n      .date-input {\n        -moz-border-top-left-radius: 3px;\n        -webkit-border-top-left-radius: 3px;\n        border-top-left-radius: 3px;\n        -moz-border-bottom-left-radius: 3px;\n        -webkit-border-bottom-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        border: none;\n        font-size: rem-calc(14);\n        padding: rem-calc(10 15 8);\n        min-width: 0;\n        height: 100%;\n        flex: 1;\n        margin: 0;\n\n        &:disabled {\n          background-color: $input-disabled-bg;\n          color: $input-disabled-color;\n        }\n\n        &:focus {\n          outline: none;\n        }\n      }\n    }\n\n    &.invalid {\n      .inner-wrapper {\n        @include invalidBorder;\n      }\n\n      .error {\n        @include errorMessage;\n        margin-bottom: 4px;\n        top: 100%;\n        left: 0;\n      }\n    }\n\n    &.focus {\n      .inner-wrapper {\n        @include field-focus;\n      }\n    }\n  }\n\n  .user-is-tabbing {\n    .toggle:focus {\n      &:not(:active) {\n        border: none;\n        z-index: 11;\n      }\n    }\n  }\n}\n","import { h, Component, Host, Element, Event, EventEmitter, Prop, Listen, Watch, State } from \"@stencil/core\";\nimport { generateId, checkForFocusableElInShadow, intl, isRelatedTarget } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-datepicker\",\n  styleUrl: \"wm-datepicker.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class DatePicker {\n  @Element() el!: HTMLWmDatepickerElement;\n  private dpWrapper!: HTMLDivElement;\n  private inputEl!: HTMLInputElement;\n\n  @Prop({ mutable: true }) value?: string = \"\";\n  @Prop() disabled: boolean = false;\n  @Prop({ mutable: true }) dateFormat: string = \"US\";\n  @Prop({ reflect: true }) errorMessage: string = \"\";\n  @Prop({ mutable: true }) labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop({ mutable: true }) label: string = \"\";\n  @Prop() requiredField: boolean = false;\n  @Prop() requiredFieldMessage?: string;\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\n  @State() displayError: string = \"\";\n  @Event() wmDatepickerNewValidValue!: EventEmitter;\n\n  // we only want to fire the \"change\" event if the value has actually changed (that's\n  // how native elements do it), so we need to keep in state the last committed value.\n  private lastCommittedValue?: string = this.value;\n  private lastValidValue?: string;\n  private uid!: string;\n\n  // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits\n  private parsableEntry = /^(\\d{1}|\\d{2}|\\d{4})[\\-\\.\\/]\\d{1,2}[\\-\\.\\/](\\d{1}|\\d{2}|\\d{4})$/;\n  private isoEntry = /^\\d\\d\\d\\d[-]\\d\\d[-]\\d\\d$/;\n  private eightDigitsEntry = /^\\d{8}$/;\n\n  dateFormats: any = {\n    US: intl.formatMessage({\n      id: \"date.formatUS\",\n      defaultMessage: \"mm/dd/yyyy\",\n    }),\n    INT: intl.formatMessage({\n      id: \"date.formatINT\",\n      defaultMessage: \"dd/mm/yyyy\",\n    }),\n    ISO: intl.formatMessage({\n      id: \"date.formatISO\",\n      defaultMessage: \"yyyy/mm/dd\",\n    }),\n  };\n\n  @Listen(\"keydown\")\n  handleTabbingOn() {\n    this.dpWrapper && this.dpWrapper.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\")\n  handleTabbingOff() {\n    this.dpWrapper && this.dpWrapper.classList.remove(\"user-is-tabbing\");\n  }\n\n  @Watch(\"errorMessage\")\n  handleError() {\n    if (this.errorMessage) {\n      this.generateError();\n    } else {\n      this.clearError();\n      this.processInput();\n    }\n  }\n\n  handleInput(ev: Event) {\n    // keep component's value in sync with input's value\n    // validation only happens on blur and initial load,\n    // but component's value should reflect user input at any time\n    this.value = (ev.target! as HTMLInputElement).value; // same as this.inputEl.value\n  }\n\n  // this is input blur, not component blur\n  handleBlur(ev: FocusEvent) {\n    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)\n    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);\n    if (!shouldPreventValidation) {\n      this.processInput();\n    }\n    this.dpWrapper.classList.remove(\"focus\");\n  }\n\n  // this is input focus, not component focus\n  focusHandler() {\n    this.dpWrapper.classList.add(\"focus\");\n  }\n\n  @Listen(\"popupBlurred\")\n  handlePopupBlurred(ev: CustomEvent) {\n    // emit blur event when leaving component from priv-datepicker\n    if (ev.detail.relatedTarget !== this.el) {\n      const event = new CustomEvent(\"blur\");\n      // @ts-ignore\n      event.relatedTarget = ev.detail.relatedTarget;\n      this.el.dispatchEvent(event);\n    }\n  }\n\n  getActiveElement() {\n    return checkForFocusableElInShadow(document.activeElement as HTMLElement);\n  }\n\n  @Listen(\"cellTriggered\")\n  handleCellTriggered(ev: CustomEvent) {\n    let dateElement = ev.detail as HTMLTableCellElement;\n    let isoDate =\n      dateElement.getAttribute(\"data-year\")! +\n      \"-\" +\n      dateElement.getAttribute(\"data-month\")! +\n      \"-\" +\n      dateElement.textContent!;\n    this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);\n    this.processInput();\n\n    // Create event to trigger onInput function on host element, to get the updated value\n    // Because there are more ways to input than just typing, we are firing this event upon cellTriggered\n    const event = new CustomEvent(\"input\");\n    this.el.dispatchEvent(event);\n  }\n\n  processInput(isFirstLoad?: boolean) {\n    // The required field error should not display on first load\n    const leftEmpty = !isFirstLoad && this.requiredField;\n\n    let isoDate = this.inputEl.value;\n\n    //If input is 8 digits, add slashes as a courtesy and process anyway\n    if (this.eightDigitsEntry.test(this.inputEl.value)) {\n      this.inputEl.value = this.addSlashes(this.inputEl.value);\n    }\n\n    // if we don't have 2 separators we can't reformat so we'll return what was passed in\n    if (this.parsableEntry.test(this.inputEl.value)) {\n      //ISO format for submission\n      isoDate = this.reformatDate(\"ISO\", this.inputEl.value);\n\n      //User-specific format for display\n      this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);\n\n      if (this.isValidDate(isoDate)) {\n        //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.\n        if (this.errorMessage) {\n          this.generateError();\n        } else {\n          this.clearError();\n        }\n        //Prevents error from appearing if input field is empty\n      } else if (this.inputEl.value.length) {\n        this.generateError();\n      }\n    } else if (this.inputEl.value.length || leftEmpty || this.errorMessage) {\n      this.generateError();\n    } else if (!this.inputEl.value.length && !leftEmpty) {\n      this.clearError();\n    }\n\n    // value is set to the reformated date or whatever the user passed\n    this.value = isoDate;\n\n    if (isoDate !== this.lastCommittedValue) {\n      const event = new CustomEvent(\"change\");\n      this.el.dispatchEvent(event);\n      this.lastCommittedValue = this.value;\n    }\n\n    // event must fire after we set this.value\n    // only fire if new valid value is different from the previous one\n    if (this.isValidDate(isoDate) && isoDate !== this.lastValidValue) {\n      this.wmDatepickerNewValidValue.emit();\n      //Update prop passed into calendar to valid date\n      this.lastValidValue = isoDate;\n    }\n  }\n\n  // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.\n  reformatDate(toFormat: string, date?: string): string {\n    if (!date) {\n      return \"\";\n    } else if (!this.parsableEntry.test(date)) {\n      return date;\n    } else {\n      let dateArr = date.replace(/[\\-\\.]/gi, \"/\").split(\"/\");\n      switch (toFormat) {\n        case \"US\":\n        case this.dateFormats[\"US\"]:\n          return dateArr[1].padStart(2, \"0\") + \"/\" + dateArr[2].padStart(2, \"0\") + \"/\" + dateArr[0].padStart(4, \"20\");\n        case \"INT\":\n        case this.dateFormats[\"INT\"]:\n          return dateArr[2].padStart(2, \"0\") + \"/\" + dateArr[1].padStart(2, \"0\") + \"/\" + dateArr[0].padStart(4, \"20\");\n        case \"ISO\":\n        case this.dateFormats[\"ISO\"]:\n          if (this.dateFormat === \"US\" || this.dateFormat === this.dateFormats[\"US\"]) {\n            return dateArr[2].padStart(4, \"20\") + \"-\" + dateArr[0].padStart(2, \"0\") + \"-\" + dateArr[1].padStart(2, \"0\");\n          } else if (this.dateFormat === \"INT\" || this.dateFormat === this.dateFormats[\"INT\"]) {\n            return dateArr[2].padStart(4, \"20\") + \"-\" + dateArr[1].padStart(2, \"0\") + \"-\" + dateArr[0].padStart(2, \"0\");\n          } else if (this.dateFormat === \"ISO\" || this.dateFormat === this.dateFormats[\"ISO\"]) {\n            return dateArr[0].padStart(4, \"20\") + \"-\" + dateArr[1].padStart(2, \"0\") + \"-\" + dateArr[2].padStart(2, \"0\");\n          }\n        default:\n          return dateArr.join(\"/\");\n      }\n    }\n  }\n\n  isValidDate(input?: string) {\n    // if it's not ISO it's not valid\n    if (!input || !this.isoEntry.test(input)) {\n      return false;\n    } else {\n      // Parse the ISO date parts to integers\n      let parts = input.split(\"-\");\n      let day = parseInt(parts[2], 10);\n      let month = parseInt(parts[1], 10);\n      let year = parseInt(parts[0], 10);\n      // Check the ranges of month and year\n      if (year < 1000 || year > 3000 || month == 0 || month > 12) return false;\n      let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n      // Adjust for leap years\n      if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) monthLength[1] = 29;\n      // Check the range of the day\n      return day > 0 && day <= monthLength[month - 1];\n    }\n  }\n\n  generateError() {\n    const requiredDateErr: string =\n      this.requiredFieldMessage ||\n      intl.formatMessage({\n        id: \"date.requiredDateError\",\n        defaultMessage: \"A date is required.\",\n      });\n    const validDateErr = intl.formatMessage(\n      {\n        id: \"date.invalidDate\",\n        defaultMessage:\n          \"Please enter a valid date in the format {dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} other {yyyy/mm/dd}}.\",\n      },\n      { dateFormat: this.dateFormat.toLowerCase() }\n    );\n    if (this.errorMessage) {\n      this.displayError = this.errorMessage;\n    } else if (this.inputEl.value.length) {\n      this.displayError = validDateErr;\n    } else if (!this.inputEl.value.length && this.requiredField) {\n      this.displayError = requiredDateErr;\n    }\n  }\n\n  clearError() {\n    this.displayError = \"\";\n  }\n\n  addSlashes(input: string) {\n    if (this.dateFormat === \"ISO\" || this.dateFormat === this.dateFormats[\"ISO\"]) {\n      return input.substring(0, 4) + \"/\" + input.substring(4, 6) + \"/\" + input.substring(6);\n    } else {\n      return input.substring(0, 2) + \"/\" + input.substring(2, 4) + \"/\" + input.substring(4);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.label === \"\") {\n      console.error(\n        \"You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.\"\n      );\n    }\n    if (this.errorMessage) {\n      this.generateError();\n    }\n\n    this.uid = this.el.id ? this.el.id : generateId();\n\n    if (this.value && this.isValidDate(this.value)) {\n      // update value passed into calendar so that it opens on the specified date\n      this.lastValidValue = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    // convert passed-in starting date from ISO to locale format, update displayed input to proper format\n    this.inputEl.value = this.reformatDate(this.dateFormat, this.value);\n    this.processInput(true);\n  }\n\n  render() {\n    const dateFormat = intl.formatMessage(\n      {\n        id: \"date.format\",\n        defaultMessage: \"{dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} other {yyyy/mm/dd}}\",\n      },\n      { dateFormat: this.dateFormat.toLowerCase() }\n    );\n    return (\n      <Host\n        id={this.uid}\n        aria-busy=\"false\"\n        class={`${this.displayError ? \"invalid\" : \"\"}`}\n        invalid={this.displayError ? \"true\" : null}\n      >\n        <div\n          ref={(d) => (this.dpWrapper = d as HTMLDivElement)}\n          class={`wrapper label-${this.labelPosition} ${this.displayError ? \"invalid\" : \"\"}`}\n        >\n          <div class=\"label-wrapper\">\n            {this.labelPosition !== \"none\" && (\n              <label\n                id={`datepickerLabel-${this.uid}`}\n                htmlFor={`date-input-${this.uid}`}\n                class=\"label\"\n                title={`${this.label} (${dateFormat})`}\n              >\n                {this.label}\n                {this.requiredField && (\n                  <span aria-hidden=\"true\" class=\"required\">\n                    *\n                  </span>\n                )}\n              </label>\n            )}\n          </div>\n          <div>\n            <div class=\"inner-wrapper\">\n              <input\n                disabled={this.disabled}\n                type=\"text\"\n                id={`date-input-${this.uid}`}\n                class=\"date-input\"\n                name=\"date\"\n                placeholder={dateFormat}\n                onFocus={this.focusHandler.bind(this)}\n                onInput={(ev) => this.handleInput(ev)}\n                onBlur={(ev) => this.handleBlur(ev)}\n                ref={(input) => (this.inputEl = input as HTMLInputElement)}\n                aria-describedby={`error-${this.uid}`}\n                aria-controls={`popup-${this.uid}`}\n                aria-label={this.label}\n                aria-required={this.requiredField ? \"true\" : null}\n              />\n              <priv-datepicker\n                disabled={this.disabled}\n                date={this.lastValidValue ? new Date(this.lastValidValue) : new Date()}\n                parentId={this.uid}\n              />\n            </div>\n            <div id={`error-${this.uid}`} class=\"error\" aria-live=\"assertive\" aria-atomic=\"true\">\n              {this.displayError}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/wm-file-list.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["wmFileListCss","FileList","Object","defineProperty","prototype","this","files","JSON","parse","handleFileDownloaded","ev","wmFileDownload","emit","detail","handleFilePreviewed","wmFilePreview","handleFileDeleted","wmFileDelete","renderFile","file","fileActions","undefined","h","stringify","showInfo","render","_this","role","class","fileList","map"],"sources":["src/components/wm-file-list/wm-file-list.scss?tag=wm-file-list&encapsulation=shadow","src/components/wm-file-list/wm-file-list.tsx"],"sourcesContent":[":host,\r\nwm-file-list {\r\n  display: block;\r\n}\r\n\r\n.list-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: rem-calc(8);\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\r\nimport { UploadedFile } from \"../../global/interfaces\";\r\n\r\n@Component({\r\n  tag: \"wm-file-list\",\r\n  styleUrl: \"wm-file-list.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class FileList {\r\n  @Element() el!: HTMLWmFileListElement;\r\n  @Prop() files?: string;\r\n  @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\r\n\r\n  @Event() wmFileDelete!: EventEmitter<string>;\r\n  @Event() wmFileDownload!: EventEmitter<string>;\r\n  @Event() wmFilePreview!: EventEmitter<string>;\r\n\r\n  get fileList(): [UploadedFile] {\r\n    return this.files ? JSON.parse(this.files) : [];\r\n  }\r\n\r\n  @Listen(\"wmIntFileDownloaded\")\r\n  handleFileDownloaded(ev: CustomEvent) {\r\n    this.wmFileDownload.emit(ev.detail);\r\n  }\r\n\r\n  @Listen(\"wmIntFilePreviewed\")\r\n  handleFilePreviewed(ev: CustomEvent) {\r\n    this.wmFilePreview.emit(ev.detail);\r\n  }\r\n\r\n  @Listen(\"wmIntFileDeleted\")\r\n  handleFileDeleted(ev: CustomEvent) {\r\n    this.wmFileDelete.emit(ev.detail);\r\n  }\r\n\r\n  renderFile(file: UploadedFile) {\r\n    // file list does not allow for default file actions\r\n    // if none are passed, display no buttons\r\n    if (file.fileActions === undefined) {\r\n      file.fileActions = \"\";\r\n    }\r\n    return <wm-file file={JSON.stringify(file)} show-info={this.showInfo}></wm-file>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"list\" class=\"list-wrapper\">\r\n        {this.fileList.map((file: UploadedFile) => this.renderFile(file))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0FAAA,IAAMA,cAAgB,8I,ICQTC,SAAQ,W,+OAG0B,M,CAM7CC,OAAAC,eAAIF,EAAAG,UAAA,WAAQ,C,IAAZ,WACE,OAAOC,KAAKC,MAAQC,KAAKC,MAAMH,KAAKC,OAAS,E,uCAI/CL,EAAAG,UAAAK,qBAAA,SAAqBC,GACnBL,KAAKM,eAAeC,KAAKF,EAAGG,O,EAI9BZ,EAAAG,UAAAU,oBAAA,SAAoBJ,GAClBL,KAAKU,cAAcH,KAAKF,EAAGG,O,EAI7BZ,EAAAG,UAAAY,kBAAA,SAAkBN,GAChBL,KAAKY,aAAaL,KAAKF,EAAGG,O,EAG5BZ,EAAAG,UAAAc,WAAA,SAAWC,GAGT,GAAIA,EAAKC,cAAgBC,UAAW,CAClCF,EAAKC,YAAc,E,CAErB,OAAOE,EAAA,WAASH,KAAMZ,KAAKgB,UAAUJ,GAAK,YAAad,KAAKmB,U,EAG9DvB,EAAAG,UAAAqB,OAAA,eAAAC,EAAArB,KACE,OACEiB,EAAA,OAAKK,KAAK,OAAOC,MAAM,gBACpBvB,KAAKwB,SAASC,KAAI,SAACX,GAAuB,OAAAO,EAAKR,WAAWC,EAAhB,I,2OAxC9B,G"}
+{"version":3,"names":["wmFileListCss","FileList","Object","defineProperty","prototype","this","files","JSON","parse","handleFileDownloaded","ev","wmFileDownload","emit","detail","handleFilePreviewed","wmFilePreview","handleFileDeleted","wmFileDelete","renderFile","file","fileActions","undefined","h","stringify","showInfo","render","_this","role","class","fileList","map"],"sources":["src/components/wm-file-list/wm-file-list.scss?tag=wm-file-list&encapsulation=shadow","src/components/wm-file-list/wm-file-list.tsx"],"sourcesContent":[":host,\nwm-file-list {\n  display: block;\n}\n\n.list-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: rem-calc(8);\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { UploadedFile } from \"../../global/interfaces\";\n\n@Component({\n  tag: \"wm-file-list\",\n  styleUrl: \"wm-file-list.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class FileList {\n  @Element() el!: HTMLWmFileListElement;\n  @Prop() files?: string;\n  @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\n\n  @Event() wmFileDelete!: EventEmitter<string>;\n  @Event() wmFileDownload!: EventEmitter<string>;\n  @Event() wmFilePreview!: EventEmitter<string>;\n\n  get fileList(): [UploadedFile] {\n    return this.files ? JSON.parse(this.files) : [];\n  }\n\n  @Listen(\"wmIntFileDownloaded\")\n  handleFileDownloaded(ev: CustomEvent) {\n    this.wmFileDownload.emit(ev.detail);\n  }\n\n  @Listen(\"wmIntFilePreviewed\")\n  handleFilePreviewed(ev: CustomEvent) {\n    this.wmFilePreview.emit(ev.detail);\n  }\n\n  @Listen(\"wmIntFileDeleted\")\n  handleFileDeleted(ev: CustomEvent) {\n    this.wmFileDelete.emit(ev.detail);\n  }\n\n  renderFile(file: UploadedFile) {\n    // file list does not allow for default file actions\n    // if none are passed, display no buttons\n    if (file.fileActions === undefined) {\n      file.fileActions = \"\";\n    }\n    return <wm-file file={JSON.stringify(file)} show-info={this.showInfo}></wm-file>;\n  }\n\n  render() {\n    return (\n      <div role=\"list\" class=\"list-wrapper\">\n        {this.fileList.map((file: UploadedFile) => this.renderFile(file))}\n      </div>\n    );\n  }\n}\n"],"mappings":"0FAAA,IAAMA,cAAgB,8I,ICQTC,SAAQ,W,+OAG0B,M,CAM7CC,OAAAC,eAAIF,EAAAG,UAAA,WAAQ,C,IAAZ,WACE,OAAOC,KAAKC,MAAQC,KAAKC,MAAMH,KAAKC,OAAS,E,uCAI/CL,EAAAG,UAAAK,qBAAA,SAAqBC,GACnBL,KAAKM,eAAeC,KAAKF,EAAGG,O,EAI9BZ,EAAAG,UAAAU,oBAAA,SAAoBJ,GAClBL,KAAKU,cAAcH,KAAKF,EAAGG,O,EAI7BZ,EAAAG,UAAAY,kBAAA,SAAkBN,GAChBL,KAAKY,aAAaL,KAAKF,EAAGG,O,EAG5BZ,EAAAG,UAAAc,WAAA,SAAWC,GAGT,GAAIA,EAAKC,cAAgBC,UAAW,CAClCF,EAAKC,YAAc,E,CAErB,OAAOE,EAAA,WAASH,KAAMZ,KAAKgB,UAAUJ,GAAK,YAAad,KAAKmB,U,EAG9DvB,EAAAG,UAAAqB,OAAA,eAAAC,EAAArB,KACE,OACEiB,EAAA,OAAKK,KAAK,OAAOC,MAAM,gBACpBvB,KAAKwB,SAASC,KAAI,SAACX,GAAuB,OAAAO,EAAKR,WAAWC,EAAhB,I,2OAxC9B,G"}

package/dist/esm-es5/wm-file.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{d as debounce,i as intl,s as showTooltip,j as hideTooltip}from"./functions-bb1309d0.js";var wmFileCss=':host,wm-file{display:block;width:100%}.file-wrapper{font-size:0.875rem;position:relative;list-style:none}.file-wrapper .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;height:3.5rem;padding:0 1.25rem;position:relative;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.file-wrapper .file .filename{white-space:nowrap}.file-wrapper .file .left-group{overflow:hidden}.file-wrapper .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem;gap:1rem}.file-wrapper .file .right-group.condensed{padding-left:2.5rem}.file-wrapper .file .right-group .file-controls{display:-ms-flexbox;display:flex;gap:1rem}.file-wrapper .file .right-group .file-info{white-space:nowrap}.file-wrapper .file.--error{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}.file-wrapper.checked .file: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:"\\f133";position:absolute;right:-44px;color:#088000;font-size:28px;line-height:1}.name-wrapper{overflow:hidden}.progress{position:absolute;left:0;top:0;right:0;height:8px}.error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.ch-measure{width:1ch !important;visibility:hidden}';var File=function(){function e(e){var t=this;registerInstance(this,e);this.wmIntFilePreviewed=createEvent(this,"wmIntFilePreviewed",7);this.wmIntFileDownloaded=createEvent(this,"wmIntFileDownloaded",7);this.wmIntFileDeleted=createEvent(this,"wmIntFileDeleted",7);this.wmFileClearErrorClicked=createEvent(this,"wmFileClearErrorClicked",7);this.isWithinLegacyUploader=false;this.debouncedResize=debounce((function(){t.isCondensed=t.el.clientWidth<500;forceUpdate(t.el)}),50);this.file=undefined;this.showInfo="time";this.errorMessage=undefined;this.isCondensed=false}Object.defineProperty(e.prototype,"fileData",{get:function(){var e=this.file?JSON.parse(this.file):null;if(e&&e.progress&&typeof e.progress==="string"&&e.progress.match(/^[0-9]+$/)){e.progress=parseInt(e.progress.toString())}return e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"isUploading",{get:function(){return this.fileData&&this.fileData.hasOwnProperty("progress")&&this.fileData.progress<100},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"singleCharacterWidth",{get:function(){return this.el.shadowRoot.querySelector(".ch-measure").clientWidth},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"previewButtonTooltip",{get:function(){return intl.formatMessage({id:"file.previewButtonTooltip",defaultMessage:"Preview",description:"Tooltip of a button that triggers a file to be previewed"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"downloadButtonTooltip",{get:function(){return intl.formatMessage({id:"file.downloadButtonTooltip",defaultMessage:"Download",description:"Tooltip of a button that triggers a file to be downloaded"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"deleteButtonTooltip",{get:function(){return intl.formatMessage({id:"file.deleteButtonTooltip",defaultMessage:"Delete",description:"Tooltip of a button that triggers a file to be deleted"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"previewActionMessage",{get:function(){return intl.formatMessage({id:"file.previewAction",defaultMessage:"Preview File",description:"Label of a button that triggers a file to be previewed"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"downloadActionMessage",{get:function(){return intl.formatMessage({id:"file.downloadAction",defaultMessage:"Download File",description:"Label of a button that triggers a file to be downloaded"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"deleteActionMessage",{get:function(){return intl.formatMessage({id:"file.deleteAction",defaultMessage:"Delete File",description:"Label of a button that triggers a file to be delete"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"actionMenuLabel",{get:function(){return intl.formatMessage({id:"file.actionMenuLabel",defaultMessage:"Actions",description:"Label of a button that opens a menu of file actions"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"clearButtonText",{get:function(){return intl.formatMessage({id:"file.clearErrorText",defaultMessage:"Clear",description:"Text for a button used to clear an error"})},enumerable:false,configurable:true});e.prototype.generateClearButtonLabel=function(e){return intl.formatMessage({id:"file.clearErrorLabel",defaultMessage:"Clear {fileName} error",description:"Label for a button used to clear an error, including filename"},{fileName:e})};e.prototype.componentWillLoad=function(){var e=this;var t=this.el.getRootNode().host;if(t&&t.nodeName==="WM-UPLOADER"){if(t.type||t.uploaderType){this.isWithinLegacyUploader=true}}var i=new ResizeObserver((function(){return e.debouncedResize()}));i.observe(this.el)};e.prototype.componentDidRender=function(){this.truncateFileName(this.el.shadowRoot.querySelector(".file"))};e.prototype.previewFile=function(e){this.wmIntFilePreviewed.emit(e.id)};e.prototype.downloadFile=function(e){this.wmIntFileDownloaded.emit(e.id)};e.prototype.deleteFile=function(e){this.wmIntFileDeleted.emit(e.id)};e.prototype.truncateFileName=function(e){var t=e.querySelector(".left-group");var i=t.getBoundingClientRect().left;var o=e.querySelector(".right-group");var r=o?o.getBoundingClientRect().left:e.getBoundingClientRect().right-20;var n=e.querySelector(".filename");var a=r-i;var l=n.dataset.filename;var s=a>l.length*this.singleCharacterWidth;if(!s){var d=l.slice(l.lastIndexOf("."));var c=Math.floor(a/this.singleCharacterWidth);var p=3+3+d.length;var f=Math.max(2,c-p);var u=l.slice(0,f);var h=l.slice(l.indexOf(d)-3,l.length);l="".concat(u.trim(),"...").concat(h.trim())}n.textContent=l};e.prototype.handleFilenameMouseEnter=function(e,t){if(e.target.textContent.includes("...")){showTooltip("bottom",e.target,t)}};e.prototype.renderFileName=function(e,t){var i=this;return h("div",{class:"left-group"},h("div",{class:"name-wrapper"},h("span",{class:"sr-only"},e),h("span",{"aria-hidden":"true",class:"filename","data-filename":e,onMouseEnter:function(t){return i.handleFilenameMouseEnter(t,e)},onMouseLeave:function(){return hideTooltip()}}),t&&h("span",{class:"sr-only"},"uploading"),h("div",{class:"ch-measure"})))};e.prototype.renderFileInfo=function(e,t){var i="";if(t==="time"&&e.lastUpdated){i=e.lastUpdated}else if(t==="size"&&e.size){i=e.size}return h("div",{class:"file-info"},i)};e.prototype.renderActionMenu=function(e){var t=this;var i="download delete";var o=e.fileActions||i;var r=h("wm-menuitem",{icon:"f208",onClick:function(){return t.previewFile(e)}},this.previewActionMessage);var n=h("wm-menuitem",{icon:"f1da",onClick:function(){return t.downloadFile(e)}},this.downloadActionMessage);var a=h("wm-menuitem",{icon:"f1c0",onClick:function(){return t.deleteFile(e)}},this.deleteActionMessage);return h("wm-action-menu",{"action-menu-type":"icon",tooltip:this.actionMenuLabel,"tooltip-position":"bottom","label-for-identical-buttons":"".concat(e.name," ").concat(this.actionMenuLabel)},o.includes("preview")&&r,o.includes("download")&&n,o.includes("delete")&&a)};e.prototype.renderFileActionButtons=function(e){var t=this;var i="download delete";var o=e.fileActions||i;var r=h("wm-button",{class:"preview-button","button-type":"icononly",tooltip:this.previewButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":"preview ".concat(e.name),icon:"f208",onClick:function(){return t.previewFile(e)}});var n=h("wm-button",{class:"download-button","button-type":"icononly",tooltip:this.downloadButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":"download ".concat(e.name),icon:"f1da",onClick:function(){return t.downloadFile(e)}});var a=h("wm-button",{class:"delete-button","button-type":"icononly",tooltip:this.deleteButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":"delete ".concat(e.name),icon:"f1c0",onClick:function(){return t.deleteFile(e)}});return h("div",{class:"file-controls"},o.includes("preview")&&r,o.includes("download")&&n,o.includes("delete")&&a)};e.prototype.renderFileInProgress=function(e){var t=e.type?"".concat(e.name,".").concat(e.type):e.name;return h("div",{class:"file-wrapper"},h("div",{class:"file --progress"},h("div",{class:"progress",style:{background:"linear-gradient(to right, rgba(67, 126, 142, 1) ".concat(e.progress,"%, transparent ").concat(e.progress,"%)")}}),this.renderFileName(t,this.isUploading)))};e.prototype.renderFileControls=function(e){var t=e.fileActions&&e.fileActions.split(" ").length===1;var i=this.isCondensed&&!t;return i?this.renderActionMenu(e):this.renderFileActionButtons(e)};e.prototype.renderFile=function(e){var t=this;var i=e.type?"".concat(e.name,".").concat(e.type):e.name;var o=!this.isWithinLegacyUploader&&e.progress===100;return h("div",{class:"file-wrapper ".concat(o?"checked":"")},h("div",{class:"file ".concat(this.errorMessage?"--error":"")},this.renderFileName(i,this.isUploading),!this.errorMessage&&h("div",{class:"right-group ".concat(this.isCondensed?"condensed":"")},this.showInfo!=="none"&&this.renderFileInfo(e,this.showInfo),e.fileActions!==""&&this.renderFileControls(e)),this.errorMessage&&h("wm-button",{"permanently-delete":true,"button-type":"textonly","label-for-identical-buttons":this.generateClearButtonLabel(e.name),onClick:function(){return t.wmFileClearErrorClicked.emit({name:e.name})}},this.clearButtonText)),this.errorMessage&&h("div",{class:"error-message"},this.errorMessage))};e.prototype.render=function(){return h(Host,{role:"listitem"},this.isUploading?this.renderFileInProgress(this.fileData):this.renderFile(this.fileData))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();File.style=wmFileCss;export{File as wm_file};
+import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{d as debounce,i as intl,s as showTooltip,j as hideTooltip}from"./functions-dc9964aa.js";var wmFileCss=':host,wm-file{display:block;width:100%}.file-wrapper{font-size:0.875rem;position:relative;list-style:none}.file-wrapper .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;height:3.5rem;padding:0 1.25rem;position:relative;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.file-wrapper .file .filename{white-space:nowrap}.file-wrapper .file .left-group{overflow:hidden}.file-wrapper .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem;gap:1rem}.file-wrapper .file .right-group.condensed{padding-left:2.5rem}.file-wrapper .file .right-group .file-controls{display:-ms-flexbox;display:flex;gap:1rem}.file-wrapper .file .right-group .file-info{white-space:nowrap}.file-wrapper .file.--error{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}.file-wrapper.checked .file: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:"\\f133";position:absolute;right:-44px;color:#088000;font-size:28px;line-height:1}.name-wrapper{overflow:hidden}.progress{position:absolute;left:0;top:0;right:0;height:8px}.error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.ch-measure{width:1ch !important;visibility:hidden}';var File=function(){function e(e){var t=this;registerInstance(this,e);this.wmIntFilePreviewed=createEvent(this,"wmIntFilePreviewed",7);this.wmIntFileDownloaded=createEvent(this,"wmIntFileDownloaded",7);this.wmIntFileDeleted=createEvent(this,"wmIntFileDeleted",7);this.wmFileClearErrorClicked=createEvent(this,"wmFileClearErrorClicked",7);this.isWithinLegacyUploader=false;this.debouncedResize=debounce((function(){t.isCondensed=t.el.clientWidth<500;forceUpdate(t.el)}),50);this.file=undefined;this.showInfo="time";this.errorMessage=undefined;this.isCondensed=false}Object.defineProperty(e.prototype,"fileData",{get:function(){var e=this.file?JSON.parse(this.file):null;if(e&&e.progress&&typeof e.progress==="string"&&e.progress.match(/^[0-9]+$/)){e.progress=parseInt(e.progress.toString())}return e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"isUploading",{get:function(){return this.fileData&&this.fileData.hasOwnProperty("progress")&&this.fileData.progress<100},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"singleCharacterWidth",{get:function(){return this.el.shadowRoot.querySelector(".ch-measure").clientWidth},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"previewButtonTooltip",{get:function(){return intl.formatMessage({id:"file.previewButtonTooltip",defaultMessage:"Preview",description:"Tooltip of a button that triggers a file to be previewed"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"downloadButtonTooltip",{get:function(){return intl.formatMessage({id:"file.downloadButtonTooltip",defaultMessage:"Download",description:"Tooltip of a button that triggers a file to be downloaded"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"deleteButtonTooltip",{get:function(){return intl.formatMessage({id:"file.deleteButtonTooltip",defaultMessage:"Delete",description:"Tooltip of a button that triggers a file to be deleted"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"previewActionMessage",{get:function(){return intl.formatMessage({id:"file.previewAction",defaultMessage:"Preview File",description:"Label of a button that triggers a file to be previewed"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"downloadActionMessage",{get:function(){return intl.formatMessage({id:"file.downloadAction",defaultMessage:"Download File",description:"Label of a button that triggers a file to be downloaded"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"deleteActionMessage",{get:function(){return intl.formatMessage({id:"file.deleteAction",defaultMessage:"Delete File",description:"Label of a button that triggers a file to be delete"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"actionMenuLabel",{get:function(){return intl.formatMessage({id:"file.actionMenuLabel",defaultMessage:"Actions",description:"Label of a button that opens a menu of file actions"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"clearButtonText",{get:function(){return intl.formatMessage({id:"file.clearErrorText",defaultMessage:"Clear",description:"Text for a button used to clear an error"})},enumerable:false,configurable:true});e.prototype.generateClearButtonLabel=function(e){return intl.formatMessage({id:"file.clearErrorLabel",defaultMessage:"Clear {fileName} error",description:"Label for a button used to clear an error, including filename"},{fileName:e})};e.prototype.componentWillLoad=function(){var e=this;var t=this.el.getRootNode().host;if(t&&t.nodeName==="WM-UPLOADER"){if(t.type||t.uploaderType){this.isWithinLegacyUploader=true}}var i=new ResizeObserver((function(){return e.debouncedResize()}));i.observe(this.el)};e.prototype.componentDidRender=function(){this.truncateFileName(this.el.shadowRoot.querySelector(".file"))};e.prototype.previewFile=function(e){this.wmIntFilePreviewed.emit(e.id)};e.prototype.downloadFile=function(e){this.wmIntFileDownloaded.emit(e.id)};e.prototype.deleteFile=function(e){this.wmIntFileDeleted.emit(e.id)};e.prototype.truncateFileName=function(e){var t=e.querySelector(".left-group");var i=t.getBoundingClientRect().left;var o=e.querySelector(".right-group");var r=o?o.getBoundingClientRect().left:e.getBoundingClientRect().right-20;var n=e.querySelector(".filename");var a=r-i;var l=n.dataset.filename;var s=a>l.length*this.singleCharacterWidth;if(!s){var d=l.slice(l.lastIndexOf("."));var c=Math.floor(a/this.singleCharacterWidth);var p=3+3+d.length;var f=Math.max(2,c-p);var u=l.slice(0,f);var h=l.slice(l.indexOf(d)-3,l.length);l="".concat(u.trim(),"...").concat(h.trim())}n.textContent=l};e.prototype.handleFilenameMouseEnter=function(e,t){if(e.target.textContent.includes("...")){showTooltip("bottom",e.target,t)}};e.prototype.renderFileName=function(e,t){var i=this;return h("div",{class:"left-group"},h("div",{class:"name-wrapper"},h("span",{class:"sr-only"},e),h("span",{"aria-hidden":"true",class:"filename","data-filename":e,onMouseEnter:function(t){return i.handleFilenameMouseEnter(t,e)},onMouseLeave:function(){return hideTooltip()}}),t&&h("span",{class:"sr-only"},"uploading"),h("div",{class:"ch-measure"})))};e.prototype.renderFileInfo=function(e,t){var i="";if(t==="time"&&e.lastUpdated){i=e.lastUpdated}else if(t==="size"&&e.size){i=e.size}return h("div",{class:"file-info"},i)};e.prototype.renderActionMenu=function(e){var t=this;var i="download delete";var o=e.fileActions||i;var r=h("wm-menuitem",{icon:"f208",onClick:function(){return t.previewFile(e)}},this.previewActionMessage);var n=h("wm-menuitem",{icon:"f1da",onClick:function(){return t.downloadFile(e)}},this.downloadActionMessage);var a=h("wm-menuitem",{icon:"f1c0",onClick:function(){return t.deleteFile(e)}},this.deleteActionMessage);return h("wm-action-menu",{"action-menu-type":"icon",tooltip:this.actionMenuLabel,"tooltip-position":"bottom","label-for-identical-buttons":"".concat(e.name," ").concat(this.actionMenuLabel)},o.includes("preview")&&r,o.includes("download")&&n,o.includes("delete")&&a)};e.prototype.renderFileActionButtons=function(e){var t=this;var i="download delete";var o=e.fileActions||i;var r=h("wm-button",{class:"preview-button","button-type":"icononly",tooltip:this.previewButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":"preview ".concat(e.name),icon:"f208",onClick:function(){return t.previewFile(e)}});var n=h("wm-button",{class:"download-button","button-type":"icononly",tooltip:this.downloadButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":"download ".concat(e.name),icon:"f1da",onClick:function(){return t.downloadFile(e)}});var a=h("wm-button",{class:"delete-button","button-type":"icononly",tooltip:this.deleteButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":"delete ".concat(e.name),icon:"f1c0",onClick:function(){return t.deleteFile(e)}});return h("div",{class:"file-controls"},o.includes("preview")&&r,o.includes("download")&&n,o.includes("delete")&&a)};e.prototype.renderFileInProgress=function(e){var t=e.type?"".concat(e.name,".").concat(e.type):e.name;return h("div",{class:"file-wrapper"},h("div",{class:"file --progress"},h("div",{class:"progress",style:{background:"linear-gradient(to right, rgba(67, 126, 142, 1) ".concat(e.progress,"%, transparent ").concat(e.progress,"%)")}}),this.renderFileName(t,this.isUploading)))};e.prototype.renderFileControls=function(e){var t=e.fileActions&&e.fileActions.split(" ").length===1;var i=this.isCondensed&&!t;return i?this.renderActionMenu(e):this.renderFileActionButtons(e)};e.prototype.renderFile=function(e){var t=this;var i=e.type?"".concat(e.name,".").concat(e.type):e.name;var o=!this.isWithinLegacyUploader&&e.progress===100;return h("div",{class:"file-wrapper ".concat(o?"checked":"")},h("div",{class:"file ".concat(this.errorMessage?"--error":"")},this.renderFileName(i,this.isUploading),!this.errorMessage&&h("div",{class:"right-group ".concat(this.isCondensed?"condensed":"")},this.showInfo!=="none"&&this.renderFileInfo(e,this.showInfo),e.fileActions!==""&&this.renderFileControls(e)),this.errorMessage&&h("wm-button",{"permanently-delete":true,"button-type":"textonly","label-for-identical-buttons":this.generateClearButtonLabel(e.name),onClick:function(){return t.wmFileClearErrorClicked.emit({name:e.name})}},this.clearButtonText)),this.errorMessage&&h("div",{class:"error-message"},this.errorMessage))};e.prototype.render=function(){return h(Host,{role:"listitem"},this.isUploading?this.renderFileInProgress(this.fileData):this.renderFile(this.fileData))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();File.style=wmFileCss;export{File as wm_file};
 //# sourceMappingURL=wm-file.entry.js.map

package/dist/esm-es5/wm-file.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["wmFileCss","File","this","isWithinLegacyUploader","debouncedResize","debounce","_this","isCondensed","el","clientWidth","forceUpdate","Object","defineProperty","prototype","data","file","JSON","parse","progress","match","parseInt","toString","fileData","hasOwnProperty","shadowRoot","querySelector","intl","formatMessage","id","defaultMessage","description","generateClearButtonLabel","filename","fileName","componentWillLoad","shadowRootHost","getRootNode","host","nodeName","type","uploaderType","resizeObserver","ResizeObserver","observe","componentDidRender","truncateFileName","previewFile","wmIntFilePreviewed","emit","downloadFile","wmIntFileDownloaded","deleteFile","wmIntFileDeleted","leftGroup","leftBoundary","getBoundingClientRect","left","rightGroup","rightBoundary","right","filenameEl","availableSpace","dataset","canFitText","length","singleCharacterWidth","extension","slice","lastIndexOf","numFittingCharacters","Math","floor","postEllipsesLength","preEllipsesLength","max","preEllipsesText","postEllipsesText","indexOf","concat","trim","textContent","handleFilenameMouseEnter","ev","target","includes","showTooltip","renderFileName","isUploading","h","class","onMouseEnter","onMouseLeave","hideTooltip","renderFileInfo","item","showInfo","displayedInfo","lastUpdated","size","renderActionMenu","defaultFileActions","availableActions","fileActions","previewItem","icon","onClick","previewActionMessage","downloadItem","downloadActionMessage","deleteItem","deleteActionMessage","tooltip","actionMenuLabel","name","renderFileActionButtons","previewButton","previewButtonTooltip","downloadButton","downloadButtonTooltip","deleteButton","deleteButtonTooltip","renderFileInProgress","style","background","renderFileControls","hasSingleFileAction","split","showActionMenu","renderFile","showCheckmark","errorMessage","wmFileClearErrorClicked","clearButtonText","render","Host","role"],"sources":["src/components/wm-file/wm-file.scss?tag=wm-file&encapsulation=shadow","src/components/wm-file/wm-file.tsx"],"sourcesContent":[":host,\r\nwm-file {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n.file-wrapper {\r\n  font-size: rem-calc(14);\r\n  position: relative;\r\n  list-style: none;\r\n\r\n  .file {\r\n    min-width: 300px;\r\n    @include border-radius(3px);\r\n    height: rem-calc(56);\r\n    padding: 0 rem-calc(20);\r\n    position: relative; // for progress bar\r\n    background: $background;\r\n    border: 1px solid rgb(107, 107, 107);\r\n\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    .filename {\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .left-group {\r\n      overflow: hidden;\r\n    }\r\n\r\n    .right-group {\r\n      display: flex;\r\n      align-items: center;\r\n      padding-left: rem-calc(80);\r\n      gap: rem-calc(16);\r\n\r\n      &.condensed {\r\n        padding-left: rem-calc(40);\r\n      }\r\n\r\n      .file-controls {\r\n        display: flex;\r\n        gap: rem-calc(16);\r\n      }\r\n      .file-info {\r\n        white-space: nowrap;\r\n      }\r\n    }\r\n\r\n    &.--error {\r\n      border: 1px solid $error-color;\r\n      background-color: #f5ebea;\r\n      height: rem-calc(60);\r\n    }\r\n  }\r\n\r\n  &.checked {\r\n    .file:after {\r\n      @include mdi-icon;\r\n      content: \"\\f133\";\r\n      position: absolute;\r\n      right: calc(-16px + -28px);\r\n      color: $uploader-checkmark-background;\r\n      font-size: 28px;\r\n      line-height: 1;\r\n    }\r\n  }\r\n}\r\n\r\n.name-wrapper {\r\n  overflow: hidden;\r\n}\r\n\r\n.progress {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  right: 0;\r\n  height: 8px;\r\n}\r\n\r\n.error-message {\r\n  @include errorMessage;\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n\r\n.ch-measure {\r\n  // used to get the measurement of a single character, for truncation calculations\r\n  width: 1ch !important;\r\n  visibility: hidden;\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Prop, State, Host, forceUpdate } from \"@stencil/core\";\r\nimport { debounce, hideTooltip, intl, showTooltip } from \"../../global/functions\";\r\nimport { UploadedFile } from \"../../global/interfaces\";\r\n\r\n@Component({\r\n  tag: \"wm-file\",\r\n  styleUrl: \"wm-file.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class File {\r\n  @Element() el!: HTMLWmFileElement;\r\n  @Prop() file?: string;\r\n  @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\r\n  @Prop() errorMessage?: string;\r\n  @State() isCondensed: boolean = false;\r\n  @Event() wmIntFilePreviewed!: EventEmitter<string>;\r\n  @Event() wmIntFileDownloaded!: EventEmitter<string>;\r\n  @Event() wmIntFileDeleted!: EventEmitter<string>;\r\n  @Event() wmFileClearErrorClicked!: EventEmitter; // undocumented event, for communication with wm-uploader\r\n  // the file component is used within wm-uploader, which still includes legacy types 1 and 2\r\n  // some new features are not included in these legacy types, and must use the below in conditions\r\n  private isWithinLegacyUploader: boolean = false;\r\n\r\n  get fileData(): UploadedFile {\r\n    let data = this.file ? JSON.parse(this.file) : null;\r\n\r\n    // sometimes JSON numbers can be received as strings, make sure progress is always a number\r\n    if (data && data.progress && typeof data.progress === \"string\" && data.progress.match(/^[0-9]+$/)) {\r\n      data.progress = parseInt(data.progress.toString());\r\n    }\r\n    return data;\r\n  }\r\n\r\n  get isUploading(): boolean {\r\n    return this.fileData && this.fileData.hasOwnProperty(\"progress\") && this.fileData.progress! < 100;\r\n  }\r\n\r\n  get singleCharacterWidth() {\r\n    return this.el.shadowRoot!.querySelector(\".ch-measure\")!.clientWidth;\r\n  }\r\n\r\n  get previewButtonTooltip() {\r\n    return intl.formatMessage({\r\n      id: \"file.previewButtonTooltip\",\r\n      defaultMessage: \"Preview\",\r\n      description: \"Tooltip of a button that triggers a file to be previewed\",\r\n    });\r\n  }\r\n\r\n  get downloadButtonTooltip() {\r\n    return intl.formatMessage({\r\n      id: \"file.downloadButtonTooltip\",\r\n      defaultMessage: \"Download\",\r\n      description: \"Tooltip of a button that triggers a file to be downloaded\",\r\n    });\r\n  }\r\n\r\n  get deleteButtonTooltip() {\r\n    return intl.formatMessage({\r\n      id: \"file.deleteButtonTooltip\",\r\n      defaultMessage: \"Delete\",\r\n      description: \"Tooltip of a button that triggers a file to be deleted\",\r\n    });\r\n  }\r\n\r\n  get previewActionMessage() {\r\n    return intl.formatMessage({\r\n      id: \"file.previewAction\",\r\n      defaultMessage: \"Preview File\",\r\n      description: \"Label of a button that triggers a file to be previewed\",\r\n    });\r\n  }\r\n\r\n  get downloadActionMessage() {\r\n    return intl.formatMessage({\r\n      id: \"file.downloadAction\",\r\n      defaultMessage: \"Download File\",\r\n      description: \"Label of a button that triggers a file to be downloaded\",\r\n    });\r\n  }\r\n\r\n  get deleteActionMessage() {\r\n    return intl.formatMessage({\r\n      id: \"file.deleteAction\",\r\n      defaultMessage: \"Delete File\",\r\n      description: \"Label of a button that triggers a file to be delete\",\r\n    });\r\n  }\r\n\r\n  get actionMenuLabel() {\r\n    return intl.formatMessage({\r\n      id: \"file.actionMenuLabel\",\r\n      defaultMessage: \"Actions\",\r\n      description: \"Label of a button that opens a menu of file actions\",\r\n    });\r\n  }\r\n\r\n  get clearButtonText() {\r\n    return intl.formatMessage({\r\n      id: \"file.clearErrorText\",\r\n      defaultMessage: \"Clear\",\r\n      description: \"Text for a button used to clear an error\",\r\n    });\r\n  }\r\n\r\n  generateClearButtonLabel(filename: string) {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"file.clearErrorLabel\",\r\n        defaultMessage: \"Clear {fileName} error\",\r\n        description: \"Label for a button used to clear an error, including filename\",\r\n      },\r\n      { fileName: filename }\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    const shadowRootHost = (this.el.getRootNode() as ShadowRoot).host;\r\n\r\n    if (shadowRootHost && shadowRootHost.nodeName === \"WM-UPLOADER\") {\r\n      if ((shadowRootHost as HTMLWmUploaderElement).type || (shadowRootHost as HTMLWmUploaderElement).uploaderType) {\r\n        this.isWithinLegacyUploader = true;\r\n      }\r\n    }\r\n\r\n    // rerender on resize in case layout needs to change\r\n    const resizeObserver = new ResizeObserver(() => this.debouncedResize());\r\n    resizeObserver.observe(this.el);\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.truncateFileName(this.el.shadowRoot!.querySelector(\".file\")!);\r\n  }\r\n\r\n  debouncedResize = debounce(() => {\r\n    this.isCondensed = this.el.clientWidth < 500;\r\n    // rerender to show filename truncation changes\r\n    forceUpdate(this.el);\r\n  }, 50);\r\n\r\n  previewFile(file: UploadedFile) {\r\n    this.wmIntFilePreviewed.emit(file.id);\r\n  }\r\n\r\n  downloadFile(file: UploadedFile) {\r\n    this.wmIntFileDownloaded.emit(file.id);\r\n  }\r\n\r\n  deleteFile(file: UploadedFile) {\r\n    this.wmIntFileDeleted.emit(file.id);\r\n  }\r\n\r\n  truncateFileName(file: Element) {\r\n    const leftGroup = file.querySelector(\".left-group\");\r\n    const leftBoundary = leftGroup!.getBoundingClientRect().left;\r\n    const rightGroup = file.querySelector(\".right-group\");\r\n    const rightBoundary = rightGroup\r\n      ? rightGroup.getBoundingClientRect().left\r\n      : file.getBoundingClientRect().right - 20;\r\n    const filenameEl = file.querySelector(\".filename\") as HTMLElement;\r\n    const availableSpace = rightBoundary - leftBoundary;\r\n\r\n    let filename = filenameEl.dataset.filename!;\r\n    const canFitText = availableSpace > filename.length * this.singleCharacterWidth;\r\n\r\n    if (!canFitText) {\r\n      const extension = filename.slice(filename.lastIndexOf(\".\"));\r\n      const numFittingCharacters = Math.floor(availableSpace / this.singleCharacterWidth);\r\n\r\n      // three ellipses, three constant characters, extension\r\n      const postEllipsesLength = 3 + 3 + extension.length;\r\n      let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);\r\n      const preEllipsesText = filename.slice(0, preEllipsesLength);\r\n      const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);\r\n      filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;\r\n    }\r\n\r\n    filenameEl.textContent = filename;\r\n  }\r\n\r\n  handleFilenameMouseEnter(ev: MouseEvent, filename: string) {\r\n    // only show tooltip if file name is being truncated (has ellipses)\r\n    if ((ev.target as HTMLElement).textContent!.includes(\"...\")) {\r\n      showTooltip(\"bottom\", ev.target as HTMLElement, filename);\r\n    }\r\n  }\r\n\r\n  renderFileName(filename: string, isUploading: boolean) {\r\n    return (\r\n      <div class=\"left-group\">\r\n        <div class=\"name-wrapper\">\r\n          <span class=\"sr-only\">{filename}</span>\r\n          <span\r\n            aria-hidden=\"true\"\r\n            class=\"filename\"\r\n            data-filename={filename}\r\n            onMouseEnter={(ev) => this.handleFilenameMouseEnter(ev, filename)}\r\n            onMouseLeave={() => hideTooltip()}\r\n          ></span>\r\n          {isUploading && <span class=\"sr-only\">uploading</span>}\r\n          <div class=\"ch-measure\"></div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderFileInfo(item: UploadedFile, showInfo: string) {\r\n    let displayedInfo = \"\";\r\n    if (showInfo === \"time\" && item.lastUpdated) {\r\n      displayedInfo = item.lastUpdated;\r\n    } else if (showInfo === \"size\" && item.size) {\r\n      displayedInfo = item.size;\r\n    }\r\n\r\n    return <div class=\"file-info\">{displayedInfo}</div>;\r\n  }\r\n\r\n  renderActionMenu(item: UploadedFile) {\r\n    const defaultFileActions = \"download delete\";\r\n    const availableActions = item.fileActions || defaultFileActions;\r\n    const previewItem = (\r\n      <wm-menuitem icon=\"f208\" onClick={() => this.previewFile(item)}>\r\n        {this.previewActionMessage}\r\n      </wm-menuitem>\r\n    );\r\n    const downloadItem = (\r\n      <wm-menuitem icon=\"f1da\" onClick={() => this.downloadFile(item)}>\r\n        {this.downloadActionMessage}\r\n      </wm-menuitem>\r\n    );\r\n    const deleteItem = (\r\n      <wm-menuitem icon=\"f1c0\" onClick={() => this.deleteFile(item)}>\r\n        {this.deleteActionMessage}\r\n      </wm-menuitem>\r\n    );\r\n    return (\r\n      <wm-action-menu\r\n        action-menu-type=\"icon\"\r\n        tooltip={this.actionMenuLabel}\r\n        tooltip-position=\"bottom\"\r\n        label-for-identical-buttons={`${item.name} ${this.actionMenuLabel}`}\r\n      >\r\n        {availableActions.includes(\"preview\") && previewItem}\r\n        {availableActions.includes(\"download\") && downloadItem}\r\n        {availableActions.includes(\"delete\") && deleteItem}\r\n      </wm-action-menu>\r\n    );\r\n  }\r\n\r\n  renderFileActionButtons(item: UploadedFile) {\r\n    const defaultFileActions = \"download delete\";\r\n    const availableActions = item.fileActions || defaultFileActions;\r\n\r\n    const previewButton = (\r\n      <wm-button\r\n        class=\"preview-button\"\r\n        button-type=\"icononly\"\r\n        tooltip={this.previewButtonTooltip}\r\n        tooltip-position=\"bottom\"\r\n        label-for-identical-buttons={`preview ${item.name}`}\r\n        icon=\"f208\"\r\n        onClick={() => this.previewFile(item)}\r\n      ></wm-button>\r\n    );\r\n    const downloadButton = (\r\n      <wm-button\r\n        class=\"download-button\"\r\n        button-type=\"icononly\"\r\n        tooltip={this.downloadButtonTooltip}\r\n        tooltip-position=\"bottom\"\r\n        label-for-identical-buttons={`download ${item.name}`}\r\n        icon=\"f1da\"\r\n        onClick={() => this.downloadFile(item)}\r\n      ></wm-button>\r\n    );\r\n    const deleteButton = (\r\n      <wm-button\r\n        class=\"delete-button\"\r\n        button-type=\"icononly\"\r\n        tooltip={this.deleteButtonTooltip}\r\n        tooltip-position=\"bottom\"\r\n        label-for-identical-buttons={`delete ${item.name}`}\r\n        icon=\"f1c0\"\r\n        onClick={() => this.deleteFile(item)}\r\n      ></wm-button>\r\n    );\r\n\r\n    return (\r\n      <div class=\"file-controls\">\r\n        {availableActions.includes(\"preview\") && previewButton}\r\n        {availableActions.includes(\"download\") && downloadButton}\r\n        {availableActions.includes(\"delete\") && deleteButton}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderFileInProgress(item: UploadedFile) {\r\n    const filename = item.type ? `${item.name}.${item.type}` : item.name;\r\n    return (\r\n      <div class=\"file-wrapper\">\r\n        <div class=\"file --progress\">\r\n          <div\r\n            class=\"progress\"\r\n            style={{\r\n              background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,\r\n            }}\r\n          ></div>\r\n          {this.renderFileName(filename, this.isUploading)}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderFileControls(item: UploadedFile) {\r\n    const hasSingleFileAction = item.fileActions && item.fileActions.split(\" \").length === 1;\r\n    const showActionMenu = this.isCondensed && !hasSingleFileAction;\r\n\r\n    return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);\r\n  }\r\n\r\n  renderFile(item: UploadedFile) {\r\n    const filename = item.type ? `${item.name}.${item.type}` : item.name;\r\n    const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;\r\n\r\n    return (\r\n      <div class={`file-wrapper ${showCheckmark ? \"checked\" : \"\"}`}>\r\n        <div class={`file ${this.errorMessage ? \"--error\" : \"\"}`}>\r\n          {this.renderFileName(filename, this.isUploading)}\r\n          {!this.errorMessage && (\r\n            <div class={`right-group ${this.isCondensed ? \"condensed\" : \"\"}`}>\r\n              {this.showInfo !== \"none\" && this.renderFileInfo(item, this.showInfo)}\r\n              {item.fileActions !== \"\" && this.renderFileControls(item)}\r\n            </div>\r\n          )}\r\n          {this.errorMessage && (\r\n            <wm-button\r\n              permanently-delete\r\n              button-type=\"textonly\"\r\n              label-for-identical-buttons={this.generateClearButtonLabel(item.name)}\r\n              onClick={() => this.wmFileClearErrorClicked.emit({ name: item.name })}\r\n            >\r\n              {this.clearButtonText}\r\n            </wm-button>\r\n          )}\r\n        </div>\r\n        {this.errorMessage && <div class=\"error-message\">{this.errorMessage}</div>}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"listitem\">\r\n        {this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oNAAA,IAAMA,UAAY,80D,ICSLC,KAAI,W,8TAYPC,KAAAC,uBAAkC,MAiH1CD,KAAAE,gBAAkBC,UAAS,WACzBC,EAAKC,YAAcD,EAAKE,GAAGC,YAAc,IAEzCC,YAAYJ,EAAKE,G,GAChB,I,kCA9H0C,O,6CAEb,K,CAShCG,OAAAC,eAAIX,EAAAY,UAAA,WAAQ,C,IAAZ,WACE,IAAIC,EAAOZ,KAAKa,KAAOC,KAAKC,MAAMf,KAAKa,MAAQ,KAG/C,GAAID,GAAQA,EAAKI,iBAAmBJ,EAAKI,WAAa,UAAYJ,EAAKI,SAASC,MAAM,YAAa,CACjGL,EAAKI,SAAWE,SAASN,EAAKI,SAASG,W,CAEzC,OAAOP,C,uCAGTH,OAAAC,eAAIX,EAAAY,UAAA,cAAW,C,IAAf,WACE,OAAOX,KAAKoB,UAAYpB,KAAKoB,SAASC,eAAe,aAAerB,KAAKoB,SAASJ,SAAY,G,uCAGhGP,OAAAC,eAAIX,EAAAY,UAAA,uBAAoB,C,IAAxB,WACE,OAAOX,KAAKM,GAAGgB,WAAYC,cAAc,eAAgBhB,W,uCAG3DE,OAAAC,eAAIX,EAAAY,UAAA,uBAAoB,C,IAAxB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,4BACJC,eAAgB,UAChBC,YAAa,4D,uCAIjBnB,OAAAC,eAAIX,EAAAY,UAAA,wBAAqB,C,IAAzB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,6BACJC,eAAgB,WAChBC,YAAa,6D,uCAIjBnB,OAAAC,eAAIX,EAAAY,UAAA,sBAAmB,C,IAAvB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,2BACJC,eAAgB,SAChBC,YAAa,0D,uCAIjBnB,OAAAC,eAAIX,EAAAY,UAAA,uBAAoB,C,IAAxB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,qBACJC,eAAgB,eAChBC,YAAa,0D,uCAIjBnB,OAAAC,eAAIX,EAAAY,UAAA,wBAAqB,C,IAAzB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,sBACJC,eAAgB,gBAChBC,YAAa,2D,uCAIjBnB,OAAAC,eAAIX,EAAAY,UAAA,sBAAmB,C,IAAvB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,oBACJC,eAAgB,cAChBC,YAAa,uD,uCAIjBnB,OAAAC,eAAIX,EAAAY,UAAA,kBAAe,C,IAAnB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,uBACJC,eAAgB,UAChBC,YAAa,uD,uCAIjBnB,OAAAC,eAAIX,EAAAY,UAAA,kBAAe,C,IAAnB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,sBACJC,eAAgB,QAChBC,YAAa,4C,uCAIjB7B,EAAAY,UAAAkB,yBAAA,SAAyBC,GACvB,OAAON,KAAKC,cACV,CACEC,GAAI,uBACJC,eAAgB,yBAChBC,YAAa,iEAEf,CAAEG,SAAUD,G,EAIhB/B,EAAAY,UAAAqB,kBAAA,eAAA5B,EAAAJ,KACE,IAAMiC,EAAkBjC,KAAKM,GAAG4B,cAA6BC,KAE7D,GAAIF,GAAkBA,EAAeG,WAAa,cAAe,CAC/D,GAAKH,EAAyCI,MAASJ,EAAyCK,aAAc,CAC5GtC,KAAKC,uBAAyB,I,EAKlC,IAAMsC,EAAiB,IAAIC,gBAAe,WAAM,OAAApC,EAAKF,iBAAL,IAChDqC,EAAeE,QAAQzC,KAAKM,G,EAG9BP,EAAAY,UAAA+B,mBAAA,WACE1C,KAAK2C,iBAAiB3C,KAAKM,GAAGgB,WAAYC,cAAc,S,EAS1DxB,EAAAY,UAAAiC,YAAA,SAAY/B,GACVb,KAAK6C,mBAAmBC,KAAKjC,EAAKa,G,EAGpC3B,EAAAY,UAAAoC,aAAA,SAAalC,GACXb,KAAKgD,oBAAoBF,KAAKjC,EAAKa,G,EAGrC3B,EAAAY,UAAAsC,WAAA,SAAWpC,GACTb,KAAKkD,iBAAiBJ,KAAKjC,EAAKa,G,EAGlC3B,EAAAY,UAAAgC,iBAAA,SAAiB9B,GACf,IAAMsC,EAAYtC,EAAKU,cAAc,eACrC,IAAM6B,EAAeD,EAAWE,wBAAwBC,KACxD,IAAMC,EAAa1C,EAAKU,cAAc,gBACtC,IAAMiC,EAAgBD,EAClBA,EAAWF,wBAAwBC,KACnCzC,EAAKwC,wBAAwBI,MAAQ,GACzC,IAAMC,EAAa7C,EAAKU,cAAc,aACtC,IAAMoC,EAAiBH,EAAgBJ,EAEvC,IAAItB,EAAW4B,EAAWE,QAAQ9B,SAClC,IAAM+B,EAAaF,EAAiB7B,EAASgC,OAAS9D,KAAK+D,qBAE3D,IAAKF,EAAY,CACf,IAAMG,EAAYlC,EAASmC,MAAMnC,EAASoC,YAAY,MACtD,IAAMC,EAAuBC,KAAKC,MAAMV,EAAiB3D,KAAK+D,sBAG9D,IAAMO,EAAqB,EAAI,EAAIN,EAAUF,OAC7C,IAAIS,EAAoBH,KAAKI,IAAI,EAAGL,EAAuBG,GAC3D,IAAMG,EAAkB3C,EAASmC,MAAM,EAAGM,GAC1C,IAAMG,EAAmB5C,EAASmC,MAAMnC,EAAS6C,QAAQX,GAAa,EAAGlC,EAASgC,QAClFhC,EAAW,GAAA8C,OAAGH,EAAgBI,OAAM,OAAAD,OAAMF,EAAiBG,O,CAG7DnB,EAAWoB,YAAchD,C,EAG3B/B,EAAAY,UAAAoE,yBAAA,SAAyBC,EAAgBlD,GAEvC,GAAKkD,EAAGC,OAAuBH,YAAaI,SAAS,OAAQ,CAC3DC,YAAY,SAAUH,EAAGC,OAAuBnD,E,GAIpD/B,EAAAY,UAAAyE,eAAA,SAAetD,EAAkBuD,GAAjC,IAAAjF,EAAAJ,KACE,OACEsF,EAAA,OAAKC,MAAM,cACTD,EAAA,OAAKC,MAAM,gBACTD,EAAA,QAAMC,MAAM,WAAWzD,GACvBwD,EAAA,sBACc,OACZC,MAAM,WAAU,gBACDzD,EACf0D,aAAc,SAACR,GAAO,OAAA5E,EAAK2E,yBAAyBC,EAAIlD,EAAlC,EACtB2D,aAAc,WAAM,OAAAC,aAAA,IAErBL,GAAeC,EAAA,QAAMC,MAAM,WAAS,aACrCD,EAAA,OAAKC,MAAM,gB,EAMnBxF,EAAAY,UAAAgF,eAAA,SAAeC,EAAoBC,GACjC,IAAIC,EAAgB,GACpB,GAAID,IAAa,QAAUD,EAAKG,YAAa,CAC3CD,EAAgBF,EAAKG,W,MAChB,GAAIF,IAAa,QAAUD,EAAKI,KAAM,CAC3CF,EAAgBF,EAAKI,I,CAGvB,OAAOV,EAAA,OAAKC,MAAM,aAAaO,E,EAGjC/F,EAAAY,UAAAsF,iBAAA,SAAiBL,GAAjB,IAAAxF,EAAAJ,KACE,IAAMkG,EAAqB,kBAC3B,IAAMC,EAAmBP,EAAKQ,aAAeF,EAC7C,IAAMG,EACJf,EAAA,eAAagB,KAAK,OAAOC,QAAS,WAAM,OAAAnG,EAAKwC,YAAYgD,EAAjB,GACrC5F,KAAKwG,sBAGV,IAAMC,EACJnB,EAAA,eAAagB,KAAK,OAAOC,QAAS,WAAM,OAAAnG,EAAK2C,aAAa6C,EAAlB,GACrC5F,KAAK0G,uBAGV,IAAMC,EACJrB,EAAA,eAAagB,KAAK,OAAOC,QAAS,WAAM,OAAAnG,EAAK6C,WAAW2C,EAAhB,GACrC5F,KAAK4G,qBAGV,OACEtB,EAAA,qCACmB,OACjBuB,QAAS7G,KAAK8G,gBAAe,mBACZ,SAAQ,8BACI,GAAAlC,OAAGgB,EAAKmB,KAAI,KAAAnC,OAAI5E,KAAK8G,kBAEjDX,EAAiBjB,SAAS,YAAcmB,EACxCF,EAAiBjB,SAAS,aAAeuB,EACzCN,EAAiBjB,SAAS,WAAayB,E,EAK9C5G,EAAAY,UAAAqG,wBAAA,SAAwBpB,GAAxB,IAAAxF,EAAAJ,KACE,IAAMkG,EAAqB,kBAC3B,IAAMC,EAAmBP,EAAKQ,aAAeF,EAE7C,IAAMe,EACJ3B,EAAA,aACEC,MAAM,iBAAgB,cACV,WACZsB,QAAS7G,KAAKkH,qBAAoB,mBACjB,SAAQ,8BACI,WAAAtC,OAAWgB,EAAKmB,MAC7CT,KAAK,OACLC,QAAS,WAAM,OAAAnG,EAAKwC,YAAYgD,EAAjB,IAGnB,IAAMuB,EACJ7B,EAAA,aACEC,MAAM,kBAAiB,cACX,WACZsB,QAAS7G,KAAKoH,sBAAqB,mBAClB,SAAQ,8BACI,YAAAxC,OAAYgB,EAAKmB,MAC9CT,KAAK,OACLC,QAAS,WAAM,OAAAnG,EAAK2C,aAAa6C,EAAlB,IAGnB,IAAMyB,EACJ/B,EAAA,aACEC,MAAM,gBAAe,cACT,WACZsB,QAAS7G,KAAKsH,oBAAmB,mBAChB,SAAQ,8BACI,UAAA1C,OAAUgB,EAAKmB,MAC5CT,KAAK,OACLC,QAAS,WAAM,OAAAnG,EAAK6C,WAAW2C,EAAhB,IAInB,OACEN,EAAA,OAAKC,MAAM,iBACRY,EAAiBjB,SAAS,YAAc+B,EACxCd,EAAiBjB,SAAS,aAAeiC,EACzChB,EAAiBjB,SAAS,WAAamC,E,EAK9CtH,EAAAY,UAAA4G,qBAAA,SAAqB3B,GACnB,IAAM9D,EAAW8D,EAAKvD,KAAO,GAAAuC,OAAGgB,EAAKmB,KAAI,KAAAnC,OAAIgB,EAAKvD,MAASuD,EAAKmB,KAChE,OACEzB,EAAA,OAAKC,MAAM,gBACTD,EAAA,OAAKC,MAAM,mBACTD,EAAA,OACEC,MAAM,WACNiC,MAAO,CACLC,WAAY,mDAAA7C,OAAmDgB,EAAK5E,SAAQ,mBAAA4D,OAAkBgB,EAAK5E,SAAQ,SAG9GhB,KAAKoF,eAAetD,EAAU9B,KAAKqF,c,EAM5CtF,EAAAY,UAAA+G,mBAAA,SAAmB9B,GACjB,IAAM+B,EAAsB/B,EAAKQ,aAAeR,EAAKQ,YAAYwB,MAAM,KAAK9D,SAAW,EACvF,IAAM+D,EAAiB7H,KAAKK,cAAgBsH,EAE5C,OAAOE,EAAiB7H,KAAKiG,iBAAiBL,GAAQ5F,KAAKgH,wBAAwBpB,E,EAGrF7F,EAAAY,UAAAmH,WAAA,SAAWlC,GAAX,IAAAxF,EAAAJ,KACE,IAAM8B,EAAW8D,EAAKvD,KAAO,GAAAuC,OAAGgB,EAAKmB,KAAI,KAAAnC,OAAIgB,EAAKvD,MAASuD,EAAKmB,KAChE,IAAMgB,GAAiB/H,KAAKC,wBAA0B2F,EAAK5E,WAAa,IAExE,OACEsE,EAAA,OAAKC,MAAO,gBAAAX,OAAgBmD,EAAgB,UAAY,KACtDzC,EAAA,OAAKC,MAAO,QAAAX,OAAQ5E,KAAKgI,aAAe,UAAY,KACjDhI,KAAKoF,eAAetD,EAAU9B,KAAKqF,cAClCrF,KAAKgI,cACL1C,EAAA,OAAKC,MAAO,eAAAX,OAAe5E,KAAKK,YAAc,YAAc,KACzDL,KAAK6F,WAAa,QAAU7F,KAAK2F,eAAeC,EAAM5F,KAAK6F,UAC3DD,EAAKQ,cAAgB,IAAMpG,KAAK0H,mBAAmB9B,IAGvD5F,KAAKgI,cACJ1C,EAAA,qDAEc,WAAU,8BACOtF,KAAK6B,yBAAyB+D,EAAKmB,MAChER,QAAS,WAAM,OAAAnG,EAAK6H,wBAAwBnF,KAAK,CAAEiE,KAAMnB,EAAKmB,MAA/C,GAEd/G,KAAKkI,kBAIXlI,KAAKgI,cAAgB1C,EAAA,OAAKC,MAAM,iBAAiBvF,KAAKgI,c,EAK7DjI,EAAAY,UAAAwH,OAAA,WACE,OACE7C,EAAC8C,KAAI,CAACC,KAAK,YACRrI,KAAKqF,YAAcrF,KAAKuH,qBAAqBvH,KAAKoB,UAAYpB,KAAK8H,WAAW9H,KAAKoB,U,2OAxV3E,G"}
+{"version":3,"names":["wmFileCss","File","this","isWithinLegacyUploader","debouncedResize","debounce","_this","isCondensed","el","clientWidth","forceUpdate","Object","defineProperty","prototype","data","file","JSON","parse","progress","match","parseInt","toString","fileData","hasOwnProperty","shadowRoot","querySelector","intl","formatMessage","id","defaultMessage","description","generateClearButtonLabel","filename","fileName","componentWillLoad","shadowRootHost","getRootNode","host","nodeName","type","uploaderType","resizeObserver","ResizeObserver","observe","componentDidRender","truncateFileName","previewFile","wmIntFilePreviewed","emit","downloadFile","wmIntFileDownloaded","deleteFile","wmIntFileDeleted","leftGroup","leftBoundary","getBoundingClientRect","left","rightGroup","rightBoundary","right","filenameEl","availableSpace","dataset","canFitText","length","singleCharacterWidth","extension","slice","lastIndexOf","numFittingCharacters","Math","floor","postEllipsesLength","preEllipsesLength","max","preEllipsesText","postEllipsesText","indexOf","concat","trim","textContent","handleFilenameMouseEnter","ev","target","includes","showTooltip","renderFileName","isUploading","h","class","onMouseEnter","onMouseLeave","hideTooltip","renderFileInfo","item","showInfo","displayedInfo","lastUpdated","size","renderActionMenu","defaultFileActions","availableActions","fileActions","previewItem","icon","onClick","previewActionMessage","downloadItem","downloadActionMessage","deleteItem","deleteActionMessage","tooltip","actionMenuLabel","name","renderFileActionButtons","previewButton","previewButtonTooltip","downloadButton","downloadButtonTooltip","deleteButton","deleteButtonTooltip","renderFileInProgress","style","background","renderFileControls","hasSingleFileAction","split","showActionMenu","renderFile","showCheckmark","errorMessage","wmFileClearErrorClicked","clearButtonText","render","Host","role"],"sources":["src/components/wm-file/wm-file.scss?tag=wm-file&encapsulation=shadow","src/components/wm-file/wm-file.tsx"],"sourcesContent":[":host,\nwm-file {\n  display: block;\n  width: 100%;\n}\n.file-wrapper {\n  font-size: rem-calc(14);\n  position: relative;\n  list-style: none;\n\n  .file {\n    min-width: 300px;\n    @include border-radius(3px);\n    height: rem-calc(56);\n    padding: 0 rem-calc(20);\n    position: relative; // for progress bar\n    background: $background;\n    border: 1px solid rgb(107, 107, 107);\n\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .filename {\n      white-space: nowrap;\n    }\n\n    .left-group {\n      overflow: hidden;\n    }\n\n    .right-group {\n      display: flex;\n      align-items: center;\n      padding-left: rem-calc(80);\n      gap: rem-calc(16);\n\n      &.condensed {\n        padding-left: rem-calc(40);\n      }\n\n      .file-controls {\n        display: flex;\n        gap: rem-calc(16);\n      }\n      .file-info {\n        white-space: nowrap;\n      }\n    }\n\n    &.--error {\n      border: 1px solid $error-color;\n      background-color: #f5ebea;\n      height: rem-calc(60);\n    }\n  }\n\n  &.checked {\n    .file:after {\n      @include mdi-icon;\n      content: \"\\f133\";\n      position: absolute;\n      right: calc(-16px + -28px);\n      color: $uploader-checkmark-background;\n      font-size: 28px;\n      line-height: 1;\n    }\n  }\n}\n\n.name-wrapper {\n  overflow: hidden;\n}\n\n.progress {\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  height: 8px;\n}\n\n.error-message {\n  @include errorMessage;\n}\n\n.sr-only {\n  @include srOnly;\n}\n\n.ch-measure {\n  // used to get the measurement of a single character, for truncation calculations\n  width: 1ch !important;\n  visibility: hidden;\n}\n","import { h, Component, Element, Event, EventEmitter, Prop, State, Host, forceUpdate } from \"@stencil/core\";\nimport { debounce, hideTooltip, intl, showTooltip } from \"../../global/functions\";\nimport { UploadedFile } from \"../../global/interfaces\";\n\n@Component({\n  tag: \"wm-file\",\n  styleUrl: \"wm-file.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class File {\n  @Element() el!: HTMLWmFileElement;\n  @Prop() file?: string;\n  @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\n  @Prop() errorMessage?: string;\n  @State() isCondensed: boolean = false;\n  @Event() wmIntFilePreviewed!: EventEmitter<string>;\n  @Event() wmIntFileDownloaded!: EventEmitter<string>;\n  @Event() wmIntFileDeleted!: EventEmitter<string>;\n  @Event() wmFileClearErrorClicked!: EventEmitter; // undocumented event, for communication with wm-uploader\n  // the file component is used within wm-uploader, which still includes legacy types 1 and 2\n  // some new features are not included in these legacy types, and must use the below in conditions\n  private isWithinLegacyUploader: boolean = false;\n\n  get fileData(): UploadedFile {\n    let data = this.file ? JSON.parse(this.file) : null;\n\n    // sometimes JSON numbers can be received as strings, make sure progress is always a number\n    if (data && data.progress && typeof data.progress === \"string\" && data.progress.match(/^[0-9]+$/)) {\n      data.progress = parseInt(data.progress.toString());\n    }\n    return data;\n  }\n\n  get isUploading(): boolean {\n    return this.fileData && this.fileData.hasOwnProperty(\"progress\") && this.fileData.progress! < 100;\n  }\n\n  get singleCharacterWidth() {\n    return this.el.shadowRoot!.querySelector(\".ch-measure\")!.clientWidth;\n  }\n\n  get previewButtonTooltip() {\n    return intl.formatMessage({\n      id: \"file.previewButtonTooltip\",\n      defaultMessage: \"Preview\",\n      description: \"Tooltip of a button that triggers a file to be previewed\",\n    });\n  }\n\n  get downloadButtonTooltip() {\n    return intl.formatMessage({\n      id: \"file.downloadButtonTooltip\",\n      defaultMessage: \"Download\",\n      description: \"Tooltip of a button that triggers a file to be downloaded\",\n    });\n  }\n\n  get deleteButtonTooltip() {\n    return intl.formatMessage({\n      id: \"file.deleteButtonTooltip\",\n      defaultMessage: \"Delete\",\n      description: \"Tooltip of a button that triggers a file to be deleted\",\n    });\n  }\n\n  get previewActionMessage() {\n    return intl.formatMessage({\n      id: \"file.previewAction\",\n      defaultMessage: \"Preview File\",\n      description: \"Label of a button that triggers a file to be previewed\",\n    });\n  }\n\n  get downloadActionMessage() {\n    return intl.formatMessage({\n      id: \"file.downloadAction\",\n      defaultMessage: \"Download File\",\n      description: \"Label of a button that triggers a file to be downloaded\",\n    });\n  }\n\n  get deleteActionMessage() {\n    return intl.formatMessage({\n      id: \"file.deleteAction\",\n      defaultMessage: \"Delete File\",\n      description: \"Label of a button that triggers a file to be delete\",\n    });\n  }\n\n  get actionMenuLabel() {\n    return intl.formatMessage({\n      id: \"file.actionMenuLabel\",\n      defaultMessage: \"Actions\",\n      description: \"Label of a button that opens a menu of file actions\",\n    });\n  }\n\n  get clearButtonText() {\n    return intl.formatMessage({\n      id: \"file.clearErrorText\",\n      defaultMessage: \"Clear\",\n      description: \"Text for a button used to clear an error\",\n    });\n  }\n\n  generateClearButtonLabel(filename: string) {\n    return intl.formatMessage(\n      {\n        id: \"file.clearErrorLabel\",\n        defaultMessage: \"Clear {fileName} error\",\n        description: \"Label for a button used to clear an error, including filename\",\n      },\n      { fileName: filename }\n    );\n  }\n\n  componentWillLoad() {\n    const shadowRootHost = (this.el.getRootNode() as ShadowRoot).host;\n\n    if (shadowRootHost && shadowRootHost.nodeName === \"WM-UPLOADER\") {\n      if ((shadowRootHost as HTMLWmUploaderElement).type || (shadowRootHost as HTMLWmUploaderElement).uploaderType) {\n        this.isWithinLegacyUploader = true;\n      }\n    }\n\n    // rerender on resize in case layout needs to change\n    const resizeObserver = new ResizeObserver(() => this.debouncedResize());\n    resizeObserver.observe(this.el);\n  }\n\n  componentDidRender() {\n    this.truncateFileName(this.el.shadowRoot!.querySelector(\".file\")!);\n  }\n\n  debouncedResize = debounce(() => {\n    this.isCondensed = this.el.clientWidth < 500;\n    // rerender to show filename truncation changes\n    forceUpdate(this.el);\n  }, 50);\n\n  previewFile(file: UploadedFile) {\n    this.wmIntFilePreviewed.emit(file.id);\n  }\n\n  downloadFile(file: UploadedFile) {\n    this.wmIntFileDownloaded.emit(file.id);\n  }\n\n  deleteFile(file: UploadedFile) {\n    this.wmIntFileDeleted.emit(file.id);\n  }\n\n  truncateFileName(file: Element) {\n    const leftGroup = file.querySelector(\".left-group\");\n    const leftBoundary = leftGroup!.getBoundingClientRect().left;\n    const rightGroup = file.querySelector(\".right-group\");\n    const rightBoundary = rightGroup\n      ? rightGroup.getBoundingClientRect().left\n      : file.getBoundingClientRect().right - 20;\n    const filenameEl = file.querySelector(\".filename\") as HTMLElement;\n    const availableSpace = rightBoundary - leftBoundary;\n\n    let filename = filenameEl.dataset.filename!;\n    const canFitText = availableSpace > filename.length * this.singleCharacterWidth;\n\n    if (!canFitText) {\n      const extension = filename.slice(filename.lastIndexOf(\".\"));\n      const numFittingCharacters = Math.floor(availableSpace / this.singleCharacterWidth);\n\n      // three ellipses, three constant characters, extension\n      const postEllipsesLength = 3 + 3 + extension.length;\n      let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);\n      const preEllipsesText = filename.slice(0, preEllipsesLength);\n      const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);\n      filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;\n    }\n\n    filenameEl.textContent = filename;\n  }\n\n  handleFilenameMouseEnter(ev: MouseEvent, filename: string) {\n    // only show tooltip if file name is being truncated (has ellipses)\n    if ((ev.target as HTMLElement).textContent!.includes(\"...\")) {\n      showTooltip(\"bottom\", ev.target as HTMLElement, filename);\n    }\n  }\n\n  renderFileName(filename: string, isUploading: boolean) {\n    return (\n      <div class=\"left-group\">\n        <div class=\"name-wrapper\">\n          <span class=\"sr-only\">{filename}</span>\n          <span\n            aria-hidden=\"true\"\n            class=\"filename\"\n            data-filename={filename}\n            onMouseEnter={(ev) => this.handleFilenameMouseEnter(ev, filename)}\n            onMouseLeave={() => hideTooltip()}\n          ></span>\n          {isUploading && <span class=\"sr-only\">uploading</span>}\n          <div class=\"ch-measure\"></div>\n        </div>\n      </div>\n    );\n  }\n\n  renderFileInfo(item: UploadedFile, showInfo: string) {\n    let displayedInfo = \"\";\n    if (showInfo === \"time\" && item.lastUpdated) {\n      displayedInfo = item.lastUpdated;\n    } else if (showInfo === \"size\" && item.size) {\n      displayedInfo = item.size;\n    }\n\n    return <div class=\"file-info\">{displayedInfo}</div>;\n  }\n\n  renderActionMenu(item: UploadedFile) {\n    const defaultFileActions = \"download delete\";\n    const availableActions = item.fileActions || defaultFileActions;\n    const previewItem = (\n      <wm-menuitem icon=\"f208\" onClick={() => this.previewFile(item)}>\n        {this.previewActionMessage}\n      </wm-menuitem>\n    );\n    const downloadItem = (\n      <wm-menuitem icon=\"f1da\" onClick={() => this.downloadFile(item)}>\n        {this.downloadActionMessage}\n      </wm-menuitem>\n    );\n    const deleteItem = (\n      <wm-menuitem icon=\"f1c0\" onClick={() => this.deleteFile(item)}>\n        {this.deleteActionMessage}\n      </wm-menuitem>\n    );\n    return (\n      <wm-action-menu\n        action-menu-type=\"icon\"\n        tooltip={this.actionMenuLabel}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`${item.name} ${this.actionMenuLabel}`}\n      >\n        {availableActions.includes(\"preview\") && previewItem}\n        {availableActions.includes(\"download\") && downloadItem}\n        {availableActions.includes(\"delete\") && deleteItem}\n      </wm-action-menu>\n    );\n  }\n\n  renderFileActionButtons(item: UploadedFile) {\n    const defaultFileActions = \"download delete\";\n    const availableActions = item.fileActions || defaultFileActions;\n\n    const previewButton = (\n      <wm-button\n        class=\"preview-button\"\n        button-type=\"icononly\"\n        tooltip={this.previewButtonTooltip}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`preview ${item.name}`}\n        icon=\"f208\"\n        onClick={() => this.previewFile(item)}\n      ></wm-button>\n    );\n    const downloadButton = (\n      <wm-button\n        class=\"download-button\"\n        button-type=\"icononly\"\n        tooltip={this.downloadButtonTooltip}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`download ${item.name}`}\n        icon=\"f1da\"\n        onClick={() => this.downloadFile(item)}\n      ></wm-button>\n    );\n    const deleteButton = (\n      <wm-button\n        class=\"delete-button\"\n        button-type=\"icononly\"\n        tooltip={this.deleteButtonTooltip}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`delete ${item.name}`}\n        icon=\"f1c0\"\n        onClick={() => this.deleteFile(item)}\n      ></wm-button>\n    );\n\n    return (\n      <div class=\"file-controls\">\n        {availableActions.includes(\"preview\") && previewButton}\n        {availableActions.includes(\"download\") && downloadButton}\n        {availableActions.includes(\"delete\") && deleteButton}\n      </div>\n    );\n  }\n\n  renderFileInProgress(item: UploadedFile) {\n    const filename = item.type ? `${item.name}.${item.type}` : item.name;\n    return (\n      <div class=\"file-wrapper\">\n        <div class=\"file --progress\">\n          <div\n            class=\"progress\"\n            style={{\n              background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,\n            }}\n          ></div>\n          {this.renderFileName(filename, this.isUploading)}\n        </div>\n      </div>\n    );\n  }\n\n  renderFileControls(item: UploadedFile) {\n    const hasSingleFileAction = item.fileActions && item.fileActions.split(\" \").length === 1;\n    const showActionMenu = this.isCondensed && !hasSingleFileAction;\n\n    return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);\n  }\n\n  renderFile(item: UploadedFile) {\n    const filename = item.type ? `${item.name}.${item.type}` : item.name;\n    const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;\n\n    return (\n      <div class={`file-wrapper ${showCheckmark ? \"checked\" : \"\"}`}>\n        <div class={`file ${this.errorMessage ? \"--error\" : \"\"}`}>\n          {this.renderFileName(filename, this.isUploading)}\n          {!this.errorMessage && (\n            <div class={`right-group ${this.isCondensed ? \"condensed\" : \"\"}`}>\n              {this.showInfo !== \"none\" && this.renderFileInfo(item, this.showInfo)}\n              {item.fileActions !== \"\" && this.renderFileControls(item)}\n            </div>\n          )}\n          {this.errorMessage && (\n            <wm-button\n              permanently-delete\n              button-type=\"textonly\"\n              label-for-identical-buttons={this.generateClearButtonLabel(item.name)}\n              onClick={() => this.wmFileClearErrorClicked.emit({ name: item.name })}\n            >\n              {this.clearButtonText}\n            </wm-button>\n          )}\n        </div>\n        {this.errorMessage && <div class=\"error-message\">{this.errorMessage}</div>}\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        {this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/wm-input.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl,g as generateId,e as isRelatedTarget}from"./functions-bb1309d0.js";var wmInputCss=':host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-input .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-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-input .wrapper.label-left .label-wrapper .label{display:-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-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-input .wrapper .inner-wrapper{width:100%}:host .wrapper .inputfield-wrapper,wm-input .wrapper .inputfield-wrapper{height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:-ms-flexbox;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .wrapper input,wm-input .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;-ms-flex:1;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:disabled,wm-input .wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper input:focus,wm-input .wrapper input:focus{outline:none}:host .wrapper .info,wm-input .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper,wm-input .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error-message,wm-input .wrapper.invalid .error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper,wm-input .wrapper:focus .inputfield-wrapper,wm-input .wrapper.focus .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .sr-only,wm-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var Input=function(){function e(e){registerInstance(this,e);this.wmInputValueChanged=createEvent(this,"wmInputValueChanged",7);this.uid="";this.previousBlurredValue="";this.numberErrorMessage=intl.formatMessage({id:"input.numberError",defaultMessage:"Please enter a valid number."});this.label=undefined;this.labelPosition="top";this.value="";this.disabled=false;this.info=undefined;this.placeholder="";this.requiredField=false;this.requiredFieldMessage=undefined;this.errorMessage=undefined;this.characterLimit=undefined;this.preventValidation=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.announcement="";this.displayedErrorMessage=""}Object.defineProperty(e.prototype,"charCount",{get:function(){return this.value.length},enumerable:false,configurable:true});e.prototype.componentWillLoad=function(){this.uid=this.el.id?this.el.id:generateId();if(!this.label){console.error("wm-input requires the label property")}};e.prototype.componentDidLoad=function(){if(this.value){this.inputEl.value=this.value;this.previousBlurredValue=this.inputEl.value}};e.prototype.handleErrorMessage=function(e){this.displayedErrorMessage=e};e.prototype.handleKeyDown=function(e){var t=e.ctrlKey||e.metaKey||e.altKey;var r=/^.$/.test(e.key)&&!t;var i=r&&this.characterLimit&&this.inputEl.value.length>=this.characterLimit;if(i){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleBlur=function(e){if(this.value!==this.previousBlurredValue){this.wmInputValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value;var t=this.preventValidation&&isRelatedTarget(e,this.preventValidation);if(!t){this.displayedErrorMessage=this.validate()}this.inputWrapperEl.classList.remove("focus")};e.prototype.handleInput=function(e){this.value=e.target.value;if(this.characterLimit&&this.charCount>=this.characterLimit-5){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleFocus=function(){this.inputWrapperEl.classList.add("focus")};e.prototype.validate=function(){var e=[this.validateNumber.bind(this),this.validateRequired.bind(this)];if(this.errorMessage){return this.errorMessage}else{return e.reduce((function(e,t){return e?e:t()}),"")}};e.prototype.validateRequired=function(){var e=this.requiredFieldMessage||intl.formatMessage({id:"global.requiredError",defaultMessage:"This field is required."});return this.requiredField&&this.value===""?e:""};e.prototype.validateNumber=function(){return this.type==="number"&&this.inputEl.validity.badInput?this.numberErrorMessage:""};e.prototype.announce=function(e){if(this.liveRegionEl.textContent===e){e+=" "}this.announcement=e};e.prototype.generateCharacterLimitWarning=function(e,t){var r=intl.formatMessage({id:"global.charactersEntered",defaultMessage:"{x, number} of {y, number} characters entered.",description:"for screen readers"},{x:e,y:t});var i=intl.formatMessage({id:"global.characterLimitReached",defaultMessage:"No additional characters will be entered.",description:"for screen readers"});return"".concat(r).concat(e>=t?" "+i:"")};e.prototype.generateCharacterLimitLabel=function(e){return intl.formatMessage({id:"global.characterLimit",defaultMessage:"{limit, number} characters allowed.",description:"for screen readers"},{limit:e})};e.prototype.renderErrorMessage=function(){return this.errorMessage||this.displayedErrorMessage};e.prototype.render=function(){var e=this;return h(Host,{id:this.uid},h("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(this.errorMessage||this.displayedErrorMessage?"invalid":""),ref:function(t){return e.inputWrapperEl=t}},h("div",{class:"label-wrapper"},this.labelPosition!=="none"&&h("label",{htmlFor:"inputfield-".concat(this.uid),class:"label"},this.label,this.requiredField&&h("span",{class:"required","aria-hidden":"true"},"*"))),h("div",{class:"inner-wrapper"},h("div",{class:"inputfield-wrapper"},h("input",{ref:function(t){return e.inputEl=t},id:"inputfield-".concat(this.uid),disabled:this.disabled,"aria-label":"".concat(this.label).concat(this.characterLimit?" "+this.generateCharacterLimitLabel(this.characterLimit):""),"aria-describedby":"info-".concat(this.uid," error-").concat(this.uid),onInput:function(t){return e.handleInput(t)},onKeyDown:function(t){return e.handleKeyDown(t)},onBlur:function(t){return e.handleBlur(t)},onFocus:this.handleFocus.bind(this),placeholder:this.placeholder,autocomplete:"off","aria-required":this.requiredField?"true":null,maxLength:this.characterLimit||undefined,type:this.type,step:this.step,max:this.max,min:this.min}),this.characterLimit&&typeof this.characterLimit==="number"?h("div",{class:"character-count"},this.charCount,"/",this.characterLimit):""),this.info&&h("div",{id:"info-".concat(this.uid),class:"info"},this.info),h("div",{id:"error-".concat(this.uid),"aria-live":"assertive",class:"error-message","aria-atomic":"true"},this.renderErrorMessage()),h("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:function(t){return e.liveRegionEl=t}},this.announcement))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["handleErrorMessage"]}},enumerable:false,configurable:true});return e}();Input.style=wmInputCss;export{Input as wm_input};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl,g as generateId,e as isRelatedTarget}from"./functions-dc9964aa.js";import{g as globalMessages}from"./intl-4d4826dd.js";var wmInputCss=':host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-input .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-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-input .wrapper.label-left .label-wrapper .label{display:-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-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-input .wrapper .inner-wrapper{width:100%}:host .wrapper .inputfield-wrapper,wm-input .wrapper .inputfield-wrapper{height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:-ms-flexbox;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .wrapper input,wm-input .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;-ms-flex:1;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:disabled,wm-input .wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper input:focus,wm-input .wrapper input:focus{outline:none}:host .wrapper .info,wm-input .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper,wm-input .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error-message,wm-input .wrapper.invalid .error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper,wm-input .wrapper:focus .inputfield-wrapper,wm-input .wrapper.focus .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}:host .sr-only,wm-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var Input=function(){function e(e){registerInstance(this,e);this.wmInputValueChanged=createEvent(this,"wmInputValueChanged",7);this.uid="";this.previousBlurredValue="";this.numberErrorMessage=intl.formatMessage({id:"input.numberError",defaultMessage:"Please enter a valid number."});this.label=undefined;this.labelPosition="top";this.value="";this.disabled=false;this.info=undefined;this.placeholder="";this.requiredField=false;this.requiredFieldMessage=undefined;this.errorMessage=undefined;this.characterLimit=undefined;this.preventValidation=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.announcement="";this.displayedErrorMessage=""}Object.defineProperty(e.prototype,"charCount",{get:function(){return this.value.length},enumerable:false,configurable:true});e.prototype.componentWillLoad=function(){this.uid=this.el.id?this.el.id:generateId();if(!this.label){console.error("wm-input requires the label property")}};e.prototype.componentDidLoad=function(){if(this.value){this.inputEl.value=this.value;this.previousBlurredValue=this.inputEl.value}};e.prototype.handleErrorMessage=function(e){this.displayedErrorMessage=e};e.prototype.handleKeyDown=function(e){var t=e.ctrlKey||e.metaKey||e.altKey;var r=/^.$/.test(e.key)&&!t;var i=r&&this.characterLimit&&this.inputEl.value.length>=this.characterLimit;if(i){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleBlur=function(e){if(this.value!==this.previousBlurredValue){this.wmInputValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value;var t=this.preventValidation&&isRelatedTarget(e,this.preventValidation);if(!t){this.displayedErrorMessage=this.validate()}this.inputWrapperEl.classList.remove("focus")};e.prototype.handleInput=function(e){this.value=e.target.value;if(this.characterLimit&&this.charCount>=this.characterLimit-5){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleFocus=function(){this.inputWrapperEl.classList.add("focus")};e.prototype.validate=function(){var e=[this.validateNumber.bind(this),this.validateRequired.bind(this)];if(this.errorMessage){return this.errorMessage}else{return e.reduce((function(e,t){return e?e:t()}),"")}};e.prototype.validateRequired=function(){var e=this.requiredFieldMessage||globalMessages.requiredError;return this.requiredField&&this.value===""?e:""};e.prototype.validateNumber=function(){return this.type==="number"&&this.inputEl.validity.badInput?this.numberErrorMessage:""};e.prototype.announce=function(e){if(this.liveRegionEl.textContent===e){e+=" "}this.announcement=e};e.prototype.generateCharacterLimitWarning=function(e,t){var r=globalMessages.getCharactersEntered(e,t);if(e>=t){r+=" ".concat(globalMessages.characterLimitReached)}return r};e.prototype.renderErrorMessage=function(){return this.errorMessage||this.displayedErrorMessage};e.prototype.render=function(){var e=this;return h(Host,{id:this.uid},h("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(this.errorMessage||this.displayedErrorMessage?"invalid":""),ref:function(t){return e.inputWrapperEl=t}},h("div",{class:"label-wrapper"},this.labelPosition!=="none"&&h("label",{htmlFor:"inputfield-".concat(this.uid),class:"label"},this.label,this.requiredField&&h("span",{class:"required","aria-hidden":"true"},"*"))),h("div",{class:"inner-wrapper"},h("div",{class:"inputfield-wrapper"},h("input",{ref:function(t){return e.inputEl=t},id:"inputfield-".concat(this.uid),disabled:this.disabled,"aria-label":"".concat(this.label).concat(this.characterLimit?" "+globalMessages.getCharacterLimit(this.characterLimit):""),"aria-describedby":"info-".concat(this.uid," error-").concat(this.uid),onInput:function(t){return e.handleInput(t)},onKeyDown:function(t){return e.handleKeyDown(t)},onBlur:function(t){return e.handleBlur(t)},onFocus:this.handleFocus.bind(this),placeholder:this.placeholder,autocomplete:"off","aria-required":this.requiredField?"true":null,maxLength:this.characterLimit||undefined,type:this.type,step:this.step,max:this.max,min:this.min}),this.characterLimit&&typeof this.characterLimit==="number"?h("div",{class:"character-count"},this.charCount,"/",this.characterLimit):""),this.info&&h("div",{id:"info-".concat(this.uid),class:"info"},this.info),h("div",{id:"error-".concat(this.uid),"aria-live":"assertive",class:"error-message","aria-atomic":"true"},this.renderErrorMessage()),h("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:function(t){return e.liveRegionEl=t}},this.announcement))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["handleErrorMessage"]}},enumerable:false,configurable:true});return e}();Input.style=wmInputCss;export{Input as wm_input};
 //# sourceMappingURL=wm-input.entry.js.map