@justeattakeaway/pie-tooltip 0.1.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +344 -15
- package/custom-elements.json +644 -3
- package/dist/index.d.ts +153 -2
- package/dist/index.js +390 -18
- package/dist/react.d.ts +159 -3
- package/dist/react.js +25 -7
- package/package.json +6 -4
- package/src/defs.ts +129 -3
- package/src/index.ts +691 -9
- package/src/react.ts +11 -3
- package/src/tooltip.scss +408 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,167 @@
|
|
|
1
|
+
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
1
2
|
import { CSSResult } from 'lit';
|
|
2
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
3
|
-
import {
|
|
4
|
+
import { PropertyValues } from 'lit';
|
|
5
|
+
import { TemplateResult } from 'lit';
|
|
6
|
+
|
|
7
|
+
declare type AriaProps = {
|
|
8
|
+
/**
|
|
9
|
+
* The accessible name for the close button. Required whenever `isDismissible` is set.
|
|
10
|
+
*/
|
|
11
|
+
close?: string;
|
|
12
|
+
/**
|
|
13
|
+
* The accessible name for the panel in dialog mode. Only used when `heading` is not provided.
|
|
14
|
+
*/
|
|
15
|
+
label?: string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export declare const componentClass = "c-tooltip";
|
|
19
|
+
|
|
20
|
+
export declare const componentSelector = "pie-tooltip";
|
|
21
|
+
|
|
22
|
+
export declare type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<TooltipProps, 'trigger' | 'heading' | 'aria' | 'triggers'>>;
|
|
23
|
+
|
|
24
|
+
export declare const defaultProps: DefaultProps;
|
|
25
|
+
|
|
26
|
+
export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* The two patterns the panel can present as. Inferred from the `action` slot rather than
|
|
30
|
+
* configured: an empty `action` slot is a tooltip, a filled one is a non-modal dialog.
|
|
31
|
+
*/
|
|
32
|
+
export declare const modes: readonly ["tooltip", "dialog"];
|
|
33
|
+
|
|
34
|
+
export declare const ON_TOOLTIP_CLOSE_EVENT = "pie-tooltip-close";
|
|
35
|
+
|
|
36
|
+
export declare const ON_TOOLTIP_OPEN_EVENT = "pie-tooltip-open";
|
|
4
37
|
|
|
5
38
|
/**
|
|
6
39
|
* @tagname pie-tooltip
|
|
40
|
+
* @event {Event} pie-tooltip-open - When a configured trigger asks for the panel. Set `isOpen` to `true` in response.
|
|
41
|
+
* @event {Event} pie-tooltip-close - When the close button is clicked, or a configured trigger asks to dismiss the panel. Set `isOpen` to `false` in response.
|
|
42
|
+
* @slot content - The descriptive content of the panel. Must not contain focusable elements.
|
|
43
|
+
* @slot action - An optional slot for interactive content such as a `pie-button`. Filling this slot switches the panel to a non-modal dialog.
|
|
7
44
|
*/
|
|
8
45
|
export declare class PieTooltip extends PieElement implements TooltipProps {
|
|
9
|
-
|
|
46
|
+
trigger: TooltipProps['trigger'];
|
|
47
|
+
isOpen: boolean;
|
|
48
|
+
position: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
|
|
49
|
+
size: "default" | "fit-to-content" | "fill-container";
|
|
50
|
+
variant: "default" | "inverse";
|
|
51
|
+
type: "default" | "icon";
|
|
52
|
+
isDismissible: boolean;
|
|
53
|
+
heading: TooltipProps['heading'];
|
|
54
|
+
headingLevel: "h2" | "h3" | "h4" | "h5" | "h6";
|
|
55
|
+
aria: TooltipProps['aria'];
|
|
56
|
+
triggers: TooltipProps['triggers'];
|
|
57
|
+
private _assignedActionElements;
|
|
58
|
+
private _originElement;
|
|
59
|
+
private _hasActionContent;
|
|
60
|
+
private _isPositioned;
|
|
61
|
+
private _isAnchorVisible;
|
|
62
|
+
private _clippedTriggerElement;
|
|
63
|
+
private _triggerClippers;
|
|
64
|
+
private _triggerTrackingController;
|
|
65
|
+
private _interactionController;
|
|
66
|
+
private _directionObserver;
|
|
67
|
+
private _triggerObserver;
|
|
68
|
+
private _reanchorFrame;
|
|
69
|
+
private _shouldResolveOverlayMode;
|
|
70
|
+
private _hoverCloseTimer;
|
|
10
71
|
static styles: CSSResult;
|
|
72
|
+
private get _mode();
|
|
73
|
+
protected firstUpdated(): void;
|
|
74
|
+
protected updated(changedProperties: PropertyValues<this>): void;
|
|
75
|
+
disconnectedCallback(): void;
|
|
76
|
+
private startTrackingTrigger;
|
|
77
|
+
private stopTrackingTrigger;
|
|
78
|
+
private resolveMode;
|
|
79
|
+
private resolveOverlayMode;
|
|
80
|
+
private projectOverTrigger;
|
|
81
|
+
private _refreshTriggerClippers;
|
|
82
|
+
private handleCloseButtonClick;
|
|
83
|
+
private _getTriggerElement;
|
|
84
|
+
private _requestOpen;
|
|
85
|
+
private _requestClose;
|
|
86
|
+
private _startHoverCloseTimer;
|
|
87
|
+
private _cancelHoverCloseTimer;
|
|
88
|
+
private _rebuildInteractionListeners;
|
|
89
|
+
private _teardownInteractionListeners;
|
|
90
|
+
private renderHeading;
|
|
91
|
+
private renderCloseButton;
|
|
92
|
+
render(): TemplateResult;
|
|
11
93
|
}
|
|
12
94
|
|
|
95
|
+
export declare const positions: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
|
|
96
|
+
|
|
97
|
+
export declare const sizes: readonly ["default", "fit-to-content", "fill-container"];
|
|
98
|
+
|
|
99
|
+
export declare type TooltipMode = typeof modes[number];
|
|
100
|
+
|
|
13
101
|
export declare interface TooltipProps {
|
|
102
|
+
/**
|
|
103
|
+
* The `id` of the element the panel is anchored to. The trigger lives elsewhere in the
|
|
104
|
+
* DOM and is never slotted into the tooltip.
|
|
105
|
+
*/
|
|
106
|
+
trigger?: string;
|
|
107
|
+
/**
|
|
108
|
+
* When true, the panel is visible. The component never writes to this property: the
|
|
109
|
+
* consumer owns it and updates it in response to the close event.
|
|
110
|
+
*/
|
|
111
|
+
isOpen?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* The side of the trigger the panel sits on, and its alignment along the cross axis.
|
|
114
|
+
*/
|
|
115
|
+
position?: typeof positions[number];
|
|
116
|
+
/**
|
|
117
|
+
* How the panel sizes itself. `default` is a fixed 280px and wraps, `fit-to-content` is as
|
|
118
|
+
* wide as its content, and `fill-container` matches the inline size of the trigger's parent
|
|
119
|
+
* element. Not applied when `type` is `icon`.
|
|
120
|
+
*/
|
|
121
|
+
size?: typeof sizes[number];
|
|
122
|
+
/**
|
|
123
|
+
* The colour treatment of the panel. `default` is the dark panel, `inverse` the light one.
|
|
124
|
+
*/
|
|
125
|
+
variant?: typeof variants[number];
|
|
126
|
+
/**
|
|
127
|
+
* The presentation of the panel. `icon` is the compact treatment intended for icon triggers:
|
|
128
|
+
* it has no arrow and is always as wide as its content, so `size` and `--tooltip-width` have
|
|
129
|
+
* no effect on it.
|
|
130
|
+
*/
|
|
131
|
+
type?: typeof types[number];
|
|
132
|
+
/**
|
|
133
|
+
* When true, a close button is rendered inside the panel.
|
|
134
|
+
*/
|
|
135
|
+
isDismissible?: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* The text to display in the panel's heading. In dialog mode this also provides the
|
|
138
|
+
* panel's accessible name.
|
|
139
|
+
*/
|
|
140
|
+
heading?: string;
|
|
141
|
+
/**
|
|
142
|
+
* The HTML heading tag to use for the panel's heading. Can be h2-h6.
|
|
143
|
+
*/
|
|
144
|
+
headingLevel?: typeof headingLevels[number];
|
|
145
|
+
/**
|
|
146
|
+
* The ARIA labels used for various parts of the tooltip.
|
|
147
|
+
*/
|
|
148
|
+
aria?: AriaProps;
|
|
149
|
+
/**
|
|
150
|
+
* Which interactions request that the panel opens and closes. The component never opens or
|
|
151
|
+
* closes itself: a configured interaction emits `pie-tooltip-open` or `pie-tooltip-close`
|
|
152
|
+
* and the consumer decides whether to honour it by setting `isOpen`. Empty by default, so
|
|
153
|
+
* no interaction is watched at all. Configure `hover` and `focus` together for keyboard
|
|
154
|
+
* reachability, and `click` for pointer users.
|
|
155
|
+
*/
|
|
156
|
+
triggers?: Array<TooltipTrigger>;
|
|
14
157
|
}
|
|
15
158
|
|
|
159
|
+
export declare type TooltipTrigger = typeof triggers[number];
|
|
160
|
+
|
|
161
|
+
export declare const triggers: readonly ["hover", "focus", "click"];
|
|
162
|
+
|
|
163
|
+
export declare const types: readonly ["default", "icon"];
|
|
164
|
+
|
|
165
|
+
export declare const variants: readonly ["default", "inverse"];
|
|
166
|
+
|
|
16
167
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,27 +1,399 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { LitElement as $, unsafeCSS as E, nothing as b } from "lit";
|
|
2
|
+
import { property as g, queryAssignedElements as L, query as A, state as x } from "lit/decorators.js";
|
|
3
|
+
import { classMap as O } from "lit/directives/class-map.js";
|
|
4
|
+
import { ifDefined as R } from "lit/directives/if-defined.js";
|
|
5
|
+
import { unsafeStatic as P, html as y } from "lit/static-html.js";
|
|
6
|
+
import { validPropertyValues as m, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
|
|
7
|
+
import "@justeattakeaway/pie-icon-button";
|
|
8
|
+
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
9
|
+
const w = class w extends $ {
|
|
4
10
|
willUpdate() {
|
|
5
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
11
|
+
this.getAttribute("v") || this.setAttribute("v", w.v);
|
|
6
12
|
}
|
|
7
13
|
};
|
|
8
|
-
|
|
9
|
-
let
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
w.v = "0.3.0";
|
|
15
|
+
let k = w;
|
|
16
|
+
const M = [
|
|
17
|
+
"top",
|
|
18
|
+
"top-start",
|
|
19
|
+
"top-end",
|
|
20
|
+
"bottom",
|
|
21
|
+
"bottom-start",
|
|
22
|
+
"bottom-end",
|
|
23
|
+
"left",
|
|
24
|
+
"left-start",
|
|
25
|
+
"left-end",
|
|
26
|
+
"right",
|
|
27
|
+
"right-start",
|
|
28
|
+
"right-end"
|
|
29
|
+
], D = ["default", "fit-to-content", "fill-container"], B = ["default", "inverse"], I = ["default", "icon"], V = ["h2", "h3", "h4", "h5", "h6"], et = ["hover", "focus", "click"], rt = ["tooltip", "dialog"], d = "pie-tooltip", c = "c-tooltip", q = `${d}-open`, F = `${d}-close`, h = {
|
|
30
|
+
isOpen: !1,
|
|
31
|
+
position: "top",
|
|
32
|
+
size: "default",
|
|
33
|
+
variant: "default",
|
|
34
|
+
type: "default",
|
|
35
|
+
isDismissible: !1,
|
|
36
|
+
headingLevel: "h2"
|
|
37
|
+
}, H = '*,*:after,*:before{box-sizing:inherit}:host{--tooltip-anchor-top: 0;--tooltip-anchor-left: 0;--tooltip-anchor-width: 0;--tooltip-anchor-height: 0;--tooltip-container-inline-size: 0;--tooltip-offset: var(--dt-spacing-a);--tooltip-arrow-size: 8px;--tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));position:absolute;top:0;left:0;z-index:var(--dt-z-index-tooltip);display:block;inline-size:0;block-size:0;pointer-events:none}.c-tooltip-origin{position:absolute;top:0;left:0;inline-size:0;block-size:0}.c-tooltip-anchor{position:absolute;top:var(--tooltip-anchor-top);left:var(--tooltip-anchor-left);inline-size:var(--tooltip-anchor-width);block-size:var(--tooltip-anchor-height)}.c-tooltip-layer{position:absolute;display:grid;grid-template-columns:100%;grid-template-rows:100%;visibility:hidden;transition:visibility 0s linear .15s}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible{visibility:visible;transition-delay:0s}.c-tooltip-layer--type-icon{--tooltip-layer-offset: var(--tooltip-offset)}.c-tooltip-layer--top,.c-tooltip-layer--bottom{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left,.c-tooltip-layer--right{inset-block-start:0;block-size:100%}.c-tooltip-layer--top{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-start,.c-tooltip-layer--bottom-start{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-start,.c-tooltip-layer--right-start{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-start{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-start{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-start{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-start{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-end,.c-tooltip-layer--bottom-end{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-end,.c-tooltip-layer--right-end{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-end{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-end{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-end{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-end{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top{place-items:center}.c-tooltip-layer--top-start{place-items:start}.c-tooltip-layer--top-end{place-items:end}.c-tooltip-layer--bottom{place-items:center}.c-tooltip-layer--bottom-start{place-items:start}.c-tooltip-layer--bottom-end{place-items:end}.c-tooltip-layer--left{place-items:center}.c-tooltip-layer--left-start{place-items:start}.c-tooltip-layer--left-end{place-items:end}.c-tooltip-layer--right{place-items:center}.c-tooltip-layer--right-start{place-items:start}.c-tooltip-layer--right-end{place-items:end}.c-tooltip{--tooltip-inline-size: 280px;--tooltip-max-inline-size: calc(100vw - var(--dt-spacing-d) * 2);--tooltip-background-color: var(--dt-color-container-inverse);--tooltip-content-color: var(--dt-color-content-inverse);--tooltip-border-radius: var(--dt-radius-rounded-b);--tooltip-padding-block: var(--dt-spacing-b);--tooltip-padding-inline: var(--dt-spacing-c);--tooltip-close-size: 32px;--tooltip-motion-duration: .15s;--tooltip-motion-easing: cubic-bezier(.45, 0, .55, 1);--tooltip-motion-translate-x: 0;--tooltip-motion-translate-y: 0;--tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));--tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));--tooltip-arrow-main-inset-far: calc(100% - 2px) ;--tooltip-arrow-main-inset-near: calc(var(--tooltip-arrow-size) * -1);font-family:var(--dt-font-body-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);position:relative;inline-size:var(--tooltip-width, var(--tooltip-inline-size));max-inline-size:var(--tooltip-max-inline-size);padding-block-start:var(--tooltip-padding-block);padding-block-end:var(--tooltip-padding-block);padding-inline-start:var(--tooltip-padding-inline);padding-inline-end:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-background-color);color:var(--tooltip-content-color);pointer-events:auto;opacity:0;transform:translate(var(--tooltip-motion-translate-x),var(--tooltip-motion-translate-y));transition:opacity var(--tooltip-motion-duration) var(--tooltip-motion-easing),transform var(--tooltip-motion-duration) var(--tooltip-motion-easing)}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible .c-tooltip{--tooltip-motion-duration: .2s;opacity:1;transform:translate(0)}.c-tooltip--top{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom{--tooltip-motion-translate-y: -4px}.c-tooltip--left{--tooltip-motion-translate-x: 4px}.c-tooltip--right{--tooltip-motion-translate-x: -4px}.c-tooltip--top-start{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-start{--tooltip-motion-translate-y: -4px}.c-tooltip--left-start{--tooltip-motion-translate-x: 4px}.c-tooltip--right-start{--tooltip-motion-translate-x: -4px}.c-tooltip--top-end{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-end{--tooltip-motion-translate-y: -4px}.c-tooltip--left-end{--tooltip-motion-translate-x: 4px}.c-tooltip--right-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--left{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-start{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-start{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-end{--tooltip-motion-translate-x: 4px}@media(prefers-reduced-motion:reduce){.c-tooltip-layer,.c-tooltip{transition:none}}.c-tooltip--inverse{--tooltip-background-color: var(--dt-color-container-default);--tooltip-content-color: var(--dt-color-content-default)}.c-tooltip--size-fit-to-content{--tooltip-inline-size: max-content}.c-tooltip--size-fill-container{--tooltip-inline-size: var(--tooltip-container-inline-size);--tooltip-max-inline-size: none}.c-tooltip--type-icon{--tooltip-border-radius: var(--dt-radius-rounded-e);--tooltip-padding-block: var(--dt-spacing-a);--tooltip-padding-inline: var(--dt-spacing-c);inline-size:max-content}.c-tooltip.is-dismissible{min-block-size:calc(var(--tooltip-close-size) + var(--dt-spacing-b) * 2);padding-inline-end:calc(var(--tooltip-padding-inline) + var(--tooltip-close-size))}.c-tooltip.is-dismissible:not(.has-heading){display:flex;flex-direction:column;justify-content:center}.c-tooltip--top{--tooltip-arrow-cross-position: 50%}.c-tooltip--top-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--top-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--bottom{--tooltip-arrow-cross-position: 50%}.c-tooltip--bottom-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--bottom-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--left{--tooltip-arrow-cross-position: 50%}.c-tooltip--left-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--left-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--right{--tooltip-arrow-cross-position: 50%}.c-tooltip--right-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--right-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip-arrow{position:absolute;background-color:var(--tooltip-background-color)}.c-tooltip--top .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}:host(:dir(rtl)) .c-tooltip--left .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-start .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-start .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-end .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-end .c-tooltip-arrow{transform:scaleX(-1)}.c-tooltip-heading{font-family:var(--dt-font-body-strong-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-strong-s-weight);font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);margin-block-start:0;margin-block-end:0}.c-tooltip-content{overflow-wrap:break-word}.c-tooltip.has-action .c-tooltip-action{display:flex;justify-content:flex-end;margin-block-start:var(--dt-spacing-a)}.c-tooltip.is-dismissible.has-action .c-tooltip-action{margin-inline-end:calc(var(--tooltip-close-size) * -1)}.c-tooltip.is-dismissible.has-action .c-tooltip-body{min-block-size:var(--tooltip-close-size)}.c-tooltip.is-dismissible.has-action:not(.has-heading) .c-tooltip-body{display:grid;align-content:center}.c-tooltip-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}.c-tooltip--top:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-start:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-start:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-start:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-start:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-end:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-end:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-end:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-end:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}';
|
|
38
|
+
var j = Object.defineProperty, N = Object.getOwnPropertyDescriptor, a = (t, o, i, r) => {
|
|
39
|
+
for (var e = r > 1 ? void 0 : r ? N(o, i) : o, s = t.length - 1, n; s >= 0; s--)
|
|
40
|
+
(n = t[s]) && (e = (r ? n(o, i, e) : n(e)) || e);
|
|
41
|
+
return r && e && j(o, i, e), e;
|
|
15
42
|
};
|
|
16
|
-
|
|
43
|
+
const z = "pie-tooltip-heading", X = (t) => {
|
|
44
|
+
const o = (r) => !!r && r !== "none";
|
|
45
|
+
return [
|
|
46
|
+
t.transform,
|
|
47
|
+
t.perspective,
|
|
48
|
+
t.filter,
|
|
49
|
+
t.backdropFilter,
|
|
50
|
+
t.translate,
|
|
51
|
+
t.rotate,
|
|
52
|
+
t.scale
|
|
53
|
+
].some(o) || /\b(paint|layout|content|strict)\b/.test(t.contain) || t.containerType && t.containerType !== "normal" ? !0 : /\b(transform|perspective|filter|backdrop-filter|contain|translate|rotate|scale)\b/.test(t.willChange);
|
|
54
|
+
}, _ = (t) => {
|
|
55
|
+
const { documentElement: o } = t.ownerDocument, i = [];
|
|
56
|
+
let r = t;
|
|
57
|
+
for (; r !== o; ) {
|
|
58
|
+
const e = r.assignedSlot ?? r.parentNode, s = e instanceof ShadowRoot ? e.host : e;
|
|
59
|
+
if (!(s instanceof Element))
|
|
60
|
+
break;
|
|
61
|
+
i.push(s), r = s;
|
|
62
|
+
}
|
|
63
|
+
return i;
|
|
64
|
+
}, U = (t) => {
|
|
65
|
+
const { documentElement: o, body: i } = t.ownerDocument;
|
|
66
|
+
return _(t).filter((r) => {
|
|
67
|
+
if (r === o || r === i)
|
|
68
|
+
return !1;
|
|
69
|
+
const e = getComputedStyle(r);
|
|
70
|
+
return e.overflowX !== "visible" || e.overflowY !== "visible";
|
|
71
|
+
});
|
|
72
|
+
}, Y = (t) => {
|
|
73
|
+
const { left: o, top: i } = t.getBoundingClientRect(), {
|
|
74
|
+
clientLeft: r,
|
|
75
|
+
clientTop: e,
|
|
76
|
+
clientWidth: s,
|
|
77
|
+
clientHeight: n
|
|
78
|
+
} = t;
|
|
79
|
+
return new DOMRect(o + r, i + e, s, n);
|
|
80
|
+
}, W = (t, o) => {
|
|
81
|
+
const i = Math.max(t.left, o.left), r = Math.max(t.top, o.top), e = Math.min(t.right, o.right), s = Math.min(t.bottom, o.bottom);
|
|
82
|
+
return e <= i || s <= r ? null : new DOMRect(i, r, e - i, s - r);
|
|
83
|
+
};
|
|
84
|
+
let l = class extends k {
|
|
85
|
+
constructor() {
|
|
86
|
+
super(...arguments), this.isOpen = h.isOpen, this.position = h.position, this.size = h.size, this.variant = h.variant, this.type = h.type, this.isDismissible = h.isDismissible, this.headingLevel = h.headingLevel, this.triggers = [], this._isPositioned = !1, this._isAnchorVisible = !0, this._clippedTriggerElement = null, this._triggerClippers = [], this._reanchorFrame = 0, this._shouldResolveOverlayMode = !1;
|
|
87
|
+
}
|
|
88
|
+
get _mode() {
|
|
89
|
+
if (this._hasActionContent !== void 0)
|
|
90
|
+
return this._hasActionContent ? "dialog" : "tooltip";
|
|
91
|
+
}
|
|
92
|
+
firstUpdated() {
|
|
93
|
+
this.resolveMode(), this.projectOverTrigger(), this._rebuildInteractionListeners();
|
|
94
|
+
}
|
|
95
|
+
updated(t) {
|
|
96
|
+
const o = ["trigger", "isOpen", "position", "size"];
|
|
97
|
+
this.isOpen && t.has("isOpen") && this.resolveOverlayMode(), o.some((i) => t.has(i)) && this.projectOverTrigger(), this.isOpen && t.has("trigger") && this.stopTrackingTrigger(), this.isOpen ? this.startTrackingTrigger() : this.stopTrackingTrigger(), (t.has("triggers") || t.has("trigger")) && this._rebuildInteractionListeners();
|
|
98
|
+
}
|
|
99
|
+
disconnectedCallback() {
|
|
100
|
+
this._teardownInteractionListeners(), this.stopTrackingTrigger(), super.disconnectedCallback();
|
|
101
|
+
}
|
|
102
|
+
// Listens for scroll (capture — catches any ancestor), resize, and dir-attribute changes to
|
|
103
|
+
// re-anchor the panel. Multiple events per frame coalesce into one requestAnimationFrame call.
|
|
104
|
+
startTrackingTrigger() {
|
|
105
|
+
if (this._triggerTrackingController)
|
|
106
|
+
return;
|
|
107
|
+
const t = new AbortController(), { signal: o } = t, i = () => {
|
|
108
|
+
this._reanchorFrame || (this._reanchorFrame = requestAnimationFrame(() => {
|
|
109
|
+
this._reanchorFrame = 0, this._shouldResolveOverlayMode && (this._shouldResolveOverlayMode = !1, this.resolveOverlayMode()), this.projectOverTrigger();
|
|
110
|
+
}));
|
|
111
|
+
}, r = () => {
|
|
112
|
+
this._shouldResolveOverlayMode = !0, i();
|
|
113
|
+
};
|
|
114
|
+
window.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o }), window.addEventListener("resize", r, { passive: !0, signal: o });
|
|
115
|
+
const e = /* @__PURE__ */ new Set();
|
|
116
|
+
_(this).forEach((n) => {
|
|
117
|
+
const p = n.getRootNode();
|
|
118
|
+
p instanceof ShadowRoot && e.add(p);
|
|
119
|
+
}), e.forEach((n) => {
|
|
120
|
+
n.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o });
|
|
121
|
+
}), this._triggerObserver = new ResizeObserver(() => {
|
|
122
|
+
this._shouldResolveOverlayMode = !0, i();
|
|
123
|
+
});
|
|
124
|
+
const s = this._getTriggerElement();
|
|
125
|
+
s && this._triggerObserver.observe(s), this._directionObserver = new MutationObserver(i), this._directionObserver.observe(this.ownerDocument.documentElement, {
|
|
126
|
+
attributeFilter: ["dir"],
|
|
127
|
+
subtree: !0
|
|
128
|
+
}), this._triggerTrackingController = t;
|
|
129
|
+
}
|
|
130
|
+
stopTrackingTrigger() {
|
|
131
|
+
var t, o, i;
|
|
132
|
+
(t = this._triggerTrackingController) == null || t.abort(), this._triggerTrackingController = void 0, (o = this._directionObserver) == null || o.disconnect(), this._directionObserver = void 0, (i = this._triggerObserver) == null || i.disconnect(), this._triggerObserver = void 0, this._shouldResolveOverlayMode = !1, this._reanchorFrame && (cancelAnimationFrame(this._reanchorFrame), this._reanchorFrame = 0);
|
|
133
|
+
}
|
|
134
|
+
resolveMode() {
|
|
135
|
+
this._hasActionContent = this._assignedActionElements.length > 0;
|
|
136
|
+
}
|
|
137
|
+
// Picks between `absolute` (browser handles scrolling, but clipped by overflow ancestors) and
|
|
138
|
+
// `fixed` (escapes overflow clips, but must re-offset on every scroll). Switches to `fixed`
|
|
139
|
+
// only when it escapes a clip that `absolute` would not.
|
|
140
|
+
//
|
|
141
|
+
// An overflow ancestor clips a positioned box only if it is that box's containing block or an
|
|
142
|
+
// ancestor of it; a clipper strictly inside the containing block does not clip. So each
|
|
143
|
+
// clipper is counted against a mode only once that mode's containing block has been reached.
|
|
144
|
+
resolveOverlayMode() {
|
|
145
|
+
let t = !1, o = !1, i = 0, r = 0;
|
|
146
|
+
const { documentElement: e, body: s } = this.ownerDocument;
|
|
147
|
+
this._refreshTriggerClippers(), _(this).forEach((n) => {
|
|
148
|
+
const p = getComputedStyle(n);
|
|
149
|
+
if (p.display === "contents")
|
|
150
|
+
return;
|
|
151
|
+
const v = X(p);
|
|
152
|
+
(v || p.position !== "static") && (t = !0), v && (o = !0), (p.overflowX !== "visible" || p.overflowY !== "visible") && !(n === e || n === s) && (t && (i += 1), o && (r += 1));
|
|
153
|
+
}), this.style.position = r < i ? "fixed" : "";
|
|
154
|
+
}
|
|
155
|
+
// Measures the trigger relative to the origin marker (which sits at the containing block's
|
|
156
|
+
// origin) and writes CSS custom properties. Self-referential: correct for any containing
|
|
157
|
+
// block. Physical values; shadow-root CSS uses logical properties for RTL mirroring.
|
|
158
|
+
projectOverTrigger() {
|
|
159
|
+
this._isPositioned = !1;
|
|
160
|
+
const t = this._getTriggerElement();
|
|
161
|
+
if (!t || !this._originElement) {
|
|
162
|
+
["top", "left", "width", "height"].forEach((f) => {
|
|
163
|
+
this.style.removeProperty(`--tooltip-anchor-${f}`);
|
|
164
|
+
}), this.style.removeProperty("--tooltip-container-inline-size"), this._isAnchorVisible = !0, this._isPositioned = !0;
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
t !== this._clippedTriggerElement && this._refreshTriggerClippers();
|
|
168
|
+
const o = this._triggerClippers.reduce(
|
|
169
|
+
(f, u) => f ? W(f, Y(u)) : null,
|
|
170
|
+
t.getBoundingClientRect()
|
|
171
|
+
);
|
|
172
|
+
if (this._isAnchorVisible = o !== null, !o) {
|
|
173
|
+
this._isPositioned = !0;
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
const i = this._originElement.getBoundingClientRect(), {
|
|
177
|
+
top: r,
|
|
178
|
+
left: e,
|
|
179
|
+
width: s,
|
|
180
|
+
height: n
|
|
181
|
+
} = o;
|
|
182
|
+
this.style.setProperty("--tooltip-anchor-top", `${r - i.top}px`), this.style.setProperty("--tooltip-anchor-left", `${e - i.left}px`), this.style.setProperty("--tooltip-anchor-width", `${s}px`), this.style.setProperty("--tooltip-anchor-height", `${n}px`);
|
|
183
|
+
const p = t.parentElement, v = p ? p.getBoundingClientRect().width : s;
|
|
184
|
+
this.style.setProperty("--tooltip-container-inline-size", `${v}px`), this._isPositioned = !0;
|
|
185
|
+
}
|
|
186
|
+
// Cached because `projectOverTrigger` runs on every re-anchoring frame, and collecting these
|
|
187
|
+
// costs a computed style per ancestor. Refreshed when the trigger changes and whenever the
|
|
188
|
+
// overlay mode is resolved, which is the same cadence as an ancestor chain actually changing.
|
|
189
|
+
_refreshTriggerClippers() {
|
|
190
|
+
const t = this._getTriggerElement();
|
|
191
|
+
this._clippedTriggerElement = t, this._triggerClippers = t ? U(t) : [];
|
|
192
|
+
}
|
|
193
|
+
handleCloseButtonClick() {
|
|
194
|
+
this._requestClose();
|
|
195
|
+
}
|
|
196
|
+
_getTriggerElement() {
|
|
197
|
+
return this.trigger ? this.ownerDocument.getElementById(this.trigger) : null;
|
|
198
|
+
}
|
|
199
|
+
_requestOpen() {
|
|
200
|
+
this.isOpen || this.dispatchEvent(new Event(q, { bubbles: !0, composed: !0 }));
|
|
201
|
+
}
|
|
202
|
+
_requestClose() {
|
|
203
|
+
this.isOpen && this.dispatchEvent(new Event(F, { bubbles: !0, composed: !0 }));
|
|
204
|
+
}
|
|
205
|
+
_startHoverCloseTimer() {
|
|
206
|
+
this._hoverCloseTimer === void 0 && (this._hoverCloseTimer = setTimeout(() => {
|
|
207
|
+
this._hoverCloseTimer = void 0, this._requestClose();
|
|
208
|
+
}, 100));
|
|
209
|
+
}
|
|
210
|
+
_cancelHoverCloseTimer() {
|
|
211
|
+
this._hoverCloseTimer !== void 0 && (clearTimeout(this._hoverCloseTimer), this._hoverCloseTimer = void 0);
|
|
212
|
+
}
|
|
213
|
+
_rebuildInteractionListeners() {
|
|
214
|
+
var r;
|
|
215
|
+
if (this._teardownInteractionListeners(), !((r = this.triggers) != null && r.length)) return;
|
|
216
|
+
const t = new AbortController(), { signal: o } = t;
|
|
217
|
+
this._interactionController = t;
|
|
218
|
+
const i = this._getTriggerElement();
|
|
219
|
+
if (this.ownerDocument.addEventListener("keydown", (e) => {
|
|
220
|
+
e.key === "Escape" && this.isOpen && this._requestClose();
|
|
221
|
+
}, { signal: o }), !!i) {
|
|
222
|
+
if (this.triggers.includes("hover")) {
|
|
223
|
+
i.addEventListener("mouseenter", () => {
|
|
224
|
+
this._cancelHoverCloseTimer(), this._requestOpen();
|
|
225
|
+
}, { signal: o }), i.addEventListener("mouseleave", () => {
|
|
226
|
+
this._startHoverCloseTimer();
|
|
227
|
+
}, { signal: o });
|
|
228
|
+
const e = this.renderRoot.querySelector(".c-tooltip");
|
|
229
|
+
e && (e.addEventListener("mouseenter", () => {
|
|
230
|
+
this._cancelHoverCloseTimer();
|
|
231
|
+
}, { signal: o }), e.addEventListener("mouseleave", () => {
|
|
232
|
+
this._startHoverCloseTimer();
|
|
233
|
+
}, { signal: o }));
|
|
234
|
+
}
|
|
235
|
+
this.triggers.includes("focus") && (i.addEventListener("focusin", () => {
|
|
236
|
+
this._requestOpen();
|
|
237
|
+
}, { signal: o }), i.addEventListener("focusout", (e) => {
|
|
238
|
+
const s = e.relatedTarget;
|
|
239
|
+
s && (this.contains(s) || s === this) || this._requestClose();
|
|
240
|
+
}, { signal: o })), this.triggers.includes("click") && (i.addEventListener("click", (e) => {
|
|
241
|
+
e.stopPropagation(), this.isOpen ? this._requestClose() : this._requestOpen();
|
|
242
|
+
}, { signal: o }), this.ownerDocument.addEventListener("click", (e) => {
|
|
243
|
+
var v;
|
|
244
|
+
const s = e.composedPath()[0], n = this.contains(s) || ((v = this.shadowRoot) == null ? void 0 : v.contains(s)), p = i.contains(s) || s === i;
|
|
245
|
+
!n && !p && this.isOpen && this._requestClose();
|
|
246
|
+
}, { signal: o }));
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
_teardownInteractionListeners() {
|
|
250
|
+
var t;
|
|
251
|
+
(t = this._interactionController) == null || t.abort(), this._interactionController = void 0, this._cancelHoverCloseTimer();
|
|
252
|
+
}
|
|
253
|
+
renderHeading() {
|
|
254
|
+
const t = P(this.headingLevel);
|
|
255
|
+
return y`<${t}
|
|
256
|
+
id="${z}"
|
|
257
|
+
class="${c}-heading"
|
|
258
|
+
data-test-id="${z}">${this.heading}</${t}>`;
|
|
259
|
+
}
|
|
260
|
+
renderCloseButton() {
|
|
261
|
+
var t;
|
|
262
|
+
return y`
|
|
263
|
+
<pie-icon-button
|
|
264
|
+
class="${c}-close"
|
|
265
|
+
data-test-id="${d}-close"
|
|
266
|
+
size="xsmall"
|
|
267
|
+
variant="${this.variant === "inverse" ? "ghost-secondary" : "ghost-inverse"}"
|
|
268
|
+
.aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
|
|
269
|
+
@click="${this.handleCloseButtonClick}">
|
|
270
|
+
<icon-close></icon-close>
|
|
271
|
+
</pie-icon-button>`;
|
|
272
|
+
}
|
|
17
273
|
render() {
|
|
18
|
-
|
|
274
|
+
const {
|
|
275
|
+
aria: t,
|
|
276
|
+
heading: o,
|
|
277
|
+
isDismissible: i,
|
|
278
|
+
isOpen: r,
|
|
279
|
+
position: e,
|
|
280
|
+
size: s,
|
|
281
|
+
type: n,
|
|
282
|
+
variant: p,
|
|
283
|
+
_mode: v
|
|
284
|
+
} = this, f = n === "icon", u = {
|
|
285
|
+
[`${c}-layer`]: !0,
|
|
286
|
+
[`${c}-layer--${e}`]: !0,
|
|
287
|
+
[`${c}-layer--type-${n}`]: !0,
|
|
288
|
+
"is-open": !!r,
|
|
289
|
+
"is-positioned": this._isPositioned,
|
|
290
|
+
"is-anchorVisible": this._isAnchorVisible
|
|
291
|
+
}, T = {
|
|
292
|
+
[c]: !0,
|
|
293
|
+
[`${c}--${e}`]: !0,
|
|
294
|
+
[`${c}--${p}`]: !0,
|
|
295
|
+
[`${c}--type-${n}`]: !0,
|
|
296
|
+
[`${c}--size-${s}`]: !f,
|
|
297
|
+
"is-dismissible": !!i,
|
|
298
|
+
"has-action": v === "dialog",
|
|
299
|
+
"has-heading": !!o
|
|
300
|
+
}, C = v === "dialog";
|
|
301
|
+
return y`
|
|
302
|
+
<div class="${c}-origin" data-test-id="${d}-origin"></div>
|
|
303
|
+
<div class="${c}-anchor" data-test-id="${d}-anchor">
|
|
304
|
+
<div class="${O(u)}" data-test-id="${d}-layer">
|
|
305
|
+
<div
|
|
306
|
+
class="${O(T)}"
|
|
307
|
+
data-test-id="${d}"
|
|
308
|
+
role="${R(v)}"
|
|
309
|
+
aria-hidden="${!r}"
|
|
310
|
+
aria-labelledby="${C && o ? z : b}"
|
|
311
|
+
aria-label="${C && !o && (t != null && t.label) ? t.label : b}">
|
|
312
|
+
${f ? b : y`<div class="${c}-arrow" data-test-id="${d}-arrow"></div>`}
|
|
313
|
+
<div class="${c}-body">
|
|
314
|
+
${o ? this.renderHeading() : b}
|
|
315
|
+
<div class="${c}-content" data-test-id="${d}-content">
|
|
316
|
+
<slot name="content"></slot>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="${c}-action" data-test-id="${d}-action">
|
|
320
|
+
<slot name="action" @slotchange="${this.resolveMode}"></slot>
|
|
321
|
+
</div>
|
|
322
|
+
${i ? this.renderCloseButton() : b}
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
</div>`;
|
|
19
326
|
}
|
|
20
327
|
};
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
],
|
|
328
|
+
l.styles = E(H);
|
|
329
|
+
a([
|
|
330
|
+
g({ type: String })
|
|
331
|
+
], l.prototype, "trigger", 2);
|
|
332
|
+
a([
|
|
333
|
+
g({ type: Boolean })
|
|
334
|
+
], l.prototype, "isOpen", 2);
|
|
335
|
+
a([
|
|
336
|
+
g({ type: String }),
|
|
337
|
+
m(d, M, h.position)
|
|
338
|
+
], l.prototype, "position", 2);
|
|
339
|
+
a([
|
|
340
|
+
g({ type: String }),
|
|
341
|
+
m(d, D, h.size)
|
|
342
|
+
], l.prototype, "size", 2);
|
|
343
|
+
a([
|
|
344
|
+
g({ type: String }),
|
|
345
|
+
m(d, B, h.variant)
|
|
346
|
+
], l.prototype, "variant", 2);
|
|
347
|
+
a([
|
|
348
|
+
g({ type: String }),
|
|
349
|
+
m(d, I, h.type)
|
|
350
|
+
], l.prototype, "type", 2);
|
|
351
|
+
a([
|
|
352
|
+
g({ type: Boolean })
|
|
353
|
+
], l.prototype, "isDismissible", 2);
|
|
354
|
+
a([
|
|
355
|
+
g({ type: String })
|
|
356
|
+
], l.prototype, "heading", 2);
|
|
357
|
+
a([
|
|
358
|
+
g({ type: String }),
|
|
359
|
+
m(d, V, h.headingLevel)
|
|
360
|
+
], l.prototype, "headingLevel", 2);
|
|
361
|
+
a([
|
|
362
|
+
g({ type: Object })
|
|
363
|
+
], l.prototype, "aria", 2);
|
|
364
|
+
a([
|
|
365
|
+
g({ type: Array })
|
|
366
|
+
], l.prototype, "triggers", 2);
|
|
367
|
+
a([
|
|
368
|
+
L({ slot: "action" })
|
|
369
|
+
], l.prototype, "_assignedActionElements", 2);
|
|
370
|
+
a([
|
|
371
|
+
A(".c-tooltip-origin")
|
|
372
|
+
], l.prototype, "_originElement", 2);
|
|
373
|
+
a([
|
|
374
|
+
x()
|
|
375
|
+
], l.prototype, "_hasActionContent", 2);
|
|
376
|
+
a([
|
|
377
|
+
x()
|
|
378
|
+
], l.prototype, "_isPositioned", 2);
|
|
379
|
+
a([
|
|
380
|
+
x()
|
|
381
|
+
], l.prototype, "_isAnchorVisible", 2);
|
|
382
|
+
l = a([
|
|
383
|
+
S("pie-tooltip")
|
|
384
|
+
], l);
|
|
25
385
|
export {
|
|
26
|
-
|
|
386
|
+
F as ON_TOOLTIP_CLOSE_EVENT,
|
|
387
|
+
q as ON_TOOLTIP_OPEN_EVENT,
|
|
388
|
+
l as PieTooltip,
|
|
389
|
+
c as componentClass,
|
|
390
|
+
d as componentSelector,
|
|
391
|
+
h as defaultProps,
|
|
392
|
+
V as headingLevels,
|
|
393
|
+
rt as modes,
|
|
394
|
+
M as positions,
|
|
395
|
+
D as sizes,
|
|
396
|
+
et as triggers,
|
|
397
|
+
I as types,
|
|
398
|
+
B as variants
|
|
27
399
|
};
|