@beeq/core 1.13.0 → 1.13.1
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/dist/beeq/beeq.esm.js +1 -1
- package/dist/beeq/index.esm.js +1 -1
- package/dist/beeq/index.esm.js.map +1 -1
- package/dist/beeq/p-923da026.entry.js +6 -0
- package/dist/beeq/p-923da026.entry.js.map +1 -0
- package/dist/beeq/p-DXYHHeJY.js +6 -0
- package/dist/beeq/p-DXYHHeJY.js.map +1 -0
- package/dist/beeq/{p-2fd6ea70.entry.js → p-d4fa3abb.entry.js} +2 -2
- package/dist/beeq/p-d4fa3abb.entry.js.map +1 -0
- package/dist/beeq/p-seEHHqwi.js +6 -0
- package/dist/beeq/p-seEHHqwi.js.map +1 -0
- package/dist/beeq/svg/.icons-meta.json +1 -1
- package/dist/beeq.html-custom-data.json +74 -74
- package/dist/cjs/beeq.cjs.js +1 -1
- package/dist/cjs/bq-dropdown_2.cjs.entry.js +12 -6
- package/dist/cjs/bq-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/bq-tooltip.cjs.entry.js +76 -14
- package/dist/cjs/bq-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/{index-CfLTYjba.js → index-CVDzXB4K.js} +213 -189
- package/dist/cjs/index-CVDzXB4K.js.map +1 -0
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/isPopoverSupported-CfD5YIXR.js +18 -0
- package/dist/cjs/isPopoverSupported-CfD5YIXR.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/empty-state/scss/bq-empty-state.css +1 -1
- package/dist/collection/components/icon/svg/.icons-meta.json +1 -1
- package/dist/collection/components/panel/bq-panel.js +11 -5
- package/dist/collection/components/panel/bq-panel.js.map +1 -1
- package/dist/collection/components/progress/scss/bq-progress.css +1 -1
- package/dist/collection/components/side-menu-item/scss/bq-side-menu-item.css +1 -1
- package/dist/collection/components/slider/scss/bq-slider.css +1 -1
- package/dist/collection/components/tooltip/bq-tooltip.js +74 -13
- package/dist/collection/components/tooltip/bq-tooltip.js.map +1 -1
- package/dist/collection/components/tooltip/scss/bq-tooltip.css +1 -1
- package/dist/collection/services/interfaces/floating-ui.js.map +1 -1
- package/dist/collection/services/libraries/floating-ui/index.js +93 -64
- package/dist/collection/services/libraries/floating-ui/index.js.map +1 -1
- package/dist/collection/shared/test-utils/setProperties.js +1 -1
- package/dist/collection/shared/test-utils/setProperties.js.map +1 -1
- package/dist/collection/shared/utils/index.js +1 -0
- package/dist/collection/shared/utils/index.js.map +1 -1
- package/dist/collection/shared/utils/isPopoverSupported.js +12 -0
- package/dist/collection/shared/utils/isPopoverSupported.js.map +1 -0
- package/dist/components/bq-date-picker.js +1 -1
- package/dist/components/bq-dropdown.js +1 -1
- package/dist/components/bq-empty-state.js +1 -1
- package/dist/components/bq-empty-state.js.map +1 -1
- package/dist/components/bq-panel.js +1 -1
- package/dist/components/bq-progress.js +1 -1
- package/dist/components/bq-progress.js.map +1 -1
- package/dist/components/bq-select.js +1 -1
- package/dist/components/bq-side-menu-item.js +1 -1
- package/dist/components/bq-side-menu-item.js.map +1 -1
- package/dist/components/bq-slider.js +1 -1
- package/dist/components/bq-slider.js.map +1 -1
- package/dist/components/bq-tooltip.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/p-B4jdbg-4.js +6 -0
- package/dist/components/p-B4jdbg-4.js.map +1 -0
- package/dist/components/p-DXYHHeJY.js +6 -0
- package/dist/components/p-DXYHHeJY.js.map +1 -0
- package/dist/components/{p-BS8hIETL.js → p-_I8PqzzU.js} +2 -2
- package/dist/components/{p-iyX-PhkX.js → p-c6L-z8md.js} +2 -2
- package/dist/components/p-c6L-z8md.js.map +1 -0
- package/dist/custom-elements.json +776 -736
- package/dist/esm/beeq.js +1 -1
- package/dist/esm/bq-dropdown_2.entry.js +12 -6
- package/dist/esm/bq-dropdown_2.entry.js.map +1 -1
- package/dist/esm/bq-tooltip.entry.js +76 -14
- package/dist/esm/bq-tooltip.entry.js.map +1 -1
- package/dist/esm/{index-CSAZnAFf.js → index-DXYHHeJY.js} +213 -189
- package/dist/esm/index-DXYHHeJY.js.map +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/isPopoverSupported-seEHHqwi.js +16 -0
- package/dist/esm/isPopoverSupported-seEHHqwi.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/hydrate/index.js +304 -205
- package/dist/hydrate/index.mjs +304 -205
- package/dist/types/components/panel/bq-panel.d.ts +1 -0
- package/dist/types/components/tooltip/bq-tooltip.d.ts +14 -0
- package/dist/types/services/interfaces/floating-ui.d.ts +1 -1
- package/dist/types/services/libraries/floating-ui/index.d.ts +37 -14
- package/dist/types/shared/test-utils/setProperties.d.ts +1 -1
- package/dist/types/shared/utils/index.d.ts +1 -0
- package/dist/types/shared/utils/isPopoverSupported.d.ts +2 -0
- package/package.json +3 -3
- package/dist/beeq/p-2fd6ea70.entry.js.map +0 -1
- package/dist/beeq/p-CSAZnAFf.js +0 -6
- package/dist/beeq/p-CSAZnAFf.js.map +0 -1
- package/dist/beeq/p-a55354ee.entry.js +0 -6
- package/dist/beeq/p-a55354ee.entry.js.map +0 -1
- package/dist/cjs/index-CfLTYjba.js.map +0 -1
- package/dist/components/p-CSAZnAFf.js +0 -6
- package/dist/components/p-CSAZnAFf.js.map +0 -1
- package/dist/components/p-Dd3v3b2E.js +0 -6
- package/dist/components/p-Dd3v3b2E.js.map +0 -1
- package/dist/components/p-iyX-PhkX.js.map +0 -1
- package/dist/esm/index-CSAZnAFf.js.map +0 -1
- /package/dist/components/{p-BS8hIETL.js.map → p-_I8PqzzU.js.map} +0 -0
package/dist/hydrate/index.js
CHANGED
|
@@ -5914,6 +5914,14 @@ const isHTMLElement$1 = (target, tag) => {
|
|
|
5914
5914
|
return target instanceof Node && target.nodeName.toLowerCase() === tag.toLowerCase();
|
|
5915
5915
|
};
|
|
5916
5916
|
|
|
5917
|
+
/** Returns whether the current runtime provides the complete HTML Popover API. */
|
|
5918
|
+
const isPopoverSupported = () => {
|
|
5919
|
+
return (typeof HTMLElement !== 'undefined' &&
|
|
5920
|
+
'popover' in HTMLElement.prototype &&
|
|
5921
|
+
typeof HTMLElement.prototype.showPopover === 'function' &&
|
|
5922
|
+
typeof HTMLElement.prototype.hidePopover === 'function');
|
|
5923
|
+
};
|
|
5924
|
+
|
|
5917
5925
|
/**
|
|
5918
5926
|
* Check if the value is a string or not
|
|
5919
5927
|
* @param value the value to be checked
|
|
@@ -13225,12 +13233,12 @@ function getOppositePlacement(placement) {
|
|
|
13225
13233
|
return oppositeSideMap[side] + placement.slice(side.length);
|
|
13226
13234
|
}
|
|
13227
13235
|
function expandPaddingObject(padding) {
|
|
13236
|
+
var _padding$top, _padding$right, _padding$bottom, _padding$left;
|
|
13228
13237
|
return {
|
|
13229
|
-
top: 0,
|
|
13230
|
-
right: 0,
|
|
13231
|
-
bottom: 0,
|
|
13232
|
-
left: 0
|
|
13233
|
-
...padding
|
|
13238
|
+
top: (_padding$top = padding.top) != null ? _padding$top : 0,
|
|
13239
|
+
right: (_padding$right = padding.right) != null ? _padding$right : 0,
|
|
13240
|
+
bottom: (_padding$bottom = padding.bottom) != null ? _padding$bottom : 0,
|
|
13241
|
+
left: (_padding$left = padding.left) != null ? _padding$left : 0
|
|
13234
13242
|
};
|
|
13235
13243
|
}
|
|
13236
13244
|
function getPaddingObject(padding) {
|
|
@@ -13305,13 +13313,9 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
13305
13313
|
y: reference.y
|
|
13306
13314
|
};
|
|
13307
13315
|
}
|
|
13308
|
-
|
|
13309
|
-
|
|
13310
|
-
|
|
13311
|
-
break;
|
|
13312
|
-
case 'end':
|
|
13313
|
-
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
13314
|
-
break;
|
|
13316
|
+
const alignment = getAlignment(placement);
|
|
13317
|
+
if (alignment) {
|
|
13318
|
+
coords[alignmentAxis] += commonAlign * (alignment === 'end' ? 1 : -1) * (rtl && isVertical ? -1 : 1);
|
|
13315
13319
|
}
|
|
13316
13320
|
return coords;
|
|
13317
13321
|
}
|
|
@@ -13360,10 +13364,7 @@ async function detectOverflow(state, options) {
|
|
|
13360
13364
|
height: rects.floating.height
|
|
13361
13365
|
} : rects.reference;
|
|
13362
13366
|
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
13363
|
-
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent)))
|
|
13364
|
-
x: 1,
|
|
13365
|
-
y: 1
|
|
13366
|
-
} : {
|
|
13367
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) && (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
13367
13368
|
x: 1,
|
|
13368
13369
|
y: 1
|
|
13369
13370
|
};
|
|
@@ -13536,17 +13537,16 @@ const arrow$1 = options => ({
|
|
|
13536
13537
|
|
|
13537
13538
|
// Make sure the arrow doesn't overflow the floating element if the center
|
|
13538
13539
|
// point is outside the floating element's bounds.
|
|
13539
|
-
const min$1 = minPadding;
|
|
13540
13540
|
const max = clientSize - arrowDimensions[length] - maxPadding;
|
|
13541
13541
|
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
13542
|
-
const offset = clamp(
|
|
13542
|
+
const offset = clamp(minPadding, center, max);
|
|
13543
13543
|
|
|
13544
13544
|
// If the reference is small enough that the arrow's padding causes it to
|
|
13545
13545
|
// to point to nothing for an aligned placement, adjust the offset of the
|
|
13546
13546
|
// floating element itself. To ensure `shift()` continues to take action,
|
|
13547
13547
|
// a single reset is performed when this is true.
|
|
13548
|
-
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center <
|
|
13549
|
-
const alignmentOffset = shouldAddOffset ? center <
|
|
13548
|
+
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < minPadding ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
13549
|
+
const alignmentOffset = shouldAddOffset ? center < minPadding ? center - minPadding : center - max : 0;
|
|
13550
13550
|
return {
|
|
13551
13551
|
[axis]: coords[axis] + alignmentOffset,
|
|
13552
13552
|
data: {
|
|
@@ -13890,23 +13890,16 @@ const shift$1 = function (options) {
|
|
|
13890
13890
|
y
|
|
13891
13891
|
};
|
|
13892
13892
|
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
13893
|
-
const crossAxis = getSideAxis(
|
|
13893
|
+
const crossAxis = getSideAxis(placement);
|
|
13894
13894
|
const mainAxis = getOppositeAxis(crossAxis);
|
|
13895
13895
|
let mainAxisCoord = coords[mainAxis];
|
|
13896
13896
|
let crossAxisCoord = coords[crossAxis];
|
|
13897
|
+
const clampCoord = (axis, coord) => clamp(coord + overflow[axis === 'y' ? 'top' : 'left'], coord, coord - overflow[axis === 'y' ? 'bottom' : 'right']);
|
|
13897
13898
|
if (checkMainAxis) {
|
|
13898
|
-
|
|
13899
|
-
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
13900
|
-
const min = mainAxisCoord + overflow[minSide];
|
|
13901
|
-
const max = mainAxisCoord - overflow[maxSide];
|
|
13902
|
-
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
13899
|
+
mainAxisCoord = clampCoord(mainAxis, mainAxisCoord);
|
|
13903
13900
|
}
|
|
13904
13901
|
if (checkCrossAxis) {
|
|
13905
|
-
|
|
13906
|
-
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
13907
|
-
const min = crossAxisCoord + overflow[minSide];
|
|
13908
|
-
const max = crossAxisCoord - overflow[maxSide];
|
|
13909
|
-
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
13902
|
+
crossAxisCoord = clampCoord(crossAxis, crossAxisCoord);
|
|
13910
13903
|
}
|
|
13911
13904
|
const limitedCoords = limiter.fn({
|
|
13912
13905
|
...state,
|
|
@@ -13928,6 +13921,12 @@ const shift$1 = function (options) {
|
|
|
13928
13921
|
};
|
|
13929
13922
|
};
|
|
13930
13923
|
|
|
13924
|
+
// Method syntax keeps callback parameters bivariant, but expressing the
|
|
13925
|
+
// explicit `| undefined` required by `exactOptionalPropertyTypes` needs
|
|
13926
|
+
// property syntax, which is contravariant under `strictFunctionTypes`.
|
|
13927
|
+
// Extracting the function from a method position restores that bivariance so
|
|
13928
|
+
// consumers can still assign callbacks with narrower parameter types.
|
|
13929
|
+
|
|
13931
13930
|
/**
|
|
13932
13931
|
* Provides data that allows you to change the size of the floating element —
|
|
13933
13932
|
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
@@ -13942,7 +13941,6 @@ const size$1 = function (options) {
|
|
|
13942
13941
|
name: 'size',
|
|
13943
13942
|
options,
|
|
13944
13943
|
async fn(state) {
|
|
13945
|
-
var _state$middlewareData, _state$middlewareData2;
|
|
13946
13944
|
const {
|
|
13947
13945
|
placement,
|
|
13948
13946
|
rects,
|
|
@@ -13974,24 +13972,21 @@ const size$1 = function (options) {
|
|
|
13974
13972
|
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
13975
13973
|
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
13976
13974
|
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
13977
|
-
const
|
|
13975
|
+
const shiftData = state.middlewareData.shift;
|
|
13976
|
+
const noShift = !shiftData;
|
|
13978
13977
|
let availableHeight = overflowAvailableHeight;
|
|
13979
13978
|
let availableWidth = overflowAvailableWidth;
|
|
13980
|
-
if (
|
|
13979
|
+
if (shiftData != null && shiftData.enabled.x) {
|
|
13981
13980
|
availableWidth = maximumClippingWidth;
|
|
13982
13981
|
}
|
|
13983
|
-
if (
|
|
13982
|
+
if (shiftData != null && shiftData.enabled.y) {
|
|
13984
13983
|
availableHeight = maximumClippingHeight;
|
|
13985
13984
|
}
|
|
13986
13985
|
if (noShift && !alignment) {
|
|
13987
|
-
const xMin = max(overflow.left, 0);
|
|
13988
|
-
const xMax = max(overflow.right, 0);
|
|
13989
|
-
const yMin = max(overflow.top, 0);
|
|
13990
|
-
const yMax = max(overflow.bottom, 0);
|
|
13991
13986
|
if (isYAxis) {
|
|
13992
|
-
availableWidth = width - 2 *
|
|
13987
|
+
availableWidth = width - 2 * max(overflow.left, overflow.right);
|
|
13993
13988
|
} else {
|
|
13994
|
-
availableHeight = height - 2 *
|
|
13989
|
+
availableHeight = height - 2 * max(overflow.top, overflow.bottom);
|
|
13995
13990
|
}
|
|
13996
13991
|
}
|
|
13997
13992
|
await apply({
|
|
@@ -14147,7 +14142,7 @@ function getParentNode(node) {
|
|
|
14147
14142
|
function getNearestOverflowAncestor(node) {
|
|
14148
14143
|
const parentNode = getParentNode(node);
|
|
14149
14144
|
if (isLastTraversableNode(parentNode)) {
|
|
14150
|
-
return node.ownerDocument
|
|
14145
|
+
return (node.ownerDocument || node).body;
|
|
14151
14146
|
}
|
|
14152
14147
|
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
14153
14148
|
return parentNode;
|
|
@@ -14244,10 +14239,7 @@ function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
|
14244
14239
|
if (isFixed === void 0) {
|
|
14245
14240
|
isFixed = false;
|
|
14246
14241
|
}
|
|
14247
|
-
|
|
14248
|
-
return false;
|
|
14249
|
-
}
|
|
14250
|
-
return isFixed;
|
|
14242
|
+
return !!floatingOffsetParent && isFixed && floatingOffsetParent === getWindow(element);
|
|
14251
14243
|
}
|
|
14252
14244
|
|
|
14253
14245
|
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
@@ -14274,12 +14266,12 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
14274
14266
|
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
14275
14267
|
let width = clientRect.width / scale.x;
|
|
14276
14268
|
let height = clientRect.height / scale.y;
|
|
14277
|
-
if (domElement) {
|
|
14269
|
+
if (domElement && offsetParent) {
|
|
14278
14270
|
const win = getWindow(domElement);
|
|
14279
|
-
const offsetWin =
|
|
14271
|
+
const offsetWin = isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
14280
14272
|
let currentWin = win;
|
|
14281
14273
|
let currentIFrame = getFrameElement(currentWin);
|
|
14282
|
-
while (currentIFrame &&
|
|
14274
|
+
while (currentIFrame && offsetWin !== currentWin) {
|
|
14283
14275
|
const iframeScale = getScale(currentIFrame);
|
|
14284
14276
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
14285
14277
|
const css = getComputedStyle$1(currentIFrame);
|
|
@@ -14343,7 +14335,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
14343
14335
|
let scale = createCoords(1);
|
|
14344
14336
|
const offsets = createCoords(0);
|
|
14345
14337
|
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
14346
|
-
if (isOffsetParentAnElement || !
|
|
14338
|
+
if (isOffsetParentAnElement || !isFixed) {
|
|
14347
14339
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
14348
14340
|
scroll = getNodeScroll(offsetParent);
|
|
14349
14341
|
}
|
|
@@ -14364,18 +14356,17 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
14364
14356
|
}
|
|
14365
14357
|
|
|
14366
14358
|
function getClientRects(element) {
|
|
14367
|
-
return Array.from(element.getClientRects());
|
|
14359
|
+
return element.getClientRects ? Array.from(element.getClientRects()) : [];
|
|
14368
14360
|
}
|
|
14369
14361
|
|
|
14370
14362
|
// Gets the entire size of the scrollable document area, even extending outside
|
|
14371
14363
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
14372
|
-
function getDocumentRect(
|
|
14373
|
-
const
|
|
14374
|
-
const
|
|
14375
|
-
const body = element.ownerDocument.body;
|
|
14364
|
+
function getDocumentRect(html) {
|
|
14365
|
+
const scroll = getNodeScroll(html);
|
|
14366
|
+
const body = html.ownerDocument.body;
|
|
14376
14367
|
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
14377
14368
|
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
14378
|
-
let x = -scroll.scrollLeft + getWindowScrollBarX(
|
|
14369
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(html);
|
|
14379
14370
|
const y = -scroll.scrollTop;
|
|
14380
14371
|
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
14381
14372
|
x += max(html.clientWidth, body.clientWidth) - width;
|
|
@@ -14392,7 +14383,11 @@ function getDocumentRect(element) {
|
|
|
14392
14383
|
// calculation is affected by unusual styles.
|
|
14393
14384
|
// Most scrollbars leave 15-18px of space.
|
|
14394
14385
|
const SCROLLBAR_MAX = 25;
|
|
14395
|
-
function getViewportRect(element, strategy) {
|
|
14386
|
+
function getViewportRect(element, strategy, rootBoundary) {
|
|
14387
|
+
if (rootBoundary === void 0) {
|
|
14388
|
+
rootBoundary = 'viewport';
|
|
14389
|
+
}
|
|
14390
|
+
const isLayoutViewport = rootBoundary === 'layoutViewport';
|
|
14396
14391
|
const win = getWindow(element);
|
|
14397
14392
|
const html = getDocumentElement(element);
|
|
14398
14393
|
const visualViewport = win.visualViewport;
|
|
@@ -14401,31 +14396,42 @@ function getViewportRect(element, strategy) {
|
|
|
14401
14396
|
let x = 0;
|
|
14402
14397
|
let y = 0;
|
|
14403
14398
|
if (visualViewport) {
|
|
14404
|
-
|
|
14405
|
-
|
|
14406
|
-
|
|
14407
|
-
|
|
14408
|
-
|
|
14409
|
-
|
|
14399
|
+
// Client coordinates are relative to the layout viewport, except in
|
|
14400
|
+
// WebKit with an `absolute` strategy, where they are relative to the
|
|
14401
|
+
// visual viewport.
|
|
14402
|
+
const layoutRelativeClientCoords = !isWebKit() || strategy === 'fixed';
|
|
14403
|
+
if (isLayoutViewport) {
|
|
14404
|
+
if (!layoutRelativeClientCoords) {
|
|
14405
|
+
x = -visualViewport.offsetLeft;
|
|
14406
|
+
y = -visualViewport.offsetTop;
|
|
14407
|
+
}
|
|
14408
|
+
} else {
|
|
14409
|
+
width = visualViewport.width;
|
|
14410
|
+
height = visualViewport.height;
|
|
14411
|
+
if (layoutRelativeClientCoords) {
|
|
14412
|
+
x = visualViewport.offsetLeft;
|
|
14413
|
+
y = visualViewport.offsetTop;
|
|
14414
|
+
}
|
|
14410
14415
|
}
|
|
14411
14416
|
}
|
|
14412
14417
|
const windowScrollbarX = getWindowScrollBarX(html);
|
|
14413
|
-
//
|
|
14414
|
-
// visual width
|
|
14415
|
-
//
|
|
14418
|
+
// `scrollbar-gutter: stable` on the <html> reserves gutter space that shrinks
|
|
14419
|
+
// the visual width but isn't reflected in `html.clientWidth`, so subtract it.
|
|
14420
|
+
// Only the inline-end (right) gutter can hold the scrollbar; `both-edges` also
|
|
14421
|
+
// reserves an empty inline-start gutter that clips nothing, so exclude just
|
|
14422
|
+
// the one scrollbar-side gutter — halve the measured (two-gutter) total. A
|
|
14423
|
+
// left-side scrollbar (`windowScrollbarX > 0`) is already handled by
|
|
14424
|
+
// `getHTMLOffset`/`visualViewport.width`; skip it here.
|
|
14416
14425
|
if (windowScrollbarX <= 0) {
|
|
14417
14426
|
const doc = html.ownerDocument;
|
|
14418
14427
|
const body = doc.body;
|
|
14419
14428
|
const bodyStyles = getComputedStyle(body);
|
|
14420
14429
|
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
14421
|
-
const
|
|
14422
|
-
|
|
14423
|
-
|
|
14430
|
+
const reservedWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
14431
|
+
const gutter = getComputedStyle(html).scrollbarGutter === 'stable both-edges' ? reservedWidth / 2 : reservedWidth;
|
|
14432
|
+
if (gutter <= SCROLLBAR_MAX) {
|
|
14433
|
+
width -= gutter;
|
|
14424
14434
|
}
|
|
14425
|
-
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
14426
|
-
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
14427
|
-
// by the scrollbar amount so there isn't extra space on the right.
|
|
14428
|
-
width += windowScrollbarX;
|
|
14429
14435
|
}
|
|
14430
14436
|
return {
|
|
14431
14437
|
width,
|
|
@@ -14440,7 +14446,7 @@ function getInnerBoundingClientRect(element, strategy) {
|
|
|
14440
14446
|
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
14441
14447
|
const top = clientRect.top + element.clientTop;
|
|
14442
14448
|
const left = clientRect.left + element.clientLeft;
|
|
14443
|
-
const scale =
|
|
14449
|
+
const scale = getScale(element);
|
|
14444
14450
|
const width = element.clientWidth * scale.x;
|
|
14445
14451
|
const height = element.clientHeight * scale.y;
|
|
14446
14452
|
const x = left * scale.x;
|
|
@@ -14454,8 +14460,8 @@ function getInnerBoundingClientRect(element, strategy) {
|
|
|
14454
14460
|
}
|
|
14455
14461
|
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
14456
14462
|
let rect;
|
|
14457
|
-
if (clippingAncestor === 'viewport') {
|
|
14458
|
-
rect = getViewportRect(element, strategy);
|
|
14463
|
+
if (clippingAncestor === 'viewport' || clippingAncestor === 'layoutViewport') {
|
|
14464
|
+
rect = getViewportRect(element, strategy, clippingAncestor);
|
|
14459
14465
|
} else if (clippingAncestor === 'document') {
|
|
14460
14466
|
rect = getDocumentRect(getDocumentElement(element));
|
|
14461
14467
|
} else if (isElement(clippingAncestor)) {
|
|
@@ -14471,13 +14477,6 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
|
|
|
14471
14477
|
}
|
|
14472
14478
|
return rectToClientRect(rect);
|
|
14473
14479
|
}
|
|
14474
|
-
function hasFixedPositionAncestor(element, stopNode) {
|
|
14475
|
-
const parentNode = getParentNode(element);
|
|
14476
|
-
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
14477
|
-
return false;
|
|
14478
|
-
}
|
|
14479
|
-
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
14480
|
-
}
|
|
14481
14480
|
|
|
14482
14481
|
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
14483
14482
|
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
@@ -14488,7 +14487,7 @@ function getClippingElementAncestors(element, cache) {
|
|
|
14488
14487
|
return cachedResult;
|
|
14489
14488
|
}
|
|
14490
14489
|
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
14491
|
-
let
|
|
14490
|
+
let lastKeptComputedStyle = null;
|
|
14492
14491
|
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
14493
14492
|
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
14494
14493
|
|
|
@@ -14496,16 +14495,20 @@ function getClippingElementAncestors(element, cache) {
|
|
|
14496
14495
|
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
14497
14496
|
const computedStyle = getComputedStyle$1(currentNode);
|
|
14498
14497
|
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
14499
|
-
|
|
14500
|
-
|
|
14501
|
-
|
|
14502
|
-
|
|
14498
|
+
// Position of the containing block chain below the current node. A fixed
|
|
14499
|
+
// element whose containing block hasn't been found yet is a fixed chain.
|
|
14500
|
+
const lastPosition = lastKeptComputedStyle ? lastKeptComputedStyle.position : elementIsFixed ? 'fixed' : '';
|
|
14501
|
+
|
|
14502
|
+
// A non-containing ancestor does not clip the element when the chain
|
|
14503
|
+
// below it escapes it: a fixed chain escapes all ancestors up to the
|
|
14504
|
+
// next containing block, an absolute chain escapes static ancestors.
|
|
14505
|
+
const shouldDropCurrentNode = !currentNodeIsContaining && (lastPosition === 'fixed' || lastPosition === 'absolute' && computedStyle.position === 'static');
|
|
14503
14506
|
if (shouldDropCurrentNode) {
|
|
14504
14507
|
// Drop non-containing blocks.
|
|
14505
14508
|
result = result.filter(ancestor => ancestor !== currentNode);
|
|
14506
14509
|
} else {
|
|
14507
|
-
//
|
|
14508
|
-
|
|
14510
|
+
// The kept node carries the chain position for the next iteration.
|
|
14511
|
+
lastKeptComputedStyle = computedStyle;
|
|
14509
14512
|
}
|
|
14510
14513
|
currentNode = getParentNode(currentNode);
|
|
14511
14514
|
}
|
|
@@ -14565,13 +14568,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
14565
14568
|
scrollTop: 0
|
|
14566
14569
|
};
|
|
14567
14570
|
const offsets = createCoords(0);
|
|
14568
|
-
|
|
14569
|
-
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
14570
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
14571
|
-
function setLeftRTLScrollbarOffset() {
|
|
14572
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
14573
|
-
}
|
|
14574
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
14571
|
+
if (isOffsetParentAnElement || !isFixed) {
|
|
14575
14572
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
14576
14573
|
scroll = getNodeScroll(offsetParent);
|
|
14577
14574
|
}
|
|
@@ -14579,12 +14576,13 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
14579
14576
|
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
14580
14577
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
14581
14578
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
14582
|
-
} else if (documentElement) {
|
|
14583
|
-
setLeftRTLScrollbarOffset();
|
|
14584
14579
|
}
|
|
14585
14580
|
}
|
|
14586
|
-
|
|
14587
|
-
|
|
14581
|
+
|
|
14582
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
14583
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
14584
|
+
if (!isOffsetParentAnElement && documentElement) {
|
|
14585
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
14588
14586
|
}
|
|
14589
14587
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
14590
14588
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
@@ -14684,7 +14682,7 @@ function rectsAreEqual(a, b) {
|
|
|
14684
14682
|
}
|
|
14685
14683
|
|
|
14686
14684
|
// https://samthor.au/2021/observing-dom/
|
|
14687
|
-
function observeMove(element, onMove) {
|
|
14685
|
+
function observeMove(element, onMove, ancestorResize) {
|
|
14688
14686
|
let io = null;
|
|
14689
14687
|
let timeoutId;
|
|
14690
14688
|
const root = getDocumentElement(element);
|
|
@@ -14727,13 +14725,22 @@ function observeMove(element, onMove) {
|
|
|
14727
14725
|
let isFirstUpdate = true;
|
|
14728
14726
|
function handleObserve(entries) {
|
|
14729
14727
|
const ratio = entries[0].intersectionRatio;
|
|
14728
|
+
|
|
14729
|
+
// The entry is a snapshot, so the reference may have moved since the
|
|
14730
|
+
// intersection was computed (under performance constraints, or between
|
|
14731
|
+
// consecutive frames of a multi-frame layout shift). The reported ratio
|
|
14732
|
+
// and the observed area are stale in that case and cannot be trusted to
|
|
14733
|
+
// detect subsequent movement, so refresh regardless of the ratio.
|
|
14734
|
+
if (!rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
14735
|
+
return refresh();
|
|
14736
|
+
}
|
|
14730
14737
|
if (ratio !== threshold) {
|
|
14731
14738
|
if (!isFirstUpdate) {
|
|
14732
14739
|
return refresh();
|
|
14733
14740
|
}
|
|
14734
14741
|
if (!ratio) {
|
|
14735
|
-
// If the reference is clipped, the ratio is 0. Throttle
|
|
14736
|
-
// to prevent an infinite loop of updates.
|
|
14742
|
+
// If the reference is clipped in place, the ratio is 0. Throttle
|
|
14743
|
+
// the refresh to prevent an infinite loop of updates.
|
|
14737
14744
|
timeoutId = setTimeout(() => {
|
|
14738
14745
|
refresh(false, 1e-7);
|
|
14739
14746
|
}, 1000);
|
|
@@ -14741,16 +14748,6 @@ function observeMove(element, onMove) {
|
|
|
14741
14748
|
refresh(false, ratio);
|
|
14742
14749
|
}
|
|
14743
14750
|
}
|
|
14744
|
-
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
14745
|
-
// It's possible that even though the ratio is reported as 1, the
|
|
14746
|
-
// element is not actually fully within the IntersectionObserver's root
|
|
14747
|
-
// area anymore. This can happen under performance constraints. This may
|
|
14748
|
-
// be a bug in the browser's IntersectionObserver implementation. To
|
|
14749
|
-
// work around this, we compare the element's bounding rect now with
|
|
14750
|
-
// what it was at the time we created the IntersectionObserver. If they
|
|
14751
|
-
// are not equal then the element moved, so we refresh.
|
|
14752
|
-
refresh();
|
|
14753
|
-
}
|
|
14754
14751
|
isFirstUpdate = false;
|
|
14755
14752
|
}
|
|
14756
14753
|
|
|
@@ -14767,8 +14764,18 @@ function observeMove(element, onMove) {
|
|
|
14767
14764
|
}
|
|
14768
14765
|
io.observe(element);
|
|
14769
14766
|
}
|
|
14767
|
+
const win = getWindow(element);
|
|
14768
|
+
// The window is a resize ancestor, so when `ancestorResize` is enabled its
|
|
14769
|
+
// listener already runs the update on resize. Here we only need to rebuild
|
|
14770
|
+
// the `IntersectionObserver` for the new root size, skipping a redundant
|
|
14771
|
+
// update. When `ancestorResize` is disabled, this becomes the sole update.
|
|
14772
|
+
const handleResize = () => refresh(ancestorResize);
|
|
14773
|
+
win.addEventListener('resize', handleResize);
|
|
14770
14774
|
refresh(true);
|
|
14771
|
-
return
|
|
14775
|
+
return () => {
|
|
14776
|
+
win.removeEventListener('resize', handleResize);
|
|
14777
|
+
cleanup();
|
|
14778
|
+
};
|
|
14772
14779
|
}
|
|
14773
14780
|
|
|
14774
14781
|
/**
|
|
@@ -14793,12 +14800,10 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
14793
14800
|
const referenceEl = unwrapElement(reference);
|
|
14794
14801
|
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
|
|
14795
14802
|
ancestors.forEach(ancestor => {
|
|
14796
|
-
ancestorScroll && ancestor.addEventListener('scroll', update
|
|
14797
|
-
passive: true
|
|
14798
|
-
});
|
|
14803
|
+
ancestorScroll && ancestor.addEventListener('scroll', update);
|
|
14799
14804
|
ancestorResize && ancestor.addEventListener('resize', update);
|
|
14800
14805
|
});
|
|
14801
|
-
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
14806
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update, ancestorResize) : null;
|
|
14802
14807
|
let reobserveFrame = -1;
|
|
14803
14808
|
let resizeObserver = null;
|
|
14804
14809
|
if (elementResize) {
|
|
@@ -14907,11 +14912,9 @@ const computePosition = (reference, floating, options) => {
|
|
|
14907
14912
|
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
14908
14913
|
// single call. If other functions become expensive, we can add them as well.
|
|
14909
14914
|
const cache = new Map();
|
|
14910
|
-
const mergedOptions = {
|
|
14911
|
-
platform,
|
|
14912
|
-
...options
|
|
14913
|
-
};
|
|
14915
|
+
const mergedOptions = options != null ? options : {};
|
|
14914
14916
|
const platformWithCache = {
|
|
14917
|
+
...platform,
|
|
14915
14918
|
...mergedOptions.platform,
|
|
14916
14919
|
_c: cache
|
|
14917
14920
|
};
|
|
@@ -14921,11 +14924,28 @@ const computePosition = (reference, floating, options) => {
|
|
|
14921
14924
|
});
|
|
14922
14925
|
};
|
|
14923
14926
|
|
|
14927
|
+
const STATIC_SIDE_BY_PLACEMENT = {
|
|
14928
|
+
top: 'bottom',
|
|
14929
|
+
right: 'left',
|
|
14930
|
+
bottom: 'top',
|
|
14931
|
+
left: 'right',
|
|
14932
|
+
};
|
|
14933
|
+
/**
|
|
14934
|
+
* Thin wrapper around Floating UI that owns the shared middleware pipeline
|
|
14935
|
+
* and ensures each instance has at most one `autoUpdate` subscription.
|
|
14936
|
+
*
|
|
14937
|
+
* Lifecycle:
|
|
14938
|
+
* - `start()` starts position tracking and performs an initial reposition.
|
|
14939
|
+
* - `stop()` stops tracking and invalidates pending positioning results.
|
|
14940
|
+
* - `reposition()` computes and applies the position once.
|
|
14941
|
+
* - `configure(options)` updates options and repositions only when active.
|
|
14942
|
+
*/
|
|
14924
14943
|
class FloatingUI {
|
|
14925
14944
|
panel;
|
|
14926
14945
|
trigger;
|
|
14927
14946
|
options;
|
|
14928
|
-
|
|
14947
|
+
cleanup;
|
|
14948
|
+
repositionId = 0;
|
|
14929
14949
|
constructor(trigger, panel, options) {
|
|
14930
14950
|
this.trigger = trigger;
|
|
14931
14951
|
this.panel = panel;
|
|
@@ -14936,74 +14956,92 @@ class FloatingUI {
|
|
|
14936
14956
|
sameWidth: false,
|
|
14937
14957
|
...options,
|
|
14938
14958
|
};
|
|
14939
|
-
this.init(options);
|
|
14940
14959
|
}
|
|
14941
|
-
|
|
14942
|
-
|
|
14943
|
-
|
|
14960
|
+
/**
|
|
14961
|
+
* Merges new options into the current configuration. Active instances
|
|
14962
|
+
* reposition without recreating their `autoUpdate` subscription; stopped
|
|
14963
|
+
* instances apply the options the next time they start.
|
|
14964
|
+
*/
|
|
14965
|
+
configure(options) {
|
|
14966
|
+
Object.assign(this.options, options);
|
|
14967
|
+
this.repositionId += 1;
|
|
14968
|
+
if (options.sameWidth === false) {
|
|
14969
|
+
this.panel.style.width = '';
|
|
14970
|
+
}
|
|
14971
|
+
if (!this.cleanup)
|
|
14972
|
+
return;
|
|
14973
|
+
void this.reposition();
|
|
14944
14974
|
}
|
|
14945
|
-
|
|
14946
|
-
|
|
14947
|
-
|
|
14948
|
-
|
|
14949
|
-
|
|
14950
|
-
|
|
14951
|
-
|
|
14952
|
-
|
|
14953
|
-
|
|
14954
|
-
shift(),
|
|
14955
|
-
size(this.options.sameWidth && {
|
|
14956
|
-
apply({ rects, elements }) {
|
|
14957
|
-
Object.assign(elements.floating.style, {
|
|
14958
|
-
width: `${rects.reference.width}px`,
|
|
14959
|
-
});
|
|
14960
|
-
},
|
|
14961
|
-
}),
|
|
14962
|
-
arrow({ element: this.options.arrow || null }),
|
|
14963
|
-
this.positionChange(),
|
|
14964
|
-
hide(),
|
|
14965
|
-
],
|
|
14966
|
-
});
|
|
14967
|
-
this.applyPanelPosition(x, y);
|
|
14968
|
-
this.applyArrowPosition(placement, middlewareData);
|
|
14969
|
-
this.applyVisibility(middlewareData);
|
|
14970
|
-
})();
|
|
14971
|
-
});
|
|
14975
|
+
/**
|
|
14976
|
+
* Opens the `autoUpdate` subscription so the panel keeps tracking the
|
|
14977
|
+
* trigger through scroll, resize, layout and ancestor changes. No-op if
|
|
14978
|
+
* the subscription is already running.
|
|
14979
|
+
*/
|
|
14980
|
+
start() {
|
|
14981
|
+
if (this.cleanup)
|
|
14982
|
+
return;
|
|
14983
|
+
this.cleanup = autoUpdate(this.trigger, this.panel, () => void this.reposition());
|
|
14972
14984
|
}
|
|
14973
|
-
|
|
14974
|
-
|
|
14985
|
+
/**
|
|
14986
|
+
* Tears down the `autoUpdate` subscription. Idempotent — safe to call
|
|
14987
|
+
* multiple times, and before the first `start()`.
|
|
14988
|
+
*/
|
|
14989
|
+
stop() {
|
|
14990
|
+
this.repositionId += 1;
|
|
14991
|
+
if (!this.cleanup)
|
|
14975
14992
|
return;
|
|
14976
|
-
this.
|
|
14993
|
+
this.cleanup();
|
|
14994
|
+
this.cleanup = undefined;
|
|
14977
14995
|
}
|
|
14978
|
-
|
|
14979
|
-
|
|
14980
|
-
|
|
14981
|
-
|
|
14982
|
-
|
|
14983
|
-
|
|
14984
|
-
|
|
14985
|
-
|
|
14986
|
-
|
|
14987
|
-
|
|
14996
|
+
/**
|
|
14997
|
+
* Runs a single Floating UI `computePosition` pass and applies the
|
|
14998
|
+
* resulting styles to the panel (and the arrow, if configured).
|
|
14999
|
+
*/
|
|
15000
|
+
async reposition() {
|
|
15001
|
+
const repositionId = ++this.repositionId;
|
|
15002
|
+
const { arrow: arrowElement, distance, onPositionChange, placement: configuredPlacement, sameWidth, skidding, strategy, } = this.options;
|
|
15003
|
+
const { x, y, placement, middlewareData } = await computePosition(this.trigger, this.panel, {
|
|
15004
|
+
placement: configuredPlacement,
|
|
15005
|
+
strategy,
|
|
15006
|
+
middleware: [
|
|
15007
|
+
offset({ mainAxis: distance, crossAxis: skidding }),
|
|
15008
|
+
flip(),
|
|
15009
|
+
shift(),
|
|
15010
|
+
size({
|
|
15011
|
+
apply: ({ rects, elements }) => {
|
|
15012
|
+
if (repositionId !== this.repositionId || !elements.floating.isConnected)
|
|
15013
|
+
return;
|
|
15014
|
+
elements.floating.style.width = sameWidth ? `${rects.reference.width}px` : '';
|
|
15015
|
+
},
|
|
15016
|
+
}),
|
|
15017
|
+
...(arrowElement ? [arrow({ element: arrowElement })] : []),
|
|
15018
|
+
hide(),
|
|
15019
|
+
],
|
|
15020
|
+
});
|
|
15021
|
+
if (repositionId !== this.repositionId || !this.panel.isConnected)
|
|
15022
|
+
return;
|
|
15023
|
+
this.applyPanelPosition(x, y);
|
|
15024
|
+
this.applyArrowPosition(arrowElement, placement, middlewareData);
|
|
15025
|
+
this.applyVisibility(middlewareData);
|
|
15026
|
+
onPositionChange?.(placement);
|
|
14988
15027
|
}
|
|
14989
15028
|
applyPanelPosition(x, y) {
|
|
15029
|
+
const dpr = window.devicePixelRatio || 1;
|
|
15030
|
+
const roundedX = Math.round(x * dpr) / dpr;
|
|
15031
|
+
const roundedY = Math.round(y * dpr) / dpr;
|
|
14990
15032
|
Object.assign(this.panel.style, {
|
|
14991
15033
|
top: '0',
|
|
14992
15034
|
left: '0',
|
|
14993
|
-
transform: `translate(${
|
|
15035
|
+
transform: `translate(${roundedX}px, ${roundedY}px)`,
|
|
14994
15036
|
});
|
|
14995
15037
|
}
|
|
14996
|
-
applyArrowPosition(placement, middlewareData) {
|
|
14997
|
-
if (!
|
|
15038
|
+
applyArrowPosition(arrowElement, placement, middlewareData) {
|
|
15039
|
+
if (!arrowElement)
|
|
14998
15040
|
return;
|
|
14999
|
-
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
15000
|
-
const
|
|
15001
|
-
|
|
15002
|
-
|
|
15003
|
-
bottom: 'top',
|
|
15004
|
-
left: 'right',
|
|
15005
|
-
}[placement.split('-')[0]];
|
|
15006
|
-
Object.assign(this.options.arrow.style, {
|
|
15041
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {};
|
|
15042
|
+
const basePlacement = placement.split('-')[0];
|
|
15043
|
+
const staticSide = STATIC_SIDE_BY_PLACEMENT[basePlacement];
|
|
15044
|
+
Object.assign(arrowElement.style, {
|
|
15007
15045
|
left: arrowX != null ? `${arrowX}px` : '',
|
|
15008
15046
|
top: arrowY != null ? `${arrowY}px` : '',
|
|
15009
15047
|
right: '',
|
|
@@ -15012,14 +15050,8 @@ class FloatingUI {
|
|
|
15012
15050
|
});
|
|
15013
15051
|
}
|
|
15014
15052
|
applyVisibility(middlewareData) {
|
|
15015
|
-
const
|
|
15016
|
-
|
|
15017
|
-
visibility: referenceHidden ? 'hidden' : 'visible',
|
|
15018
|
-
});
|
|
15019
|
-
}
|
|
15020
|
-
roundByDPR(value) {
|
|
15021
|
-
const dpr = window.devicePixelRatio || 1;
|
|
15022
|
-
return Math.round(value * dpr) / dpr;
|
|
15053
|
+
const referenceHidden = middlewareData.hide?.referenceHidden;
|
|
15054
|
+
this.panel.style.visibility = referenceHidden ? 'hidden' : 'visible';
|
|
15023
15055
|
}
|
|
15024
15056
|
}
|
|
15025
15057
|
|
|
@@ -15100,7 +15132,7 @@ class BqPanel {
|
|
|
15100
15132
|
onPropChange() {
|
|
15101
15133
|
if (!isClient())
|
|
15102
15134
|
return;
|
|
15103
|
-
this.floatingUI?.
|
|
15135
|
+
this.floatingUI?.configure({ ...this.options });
|
|
15104
15136
|
}
|
|
15105
15137
|
// Events section
|
|
15106
15138
|
// Requires JSDocs for public API documentation
|
|
@@ -15122,10 +15154,15 @@ class BqPanel {
|
|
|
15122
15154
|
this.floatingUI = new FloatingUI(this.trigger, this.panel, { ...this.options });
|
|
15123
15155
|
this.handleOpenChange();
|
|
15124
15156
|
}
|
|
15157
|
+
connectedCallback() {
|
|
15158
|
+
if (!this.floatingUI || !this.open)
|
|
15159
|
+
return;
|
|
15160
|
+
this.showPanel();
|
|
15161
|
+
}
|
|
15125
15162
|
disconnectedCallback() {
|
|
15126
15163
|
if (!isClient())
|
|
15127
15164
|
return;
|
|
15128
|
-
this.floatingUI?.
|
|
15165
|
+
this.floatingUI?.stop();
|
|
15129
15166
|
// Ensure scroll lock is removed if the component is disconnected while the panel is open.
|
|
15130
15167
|
if (this.open && !this.disableScrollLock) {
|
|
15131
15168
|
unlockBodyScroll();
|
|
@@ -15146,7 +15183,7 @@ class BqPanel {
|
|
|
15146
15183
|
showPanel() {
|
|
15147
15184
|
if (!isClient())
|
|
15148
15185
|
return;
|
|
15149
|
-
this.floatingUI?.
|
|
15186
|
+
this.floatingUI?.start();
|
|
15150
15187
|
// Lock the body scroll if the disableScrollLock prop is not true.
|
|
15151
15188
|
if (!this.disableScrollLock) {
|
|
15152
15189
|
lockBodyScroll();
|
|
@@ -15154,6 +15191,7 @@ class BqPanel {
|
|
|
15154
15191
|
}
|
|
15155
15192
|
async hidePanel() {
|
|
15156
15193
|
this.open = false;
|
|
15194
|
+
this.floatingUI?.stop();
|
|
15157
15195
|
// Unlock the body scroll if the disableScrollLock prop is not true.
|
|
15158
15196
|
if (isClient() && !this.disableScrollLock) {
|
|
15159
15197
|
unlockBodyScroll();
|
|
@@ -15172,9 +15210,9 @@ class BqPanel {
|
|
|
15172
15210
|
// Always the last one in the class.
|
|
15173
15211
|
// ===================================
|
|
15174
15212
|
render() {
|
|
15175
|
-
return (hAsync("div", { key: '
|
|
15213
|
+
return (hAsync("div", { key: '6d0376f5f829189a179dfb409e06198dbd568d4d', "aria-hidden": !this.open ? 'true' : 'false', class: "bq-panel", hidden: !this.open, part: "panel", ref: (el) => {
|
|
15176
15214
|
this.panel = el;
|
|
15177
|
-
} }, hAsync("slot", { key: '
|
|
15215
|
+
} }, hAsync("slot", { key: '535289afc3b7e127a496c8b6b1492e3b22017606' })));
|
|
15178
15216
|
}
|
|
15179
15217
|
static get watchers() { return {
|
|
15180
15218
|
"open": [{
|
|
@@ -19730,7 +19768,7 @@ class BqToast {
|
|
|
19730
19768
|
}; }
|
|
19731
19769
|
}
|
|
19732
19770
|
|
|
19733
|
-
const bqTooltipCss = () => `.bq-tooltip--arrow:before,.rotate-45,.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.bq-tooltip--panel,.shadow-\\[shadow\\:--bq-tooltip--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.start-0{inset-inline-start:0}.-z-\\[1\\]{z-index:-1}.z-\\[--bq-tooltip--z-index\\]{z-index:var(--bq-tooltip--z-index)}.box-border{box-sizing:border-box}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-\\[--bq-tooltip--border-radius\\]{border-radius:var(--bq-tooltip--border-radius)}.border-\\[length\\:--bq-tooltip--border-width\\]{border-width:var(--bq-tooltip--border-width)}.border-\\[color\\:--bq-tooltip--border-color\\]{border-color:var(--bq-tooltip--border-color)}.bg-\\[--bq-tooltip--background-color\\]{background-color:var(--bq-tooltip--background-color)}.text-\\[length\\:--bq-tooltip--font-size\\]{font-size:var(--bq-tooltip--font-size)}.leading-\\[--bq-tooltip--line-height\\]{line-height:var(--bq-tooltip--line-height)}.text-\\[color\\:--bq-tooltip--text-color\\]{color:var(--bq-tooltip--text-color)}.shadow-\\[shadow\\:--bq-tooltip--box-shadow\\]{--tw-shadow:var(--bq-tooltip--box-shadow);--tw-shadow-colored:var(--bq-tooltip--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.content-empty{--tw-content:"";content:var(--tw-content)}.bs-2{block-size:.5rem}.is-2{inline-size:.5rem}.is-\\[--bq-tooltip--width\\]{inline-size:var(--bq-tooltip--width)}.max-is-\\[--bq-tooltip--max-width\\]{max-inline-size:var(--bq-tooltip--max-width)}.p-b-\\[--bq-tooltip--paddingY\\]{padding-block:var(--bq-tooltip--paddingY)}.p-i-\\[--bq-tooltip--paddingX\\]{padding-inline:var(--bq-tooltip--paddingX)}.inset-bs-0{inset-block-start:0}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-tooltip--background-color:var(--bq-ui--inverse);--bq-tooltip--box-shadow:var(--bq-box-shadow--m);--bq-tooltip--font-size:var(--bq-font-size--m);--bq-tooltip--line-height:var(--bq-font-line-height--regular);--bq-tooltip--text-color:var(--bq-text--inverse);--bq-tooltip--paddingX:var(--bq-spacing-xs);--bq-tooltip--paddingY:var(--bq-spacing-xs2);--bq-tooltip--border-color:transparent;--bq-tooltip--border-radius:var(--bq-radius--s);--bq-tooltip--border-style:none;--bq-tooltip--border-width:unset;--bq-tooltip--max-width:320px;--bq-tooltip--width:max-content;--bq-tooltip--z-index:10}.bq-tooltip--panel{--tw-shadow:var(--bq-tooltip--box-shadow);--tw-shadow-colored:var(--bq-tooltip--box-shadow);-webkit-animation:fade-in .3s ease 0s;animation:fade-in .3s ease 0s;background-color:var(--bq-tooltip--background-color);border-color:var(--bq-tooltip--border-color);border-radius:var(--bq-tooltip--border-radius);border-width:var(--bq-tooltip--border-width);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-sizing:border-box;color:var(--bq-tooltip--text-color);font-size:var(--bq-tooltip--font-size);inline-size:var(--bq-tooltip--width);line-height:var(--bq-tooltip--line-height);max-inline-size:var(--bq-tooltip--max-width);padding-block:var(--bq-tooltip--paddingY);padding-inline:var(--bq-tooltip--paddingX);pointer-events:none;position:fixed;z-index:var(--bq-tooltip--z-index)}.bq-tooltip--arrow,.bq-tooltip--arrow:before{block-size:.5rem;inline-size:.5rem;position:absolute;z-index:-1}.bq-tooltip--arrow:before{--tw-rotate:45deg;--tw-content:"";background-color:var(--bq-tooltip--background-color);content:var(--tw-content);inset-block-start:0;inset-inline-start:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.visible{visibility:visible}.static{position:static}.relative{position:relative}.hidden{display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}`;
|
|
19771
|
+
const bqTooltipCss = () => `.bq-tooltip--arrow:before,.rotate-45,.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.bq-tooltip--panel,.shadow-\\[shadow\\:--bq-tooltip--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.inset-\\[unset\\]{inset:unset}.start-0{inset-inline-start:0}.-z-\\[1\\]{z-index:-1}.z-\\[--bq-tooltip--z-index\\]{z-index:var(--bq-tooltip--z-index)}.m-0{margin:0}.box-border{box-sizing:border-box}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-visible{overflow:visible}.rounded-\\[--bq-tooltip--border-radius\\]{border-radius:var(--bq-tooltip--border-radius)}.border-\\[length\\:--bq-tooltip--border-width\\]{border-width:var(--bq-tooltip--border-width)}.border-\\[color\\:--bq-tooltip--border-color\\]{border-color:var(--bq-tooltip--border-color)}.bg-\\[--bq-tooltip--background-color\\]{background-color:var(--bq-tooltip--background-color)}.text-\\[length\\:--bq-tooltip--font-size\\]{font-size:var(--bq-tooltip--font-size)}.leading-\\[--bq-tooltip--line-height\\]{line-height:var(--bq-tooltip--line-height)}.text-\\[color\\:--bq-tooltip--text-color\\]{color:var(--bq-tooltip--text-color)}.shadow-\\[shadow\\:--bq-tooltip--box-shadow\\]{--tw-shadow:var(--bq-tooltip--box-shadow);--tw-shadow-colored:var(--bq-tooltip--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.content-empty{--tw-content:"";content:var(--tw-content)}.bs-2{block-size:.5rem}.is-2{inline-size:.5rem}.is-\\[--bq-tooltip--width\\]{inline-size:var(--bq-tooltip--width)}.max-is-\\[--bq-tooltip--max-width\\]{max-inline-size:var(--bq-tooltip--max-width)}.p-b-\\[--bq-tooltip--paddingY\\]{padding-block:var(--bq-tooltip--paddingY)}.p-i-\\[--bq-tooltip--paddingX\\]{padding-inline:var(--bq-tooltip--paddingX)}.inset-bs-0{inset-block-start:0}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-tooltip--background-color:var(--bq-ui--inverse);--bq-tooltip--box-shadow:var(--bq-box-shadow--m);--bq-tooltip--font-size:var(--bq-font-size--m);--bq-tooltip--line-height:var(--bq-font-line-height--regular);--bq-tooltip--text-color:var(--bq-text--inverse);--bq-tooltip--paddingX:var(--bq-spacing-xs);--bq-tooltip--paddingY:var(--bq-spacing-xs2);--bq-tooltip--border-color:transparent;--bq-tooltip--border-radius:var(--bq-radius--s);--bq-tooltip--border-style:none;--bq-tooltip--border-width:unset;--bq-tooltip--max-width:320px;--bq-tooltip--width:max-content;--bq-tooltip--z-index:10}.bq-tooltip--panel{--tw-shadow:var(--bq-tooltip--box-shadow);--tw-shadow-colored:var(--bq-tooltip--box-shadow);-webkit-animation:fade-in .3s ease 0s;animation:fade-in .3s ease 0s;background-color:var(--bq-tooltip--background-color);border-color:var(--bq-tooltip--border-color);border-radius:var(--bq-tooltip--border-radius);border-style:var(--bq-tooltip--border-style);border-width:var(--bq-tooltip--border-width);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-sizing:border-box;color:var(--bq-tooltip--text-color);font-size:var(--bq-tooltip--font-size);inline-size:var(--bq-tooltip--width);line-height:var(--bq-tooltip--line-height);max-inline-size:var(--bq-tooltip--max-width);padding-block:var(--bq-tooltip--paddingY);padding-inline:var(--bq-tooltip--paddingX);pointer-events:none;position:fixed;z-index:var(--bq-tooltip--z-index)}.bq-tooltip--panel[popover]{inset:unset;margin:0;overflow:visible;position:absolute}.bq-tooltip--arrow,.bq-tooltip--arrow:before{block-size:.5rem;inline-size:.5rem;position:absolute;z-index:-1}.bq-tooltip--arrow:before{--tw-rotate:45deg;--tw-content:"";background-color:var(--bq-tooltip--background-color);content:var(--tw-content);inset-block-start:0;inset-inline-start:0}.bq-tooltip--arrow:before,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.visible{visibility:visible}.static{position:static}.relative{position:relative}.hidden{display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}`;
|
|
19734
19772
|
|
|
19735
19773
|
/**
|
|
19736
19774
|
* The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.
|
|
@@ -19792,6 +19830,16 @@ class BqTooltip {
|
|
|
19792
19830
|
panel;
|
|
19793
19831
|
arrow;
|
|
19794
19832
|
floatingUI;
|
|
19833
|
+
/**
|
|
19834
|
+
* Whether the runtime supports the HTML Popover API. When `true`, the
|
|
19835
|
+
* panel is promoted to the browser top layer via `showPopover()`, which
|
|
19836
|
+
* bypasses containing blocks created by ancestor `transform`, `filter`,
|
|
19837
|
+
* `contain`, `will-change`, etc. When `false`, the panel remains a
|
|
19838
|
+
* regular `position: fixed` element in the shadow root, which still
|
|
19839
|
+
* covers the common case but is subject to those containing-block
|
|
19840
|
+
* quirks.
|
|
19841
|
+
*/
|
|
19842
|
+
supportsPopover = isPopoverSupported();
|
|
19795
19843
|
get el() { return getElement(this); }
|
|
19796
19844
|
// State() variables
|
|
19797
19845
|
// Inlined decorator, alphabetical order
|
|
@@ -19824,12 +19872,21 @@ class BqTooltip {
|
|
|
19824
19872
|
}
|
|
19825
19873
|
await this.show();
|
|
19826
19874
|
}
|
|
19875
|
+
handleAlwaysVisibleChange() {
|
|
19876
|
+
if (this.alwaysVisible || this.visible) {
|
|
19877
|
+
this.showTooltip();
|
|
19878
|
+
return;
|
|
19879
|
+
}
|
|
19880
|
+
this.hideTooltip();
|
|
19881
|
+
}
|
|
19827
19882
|
handleFloatingUIOptionsChange() {
|
|
19828
|
-
this.floatingUI
|
|
19883
|
+
this.floatingUI?.configure({
|
|
19884
|
+
...(!this.hideArrow && { arrow: this.arrow }),
|
|
19829
19885
|
placement: this.placement,
|
|
19830
19886
|
distance: this.distance,
|
|
19831
19887
|
sameWidth: this.sameWidth,
|
|
19832
|
-
strategy:
|
|
19888
|
+
strategy: this.floatingStrategy,
|
|
19889
|
+
skidding: 0,
|
|
19833
19890
|
});
|
|
19834
19891
|
}
|
|
19835
19892
|
// Events section
|
|
@@ -19849,17 +19906,49 @@ class BqTooltip {
|
|
|
19849
19906
|
// Ordered by their natural call order
|
|
19850
19907
|
// =====================================
|
|
19851
19908
|
componentDidLoad() {
|
|
19909
|
+
// Promote the panel to the top layer when the Popover API is available.
|
|
19910
|
+
// This escapes containing blocks created by ancestor `transform`,
|
|
19911
|
+
// `filter`, `contain`, `will-change`, etc., which is the root cause of
|
|
19912
|
+
// scroll-related tooltip drift inside virtualised or transformed
|
|
19913
|
+
// containers (e.g. tall tables, dialogs). We use `manual` mode so BEEQ
|
|
19914
|
+
// keeps full control of show/hide semantics (delegated close, focus,
|
|
19915
|
+
// Escape) instead of the browser's `auto` light-dismiss behaviour.
|
|
19916
|
+
if (this.supportsPopover) {
|
|
19917
|
+
this.panel.popover = 'manual';
|
|
19918
|
+
}
|
|
19852
19919
|
this.floatingUI = new FloatingUI(this.trigger, this.panel, {
|
|
19853
19920
|
...(!this.hideArrow && { arrow: this.arrow }),
|
|
19854
19921
|
placement: this.placement,
|
|
19855
19922
|
distance: this.distance,
|
|
19856
19923
|
sameWidth: this.sameWidth,
|
|
19857
|
-
strategy:
|
|
19924
|
+
strategy: this.floatingStrategy,
|
|
19858
19925
|
skidding: 0,
|
|
19859
19926
|
});
|
|
19927
|
+
// Honour the initial `visible` / `always-visible` props. Stencil's
|
|
19928
|
+
// `@Watch('visible')` does not fire for the initial value, so components
|
|
19929
|
+
// rendered with `visible` already true (or `always-visible`) would
|
|
19930
|
+
// otherwise stay hidden — in the Popover path because `showPopover()`
|
|
19931
|
+
// is only called from `show()`, and in the fallback path because the
|
|
19932
|
+
// panel's `hidden` attribute reflects the state at first render but
|
|
19933
|
+
// Floating UI would not have run a first positioning pass. Calling
|
|
19934
|
+
// `showTooltip()` here guarantees a consistent first paint.
|
|
19935
|
+
if (this.visible || this.alwaysVisible) {
|
|
19936
|
+
this.showTooltip();
|
|
19937
|
+
}
|
|
19938
|
+
}
|
|
19939
|
+
componentDidRender() {
|
|
19940
|
+
const arrow = this.hideArrow ? null : this.arrow;
|
|
19941
|
+
if (!this.floatingUI || this.floatingUI.options.arrow === arrow)
|
|
19942
|
+
return;
|
|
19943
|
+
this.floatingUI.configure({ arrow });
|
|
19944
|
+
}
|
|
19945
|
+
connectedCallback() {
|
|
19946
|
+
if (!this.floatingUI || (!this.visible && !this.alwaysVisible))
|
|
19947
|
+
return;
|
|
19948
|
+
this.showTooltip();
|
|
19860
19949
|
}
|
|
19861
19950
|
disconnectedCallback() {
|
|
19862
|
-
this.floatingUI?.
|
|
19951
|
+
this.floatingUI?.stop();
|
|
19863
19952
|
}
|
|
19864
19953
|
// Listeners
|
|
19865
19954
|
// ==============
|
|
@@ -19953,13 +20042,23 @@ class BqTooltip {
|
|
|
19953
20042
|
showTooltip = () => {
|
|
19954
20043
|
if (!this.panel)
|
|
19955
20044
|
return;
|
|
19956
|
-
this.
|
|
20045
|
+
if (this.supportsPopover && !this.panel.matches(':popover-open')) {
|
|
20046
|
+
this.panel.showPopover();
|
|
20047
|
+
}
|
|
20048
|
+
this.floatingUI?.start();
|
|
19957
20049
|
};
|
|
19958
20050
|
hideTooltip = () => {
|
|
19959
20051
|
if (!this.panel)
|
|
19960
20052
|
return;
|
|
20053
|
+
this.floatingUI?.stop();
|
|
20054
|
+
if (this.supportsPopover && this.panel.matches(':popover-open')) {
|
|
20055
|
+
this.panel.hidePopover();
|
|
20056
|
+
}
|
|
19961
20057
|
this.visible = false;
|
|
19962
20058
|
};
|
|
20059
|
+
get floatingStrategy() {
|
|
20060
|
+
return this.supportsPopover ? 'absolute' : 'fixed';
|
|
20061
|
+
}
|
|
19963
20062
|
get isHidden() {
|
|
19964
20063
|
return !this.visible && !this.alwaysVisible;
|
|
19965
20064
|
}
|
|
@@ -19967,22 +20066,22 @@ class BqTooltip {
|
|
|
19967
20066
|
// Always the last one in the class.
|
|
19968
20067
|
// ===================================
|
|
19969
20068
|
render() {
|
|
19970
|
-
return (hAsync("div", { key: '
|
|
20069
|
+
return (hAsync("div", { key: 'ee9c0ef2273ac7fe6dfb0be9133309e2c667d0d4', class: "bq-tooltip relative", part: "base" }, hAsync("div", { key: '659ef342fc16bb17fcd31ecec65d227716ec19d6', class: "bq-tooltip--trigger", onClick: this.handleTriggerOnClick, onFocusin: this.handleTriggerFocusin, onFocusout: this.handleTriggerFocusout, onMouseEnter: this.handleTriggerMouseOver, onMouseLeave: this.handleTriggerMouseLeave, part: "trigger", ref: (el) => {
|
|
19971
20070
|
this.trigger = el;
|
|
19972
|
-
} }, hAsync("slot", { key: '
|
|
20071
|
+
} }, hAsync("slot", { key: 'ca06aec8248f0697046e955496aeea7f576b668c', name: "trigger" })), hAsync("div", { key: 'e0c6aeb17ef8389ee2b94bf539fe18b75e2b3efe', "aria-hidden": String(this.isHidden), class: "bq-tooltip--panel", hidden: this.supportsPopover ? undefined : this.isHidden, part: "panel", ref: (el) => {
|
|
19973
20072
|
this.panel = el;
|
|
19974
|
-
}, role: "tooltip" }, !this.hideArrow && (hAsync("div", { key: '
|
|
20073
|
+
}, role: "tooltip" }, !this.hideArrow && (hAsync("div", { key: 'b8a15a30ca88f460c957e99ed28492e967070d39', class: "bq-tooltip--arrow", ref: (el) => {
|
|
19975
20074
|
this.arrow = el;
|
|
19976
|
-
} })), hAsync("slot", { key: '
|
|
20075
|
+
} })), hAsync("slot", { key: 'da5bc5041f93451b355f383add0a72891168b79d' }))));
|
|
19977
20076
|
}
|
|
19978
20077
|
static get watchers() { return {
|
|
19979
20078
|
"visible": [{
|
|
19980
20079
|
"handleVisibleChange": 0
|
|
19981
20080
|
}],
|
|
19982
|
-
"
|
|
19983
|
-
"
|
|
20081
|
+
"alwaysVisible": [{
|
|
20082
|
+
"handleAlwaysVisibleChange": 0
|
|
19984
20083
|
}],
|
|
19985
|
-
"
|
|
20084
|
+
"distance": [{
|
|
19986
20085
|
"handleFloatingUIOptionsChange": 0
|
|
19987
20086
|
}],
|
|
19988
20087
|
"placement": [{
|