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

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

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

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

@@ -0,0 +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,
+  };
+};

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

@@ -0,0 +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,
+};

package/dist/collection/utils/matchers.js

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

package/dist/collection/utils/modal.js

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

package/dist/collection/utils/offset.js

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

package/dist/collection/utils/popover.js

@@ -0,0 +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());
+    }
+  }
+}

package/dist/collection/utils/scroll.js

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

package/dist/collection/utils/slot.js

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

package/dist/collection/utils/support.js

@@ -0,0 +1,15 @@
+//
+// 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;
+};

package/dist/collection/utils/tabbable.js

@@ -0,0 +1,22 @@
+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;
+}

package/dist/collection/utils/testing.js

@@ -0,0 +1,38 @@
+export const selectByTestId = async (page, testId) => {
+  const found = await page.evaluateHandle((testId) => {
+    const isSlotElement = (value) => value && value.tagName.toLowerCase() === 'slot';
+    const byTestId = (el) => {
+      var _a;
+      if (el.getAttribute('data-testid') === testId) {
+        return el;
+      }
+      if (isSlotElement(el)) {
+        for (const child of el.assignedElements({ flatten: true })) {
+          const found = byTestId(child);
+          if (found) {
+            return found;
+          }
+        }
+      }
+      for (const child of el.children || []) {
+        const found = byTestId(child);
+        if (found) {
+          return found;
+        }
+      }
+      for (const child of ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.children) || []) {
+        const found = byTestId(child);
+        if (found) {
+          return found;
+        }
+      }
+    };
+    return byTestId(document.body);
+  }, testId);
+  if (found) {
+    return found.asElement();
+  }
+  else {
+    return null;
+  }
+};

package/dist/collection/utils/time.util.js

@@ -0,0 +1,74 @@
+/*
+ * Returns the current time in the format of your choice
+ */
+import { SixTimePeriod, TIME_FORMAT_CHAR, TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP, } from '../components/six-timepicker/six-timepicker.types';
+export const getCurrentTimeIn24Hours = () => {
+  const now = new Date();
+  return {
+    hours: now.getHours(),
+    minutes: now.getMinutes(),
+    seconds: now.getSeconds(),
+    milliseconds: now.getMilliseconds(),
+    has24Hours: true,
+  };
+};
+const HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;
+export const getHoursIn12HourFormat = (hours) => hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;
+export const getCurrentTimeIn12Hours = () => {
+  const now = new Date();
+  const hours = now.getHours();
+  return {
+    hours: getHoursIn12HourFormat(hours),
+    minutes: now.getMinutes(),
+    seconds: now.getSeconds(),
+    milliseconds: now.getMilliseconds(),
+    has24Hours: false,
+    period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? SixTimePeriod.PM : SixTimePeriod.AM,
+  };
+};
+export const getCurrentTime = (has24Hours = true) => {
+  return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();
+};
+export const TIME_FORMAT_SEPARATOR = ':';
+export const isValidTimeString = (timeStr, format) => {
+  const timeStringParts = timeStr.split(TIME_FORMAT_SEPARATOR);
+  const timeFormatParts = format.split(TIME_FORMAT_SEPARATOR);
+  return timeStringParts.length === timeFormatParts.length;
+};
+export const parseTimeString = (timeStr, format) => {
+  const timeStringParts = timeStr.split(TIME_FORMAT_SEPARATOR);
+  const timeFormatParts = format.split(TIME_FORMAT_SEPARATOR);
+  if (!isValidTimeString(timeStr, format)) {
+    console.error(`Timestring did not match expected format.\nExpected format: ${format}\nReceived timestring: ${timeStr}`);
+  }
+  const sixTime = {};
+  timeStringParts.forEach((timeStringPart, i) => {
+    const formatStringPart = timeFormatParts[i];
+    const sixTimePropertyName = TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP[formatStringPart];
+    if (sixTimePropertyName !== undefined) {
+      if (formatStringPart === TIME_FORMAT_CHAR.PERIOD) {
+        sixTime.period = timeStringPart.toUpperCase() === SixTimePeriod.PM ? SixTimePeriod.PM : SixTimePeriod.AM;
+      }
+      else {
+        sixTime[sixTimePropertyName] = Number(timeStringPart);
+      }
+    }
+    if (formatStringPart === TIME_FORMAT_CHAR.HOUR_24) {
+      sixTime.has24Hours = true;
+    }
+    else if (formatStringPart === TIME_FORMAT_CHAR.HOUR_12) {
+      sixTime.has24Hours = false;
+    }
+  });
+  return sixTime;
+};
+export const createTimeString = (time, format) => {
+  return format
+    .split(TIME_FORMAT_SEPARATOR)
+    .map((timeFormatPart) => {
+    const sixTimePropertyName = TIME_FORMAT_CHAR_TO_SIX_TIME_PROPERTY_MAP[timeFormatPart];
+    const paddingLength = timeFormatPart === TIME_FORMAT_CHAR.MILLISECOND ? 3 : 2;
+    return String(time[sixTimePropertyName]).padStart(paddingLength, '0');
+  })
+    .join(TIME_FORMAT_SEPARATOR);
+};

package/dist/collection/utils/type-check.js

@@ -0,0 +1,5 @@
+export const isString = (value) => typeof value === 'string';
+// only use '==' instead of '===' to also catch undefined and void
+export const isNil = (value) => value == null;
+export const isDate = (value) => value instanceof Date;
+export const isNumber = (value) => value === 'number';

package/dist/collection/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/wrappers/set-attributes/set-attributes.js

@@ -0,0 +1,68 @@
+import { Component, Element, Watch, Prop, h } from '@stencil/core';
+export class SetAttributes {
+  constructor() {
+    /** Attributes map */
+    this.value = {};
+  }
+  componentWillLoad() {
+    this.injectAttrs();
+  }
+  attrsUpdated() {
+    this.injectAttrs();
+  }
+  injectAttrs() {
+    const slot = this.host.firstElementChild;
+    if (typeof (slot === null || slot === void 0 ? void 0 : slot.assignedElements) !== 'function') {
+      return;
+    }
+    const child = slot.assignedElements().pop();
+    if (!child) {
+      return;
+    }
+    const types = {
+      // no need for function and bigint
+      undefined: (key) => child.removeAttribute(key),
+      boolean: (key, value) => {
+        if (value) {
+          child.setAttribute(key, '');
+        }
+        else {
+          child.removeAttribute(key);
+        }
+      },
+      number: (key, value) => child.setAttribute(key, value),
+      string: (key, value) => child.setAttribute(key, value),
+      object: (key, value) => child.setAttribute(key, JSON.stringify(value)),
+    };
+    for (const [key, value] of Object.entries(this.value)) {
+      types[typeof value](key, value);
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "set-attributes"; }
+  static get properties() { return {
+    "value": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{}",
+        "resolved": "{}",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Attributes map"
+      },
+      "defaultValue": "{}"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "attrsUpdated"
+    }]; }
+}