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

package/dist/collection/utils/event-listeners.js

@@ -1,39 +1,39 @@
-const equals = (a) => (b) => Object.keys(a).every((key) => a[key] === b[key]);
-export class EventListeners {
-  constructor() {
-    this.eventListeners = [];
-    this.add = (el, name, listener, identifier = null) => {
-      this.eventListeners.push({ el, name, listener, identifier });
-      el.addEventListener(name, listener);
-    };
-    this.remove = (el, name, listener) => {
-      const sameItem = equals({ el, name, listener });
-      this.eventListeners = this.getFilteredEventListeners(sameItem);
-    };
-    this.removeByIdentifier = (identifier) => {
-      const sameItem = (el) => el.identifier === identifier;
-      const foundListener = this.eventListeners.find(sameItem) !== undefined;
-      if (!foundListener) {
-        return;
-      }
-      this.eventListeners = this.getFilteredEventListeners(sameItem);
-    };
-    this.removeAll = () => {
-      while (this.eventListeners.length) {
-        const { el, name, listener } = this.eventListeners.pop();
-        el.removeEventListener(name, listener);
-      }
-    };
-  }
-  getFilteredEventListeners(sameItem) {
-    return this.eventListeners.filter((item) => {
-      if (sameItem(item)) {
-        item.el.removeEventListener(item.name, item.listener);
-        return false;
-      }
-      else {
-        return true;
-      }
-    });
-  }
-}
+const equals = (a) => (b) => Object.keys(a).every((key) => a[key] === b[key]);
+export class EventListeners {
+  constructor() {
+    this.eventListeners = [];
+    this.add = (el, name, listener, identifier = null) => {
+      this.eventListeners.push({ el, name, listener, identifier });
+      el.addEventListener(name, listener);
+    };
+    this.remove = (el, name, listener) => {
+      const sameItem = equals({ el, name, listener });
+      this.eventListeners = this.getFilteredEventListeners(sameItem);
+    };
+    this.removeByIdentifier = (identifier) => {
+      const sameItem = (el) => el.identifier === identifier;
+      const foundListener = this.eventListeners.find(sameItem) !== undefined;
+      if (!foundListener) {
+        return;
+      }
+      this.eventListeners = this.getFilteredEventListeners(sameItem);
+    };
+    this.removeAll = () => {
+      while (this.eventListeners.length) {
+        const { el, name, listener } = this.eventListeners.pop();
+        el.removeEventListener(name, listener);
+      }
+    };
+  }
+  getFilteredEventListeners(sameItem) {
+    return this.eventListeners.filter((item) => {
+      if (sameItem(item)) {
+        item.el.removeEventListener(item.name, item.listener);
+        return false;
+      }
+      else {
+        return true;
+      }
+    });
+  }
+}

package/dist/collection/utils/execution-control.js

@@ -1,38 +1,38 @@
-export const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;
-export const DEFAULT_DEBOUNCE_VERY_FAST = 100;
-export const DEFAULT_DEBOUNCE_FAST = 300;
-export const DEFAULT_DEBOUNCE_SLOW = 600;
-/**
- * Debounce function to implement a timeframe to wait for no new changes before executing a callback
-
- *  example usages:
- *    debounce(() => saveInput());
- *    debounce(() => saveInput(), 750);
- *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));
- *
- *  regarding default timeout check https://lawsofux.com/doherty-threshold/
- *
- * @param callback
- * @param timeout
- */
-export const debounce = (callback, timeout = DEFAULT_DEBOUNCE_FAST) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => callback.apply(this, args), timeout);
-  };
-};
-/**
- * Debounce an event
- *
- * @param event
- * @param timeout
- */
-export const debounceEvent = (event, timeout) => {
-  const original = event._original || event;
-  const emit = debounce(original.emit.bind(original), timeout);
-  return {
-    _original: event,
-    emit: emit,
-  };
-};
+export const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;
+export const DEFAULT_DEBOUNCE_VERY_FAST = 100;
+export const DEFAULT_DEBOUNCE_FAST = 300;
+export const DEFAULT_DEBOUNCE_SLOW = 600;
+/**
+ * Debounce function to implement a timeframe to wait for no new changes before executing a callback
+
+ *  example usages:
+ *    debounce(() => saveInput());
+ *    debounce(() => saveInput(), 750);
+ *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));
+ *
+ *  regarding default timeout check https://lawsofux.com/doherty-threshold/
+ *
+ * @param callback
+ * @param timeout
+ */
+export const debounce = (callback, timeout = DEFAULT_DEBOUNCE_FAST) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback.apply(this, args), timeout);
+  };
+};
+/**
+ * Debounce an event
+ *
+ * @param event
+ * @param timeout
+ */
+export const debounceEvent = (event, timeout) => {
+  const original = event._original || event;
+  const emit = debounce(original.emit.bind(original), timeout);
+  return {
+    _original: event,
+    emit: emit,
+  };
+};

package/dist/collection/utils/focus-visible.js

@@ -1,41 +1,41 @@
-//
-// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
-// `focus-visible` class. Works at the component level so no global polyfill is necessary.
-//
-// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible
-//
-const listeners = new WeakMap();
-export function observe(el) {
-  if (!el)
-    return;
-  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
-  const is = (event) => {
-    if (keys.includes(event.key)) {
-      el.classList.add('focus-visible');
-    }
-  };
-  const isNot = () => el.classList.remove('focus-visible');
-  listeners.set(el, { is, isNot });
-  el.addEventListener('keydown', is);
-  el.addEventListener('keyup', is);
-  el.addEventListener('mousedown', isNot);
-  el.addEventListener('mousedown', isNot);
-}
-export function unobserve(el) {
-  if (!el)
-    return;
-  const listener = listeners.get(el);
-  if (!listener) {
-    return;
-  }
-  const { is, isNot } = listener;
-  el.classList.remove('focus-visible');
-  el.removeEventListener('keydown', is);
-  el.removeEventListener('keyup', is);
-  el.removeEventListener('mousedown', isNot);
-  el.removeEventListener('mousedown', isNot);
-}
-export const focusVisible = {
-  observe,
-  unobserve,
-};
+//
+// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
+// `focus-visible` class. Works at the component level so no global polyfill is necessary.
+//
+// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible
+//
+const listeners = new WeakMap();
+export function observe(el) {
+  if (!el)
+    return;
+  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
+  const is = (event) => {
+    if (keys.includes(event.key)) {
+      el.classList.add('focus-visible');
+    }
+  };
+  const isNot = () => el.classList.remove('focus-visible');
+  listeners.set(el, { is, isNot });
+  el.addEventListener('keydown', is);
+  el.addEventListener('keyup', is);
+  el.addEventListener('mousedown', isNot);
+  el.addEventListener('mousedown', isNot);
+}
+export function unobserve(el) {
+  if (!el)
+    return;
+  const listener = listeners.get(el);
+  if (!listener) {
+    return;
+  }
+  const { is, isNot } = listener;
+  el.classList.remove('focus-visible');
+  el.removeEventListener('keydown', is);
+  el.removeEventListener('keyup', is);
+  el.removeEventListener('mousedown', isNot);
+  el.removeEventListener('mousedown', isNot);
+}
+export const focusVisible = {
+  observe,
+  unobserve,
+};

package/dist/collection/utils/matchers.js

@@ -1,2 +1,2 @@
-export const equals = (expected) => (value) => value === expected;
-export const notEquals = (expected) => (value) => value !== expected;
+export const equals = (expected) => (value) => value === expected;
+export const notEquals = (expected) => (value) => value !== expected;

package/dist/collection/utils/modal.js

@@ -1,28 +1,28 @@
-let activeModals = [];
-export default class Modal {
-  constructor(element, options) {
-    this.element = element;
-    this.options = options;
-    this.handleFocusIn = this.handleFocusIn.bind(this);
-  }
-  activate() {
-    activeModals.push(this.element);
-    document.addEventListener('focusin', this.handleFocusIn);
-  }
-  deactivate() {
-    activeModals = activeModals.filter((modal) => modal !== this.element);
-    document.removeEventListener('focusin', this.handleFocusIn);
-  }
-  isActive() {
-    // The "active" modal is always the most recent one shown
-    return activeModals[activeModals.length - 1] === this.element;
-  }
-  handleFocusIn(event) {
-    const target = event.target;
-    const tagName = this.element.tagName.toLowerCase();
-    // If focus is lost while the modal is active, run the onFocusOut callback
-    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {
-      this.options.onFocusOut(event);
-    }
-  }
-}
+let activeModals = [];
+export default class Modal {
+  constructor(element, options) {
+    this.element = element;
+    this.options = options;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+  }
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener('focusin', this.handleFocusIn);
+  }
+  deactivate() {
+    activeModals = activeModals.filter((modal) => modal !== this.element);
+    document.removeEventListener('focusin', this.handleFocusIn);
+  }
+  isActive() {
+    // The "active" modal is always the most recent one shown
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+  handleFocusIn(event) {
+    const target = event.target;
+    const tagName = this.element.tagName.toLowerCase();
+    // If focus is lost while the modal is active, run the onFocusOut callback
+    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {
+      this.options.onFocusOut(event);
+    }
+  }
+}

package/dist/collection/utils/offset.js

@@ -1,13 +1,13 @@
-//
-// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
-// parent doesn't have to be positioned relative or absolute.
-//
-// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent
-// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
-//
-export function getOffset(element, parent) {
-  return {
-    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
-    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),
-  };
-}
+//
+// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+// parent doesn't have to be positioned relative or absolute.
+//
+// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent
+// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
+//
+export function getOffset(element, parent) {
+  return {
+    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),
+  };
+}

package/dist/collection/utils/popover.js

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

package/dist/collection/utils/scroll.js

@@ -1,47 +1,47 @@
-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 });
+    }
+  }
+}