@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/collection/components/charts/wm-chart/wm-chart.js.map

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

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js

@@ -1,208 +1,208 @@
-import { h, Host, forceUpdate } from "@stencil/core";
-import { generateId, intl } from "../../../global/functions";
-import { exitChart, getDetails, handleChartKeydown, renderStackedBar, renderCompletionMessage, renderDoughnut, renderInstructionsText, renderLegend, allChartsDetails, } from "../chartFunctions";
-export class ProgressIndicator {
-  constructor() {
-    this.uid = generateId();
-    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
-    this.slicesDetails = [];
-    this.barLabelsWidth = this.el.parentElement.barLabelsWidth;
-    this.label = undefined;
-    this.subinfo = undefined;
-    this.completionMessage = undefined;
-    this.showLegend = true;
-    this.isTabbing = false;
-    this.mode = undefined;
-    this.userIsNavigating = false;
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get chartDetails() {
-    return this.mode ? allChartsDetails[this.mode] : undefined;
-  }
-  get ariaLabelText() {
-    let text = `${this.label}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  get chartRoleDescription() {
-    return intl.formatMessage({
-      id: "chart.roleDescription",
-      defaultMessage: "Interactive chart",
-      description: "For screen readers only, a description clarifying the role of the chart widget",
-    });
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleKeydown(ev) {
-    handleChartKeydown.call(this, ev);
-  }
-  componentWillLoad() {
-    if (!this.label) {
-      console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-    }
-    if (this.el.children.length !== 2) {
-      console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.");
-    }
-    // Listen to parent for initial mode, and future changes
-    this.el.parentElement.addEventListener("wmProgressMonitorModeChange", (ev) => (this.mode = ev.detail));
-  }
-  async handleSliceUpdate() {
-    await getDetails.call(this, this.mode);
-    forceUpdate(this.el);
-  }
-  handleModeUpdate() {
-    if (this.mode) {
-      getDetails.call(this, this.mode);
-    }
-  }
-  renderBarOrDoughnut() {
-    if (this.total > 0 && this.mode === "bar") {
-      return renderStackedBar.call(this, this.mode);
-    }
-    else {
-      return renderDoughnut.call(this, this.mode);
-    }
-  }
-  render() {
-    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
-  }
-  static get is() { return "wm-progress-indicator"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-progress-indicator.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-progress-indicator.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "subinfo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "subinfo",
-        "reflect": false
-      },
-      "completionMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "completion-message",
-        "reflect": false
-      },
-      "showLegend": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-legend",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isTabbing": {},
-      "mode": {},
-      "userIsNavigating": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "mode",
-        "methodName": "handleModeUpdate"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "wmUserIsTabbing",
-        "method": "toggleTabbingOn",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmUserIsNotTabbing",
-        "method": "toggleTabbingOff",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "handleKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmProgressSliceUpdated",
-        "method": "handleSliceUpdate",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=wm-progress-indicator.js.map
+import { h, Host, forceUpdate } from "@stencil/core";
+import { generateId, intl } from "../../../global/functions";
+import { exitChart, getDetails, handleChartKeydown, renderStackedBar, renderCompletionMessage, renderDoughnut, renderInstructionsText, renderLegend, allChartsDetails, } from "../chartFunctions";
+export class ProgressIndicator {
+  constructor() {
+    this.uid = generateId();
+    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
+    this.slicesDetails = [];
+    this.barLabelsWidth = this.el.parentElement.barLabelsWidth;
+    this.label = undefined;
+    this.subinfo = undefined;
+    this.completionMessage = undefined;
+    this.showLegend = true;
+    this.isTabbing = false;
+    this.mode = undefined;
+    this.userIsNavigating = false;
+  }
+  get popoverEl() {
+    return this.el.shadowRoot.querySelector("priv-chart-popover");
+  }
+  get sliceEls() {
+    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+  }
+  get chartDetails() {
+    return this.mode ? allChartsDetails[this.mode] : undefined;
+  }
+  get ariaLabelText() {
+    let text = `${this.label}`;
+    if (this.subinfo) {
+      text += ` ${this.subinfo}`;
+    }
+    return text;
+  }
+  get chartRoleDescription() {
+    return intl.formatMessage({
+      id: "chart.roleDescription",
+      defaultMessage: "Interactive chart",
+      description: "For screen readers only, a description clarifying the role of the chart widget",
+    });
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleKeydown(ev) {
+    handleChartKeydown.call(this, ev);
+  }
+  componentWillLoad() {
+    if (!this.label) {
+      console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
+    }
+    if (this.el.children.length !== 2) {
+      console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.");
+    }
+    // Listen to parent for initial mode, and future changes
+    this.el.parentElement.addEventListener("wmProgressMonitorModeChange", (ev) => (this.mode = ev.detail));
+  }
+  async handleSliceUpdate() {
+    await getDetails.call(this, this.mode);
+    forceUpdate(this.el);
+  }
+  handleModeUpdate() {
+    if (this.mode) {
+      getDetails.call(this, this.mode);
+    }
+  }
+  renderBarOrDoughnut() {
+    if (this.total > 0 && this.mode === "bar") {
+      return renderStackedBar.call(this, this.mode);
+    }
+    else {
+      return renderDoughnut.call(this, this.mode);
+    }
+  }
+  render() {
+    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
+  }
+  static get is() { return "wm-progress-indicator"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-progress-indicator.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-progress-indicator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "subinfo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "subinfo",
+        "reflect": false
+      },
+      "completionMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "completion-message",
+        "reflect": false
+      },
+      "showLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-legend",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isTabbing": {},
+      "mode": {},
+      "userIsNavigating": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mode",
+        "methodName": "handleModeUpdate"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "wmUserIsTabbing",
+        "method": "toggleTabbingOn",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmUserIsNotTabbing",
+        "method": "toggleTabbingOff",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKeydown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmProgressSliceUpdated",
+        "method": "handleSliceUpdate",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=wm-progress-indicator.js.map

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"wm-progress-indicator.js","sourceRoot":"","sources":["../../../../../src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\r\nimport { ChartDetails } from \"../../../global/interfaces\";\r\nimport { generateId, intl } from \"../../../global/functions\";\r\nimport {\r\n  exitChart,\r\n  getDetails,\r\n  handleChartKeydown,\r\n  renderStackedBar,\r\n  renderCompletionMessage,\r\n  renderDoughnut,\r\n  renderInstructionsText,\r\n  renderLegend,\r\n  allChartsDetails,\r\n} from \"../chartFunctions\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-indicator\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-indicator.scss\",\r\n})\r\nexport class ProgressIndicator {\r\n  @Element() el!: HTMLWmProgressIndicatorElement;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\r\n  private componentWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() label?: string;\r\n  @Prop() subinfo?: string;\r\n  @Prop() completionMessage?: string;\r\n  @Prop() showLegend: boolean = true;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @State() mode?: \"doughnut\" | \"bar\";\r\n  @State() userIsNavigating: boolean = false;\r\n\r\n  private uid: string = generateId();\r\n  private total!: number;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\r\n  private slicesDetails: SliceDetails[] = [];\r\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\r\n\r\n  get popoverEl() {\r\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\r\n  }\r\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\r\n  }\r\n  get chartDetails(): ChartDetails | undefined {\r\n    return this.mode ? allChartsDetails[this.mode] : undefined;\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 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  componentWillLoad() {\r\n    if (!this.label) {\r\n      console.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\r\n    if (this.el.children.length !== 2) {\r\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\r\n    }\r\n\r\n    // Listen to parent for initial mode, and future changes\r\n    this.el.parentElement!.addEventListener(\r\n      \"wmProgressMonitorModeChange\",\r\n      (ev) => (this.mode = (ev as CustomEvent).detail)\r\n    );\r\n  }\r\n\r\n  @Listen(\"wmProgressSliceUpdated\")\r\n  async handleSliceUpdate() {\r\n    await getDetails.call(this, this.mode!);\r\n    forceUpdate(this.el);\r\n  }\r\n\r\n  @Watch(\"mode\")\r\n  handleModeUpdate() {\r\n    if (this.mode) {\r\n      getDetails.call(this, this.mode);\r\n    }\r\n  }\r\n\r\n  renderBarOrDoughnut() {\r\n    if (this.total > 0 && this.mode === \"bar\") {\r\n      return renderStackedBar.call(this, this.mode!);\r\n    } else {\r\n      return renderDoughnut.call(this, this.mode!);\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.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\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\r\n            id={`label-${this.uid}`}\r\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\r\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\r\n            htmlFor={`graphic-${this.uid}`}\r\n          >\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.mode && this.renderBarOrDoughnut()}\r\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\r\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\r\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\r\n        </div>\r\n        {renderInstructionsText()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-progress-indicator.js","sourceRoot":"","sources":["../../../../../src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\nimport { ChartDetails } from \"../../../global/interfaces\";\nimport { generateId, intl } from \"../../../global/functions\";\nimport {\n  exitChart,\n  getDetails,\n  handleChartKeydown,\n  renderStackedBar,\n  renderCompletionMessage,\n  renderDoughnut,\n  renderInstructionsText,\n  renderLegend,\n  allChartsDetails,\n} from \"../chartFunctions\";\n\n@Component({\n  tag: \"wm-progress-indicator\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-progress-indicator.scss\",\n})\nexport class ProgressIndicator {\n  @Element() el!: HTMLWmProgressIndicatorElement;\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\n  private componentWrapperEl!: HTMLDivElement;\n\n  @Prop() label?: string;\n  @Prop() subinfo?: string;\n  @Prop() completionMessage?: string;\n  @Prop() showLegend: boolean = true;\n\n  @State() isTabbing: boolean = false;\n  @State() mode?: \"doughnut\" | \"bar\";\n  @State() userIsNavigating: boolean = false;\n\n  private uid: string = generateId();\n  private total!: number;\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\n  private slicesDetails: SliceDetails[] = [];\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\n\n  get popoverEl() {\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\n  }\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\n  }\n  get chartDetails(): ChartDetails | undefined {\n    return this.mode ? allChartsDetails[this.mode] : undefined;\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 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  componentWillLoad() {\n    if (!this.label) {\n      console.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\n    if (this.el.children.length !== 2) {\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\n    }\n\n    // Listen to parent for initial mode, and future changes\n    this.el.parentElement!.addEventListener(\n      \"wmProgressMonitorModeChange\",\n      (ev) => (this.mode = (ev as CustomEvent).detail)\n    );\n  }\n\n  @Listen(\"wmProgressSliceUpdated\")\n  async handleSliceUpdate() {\n    await getDetails.call(this, this.mode!);\n    forceUpdate(this.el);\n  }\n\n  @Watch(\"mode\")\n  handleModeUpdate() {\n    if (this.mode) {\n      getDetails.call(this, this.mode);\n    }\n  }\n\n  renderBarOrDoughnut() {\n    if (this.total > 0 && this.mode === \"bar\") {\n      return renderStackedBar.call(this, this.mode!);\n    } else {\n      return renderDoughnut.call(this, this.mode!);\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.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\n          role=\"application\"\n          aria-label={this.ariaLabelText}\n          tabindex=\"0\"\n          aria-roledescription={this.chartRoleDescription}\n          aria-describedby={`chart-instructions`}\n        >\n          <label\n            id={`label-${this.uid}`}\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\n            htmlFor={`graphic-${this.uid}`}\n          >\n            <span class=\"label-text\">{this.label}</span>\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\n          </label>\n          {this.mode && this.renderBarOrDoughnut()}\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\n        </div>\n        {renderInstructionsText()}\n      </Host>\n    );\n  }\n}\n"]}