@six-group/ui-library 0.0.0-insider.16b5866 → 0.0.0-insider.1a07fa6

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

@@ -1 +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"]}
+{"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

@@ -3,21 +3,21 @@
  * 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);
+    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.
@@ -25,71 +25,71 @@ export function adjustPopupForHoisting(hoist, popup, inputElement, wrapper, minP
  * 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);
+    // 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;
+    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.height = popupDimensions['height'] + 'px';
-  return popupDimensions;
+    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.height = popupDimensions['height'] + 'px';
+    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`;
-  }
+    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

@@ -1 +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.height = popupDimensions['height'] + 'px';\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"]}
+{"version":3,"file":"popup.js","sourceRoot":"","sources":["../../src/utils/popup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAc,EACd,KAA8B,EAC9B,YAAqC,EACrC,OAAgC,EAChC,cAAsB,EACtB,wBAAiD;IAEjD,IAAI,CAAC,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,YAAY,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,EAAE;QACtE,OAAO;KACR;IACD,6CAA6C;IAC7C,MAAM,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAC7D,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC;IACrC,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC;IAErC,MAAM,IAAI,GAAG,uBAAuB,CAAC,YAAY,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC;IAC5E,sGAAsG;IACtG,IAAI,IAAI,IAAI,QAAQ,GAAG,QAAQ,EAAE;QAC/B,qEAAqE;QACrE,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,IAAI,CAAC;KACrF;IACD,wBAAwB,CAAC,IAAI,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAC,KAAmB;IAC5D,6FAA6F;IAC7F,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,KAAK,IAAI,IAAI,EAAE;YACjB,OAAO;SACR;QACD,MAAM,eAAe,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QACtD,IACE,eAAe,CAAC,CAAC,GAAG,CAAC;YACrB,MAAM,CAAC,WAAW,GAAG,eAAe,CAAC,MAAM,GAAG,CAAC;YAC/C,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,MAAM,EACrD;YACA,+EAA+E;YAC/E,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;SACzB;aAAM,IACL,MAAM,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM;YAC/D,MAAM,CAAC,WAAW,GAAG,eAAe,CAAC,MAAM;YAC3C,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,eAAe,CAAC,MAAM,EAC1E;YACA,4FAA4F;YAC5F,uCAAuC;YACvC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7B,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,eAAe,CAAC,MAAM,IAAI,CAAC;SACtE;QAED,IACE,MAAM,CAAC,UAAU,GAAG,eAAe,CAAC,CAAC,GAAG,eAAe,CAAC,KAAK;YAC7D,MAAM,CAAC,UAAU,GAAG,eAAe,CAAC,KAAK;YACzC,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,eAAe,CAAC,KAAK,EACxE;YACA,kDAAkD;YAClD,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7B,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,MAAM,CAAC,UAAU,GAAG,eAAe,CAAC,KAAK,IAAI,CAAC;SACrE;IACH,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,YAAyB,EACzB,OAAoB,EACpB,cAAsB;IAEtB,MAAM,iBAAiB,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAC/D,MAAM,mBAAmB,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC5D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACzE,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC;IACpE,OAAO,cAAc,IAAI,MAAM,CAAC,WAAW,GAAG,iBAAiB,CAAC,MAAM,GAAG,WAAW,CAAC;AACvF,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,KAAkB;IACtD,MAAM,eAAe,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IACtD,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC/B,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAChD,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAClD,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IACpD,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,eAAe,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,eAAe,CAAC;AACzB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,SAAS,CACvB,KAAc,EACd,IAAa,EACb,KAA8B,EAC9B,YAAqC,EACrC,OAAgC,EAChC,cAAsB;IAEtB,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,YAAY,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,EAAE;QAC/E,OAAO;KACR;IACD,MAAM,uBAAuB,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAC9D,MAAM,WAAW,GAAG,uBAAuB,CAAC,MAAM,CAAC;IACnD,MAAM,uBAAuB,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;IACrE,MAAM,QAAQ,GAAG,uBAAuB,CAAC,GAAG,CAAC;IAC7C,MAAM,WAAW,GAAG,uBAAuB,CAAC,MAAM,CAAC;IAEnD,MAAM,IAAI,GAAG,uBAAuB,CAAC,YAAY,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC;IAE5E,IAAI,IAAI,EAAE;QACR,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,GAAG,WAAW,IAAI,CAAC;KACjD;SAAM;QACL,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,GAAG,WAAW,IAAI,CAAC;KACjD;AACH,CAAC","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.height = popupDimensions['height'] + 'px';\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

@@ -5,44 +5,44 @@ const locks = new Set();
 // without premature unlocking.
 //
 export function lockBodyScrolling(lockingEl) {
-  locks.add(lockingEl);
-  document.body.classList.add('six-scroll-lock');
+    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');
-  }
+    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 });
+    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 });
+        }
     }
-    else if (offsetTop + element.clientHeight > maxY) {
-      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, 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

@@ -1 +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"]}
+{"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

@@ -1,122 +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',
-      });
+    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();
+        });
     });
-    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();
+        });
     });
-  });
-  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