@quartzds/core 1.0.0-beta.37 → 1.0.0-beta.38
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.
- package/components/tooltip.js +4 -4
- package/components/tooltip.js.map +1 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/qds-tooltip.entry.js +4 -4
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/hydrate/index.js +4 -4
- package/package.json +1 -1
package/components/tooltip.js
CHANGED
|
@@ -57,7 +57,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
57
57
|
this.aDisplay = undefined;
|
|
58
58
|
this.side = 'top';
|
|
59
59
|
this.aShape = '';
|
|
60
|
-
this.aViewbox = '';
|
|
60
|
+
this.aViewbox = '0 0 0 0';
|
|
61
61
|
this.aHeight = 0;
|
|
62
62
|
this.aWidth = 0;
|
|
63
63
|
this.aGap = 0;
|
|
@@ -210,14 +210,14 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
210
210
|
this.disconnectReferenceElement();
|
|
211
211
|
}
|
|
212
212
|
render() {
|
|
213
|
-
return (h(Host, { key: '
|
|
213
|
+
return (h(Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
214
214
|
position: this.hostPosition,
|
|
215
215
|
transform: this.hostTransform,
|
|
216
|
-
} }, h("slot", { key: '
|
|
216
|
+
} }, h("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), h("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
217
217
|
left: this.aX,
|
|
218
218
|
top: this.aY,
|
|
219
219
|
display: this.aDisplay,
|
|
220
|
-
} }, h("path", { key: '
|
|
220
|
+
} }, h("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
221
221
|
}
|
|
222
222
|
async handleFocus() {
|
|
223
223
|
if (!this.disabled)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"tooltip.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host([aria-hidden='true']) {\n display: none;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n\n &[data-side='bottom'] {\n bottom: 100%;\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: 100%;\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: 100%;\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: 100%;\n }\n}\n\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsTooltipElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = ''\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\n if (this.cleanup) this.cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-hidden', 'true')\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"tooltip.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host([aria-hidden='true']) {\n display: none;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n\n &[data-side='bottom'] {\n bottom: 100%;\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: 100%;\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: 100%;\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: 100%;\n }\n}\n\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsTooltipElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = '0 0 0 0'\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\n if (this.cleanup) this.cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-hidden', 'true')\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
|
@@ -59,7 +59,7 @@ const Tooltip = class {
|
|
|
59
59
|
this.aDisplay = undefined;
|
|
60
60
|
this.side = 'top';
|
|
61
61
|
this.aShape = '';
|
|
62
|
-
this.aViewbox = '';
|
|
62
|
+
this.aViewbox = '0 0 0 0';
|
|
63
63
|
this.aHeight = 0;
|
|
64
64
|
this.aWidth = 0;
|
|
65
65
|
this.aGap = 0;
|
|
@@ -212,14 +212,14 @@ const Tooltip = class {
|
|
|
212
212
|
this.disconnectReferenceElement();
|
|
213
213
|
}
|
|
214
214
|
render() {
|
|
215
|
-
return (index.h(index.Host, { key: '
|
|
215
|
+
return (index.h(index.Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
216
216
|
position: this.hostPosition,
|
|
217
217
|
transform: this.hostTransform,
|
|
218
|
-
} }, index.h("slot", { key: '
|
|
218
|
+
} }, index.h("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), index.h("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
219
219
|
left: this.aX,
|
|
220
220
|
top: this.aY,
|
|
221
221
|
display: this.aDisplay,
|
|
222
|
-
} }, index.h("path", { key: '
|
|
222
|
+
} }, index.h("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
223
223
|
}
|
|
224
224
|
async handleFocus() {
|
|
225
225
|
if (!this.disabled)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-tooltip.entry.cjs.js","mappings":"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","names":["ignorePromise","propertyToPx","invariant","offset","flip","shift","limitShift","arrow","computePosition","roundByDPR","autoUpdate","isTouchDevice","h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host([aria-hidden='true']) {\n display: none;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n\n &[data-side='bottom'] {\n bottom: 100%;\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: 100%;\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: 100%;\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: 100%;\n }\n}\n\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsTooltipElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = ''\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\n if (this.cleanup) this.cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-hidden', 'true')\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-tooltip.entry.cjs.js","mappings":"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","names":["ignorePromise","propertyToPx","invariant","offset","flip","shift","limitShift","arrow","computePosition","roundByDPR","autoUpdate","isTouchDevice","h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host([aria-hidden='true']) {\n display: none;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n\n &[data-side='bottom'] {\n bottom: 100%;\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: 100%;\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: 100%;\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: 100%;\n }\n}\n\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsTooltipElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = '0 0 0 0'\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\n if (this.cleanup) this.cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-hidden', 'true')\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -55,7 +55,7 @@ const Tooltip = class {
|
|
|
55
55
|
this.aDisplay = undefined;
|
|
56
56
|
this.side = 'top';
|
|
57
57
|
this.aShape = '';
|
|
58
|
-
this.aViewbox = '';
|
|
58
|
+
this.aViewbox = '0 0 0 0';
|
|
59
59
|
this.aHeight = 0;
|
|
60
60
|
this.aWidth = 0;
|
|
61
61
|
this.aGap = 0;
|
|
@@ -208,14 +208,14 @@ const Tooltip = class {
|
|
|
208
208
|
this.disconnectReferenceElement();
|
|
209
209
|
}
|
|
210
210
|
render() {
|
|
211
|
-
return (h(Host, { key: '
|
|
211
|
+
return (h(Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
212
212
|
position: this.hostPosition,
|
|
213
213
|
transform: this.hostTransform,
|
|
214
|
-
} }, h("slot", { key: '
|
|
214
|
+
} }, h("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), h("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
215
215
|
left: this.aX,
|
|
216
216
|
top: this.aY,
|
|
217
217
|
display: this.aDisplay,
|
|
218
|
-
} }, h("path", { key: '
|
|
218
|
+
} }, h("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
219
219
|
}
|
|
220
220
|
async handleFocus() {
|
|
221
221
|
if (!this.disabled)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host([aria-hidden='true']) {\n display: none;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n\n &[data-side='bottom'] {\n bottom: 100%;\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: 100%;\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: 100%;\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: 100%;\n }\n}\n\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsTooltipElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = ''\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\n if (this.cleanup) this.cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-hidden', 'true')\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-tooltip.entry.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,qjEAAqjE,CAAC;AACzkE,yBAAe,UAAU;;AC8CzB,IAAI,kBAAkB,GAAG,CAAC,CAAA;MAWb,OAAO;;;;QAoIV,mBAAc,GAAG,KAAK,CAAA;QAEtB,kBAAa,GAAG,KAAK,CAAA;QAiPZ,sBAAiB,GAAG,CAAC,GAAgB;YACpD,IAAI,CAAC,qBAAqB,GAAG,GAAG,CAAA;SACjC,CAAA;QAEgB,0BAAqB,GAAG;YACvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;SAC3B,CAAA;QAMgB,eAAU,GAAG;YAC5B,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;SAClC,CAAA;QAMgB,oBAAe,GAAG;YACjC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;SACvC,CAAA;QAcgB,oBAAe,GAAG,CAAC,KAAY;YAC9C,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;SAC5C,CAAA;QAcgB,kBAAa,GAAG,CAAC,KAAY;YAC5C,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAA;SAC1C,CAAA;QAMgB,wBAAmB,GAAG;YACrC,aAAa,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;SAC3C,CAAA;;wBAxa2C,KAAK;;sBAoBP,KAAK;uBAMJ,KAAK;;yBAkBD,KAAK;;;;;;oBAiD5B,KAAK;;;oBAMC,KAAK;sBAET,EAAE;wBAEA,SAAS;uBAEV,CAAC;sBAEF,CAAC;oBAEH,CAAC;kBAEH,EAAE;kBAEF,EAAE;;;;;IAgBjB,MAAM,IAAI;QACf,IAAI,IAAI,CAAC,IAAI;YAAE,OAAM;QAErB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;YACrD,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAExE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;QACjD,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;;;;IAMM,MAAM,KAAK;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;QACxB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;YACrD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAE3E,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACjB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;QAC3B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAChD,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;KACjC;;;;;;;IASM,MAAM,WAAW;QACtB,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,CAAA;QAE3E,IAAI,CAAC,OAAO;YACV,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,8CAA8C,CAC/C,IAAI,CAAC,CAAA;QAER,IAAI,CAAC,MAAM;YACT,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;QAER,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAA;QAE3E,MAAM,UAAU,GACd,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;QAER,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QACtD,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,UAAU,IAAI,CAAC,CAAA;QAElD,IAAI,CAAC,MAAM;YACT,MAAM;gBACN,KAAK,IAAI,CAAC,MAAM,EAAE;gBAClB,KAAK,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;gBAChD,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;gBACrE,IAAI,CAAA;KACP;IAGS,MAAM,eAAe,CAAC,KAAiB;QAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;QACzC,MAAM,YAAY,GAChB,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;aAClC,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;gBAClD,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAA;QACjD,IAAI,CAAC,YAAY;YAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACtC;IASS,MAAM,gBAAgB;QAC9B,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAErC,IAAI,CAAC,UAAU,GAAG;YAChB,MAAM,CAAC;gBACL,GAAG,IAAI,CAAC,aAAa;gBACrB,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO;aACnC,CAAC;YACF,CAAC,IAAI,CAAC,MAAM;gBACV,IAAI,CAAC;oBACH,SAAS,EAAE,IAAI,CAAC,OAAO;oBACvB,GAAG,IAAI,CAAC,WAAW;iBACpB,CAAC;YACJ,CAAC,IAAI,CAAC,OAAO;gBACX,KAAK,CAAC;oBACJ,OAAO,EAAE,UAAU,EAAE;oBACrB,GAAG,IAAI,CAAC,YAAY;iBACrB,CAAC;YACJ,KAAK,CAAC;gBACJ,OAAO,EAAE,IAAI,CAAC,qBAAqB;aACpC,CAAC;SACH,CAAC,MAAM,CAAC,CAAC,UAAU,KAA+B,UAAU,KAAK,KAAK,CAAC,CAAA;KACzE;IAGO,MAAM,sBAAsB;;QAClC,IAAI,CAAC,0BAA0B,EAAE,CAAA;QAEjC,MAAM,cAAc,GAClB,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACjE,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;YACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;YACtD,IAAI,OAAO,KAAK,IAAI;gBAClB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;YAChE,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAA;SAChC;;YAAM,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAA;QAE7C,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;YAAE,OAAM;QAElE,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;QAC3E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QAChE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC1E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC1E,MAAA,IAAI,CAAC,OAAO,EAAC,EAAE,QAAF,EAAE,GAAK,eAAe,kBAAkB,EAAE,EAAA;QACvD,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;KACxE;IAKO,MAAM,cAAc;QAC1B,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAEhC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,MAAM,eAAe,CACzE,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CACF,CAAA;QACD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAA;QAC5B,IAAI,CAAC,aAAa,GAAG,aAAa,UAAU,CAAC,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,CAAC,KAAK,CAAA;QAEvE,IAAI,CAAC,cAAc,CAAC,KAAK;YAAE,OAAM;QAEjC,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAErC,IAAI,cAAc,CAAC,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE;YAC3C,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;YACtB,OAAM;SACP;QACD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QAEzB,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAW,CAAA;QAC7C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAEhB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,KAAK,CAAA;QAE7C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;QAC3C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;KAC5C;IAGO,eAAe;QACrB,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAEhC,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;QAChC,IAAI,CAAC,OAAO,GAAG,UAAU,CACvB,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;YACE,aAAa,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;SACrC,EACD,IAAI,CAAC,iBAAiB,CACvB,CAAA;KACF;IAEM,MAAM,iBAAiB;QAC5B,IAAI,CAAC,aAAa,GAAG,aAAa,EAAE,CAAA;QACpC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAChD,MAAM,IAAI,CAAC,sBAAsB,EAAE,CAAA;QACnC,kBAAkB,IAAI,CAAC,CAAA;KACxB;IAEM,MAAM,gBAAgB;QAC3B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;KACzB;IAEM,oBAAoB;QACzB,IAAI,CAAC,0BAA0B,EAAE,CAAA;KAClC;IAEM,MAAM;QACX,QACE,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,EACpB,UAAU,EAAE,IAAI,CAAC,aAAa,EAC9B,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,YAAY,EAAE,IAAI,CAAC,eAAe,EAClC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,SAAS,EACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,YAAY;gBAC3B,SAAS,EAAE,IAAI,CAAC,aAAa;aAC9B,IAED,8DAAQ,EACR,8FAEa,IAAI,CAAC,IAAI,EACpB,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,CAAC,EAAE;gBACb,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,OAAO,EAAE,IAAI,CAAC,QAAQ;aACvB,IAED,6DAAM,KAAK,EAAC,WAAW,EAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAI,CACtC,CACD,EACR;KACF;IAUO,MAAM,WAAW;QACvB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;KACtC;IAMO,MAAM,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;KACtC;IAMO,MAAM,gBAAgB,CAAC,KAAY;QACzC,IACE,CAAC,IAAI,CAAC,cAAc;YACpB,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;YAChD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,OAAO;YAC/D,KAAK,YAAY,UAAU;YAC3B,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;YAC7C,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO;YAEpC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACrB;IAMO,MAAM,cAAc,CAAC,KAAY;QACvC,IAAI,EAAE,KAAK,YAAY,UAAU,CAAC;YAAE,OAAM;QAC1C,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;QAE/B,IACE,aAAa,YAAY,UAAU,CAAC,OAAO;YAC3C,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;YACrC,IAAI,CAAC,gBAAgB,KAAK,aAAa;YAEvC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACrB;IAMO,MAAM,oBAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;KACnE;IAMO,0BAA0B;QAChC,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;YAAE,OAAM;QAElE,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,OAAO,EACP,IAAI,CAAC,mBAAmB,CACzB,CAAA;QACH,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACnE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QACzE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;QACD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;QACD,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;KAC1D;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host([aria-hidden='true']) {\n display: none;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n\n &[data-side='bottom'] {\n bottom: 100%;\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: 100%;\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: 100%;\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: 100%;\n }\n}\n\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsTooltipElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = '0 0 0 0'\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\n if (this.cleanup) this.cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-hidden', 'true')\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
package/hydrate/index.js
CHANGED
|
@@ -11961,7 +11961,7 @@ class Tooltip {
|
|
|
11961
11961
|
this.aDisplay = undefined;
|
|
11962
11962
|
this.side = 'top';
|
|
11963
11963
|
this.aShape = '';
|
|
11964
|
-
this.aViewbox = '';
|
|
11964
|
+
this.aViewbox = '0 0 0 0';
|
|
11965
11965
|
this.aHeight = 0;
|
|
11966
11966
|
this.aWidth = 0;
|
|
11967
11967
|
this.aGap = 0;
|
|
@@ -12114,14 +12114,14 @@ class Tooltip {
|
|
|
12114
12114
|
this.disconnectReferenceElement();
|
|
12115
12115
|
}
|
|
12116
12116
|
render() {
|
|
12117
|
-
return (hAsync(Host, { key: '
|
|
12117
|
+
return (hAsync(Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
12118
12118
|
position: this.hostPosition,
|
|
12119
12119
|
transform: this.hostTransform,
|
|
12120
|
-
} }, hAsync("slot", { key: '
|
|
12120
|
+
} }, hAsync("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), hAsync("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
12121
12121
|
left: this.aX,
|
|
12122
12122
|
top: this.aY,
|
|
12123
12123
|
display: this.aDisplay,
|
|
12124
|
-
} }, hAsync("path", { key: '
|
|
12124
|
+
} }, hAsync("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
12125
12125
|
}
|
|
12126
12126
|
async handleFocus() {
|
|
12127
12127
|
if (!this.disabled)
|
package/package.json
CHANGED