@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/collection/utils/popover.js

@@ -1,113 +1,114 @@
-//
-// 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: () => { },
-      onAfterHide: () => { },
-      onTransitionEnd: () => { },
-    }, options);
-    this.isVisible = false;
-    this.popover.hidden = true;
-    this.popover.classList.remove(this.options.visibleClass);
-    this.popover.addEventListener('transitionend', this.handleTransitionEnd);
-  }
-  handleTransitionEnd(event) {
-    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.
-      this.options.onTransitionEnd.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;
-        this.popover.classList.remove(this.options.visibleClass);
-        this.options.onAfterHide.call(this);
-      }
-    }
-  }
-  destroy() {
-    this.popover.removeEventListener('transitionend', this.handleTransitionEnd);
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-    }
-  }
-  show() {
-    this.isVisible = true;
-    this.popover.hidden = false;
-    this.popover.clientWidth; // force reflow
-    requestAnimationFrame(() => 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', () => this.options.onAfterShow.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() {
-    this.popper.update();
-  }
-  hide() {
-    // Apply the hidden styles and wait for the transition before hiding completely
-    this.isVisible = false;
-    this.popover.classList.remove(this.options.visibleClass);
-  }
-  setOptions(options) {
-    this.options = Object.assign(this.options, options);
-    this.isVisible
-      ? this.popover.classList.add(this.options.visibleClass)
-      : this.popover.classList.remove(this.options.visibleClass);
-    // Update popper options
-    if (this.popper) {
-      this.popper.setOptions({
-        placement: this.options.placement,
-        strategy: this.options.strategy,
-      });
-      requestAnimationFrame(() => this.popper.update());
-    }
-  }
-}
+//
+// 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: () => { },
+      onAfterHide: () => { },
+      onTransitionEnd: () => { },
+    }, options);
+    this.isVisible = false;
+    this.popover.hidden = true;
+    this.popover.classList.remove(this.options.visibleClass);
+    this.popover.addEventListener('transitionend', this.handleTransitionEnd);
+  }
+  handleTransitionEnd(event) {
+    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.
+      this.options.onTransitionEnd.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;
+        this.popover.classList.remove(this.options.visibleClass);
+        this.options.onAfterHide.call(this);
+      }
+    }
+  }
+  destroy() {
+    this.popover.removeEventListener('transitionend', this.handleTransitionEnd);
+    if (this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+    }
+  }
+  show() {
+    this.isVisible = true;
+    this.popover.hidden = false;
+    this.popover.clientWidth; // force reflow
+    requestAnimationFrame(() => 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', () => this.options.onAfterShow.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() {
+    this.popper.update();
+  }
+  hide() {
+    // Apply the hidden styles and wait for the transition before hiding completely
+    this.isVisible = false;
+    this.popover.classList.remove(this.options.visibleClass);
+  }
+  setOptions(options) {
+    this.options = Object.assign(this.options, options);
+    this.isVisible
+      ? this.popover.classList.add(this.options.visibleClass)
+      : this.popover.classList.remove(this.options.visibleClass);
+    // Update popper options
+    if (this.popper) {
+      this.popper.setOptions({
+        placement: this.options.placement,
+        strategy: this.options.strategy,
+      });
+      requestAnimationFrame(() => this.popper.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 } from '@popperjs/core';\nimport { PopperInstance } from './popper';\n\nexport default class Popover {\n  anchor: HTMLElement;\n  isVisible: boolean;\n  popover: HTMLElement;\n  popper: PopperInstance;\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: () => {},\n        onAfterHide: () => {},\n        onTransitionEnd: () => {},\n      },\n      options\n    );\n\n    this.isVisible = false;\n    this.popover.hidden = true;\n    this.popover.classList.remove(this.options.visibleClass);\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        this.popover.classList.remove(this.options.visibleClass);\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 = null;\n    }\n  }\n\n  show() {\n    this.isVisible = true;\n    this.popover.hidden = false;\n    this.popover.clientWidth; // force reflow\n    requestAnimationFrame(() => this.popover.classList.add(this.options.visibleClass));\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    this.popover.classList.remove(this.options.visibleClass);\n  }\n\n  setOptions(options: PopoverOptions) {\n    this.options = Object.assign(this.options, options);\n    this.isVisible\n      ? this.popover.classList.add(this.options.visibleClass)\n      : this.popover.classList.remove(this.options.visibleClass);\n\n    // Update popper options\n    if (this.popper) {\n      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?: () => any;\n  onAfterHide?: () => any;\n  onTransitionEnd?: (event: TransitionEvent) => any;\n}\n"]}

package/dist/collection/utils/scroll.js

@@ -1,47 +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 });
-    }
-  }
-}
+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;EACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;EACrB,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;EACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;EAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;IACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;GACnD;AACH,CAAC;AAED,EAAE;AACF,yGAAyG;AACzG,EAAE;AACF,MAAM,UAAU,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA8B,QAAQ;EAEtC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;EACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;EAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;EACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;EAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;IACtD,IAAI,UAAU,GAAG,IAAI,EAAE;MACrB,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;KACpD;SAAM,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,EAAE;MAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClG;GACF;EAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;IACpD,IAAI,SAAS,GAAG,IAAI,EAAE;MACpB,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClD;SAAM,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;MAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClG;GACF;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/slot.js

@@ -1,59 +1,60 @@
-//
-// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
-// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
-//
-export function getInnerHTML(slot) {
-  const nodes = slot.assignedNodes({ flatten: true });
-  let html = '';
-  [...nodes].map((node) => {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      html += node.outerHTML;
-    }
-    if (node.nodeType === Node.TEXT_NODE) {
-      html += node.textContent;
-    }
-  });
-  return html;
-}
-//
-// 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 ? 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) {
-    return el.querySelector(`[slot="${name}"]`) !== null;
-  }
-  // Look for a default slot
-  return Array.from(el.childNodes).some((node) => {
-    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
-      return true;
-    }
-    if (node.nodeType === node.ELEMENT_NODE) {
-      const el = node;
-      if (!el.hasAttribute('slot')) {
-        return true;
-      }
-    }
-    return false;
-  });
-}
-const fromPairs = (acc, [k, v]) => (Object.assign(Object.assign({}, acc), { [k]: v }));
-export const getAvailableSlots = (slots) => (host) => Object.values(slots)
-  .map((name) => [name, hasSlot(host, name)])
-  .reduce(fromPairs, {});
-export const getSlotChildren = (el) => { var _a; return (_a = el.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }); };
+//
+// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+//
+export function getInnerHTML(slot) {
+  const nodes = slot.assignedNodes({ flatten: true });
+  let html = '';
+  [...nodes].map((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      html += node.outerHTML;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      html += node.textContent;
+    }
+  });
+  return html;
+}
+//
+// 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 ? 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) {
+    return el.querySelector(`[slot="${name}"]`) !== null;
+  }
+  // Look for a default slot
+  return Array.from(el.childNodes).some((node) => {
+    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
+      return true;
+    }
+    if (node.nodeType === node.ELEMENT_NODE) {
+      const el = node;
+      if (!el.hasAttribute('slot')) {
+        return true;
+      }
+    }
+    return false;
+  });
+}
+const fromPairs = (acc, [k, v]) => (Object.assign(Object.assign({}, acc), { [k]: v }));
+export const getAvailableSlots = (slots) => (host) => Object.values(slots)
+  .map((name) => [name, hasSlot(host, name)])
+  .reduce(fromPairs, {});
+export const getSlotChildren = (el) => { var _a; return (_a = el.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }); };
+//# 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":"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","sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n// HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n//\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].map((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n//\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 ? 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) {\n  // Look for a named slot\n  if (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\ntype AvailableSlots<T> = { readonly [K in keyof T]: boolean };\n\nconst fromPairs = <T extends string>(acc, [k, v]: [T, boolean]) => ({ ...acc, [k]: v });\n\nexport const getAvailableSlots =\n  <T extends object>(slots: T) =>\n  <E extends HTMLElement>(host: E): AvailableSlots<T> =>\n    Object.values(slots)\n      .map((name) => [name, hasSlot(host, name)])\n      .reduce(fromPairs, {} as AvailableSlots<T>);\n\nexport const getSlotChildren = <T extends HTMLElement>(el: HTMLElement) =>\n  el.querySelector('slot')?.assignedElements({ flatten: true }) as T[];\n"]}

package/dist/collection/utils/support.js

@@ -1,15 +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;
-};
+//
+// 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;EAC3C,IAAI,SAAS,GAAG,KAAK,CAAC;EAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC9C,OAAO,CAAC,KAAK;IACX,OAAO,CAAC,KAAK,CAAC;MACZ,IAAI,aAAa;QACf,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,KAAK,CAAC;MACf,CAAC;KACF,CAAC,CAAC;EAEL,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

@@ -1,22 +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) {
-    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable);
-    if (tabbableShadowChild) {
-      return tabbableShadowChild;
-    }
-  }
-  // Check the element's children
-  if (el.children) {
-    return [...el.children].map(getNearestTabbableElement)[0];
-  }
-  return null;
-}
+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) {
+    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable);
+    if (tabbableShadowChild) {
+      return tabbableShadowChild;
+    }
+  }
+  // Check the element's children
+  if (el.children) {
+    return [...el.children].map(getNearestTabbableElement)[0];
+  }
+  return null;
+}
+//# 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;EACxC,MAAM,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC;EAC7B,OAAO,QAAQ,GAAG,CAAC,CAAC,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,EAAe;EACvD,oBAAoB;EACpB,IAAI,UAAU,CAAC,EAAE,CAAC,EAAE;IAClB,OAAO,EAAE,CAAC;GACX;EAED,kCAAkC;EAClC,IAAI,EAAE,CAAC,UAAU,EAAE;IACjB,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,UAAU,CAAgB,CAAC;IACxF,IAAI,mBAAmB,EAAE;MACvB,OAAO,mBAAmB,CAAC;KAC5B;GACF;EAED,+BAA+B;EAC/B,IAAI,EAAE,CAAC,QAAQ,EAAE;IACf,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;GAC3D;EAED,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["export function isTabbable(el: HTMLElement) {\n  const tabIndex = el.tabIndex;\n  return tabIndex > -1;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement {\n  // Check the element\n  if (isTabbable(el)) {\n    return el;\n  }\n\n  // Check the element's shadow root\n  if (el.shadowRoot) {\n    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable) as HTMLElement;\n    if (tabbableShadowChild) {\n      return tabbableShadowChild;\n    }\n  }\n\n  // Check the element's children\n  if (el.children) {\n    return [...el.children].map(getNearestTabbableElement)[0];\n  }\n\n  return null;\n}\n"]}