@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/cjs/wm-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wm-button.entry.cjs.js","mappings":"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","names":["generateId","toBool","getIconCodeFromName","adjustTooltipPlacement","h","Host"],"sources":["./src/components/wm-button/wm-button.scss?tag=wm-button&encapsulation=shadow","./src/components/wm-button/wm-button.tsx"],"sourcesContent":[":host([disabled]),\n:host(.button-disabled) {\n  pointer-events: none;\n}\n\n:host([disabled=\"false\"]) {\n  // override disabled behavior from occuring when the string is \"false\", which would evaluate as truthy\n  pointer-events: initial;\n}\n\n:host,\nwm-button {\n  display: inline-block;\n  width: fit-content;\n  position: relative; // for tooltip\n  @include box-shadow(none);\n\n  .sr-only {\n    @include srOnly;\n  }\n\n  @extend %wm-button;\n}\n","import { h, Component, Prop, Element, Listen, Watch, Host, State } from \"@stencil/core\";\nimport { getIconCodeFromName, TooltipPlacement, validButtonTypes } from \"../../global/interfaces\";\nimport { generateId, adjustTooltipPlacement, toBool } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-button\",\n  styleUrl: \"wm-button.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Button {\n  @Element() el!: HTMLWmButtonElement;\n  private buttonEl!: HTMLButtonElement;\n\n  // icon and tooltip have reflect set to true. Without reflect, the react wrappers don't expose the attribute\n  // and the component throws errors when they are required (when buttonType is icononly or navigational)\n  @Prop({ reflect: true }) disabled: boolean = false;\n  get isDisabled(): boolean {\n    // string \"false\" needs to be treated as bool False because react wrappers convert bool to string.\n    return toBool(this.disabled);\n  }\n  @Prop({ mutable: true }) buttonType: validButtonTypes | null = null;\n  @Prop({ mutable: true }) buttonStyle: validButtonTypes | null = null; // DEPRECATED in favor of button-type\n  get tempButtonType(): validButtonTypes {\n    // uses of this getter should be replaced with this.buttonType when buttonStyle is fully phased out\n    // don't forget to reset this.buttonType's default value to secondary\n    return this.buttonType || this.buttonStyle || \"secondary\";\n  }\n  @Prop({ reflect: true, mutable: true }) icon?: string;\n  @Prop() iconSize?: string;\n  @Prop() iconRotate?: number;\n  @Prop() iconFlip?: \"horizontal\" | \"vertical\";\n  @Prop({ reflect: true, mutable: true }) tooltip?: string;\n  @Prop() labelForIdenticalButtons?: string;\n  @Prop() tooltipPosition: TooltipPlacement = \"bottom-right\";\n  @Prop() permanentlyDelete?: boolean = false;\n  @Prop() textWrap: boolean = true;\n  @Prop() customBackground?: string;\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\n\n  @State() isTabbing: boolean = false;\n\n  private btnPos: any = { old: {}, new: {} }; // for tooltip position. old and new are DOMRect\n  private id = generateId();\n  private ariaPopup: boolean = false;\n\n  get isTruncated(): boolean {\n    return (\n      !!this.buttonEl && this.tempButtonType === \"textonly\" && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth\n    );\n  }\n\n  get hasTooltip(): boolean {\n    // tooltip is only rendered for icononly and navigational types, or if the button text is truncated\n    return this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\" || this.isTruncated;\n  }\n\n  get tooltipEl(): HTMLElement {\n    return document.getElementById(\"wm-tooltip\")!;\n  }\n\n  get buttonClasses() {\n    let classes = \"wm-button\";\n    classes += this.permanentlyDelete ? \" -permanentlydelete\" : \"\";\n    classes += this.tempButtonType ? \" -\" + this.tempButtonType : \" -secondary\";\n    classes += this.textWrap ? \"\" : \" nowrap\";\n    classes += this.isTabbing ? \" user-is-tabbing\" : \"\";\n    classes += this.isTruncated ? \" -truncated\" : \"\";\n    classes += this.customBackground === \"dark\" ? \" dark\" : \"\";\n    return classes;\n  }\n\n  get iconStyles() {\n    let transformStyle = \"\";\n    transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : \"\";\n    transformStyle += this.iconFlip === \"horizontal\" ? `scaleX(-1)` : \"\";\n    transformStyle += this.iconFlip === \"vertical\" ? `scaleY(-1)` : \"\";\n\n    return {\n      ...(this.iconSize && { fontSize: this.iconSize }),\n      ...((this.iconRotate || this.iconFlip) && { transform: transformStyle }),\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  // we need to listen for scroll events during the capture phase because they do not bubble up\n  // there can be layouts where the main content has 100vh and overflows\n  // in these cases window will register no scroll events unless we catch on they way down\n  @Listen(\"scroll\", { target: \"window\", capture: true })\n  handleScroll() {\n    if (this.tooltipVisible) {\n      this.hideTooltip();\n    }\n  }\n\n  @Watch(\"buttonType\")\n  validateType(newValue: string) {\n    const valid = [\n      \"primary\",\n      \"secondary\",\n      \"textonly\",\n      \"icononly\",\n      \"navigational\",\n      \"selector\",\n      \"selector-primary\",\n      \"pairpositive\",\n      \"pairnegative\",\n    ].includes(newValue);\n\n    if (!valid) {\n      this.buttonType = \"secondary\";\n    }\n\n    this.validateIcon();\n  }\n\n  // remove entire watcher after buttonStyle has been fully removed\n  @Watch(\"buttonStyle\")\n  validateDeprecatedType(newValue: string) {\n    const valid = [\"primary\", \"secondary\", \"textonly\", \"icononly\", \"navigational\", \"selector\"].includes(newValue);\n\n    if (!valid) {\n      this.buttonStyle = \"secondary\";\n    }\n\n    this.validateIcon();\n  }\n\n  @Watch(\"icon\")\n  updateIcon() {\n    this.icon = getIconCodeFromName(this.icon!);\n  }\n\n  validateIcon() {\n    switch (this.tempButtonType) {\n      case \"icononly\":\n      case \"navigational\":\n        // if the style is icononly or navigational...\n        // - an icon must be provided\n        if (!this.icon) {\n          console.error(\n            \"wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.\"\n          );\n        }\n        // - if no tooltip text was passed and we couldn't generate one, throw an error\n        if (!this.tooltip) {\n          console.error(\n            \"wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.\"\n          );\n        }\n        break;\n      case \"pairpositive\":\n        this.icon = \"f12c\";\n        break;\n      case \"pairnegative\":\n        this.icon = \"f739\";\n        break;\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Enter\":\n        ev.preventDefault();\n        if (!this.isDisabled) {\n          this.el.click();\n        }\n        break;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.buttonStyle) {\n      console.warn(\"wm-button: button-style has been deprecated as of v3.1.0. Please use button-type instead.\");\n    }\n\n    this.validateType(this.tempButtonType);\n\n    if (this.icon) {\n      this.icon = this.icon = getIconCodeFromName(this.icon);\n    }\n  }\n\n  componentDidLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    this.ariaPopup = !!this.el.getAttribute(\"aria-haspopup\");\n\n    this.btnPos.new = this.buttonEl.getBoundingClientRect();\n  }\n\n  showTooltip() {\n    if (this.hasTooltip) {\n      // set tooltip text\n      let tooltipText = \"\";\n      if (this.isTruncated && this.el.textContent) {\n        // when truncated, tooltip text is the button's content\n        tooltipText = this.el.textContent;\n      } else if (this.tooltip) {\n        // otherwise it is the tooltip property if present\n        tooltipText = this.tooltip;\n      }\n      this.tooltipEl.textContent = tooltipText;\n\n      // tooltip only has a maxWidth if it contains whitespace and can break\n      const hasNoWhitespace = tooltipText.match(/^[^\\s]+$/);\n      if (hasNoWhitespace) {\n        this.tooltipEl.classList.add(\"single-word\");\n        this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\n      } else {\n        this.tooltipEl.classList.remove(\"single-word\");\n        this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\n      }\n\n      // adjust placement in case there is no space to place the tooltip where specified via prop\n      // calculation outside of the function to keep it pure\n      const adjustedTooltipPlacement = adjustTooltipPlacement(this.tooltipPosition, this.buttonEl, this.tooltipEl);\n\n      this.btnPos.old = {};\n      const tooltipRect = this.tooltipEl.getBoundingClientRect();\n      this.tooltipEl.style.transitionDelay = \"500ms\";\n      this.tooltipEl.style.opacity = \"1\";\n      // This slight delay fixes an issue for keyboard users:\n      // if they tab to a button out of screen bounds, the page scrolls\n      // and hideTooltip() would be triggered before the tooltip would show\n      setTimeout(() => {\n        this.tooltipVisible = true;\n        this.positionTooltip(adjustedTooltipPlacement, tooltipRect);\n      }, 50);\n    }\n  }\n\n  positionTooltip(tPos: string, tooltipRect: DOMRect) {\n    if (this.tooltipVisible) {\n      window.requestAnimationFrame(() => this.positionTooltip(tPos, tooltipRect));\n    }\n    this.btnPos.new = this.buttonEl.getBoundingClientRect();\n    if (this.btnPos.new.top != this.btnPos.old.top || this.btnPos.new.left != this.btnPos.old.left) {\n      // this is to figure out how to offset, given the size of the button and of the tooltip\n      // to get the center positions, calculate the difference between the button width and the tooltip width\n      const vDiff = (this.btnPos.new.height - tooltipRect.height) / 2;\n      const hDiff = (this.btnPos.new.width - tooltipRect.width) / 2;\n      // the naming convention defaults to center in the absence of a value\n      // Values \"top\" and \"bottom\" imply horizontal centering; Values \"right\" and \"left\" imply vertical centering\n      // therefore we first set to center first, then adjust accordingly\n      let vPos = this.btnPos.new.top + vDiff;\n      let hPos = this.btnPos.new.left + hDiff;\n\n      if (tPos.includes(\"top\")) {\n        vPos = this.btnPos.new.top - tooltipRect.height - 8;\n      }\n      if (tPos.includes(\"bottom\")) {\n        vPos = this.btnPos.new.bottom + 8;\n      }\n      if (tPos.includes(\"left\")) {\n        hPos = this.btnPos.new.left - tooltipRect.width - 8;\n      }\n      if (tPos.includes(\"right\")) {\n        hPos = this.btnPos.new.right + 8;\n      }\n\n      // after all positioning has been calculated, if tooltip is off-screen or closer than 24px it is readjusted\n      // this only occurs when the tooltip is overflowing to the left and is positioned top or bottom\n      // (button placed too far left, or screen size under 268px)\n      hPos = Math.max(hPos, 24);\n      this.tooltipEl.style.setProperty(\"--wmTooltipTop\", vPos + \"px\");\n      this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", hPos + \"px\");\n      // this.tooltipEl.style.top = vPos + \"px\";\n      // this.tooltipEl.style.left = hPos + \"px\";\n      // this.tooltipEl.style.top = (vPos / 16).toString() + \"rem\";\n      // this.tooltipEl.style.left = (hPos / 16).toString() + \"rem\";\n\n      this.btnPos.old = this.btnPos.new;\n    }\n  }\n\n  hideTooltip() {\n    if (this.hasTooltip) {\n      this.tooltipEl.style.transitionDelay = \"0s\";\n      this.tooltipEl.style.opacity = \"0\";\n      this.tooltipVisible = false;\n    }\n  }\n\n  showTooltipForKeyboardUsers() {\n    if (this.isTabbing) {\n      this.showTooltip();\n    }\n  }\n\n  getAriaLabel() {\n    if (this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\") {\n      return this.labelForIdenticalButtons || this.tooltip;\n    }\n\n    if (this.labelForIdenticalButtons) {\n      return this.labelForIdenticalButtons;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.isDisabled ? \"button-disabled\" : \"\"}>\n        <button\n          id={this.id}\n          class={`${this.buttonClasses}`}\n          disabled={this.isDisabled}\n          ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n          aria-label={this.getAriaLabel()}\n          aria-hasPopup={this.ariaPopup ? \"menu\" : null}\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltipForKeyboardUsers()}\n          onBlur={() => this.hideTooltip()}\n          onClick={() => this.hideTooltip()}\n        >\n          {this.icon && (\n            <span class=\"mdi\" style={this.iconStyles}>\n              {String.fromCodePoint(parseInt(`0x${this.icon}`))}\n            </span>\n          )}\n          <span class=\"button-text\">\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"wm-button.entry.cjs.js","mappings":"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","names":["generateId","toBool","getIconCodeFromName","adjustTooltipPlacement","h","Host"],"sources":["./src/components/wm-button/wm-button.scss?tag=wm-button&encapsulation=shadow","./src/components/wm-button/wm-button.tsx"],"sourcesContent":[":host([disabled]),\r\n:host(.button-disabled) {\r\n  pointer-events: none;\r\n}\r\n\r\n:host([disabled=\"false\"]) {\r\n  // override disabled behavior from occuring when the string is \"false\", which would evaluate as truthy\r\n  pointer-events: initial;\r\n}\r\n\r\n:host,\r\nwm-button {\r\n  display: inline-block;\r\n  width: fit-content;\r\n  position: relative; // for tooltip\r\n  @include box-shadow(none);\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n\r\n  @extend %wm-button;\r\n}\r\n","import { h, Component, Prop, Element, Listen, Watch, Host, State } from \"@stencil/core\";\r\nimport { getIconCodeFromName, TooltipPlacement, validButtonTypes } from \"../../global/interfaces\";\r\nimport { generateId, adjustTooltipPlacement, toBool } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-button\",\r\n  styleUrl: \"wm-button.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Button {\r\n  @Element() el!: HTMLWmButtonElement;\r\n  private buttonEl!: HTMLButtonElement;\r\n\r\n  // icon and tooltip have reflect set to true. Without reflect, the react wrappers don't expose the attribute\r\n  // and the component throws errors when they are required (when buttonType is icononly or navigational)\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  get isDisabled(): boolean {\r\n    // string \"false\" needs to be treated as bool False because react wrappers convert bool to string.\r\n    return toBool(this.disabled);\r\n  }\r\n  @Prop({ mutable: true }) buttonType: validButtonTypes | null = null;\r\n  @Prop({ mutable: true }) buttonStyle: validButtonTypes | null = null; // DEPRECATED in favor of button-type\r\n  get tempButtonType(): validButtonTypes {\r\n    // uses of this getter should be replaced with this.buttonType when buttonStyle is fully phased out\r\n    // don't forget to reset this.buttonType's default value to secondary\r\n    return this.buttonType || this.buttonStyle || \"secondary\";\r\n  }\r\n  @Prop({ reflect: true, mutable: true }) icon?: string;\r\n  @Prop() iconSize?: string;\r\n  @Prop() iconRotate?: number;\r\n  @Prop() iconFlip?: \"horizontal\" | \"vertical\";\r\n  @Prop({ reflect: true, mutable: true }) tooltip?: string;\r\n  @Prop() labelForIdenticalButtons?: string;\r\n  @Prop() tooltipPosition: TooltipPlacement = \"bottom-right\";\r\n  @Prop() permanentlyDelete?: boolean = false;\r\n  @Prop() textWrap: boolean = true;\r\n  @Prop() customBackground?: string;\r\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\r\n\r\n  @State() isTabbing: boolean = false;\r\n\r\n  private btnPos: any = { old: {}, new: {} }; // for tooltip position. old and new are DOMRect\r\n  private id = generateId();\r\n  private ariaPopup: boolean = false;\r\n\r\n  get isTruncated(): boolean {\r\n    return (\r\n      !!this.buttonEl && this.tempButtonType === \"textonly\" && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth\r\n    );\r\n  }\r\n\r\n  get hasTooltip(): boolean {\r\n    // tooltip is only rendered for icononly and navigational types, or if the button text is truncated\r\n    return this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\" || this.isTruncated;\r\n  }\r\n\r\n  get tooltipEl(): HTMLElement {\r\n    return document.getElementById(\"wm-tooltip\")!;\r\n  }\r\n\r\n  get buttonClasses() {\r\n    let classes = \"wm-button\";\r\n    classes += this.permanentlyDelete ? \" -permanentlydelete\" : \"\";\r\n    classes += this.tempButtonType ? \" -\" + this.tempButtonType : \" -secondary\";\r\n    classes += this.textWrap ? \"\" : \" nowrap\";\r\n    classes += this.isTabbing ? \" user-is-tabbing\" : \"\";\r\n    classes += this.isTruncated ? \" -truncated\" : \"\";\r\n    classes += this.customBackground === \"dark\" ? \" dark\" : \"\";\r\n    return classes;\r\n  }\r\n\r\n  get iconStyles() {\r\n    let transformStyle = \"\";\r\n    transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : \"\";\r\n    transformStyle += this.iconFlip === \"horizontal\" ? `scaleX(-1)` : \"\";\r\n    transformStyle += this.iconFlip === \"vertical\" ? `scaleY(-1)` : \"\";\r\n\r\n    return {\r\n      ...(this.iconSize && { fontSize: this.iconSize }),\r\n      ...((this.iconRotate || this.iconFlip) && { transform: transformStyle }),\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  // we need to listen for scroll events during the capture phase because they do not bubble up\r\n  // there can be layouts where the main content has 100vh and overflows\r\n  // in these cases window will register no scroll events unless we catch on they way down\r\n  @Listen(\"scroll\", { target: \"window\", capture: true })\r\n  handleScroll() {\r\n    if (this.tooltipVisible) {\r\n      this.hideTooltip();\r\n    }\r\n  }\r\n\r\n  @Watch(\"buttonType\")\r\n  validateType(newValue: string) {\r\n    const valid = [\r\n      \"primary\",\r\n      \"secondary\",\r\n      \"textonly\",\r\n      \"icononly\",\r\n      \"navigational\",\r\n      \"selector\",\r\n      \"selector-primary\",\r\n      \"pairpositive\",\r\n      \"pairnegative\",\r\n    ].includes(newValue);\r\n\r\n    if (!valid) {\r\n      this.buttonType = \"secondary\";\r\n    }\r\n\r\n    this.validateIcon();\r\n  }\r\n\r\n  // remove entire watcher after buttonStyle has been fully removed\r\n  @Watch(\"buttonStyle\")\r\n  validateDeprecatedType(newValue: string) {\r\n    const valid = [\"primary\", \"secondary\", \"textonly\", \"icononly\", \"navigational\", \"selector\"].includes(newValue);\r\n\r\n    if (!valid) {\r\n      this.buttonStyle = \"secondary\";\r\n    }\r\n\r\n    this.validateIcon();\r\n  }\r\n\r\n  @Watch(\"icon\")\r\n  updateIcon() {\r\n    this.icon = getIconCodeFromName(this.icon!);\r\n  }\r\n\r\n  validateIcon() {\r\n    switch (this.tempButtonType) {\r\n      case \"icononly\":\r\n      case \"navigational\":\r\n        // if the style is icononly or navigational...\r\n        // - an icon must be provided\r\n        if (!this.icon) {\r\n          console.error(\r\n            \"wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.\"\r\n          );\r\n        }\r\n        // - if no tooltip text was passed and we couldn't generate one, throw an error\r\n        if (!this.tooltip) {\r\n          console.error(\r\n            \"wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.\"\r\n          );\r\n        }\r\n        break;\r\n      case \"pairpositive\":\r\n        this.icon = \"f12c\";\r\n        break;\r\n      case \"pairnegative\":\r\n        this.icon = \"f739\";\r\n        break;\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    switch (ev.key) {\r\n      case \"Enter\":\r\n        ev.preventDefault();\r\n        if (!this.isDisabled) {\r\n          this.el.click();\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.buttonStyle) {\r\n      console.warn(\"wm-button: button-style has been deprecated as of v3.1.0. Please use button-type instead.\");\r\n    }\r\n\r\n    this.validateType(this.tempButtonType);\r\n\r\n    if (this.icon) {\r\n      this.icon = this.icon = getIconCodeFromName(this.icon);\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.ariaPopup = !!this.el.getAttribute(\"aria-haspopup\");\r\n\r\n    this.btnPos.new = this.buttonEl.getBoundingClientRect();\r\n  }\r\n\r\n  showTooltip() {\r\n    if (this.hasTooltip) {\r\n      // set tooltip text\r\n      let tooltipText = \"\";\r\n      if (this.isTruncated && this.el.textContent) {\r\n        // when truncated, tooltip text is the button's content\r\n        tooltipText = this.el.textContent;\r\n      } else if (this.tooltip) {\r\n        // otherwise it is the tooltip property if present\r\n        tooltipText = this.tooltip;\r\n      }\r\n      this.tooltipEl.textContent = tooltipText;\r\n\r\n      // tooltip only has a maxWidth if it contains whitespace and can break\r\n      const hasNoWhitespace = tooltipText.match(/^[^\\s]+$/);\r\n      if (hasNoWhitespace) {\r\n        this.tooltipEl.classList.add(\"single-word\");\r\n        this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\r\n      } else {\r\n        this.tooltipEl.classList.remove(\"single-word\");\r\n        this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\r\n      }\r\n\r\n      // adjust placement in case there is no space to place the tooltip where specified via prop\r\n      // calculation outside of the function to keep it pure\r\n      const adjustedTooltipPlacement = adjustTooltipPlacement(this.tooltipPosition, this.buttonEl, this.tooltipEl);\r\n\r\n      this.btnPos.old = {};\r\n      const tooltipRect = this.tooltipEl.getBoundingClientRect();\r\n      this.tooltipEl.style.transitionDelay = \"500ms\";\r\n      this.tooltipEl.style.opacity = \"1\";\r\n      // This slight delay fixes an issue for keyboard users:\r\n      // if they tab to a button out of screen bounds, the page scrolls\r\n      // and hideTooltip() would be triggered before the tooltip would show\r\n      setTimeout(() => {\r\n        this.tooltipVisible = true;\r\n        this.positionTooltip(adjustedTooltipPlacement, tooltipRect);\r\n      }, 50);\r\n    }\r\n  }\r\n\r\n  positionTooltip(tPos: string, tooltipRect: DOMRect) {\r\n    if (this.tooltipVisible) {\r\n      window.requestAnimationFrame(() => this.positionTooltip(tPos, tooltipRect));\r\n    }\r\n    this.btnPos.new = this.buttonEl.getBoundingClientRect();\r\n    if (this.btnPos.new.top != this.btnPos.old.top || this.btnPos.new.left != this.btnPos.old.left) {\r\n      // this is to figure out how to offset, given the size of the button and of the tooltip\r\n      // to get the center positions, calculate the difference between the button width and the tooltip width\r\n      const vDiff = (this.btnPos.new.height - tooltipRect.height) / 2;\r\n      const hDiff = (this.btnPos.new.width - tooltipRect.width) / 2;\r\n      // the naming convention defaults to center in the absence of a value\r\n      // Values \"top\" and \"bottom\" imply horizontal centering; Values \"right\" and \"left\" imply vertical centering\r\n      // therefore we first set to center first, then adjust accordingly\r\n      let vPos = this.btnPos.new.top + vDiff;\r\n      let hPos = this.btnPos.new.left + hDiff;\r\n\r\n      if (tPos.includes(\"top\")) {\r\n        vPos = this.btnPos.new.top - tooltipRect.height - 8;\r\n      }\r\n      if (tPos.includes(\"bottom\")) {\r\n        vPos = this.btnPos.new.bottom + 8;\r\n      }\r\n      if (tPos.includes(\"left\")) {\r\n        hPos = this.btnPos.new.left - tooltipRect.width - 8;\r\n      }\r\n      if (tPos.includes(\"right\")) {\r\n        hPos = this.btnPos.new.right + 8;\r\n      }\r\n\r\n      // after all positioning has been calculated, if tooltip is off-screen or closer than 24px it is readjusted\r\n      // this only occurs when the tooltip is overflowing to the left and is positioned top or bottom\r\n      // (button placed too far left, or screen size under 268px)\r\n      hPos = Math.max(hPos, 24);\r\n      this.tooltipEl.style.setProperty(\"--wmTooltipTop\", vPos + \"px\");\r\n      this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", hPos + \"px\");\r\n      // this.tooltipEl.style.top = vPos + \"px\";\r\n      // this.tooltipEl.style.left = hPos + \"px\";\r\n      // this.tooltipEl.style.top = (vPos / 16).toString() + \"rem\";\r\n      // this.tooltipEl.style.left = (hPos / 16).toString() + \"rem\";\r\n\r\n      this.btnPos.old = this.btnPos.new;\r\n    }\r\n  }\r\n\r\n  hideTooltip() {\r\n    if (this.hasTooltip) {\r\n      this.tooltipEl.style.transitionDelay = \"0s\";\r\n      this.tooltipEl.style.opacity = \"0\";\r\n      this.tooltipVisible = false;\r\n    }\r\n  }\r\n\r\n  showTooltipForKeyboardUsers() {\r\n    if (this.isTabbing) {\r\n      this.showTooltip();\r\n    }\r\n  }\r\n\r\n  getAriaLabel() {\r\n    if (this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\") {\r\n      return this.labelForIdenticalButtons || this.tooltip;\r\n    }\r\n\r\n    if (this.labelForIdenticalButtons) {\r\n      return this.labelForIdenticalButtons;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={this.isDisabled ? \"button-disabled\" : \"\"}>\r\n        <button\r\n          id={this.id}\r\n          class={`${this.buttonClasses}`}\r\n          disabled={this.isDisabled}\r\n          ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\r\n          aria-label={this.getAriaLabel()}\r\n          aria-hasPopup={this.ariaPopup ? \"menu\" : null}\r\n          onMouseEnter={() => this.showTooltip()}\r\n          onMouseLeave={() => this.hideTooltip()}\r\n          onFocus={() => this.showTooltipForKeyboardUsers()}\r\n          onBlur={() => this.hideTooltip()}\r\n          onClick={() => this.hideTooltip()}\r\n        >\r\n          {this.icon && (\r\n            <span class=\"mdi\" style={this.iconStyles}>\r\n              {String.fromCodePoint(parseInt(`0x${this.icon}`))}\r\n            </span>\r\n          )}\r\n          <span class=\"button-text\">\r\n            <slot />\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/wm-chart-slice.cjs.entry.js

@@ -4,24 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1f84c034.js');
 
-const ChartSlice = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmChartSliceUpdated = index.createEvent(this, "wmChartSliceUpdated", 7);
-    this.legend = undefined;
-    this.amount = undefined;
-    this.popoverTitle = undefined;
-    this.popoverText = undefined;
-    this.popoverButtonText = undefined;
-  }
-  componentDidLoad() {
-    if (parseInt(this.amount) > 0 && !this.legend) {
-      throw new Error("wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart");
-    }
-  }
-  componentDidUpdate() {
-    this.wmChartSliceUpdated.emit();
-  }
+const ChartSlice = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmChartSliceUpdated = index.createEvent(this, "wmChartSliceUpdated", 7);
+    this.legend = undefined;
+    this.amount = undefined;
+    this.popoverTitle = undefined;
+    this.popoverText = undefined;
+    this.popoverButtonText = undefined;
+  }
+  componentDidLoad() {
+    if (parseInt(this.amount) > 0 && !this.legend) {
+      throw new Error("wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart");
+    }
+  }
+  componentDidUpdate() {
+    this.wmChartSliceUpdated.emit();
+  }
 };
 
 exports.wm_chart_slice = ChartSlice;

package/dist/cjs/wm-chart-slice.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wm-chart-slice.entry.cjs.js","mappings":";;;;;;MAKa,UAAU;;;;;;;;;;EASrB,gBAAgB;IACd,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAC9C,MAAM,IAAI,KAAK,CACb,oMAAoM,CACrM,CAAC;KACH;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;GACjC;;;;;","names":[],"sources":["./src/components/charts/wm-chart/wm-chart-slice.tsx"],"sourcesContent":["import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-chart-slice\",\n})\nexport class ChartSlice {\n  @Prop() legend?: string;\n  @Prop() amount?: string;\n  @Prop() popoverTitle?: string;\n  @Prop() popoverText?: string;\n  @Prop() popoverButtonText?: string;\n\n  @Event() wmChartSliceUpdated!: EventEmitter<void>;\n\n  componentDidLoad() {\n    if (parseInt(this.amount!) > 0 && !this.legend) {\n      throw new Error(\n        \"wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart\"\n      );\n    }\n  }\n\n  componentDidUpdate() {\n    this.wmChartSliceUpdated.emit();\n  }\n}\n"],"version":3}
+{"file":"wm-chart-slice.entry.cjs.js","mappings":";;;;;;MAKa,UAAU;;;;;;;;;;EASrB,gBAAgB;IACd,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAC9C,MAAM,IAAI,KAAK,CACb,oMAAoM,CACrM,CAAC;KACH;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;GACjC;;;;;","names":[],"sources":["./src/components/charts/wm-chart/wm-chart-slice.tsx"],"sourcesContent":["import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-chart-slice\",\r\n})\r\nexport class ChartSlice {\r\n  @Prop() legend?: string;\r\n  @Prop() amount?: string;\r\n  @Prop() popoverTitle?: string;\r\n  @Prop() popoverText?: string;\r\n  @Prop() popoverButtonText?: string;\r\n\r\n  @Event() wmChartSliceUpdated!: EventEmitter<void>;\r\n\r\n  componentDidLoad() {\r\n    if (parseInt(this.amount!) > 0 && !this.legend) {\r\n      throw new Error(\r\n        \"wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart\"\r\n      );\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.wmChartSliceUpdated.emit();\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/wm-chart.cjs.entry.js

@@ -3,188 +3,188 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-6d2a5824.js');
-const chartFunctions = require('./chartFunctions-5309f8ed.js');
+const functions = require('./functions-9ddaeb33.js');
+const chartFunctions = require('./chartFunctions-da36e4cb.js');
 
 const wmChartCss = ":host,wm-chart{display:block}:host .component-wrapper,wm-chart .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;outline:none;}:host .component-wrapper .label,wm-chart .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-chart .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-chart .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-chart .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .inner-stacked-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-chart .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type),wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-chart .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-chart .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value-wrapper,wm-chart .component-wrapper .value-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .component-wrapper .value-wrapper:not(:last-of-type),wm-chart .component-wrapper .value-wrapper:not(:last-of-type){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden,wm-chart .component-wrapper .value-wrapper .value.hidden{visibility:hidden}:host .component-wrapper path:active,wm-chart .component-wrapper path:active,:host .component-wrapper path:hover,wm-chart .component-wrapper path:hover,:host .component-wrapper path:focus,wm-chart .component-wrapper path:focus,:host .component-wrapper .stacked-bar-segment:active,wm-chart .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,wm-chart .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus,wm-chart .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper path:active.doughnut-segment,wm-chart .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-chart .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-chart .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .stacked-bar-segment:active.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-chart .component-wrapper path::-moz-focus-inner,:host .component-wrapper .stacked-bar-segment::-moz-focus-inner,wm-chart .component-wrapper .stacked-bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-chart .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-chart .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-chart .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-chart .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2plus label,wm-chart .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-chart .component-wrapper.doughnut2plus .label-text,:host .component-wrapper.doughnut3 label,wm-chart .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-chart .component-wrapper.doughnut3 .label-text{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 .component-wrapper.doughnut0,wm-chart .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-chart .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-chart .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-chart .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-chart .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-chart .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-chart .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-chart .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-chart .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-chart .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-chart .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-chart .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-chart .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-chart .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-chart .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-chart .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-chart .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-chart .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-chart .component-wrapper.bar2,:host .component-wrapper.bar3,wm-chart .component-wrapper.bar3,:host .component-wrapper.bar4,wm-chart .component-wrapper.bar4,:host .component-wrapper.bar5,wm-chart .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-chart .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-chart .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-chart .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.bar3 .hidden-values-warning,wm-chart .component-wrapper.bar3 .hidden-values-warning{margin-top:1.25rem}:host .component-wrapper.bar6,wm-chart .component-wrapper.bar6,:host .component-wrapper.bar7,wm-chart .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,wm-chart .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper,wm-chart .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,wm-chart .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart,wm-chart .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,wm-chart .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines,wm-chart .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, #8f8f8f 1px, transparent 1px);background-position:-1px;border-left:1px solid #8f8f8f;border-bottom:1px solid #8f8f8f;background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,wm-chart .component-wrapper.bar6 .rows,:host .component-wrapper.bar7 .rows,wm-chart .component-wrapper.bar7 .rows{display:grid;grid-template-columns:var(--labelWidth) auto;grid-auto-rows:minmax(30px, 1fr);-ms-flex-align:center;align-items:center;position:relative;z-index:1}:host .component-wrapper.bar6 .rows .label,wm-chart .component-wrapper.bar6 .rows .label,:host .component-wrapper.bar7 .rows .label,wm-chart .component-wrapper.bar7 .rows .label{font-weight:400;padding:0 0.75rem 0 0;text-align:right;margin:0.75rem 0}:host .component-wrapper.bar6 .rows .label.hidden,wm-chart .component-wrapper.bar6 .rows .label.hidden,:host .component-wrapper.bar7 .rows .label.hidden,wm-chart .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,wm-chart .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar,wm-chart .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,wm-chart .component-wrapper.bar6 .bar .value,:host .component-wrapper.bar7 .bar .value,wm-chart .component-wrapper.bar7 .bar .value{position:absolute;top:50%;right:-0.5rem;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .component-wrapper.bar6 .x-axis,wm-chart .component-wrapper.bar6 .x-axis,:host .component-wrapper.bar7 .x-axis,wm-chart .component-wrapper.bar7 .x-axis{margin-left:var(--labelWidth);margin-right:var(--chartPadding);display:-ms-flexbox;display:flex;postion:relative}:host .component-wrapper.bar6 .tick,wm-chart .component-wrapper.bar6 .tick,:host .component-wrapper.bar7 .tick,wm-chart .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,wm-chart .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span,wm-chart .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,wm-chart .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero,wm-chart .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,wm-chart .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,wm-chart .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,wm-chart .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,wm-chart .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,wm-chart .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus,wm-chart .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,wm-chart .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,wm-chart .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,wm-chart .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,wm-chart .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,wm-chart .component-wrapper.bar7 .bar:hover.bar,:host .component-wrapper.bar7 .bar:focus.bar,wm-chart .component-wrapper.bar7 .bar:focus.bar{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper.left-label,wm-chart .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-chart .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .hidden-values-warning,wm-chart .component-wrapper .hidden-values-warning{font-size:0.75rem;font-style:italic;max-width:100%}:host #chart-instructions,wm-chart #chart-instructions{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 .component-wrapper .legend-wrapper,wm-chart .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-chart .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.bar1,wm-chart .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar6,wm-chart .component-wrapper .legend-wrapper .legend.bar6{display:none}:host .component-wrapper .legend-wrapper .legend.--top,wm-chart .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-chart .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-chart .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-chart .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-chart .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-chart .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar3,wm-chart .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";
 
-const Chart = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.uid = functions.generateId();
-    this.slicesDetails = [];
-    this.handleStackedBarResize = functions.debounce(async () => {
-      let hasHiddenBarValue = false;
-      // if any value text overlaps with another, hide it and display warning
-      const valueEls = this.el.shadowRoot.querySelectorAll(".value");
-      if (valueEls.length) {
-        let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
-        let margin = 4;
-        valueEls.forEach((valueEl, idx) => {
-          // checks are to the left of each valueEl, so skip the first one
-          if (idx > 0) {
-            const bounds = valueEl.getBoundingClientRect();
-            if (bounds.left - margin < lastVisibleRightEdge) {
-              // left edge of current value is overlapping right edge of last visible value
-              valueEl.classList.add("hidden");
-              hasHiddenBarValue = true;
-            }
-            else {
-              valueEl.classList.remove("hidden");
-              lastVisibleRightEdge = bounds.right;
-            }
-          }
-        });
-      }
-      this.hasHiddenBarValue = hasHiddenBarValue;
-    }, 100);
-    this.debouncedUpdate = functions.debounce(async () => {
-      index.forceUpdate(this.el);
-    }, 10);
-    this.debouncedSliceUpdate = functions.debounce(async () => {
-      await chartFunctions.getDetails.call(this, this.currentChartType);
-      index.forceUpdate(this.el);
-    }, 100);
-    this.chartType = "doughnut1";
-    this.label = undefined;
-    this.labelWidth = "150px";
-    this.subinfo = undefined;
-    this.completionMessage = undefined;
-    this.valueFormat = undefined;
-    this.showValues = undefined;
-    this.showGrid = true;
-    this.showLegend = true;
-    this.showBarLegend = false;
-    this.notStartedColor = false;
-    this.labelPosition = "top";
-    this.isTabbing = false;
-    this.userIsNavigating = false;
-    this.hasHiddenBarValue = false;
-  }
-  get tempValueFormat() {
-    // use of this getter should be replaced with dateFormat when showValues is fully phased out
-    return this.valueFormat || this.showValues || "none";
-  }
-  get hybridType() {
-    return window.innerWidth > 1340 ? "doughnut0" : "bar1";
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get currentChartType() {
-    let current = this.chartType;
-    if (this.chartType === "hybrid") {
-      current = this.hybridType;
-    }
-    else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
-      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
-      current = "doughnut2plus";
-    }
-    return current;
-  }
-  get chartDetails() {
-    return chartFunctions.allChartsDetails[this.currentChartType];
-  }
-  get ariaLabelText() {
-    let text = `${this.label}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  get isDoughnut() {
-    return this.chartDetails.category === "doughnut";
-  }
-  get isStackedBar() {
-    return this.chartDetails.category === "stackedBar";
-  }
-  get isSimpleBar() {
-    return this.chartDetails.category === "simpleBar";
-  }
-  get isBar() {
-    return this.isStackedBar || this.isSimpleBar;
-  }
-  get chartRoleDescription() {
-    return functions.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) {
-    chartFunctions.handleChartKeydown.call(this, ev);
-  }
-  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
-  async componentWillLoad() {
-    if (!this.label) {
-      throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-    }
-    if (this.showValues) {
-      console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
-    }
-    await chartFunctions.getDetails.call(this, this.currentChartType);
-    // rerender on resize
-    // unnecessary for doughnuts (except hybrid) as layout doesn't change
-    if (this.chartType === "hybrid" || !this.isDoughnut) {
-      const resizeObserver = new ResizeObserver(() => {
-        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
-      });
-      resizeObserver.observe(this.el);
-    }
-  }
-  handleSliceUpdate() {
-    this.debouncedSliceUpdate();
-  }
-  /* RENDERING */
-  renderBarText(s, idx) {
-    let val;
-    if (this.tempValueFormat === "percentage") {
-      // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
-      val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
-    }
-    else if (this.tempValueFormat === "amount") {
-      val = s.amount;
-    }
-    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
-    // in order to not disturb the positioning of the other value texts in the entire row
-    return (index.h("div", { class: "value-wrapper", style: {
-        width: `calc(${chartFunctions.amountToPercent(s.amount, this.total, false)}%
-        ${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
-      } }, index.h("span", { class: "value" }, s.amount > 0 && val)));
-  }
-  drawAxis() {
-    if (this.currentChartType === "bar3") {
-      return (index.h("svg", { class: "axis" }, index.h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), index.h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), index.h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), index.h("text", { x: "0.5", y: "-6" }, "0%"), index.h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), index.h("text", { x: "100%", y: "-6" }, "100%")));
-    }
-  }
-  renderChart() {
-    if (this.total > 0) {
-      if (this.isStackedBar) {
-        return chartFunctions.renderStackedBar.call(this, this.currentChartType);
-      }
-      else if (this.isSimpleBar) {
-        return chartFunctions.renderSimpleBar.call(this, this.currentChartType);
-      }
-      else if (this.isDoughnut) {
-        return chartFunctions.renderDoughnut.call(this, this.currentChartType);
-      }
-    }
-  }
-  render() {
-    return (index.h(index.Host, { onBlur: () => chartFunctions.exitChart.call(this) }, index.h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, index.h("span", { class: "label-text" }, this.label), this.subinfo ? index.h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && chartFunctions.renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && chartFunctions.renderLegend.call(this, this.currentChartType), index.h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? chartFunctions.renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && chartFunctions.renderHiddenValuesMessage()), chartFunctions.renderInstructionsText()));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-};
+const Chart = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.uid = functions.generateId();
+    this.slicesDetails = [];
+    this.handleStackedBarResize = functions.debounce(async () => {
+      let hasHiddenBarValue = false;
+      // if any value text overlaps with another, hide it and display warning
+      const valueEls = this.el.shadowRoot.querySelectorAll(".value");
+      if (valueEls.length) {
+        let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
+        let margin = 4;
+        valueEls.forEach((valueEl, idx) => {
+          // checks are to the left of each valueEl, so skip the first one
+          if (idx > 0) {
+            const bounds = valueEl.getBoundingClientRect();
+            if (bounds.left - margin < lastVisibleRightEdge) {
+              // left edge of current value is overlapping right edge of last visible value
+              valueEl.classList.add("hidden");
+              hasHiddenBarValue = true;
+            }
+            else {
+              valueEl.classList.remove("hidden");
+              lastVisibleRightEdge = bounds.right;
+            }
+          }
+        });
+      }
+      this.hasHiddenBarValue = hasHiddenBarValue;
+    }, 100);
+    this.debouncedUpdate = functions.debounce(async () => {
+      index.forceUpdate(this.el);
+    }, 10);
+    this.debouncedSliceUpdate = functions.debounce(async () => {
+      await chartFunctions.getDetails.call(this, this.currentChartType);
+      index.forceUpdate(this.el);
+    }, 100);
+    this.chartType = "doughnut1";
+    this.label = undefined;
+    this.labelWidth = "150px";
+    this.subinfo = undefined;
+    this.completionMessage = undefined;
+    this.valueFormat = undefined;
+    this.showValues = undefined;
+    this.showGrid = true;
+    this.showLegend = true;
+    this.showBarLegend = false;
+    this.notStartedColor = false;
+    this.labelPosition = "top";
+    this.isTabbing = false;
+    this.userIsNavigating = false;
+    this.hasHiddenBarValue = false;
+  }
+  get tempValueFormat() {
+    // use of this getter should be replaced with dateFormat when showValues is fully phased out
+    return this.valueFormat || this.showValues || "none";
+  }
+  get hybridType() {
+    return window.innerWidth > 1340 ? "doughnut0" : "bar1";
+  }
+  get popoverEl() {
+    return this.el.shadowRoot.querySelector("priv-chart-popover");
+  }
+  get sliceEls() {
+    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+  }
+  get currentChartType() {
+    let current = this.chartType;
+    if (this.chartType === "hybrid") {
+      current = this.hybridType;
+    }
+    else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
+      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
+      current = "doughnut2plus";
+    }
+    return current;
+  }
+  get chartDetails() {
+    return chartFunctions.allChartsDetails[this.currentChartType];
+  }
+  get ariaLabelText() {
+    let text = `${this.label}`;
+    if (this.subinfo) {
+      text += ` ${this.subinfo}`;
+    }
+    return text;
+  }
+  get isDoughnut() {
+    return this.chartDetails.category === "doughnut";
+  }
+  get isStackedBar() {
+    return this.chartDetails.category === "stackedBar";
+  }
+  get isSimpleBar() {
+    return this.chartDetails.category === "simpleBar";
+  }
+  get isBar() {
+    return this.isStackedBar || this.isSimpleBar;
+  }
+  get chartRoleDescription() {
+    return functions.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) {
+    chartFunctions.handleChartKeydown.call(this, ev);
+  }
+  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
+  async componentWillLoad() {
+    if (!this.label) {
+      throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
+    }
+    if (this.showValues) {
+      console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
+    }
+    await chartFunctions.getDetails.call(this, this.currentChartType);
+    // rerender on resize
+    // unnecessary for doughnuts (except hybrid) as layout doesn't change
+    if (this.chartType === "hybrid" || !this.isDoughnut) {
+      const resizeObserver = new ResizeObserver(() => {
+        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
+      });
+      resizeObserver.observe(this.el);
+    }
+  }
+  handleSliceUpdate() {
+    this.debouncedSliceUpdate();
+  }
+  /* RENDERING */
+  renderBarText(s, idx) {
+    let val;
+    if (this.tempValueFormat === "percentage") {
+      // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
+      val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
+    }
+    else if (this.tempValueFormat === "amount") {
+      val = s.amount;
+    }
+    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
+    // in order to not disturb the positioning of the other value texts in the entire row
+    return (index.h("div", { class: "value-wrapper", style: {
+        width: `calc(${chartFunctions.amountToPercent(s.amount, this.total, false)}%
+        ${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
+      } }, index.h("span", { class: "value" }, s.amount > 0 && val)));
+  }
+  drawAxis() {
+    if (this.currentChartType === "bar3") {
+      return (index.h("svg", { class: "axis" }, index.h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), index.h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), index.h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), index.h("text", { x: "0.5", y: "-6" }, "0%"), index.h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), index.h("text", { x: "100%", y: "-6" }, "100%")));
+    }
+  }
+  renderChart() {
+    if (this.total > 0) {
+      if (this.isStackedBar) {
+        return chartFunctions.renderStackedBar.call(this, this.currentChartType);
+      }
+      else if (this.isSimpleBar) {
+        return chartFunctions.renderSimpleBar.call(this, this.currentChartType);
+      }
+      else if (this.isDoughnut) {
+        return chartFunctions.renderDoughnut.call(this, this.currentChartType);
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, { onBlur: () => chartFunctions.exitChart.call(this) }, index.h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, index.h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, index.h("span", { class: "label-text" }, this.label), this.subinfo ? index.h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && chartFunctions.renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && chartFunctions.renderLegend.call(this, this.currentChartType), index.h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? chartFunctions.renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && chartFunctions.renderHiddenValuesMessage()), chartFunctions.renderInstructionsText()));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
+};
 Chart.style = wmChartCss;
 
 exports.wm_chart = Chart;