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

@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

Files changed (605) hide show

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

	@@ -1 +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]),\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}
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}

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

@@ -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 CHANGED Viewed

	@@ -1 +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\";\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}
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}

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

@@ -3,188 +3,188 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-53aff314.js');
-const chartFunctions = require('./chartFunctions-9dce0ea3.js');
+const functions = require('./functions-d2d99997.js');
+const chartFunctions = require('./chartFunctions-2f04ab6a.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;