@haiilo/catalyst 0.2.0 → 0.2.3
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/catalyst/app-globals-54573336.js +718 -0
- package/dist/catalyst/app-globals-54573336.js.map +1 -0
- package/dist/{components/cat-alert.js → catalyst/cat-alert.entry.js} +7 -26
- package/dist/catalyst/cat-alert.entry.js.map +1 -0
- package/dist/{components/cat-badge.js → catalyst/cat-badge.entry.js} +8 -31
- package/dist/catalyst/cat-badge.entry.js.map +1 -0
- package/dist/{components/cat-button.js → catalyst/cat-button.entry.js} +41 -59
- package/dist/catalyst/cat-button.entry.js.map +1 -0
- package/dist/{components/cat-icon-registry.js → catalyst/cat-icon-registry-59da2e37.js} +2 -0
- package/dist/catalyst/cat-icon-registry-59da2e37.js.map +1 -0
- package/dist/{components/cat-icon2.js → catalyst/cat-icon.entry.js} +9 -27
- package/dist/catalyst/cat-icon.entry.js.map +1 -0
- package/dist/catalyst/cat-input.entry.js +55 -0
- package/dist/catalyst/cat-input.entry.js.map +1 -0
- package/dist/{components/cat-menu.js → catalyst/cat-menu.entry.js} +636 -28
- package/dist/catalyst/cat-menu.entry.js.map +1 -0
- package/dist/catalyst/cat-scrollable.entry.js +4523 -0
- package/dist/catalyst/cat-scrollable.entry.js.map +1 -0
- package/dist/{components/cat-skeleton.js → catalyst/cat-skeleton.entry.js} +7 -29
- package/dist/catalyst/cat-skeleton.entry.js.map +1 -0
- package/dist/{components/cat-spinner2.js → catalyst/cat-spinner.entry.js} +8 -25
- package/dist/catalyst/cat-spinner.entry.js.map +1 -0
- package/dist/catalyst/catalyst.css +1959 -1
- package/dist/catalyst/catalyst.esm.js +132 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -0
- package/dist/catalyst/css-shim-e6dd2538.js +6 -0
- package/dist/catalyst/css-shim-e6dd2538.js.map +1 -0
- package/dist/catalyst/dom-7fc649b0.js +75 -0
- package/dist/catalyst/dom-7fc649b0.js.map +1 -0
- package/dist/catalyst/index-2df805aa.js +3059 -0
- package/dist/catalyst/index-2df805aa.js.map +1 -0
- package/dist/catalyst/index.esm.js +3 -0
- package/dist/catalyst/index.esm.js.map +1 -0
- package/dist/catalyst/shadow-css-4d56fa31.js +390 -0
- package/dist/catalyst/shadow-css-4d56fa31.js.map +1 -0
- package/dist/components/cat-input.d.ts +11 -0
- package/dist/components/cat-scrollable.d.ts +11 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/types/components/cat-input/cat-input.d.ts +70 -0
- package/dist/types/components/cat-scrollable/cat-scrollable.d.ts +50 -0
- package/dist/types/components.d.ts +85 -0
- package/package.json +15 -12
- package/dist/catalyst/p-4c438c2d.entry.js +0 -11
- package/dist/catalyst/p-73ee291d.js +0 -1
- package/dist/catalyst/p-94273abf.js +0 -1
- package/dist/cjs/app-globals-a3b3cf88.js +0 -135
- package/dist/cjs/cat-alert_7.cjs.entry.js +0 -3115
- package/dist/cjs/cat-icon-registry-eeff9b7d.js +0 -1359
- package/dist/cjs/catalyst.cjs.js +0 -21
- package/dist/cjs/index.cjs.js +0 -2
- package/dist/cjs/loader.cjs.js +0 -23
- package/dist/collection/collection-manifest.json +0 -19
- package/dist/collection/components/cat-alert/cat-alert.css +0 -57
- package/dist/collection/components/cat-alert/cat-alert.js +0 -49
- package/dist/collection/components/cat-badge/cat-badge.css +0 -154
- package/dist/collection/components/cat-badge/cat-badge.js +0 -141
- package/dist/collection/components/cat-button/cat-button.css +0 -319
- package/dist/collection/components/cat-button/cat-button.js +0 -590
- package/dist/collection/components/cat-icon/cat-icon-registry.js +0 -41
- package/dist/collection/components/cat-icon/cat-icon.css +0 -50
- package/dist/collection/components/cat-icon/cat-icon.js +0 -89
- package/dist/collection/components/cat-menu/cat-menu.css +0 -33
- package/dist/collection/components/cat-menu/cat-menu.js +0 -185
- package/dist/collection/components/cat-skeleton/cat-skeleton.css +0 -177
- package/dist/collection/components/cat-skeleton/cat-skeleton.js +0 -130
- package/dist/collection/components/cat-spinner/cat-spinner.css +0 -63
- package/dist/collection/components/cat-spinner/cat-spinner.js +0 -64
- package/dist/collection/index.cdn.js +0 -21
- package/dist/collection/index.js +0 -1
- package/dist/collection/init.js +0 -8
- package/dist/collection/utils/breakpoints.js +0 -11
- package/dist/collection/utils/media-matcher.js +0 -54
- package/dist/collection/utils/platform.js +0 -49
- package/dist/collection/utils/utils.js +0 -3
- package/dist/components/cat-icon.js +0 -6
- package/dist/components/cat-spinner.js +0 -6
- package/dist/components/index.js +0 -134
- package/dist/esm/app-globals-fc0806a7.js +0 -133
- package/dist/esm/cat-alert_7.entry.js +0 -3105
- package/dist/esm/cat-icon-registry-d877de13.js +0 -1331
- package/dist/esm/catalyst.js +0 -19
- package/dist/esm/index.js +0 -1
- package/dist/esm/loader.js +0 -19
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as registerInstance, e as createEvent, h, f as Host } from './index-2df805aa.js';
|
|
2
2
|
|
|
3
3
|
function getSide(placement) {
|
|
4
4
|
return placement.split('-')[0];
|
|
@@ -96,6 +96,21 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
96
96
|
} = config;
|
|
97
97
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
98
98
|
|
|
99
|
+
if ("development" !== "production") {
|
|
100
|
+
if (platform == null) {
|
|
101
|
+
console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' '));
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
if (middleware.filter(_ref => {
|
|
105
|
+
let {
|
|
106
|
+
name
|
|
107
|
+
} = _ref;
|
|
108
|
+
return name === 'autoPlacement' || name === 'flip';
|
|
109
|
+
}).length > 1) {
|
|
110
|
+
throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement`', 'middleware detected. This will lead to an infinite loop. Ensure only', 'one of either has been passed to the `middleware` array.'].join(' '));
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
99
114
|
let rects = await platform.getElementRects({
|
|
100
115
|
reference,
|
|
101
116
|
floating,
|
|
@@ -107,8 +122,16 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
107
122
|
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
108
123
|
let statefulPlacement = placement;
|
|
109
124
|
let middlewareData = {};
|
|
125
|
+
let _debug_loop_count_ = 0;
|
|
110
126
|
|
|
111
127
|
for (let i = 0; i < middleware.length; i++) {
|
|
128
|
+
if ("development" !== "production") {
|
|
129
|
+
_debug_loop_count_++;
|
|
130
|
+
|
|
131
|
+
if (_debug_loop_count_ > 100) {
|
|
132
|
+
throw new Error(['Floating UI: The middleware lifecycle appears to be', 'running in an infinite loop. This is usually caused by a `reset`', 'continually being returned without a break condition.'].join(' '));
|
|
133
|
+
}
|
|
134
|
+
}
|
|
112
135
|
|
|
113
136
|
const {
|
|
114
137
|
name,
|
|
@@ -260,6 +283,75 @@ async function detectOverflow(middlewareArguments, options) {
|
|
|
260
283
|
};
|
|
261
284
|
}
|
|
262
285
|
|
|
286
|
+
const min$1 = Math.min;
|
|
287
|
+
const max$1 = Math.max;
|
|
288
|
+
|
|
289
|
+
function within(min$1$1, value, max$1$1) {
|
|
290
|
+
return max$1(min$1$1, min$1(value, max$1$1));
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/**
|
|
294
|
+
* Positions an inner element of the floating element such that it is centered
|
|
295
|
+
* to the reference element.
|
|
296
|
+
* @see https://floating-ui.com/docs/arrow
|
|
297
|
+
*/
|
|
298
|
+
const arrow = options => ({
|
|
299
|
+
name: 'arrow',
|
|
300
|
+
options,
|
|
301
|
+
|
|
302
|
+
async fn(middlewareArguments) {
|
|
303
|
+
// Since `element` is required, we don't Partial<> the type
|
|
304
|
+
const {
|
|
305
|
+
element,
|
|
306
|
+
padding = 0
|
|
307
|
+
} = options != null ? options : {};
|
|
308
|
+
const {
|
|
309
|
+
x,
|
|
310
|
+
y,
|
|
311
|
+
placement,
|
|
312
|
+
rects,
|
|
313
|
+
platform
|
|
314
|
+
} = middlewareArguments;
|
|
315
|
+
|
|
316
|
+
if (element == null) {
|
|
317
|
+
if ("development" !== "production") {
|
|
318
|
+
console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
return {};
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
const paddingObject = getSideObjectFromPadding(padding);
|
|
325
|
+
const coords = {
|
|
326
|
+
x,
|
|
327
|
+
y
|
|
328
|
+
};
|
|
329
|
+
const axis = getMainAxisFromPlacement(placement);
|
|
330
|
+
const length = getLengthFromAxis(axis);
|
|
331
|
+
const arrowDimensions = await platform.getDimensions(element);
|
|
332
|
+
const minProp = axis === 'y' ? 'top' : 'left';
|
|
333
|
+
const maxProp = axis === 'y' ? 'bottom' : 'right';
|
|
334
|
+
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
335
|
+
const startDiff = coords[axis] - rects.reference[axis];
|
|
336
|
+
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
|
|
337
|
+
const clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
|
|
338
|
+
const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center
|
|
339
|
+
// point is outside of the floating element's bounds
|
|
340
|
+
|
|
341
|
+
const min = paddingObject[minProp];
|
|
342
|
+
const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
|
|
343
|
+
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
344
|
+
const offset = within(min, center, max);
|
|
345
|
+
return {
|
|
346
|
+
data: {
|
|
347
|
+
[axis]: offset,
|
|
348
|
+
centerOffset: center - offset
|
|
349
|
+
}
|
|
350
|
+
};
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
});
|
|
354
|
+
|
|
263
355
|
const hash$1 = {
|
|
264
356
|
left: 'right',
|
|
265
357
|
right: 'left',
|
|
@@ -298,6 +390,121 @@ function getOppositeAlignmentPlacement(placement) {
|
|
|
298
390
|
return placement.replace(/start|end/g, matched => hash[matched]);
|
|
299
391
|
}
|
|
300
392
|
|
|
393
|
+
const sides = ['top', 'right', 'bottom', 'left'];
|
|
394
|
+
const allPlacements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-start", side + "-end"), []);
|
|
395
|
+
|
|
396
|
+
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
397
|
+
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
398
|
+
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
399
|
+
if (alignment) {
|
|
400
|
+
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
return true;
|
|
404
|
+
});
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
/**
|
|
408
|
+
* Automatically chooses the `placement` which has the most space available.
|
|
409
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
410
|
+
*/
|
|
411
|
+
const autoPlacement = function (options) {
|
|
412
|
+
if (options === void 0) {
|
|
413
|
+
options = {};
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
return {
|
|
417
|
+
name: 'autoPlacement',
|
|
418
|
+
options,
|
|
419
|
+
|
|
420
|
+
async fn(middlewareArguments) {
|
|
421
|
+
var _middlewareData$autoP, _middlewareData$autoP2, _middlewareData$autoP3, _middlewareData$autoP4, _placementsSortedByLe;
|
|
422
|
+
|
|
423
|
+
const {
|
|
424
|
+
x,
|
|
425
|
+
y,
|
|
426
|
+
rects,
|
|
427
|
+
middlewareData,
|
|
428
|
+
placement,
|
|
429
|
+
platform,
|
|
430
|
+
elements
|
|
431
|
+
} = middlewareArguments;
|
|
432
|
+
const {
|
|
433
|
+
alignment = null,
|
|
434
|
+
allowedPlacements = allPlacements,
|
|
435
|
+
autoAlignment = true,
|
|
436
|
+
...detectOverflowOptions
|
|
437
|
+
} = options;
|
|
438
|
+
const placements = getPlacementList(alignment, autoAlignment, allowedPlacements);
|
|
439
|
+
const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
|
|
440
|
+
const currentIndex = (_middlewareData$autoP = (_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.index) != null ? _middlewareData$autoP : 0;
|
|
441
|
+
const currentPlacement = placements[currentIndex];
|
|
442
|
+
|
|
443
|
+
if (currentPlacement == null) {
|
|
444
|
+
return {};
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
const {
|
|
448
|
+
main,
|
|
449
|
+
cross
|
|
450
|
+
} = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))); // Make `computeCoords` start from the right place
|
|
451
|
+
|
|
452
|
+
if (placement !== currentPlacement) {
|
|
453
|
+
return {
|
|
454
|
+
x,
|
|
455
|
+
y,
|
|
456
|
+
reset: {
|
|
457
|
+
placement: placements[0]
|
|
458
|
+
}
|
|
459
|
+
};
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[main], overflow[cross]];
|
|
463
|
+
const allOverflows = [...((_middlewareData$autoP3 = (_middlewareData$autoP4 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP4.overflows) != null ? _middlewareData$autoP3 : []), {
|
|
464
|
+
placement: currentPlacement,
|
|
465
|
+
overflows: currentOverflows
|
|
466
|
+
}];
|
|
467
|
+
const nextPlacement = placements[currentIndex + 1]; // There are more placements to check
|
|
468
|
+
|
|
469
|
+
if (nextPlacement) {
|
|
470
|
+
return {
|
|
471
|
+
data: {
|
|
472
|
+
index: currentIndex + 1,
|
|
473
|
+
overflows: allOverflows
|
|
474
|
+
},
|
|
475
|
+
reset: {
|
|
476
|
+
placement: nextPlacement
|
|
477
|
+
}
|
|
478
|
+
};
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
const placementsSortedByLeastOverflow = allOverflows.slice().sort((a, b) => a.overflows[0] - b.overflows[0]);
|
|
482
|
+
const placementThatFitsOnAllSides = (_placementsSortedByLe = placementsSortedByLeastOverflow.find(_ref => {
|
|
483
|
+
let {
|
|
484
|
+
overflows
|
|
485
|
+
} = _ref;
|
|
486
|
+
return overflows.every(overflow => overflow <= 0);
|
|
487
|
+
})) == null ? void 0 : _placementsSortedByLe.placement;
|
|
488
|
+
const resetPlacement = placementThatFitsOnAllSides != null ? placementThatFitsOnAllSides : placementsSortedByLeastOverflow[0].placement;
|
|
489
|
+
|
|
490
|
+
if (resetPlacement !== placement) {
|
|
491
|
+
return {
|
|
492
|
+
data: {
|
|
493
|
+
index: currentIndex + 1,
|
|
494
|
+
overflows: allOverflows
|
|
495
|
+
},
|
|
496
|
+
reset: {
|
|
497
|
+
placement: resetPlacement
|
|
498
|
+
}
|
|
499
|
+
};
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
return {};
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
};
|
|
506
|
+
};
|
|
507
|
+
|
|
301
508
|
function getExpandedPlacements(placement) {
|
|
302
509
|
const oppositePlacement = getOppositePlacement(placement);
|
|
303
510
|
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
@@ -416,6 +623,76 @@ const flip = function (options) {
|
|
|
416
623
|
};
|
|
417
624
|
};
|
|
418
625
|
|
|
626
|
+
function getSideOffsets(overflow, rect) {
|
|
627
|
+
return {
|
|
628
|
+
top: overflow.top - rect.height,
|
|
629
|
+
right: overflow.right - rect.width,
|
|
630
|
+
bottom: overflow.bottom - rect.height,
|
|
631
|
+
left: overflow.left - rect.width
|
|
632
|
+
};
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
function isAnySideFullyClipped(overflow) {
|
|
636
|
+
return sides.some(side => overflow[side] >= 0);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
/**
|
|
640
|
+
* Provides data to hide the floating element in applicable situations, such as
|
|
641
|
+
* when it is not in the same clipping context as the reference element.
|
|
642
|
+
* @see https://floating-ui.com/docs/hide
|
|
643
|
+
*/
|
|
644
|
+
const hide = function (_temp) {
|
|
645
|
+
let {
|
|
646
|
+
strategy = 'referenceHidden',
|
|
647
|
+
...detectOverflowOptions
|
|
648
|
+
} = _temp === void 0 ? {} : _temp;
|
|
649
|
+
return {
|
|
650
|
+
name: 'hide',
|
|
651
|
+
|
|
652
|
+
async fn(middlewareArguments) {
|
|
653
|
+
const {
|
|
654
|
+
rects
|
|
655
|
+
} = middlewareArguments;
|
|
656
|
+
|
|
657
|
+
switch (strategy) {
|
|
658
|
+
case 'referenceHidden':
|
|
659
|
+
{
|
|
660
|
+
const overflow = await detectOverflow(middlewareArguments, { ...detectOverflowOptions,
|
|
661
|
+
elementContext: 'reference'
|
|
662
|
+
});
|
|
663
|
+
const offsets = getSideOffsets(overflow, rects.reference);
|
|
664
|
+
return {
|
|
665
|
+
data: {
|
|
666
|
+
referenceHiddenOffsets: offsets,
|
|
667
|
+
referenceHidden: isAnySideFullyClipped(offsets)
|
|
668
|
+
}
|
|
669
|
+
};
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
case 'escaped':
|
|
673
|
+
{
|
|
674
|
+
const overflow = await detectOverflow(middlewareArguments, { ...detectOverflowOptions,
|
|
675
|
+
altBoundary: true
|
|
676
|
+
});
|
|
677
|
+
const offsets = getSideOffsets(overflow, rects.floating);
|
|
678
|
+
return {
|
|
679
|
+
data: {
|
|
680
|
+
escapedOffsets: offsets,
|
|
681
|
+
escaped: isAnySideFullyClipped(offsets)
|
|
682
|
+
}
|
|
683
|
+
};
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
default:
|
|
687
|
+
{
|
|
688
|
+
return {};
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
};
|
|
694
|
+
};
|
|
695
|
+
|
|
419
696
|
function convertValueToCoords(placement, rects, value, rtl) {
|
|
420
697
|
if (rtl === void 0) {
|
|
421
698
|
rtl = false;
|
|
@@ -492,6 +769,356 @@ const offset = function (value) {
|
|
|
492
769
|
};
|
|
493
770
|
};
|
|
494
771
|
|
|
772
|
+
function getCrossAxis(axis) {
|
|
773
|
+
return axis === 'x' ? 'y' : 'x';
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
/**
|
|
777
|
+
* Shifts the floating element in order to keep it in view when it will overflow
|
|
778
|
+
* a clipping boundary.
|
|
779
|
+
* @see https://floating-ui.com/docs/shift
|
|
780
|
+
*/
|
|
781
|
+
const shift = function (options) {
|
|
782
|
+
if (options === void 0) {
|
|
783
|
+
options = {};
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
return {
|
|
787
|
+
name: 'shift',
|
|
788
|
+
options,
|
|
789
|
+
|
|
790
|
+
async fn(middlewareArguments) {
|
|
791
|
+
const {
|
|
792
|
+
x,
|
|
793
|
+
y,
|
|
794
|
+
placement
|
|
795
|
+
} = middlewareArguments;
|
|
796
|
+
const {
|
|
797
|
+
mainAxis: checkMainAxis = true,
|
|
798
|
+
crossAxis: checkCrossAxis = false,
|
|
799
|
+
limiter = {
|
|
800
|
+
fn: _ref => {
|
|
801
|
+
let {
|
|
802
|
+
x,
|
|
803
|
+
y
|
|
804
|
+
} = _ref;
|
|
805
|
+
return {
|
|
806
|
+
x,
|
|
807
|
+
y
|
|
808
|
+
};
|
|
809
|
+
}
|
|
810
|
+
},
|
|
811
|
+
...detectOverflowOptions
|
|
812
|
+
} = options;
|
|
813
|
+
const coords = {
|
|
814
|
+
x,
|
|
815
|
+
y
|
|
816
|
+
};
|
|
817
|
+
const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
|
|
818
|
+
const mainAxis = getMainAxisFromPlacement(getSide(placement));
|
|
819
|
+
const crossAxis = getCrossAxis(mainAxis);
|
|
820
|
+
let mainAxisCoord = coords[mainAxis];
|
|
821
|
+
let crossAxisCoord = coords[crossAxis];
|
|
822
|
+
|
|
823
|
+
if (checkMainAxis) {
|
|
824
|
+
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
825
|
+
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
826
|
+
const min = mainAxisCoord + overflow[minSide];
|
|
827
|
+
const max = mainAxisCoord - overflow[maxSide];
|
|
828
|
+
mainAxisCoord = within(min, mainAxisCoord, max);
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
if (checkCrossAxis) {
|
|
832
|
+
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
833
|
+
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
834
|
+
const min = crossAxisCoord + overflow[minSide];
|
|
835
|
+
const max = crossAxisCoord - overflow[maxSide];
|
|
836
|
+
crossAxisCoord = within(min, crossAxisCoord, max);
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
const limitedCoords = limiter.fn({ ...middlewareArguments,
|
|
840
|
+
[mainAxis]: mainAxisCoord,
|
|
841
|
+
[crossAxis]: crossAxisCoord
|
|
842
|
+
});
|
|
843
|
+
return { ...limitedCoords,
|
|
844
|
+
data: {
|
|
845
|
+
x: limitedCoords.x - x,
|
|
846
|
+
y: limitedCoords.y - y
|
|
847
|
+
}
|
|
848
|
+
};
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
};
|
|
852
|
+
};
|
|
853
|
+
|
|
854
|
+
/**
|
|
855
|
+
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
856
|
+
*/
|
|
857
|
+
const limitShift = function (options) {
|
|
858
|
+
if (options === void 0) {
|
|
859
|
+
options = {};
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
return {
|
|
863
|
+
options,
|
|
864
|
+
|
|
865
|
+
fn(middlewareArguments) {
|
|
866
|
+
const {
|
|
867
|
+
x,
|
|
868
|
+
y,
|
|
869
|
+
placement,
|
|
870
|
+
rects,
|
|
871
|
+
middlewareData
|
|
872
|
+
} = middlewareArguments;
|
|
873
|
+
const {
|
|
874
|
+
offset = 0,
|
|
875
|
+
mainAxis: checkMainAxis = true,
|
|
876
|
+
crossAxis: checkCrossAxis = true
|
|
877
|
+
} = options;
|
|
878
|
+
const coords = {
|
|
879
|
+
x,
|
|
880
|
+
y
|
|
881
|
+
};
|
|
882
|
+
const mainAxis = getMainAxisFromPlacement(placement);
|
|
883
|
+
const crossAxis = getCrossAxis(mainAxis);
|
|
884
|
+
let mainAxisCoord = coords[mainAxis];
|
|
885
|
+
let crossAxisCoord = coords[crossAxis];
|
|
886
|
+
const rawOffset = typeof offset === 'function' ? offset({ ...rects,
|
|
887
|
+
placement
|
|
888
|
+
}) : offset;
|
|
889
|
+
const computedOffset = typeof rawOffset === 'number' ? {
|
|
890
|
+
mainAxis: rawOffset,
|
|
891
|
+
crossAxis: 0
|
|
892
|
+
} : {
|
|
893
|
+
mainAxis: 0,
|
|
894
|
+
crossAxis: 0,
|
|
895
|
+
...rawOffset
|
|
896
|
+
};
|
|
897
|
+
|
|
898
|
+
if (checkMainAxis) {
|
|
899
|
+
const len = mainAxis === 'y' ? 'height' : 'width';
|
|
900
|
+
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
|
|
901
|
+
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
|
|
902
|
+
|
|
903
|
+
if (mainAxisCoord < limitMin) {
|
|
904
|
+
mainAxisCoord = limitMin;
|
|
905
|
+
} else if (mainAxisCoord > limitMax) {
|
|
906
|
+
mainAxisCoord = limitMax;
|
|
907
|
+
}
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
if (checkCrossAxis) {
|
|
911
|
+
var _middlewareData$offse, _middlewareData$offse2, _middlewareData$offse3, _middlewareData$offse4;
|
|
912
|
+
|
|
913
|
+
const len = mainAxis === 'y' ? 'width' : 'height';
|
|
914
|
+
const isOriginSide = ['top', 'left'].includes(getSide(placement));
|
|
915
|
+
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? (_middlewareData$offse = (_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) != null ? _middlewareData$offse : 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
|
|
916
|
+
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : (_middlewareData$offse3 = (_middlewareData$offse4 = middlewareData.offset) == null ? void 0 : _middlewareData$offse4[crossAxis]) != null ? _middlewareData$offse3 : 0) - (isOriginSide ? computedOffset.crossAxis : 0);
|
|
917
|
+
|
|
918
|
+
if (crossAxisCoord < limitMin) {
|
|
919
|
+
crossAxisCoord = limitMin;
|
|
920
|
+
} else if (crossAxisCoord > limitMax) {
|
|
921
|
+
crossAxisCoord = limitMax;
|
|
922
|
+
}
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
return {
|
|
926
|
+
[mainAxis]: mainAxisCoord,
|
|
927
|
+
[crossAxis]: crossAxisCoord
|
|
928
|
+
};
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
};
|
|
932
|
+
};
|
|
933
|
+
|
|
934
|
+
/**
|
|
935
|
+
* Provides data to change the size of the floating element. For instance,
|
|
936
|
+
* prevent it from overflowing its clipping boundary or match the width of the
|
|
937
|
+
* reference element.
|
|
938
|
+
* @see https://floating-ui.com/docs/size
|
|
939
|
+
*/
|
|
940
|
+
const size = function (options) {
|
|
941
|
+
if (options === void 0) {
|
|
942
|
+
options = {};
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
return {
|
|
946
|
+
name: 'size',
|
|
947
|
+
options,
|
|
948
|
+
|
|
949
|
+
async fn(middlewareArguments) {
|
|
950
|
+
const {
|
|
951
|
+
placement,
|
|
952
|
+
rects,
|
|
953
|
+
platform,
|
|
954
|
+
elements
|
|
955
|
+
} = middlewareArguments;
|
|
956
|
+
const {
|
|
957
|
+
apply,
|
|
958
|
+
...detectOverflowOptions
|
|
959
|
+
} = options;
|
|
960
|
+
const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
|
|
961
|
+
const side = getSide(placement);
|
|
962
|
+
const alignment = getAlignment(placement);
|
|
963
|
+
let heightSide;
|
|
964
|
+
let widthSide;
|
|
965
|
+
|
|
966
|
+
if (side === 'top' || side === 'bottom') {
|
|
967
|
+
heightSide = side;
|
|
968
|
+
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
969
|
+
} else {
|
|
970
|
+
widthSide = side;
|
|
971
|
+
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
const xMin = max$1(overflow.left, 0);
|
|
975
|
+
const xMax = max$1(overflow.right, 0);
|
|
976
|
+
const yMin = max$1(overflow.top, 0);
|
|
977
|
+
const yMax = max$1(overflow.bottom, 0);
|
|
978
|
+
const dimensions = {
|
|
979
|
+
height: rects.floating.height - (['left', 'right'].includes(placement) ? 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max$1(overflow.top, overflow.bottom)) : overflow[heightSide]),
|
|
980
|
+
width: rects.floating.width - (['top', 'bottom'].includes(placement) ? 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right)) : overflow[widthSide])
|
|
981
|
+
};
|
|
982
|
+
const prevDimensions = await platform.getDimensions(elements.floating);
|
|
983
|
+
apply == null ? void 0 : apply({ ...dimensions,
|
|
984
|
+
...rects
|
|
985
|
+
});
|
|
986
|
+
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
987
|
+
|
|
988
|
+
if (prevDimensions.width !== nextDimensions.width || prevDimensions.height !== nextDimensions.height) {
|
|
989
|
+
return {
|
|
990
|
+
reset: {
|
|
991
|
+
rects: true
|
|
992
|
+
}
|
|
993
|
+
};
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
return {};
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
};
|
|
1000
|
+
};
|
|
1001
|
+
|
|
1002
|
+
/**
|
|
1003
|
+
* Provides improved positioning for inline reference elements that can span
|
|
1004
|
+
* over multiple lines, such as hyperlinks or range selections.
|
|
1005
|
+
* @see https://floating-ui.com/docs/inline
|
|
1006
|
+
*/
|
|
1007
|
+
const inline = function (options) {
|
|
1008
|
+
if (options === void 0) {
|
|
1009
|
+
options = {};
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
return {
|
|
1013
|
+
name: 'inline',
|
|
1014
|
+
options,
|
|
1015
|
+
|
|
1016
|
+
async fn(middlewareArguments) {
|
|
1017
|
+
var _await$platform$getCl;
|
|
1018
|
+
|
|
1019
|
+
const {
|
|
1020
|
+
placement,
|
|
1021
|
+
elements,
|
|
1022
|
+
rects,
|
|
1023
|
+
platform,
|
|
1024
|
+
strategy
|
|
1025
|
+
} = middlewareArguments; // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
|
|
1026
|
+
// ClientRect's bounds, despite the event listener being triggered. A
|
|
1027
|
+
// padding of 2 seems to handle this issue.
|
|
1028
|
+
|
|
1029
|
+
const {
|
|
1030
|
+
padding = 2,
|
|
1031
|
+
x,
|
|
1032
|
+
y
|
|
1033
|
+
} = options;
|
|
1034
|
+
const fallback = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1035
|
+
rect: rects.reference,
|
|
1036
|
+
offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
|
|
1037
|
+
strategy
|
|
1038
|
+
}) : rects.reference);
|
|
1039
|
+
const clientRects = (_await$platform$getCl = await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) != null ? _await$platform$getCl : [];
|
|
1040
|
+
const paddingObject = getSideObjectFromPadding(padding);
|
|
1041
|
+
|
|
1042
|
+
function getBoundingClientRect() {
|
|
1043
|
+
// There are two rects and they are disjoined
|
|
1044
|
+
if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
|
|
1045
|
+
var _clientRects$find;
|
|
1046
|
+
|
|
1047
|
+
// Find the first rect in which the point is fully inside
|
|
1048
|
+
return (_clientRects$find = clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom)) != null ? _clientRects$find : fallback;
|
|
1049
|
+
} // There are 2 or more connected rects
|
|
1050
|
+
|
|
1051
|
+
|
|
1052
|
+
if (clientRects.length >= 2) {
|
|
1053
|
+
if (getMainAxisFromPlacement(placement) === 'x') {
|
|
1054
|
+
const firstRect = clientRects[0];
|
|
1055
|
+
const lastRect = clientRects[clientRects.length - 1];
|
|
1056
|
+
const isTop = getSide(placement) === 'top';
|
|
1057
|
+
const top = firstRect.top;
|
|
1058
|
+
const bottom = lastRect.bottom;
|
|
1059
|
+
const left = isTop ? firstRect.left : lastRect.left;
|
|
1060
|
+
const right = isTop ? firstRect.right : lastRect.right;
|
|
1061
|
+
const width = right - left;
|
|
1062
|
+
const height = bottom - top;
|
|
1063
|
+
return {
|
|
1064
|
+
top,
|
|
1065
|
+
bottom,
|
|
1066
|
+
left,
|
|
1067
|
+
right,
|
|
1068
|
+
width,
|
|
1069
|
+
height,
|
|
1070
|
+
x: left,
|
|
1071
|
+
y: top
|
|
1072
|
+
};
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
const isLeftSide = getSide(placement) === 'left';
|
|
1076
|
+
const maxRight = max$1(...clientRects.map(rect => rect.right));
|
|
1077
|
+
const minLeft = min$1(...clientRects.map(rect => rect.left));
|
|
1078
|
+
const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
|
|
1079
|
+
const top = measureRects[0].top;
|
|
1080
|
+
const bottom = measureRects[measureRects.length - 1].bottom;
|
|
1081
|
+
const left = minLeft;
|
|
1082
|
+
const right = maxRight;
|
|
1083
|
+
const width = right - left;
|
|
1084
|
+
const height = bottom - top;
|
|
1085
|
+
return {
|
|
1086
|
+
top,
|
|
1087
|
+
bottom,
|
|
1088
|
+
left,
|
|
1089
|
+
right,
|
|
1090
|
+
width,
|
|
1091
|
+
height,
|
|
1092
|
+
x: left,
|
|
1093
|
+
y: top
|
|
1094
|
+
};
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
return fallback;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
const resetRects = await platform.getElementRects({
|
|
1101
|
+
reference: {
|
|
1102
|
+
getBoundingClientRect
|
|
1103
|
+
},
|
|
1104
|
+
floating: elements.floating,
|
|
1105
|
+
strategy
|
|
1106
|
+
});
|
|
1107
|
+
|
|
1108
|
+
if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
|
|
1109
|
+
return {
|
|
1110
|
+
reset: {
|
|
1111
|
+
rects: resetRects
|
|
1112
|
+
}
|
|
1113
|
+
};
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
return {};
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
};
|
|
1120
|
+
};
|
|
1121
|
+
|
|
495
1122
|
function isWindow(value) {
|
|
496
1123
|
return (value == null ? void 0 : value.toString()) === '[object Window]';
|
|
497
1124
|
}
|
|
@@ -2251,11 +2878,9 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
2251
2878
|
const catMenuCss = ":host{display:inline-block}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem}";
|
|
2252
2879
|
|
|
2253
2880
|
let nextUniqueId = 0;
|
|
2254
|
-
|
|
2255
|
-
constructor() {
|
|
2256
|
-
|
|
2257
|
-
this.__registerHost();
|
|
2258
|
-
this.__attachShadow();
|
|
2881
|
+
const CatMenu = class {
|
|
2882
|
+
constructor(hostRef) {
|
|
2883
|
+
registerInstance(this, hostRef);
|
|
2259
2884
|
this.catOpen = createEvent(this, "catOpen", 7);
|
|
2260
2885
|
this.catClose = createEvent(this, "catClose", 7);
|
|
2261
2886
|
this.id = nextUniqueId++;
|
|
@@ -2338,7 +2963,7 @@ let CatMenu$1 = class extends HTMLElement {
|
|
|
2338
2963
|
if (this.trigger && this.content) {
|
|
2339
2964
|
computePosition(this.trigger, this.content, {
|
|
2340
2965
|
placement: this.placement,
|
|
2341
|
-
middleware: [offset(CatMenu
|
|
2966
|
+
middleware: [offset(CatMenu.OFFSET), flip()]
|
|
2342
2967
|
}).then(({ x, y }) => {
|
|
2343
2968
|
if (this.content) {
|
|
2344
2969
|
Object.assign(this.content.style, {
|
|
@@ -2352,27 +2977,10 @@ let CatMenu$1 = class extends HTMLElement {
|
|
|
2352
2977
|
firstTabbable(container) {
|
|
2353
2978
|
return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
|
|
2354
2979
|
}
|
|
2355
|
-
static get style() { return catMenuCss; }
|
|
2356
2980
|
};
|
|
2357
|
-
CatMenu
|
|
2358
|
-
CatMenu
|
|
2359
|
-
"placement": [1]
|
|
2360
|
-
}, [[0, "catClick", "clickHandler"]]]);
|
|
2361
|
-
function defineCustomElement$1() {
|
|
2362
|
-
if (typeof customElements === "undefined") {
|
|
2363
|
-
return;
|
|
2364
|
-
}
|
|
2365
|
-
const components = ["cat-menu"];
|
|
2366
|
-
components.forEach(tagName => { switch (tagName) {
|
|
2367
|
-
case "cat-menu":
|
|
2368
|
-
if (!customElements.get(tagName)) {
|
|
2369
|
-
customElements.define(tagName, CatMenu$1);
|
|
2370
|
-
}
|
|
2371
|
-
break;
|
|
2372
|
-
} });
|
|
2373
|
-
}
|
|
2981
|
+
CatMenu.OFFSET = 4;
|
|
2982
|
+
CatMenu.style = catMenuCss;
|
|
2374
2983
|
|
|
2375
|
-
|
|
2376
|
-
const defineCustomElement = defineCustomElement$1;
|
|
2984
|
+
export { CatMenu as cat_menu };
|
|
2377
2985
|
|
|
2378
|
-
|
|
2986
|
+
//# sourceMappingURL=cat-menu.entry.js.map
|