@redvars/peacock 3.2.7 → 3.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/PeacockComponent-DMrFEGDh.js +80 -0
  2. package/dist/PeacockComponent-DMrFEGDh.js.map +1 -0
  3. package/dist/breadcrumb-item-DkhwoMAH.js +6879 -0
  4. package/dist/breadcrumb-item-DkhwoMAH.js.map +1 -0
  5. package/dist/button-BtpAXuLN.js +1180 -0
  6. package/dist/button-BtpAXuLN.js.map +1 -0
  7. package/dist/button-group.js +7 -6
  8. package/dist/button-group.js.map +1 -1
  9. package/dist/button.js +5 -0
  10. package/dist/button.js.map +1 -0
  11. package/dist/{class-map-BmCohX9p.js → class-map-CbncA34D.js} +2 -3
  12. package/dist/class-map-CbncA34D.js.map +1 -0
  13. package/dist/code-highlighter.js +9 -8
  14. package/dist/code-highlighter.js.map +1 -1
  15. package/dist/custom-elements.json +28 -0
  16. package/dist/index.js +87 -35
  17. package/dist/index.js.map +1 -1
  18. package/dist/number-counter.js +7 -6
  19. package/dist/number-counter.js.map +1 -1
  20. package/dist/peacock-loader.js +963 -38
  21. package/dist/peacock-loader.js.map +1 -1
  22. package/dist/src/PeacockComponent.d.ts +1 -0
  23. package/dist/{state-CV1fRmOT.js → state-CEVpI7Vv.js} +2 -2
  24. package/dist/{state-CV1fRmOT.js.map → state-CEVpI7Vv.js.map} +1 -1
  25. package/dist/{style-map-CdmclYgz.js → style-map-mOmZwsJT.js} +2 -3
  26. package/dist/style-map-mOmZwsJT.js.map +1 -0
  27. package/dist/tsconfig.tsbuildinfo +1 -1
  28. package/dist/{unsafe-html-BS8X6Gto.js → unsafe-html-Ca00SXpn.js} +2 -3
  29. package/dist/unsafe-html-Ca00SXpn.js.map +1 -0
  30. package/package.json +1 -1
  31. package/readme.md +2 -2
  32. package/src/PeacockComponent.ts +3 -0
  33. package/src/button/button/button.ts +3 -1
  34. package/src/button/button-group/button-group.ts +2 -0
  35. package/src/code-highlighter/code-highlighter.ts +2 -0
  36. package/src/number-counter/number-counter.ts +2 -0
  37. package/dist/BaseButton.js +0 -209
  38. package/dist/BaseButton.js.map +0 -1
  39. package/dist/BaseInput.js +0 -27
  40. package/dist/BaseInput.js.map +0 -1
  41. package/dist/accordion-item.js +0 -191
  42. package/dist/accordion-item.js.map +0 -1
  43. package/dist/accordion.js +0 -142
  44. package/dist/accordion.js.map +0 -1
  45. package/dist/avatar.js +0 -106
  46. package/dist/avatar.js.map +0 -1
  47. package/dist/badge.js +0 -84
  48. package/dist/badge.js.map +0 -1
  49. package/dist/base-progress.js +0 -33
  50. package/dist/base-progress.js.map +0 -1
  51. package/dist/breadcrumb-item.js +0 -160
  52. package/dist/breadcrumb-item.js.map +0 -1
  53. package/dist/breadcrumb.js +0 -84
  54. package/dist/breadcrumb.js.map +0 -1
  55. package/dist/checkbox.js +0 -530
  56. package/dist/checkbox.js.map +0 -1
  57. package/dist/chip.js +0 -303
  58. package/dist/chip.js.map +0 -1
  59. package/dist/class-map-BmCohX9p.js.map +0 -1
  60. package/dist/clock.js +0 -83
  61. package/dist/clock.js.map +0 -1
  62. package/dist/container.js +0 -135
  63. package/dist/container.js.map +0 -1
  64. package/dist/directive-Cuw6h7YA.js +0 -9
  65. package/dist/directive-Cuw6h7YA.js.map +0 -1
  66. package/dist/divider.js +0 -126
  67. package/dist/divider.js.map +0 -1
  68. package/dist/elevation.js +0 -79
  69. package/dist/elevation.js.map +0 -1
  70. package/dist/empty-state.js +0 -171
  71. package/dist/empty-state.js.map +0 -1
  72. package/dist/field.js +0 -416
  73. package/dist/field.js.map +0 -1
  74. package/dist/focus-ring.js +0 -107
  75. package/dist/focus-ring.js.map +0 -1
  76. package/dist/icon.js +0 -183
  77. package/dist/icon.js.map +0 -1
  78. package/dist/link.js +0 -91
  79. package/dist/link.js.map +0 -1
  80. package/dist/lit-element-CA46RFZ_.js +0 -28
  81. package/dist/lit-element-CA46RFZ_.js.map +0 -1
  82. package/dist/menu-item.js +0 -232
  83. package/dist/menu-item.js.map +0 -1
  84. package/dist/menu-list.js +0 -108
  85. package/dist/menu-list.js.map +0 -1
  86. package/dist/menu.js +0 -117
  87. package/dist/menu.js.map +0 -1
  88. package/dist/property-DNVWDdPC.js +0 -45
  89. package/dist/property-DNVWDdPC.js.map +0 -1
  90. package/dist/query-QBcUV-L_.js +0 -15
  91. package/dist/query-QBcUV-L_.js.map +0 -1
  92. package/dist/ripple.js +0 -128
  93. package/dist/ripple.js.map +0 -1
  94. package/dist/skeleton.js +0 -113
  95. package/dist/skeleton.js.map +0 -1
  96. package/dist/spinner.js +0 -93
  97. package/dist/spinner.js.map +0 -1
  98. package/dist/spread-axRTFMoH.js +0 -32
  99. package/dist/spread-axRTFMoH.js.map +0 -1
  100. package/dist/style-map-CdmclYgz.js.map +0 -1
  101. package/dist/switch-DqxIiVsB.js +0 -2738
  102. package/dist/switch-DqxIiVsB.js.map +0 -1
  103. package/dist/tag.js +0 -323
  104. package/dist/tag.js.map +0 -1
  105. package/dist/tooltip.js +0 -1857
  106. package/dist/tooltip.js.map +0 -1
  107. package/dist/unsafe-html-BS8X6Gto.js.map +0 -1
  108. package/dist/utils-DGMeCC48.js +0 -273
  109. package/dist/utils-DGMeCC48.js.map +0 -1
package/dist/tooltip.js DELETED
@@ -1,1857 +0,0 @@
1
- import { _ as __decorate, n } from './property-DNVWDdPC.js';
2
- import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
3
- import { e } from './query-QBcUV-L_.js';
4
- import { e as e$1 } from './class-map-BmCohX9p.js';
5
- import './directive-Cuw6h7YA.js';
6
-
7
- var css_248z = i`* {
8
- box-sizing: border-box;
9
- }
10
-
11
- .screen-reader-only {
12
- display: none !important;
13
- }
14
-
15
- .tooltip {
16
- pointer-events: none;
17
- transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
18
- transform: scale(0);
19
- position: absolute;
20
- top: 0;
21
- left: 0;
22
- opacity: 0;
23
- }
24
-
25
- .tooltip.open {
26
- pointer-events: auto;
27
- transform: scale(1);
28
- opacity: 1;
29
- }
30
-
31
- .variant-plain .tooltip-content {
32
- display: inline-block;
33
- font-family: var(--typography-body-small-font-family) !important;
34
- font-size: var(--typography-body-small-font-size) !important;
35
- font-weight: var(--typography-body-small-font-weight) !important;
36
- line-height: var(--typography-body-small-line-height) !important;
37
- letter-spacing: var(--typography-body-small-letter-spacing) !important;
38
- max-width: 17.5rem;
39
- padding-inline: var(--spacing-100);
40
- padding-block: var(--spacing-050);
41
- color: var(--color-inverse-on-surface);
42
- background-color: var(--color-inverse-surface);
43
- border-radius: var(--shape-corner-extra-small);
44
- }
45
-
46
- .variant-rich .tooltip-content {
47
- display: inline-block;
48
- max-width: 17.5rem;
49
- padding-block: var(--spacing-150) var(--spacing-100);
50
- color: var(--color-on-surface-variant);
51
- background-color: var(--color-surface-container);
52
- border-radius: var(--shape-corner-medium);
53
- }
54
- .variant-rich .elevation {
55
- --elevation-level: 2;
56
- --elevation-container-shape: var(--shape-corner-medium);
57
- }
58
- .variant-rich .tooltip-title {
59
- font-family: var(--typography-title-small-font-family) !important;
60
- font-size: var(--typography-title-small-font-size) !important;
61
- font-weight: var(--typography-title-small-font-weight) !important;
62
- line-height: var(--typography-title-small-line-height) !important;
63
- letter-spacing: var(--typography-title-small-letter-spacing) !important;
64
- margin-block-end: var(--spacing-050);
65
- padding-inline: var(--spacing-200);
66
- }
67
- .variant-rich .tooltip-support-text {
68
- font-family: var(--typography-body-medium-font-family) !important;
69
- font-size: var(--typography-body-medium-font-size) !important;
70
- font-weight: var(--typography-body-medium-font-weight) !important;
71
- line-height: var(--typography-body-medium-line-height) !important;
72
- letter-spacing: var(--typography-body-medium-letter-spacing) !important;
73
- padding-inline: var(--spacing-200);
74
- }
75
- .variant-rich .tooltip-actions {
76
- margin-top: var(--spacing-150);
77
- padding-inline: var(--spacing-050);
78
- display: flex;
79
- align-items: center;
80
- gap: var(--spacing-100);
81
- }`;
82
-
83
- /**
84
- * Custom positioning reference element.
85
- * @see https://floating-ui.com/docs/virtual-elements
86
- */
87
-
88
- const min = Math.min;
89
- const max = Math.max;
90
- const round = Math.round;
91
- const floor = Math.floor;
92
- const createCoords = v => ({
93
- x: v,
94
- y: v
95
- });
96
- const oppositeSideMap = {
97
- left: 'right',
98
- right: 'left',
99
- bottom: 'top',
100
- top: 'bottom'
101
- };
102
- function clamp(start, value, end) {
103
- return max(start, min(value, end));
104
- }
105
- function evaluate(value, param) {
106
- return typeof value === 'function' ? value(param) : value;
107
- }
108
- function getSide(placement) {
109
- return placement.split('-')[0];
110
- }
111
- function getAlignment(placement) {
112
- return placement.split('-')[1];
113
- }
114
- function getOppositeAxis(axis) {
115
- return axis === 'x' ? 'y' : 'x';
116
- }
117
- function getAxisLength(axis) {
118
- return axis === 'y' ? 'height' : 'width';
119
- }
120
- function getSideAxis(placement) {
121
- const firstChar = placement[0];
122
- return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
123
- }
124
- function getAlignmentAxis(placement) {
125
- return getOppositeAxis(getSideAxis(placement));
126
- }
127
- function getAlignmentSides(placement, rects, rtl) {
128
- if (rtl === void 0) {
129
- rtl = false;
130
- }
131
- const alignment = getAlignment(placement);
132
- const alignmentAxis = getAlignmentAxis(placement);
133
- const length = getAxisLength(alignmentAxis);
134
- let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
135
- if (rects.reference[length] > rects.floating[length]) {
136
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
137
- }
138
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
139
- }
140
- function getExpandedPlacements(placement) {
141
- const oppositePlacement = getOppositePlacement(placement);
142
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
143
- }
144
- function getOppositeAlignmentPlacement(placement) {
145
- return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
146
- }
147
- const lrPlacement = ['left', 'right'];
148
- const rlPlacement = ['right', 'left'];
149
- const tbPlacement = ['top', 'bottom'];
150
- const btPlacement = ['bottom', 'top'];
151
- function getSideList(side, isStart, rtl) {
152
- switch (side) {
153
- case 'top':
154
- case 'bottom':
155
- if (rtl) return isStart ? rlPlacement : lrPlacement;
156
- return isStart ? lrPlacement : rlPlacement;
157
- case 'left':
158
- case 'right':
159
- return isStart ? tbPlacement : btPlacement;
160
- default:
161
- return [];
162
- }
163
- }
164
- function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
165
- const alignment = getAlignment(placement);
166
- let list = getSideList(getSide(placement), direction === 'start', rtl);
167
- if (alignment) {
168
- list = list.map(side => side + "-" + alignment);
169
- if (flipAlignment) {
170
- list = list.concat(list.map(getOppositeAlignmentPlacement));
171
- }
172
- }
173
- return list;
174
- }
175
- function getOppositePlacement(placement) {
176
- const side = getSide(placement);
177
- return oppositeSideMap[side] + placement.slice(side.length);
178
- }
179
- function expandPaddingObject(padding) {
180
- return {
181
- top: 0,
182
- right: 0,
183
- bottom: 0,
184
- left: 0,
185
- ...padding
186
- };
187
- }
188
- function getPaddingObject(padding) {
189
- return typeof padding !== 'number' ? expandPaddingObject(padding) : {
190
- top: padding,
191
- right: padding,
192
- bottom: padding,
193
- left: padding
194
- };
195
- }
196
- function rectToClientRect(rect) {
197
- const {
198
- x,
199
- y,
200
- width,
201
- height
202
- } = rect;
203
- return {
204
- width,
205
- height,
206
- top: y,
207
- left: x,
208
- right: x + width,
209
- bottom: y + height,
210
- x,
211
- y
212
- };
213
- }
214
-
215
- function computeCoordsFromPlacement(_ref, placement, rtl) {
216
- let {
217
- reference,
218
- floating
219
- } = _ref;
220
- const sideAxis = getSideAxis(placement);
221
- const alignmentAxis = getAlignmentAxis(placement);
222
- const alignLength = getAxisLength(alignmentAxis);
223
- const side = getSide(placement);
224
- const isVertical = sideAxis === 'y';
225
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
226
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
227
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
228
- let coords;
229
- switch (side) {
230
- case 'top':
231
- coords = {
232
- x: commonX,
233
- y: reference.y - floating.height
234
- };
235
- break;
236
- case 'bottom':
237
- coords = {
238
- x: commonX,
239
- y: reference.y + reference.height
240
- };
241
- break;
242
- case 'right':
243
- coords = {
244
- x: reference.x + reference.width,
245
- y: commonY
246
- };
247
- break;
248
- case 'left':
249
- coords = {
250
- x: reference.x - floating.width,
251
- y: commonY
252
- };
253
- break;
254
- default:
255
- coords = {
256
- x: reference.x,
257
- y: reference.y
258
- };
259
- }
260
- switch (getAlignment(placement)) {
261
- case 'start':
262
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
263
- break;
264
- case 'end':
265
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
266
- break;
267
- }
268
- return coords;
269
- }
270
-
271
- /**
272
- * Resolves with an object of overflow side offsets that determine how much the
273
- * element is overflowing a given clipping boundary on each side.
274
- * - positive = overflowing the boundary by that number of pixels
275
- * - negative = how many pixels left before it will overflow
276
- * - 0 = lies flush with the boundary
277
- * @see https://floating-ui.com/docs/detectOverflow
278
- */
279
- async function detectOverflow(state, options) {
280
- var _await$platform$isEle;
281
- if (options === void 0) {
282
- options = {};
283
- }
284
- const {
285
- x,
286
- y,
287
- platform,
288
- rects,
289
- elements,
290
- strategy
291
- } = state;
292
- const {
293
- boundary = 'clippingAncestors',
294
- rootBoundary = 'viewport',
295
- elementContext = 'floating',
296
- altBoundary = false,
297
- padding = 0
298
- } = evaluate(options, state);
299
- const paddingObject = getPaddingObject(padding);
300
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
301
- const element = elements[altBoundary ? altContext : elementContext];
302
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
303
- element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
304
- boundary,
305
- rootBoundary,
306
- strategy
307
- }));
308
- const rect = elementContext === 'floating' ? {
309
- x,
310
- y,
311
- width: rects.floating.width,
312
- height: rects.floating.height
313
- } : rects.reference;
314
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
315
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
316
- x: 1,
317
- y: 1
318
- } : {
319
- x: 1,
320
- y: 1
321
- };
322
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
323
- elements,
324
- rect,
325
- offsetParent,
326
- strategy
327
- }) : rect);
328
- return {
329
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
330
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
331
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
332
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
333
- };
334
- }
335
-
336
- // Maximum number of resets that can occur before bailing to avoid infinite reset loops.
337
- const MAX_RESET_COUNT = 50;
338
-
339
- /**
340
- * Computes the `x` and `y` coordinates that will place the floating element
341
- * next to a given reference element.
342
- *
343
- * This export does not have any `platform` interface logic. You will need to
344
- * write one for the platform you are using Floating UI with.
345
- */
346
- const computePosition$1 = async (reference, floating, config) => {
347
- const {
348
- placement = 'bottom',
349
- strategy = 'absolute',
350
- middleware = [],
351
- platform
352
- } = config;
353
- const platformWithDetectOverflow = platform.detectOverflow ? platform : {
354
- ...platform,
355
- detectOverflow
356
- };
357
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
358
- let rects = await platform.getElementRects({
359
- reference,
360
- floating,
361
- strategy
362
- });
363
- let {
364
- x,
365
- y
366
- } = computeCoordsFromPlacement(rects, placement, rtl);
367
- let statefulPlacement = placement;
368
- let resetCount = 0;
369
- const middlewareData = {};
370
- for (let i = 0; i < middleware.length; i++) {
371
- const currentMiddleware = middleware[i];
372
- if (!currentMiddleware) {
373
- continue;
374
- }
375
- const {
376
- name,
377
- fn
378
- } = currentMiddleware;
379
- const {
380
- x: nextX,
381
- y: nextY,
382
- data,
383
- reset
384
- } = await fn({
385
- x,
386
- y,
387
- initialPlacement: placement,
388
- placement: statefulPlacement,
389
- strategy,
390
- middlewareData,
391
- rects,
392
- platform: platformWithDetectOverflow,
393
- elements: {
394
- reference,
395
- floating
396
- }
397
- });
398
- x = nextX != null ? nextX : x;
399
- y = nextY != null ? nextY : y;
400
- middlewareData[name] = {
401
- ...middlewareData[name],
402
- ...data
403
- };
404
- if (reset && resetCount < MAX_RESET_COUNT) {
405
- resetCount++;
406
- if (typeof reset === 'object') {
407
- if (reset.placement) {
408
- statefulPlacement = reset.placement;
409
- }
410
- if (reset.rects) {
411
- rects = reset.rects === true ? await platform.getElementRects({
412
- reference,
413
- floating,
414
- strategy
415
- }) : reset.rects;
416
- }
417
- ({
418
- x,
419
- y
420
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
421
- }
422
- i = -1;
423
- }
424
- }
425
- return {
426
- x,
427
- y,
428
- placement: statefulPlacement,
429
- strategy,
430
- middlewareData
431
- };
432
- };
433
-
434
- /**
435
- * Optimizes the visibility of the floating element by flipping the `placement`
436
- * in order to keep it in view when the preferred placement(s) will overflow the
437
- * clipping boundary. Alternative to `autoPlacement`.
438
- * @see https://floating-ui.com/docs/flip
439
- */
440
- const flip$1 = function (options) {
441
- if (options === void 0) {
442
- options = {};
443
- }
444
- return {
445
- name: 'flip',
446
- options,
447
- async fn(state) {
448
- var _middlewareData$arrow, _middlewareData$flip;
449
- const {
450
- placement,
451
- middlewareData,
452
- rects,
453
- initialPlacement,
454
- platform,
455
- elements
456
- } = state;
457
- const {
458
- mainAxis: checkMainAxis = true,
459
- crossAxis: checkCrossAxis = true,
460
- fallbackPlacements: specifiedFallbackPlacements,
461
- fallbackStrategy = 'bestFit',
462
- fallbackAxisSideDirection = 'none',
463
- flipAlignment = true,
464
- ...detectOverflowOptions
465
- } = evaluate(options, state);
466
-
467
- // If a reset by the arrow was caused due to an alignment offset being
468
- // added, we should skip any logic now since `flip()` has already done its
469
- // work.
470
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
471
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
472
- return {};
473
- }
474
- const side = getSide(placement);
475
- const initialSideAxis = getSideAxis(initialPlacement);
476
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
477
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
478
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
479
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
480
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
481
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
482
- }
483
- const placements = [initialPlacement, ...fallbackPlacements];
484
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
485
- const overflows = [];
486
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
487
- if (checkMainAxis) {
488
- overflows.push(overflow[side]);
489
- }
490
- if (checkCrossAxis) {
491
- const sides = getAlignmentSides(placement, rects, rtl);
492
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
493
- }
494
- overflowsData = [...overflowsData, {
495
- placement,
496
- overflows
497
- }];
498
-
499
- // One or more sides is overflowing.
500
- if (!overflows.every(side => side <= 0)) {
501
- var _middlewareData$flip2, _overflowsData$filter;
502
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
503
- const nextPlacement = placements[nextIndex];
504
- if (nextPlacement) {
505
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
506
- if (!ignoreCrossAxisOverflow ||
507
- // We leave the current main axis only if every placement on that axis
508
- // overflows the main axis.
509
- overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
510
- // Try next placement and re-run the lifecycle.
511
- return {
512
- data: {
513
- index: nextIndex,
514
- overflows: overflowsData
515
- },
516
- reset: {
517
- placement: nextPlacement
518
- }
519
- };
520
- }
521
- }
522
-
523
- // First, find the candidates that fit on the mainAxis side of overflow,
524
- // then find the placement that fits the best on the main crossAxis side.
525
- let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
526
-
527
- // Otherwise fallback.
528
- if (!resetPlacement) {
529
- switch (fallbackStrategy) {
530
- case 'bestFit':
531
- {
532
- var _overflowsData$filter2;
533
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
534
- if (hasFallbackAxisSideDirection) {
535
- const currentSideAxis = getSideAxis(d.placement);
536
- return currentSideAxis === initialSideAxis ||
537
- // Create a bias to the `y` side axis due to horizontal
538
- // reading directions favoring greater width.
539
- currentSideAxis === 'y';
540
- }
541
- return true;
542
- }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
543
- if (placement) {
544
- resetPlacement = placement;
545
- }
546
- break;
547
- }
548
- case 'initialPlacement':
549
- resetPlacement = initialPlacement;
550
- break;
551
- }
552
- }
553
- if (placement !== resetPlacement) {
554
- return {
555
- reset: {
556
- placement: resetPlacement
557
- }
558
- };
559
- }
560
- }
561
- return {};
562
- }
563
- };
564
- };
565
-
566
- const originSides = /*#__PURE__*/new Set(['left', 'top']);
567
-
568
- // For type backwards-compatibility, the `OffsetOptions` type was also
569
- // Derivable.
570
-
571
- async function convertValueToCoords(state, options) {
572
- const {
573
- placement,
574
- platform,
575
- elements
576
- } = state;
577
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
578
- const side = getSide(placement);
579
- const alignment = getAlignment(placement);
580
- const isVertical = getSideAxis(placement) === 'y';
581
- const mainAxisMulti = originSides.has(side) ? -1 : 1;
582
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
583
- const rawValue = evaluate(options, state);
584
-
585
- // eslint-disable-next-line prefer-const
586
- let {
587
- mainAxis,
588
- crossAxis,
589
- alignmentAxis
590
- } = typeof rawValue === 'number' ? {
591
- mainAxis: rawValue,
592
- crossAxis: 0,
593
- alignmentAxis: null
594
- } : {
595
- mainAxis: rawValue.mainAxis || 0,
596
- crossAxis: rawValue.crossAxis || 0,
597
- alignmentAxis: rawValue.alignmentAxis
598
- };
599
- if (alignment && typeof alignmentAxis === 'number') {
600
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
601
- }
602
- return isVertical ? {
603
- x: crossAxis * crossAxisMulti,
604
- y: mainAxis * mainAxisMulti
605
- } : {
606
- x: mainAxis * mainAxisMulti,
607
- y: crossAxis * crossAxisMulti
608
- };
609
- }
610
-
611
- /**
612
- * Modifies the placement by translating the floating element along the
613
- * specified axes.
614
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
615
- * object may be passed.
616
- * @see https://floating-ui.com/docs/offset
617
- */
618
- const offset$1 = function (options) {
619
- if (options === void 0) {
620
- options = 0;
621
- }
622
- return {
623
- name: 'offset',
624
- options,
625
- async fn(state) {
626
- var _middlewareData$offse, _middlewareData$arrow;
627
- const {
628
- x,
629
- y,
630
- placement,
631
- middlewareData
632
- } = state;
633
- const diffCoords = await convertValueToCoords(state, options);
634
-
635
- // If the placement is the same and the arrow caused an alignment offset
636
- // then we don't need to change the positioning coordinates.
637
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
638
- return {};
639
- }
640
- return {
641
- x: x + diffCoords.x,
642
- y: y + diffCoords.y,
643
- data: {
644
- ...diffCoords,
645
- placement
646
- }
647
- };
648
- }
649
- };
650
- };
651
-
652
- /**
653
- * Optimizes the visibility of the floating element by shifting it in order to
654
- * keep it in view when it will overflow the clipping boundary.
655
- * @see https://floating-ui.com/docs/shift
656
- */
657
- const shift$1 = function (options) {
658
- if (options === void 0) {
659
- options = {};
660
- }
661
- return {
662
- name: 'shift',
663
- options,
664
- async fn(state) {
665
- const {
666
- x,
667
- y,
668
- placement,
669
- platform
670
- } = state;
671
- const {
672
- mainAxis: checkMainAxis = true,
673
- crossAxis: checkCrossAxis = false,
674
- limiter = {
675
- fn: _ref => {
676
- let {
677
- x,
678
- y
679
- } = _ref;
680
- return {
681
- x,
682
- y
683
- };
684
- }
685
- },
686
- ...detectOverflowOptions
687
- } = evaluate(options, state);
688
- const coords = {
689
- x,
690
- y
691
- };
692
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
693
- const crossAxis = getSideAxis(getSide(placement));
694
- const mainAxis = getOppositeAxis(crossAxis);
695
- let mainAxisCoord = coords[mainAxis];
696
- let crossAxisCoord = coords[crossAxis];
697
- if (checkMainAxis) {
698
- const minSide = mainAxis === 'y' ? 'top' : 'left';
699
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
700
- const min = mainAxisCoord + overflow[minSide];
701
- const max = mainAxisCoord - overflow[maxSide];
702
- mainAxisCoord = clamp(min, mainAxisCoord, max);
703
- }
704
- if (checkCrossAxis) {
705
- const minSide = crossAxis === 'y' ? 'top' : 'left';
706
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
707
- const min = crossAxisCoord + overflow[minSide];
708
- const max = crossAxisCoord - overflow[maxSide];
709
- crossAxisCoord = clamp(min, crossAxisCoord, max);
710
- }
711
- const limitedCoords = limiter.fn({
712
- ...state,
713
- [mainAxis]: mainAxisCoord,
714
- [crossAxis]: crossAxisCoord
715
- });
716
- return {
717
- ...limitedCoords,
718
- data: {
719
- x: limitedCoords.x - x,
720
- y: limitedCoords.y - y,
721
- enabled: {
722
- [mainAxis]: checkMainAxis,
723
- [crossAxis]: checkCrossAxis
724
- }
725
- }
726
- };
727
- }
728
- };
729
- };
730
-
731
- function hasWindow() {
732
- return typeof window !== 'undefined';
733
- }
734
- function getNodeName(node) {
735
- if (isNode(node)) {
736
- return (node.nodeName || '').toLowerCase();
737
- }
738
- // Mocked nodes in testing environments may not be instances of Node. By
739
- // returning `#document` an infinite loop won't occur.
740
- // https://github.com/floating-ui/floating-ui/issues/2317
741
- return '#document';
742
- }
743
- function getWindow(node) {
744
- var _node$ownerDocument;
745
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
746
- }
747
- function getDocumentElement(node) {
748
- var _ref;
749
- return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
750
- }
751
- function isNode(value) {
752
- if (!hasWindow()) {
753
- return false;
754
- }
755
- return value instanceof Node || value instanceof getWindow(value).Node;
756
- }
757
- function isElement(value) {
758
- if (!hasWindow()) {
759
- return false;
760
- }
761
- return value instanceof Element || value instanceof getWindow(value).Element;
762
- }
763
- function isHTMLElement(value) {
764
- if (!hasWindow()) {
765
- return false;
766
- }
767
- return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
768
- }
769
- function isShadowRoot(value) {
770
- if (!hasWindow() || typeof ShadowRoot === 'undefined') {
771
- return false;
772
- }
773
- return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
774
- }
775
- function isOverflowElement(element) {
776
- const {
777
- overflow,
778
- overflowX,
779
- overflowY,
780
- display
781
- } = getComputedStyle$1(element);
782
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
783
- }
784
- function isTableElement(element) {
785
- return /^(table|td|th)$/.test(getNodeName(element));
786
- }
787
- function isTopLayer(element) {
788
- try {
789
- if (element.matches(':popover-open')) {
790
- return true;
791
- }
792
- } catch (_e) {
793
- // no-op
794
- }
795
- try {
796
- return element.matches(':modal');
797
- } catch (_e) {
798
- return false;
799
- }
800
- }
801
- const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
802
- const containRe = /paint|layout|strict|content/;
803
- const isNotNone = value => !!value && value !== 'none';
804
- let isWebKitValue;
805
- function isContainingBlock(elementOrCss) {
806
- const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
807
-
808
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
809
- // https://drafts.csswg.org/css-transforms-2/#individual-transforms
810
- return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
811
- }
812
- function getContainingBlock(element) {
813
- let currentNode = getParentNode(element);
814
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
815
- if (isContainingBlock(currentNode)) {
816
- return currentNode;
817
- } else if (isTopLayer(currentNode)) {
818
- return null;
819
- }
820
- currentNode = getParentNode(currentNode);
821
- }
822
- return null;
823
- }
824
- function isWebKit() {
825
- if (isWebKitValue == null) {
826
- isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
827
- }
828
- return isWebKitValue;
829
- }
830
- function isLastTraversableNode(node) {
831
- return /^(html|body|#document)$/.test(getNodeName(node));
832
- }
833
- function getComputedStyle$1(element) {
834
- return getWindow(element).getComputedStyle(element);
835
- }
836
- function getNodeScroll(element) {
837
- if (isElement(element)) {
838
- return {
839
- scrollLeft: element.scrollLeft,
840
- scrollTop: element.scrollTop
841
- };
842
- }
843
- return {
844
- scrollLeft: element.scrollX,
845
- scrollTop: element.scrollY
846
- };
847
- }
848
- function getParentNode(node) {
849
- if (getNodeName(node) === 'html') {
850
- return node;
851
- }
852
- const result =
853
- // Step into the shadow DOM of the parent of a slotted node.
854
- node.assignedSlot ||
855
- // DOM Element detected.
856
- node.parentNode ||
857
- // ShadowRoot detected.
858
- isShadowRoot(node) && node.host ||
859
- // Fallback.
860
- getDocumentElement(node);
861
- return isShadowRoot(result) ? result.host : result;
862
- }
863
- function getNearestOverflowAncestor(node) {
864
- const parentNode = getParentNode(node);
865
- if (isLastTraversableNode(parentNode)) {
866
- return node.ownerDocument ? node.ownerDocument.body : node.body;
867
- }
868
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
869
- return parentNode;
870
- }
871
- return getNearestOverflowAncestor(parentNode);
872
- }
873
- function getOverflowAncestors(node, list, traverseIframes) {
874
- var _node$ownerDocument2;
875
- if (list === void 0) {
876
- list = [];
877
- }
878
- if (traverseIframes === void 0) {
879
- traverseIframes = true;
880
- }
881
- const scrollableAncestor = getNearestOverflowAncestor(node);
882
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
883
- const win = getWindow(scrollableAncestor);
884
- if (isBody) {
885
- const frameElement = getFrameElement(win);
886
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
887
- } else {
888
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
889
- }
890
- }
891
- function getFrameElement(win) {
892
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
893
- }
894
-
895
- function getCssDimensions(element) {
896
- const css = getComputedStyle$1(element);
897
- // In testing environments, the `width` and `height` properties are empty
898
- // strings for SVG elements, returning NaN. Fallback to `0` in this case.
899
- let width = parseFloat(css.width) || 0;
900
- let height = parseFloat(css.height) || 0;
901
- const hasOffset = isHTMLElement(element);
902
- const offsetWidth = hasOffset ? element.offsetWidth : width;
903
- const offsetHeight = hasOffset ? element.offsetHeight : height;
904
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
905
- if (shouldFallback) {
906
- width = offsetWidth;
907
- height = offsetHeight;
908
- }
909
- return {
910
- width,
911
- height,
912
- $: shouldFallback
913
- };
914
- }
915
-
916
- function unwrapElement(element) {
917
- return !isElement(element) ? element.contextElement : element;
918
- }
919
-
920
- function getScale(element) {
921
- const domElement = unwrapElement(element);
922
- if (!isHTMLElement(domElement)) {
923
- return createCoords(1);
924
- }
925
- const rect = domElement.getBoundingClientRect();
926
- const {
927
- width,
928
- height,
929
- $
930
- } = getCssDimensions(domElement);
931
- let x = ($ ? round(rect.width) : rect.width) / width;
932
- let y = ($ ? round(rect.height) : rect.height) / height;
933
-
934
- // 0, NaN, or Infinity should always fallback to 1.
935
-
936
- if (!x || !Number.isFinite(x)) {
937
- x = 1;
938
- }
939
- if (!y || !Number.isFinite(y)) {
940
- y = 1;
941
- }
942
- return {
943
- x,
944
- y
945
- };
946
- }
947
-
948
- const noOffsets = /*#__PURE__*/createCoords(0);
949
- function getVisualOffsets(element) {
950
- const win = getWindow(element);
951
- if (!isWebKit() || !win.visualViewport) {
952
- return noOffsets;
953
- }
954
- return {
955
- x: win.visualViewport.offsetLeft,
956
- y: win.visualViewport.offsetTop
957
- };
958
- }
959
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
960
- if (isFixed === void 0) {
961
- isFixed = false;
962
- }
963
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
964
- return false;
965
- }
966
- return isFixed;
967
- }
968
-
969
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
970
- if (includeScale === void 0) {
971
- includeScale = false;
972
- }
973
- if (isFixedStrategy === void 0) {
974
- isFixedStrategy = false;
975
- }
976
- const clientRect = element.getBoundingClientRect();
977
- const domElement = unwrapElement(element);
978
- let scale = createCoords(1);
979
- if (includeScale) {
980
- if (offsetParent) {
981
- if (isElement(offsetParent)) {
982
- scale = getScale(offsetParent);
983
- }
984
- } else {
985
- scale = getScale(element);
986
- }
987
- }
988
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
989
- let x = (clientRect.left + visualOffsets.x) / scale.x;
990
- let y = (clientRect.top + visualOffsets.y) / scale.y;
991
- let width = clientRect.width / scale.x;
992
- let height = clientRect.height / scale.y;
993
- if (domElement) {
994
- const win = getWindow(domElement);
995
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
996
- let currentWin = win;
997
- let currentIFrame = getFrameElement(currentWin);
998
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
999
- const iframeScale = getScale(currentIFrame);
1000
- const iframeRect = currentIFrame.getBoundingClientRect();
1001
- const css = getComputedStyle$1(currentIFrame);
1002
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
1003
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
1004
- x *= iframeScale.x;
1005
- y *= iframeScale.y;
1006
- width *= iframeScale.x;
1007
- height *= iframeScale.y;
1008
- x += left;
1009
- y += top;
1010
- currentWin = getWindow(currentIFrame);
1011
- currentIFrame = getFrameElement(currentWin);
1012
- }
1013
- }
1014
- return rectToClientRect({
1015
- width,
1016
- height,
1017
- x,
1018
- y
1019
- });
1020
- }
1021
-
1022
- // If <html> has a CSS width greater than the viewport, then this will be
1023
- // incorrect for RTL.
1024
- function getWindowScrollBarX(element, rect) {
1025
- const leftScroll = getNodeScroll(element).scrollLeft;
1026
- if (!rect) {
1027
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
1028
- }
1029
- return rect.left + leftScroll;
1030
- }
1031
-
1032
- function getHTMLOffset(documentElement, scroll) {
1033
- const htmlRect = documentElement.getBoundingClientRect();
1034
- const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
1035
- const y = htmlRect.top + scroll.scrollTop;
1036
- return {
1037
- x,
1038
- y
1039
- };
1040
- }
1041
-
1042
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1043
- let {
1044
- elements,
1045
- rect,
1046
- offsetParent,
1047
- strategy
1048
- } = _ref;
1049
- const isFixed = strategy === 'fixed';
1050
- const documentElement = getDocumentElement(offsetParent);
1051
- const topLayer = elements ? isTopLayer(elements.floating) : false;
1052
- if (offsetParent === documentElement || topLayer && isFixed) {
1053
- return rect;
1054
- }
1055
- let scroll = {
1056
- scrollLeft: 0,
1057
- scrollTop: 0
1058
- };
1059
- let scale = createCoords(1);
1060
- const offsets = createCoords(0);
1061
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1062
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1063
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1064
- scroll = getNodeScroll(offsetParent);
1065
- }
1066
- if (isOffsetParentAnElement) {
1067
- const offsetRect = getBoundingClientRect(offsetParent);
1068
- scale = getScale(offsetParent);
1069
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1070
- offsets.y = offsetRect.y + offsetParent.clientTop;
1071
- }
1072
- }
1073
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1074
- return {
1075
- width: rect.width * scale.x,
1076
- height: rect.height * scale.y,
1077
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
1078
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
1079
- };
1080
- }
1081
-
1082
- function getClientRects(element) {
1083
- return Array.from(element.getClientRects());
1084
- }
1085
-
1086
- // Gets the entire size of the scrollable document area, even extending outside
1087
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
1088
- function getDocumentRect(element) {
1089
- const html = getDocumentElement(element);
1090
- const scroll = getNodeScroll(element);
1091
- const body = element.ownerDocument.body;
1092
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
1093
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
1094
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
1095
- const y = -scroll.scrollTop;
1096
- if (getComputedStyle$1(body).direction === 'rtl') {
1097
- x += max(html.clientWidth, body.clientWidth) - width;
1098
- }
1099
- return {
1100
- width,
1101
- height,
1102
- x,
1103
- y
1104
- };
1105
- }
1106
-
1107
- // Safety check: ensure the scrollbar space is reasonable in case this
1108
- // calculation is affected by unusual styles.
1109
- // Most scrollbars leave 15-18px of space.
1110
- const SCROLLBAR_MAX = 25;
1111
- function getViewportRect(element, strategy) {
1112
- const win = getWindow(element);
1113
- const html = getDocumentElement(element);
1114
- const visualViewport = win.visualViewport;
1115
- let width = html.clientWidth;
1116
- let height = html.clientHeight;
1117
- let x = 0;
1118
- let y = 0;
1119
- if (visualViewport) {
1120
- width = visualViewport.width;
1121
- height = visualViewport.height;
1122
- const visualViewportBased = isWebKit();
1123
- if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
1124
- x = visualViewport.offsetLeft;
1125
- y = visualViewport.offsetTop;
1126
- }
1127
- }
1128
- const windowScrollbarX = getWindowScrollBarX(html);
1129
- // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
1130
- // visual width of the <html> but this is not considered in the size
1131
- // of `html.clientWidth`.
1132
- if (windowScrollbarX <= 0) {
1133
- const doc = html.ownerDocument;
1134
- const body = doc.body;
1135
- const bodyStyles = getComputedStyle(body);
1136
- const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
1137
- const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
1138
- if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
1139
- width -= clippingStableScrollbarWidth;
1140
- }
1141
- } else if (windowScrollbarX <= SCROLLBAR_MAX) {
1142
- // If the <body> scrollbar is on the left, the width needs to be extended
1143
- // by the scrollbar amount so there isn't extra space on the right.
1144
- width += windowScrollbarX;
1145
- }
1146
- return {
1147
- width,
1148
- height,
1149
- x,
1150
- y
1151
- };
1152
- }
1153
-
1154
- // Returns the inner client rect, subtracting scrollbars if present.
1155
- function getInnerBoundingClientRect(element, strategy) {
1156
- const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
1157
- const top = clientRect.top + element.clientTop;
1158
- const left = clientRect.left + element.clientLeft;
1159
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
1160
- const width = element.clientWidth * scale.x;
1161
- const height = element.clientHeight * scale.y;
1162
- const x = left * scale.x;
1163
- const y = top * scale.y;
1164
- return {
1165
- width,
1166
- height,
1167
- x,
1168
- y
1169
- };
1170
- }
1171
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
1172
- let rect;
1173
- if (clippingAncestor === 'viewport') {
1174
- rect = getViewportRect(element, strategy);
1175
- } else if (clippingAncestor === 'document') {
1176
- rect = getDocumentRect(getDocumentElement(element));
1177
- } else if (isElement(clippingAncestor)) {
1178
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
1179
- } else {
1180
- const visualOffsets = getVisualOffsets(element);
1181
- rect = {
1182
- x: clippingAncestor.x - visualOffsets.x,
1183
- y: clippingAncestor.y - visualOffsets.y,
1184
- width: clippingAncestor.width,
1185
- height: clippingAncestor.height
1186
- };
1187
- }
1188
- return rectToClientRect(rect);
1189
- }
1190
- function hasFixedPositionAncestor(element, stopNode) {
1191
- const parentNode = getParentNode(element);
1192
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
1193
- return false;
1194
- }
1195
- return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
1196
- }
1197
-
1198
- // A "clipping ancestor" is an `overflow` element with the characteristic of
1199
- // clipping (or hiding) child elements. This returns all clipping ancestors
1200
- // of the given element up the tree.
1201
- function getClippingElementAncestors(element, cache) {
1202
- const cachedResult = cache.get(element);
1203
- if (cachedResult) {
1204
- return cachedResult;
1205
- }
1206
- let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
1207
- let currentContainingBlockComputedStyle = null;
1208
- const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
1209
- let currentNode = elementIsFixed ? getParentNode(element) : element;
1210
-
1211
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1212
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
1213
- const computedStyle = getComputedStyle$1(currentNode);
1214
- const currentNodeIsContaining = isContainingBlock(currentNode);
1215
- if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
1216
- currentContainingBlockComputedStyle = null;
1217
- }
1218
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1219
- if (shouldDropCurrentNode) {
1220
- // Drop non-containing blocks.
1221
- result = result.filter(ancestor => ancestor !== currentNode);
1222
- } else {
1223
- // Record last containing block for next iteration.
1224
- currentContainingBlockComputedStyle = computedStyle;
1225
- }
1226
- currentNode = getParentNode(currentNode);
1227
- }
1228
- cache.set(element, result);
1229
- return result;
1230
- }
1231
-
1232
- // Gets the maximum area that the element is visible in due to any number of
1233
- // clipping ancestors.
1234
- function getClippingRect(_ref) {
1235
- let {
1236
- element,
1237
- boundary,
1238
- rootBoundary,
1239
- strategy
1240
- } = _ref;
1241
- const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
1242
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1243
- const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
1244
- let top = firstRect.top;
1245
- let right = firstRect.right;
1246
- let bottom = firstRect.bottom;
1247
- let left = firstRect.left;
1248
- for (let i = 1; i < clippingAncestors.length; i++) {
1249
- const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
1250
- top = max(rect.top, top);
1251
- right = min(rect.right, right);
1252
- bottom = min(rect.bottom, bottom);
1253
- left = max(rect.left, left);
1254
- }
1255
- return {
1256
- width: right - left,
1257
- height: bottom - top,
1258
- x: left,
1259
- y: top
1260
- };
1261
- }
1262
-
1263
- function getDimensions(element) {
1264
- const {
1265
- width,
1266
- height
1267
- } = getCssDimensions(element);
1268
- return {
1269
- width,
1270
- height
1271
- };
1272
- }
1273
-
1274
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1275
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1276
- const documentElement = getDocumentElement(offsetParent);
1277
- const isFixed = strategy === 'fixed';
1278
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
1279
- let scroll = {
1280
- scrollLeft: 0,
1281
- scrollTop: 0
1282
- };
1283
- const offsets = createCoords(0);
1284
-
1285
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1286
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1287
- function setLeftRTLScrollbarOffset() {
1288
- offsets.x = getWindowScrollBarX(documentElement);
1289
- }
1290
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1291
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1292
- scroll = getNodeScroll(offsetParent);
1293
- }
1294
- if (isOffsetParentAnElement) {
1295
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
1296
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1297
- offsets.y = offsetRect.y + offsetParent.clientTop;
1298
- } else if (documentElement) {
1299
- setLeftRTLScrollbarOffset();
1300
- }
1301
- }
1302
- if (isFixed && !isOffsetParentAnElement && documentElement) {
1303
- setLeftRTLScrollbarOffset();
1304
- }
1305
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1306
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1307
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
1308
- return {
1309
- x,
1310
- y,
1311
- width: rect.width,
1312
- height: rect.height
1313
- };
1314
- }
1315
-
1316
- function isStaticPositioned(element) {
1317
- return getComputedStyle$1(element).position === 'static';
1318
- }
1319
-
1320
- function getTrueOffsetParent(element, polyfill) {
1321
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
1322
- return null;
1323
- }
1324
- if (polyfill) {
1325
- return polyfill(element);
1326
- }
1327
- let rawOffsetParent = element.offsetParent;
1328
-
1329
- // Firefox returns the <html> element as the offsetParent if it's non-static,
1330
- // while Chrome and Safari return the <body> element. The <body> element must
1331
- // be used to perform the correct calculations even if the <html> element is
1332
- // non-static.
1333
- if (getDocumentElement(element) === rawOffsetParent) {
1334
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
1335
- }
1336
- return rawOffsetParent;
1337
- }
1338
-
1339
- // Gets the closest ancestor positioned element. Handles some edge cases,
1340
- // such as table ancestors and cross browser bugs.
1341
- function getOffsetParent(element, polyfill) {
1342
- const win = getWindow(element);
1343
- if (isTopLayer(element)) {
1344
- return win;
1345
- }
1346
- if (!isHTMLElement(element)) {
1347
- let svgOffsetParent = getParentNode(element);
1348
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1349
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1350
- return svgOffsetParent;
1351
- }
1352
- svgOffsetParent = getParentNode(svgOffsetParent);
1353
- }
1354
- return win;
1355
- }
1356
- let offsetParent = getTrueOffsetParent(element, polyfill);
1357
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1358
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1359
- }
1360
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1361
- return win;
1362
- }
1363
- return offsetParent || getContainingBlock(element) || win;
1364
- }
1365
-
1366
- const getElementRects = async function (data) {
1367
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1368
- const getDimensionsFn = this.getDimensions;
1369
- const floatingDimensions = await getDimensionsFn(data.floating);
1370
- return {
1371
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1372
- floating: {
1373
- x: 0,
1374
- y: 0,
1375
- width: floatingDimensions.width,
1376
- height: floatingDimensions.height
1377
- }
1378
- };
1379
- };
1380
-
1381
- function isRTL(element) {
1382
- return getComputedStyle$1(element).direction === 'rtl';
1383
- }
1384
-
1385
- const platform = {
1386
- convertOffsetParentRelativeRectToViewportRelativeRect,
1387
- getDocumentElement,
1388
- getClippingRect,
1389
- getOffsetParent,
1390
- getElementRects,
1391
- getClientRects,
1392
- getDimensions,
1393
- getScale,
1394
- isElement,
1395
- isRTL
1396
- };
1397
-
1398
- function rectsAreEqual(a, b) {
1399
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
1400
- }
1401
-
1402
- // https://samthor.au/2021/observing-dom/
1403
- function observeMove(element, onMove) {
1404
- let io = null;
1405
- let timeoutId;
1406
- const root = getDocumentElement(element);
1407
- function cleanup() {
1408
- var _io;
1409
- clearTimeout(timeoutId);
1410
- (_io = io) == null || _io.disconnect();
1411
- io = null;
1412
- }
1413
- function refresh(skip, threshold) {
1414
- if (skip === void 0) {
1415
- skip = false;
1416
- }
1417
- if (threshold === void 0) {
1418
- threshold = 1;
1419
- }
1420
- cleanup();
1421
- const elementRectForRootMargin = element.getBoundingClientRect();
1422
- const {
1423
- left,
1424
- top,
1425
- width,
1426
- height
1427
- } = elementRectForRootMargin;
1428
- if (!skip) {
1429
- onMove();
1430
- }
1431
- if (!width || !height) {
1432
- return;
1433
- }
1434
- const insetTop = floor(top);
1435
- const insetRight = floor(root.clientWidth - (left + width));
1436
- const insetBottom = floor(root.clientHeight - (top + height));
1437
- const insetLeft = floor(left);
1438
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
1439
- const options = {
1440
- rootMargin,
1441
- threshold: max(0, min(1, threshold)) || 1
1442
- };
1443
- let isFirstUpdate = true;
1444
- function handleObserve(entries) {
1445
- const ratio = entries[0].intersectionRatio;
1446
- if (ratio !== threshold) {
1447
- if (!isFirstUpdate) {
1448
- return refresh();
1449
- }
1450
- if (!ratio) {
1451
- // If the reference is clipped, the ratio is 0. Throttle the refresh
1452
- // to prevent an infinite loop of updates.
1453
- timeoutId = setTimeout(() => {
1454
- refresh(false, 1e-7);
1455
- }, 1000);
1456
- } else {
1457
- refresh(false, ratio);
1458
- }
1459
- }
1460
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
1461
- // It's possible that even though the ratio is reported as 1, the
1462
- // element is not actually fully within the IntersectionObserver's root
1463
- // area anymore. This can happen under performance constraints. This may
1464
- // be a bug in the browser's IntersectionObserver implementation. To
1465
- // work around this, we compare the element's bounding rect now with
1466
- // what it was at the time we created the IntersectionObserver. If they
1467
- // are not equal then the element moved, so we refresh.
1468
- refresh();
1469
- }
1470
- isFirstUpdate = false;
1471
- }
1472
-
1473
- // Older browsers don't support a `document` as the root and will throw an
1474
- // error.
1475
- try {
1476
- io = new IntersectionObserver(handleObserve, {
1477
- ...options,
1478
- // Handle <iframe>s
1479
- root: root.ownerDocument
1480
- });
1481
- } catch (_e) {
1482
- io = new IntersectionObserver(handleObserve, options);
1483
- }
1484
- io.observe(element);
1485
- }
1486
- refresh(true);
1487
- return cleanup;
1488
- }
1489
-
1490
- /**
1491
- * Automatically updates the position of the floating element when necessary.
1492
- * Should only be called when the floating element is mounted on the DOM or
1493
- * visible on the screen.
1494
- * @returns cleanup function that should be invoked when the floating element is
1495
- * removed from the DOM or hidden from the screen.
1496
- * @see https://floating-ui.com/docs/autoUpdate
1497
- */
1498
- function autoUpdate(reference, floating, update, options) {
1499
- if (options === void 0) {
1500
- options = {};
1501
- }
1502
- const {
1503
- ancestorScroll = true,
1504
- ancestorResize = true,
1505
- elementResize = typeof ResizeObserver === 'function',
1506
- layoutShift = typeof IntersectionObserver === 'function',
1507
- animationFrame = false
1508
- } = options;
1509
- const referenceEl = unwrapElement(reference);
1510
- const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
1511
- ancestors.forEach(ancestor => {
1512
- ancestorScroll && ancestor.addEventListener('scroll', update, {
1513
- passive: true
1514
- });
1515
- ancestorResize && ancestor.addEventListener('resize', update);
1516
- });
1517
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
1518
- let reobserveFrame = -1;
1519
- let resizeObserver = null;
1520
- if (elementResize) {
1521
- resizeObserver = new ResizeObserver(_ref => {
1522
- let [firstEntry] = _ref;
1523
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
1524
- // Prevent update loops when using the `size` middleware.
1525
- // https://github.com/floating-ui/floating-ui/issues/1740
1526
- resizeObserver.unobserve(floating);
1527
- cancelAnimationFrame(reobserveFrame);
1528
- reobserveFrame = requestAnimationFrame(() => {
1529
- var _resizeObserver;
1530
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1531
- });
1532
- }
1533
- update();
1534
- });
1535
- if (referenceEl && !animationFrame) {
1536
- resizeObserver.observe(referenceEl);
1537
- }
1538
- if (floating) {
1539
- resizeObserver.observe(floating);
1540
- }
1541
- }
1542
- let frameId;
1543
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
1544
- if (animationFrame) {
1545
- frameLoop();
1546
- }
1547
- function frameLoop() {
1548
- const nextRefRect = getBoundingClientRect(reference);
1549
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
1550
- update();
1551
- }
1552
- prevRefRect = nextRefRect;
1553
- frameId = requestAnimationFrame(frameLoop);
1554
- }
1555
- update();
1556
- return () => {
1557
- var _resizeObserver2;
1558
- ancestors.forEach(ancestor => {
1559
- ancestorScroll && ancestor.removeEventListener('scroll', update);
1560
- ancestorResize && ancestor.removeEventListener('resize', update);
1561
- });
1562
- cleanupIo == null || cleanupIo();
1563
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
1564
- resizeObserver = null;
1565
- if (animationFrame) {
1566
- cancelAnimationFrame(frameId);
1567
- }
1568
- };
1569
- }
1570
-
1571
- /**
1572
- * Modifies the placement by translating the floating element along the
1573
- * specified axes.
1574
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
1575
- * object may be passed.
1576
- * @see https://floating-ui.com/docs/offset
1577
- */
1578
- const offset = offset$1;
1579
-
1580
- /**
1581
- * Optimizes the visibility of the floating element by shifting it in order to
1582
- * keep it in view when it will overflow the clipping boundary.
1583
- * @see https://floating-ui.com/docs/shift
1584
- */
1585
- const shift = shift$1;
1586
-
1587
- /**
1588
- * Optimizes the visibility of the floating element by flipping the `placement`
1589
- * in order to keep it in view when the preferred placement(s) will overflow the
1590
- * clipping boundary. Alternative to `autoPlacement`.
1591
- * @see https://floating-ui.com/docs/flip
1592
- */
1593
- const flip = flip$1;
1594
-
1595
- /**
1596
- * Computes the `x` and `y` coordinates that will place the floating element
1597
- * next to a given reference element.
1598
- */
1599
- const computePosition = (reference, floating, options) => {
1600
- // This caches the expensive `getClippingElementAncestors` function so that
1601
- // multiple lifecycle resets re-use the same result. It only lives for a
1602
- // single call. If other functions become expensive, we can add them as well.
1603
- const cache = new Map();
1604
- const mergedOptions = {
1605
- platform,
1606
- ...options
1607
- };
1608
- const platformWithCache = {
1609
- ...mergedOptions.platform,
1610
- _c: cache
1611
- };
1612
- return computePosition$1(reference, floating, {
1613
- ...mergedOptions,
1614
- platform: platformWithCache
1615
- });
1616
- };
1617
-
1618
- class PopoverController {
1619
- constructor(host, options = { placement: 'bottom', offset: 6 }) {
1620
- this.host = host;
1621
- this.options = options;
1622
- this.host.addController(this);
1623
- }
1624
- // Set up the floating logic
1625
- async updatePosition(reference, floating) {
1626
- if (!reference)
1627
- return;
1628
- this.cleanup?.();
1629
- this.cleanup = autoUpdate(reference, floating, async () => {
1630
- const { x, y } = await computePosition(reference, floating, {
1631
- placement: this.options.placement,
1632
- middleware: [
1633
- offset(this.options.offset),
1634
- flip(),
1635
- shift({ padding: 4 }),
1636
- ],
1637
- });
1638
- Object.assign(floating.style, {
1639
- left: `${x}px`,
1640
- top: `${y}px`,
1641
- position: 'absolute',
1642
- });
1643
- });
1644
- }
1645
- hostDisconnected() {
1646
- this.cleanup?.();
1647
- }
1648
- }
1649
-
1650
- /**
1651
- * @label Tooltip
1652
- * @tag base-tooltip
1653
- * @rawTag tooltip
1654
- * @summary Displays a tooltip for an element.
1655
- *
1656
- * @example
1657
- * ```html
1658
- * <span class="tooltip">Tooltip</span>
1659
- * ```
1660
- * @tags display
1661
- */
1662
- class Tooltip extends i$1 {
1663
- constructor() {
1664
- super(...arguments);
1665
- this.content = '';
1666
- /**
1667
- * The ID of the element the tooltip should attach to.
1668
- * If not provided, it defaults to the parent element.
1669
- */
1670
- this.for = '';
1671
- this.trigger = 'hover focus';
1672
- this.open = false;
1673
- this.variant = 'plain';
1674
- this._target = null;
1675
- this._popover = new PopoverController(this, {
1676
- placement: 'top',
1677
- offset: 8,
1678
- });
1679
- // Define listeners as arrow functions to maintain 'this' context
1680
- this._onMouseEnter = () => {
1681
- if (!this.hasTrigger('hover'))
1682
- return;
1683
- window.clearTimeout(this._hideTimeout); // Cancel any pending close
1684
- this.show();
1685
- };
1686
- this._onMouseLeave = () => {
1687
- if (!this.hasTrigger('hover'))
1688
- return;
1689
- // Small delay allows the mouse to move from target -> tooltip
1690
- // without the tooltip vanishing instantly.
1691
- this._hideTimeout = window.setTimeout(() => {
1692
- // Only hide if the mouse isn't currently hovering the target OR the tooltip
1693
- const isHoveringTarget = this._target?.matches(':hover');
1694
- const isHoveringTooltip = this.floatingEl?.matches(':hover');
1695
- if (!isHoveringTarget && !isHoveringTooltip) {
1696
- this.hide();
1697
- }
1698
- }, 100); // 100ms is usually enough for a smooth transition
1699
- };
1700
- this._onFocusIn = () => this.hasTrigger('focus') && this.show();
1701
- this._onFocusOut = (e) => {
1702
- if (!this.hasTrigger('focus'))
1703
- return;
1704
- if (this._target && !this._target.contains(e.relatedTarget)) {
1705
- this.hide();
1706
- }
1707
- };
1708
- this._onClick = (e) => {
1709
- if (!this.hasTrigger('click'))
1710
- return;
1711
- e.stopPropagation();
1712
- this.toggle();
1713
- };
1714
- this._handleGlobalOpen = (e) => {
1715
- if (e.detail.invoker !== this)
1716
- this.hide();
1717
- };
1718
- this._handleDocumentClick = (e) => {
1719
- const path = e.composedPath();
1720
- if (this._target && !path.includes(this._target)) {
1721
- this.hide();
1722
- }
1723
- };
1724
- }
1725
- hasTrigger(type) {
1726
- return this.trigger.split(' ').includes(type);
1727
- }
1728
- show() {
1729
- if (this.open)
1730
- return;
1731
- window.dispatchEvent(new CustomEvent(Tooltip.CLOSE_OTHERS_EVENT, {
1732
- detail: { invoker: this },
1733
- }));
1734
- this.open = true;
1735
- }
1736
- hide() {
1737
- if (!this.open)
1738
- return;
1739
- this.open = false;
1740
- }
1741
- toggle() {
1742
- // eslint-disable-next-line no-unused-expressions
1743
- this.open ? this.hide() : this.show();
1744
- }
1745
- detachListeners() {
1746
- if (!this._target)
1747
- return;
1748
- this._target.removeEventListener('mouseenter', this._onMouseEnter);
1749
- this._target.removeEventListener('mouseleave', this._onMouseLeave);
1750
- this._target.removeEventListener('focusin', this._onFocusIn);
1751
- this._target.removeEventListener('focusout', this._onFocusOut);
1752
- this._target.removeEventListener('click', this._onClick);
1753
- this._target = null;
1754
- }
1755
- attachListeners() {
1756
- this.detachListeners(); // Cleanup old target if it exists
1757
- // Resolve target: ID-based lookup or fallback to parent
1758
- const root = this.getRootNode();
1759
- this._target = this.for
1760
- ? root.getElementById(this.for)
1761
- : this.parentElement;
1762
- if (!this._target)
1763
- return;
1764
- this._target.addEventListener('mouseenter', this._onMouseEnter);
1765
- this._target.addEventListener('mouseleave', this._onMouseLeave);
1766
- this._target.addEventListener('focusin', this._onFocusIn);
1767
- this._target.addEventListener('focusout', this._onFocusOut);
1768
- this._target.addEventListener('click', this._onClick);
1769
- }
1770
- connectedCallback() {
1771
- super.connectedCallback();
1772
- this.attachListeners();
1773
- window.addEventListener(Tooltip.CLOSE_OTHERS_EVENT, this._handleGlobalOpen);
1774
- window.addEventListener('click', this._handleDocumentClick);
1775
- }
1776
- disconnectedCallback() {
1777
- this.detachListeners();
1778
- window.removeEventListener(Tooltip.CLOSE_OTHERS_EVENT, this._handleGlobalOpen);
1779
- window.removeEventListener('click', this._handleDocumentClick);
1780
- super.disconnectedCallback();
1781
- }
1782
- updated(changedProps) {
1783
- // If the 'for' property changes, re-bind listeners to the new target
1784
- if (changedProps.has('for')) {
1785
- this.attachListeners();
1786
- }
1787
- if (changedProps.has('open') && this.open && this._target) {
1788
- this._popover.updatePosition(this._target, this.floatingEl);
1789
- }
1790
- }
1791
- render() {
1792
- return b ` <div
1793
- class=${e$1({
1794
- tooltip: true,
1795
- open: this.open,
1796
- [`variant-${this.variant}`]: true,
1797
- })}
1798
- id="tooltip"
1799
- role="tooltip"
1800
- @mouseenter=${this._onMouseEnter}
1801
- @mouseleave=${this._onMouseLeave}
1802
- aria-hidden=${!this.open}
1803
- aria-labelledby="tooltip-labelledby"
1804
- >
1805
- ${this.variant === 'plain'
1806
- ? this.__renderPlainTooltip()
1807
- : this.__renderRichTooltip()}
1808
- </div>`;
1809
- }
1810
- // eslint-disable-next-line class-methods-use-this
1811
- __renderPlainTooltip() {
1812
- return b `<div class="tooltip-content" id="tooltip-labelledby">
1813
- <slot></slot>
1814
- </div>`;
1815
- }
1816
- // eslint-disable-next-line class-methods-use-this
1817
- __renderRichTooltip() {
1818
- return b `
1819
- <div class="tooltip-content">
1820
- <base-elevation class="elevation"></base-elevation>
1821
-
1822
- <div class="tooltip-title" id="tooltip-labelledby">
1823
- <slot name="title"></slot>
1824
- </div>
1825
- <div class="tooltip-support-text">
1826
- <slot></slot>
1827
- </div>
1828
- <div class="tooltip-actions">
1829
- <slot name="actions"></slot>
1830
- </div>
1831
- </div>
1832
- `;
1833
- }
1834
- }
1835
- Tooltip.styles = [css_248z];
1836
- Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
1837
- __decorate([
1838
- n()
1839
- ], Tooltip.prototype, "content", void 0);
1840
- __decorate([
1841
- n()
1842
- ], Tooltip.prototype, "for", void 0);
1843
- __decorate([
1844
- n({ type: String })
1845
- ], Tooltip.prototype, "trigger", void 0);
1846
- __decorate([
1847
- n({ type: Boolean, reflect: true })
1848
- ], Tooltip.prototype, "open", void 0);
1849
- __decorate([
1850
- n({ type: String, reflect: true })
1851
- ], Tooltip.prototype, "variant", void 0);
1852
- __decorate([
1853
- e('#tooltip')
1854
- ], Tooltip.prototype, "floatingEl", void 0);
1855
-
1856
- export { Tooltip };
1857
- //# sourceMappingURL=tooltip.js.map