@six-group/ui-library 0.0.0-insider.012ddb2

package/dist/collection/utils/popover.js

@@ -0,0 +1,128 @@
+//
+// A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.
+//
+// Powered by Popper.js.
+//
+// NOTE:
+//
+// - The popover MUST have at least one property that transitions, otherwise transitionEnd won't fire and the popover
+//   won't be hidden. If transitions are delegated to a child element, set the `transitionElement` property accordingly.
+//
+// - When the popover is shown, it's assigned `PopoverOptions.visibleClass`. You can use this class to provide different
+//   transitions for show/hide.
+//
+// - Popper uses `translate3d` to position elements, so adding a transition to the `transform` property may have an
+//   undesired effect when the element is shown and when its placement changes.
+//
+import { createPopper } from "@popperjs/core";
+export default class Popover {
+    constructor(anchor, popover, options) {
+        this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+        this.anchor = anchor;
+        this.popover = popover;
+        this.options = Object.assign({
+            skidding: 0,
+            distance: 0,
+            placement: 'bottom-start',
+            strategy: 'absolute',
+            transitionElement: this.popover,
+            visibleClass: 'popover-visible',
+            onAfterShow: () => Promise,
+            onAfterHide: () => Promise,
+            onTransitionEnd: () => Promise,
+        }, options);
+        this.isVisible = false;
+        this.popover.hidden = true;
+        if (this.options.visibleClass != null) {
+            this.popover.classList.remove(this.options.visibleClass);
+        }
+        this.popover.addEventListener('transitionend', this.handleTransitionEnd);
+    }
+    handleTransitionEnd(event) {
+        var _a, _b;
+        const target = event.target;
+        // Make sure the transition event originates from from the correct element, and not one that has bubbled up
+        if (target === this.options.transitionElement) {
+            // This is called before the element is hidden so users can do things like reset scroll. It will fire once for
+            // every transition property. Use `event.propertyName` to determine which property has finished transitioning.
+            (_a = this.options.onTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(this, event);
+            // Make sure we only do this once, since transitionend will fire for every transition
+            if (!this.isVisible && !this.popover.hidden) {
+                this.popover.hidden = true;
+                if (this.options.visibleClass != null) {
+                    this.popover.classList.remove(this.options.visibleClass);
+                }
+                (_b = this.options.onAfterHide) === null || _b === void 0 ? void 0 : _b.call(this);
+            }
+        }
+    }
+    destroy() {
+        this.popover.removeEventListener('transitionend', this.handleTransitionEnd);
+        if (this.popper) {
+            this.popper.destroy();
+            this.popper = undefined;
+        }
+    }
+    show() {
+        this.isVisible = true;
+        this.popover.hidden = false;
+        this.popover.clientWidth; // force reflow
+        requestAnimationFrame(() => {
+            if (this.options.visibleClass != null) {
+                this.popover.classList.add(this.options.visibleClass);
+            }
+        });
+        if (this.popper) {
+            this.popper.destroy();
+        }
+        this.popper = createPopper(this.anchor, this.popover, {
+            placement: this.options.placement,
+            strategy: this.options.strategy,
+            modifiers: [
+                {
+                    name: 'flip',
+                    options: {
+                        boundary: 'viewport',
+                    },
+                },
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [this.options.skidding, this.options.distance],
+                    },
+                },
+            ],
+        });
+        this.popover.addEventListener('transitionend', () => { var _a; return (_a = this.options.onAfterShow) === null || _a === void 0 ? void 0 : _a.call(this); }, { once: true });
+        // Reposition the menu after it appears in case a modifier kicked in
+        requestAnimationFrame(() => { var _a; return (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update(); });
+    }
+    reposition() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+    }
+    hide() {
+        // Apply the hidden styles and wait for the transition before hiding completely
+        this.isVisible = false;
+        if (this.options.visibleClass != null) {
+            this.popover.classList.remove(this.options.visibleClass);
+        }
+    }
+    setOptions(options) {
+        this.options = Object.assign(this.options, options);
+        if (this.options.visibleClass != null) {
+            this.isVisible
+                ? this.popover.classList.add(this.options.visibleClass)
+                : this.popover.classList.remove(this.options.visibleClass);
+        }
+        // Update popper options
+        if (this.popper != null) {
+            void this.popper.setOptions({
+                placement: this.options.placement,
+                strategy: this.options.strategy,
+            });
+            requestAnimationFrame(() => { var _a; return (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update(); });
+        }
+    }
+}
+//# sourceMappingURL=popover.js.map

package/dist/collection/utils/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/utils/popover.ts"],"names":[],"mappings":"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","sourcesContent":["//\n// A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.\n//\n// Powered by Popper.js.\n//\n// NOTE:\n//\n// - The popover MUST have at least one property that transitions, otherwise transitionEnd won't fire and the popover\n//   won't be hidden. If transitions are delegated to a child element, set the `transitionElement` property accordingly.\n//\n// - When the popover is shown, it's assigned `PopoverOptions.visibleClass`. You can use this class to provide different\n//   transitions for show/hide.\n//\n// - Popper uses `translate3d` to position elements, so adding a transition to the `transform` property may have an\n//   undesired effect when the element is shown and when its placement changes.\n//\nimport { createPopper, Instance } from '@popperjs/core';\n\nexport default class Popover {\n  anchor: HTMLElement;\n  isVisible: boolean;\n  popover: HTMLElement;\n  popper?: Instance;\n  options: PopoverOptions;\n\n  constructor(anchor: HTMLElement, popover: HTMLElement, options?: PopoverOptions) {\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n\n    this.anchor = anchor;\n    this.popover = popover;\n    this.options = Object.assign(\n      {\n        skidding: 0,\n        distance: 0,\n        placement: 'bottom-start',\n        strategy: 'absolute',\n        transitionElement: this.popover,\n        visibleClass: 'popover-visible',\n        onAfterShow: () => Promise<void>,\n        onAfterHide: () => Promise<void>,\n        onTransitionEnd: () => Promise<void>,\n      },\n      options\n    );\n\n    this.isVisible = false;\n    this.popover.hidden = true;\n    if (this.options.visibleClass != null) {\n      this.popover.classList.remove(this.options.visibleClass);\n    }\n\n    this.popover.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Make sure the transition event originates from from the correct element, and not one that has bubbled up\n    if (target === this.options.transitionElement) {\n      // This is called before the element is hidden so users can do things like reset scroll. It will fire once for\n      // every transition property. Use `event.propertyName` to determine which property has finished transitioning.\n      this.options.onTransitionEnd?.call(this, event);\n\n      // Make sure we only do this once, since transitionend will fire for every transition\n      if (!this.isVisible && !this.popover.hidden) {\n        this.popover.hidden = true;\n        if (this.options.visibleClass != null) {\n          this.popover.classList.remove(this.options.visibleClass);\n        }\n        this.options.onAfterHide?.call(this);\n      }\n    }\n  }\n\n  destroy() {\n    this.popover.removeEventListener('transitionend', this.handleTransitionEnd);\n\n    if (this.popper) {\n      this.popper.destroy();\n      this.popper = undefined;\n    }\n  }\n\n  show() {\n    this.isVisible = true;\n    this.popover.hidden = false;\n    this.popover.clientWidth; // force reflow\n    requestAnimationFrame(() => {\n      if (this.options.visibleClass != null) {\n        this.popover.classList.add(this.options.visibleClass);\n      }\n    });\n\n    if (this.popper) {\n      this.popper.destroy();\n    }\n\n    this.popper = createPopper(this.anchor, this.popover, {\n      placement: this.options.placement,\n      strategy: this.options.strategy,\n      modifiers: [\n        {\n          name: 'flip',\n          options: {\n            boundary: 'viewport',\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [this.options.skidding, this.options.distance],\n          },\n        },\n      ],\n    });\n\n    this.popover.addEventListener('transitionend', () => this.options.onAfterShow?.call(this), { once: true });\n\n    // Reposition the menu after it appears in case a modifier kicked in\n    requestAnimationFrame(() => this.popper?.update());\n  }\n\n  reposition() {\n    this.popper?.update();\n  }\n\n  hide() {\n    // Apply the hidden styles and wait for the transition before hiding completely\n    this.isVisible = false;\n    if (this.options.visibleClass != null) {\n      this.popover.classList.remove(this.options.visibleClass);\n    }\n  }\n\n  setOptions(options: PopoverOptions) {\n    this.options = Object.assign(this.options, options);\n    if (this.options.visibleClass != null) {\n      this.isVisible\n        ? this.popover.classList.add(this.options.visibleClass)\n        : this.popover.classList.remove(this.options.visibleClass);\n    }\n\n    // Update popper options\n    if (this.popper != null) {\n      void this.popper.setOptions({\n        placement: this.options.placement,\n        strategy: this.options.strategy,\n      });\n\n      requestAnimationFrame(() => this.popper?.update());\n    }\n  }\n}\n\ninterface PopoverOptions {\n  distance?: number;\n  placement?:\n    | 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  skidding?: number;\n  strategy?: 'absolute' | 'fixed';\n  transitionElement?: HTMLElement;\n  visibleClass?: string;\n  onAfterShow?: () => void;\n  onAfterHide?: () => void;\n  onTransitionEnd?: (event: TransitionEvent) => void;\n}\n"]}

package/dist/collection/utils/popup.js

@@ -0,0 +1,95 @@
+/**
+ * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
+ * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
+ */
+export function adjustPopupForHoisting(hoist, popup, inputElement, wrapper, minPopupHeight, dropdownDirectionChanged) {
+    if (!hoist || popup == null || inputElement == null || wrapper == null) {
+        return;
+    }
+    // take a snapshot of normally rendered popup
+    const popupDimensions = setPopupAsFixPosition(popup);
+    const inputDimensions = inputElement.getBoundingClientRect();
+    const inputTop = inputDimensions.top;
+    const popupTop = popupDimensions.top;
+    const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);
+    // check screen position to check whether the popup should be moved above or below the trigger element
+    if (isUp && inputTop < popupTop) {
+        //  move popup above input field if datepicker is at bottom of screen
+        popup.style.top = `${popupTop - popupDimensions.height - inputDimensions.height}px`;
+    }
+    dropdownDirectionChanged(isUp);
+}
+/*
+ * For small screens the datepicker popup could be cut-off even though there might still be space within the viewport.
+ * This is because the popup is always aligned with the trigger input field. However in the scenario of small screens
+ * we should reposition the popup to use the space available.
+ */
+export function adjustPopupForSmallScreens(popup) {
+    // execute after dropdown has been rendered to make sure the popup reference is correctly set
+    setTimeout(() => {
+        if (popup == null) {
+            return;
+        }
+        const popupDimensions = popup.getBoundingClientRect();
+        if (popupDimensions.y < 0 &&
+            window.innerHeight - popupDimensions.height > 0 &&
+            Math.abs(popupDimensions.y) <= popupDimensions.height) {
+            // handle case where popup is cut-off on top but there is still space available
+            setPopupAsFixPosition(popup);
+            popup.style.top = '0px';
+        }
+        else if (window.innerHeight < popupDimensions.y + popupDimensions.height &&
+            window.innerHeight > popupDimensions.height &&
+            Math.abs(popupDimensions.y - window.innerHeight) <= popupDimensions.height) {
+            // handle case where popup is cut-off at the bottom but there is still space available above
+            // apply screen position to fixed popup
+            setPopupAsFixPosition(popup);
+            popup.style.top = `${window.innerHeight - popupDimensions.height}px`;
+        }
+        if (window.innerWidth < popupDimensions.x + popupDimensions.width &&
+            window.innerWidth > popupDimensions.width &&
+            Math.abs(popupDimensions.x - window.innerWidth) <= popupDimensions.width) {
+            // handle case where popup is cut-off to the right
+            setPopupAsFixPosition(popup);
+            popup.style.left = `${window.innerWidth - popupDimensions.width}px`;
+        }
+    }, 0);
+}
+export function calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight) {
+    const inputBoundingRect = inputElement.getBoundingClientRect();
+    const wrapperBoundingRect = wrapper.getBoundingClientRect();
+    const popupHeight = Math.max(wrapperBoundingRect.height, minPopupHeight);
+    const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;
+    return moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + popupHeight;
+}
+export function setPopupAsFixPosition(popup) {
+    const popupDimensions = popup.getBoundingClientRect();
+    popup.style.position = 'fixed';
+    popup.style.top = popupDimensions['top'] + 'px';
+    popup.style.left = popupDimensions['left'] + 'px';
+    popup.style.width = popupDimensions['width'] + 'px';
+    popup.style.minHeight = 'fit-content';
+    return popupDimensions;
+}
+/*
+ * The position of the hoisted datepicker needs to be correctly calculated since the position changes to fixed.
+ * Thus if the user scrolls or adjusts the screen size we need to recalculate the datepicker position.
+ */
+export function movePopup(hoist, open, popup, inputElement, wrapper, minPopupHeight) {
+    if (!hoist || !open || popup == null || inputElement == null || wrapper == null) {
+        return;
+    }
+    const popupBoundingClientRect = popup.getBoundingClientRect();
+    const popupHeight = popupBoundingClientRect.height;
+    const inputBoundingClientRect = inputElement.getBoundingClientRect();
+    const inputTop = inputBoundingClientRect.top;
+    const inputHeight = inputBoundingClientRect.height;
+    const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);
+    if (isUp) {
+        popup.style.top = `${inputTop - popupHeight}px`;
+    }
+    else {
+        popup.style.top = `${inputTop + inputHeight}px`;
+    }
+}
+//# sourceMappingURL=popup.js.map

package/dist/collection/utils/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","sourceRoot":"","sources":["../../src/utils/popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.\n * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup\n */\nexport function adjustPopupForHoisting(\n  hoist: boolean,\n  popup: HTMLElement | undefined,\n  inputElement: HTMLElement | undefined,\n  wrapper: HTMLElement | undefined,\n  minPopupHeight: number,\n  dropdownDirectionChanged: (isUp: boolean) => void\n) {\n  if (!hoist || popup == null || inputElement == null || wrapper == null) {\n    return;\n  }\n  // take a snapshot of normally rendered popup\n  const popupDimensions = setPopupAsFixPosition(popup);\n  const inputDimensions = inputElement.getBoundingClientRect();\n  const inputTop = inputDimensions.top;\n  const popupTop = popupDimensions.top;\n\n  const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);\n  // check screen position to check whether the popup should be moved above or below the trigger element\n  if (isUp && inputTop < popupTop) {\n    //  move popup above input field if datepicker is at bottom of screen\n    popup.style.top = `${popupTop - popupDimensions.height - inputDimensions.height}px`;\n  }\n  dropdownDirectionChanged(isUp);\n}\n\n/*\n * For small screens the datepicker popup could be cut-off even though there might still be space within the viewport.\n * This is because the popup is always aligned with the trigger input field. However in the scenario of small screens\n * we should reposition the popup to use the space available.\n */\nexport function adjustPopupForSmallScreens(popup?: HTMLElement) {\n  // execute after dropdown has been rendered to make sure the popup reference is correctly set\n  setTimeout(() => {\n    if (popup == null) {\n      return;\n    }\n    const popupDimensions = popup.getBoundingClientRect();\n    if (\n      popupDimensions.y < 0 &&\n      window.innerHeight - popupDimensions.height > 0 &&\n      Math.abs(popupDimensions.y) <= popupDimensions.height\n    ) {\n      // handle case where popup is cut-off on top but there is still space available\n      setPopupAsFixPosition(popup);\n      popup.style.top = '0px';\n    } else if (\n      window.innerHeight < popupDimensions.y + popupDimensions.height &&\n      window.innerHeight > popupDimensions.height &&\n      Math.abs(popupDimensions.y - window.innerHeight) <= popupDimensions.height\n    ) {\n      // handle case where popup is cut-off at the bottom but there is still space available above\n      // apply screen position to fixed popup\n      setPopupAsFixPosition(popup);\n      popup.style.top = `${window.innerHeight - popupDimensions.height}px`;\n    }\n\n    if (\n      window.innerWidth < popupDimensions.x + popupDimensions.width &&\n      window.innerWidth > popupDimensions.width &&\n      Math.abs(popupDimensions.x - window.innerWidth) <= popupDimensions.width\n    ) {\n      // handle case where popup is cut-off to the right\n      setPopupAsFixPosition(popup);\n      popup.style.left = `${window.innerWidth - popupDimensions.width}px`;\n    }\n  }, 0);\n}\n\nexport function calcIsDropDownContentUp(\n  inputElement: HTMLElement,\n  wrapper: HTMLElement,\n  minPopupHeight: number\n): boolean {\n  const inputBoundingRect = inputElement.getBoundingClientRect();\n  const wrapperBoundingRect = wrapper.getBoundingClientRect();\n  const popupHeight = Math.max(wrapperBoundingRect.height, minPopupHeight);\n  const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n  return moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + popupHeight;\n}\n\nexport function setPopupAsFixPosition(popup: HTMLElement): DOMRect {\n  const popupDimensions = popup.getBoundingClientRect();\n  popup.style.position = 'fixed';\n  popup.style.top = popupDimensions['top'] + 'px';\n  popup.style.left = popupDimensions['left'] + 'px';\n  popup.style.width = popupDimensions['width'] + 'px';\n  popup.style.minHeight = 'fit-content';\n  return popupDimensions;\n}\n\n/*\n * The position of the hoisted datepicker needs to be correctly calculated since the position changes to fixed.\n * Thus if the user scrolls or adjusts the screen size we need to recalculate the datepicker position.\n */\nexport function movePopup(\n  hoist: boolean,\n  open: boolean,\n  popup: HTMLElement | undefined,\n  inputElement: HTMLElement | undefined,\n  wrapper: HTMLElement | undefined,\n  minPopupHeight: number\n) {\n  if (!hoist || !open || popup == null || inputElement == null || wrapper == null) {\n    return;\n  }\n  const popupBoundingClientRect = popup.getBoundingClientRect();\n  const popupHeight = popupBoundingClientRect.height;\n  const inputBoundingClientRect = inputElement.getBoundingClientRect();\n  const inputTop = inputBoundingClientRect.top;\n  const inputHeight = inputBoundingClientRect.height;\n\n  const isUp = calcIsDropDownContentUp(inputElement, wrapper, minPopupHeight);\n\n  if (isUp) {\n    popup.style.top = `${inputTop - popupHeight}px`;\n  } else {\n    popup.style.top = `${inputTop + inputHeight}px`;\n  }\n}\n"]}

package/dist/collection/utils/scroll.js

@@ -0,0 +1,48 @@
+import { getOffset } from "./offset";
+const locks = new Set();
+//
+// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+// without premature unlocking.
+//
+export function lockBodyScrolling(lockingEl) {
+    locks.add(lockingEl);
+    document.body.classList.add('six-scroll-lock');
+}
+//
+// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+//
+export function unlockBodyScrolling(lockingEl) {
+    locks.delete(lockingEl);
+    if (locks.size === 0) {
+        document.body.classList.remove('six-scroll-lock');
+    }
+}
+//
+// Scrolls an element into view of its container. If the element is already in view, nothing will happen.
+//
+export function scrollIntoView(element, container, direction = 'vertical', behavior = 'smooth') {
+    const offset = getOffset(element, container);
+    const offsetTop = offset.top + container.scrollTop;
+    const offsetLeft = offset.left + container.scrollLeft;
+    const minX = container.scrollLeft;
+    const maxX = container.scrollLeft + container.offsetWidth;
+    const minY = container.scrollTop;
+    const maxY = container.scrollTop + container.offsetHeight;
+    if (direction === 'horizontal' || direction === 'both') {
+        if (offsetLeft < minX) {
+            container.scrollTo({ left: offsetLeft, behavior });
+        }
+        else if (offsetLeft + element.clientWidth > maxX) {
+            container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+        }
+    }
+    if (direction === 'vertical' || direction === 'both') {
+        if (offsetTop < minY) {
+            container.scrollTo({ top: offsetTop, behavior });
+        }
+        else if (offsetTop + element.clientHeight > maxY) {
+            container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+        }
+    }
+}
+//# sourceMappingURL=scroll.js.map

package/dist/collection/utils/scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB,EAAE;AACF,qHAAqH;AACrH,+BAA+B;AAC/B,EAAE;AACF,MAAM,UAAU,iBAAiB,CAAC,SAAsB;IACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AACjD,CAAC;AAED,EAAE;AACF,oHAAoH;AACpH,EAAE;AACF,MAAM,UAAU,mBAAmB,CAAC,SAAsB;IACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;KACnD;AACH,CAAC;AAED,EAAE;AACF,yGAAyG;AACzG,EAAE;AACF,MAAM,UAAU,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA8B,QAAQ;IAEtC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;IACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;IACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;IAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;IAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;IACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;IAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;QACtD,IAAI,UAAU,GAAG,IAAI,EAAE;YACrB,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;SACpD;aAAM,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,EAAE;YAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;SAClG;KACF;IAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;QACpD,IAAI,SAAS,GAAG,IAAI,EAAE;YACpB,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;SAClD;aAAM,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;YAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC;SAClG;KACF;AACH,CAAC","sourcesContent":["import { getOffset } from './offset';\n\nconst locks = new Set();\n\n//\n// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n// without premature unlocking.\n//\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('six-scroll-lock');\n}\n\n//\n// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n//\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('six-scroll-lock');\n  }\n}\n\n//\n// Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n//\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"]}

package/dist/collection/utils/scroll.spec.js

@@ -0,0 +1,122 @@
+import { scrollIntoView } from "./scroll";
+describe('scrollIntoView', () => {
+    describe('vertical scrolling', () => {
+        it('should scroll vertically if element is out of view', async () => {
+            // given
+            const element = {
+                clientWidth: 320,
+                clientHeight: 56,
+                getBoundingClientRect: () => ({
+                    top: 1744,
+                    left: 16,
+                }),
+            };
+            const mockScrollTo = jest.fn();
+            const container = {
+                scrollTop: 0,
+                scrollLeft: 0,
+                offsetWidth: 320,
+                offsetHeight: 754,
+                getBoundingClientRect: () => ({
+                    top: 656,
+                    left: 16,
+                }),
+                scrollTo: mockScrollTo,
+            };
+            // when
+            scrollIntoView(element, container);
+            // then
+            expect(mockScrollTo).toHaveBeenCalledWith({
+                top: 390,
+                behavior: 'smooth',
+            });
+        });
+        it('should not scroll vertically if element is in view', async () => {
+            // given
+            const element = {
+                clientWidth: 320,
+                clientHeight: 56,
+                getBoundingClientRect: () => ({
+                    top: 700,
+                    left: 16,
+                }),
+            };
+            const mockScrollTo = jest.fn();
+            const container = {
+                scrollTop: 0,
+                scrollLeft: 0,
+                offsetWidth: 320,
+                offsetHeight: 754,
+                getBoundingClientRect: () => ({
+                    top: 656,
+                    left: 16,
+                }),
+                scrollTo: mockScrollTo,
+            };
+            // when
+            scrollIntoView(element, container);
+            // then
+            expect(mockScrollTo).not.toHaveBeenCalled();
+        });
+    });
+    describe('horizontal scrolling', () => {
+        it('should scroll horizontally if element is out of view', async () => {
+            // given
+            const element = {
+                clientWidth: 320,
+                clientHeight: 56,
+                getBoundingClientRect: () => ({
+                    top: 500,
+                    left: 330,
+                }),
+            };
+            const mockScrollTo = jest.fn();
+            const container = {
+                scrollTop: 0,
+                scrollLeft: 0,
+                offsetWidth: 320,
+                offsetHeight: 754,
+                getBoundingClientRect: () => ({
+                    top: 656,
+                    left: 16,
+                }),
+                scrollTo: mockScrollTo,
+            };
+            // when
+            scrollIntoView(element, container, 'horizontal');
+            // then
+            expect(mockScrollTo).toHaveBeenCalledWith({
+                left: 314,
+                behavior: 'smooth',
+            });
+        });
+        it('should not scroll vertically if element is in view', async () => {
+            // given
+            const element = {
+                clientWidth: 320,
+                clientHeight: 56,
+                getBoundingClientRect: () => ({
+                    top: 500,
+                    left: 16,
+                }),
+            };
+            const mockScrollTo = jest.fn();
+            const container = {
+                scrollTop: 0,
+                scrollLeft: 0,
+                offsetWidth: 320,
+                offsetHeight: 754,
+                getBoundingClientRect: () => ({
+                    top: 656,
+                    left: 16,
+                }),
+                scrollTo: mockScrollTo,
+            };
+            // when
+            scrollIntoView(element, container, 'horizontal');
+            // then
+            expect(mockScrollTo).not.toHaveBeenCalled();
+        });
+    });
+});
+//# sourceMappingURL=scroll.spec.js.map

package/dist/collection/utils/scroll.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.spec.js","sourceRoot":"","sources":["../../src/utils/scroll.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAClC,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;YAClE,QAAQ;YACR,MAAM,OAAO,GAAyB;gBACpC,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,EAAE;gBAChB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,IAAI;oBACT,IAAI,EAAE,EAAE;iBACG,CAAA;aAChB,CAAC;YAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,SAAS,GAAyB;gBACtC,SAAS,EAAE,CAAC;gBACZ,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,GAAG;gBACjB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,EAAE;iBACG,CAAA;gBACf,QAAQ,EAAE,YAAY;aACvB,CAAC;YAEF,OAAO;YACP,cAAc,CAAC,OAAsB,EAAE,SAAwB,CAAC,CAAC;YAEjE,OAAO;YACP,MAAM,CAAC,YAAY,CAAC,CAAC,oBAAoB,CAAC;gBACxC,GAAG,EAAE,GAAG;gBACR,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;YAClE,QAAQ;YACR,MAAM,OAAO,GAAyB;gBACpC,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,EAAE;gBAChB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,EAAE;iBACG,CAAA;aAChB,CAAC;YAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,SAAS,GAAyB;gBACtC,SAAS,EAAE,CAAC;gBACZ,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,GAAG;gBACjB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,EAAE;iBACG,CAAA;gBACf,QAAQ,EAAE,YAAY;aACvB,CAAC;YAEF,OAAO;YACP,cAAc,CAAC,OAAsB,EAAE,SAAwB,CAAC,CAAC;YAEjE,OAAO;YACP,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;QACpC,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;YACpE,QAAQ;YACR,MAAM,OAAO,GAAyB;gBACpC,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,EAAE;gBAChB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,GAAG;iBACE,CAAA;aAChB,CAAC;YAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,SAAS,GAAyB;gBACtC,SAAS,EAAE,CAAC;gBACZ,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,GAAG;gBACjB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,EAAE;iBACG,CAAA;gBACf,QAAQ,EAAE,YAAY;aACvB,CAAC;YAEF,OAAO;YACP,cAAc,CAAC,OAAsB,EAAE,SAAwB,EAAE,YAAY,CAAC,CAAC;YAE/E,OAAO;YACP,MAAM,CAAC,YAAY,CAAC,CAAC,oBAAoB,CAAC;gBACxC,IAAI,EAAE,GAAG;gBACT,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;YAClE,QAAQ;YACR,MAAM,OAAO,GAAyB;gBACpC,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,EAAE;gBAChB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,EAAE;iBACG,CAAA;aAChB,CAAC;YAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,SAAS,GAAyB;gBACtC,SAAS,EAAE,CAAC;gBACZ,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,GAAG;gBACjB,qBAAqB,EAAE,GAAG,EAAE,CAC1B,CAAC;oBACC,GAAG,EAAE,GAAG;oBACR,IAAI,EAAE,EAAE;iBACG,CAAA;gBACf,QAAQ,EAAE,YAAY;aACvB,CAAC;YAEF,OAAO;YACP,cAAc,CAAC,OAAsB,EAAE,SAAwB,EAAE,YAAY,CAAC,CAAC;YAE/E,OAAO;YACP,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { scrollIntoView } from './scroll';\n\ndescribe('scrollIntoView', () => {\n  describe('vertical scrolling', () => {\n    it('should scroll vertically if element is out of view', async () => {\n      // given\n      const element: Partial<HTMLElement> = {\n        clientWidth: 320,\n        clientHeight: 56,\n        getBoundingClientRect: () =>\n          ({\n            top: 1744,\n            left: 16,\n          } as DOMRect),\n      };\n\n      const mockScrollTo = jest.fn();\n      const container: Partial<HTMLElement> = {\n        scrollTop: 0,\n        scrollLeft: 0,\n        offsetWidth: 320,\n        offsetHeight: 754,\n        getBoundingClientRect: () =>\n          ({\n            top: 656,\n            left: 16,\n          } as DOMRect),\n        scrollTo: mockScrollTo,\n      };\n\n      // when\n      scrollIntoView(element as HTMLElement, container as HTMLElement);\n\n      // then\n      expect(mockScrollTo).toHaveBeenCalledWith({\n        top: 390,\n        behavior: 'smooth',\n      });\n    });\n\n    it('should not scroll vertically if element is in view', async () => {\n      // given\n      const element: Partial<HTMLElement> = {\n        clientWidth: 320,\n        clientHeight: 56,\n        getBoundingClientRect: () =>\n          ({\n            top: 700,\n            left: 16,\n          } as DOMRect),\n      };\n\n      const mockScrollTo = jest.fn();\n      const container: Partial<HTMLElement> = {\n        scrollTop: 0,\n        scrollLeft: 0,\n        offsetWidth: 320,\n        offsetHeight: 754,\n        getBoundingClientRect: () =>\n          ({\n            top: 656,\n            left: 16,\n          } as DOMRect),\n        scrollTo: mockScrollTo,\n      };\n\n      // when\n      scrollIntoView(element as HTMLElement, container as HTMLElement);\n\n      // then\n      expect(mockScrollTo).not.toHaveBeenCalled();\n    });\n  });\n\n  describe('horizontal scrolling', () => {\n    it('should scroll horizontally if element is out of view', async () => {\n      // given\n      const element: Partial<HTMLElement> = {\n        clientWidth: 320,\n        clientHeight: 56,\n        getBoundingClientRect: () =>\n          ({\n            top: 500,\n            left: 330,\n          } as DOMRect),\n      };\n\n      const mockScrollTo = jest.fn();\n      const container: Partial<HTMLElement> = {\n        scrollTop: 0,\n        scrollLeft: 0,\n        offsetWidth: 320,\n        offsetHeight: 754,\n        getBoundingClientRect: () =>\n          ({\n            top: 656,\n            left: 16,\n          } as DOMRect),\n        scrollTo: mockScrollTo,\n      };\n\n      // when\n      scrollIntoView(element as HTMLElement, container as HTMLElement, 'horizontal');\n\n      // then\n      expect(mockScrollTo).toHaveBeenCalledWith({\n        left: 314,\n        behavior: 'smooth',\n      });\n    });\n\n    it('should not scroll vertically if element is in view', async () => {\n      // given\n      const element: Partial<HTMLElement> = {\n        clientWidth: 320,\n        clientHeight: 56,\n        getBoundingClientRect: () =>\n          ({\n            top: 500,\n            left: 16,\n          } as DOMRect),\n      };\n\n      const mockScrollTo = jest.fn();\n      const container: Partial<HTMLElement> = {\n        scrollTop: 0,\n        scrollLeft: 0,\n        offsetWidth: 320,\n        offsetHeight: 754,\n        getBoundingClientRect: () =>\n          ({\n            top: 656,\n            left: 16,\n          } as DOMRect),\n        scrollTo: mockScrollTo,\n      };\n\n      // when\n      scrollIntoView(element as HTMLElement, container as HTMLElement, 'horizontal');\n\n      // then\n      expect(mockScrollTo).not.toHaveBeenCalled();\n    });\n  });\n});\n"]}

package/dist/collection/utils/slot.js

@@ -0,0 +1,44 @@
+//
+// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+// string. This is useful because we can't use slot.textContent as an alternative.
+//
+export function getTextContent(slot) {
+    const nodes = slot != null ? slot.assignedNodes({ flatten: true }) : [];
+    let text = '';
+    [...nodes].map((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent;
+        }
+    });
+    return text;
+}
+//
+// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
+// slot, otherwise it will look for a "default" slot (e.g. a non-empty text node or an element with no slot attribute).
+//
+export function hasSlot(el, name) {
+    // Look for a named slot
+    if (name != null && name !== '') {
+        return el.querySelector(`[slot="${name}"]`) !== null;
+    }
+    // Look for a default slot
+    return Array.from(el.childNodes).some((node) => {
+        var _a;
+        if (node.nodeType === node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '') {
+            return true;
+        }
+        if (node.nodeType === node.ELEMENT_NODE) {
+            const el = node;
+            if (!el.hasAttribute('slot')) {
+                return true;
+            }
+        }
+        return false;
+    });
+}
+export function getSlot(element, slotName) {
+    if (element == null)
+        return null;
+    return element.querySelector(`[slot="${slotName}"]`);
+}
+//# sourceMappingURL=slot.js.map

package/dist/collection/utils/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","sourceRoot":"","sources":["../../src/utils/slot.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,kHAAkH;AAClH,kFAAkF;AAClF,EAAE;AACF,MAAM,UAAU,cAAc,CAAC,IAAsB;IACnD,MAAM,KAAK,GAAG,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACxE,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;YACpC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;SAC1B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC;AAED,EAAE;AACF,mHAAmH;AACnH,uHAAuH;AACvH,EAAE;AACF,MAAM,UAAU,OAAO,CAAC,EAAe,EAAE,IAAa;IACpD,wBAAwB;IACxB,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,EAAE,EAAE;QAC/B,OAAO,EAAE,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;KACtD;IAED,0BAA0B;IAC1B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;;QAC7C,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,MAAK,EAAE,EAAE;YACvE,OAAO,IAAI,CAAC;SACb;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;YACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;YAC/B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;gBAC5B,OAAO,IAAI,CAAC;aACb;SACF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,OAAsC,EAAE,QAAgB;IAC9E,IAAI,OAAO,IAAI,IAAI;QAAE,OAAO,IAAI,CAAC;IACjC,OAAO,OAAO,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAC;AACvD,CAAC","sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot?: HTMLSlotElement): string {\n  const nodes = slot != null ? slot.assignedNodes({ flatten: true }) : [];\n  let text = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string): boolean {\n  // Look for a named slot\n  if (name != null && name !== '') {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(el.childNodes).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function getSlot(element: ParentNode | null | undefined, slotName: string): HTMLElement | null {\n  if (element == null) return null;\n  return element.querySelector(`[slot=\"${slotName}\"]`);\n}\n"]}

package/dist/collection/utils/support.js

@@ -0,0 +1,16 @@
+//
+// Determines if the browser supports focus({ preventScroll })
+//
+export const isPreventScrollSupported = () => {
+    let supported = false;
+    const element = document.createElement('div');
+    element.focus &&
+        element.focus({
+            get preventScroll() {
+                supported = true;
+                return false;
+            },
+        });
+    return supported;
+};
+//# sourceMappingURL=support.js.map

package/dist/collection/utils/support.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"support.js","sourceRoot":"","sources":["../../src/utils/support.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,8DAA8D;AAC9D,EAAE;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,KAAK;QACX,OAAO,CAAC,KAAK,CAAC;YACZ,IAAI,aAAa;gBACf,SAAS,GAAG,IAAI,CAAC;gBACjB,OAAO,KAAK,CAAC;YACf,CAAC;SACF,CAAC,CAAC;IAEL,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["//\n// Determines if the browser supports focus({ preventScroll })\n//\nexport const isPreventScrollSupported = () => {\n  let supported = false;\n\n  const element = document.createElement('div');\n  element.focus &&\n    element.focus({\n      get preventScroll() {\n        supported = true;\n        return false;\n      },\n    });\n\n  return supported;\n};\n"]}

package/dist/collection/utils/tabbable.js

@@ -0,0 +1,23 @@
+export function isTabbable(el) {
+    const tabIndex = el.tabIndex;
+    return tabIndex > -1;
+}
+export function getNearestTabbableElement(el) {
+    // Check the element
+    if (isTabbable(el)) {
+        return el;
+    }
+    // Check the element's shadow root
+    if (el.shadowRoot != null) {
+        const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e));
+        if (tabbableShadowChild != null) {
+            return tabbableShadowChild;
+        }
+    }
+    // Check the element's children
+    if (el.children != null) {
+        return [...el.children].map((e) => getNearestTabbableElement(e)).at(0);
+    }
+    return undefined;
+}
+//# sourceMappingURL=tabbable.js.map

package/dist/collection/utils/tabbable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../src/utils/tabbable.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAC,EAAe;IACxC,MAAM,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC;IAC7B,OAAO,QAAQ,GAAG,CAAC,CAAC,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,EAAe;IACvD,oBAAoB;IACpB,IAAI,UAAU,CAAC,EAAE,CAAC,EAAE;QAClB,OAAO,EAAE,CAAC;KACX;IAED,kCAAkC;IAClC,IAAI,EAAE,CAAC,UAAU,IAAI,IAAI,EAAE;QACzB,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAgB,CAAC,CAAgB,CAAC;QACjH,IAAI,mBAAmB,IAAI,IAAI,EAAE;YAC/B,OAAO,mBAAmB,CAAC;SAC5B;KACF;IAED,+BAA+B;IAC/B,IAAI,EAAE,CAAC,QAAQ,IAAI,IAAI,EAAE;QACvB,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KACvF;IAED,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["export function isTabbable(el: HTMLElement) {\n  const tabIndex = el.tabIndex;\n  return tabIndex > -1;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement | undefined {\n  // Check the element\n  if (isTabbable(el)) {\n    return el;\n  }\n\n  // Check the element's shadow root\n  if (el.shadowRoot != null) {\n    const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e as HTMLElement)) as HTMLElement;\n    if (tabbableShadowChild != null) {\n      return tabbableShadowChild;\n    }\n  }\n\n  // Check the element's children\n  if (el.children != null) {\n    return [...el.children].map((e) => getNearestTabbableElement(e as HTMLElement)).at(0);\n  }\n\n  return undefined;\n}\n"]}