wj-elements 0.1.128 → 0.1.129

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/dist/dark.css +6 -1
  2. package/dist/{infinite-scroll.element-DcO1E5Es.js → infinite-scroll.element-R3y_ZQj6.js} +42 -14
  3. package/dist/light.css +5 -0
  4. package/dist/{list.element-TZXMx1rt.js → list.element-syl98NWS.js} +4 -1
  5. package/dist/localize.js +4 -3
  6. package/dist/{popup.element-l8v-dMoK.js → popup.element-C0a1z1y2.js} +191 -78
  7. package/dist/wje-accordion-item.js +1 -1
  8. package/dist/wje-animation.js +141 -13
  9. package/dist/wje-aside.js +1 -1
  10. package/dist/wje-avatar.js +5 -5
  11. package/dist/wje-badge.js +1 -1
  12. package/dist/wje-breadcrumb.js +16 -6
  13. package/dist/wje-breadcrumbs.js +4 -4
  14. package/dist/wje-button-group.js +2 -2
  15. package/dist/wje-button.js +64 -6
  16. package/dist/wje-card-content.js +1 -1
  17. package/dist/wje-card-controls.js +1 -1
  18. package/dist/wje-card-header.js +1 -1
  19. package/dist/wje-card-subtitle.js +1 -1
  20. package/dist/wje-card-title.js +1 -1
  21. package/dist/wje-carousel-item.js +1 -1
  22. package/dist/wje-carousel.js +1 -1
  23. package/dist/wje-checkbox.js +14 -11
  24. package/dist/wje-chip.js +1 -1
  25. package/dist/wje-col.js +9 -3
  26. package/dist/wje-color-picker.js +72 -42
  27. package/dist/wje-container.js +1 -1
  28. package/dist/wje-copy-button.js +3 -3
  29. package/dist/wje-dialog.js +89 -0
  30. package/dist/wje-divider.js +1 -1
  31. package/dist/wje-dropdown.js +21 -6
  32. package/dist/wje-element.js +284 -127
  33. package/dist/wje-fetchAndParseCSS.js +2 -1
  34. package/dist/wje-file-upload-item.js +5 -2
  35. package/dist/wje-file-upload.js +57 -13
  36. package/dist/wje-footer.js +1 -1
  37. package/dist/wje-form.js +1 -1
  38. package/dist/wje-format-digital.js +1 -1
  39. package/dist/wje-grid.js +1 -1
  40. package/dist/wje-header.js +1 -1
  41. package/dist/wje-icon-picker.js +6 -3
  42. package/dist/wje-icon.js +4 -1
  43. package/dist/wje-img-comparer.js +1 -3
  44. package/dist/wje-img.js +5 -2
  45. package/dist/wje-infinite-scroll.js +1 -1
  46. package/dist/wje-input-file.js +4 -1
  47. package/dist/wje-input.js +9 -4
  48. package/dist/wje-item.js +34 -3
  49. package/dist/wje-kanban.js +16 -31
  50. package/dist/wje-label.js +1 -10
  51. package/dist/wje-list.js +1 -1
  52. package/dist/wje-main.js +1 -1
  53. package/dist/wje-masonry.js +9 -9
  54. package/dist/wje-master.js +9 -117
  55. package/dist/wje-menu-button.js +4 -1
  56. package/dist/wje-menu-item.js +13 -4
  57. package/dist/wje-menu-label.js +1 -1
  58. package/dist/wje-menu.js +4 -1
  59. package/dist/wje-option.js +8 -4
  60. package/dist/wje-options.js +25 -11
  61. package/dist/wje-orgchart-group.js +2 -2
  62. package/dist/wje-orgchart-item.js +7 -4
  63. package/dist/wje-orgchart.js +1 -1
  64. package/dist/wje-popup.js +1 -1
  65. package/dist/wje-progress-bar.js +6 -2
  66. package/dist/wje-qr-code.js +2 -2
  67. package/dist/wje-radio-group.js +4 -1
  68. package/dist/wje-radio.js +1 -1
  69. package/dist/wje-rate.js +6 -3
  70. package/dist/wje-relative-time.js +37 -19
  71. package/dist/wje-reorder.js +73 -10
  72. package/dist/wje-route.js +1 -1
  73. package/dist/wje-router-link.js +1 -2
  74. package/dist/wje-routerx.js +3 -1
  75. package/dist/wje-row.js +1 -11
  76. package/dist/wje-select.js +15 -12
  77. package/dist/wje-slider.js +7 -4
  78. package/dist/wje-sliding-container.js +125 -49
  79. package/dist/wje-split-view.js +10 -2
  80. package/dist/wje-status.js +1 -1
  81. package/dist/wje-stepper.js +879 -766
  82. package/dist/wje-store.js +17 -18
  83. package/dist/wje-tab-group.js +4 -1
  84. package/dist/wje-tab-panel.js +1 -1
  85. package/dist/wje-tab.js +4 -1
  86. package/dist/wje-textarea.js +8 -2
  87. package/dist/wje-thumbnail.js +1 -9
  88. package/dist/wje-toast.js +24 -23
  89. package/dist/wje-toggle.js +7 -1
  90. package/dist/wje-toolbar-action.js +1 -1
  91. package/dist/wje-toolbar.js +1 -1
  92. package/dist/wje-tooltip.js +5 -1
  93. package/dist/wje-visually-hidden.js +1 -1
  94. package/package.json +16 -5
@@ -113,12 +113,21 @@ function getPaddingObject(padding) {
113
113
  };
114
114
  }
115
115
  function rectToClientRect(rect) {
116
+ const {
117
+ x,
118
+ y,
119
+ width,
120
+ height
121
+ } = rect;
116
122
  return {
117
- ...rect,
118
- top: rect.y,
119
- left: rect.x,
120
- right: rect.x + rect.width,
121
- bottom: rect.y + rect.height
123
+ width,
124
+ height,
125
+ top: y,
126
+ left: x,
127
+ right: x + width,
128
+ bottom: y + height,
129
+ x,
130
+ y
122
131
  };
123
132
  }
124
133
  function computeCoordsFromPlacement(_ref, placement, rtl) {
@@ -249,7 +258,6 @@ const computePosition$1 = async (reference, floating, config) => {
249
258
  } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
250
259
  }
251
260
  i = -1;
252
- continue;
253
261
  }
254
262
  }
255
263
  return {
@@ -290,9 +298,10 @@ async function detectOverflow(state, options) {
290
298
  strategy
291
299
  }));
292
300
  const rect = elementContext === "floating" ? {
293
- ...rects.floating,
294
301
  x,
295
- y
302
+ y,
303
+ width: rects.floating.width,
304
+ height: rects.floating.height
296
305
  } : rects.reference;
297
306
  const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
298
307
  const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
@@ -303,6 +312,7 @@ async function detectOverflow(state, options) {
303
312
  y: 1
304
313
  };
305
314
  const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
315
+ elements,
306
316
  rect,
307
317
  offsetParent,
308
318
  strategy
@@ -314,7 +324,7 @@ async function detectOverflow(state, options) {
314
324
  right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
315
325
  };
316
326
  }
317
- const arrow = (options) => ({
327
+ const arrow$1 = (options) => ({
318
328
  name: "arrow",
319
329
  options,
320
330
  async fn(state) {
@@ -361,7 +371,7 @@ const arrow = (options) => ({
361
371
  const max2 = clientSize - arrowDimensions[length] - maxPadding;
362
372
  const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
363
373
  const offset2 = clamp(min$1, center, max2);
364
- const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center != offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
374
+ const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
365
375
  const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
366
376
  return {
367
377
  [axis]: coords[axis] + alignmentOffset,
@@ -376,7 +386,7 @@ const arrow = (options) => ({
376
386
  };
377
387
  }
378
388
  });
379
- const flip = function(options) {
389
+ const flip$1 = function(options) {
380
390
  if (options === void 0) {
381
391
  options = {};
382
392
  }
@@ -406,10 +416,12 @@ const flip = function(options) {
406
416
  return {};
407
417
  }
408
418
  const side = getSide(placement);
419
+ const initialSideAxis = getSideAxis(initialPlacement);
409
420
  const isBasePlacement = getSide(initialPlacement) === initialPlacement;
410
421
  const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
411
422
  const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
412
- if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== "none") {
423
+ const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
424
+ if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
413
425
  fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
414
426
  }
415
427
  const placements = [initialPlacement, ...fallbackPlacements];
@@ -446,8 +458,16 @@ const flip = function(options) {
446
458
  if (!resetPlacement) {
447
459
  switch (fallbackStrategy) {
448
460
  case "bestFit": {
449
- var _overflowsData$map$so;
450
- const placement2 = (_overflowsData$map$so = overflowsData.map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
461
+ var _overflowsData$filter2;
462
+ const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
463
+ if (hasFallbackAxisSideDirection) {
464
+ const currentSideAxis = getSideAxis(d.placement);
465
+ return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
466
+ // reading directions favoring greater width.
467
+ currentSideAxis === "y";
468
+ }
469
+ return true;
470
+ }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
451
471
  if (placement2) {
452
472
  resetPlacement = placement2;
453
473
  }
@@ -492,10 +512,9 @@ async function convertValueToCoords(state, options) {
492
512
  crossAxis: 0,
493
513
  alignmentAxis: null
494
514
  } : {
495
- mainAxis: 0,
496
- crossAxis: 0,
497
- alignmentAxis: null,
498
- ...rawValue
515
+ mainAxis: rawValue.mainAxis || 0,
516
+ crossAxis: rawValue.crossAxis || 0,
517
+ alignmentAxis: rawValue.alignmentAxis
499
518
  };
500
519
  if (alignment && typeof alignmentAxis === "number") {
501
520
  crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
@@ -508,7 +527,7 @@ async function convertValueToCoords(state, options) {
508
527
  y: crossAxis * crossAxisMulti
509
528
  };
510
529
  }
511
- const offset = function(options) {
530
+ const offset$1 = function(options) {
512
531
  if (options === void 0) {
513
532
  options = 0;
514
533
  }
@@ -516,20 +535,29 @@ const offset = function(options) {
516
535
  name: "offset",
517
536
  options,
518
537
  async fn(state) {
538
+ var _middlewareData$offse, _middlewareData$arrow;
519
539
  const {
520
540
  x,
521
- y
541
+ y,
542
+ placement,
543
+ middlewareData
522
544
  } = state;
523
545
  const diffCoords = await convertValueToCoords(state, options);
546
+ if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
547
+ return {};
548
+ }
524
549
  return {
525
550
  x: x + diffCoords.x,
526
551
  y: y + diffCoords.y,
527
- data: diffCoords
552
+ data: {
553
+ ...diffCoords,
554
+ placement
555
+ }
528
556
  };
529
557
  }
530
558
  };
531
559
  };
532
- const size = function(options) {
560
+ const size$1 = function(options) {
533
561
  if (options === void 0) {
534
562
  options = {};
535
563
  }
@@ -537,6 +565,7 @@ const size = function(options) {
537
565
  name: "size",
538
566
  options,
539
567
  async fn(state) {
568
+ var _state$middlewareData, _state$middlewareData2;
540
569
  const {
541
570
  placement,
542
571
  rects,
@@ -565,17 +594,18 @@ const size = function(options) {
565
594
  widthSide = side;
566
595
  heightSide = alignment === "end" ? "top" : "bottom";
567
596
  }
568
- const overflowAvailableHeight = height - overflow[heightSide];
569
- const overflowAvailableWidth = width - overflow[widthSide];
597
+ const maximumClippingHeight = height - overflow.top - overflow.bottom;
598
+ const maximumClippingWidth = width - overflow.left - overflow.right;
599
+ const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
600
+ const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
570
601
  const noShift = !state.middlewareData.shift;
571
602
  let availableHeight = overflowAvailableHeight;
572
603
  let availableWidth = overflowAvailableWidth;
573
- if (isYAxis) {
574
- const maximumClippingWidth = width - overflow.left - overflow.right;
575
- availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
576
- } else {
577
- const maximumClippingHeight = height - overflow.top - overflow.bottom;
578
- availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
604
+ if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
605
+ availableWidth = maximumClippingWidth;
606
+ }
607
+ if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
608
+ availableHeight = maximumClippingHeight;
579
609
  }
580
610
  if (noShift && !alignment) {
581
611
  const xMin = max(overflow.left, 0);
@@ -605,6 +635,9 @@ const size = function(options) {
605
635
  }
606
636
  };
607
637
  };
638
+ function hasWindow() {
639
+ return typeof window !== "undefined";
640
+ }
608
641
  function getNodeName(node) {
609
642
  if (isNode(node)) {
610
643
  return (node.nodeName || "").toLowerCase();
@@ -613,23 +646,32 @@ function getNodeName(node) {
613
646
  }
614
647
  function getWindow(node) {
615
648
  var _node$ownerDocument;
616
- return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
649
+ return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
617
650
  }
618
651
  function getDocumentElement(node) {
619
652
  var _ref;
620
653
  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
621
654
  }
622
655
  function isNode(value) {
656
+ if (!hasWindow()) {
657
+ return false;
658
+ }
623
659
  return value instanceof Node || value instanceof getWindow(value).Node;
624
660
  }
625
661
  function isElement(value) {
662
+ if (!hasWindow()) {
663
+ return false;
664
+ }
626
665
  return value instanceof Element || value instanceof getWindow(value).Element;
627
666
  }
628
667
  function isHTMLElement(value) {
668
+ if (!hasWindow()) {
669
+ return false;
670
+ }
629
671
  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
630
672
  }
631
673
  function isShadowRoot(value) {
632
- if (typeof ShadowRoot === "undefined") {
674
+ if (!hasWindow() || typeof ShadowRoot === "undefined") {
633
675
  return false;
634
676
  }
635
677
  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
@@ -646,9 +688,18 @@ function isOverflowElement(element) {
646
688
  function isTableElement(element) {
647
689
  return ["table", "td", "th"].includes(getNodeName(element));
648
690
  }
649
- function isContainingBlock(element) {
691
+ function isTopLayer(element) {
692
+ return [":popover-open", ":modal"].some((selector) => {
693
+ try {
694
+ return element.matches(selector);
695
+ } catch (e) {
696
+ return false;
697
+ }
698
+ });
699
+ }
700
+ function isContainingBlock(elementOrCss) {
650
701
  const webkit = isWebKit();
651
- const css = getComputedStyle(element);
702
+ const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
652
703
  return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
653
704
  }
654
705
  function getContainingBlock(element) {
@@ -656,9 +707,10 @@ function getContainingBlock(element) {
656
707
  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
657
708
  if (isContainingBlock(currentNode)) {
658
709
  return currentNode;
659
- } else {
660
- currentNode = getParentNode(currentNode);
710
+ } else if (isTopLayer(currentNode)) {
711
+ return null;
661
712
  }
713
+ currentNode = getParentNode(currentNode);
662
714
  }
663
715
  return null;
664
716
  }
@@ -680,8 +732,8 @@ function getNodeScroll(element) {
680
732
  };
681
733
  }
682
734
  return {
683
- scrollLeft: element.pageXOffset,
684
- scrollTop: element.pageYOffset
735
+ scrollLeft: element.scrollX,
736
+ scrollTop: element.scrollY
685
737
  };
686
738
  }
687
739
  function getParentNode(node) {
@@ -719,10 +771,14 @@ function getOverflowAncestors(node, list, traverseIframes) {
719
771
  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
720
772
  const win = getWindow(scrollableAncestor);
721
773
  if (isBody) {
722
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
774
+ const frameElement = getFrameElement(win);
775
+ return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
723
776
  }
724
777
  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
725
778
  }
779
+ function getFrameElement(win) {
780
+ return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
781
+ }
726
782
  function getCssDimensions(element) {
727
783
  const css = getComputedStyle(element);
728
784
  let width = parseFloat(css.width) || 0;
@@ -815,8 +871,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
815
871
  if (domElement) {
816
872
  const win = getWindow(domElement);
817
873
  const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
818
- let currentIFrame = win.frameElement;
819
- while (currentIFrame && offsetParent && offsetWin !== win) {
874
+ let currentWin = win;
875
+ let currentIFrame = getFrameElement(currentWin);
876
+ while (currentIFrame && offsetParent && offsetWin !== currentWin) {
820
877
  const iframeScale = getScale(currentIFrame);
821
878
  const iframeRect = currentIFrame.getBoundingClientRect();
822
879
  const css = getComputedStyle(currentIFrame);
@@ -828,7 +885,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
828
885
  height *= iframeScale.y;
829
886
  x += left;
830
887
  y += top;
831
- currentIFrame = getWindow(currentIFrame).frameElement;
888
+ currentWin = getWindow(currentIFrame);
889
+ currentIFrame = getFrameElement(currentWin);
832
890
  }
833
891
  }
834
892
  return rectToClientRect({
@@ -840,13 +898,15 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
840
898
  }
841
899
  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
842
900
  let {
901
+ elements,
843
902
  rect,
844
903
  offsetParent,
845
904
  strategy
846
905
  } = _ref;
847
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
906
+ const isFixed = strategy === "fixed";
848
907
  const documentElement = getDocumentElement(offsetParent);
849
- if (offsetParent === documentElement) {
908
+ const topLayer = elements ? isTopLayer(elements.floating) : false;
909
+ if (offsetParent === documentElement || topLayer && isFixed) {
850
910
  return rect;
851
911
  }
852
912
  let scroll = {
@@ -855,7 +915,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
855
915
  };
856
916
  let scale = createCoords(1);
857
917
  const offsets = createCoords(0);
858
- if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== "fixed") {
918
+ const isOffsetParentAnElement = isHTMLElement(offsetParent);
919
+ if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
859
920
  if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
860
921
  scroll = getNodeScroll(offsetParent);
861
922
  }
@@ -876,8 +937,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
876
937
  function getClientRects(element) {
877
938
  return Array.from(element.getClientRects());
878
939
  }
879
- function getWindowScrollBarX(element) {
880
- return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
940
+ function getWindowScrollBarX(element, rect) {
941
+ const leftScroll = getNodeScroll(element).scrollLeft;
942
+ if (!rect) {
943
+ return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
944
+ }
945
+ return rect.left + leftScroll;
881
946
  }
882
947
  function getDocumentRect(element) {
883
948
  const html = getDocumentElement(element);
@@ -995,7 +1060,7 @@ function getClippingRect(_ref) {
995
1060
  rootBoundary,
996
1061
  strategy
997
1062
  } = _ref;
998
- const elementClippingAncestors = boundary === "clippingAncestors" ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
1063
+ const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
999
1064
  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1000
1065
  const firstClippingAncestor = clippingAncestors[0];
1001
1066
  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
@@ -1014,7 +1079,14 @@ function getClippingRect(_ref) {
1014
1079
  };
1015
1080
  }
1016
1081
  function getDimensions(element) {
1017
- return getCssDimensions(element);
1082
+ const {
1083
+ width,
1084
+ height
1085
+ } = getCssDimensions(element);
1086
+ return {
1087
+ width,
1088
+ height
1089
+ };
1018
1090
  }
1019
1091
  function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1020
1092
  const isOffsetParentAnElement = isHTMLElement(offsetParent);
@@ -1038,13 +1110,26 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1038
1110
  offsets.x = getWindowScrollBarX(documentElement);
1039
1111
  }
1040
1112
  }
1113
+ let htmlX = 0;
1114
+ let htmlY = 0;
1115
+ if (documentElement && !isOffsetParentAnElement && !isFixed) {
1116
+ const htmlRect = documentElement.getBoundingClientRect();
1117
+ htmlY = htmlRect.top + scroll.scrollTop;
1118
+ htmlX = htmlRect.left + scroll.scrollLeft - // RTL <body> scrollbar.
1119
+ getWindowScrollBarX(documentElement, htmlRect);
1120
+ }
1121
+ const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
1122
+ const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
1041
1123
  return {
1042
- x: rect.left + scroll.scrollLeft - offsets.x,
1043
- y: rect.top + scroll.scrollTop - offsets.y,
1124
+ x,
1125
+ y,
1044
1126
  width: rect.width,
1045
1127
  height: rect.height
1046
1128
  };
1047
1129
  }
1130
+ function isStaticPositioned(element) {
1131
+ return getComputedStyle(element).position === "static";
1132
+ }
1048
1133
  function getTrueOffsetParent(element, polyfill) {
1049
1134
  if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
1050
1135
  return null;
@@ -1052,36 +1137,47 @@ function getTrueOffsetParent(element, polyfill) {
1052
1137
  if (polyfill) {
1053
1138
  return polyfill(element);
1054
1139
  }
1055
- return element.offsetParent;
1140
+ let rawOffsetParent = element.offsetParent;
1141
+ if (getDocumentElement(element) === rawOffsetParent) {
1142
+ rawOffsetParent = rawOffsetParent.ownerDocument.body;
1143
+ }
1144
+ return rawOffsetParent;
1056
1145
  }
1057
1146
  function getOffsetParent(element, polyfill) {
1058
- const window2 = getWindow(element);
1147
+ const win = getWindow(element);
1148
+ if (isTopLayer(element)) {
1149
+ return win;
1150
+ }
1059
1151
  if (!isHTMLElement(element)) {
1060
- return window2;
1152
+ let svgOffsetParent = getParentNode(element);
1153
+ while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1154
+ if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1155
+ return svgOffsetParent;
1156
+ }
1157
+ svgOffsetParent = getParentNode(svgOffsetParent);
1158
+ }
1159
+ return win;
1061
1160
  }
1062
1161
  let offsetParent = getTrueOffsetParent(element, polyfill);
1063
- while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === "static") {
1162
+ while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1064
1163
  offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1065
1164
  }
1066
- if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle(offsetParent).position === "static" && !isContainingBlock(offsetParent))) {
1067
- return window2;
1165
+ if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1166
+ return win;
1068
1167
  }
1069
- return offsetParent || getContainingBlock(element) || window2;
1168
+ return offsetParent || getContainingBlock(element) || win;
1070
1169
  }
1071
- const getElementRects = async function(_ref) {
1072
- let {
1073
- reference,
1074
- floating,
1075
- strategy
1076
- } = _ref;
1170
+ const getElementRects = async function(data) {
1077
1171
  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1078
1172
  const getDimensionsFn = this.getDimensions;
1173
+ const floatingDimensions = await getDimensionsFn(data.floating);
1079
1174
  return {
1080
- reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
1175
+ reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1081
1176
  floating: {
1082
1177
  x: 0,
1083
1178
  y: 0,
1084
- ...await getDimensionsFn(floating)
1179
+ width: floatingDimensions.width,
1180
+ height: floatingDimensions.height
1085
1181
  }
1086
1182
  };
1087
1183
  };
@@ -1105,8 +1201,9 @@ function observeMove(element, onMove) {
1105
1201
  let timeoutId;
1106
1202
  const root = getDocumentElement(element);
1107
1203
  function cleanup() {
1204
+ var _io;
1108
1205
  clearTimeout(timeoutId);
1109
- io && io.disconnect();
1206
+ (_io = io) == null || _io.disconnect();
1110
1207
  io = null;
1111
1208
  }
1112
1209
  function refresh(skip, threshold) {
@@ -1148,7 +1245,7 @@ function observeMove(element, onMove) {
1148
1245
  if (!ratio) {
1149
1246
  timeoutId = setTimeout(() => {
1150
1247
  refresh(false, 1e-7);
1151
- }, 100);
1248
+ }, 1e3);
1152
1249
  } else {
1153
1250
  refresh(false, ratio);
1154
1251
  }
@@ -1198,7 +1295,8 @@ function autoUpdate(reference, floating, update, options) {
1198
1295
  resizeObserver.unobserve(floating);
1199
1296
  cancelAnimationFrame(reobserveFrame);
1200
1297
  reobserveFrame = requestAnimationFrame(() => {
1201
- resizeObserver && resizeObserver.observe(floating);
1298
+ var _resizeObserver;
1299
+ (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1202
1300
  });
1203
1301
  }
1204
1302
  update();
@@ -1223,18 +1321,23 @@ function autoUpdate(reference, floating, update, options) {
1223
1321
  }
1224
1322
  update();
1225
1323
  return () => {
1324
+ var _resizeObserver2;
1226
1325
  ancestors.forEach((ancestor) => {
1227
1326
  ancestorScroll && ancestor.removeEventListener("scroll", update);
1228
1327
  ancestorResize && ancestor.removeEventListener("resize", update);
1229
1328
  });
1230
- cleanupIo && cleanupIo();
1231
- resizeObserver && resizeObserver.disconnect();
1329
+ cleanupIo == null || cleanupIo();
1330
+ (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
1232
1331
  resizeObserver = null;
1233
1332
  if (animationFrame) {
1234
1333
  cancelAnimationFrame(frameId);
1235
1334
  }
1236
1335
  };
1237
1336
  }
1337
+ const offset = offset$1;
1338
+ const flip = flip$1;
1339
+ const size = size$1;
1340
+ const arrow = arrow$1;
1238
1341
  const computePosition = (reference, floating, options) => {
1239
1342
  const cache = /* @__PURE__ */ new Map();
1240
1343
  const mergedOptions = {
@@ -1346,7 +1449,7 @@ class Popup extends WJElement {
1346
1449
  * @param {Object} params - The parameters for drawing.
1347
1450
  * @returns {DocumentFragment}
1348
1451
  */
1349
- draw(context, store, params) {
1452
+ draw() {
1350
1453
  let fragment = document.createDocumentFragment();
1351
1454
  let slotAnchor = document.createElement("slot");
1352
1455
  slotAnchor.setAttribute("name", "anchor");
@@ -1365,7 +1468,13 @@ class Popup extends WJElement {
1365
1468
  this.native = native;
1366
1469
  return fragment;
1367
1470
  }
1368
- afterDraw(context, store, params) {
1471
+ /**
1472
+ * After Draws the component.
1473
+ * @params {Object} context - The context for drawing.
1474
+ * @params {Object} store - The store for drawing.
1475
+ * @params {Object} params - The parameters for drawing.
1476
+ */
1477
+ afterDraw() {
1369
1478
  this.setAnchor();
1370
1479
  if (this.hasAttribute("active"))
1371
1480
  this.show(false);
@@ -1454,10 +1563,10 @@ class Popup extends WJElement {
1454
1563
  }[placement];
1455
1564
  if (middlewareData.arrow) {
1456
1565
  const { width, height } = this.native.getBoundingClientRect();
1457
- const { x: x2, y: y2 } = middlewareData.arrow;
1566
+ let { osX = x, osY = y } = middlewareData.arrow;
1458
1567
  Object.assign(this.arrow.style, {
1459
- left: x2 != null ? `${width / 2 - this.arrow.offsetWidth / 2}px` : "",
1460
- top: y2 != null ? `${height / 2 - this.arrow.offsetHeight / 2}px` : "",
1568
+ left: osX !== null && osX !== void 0 ? `${width / 2 - this.arrow.offsetWidth / 2}px` : "",
1569
+ top: osY !== null && osY !== void 0 ? `${height / 2 - this.arrow.offsetHeight / 2}px` : "",
1461
1570
  [staticSide]: `${-this.arrow.offsetHeight / 2}px`
1462
1571
  });
1463
1572
  }
@@ -1476,7 +1585,9 @@ class Popup extends WJElement {
1476
1585
  */
1477
1586
  show(dispatchEvent = true) {
1478
1587
  var _a;
1479
- dispatchEvent && event.dispatchCustomEvent(this, "wje-popup:show");
1588
+ if (dispatchEvent) {
1589
+ event.dispatchCustomEvent(this, "wje-popup:show");
1590
+ }
1480
1591
  this.native.classList.add("popup-active");
1481
1592
  (_a = this.cleanup) == null ? void 0 : _a.call(this);
1482
1593
  this.cleanup = autoUpdate(this.anchorEl, this.native, () => {
@@ -1492,7 +1603,9 @@ class Popup extends WJElement {
1492
1603
  */
1493
1604
  hide(dispatchEvent = true) {
1494
1605
  var _a;
1495
- dispatchEvent && event.dispatchCustomEvent(this, "wje-popup:hide");
1606
+ if (dispatchEvent) {
1607
+ event.dispatchCustomEvent(this, "wje-popup:hide");
1608
+ }
1496
1609
  this.native.classList.remove("popup-active");
1497
1610
  (_a = this.cleanup) == null ? void 0 : _a.call(this);
1498
1611
  this.cleanup = void 0;
@@ -50,7 +50,7 @@ class AccordionItem extends WJElement {
50
50
  * @param {Object} params - The parameters for drawing the element.
51
51
  * @return {Object} The document fragment containing the drawn element.
52
52
  */
53
- draw(context, store, params) {
53
+ draw() {
54
54
  let fragment = document.createDocumentFragment();
55
55
  let native = document.createElement("div");
56
56
  native.setAttribute("part", "native");