@pod-os/elements 0.0.1

package/dist/esm/helpers-dffac6f7.js

@@ -0,0 +1,247 @@
+/**
+ * Waits for a component to be ready for
+ * both custom element and non-custom element builds.
+ * If non-custom element build, el.componentOnReady
+ * will be used.
+ * For custom element builds, we wait a frame
+ * so that the inner contents of the component
+ * have a chance to render.
+ *
+ * Use this utility rather than calling
+ * el.componentOnReady yourself.
+ */
+const componentOnReady = (el, callback) => {
+  if (el.componentOnReady) {
+    el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
+  }
+  else {
+    raf(() => callback(el));
+  }
+};
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {};
+  attributes.forEach(attr => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+const addEventListener = (el, eventName, callback, opts) => {
+  if (typeof window !== 'undefined') {
+    const win = window;
+    const config = win && win.Ionic && win.Ionic.config;
+    if (config) {
+      const ael = config.get('_ael');
+      if (ael) {
+        return ael(el, eventName, callback, opts);
+      }
+      else if (config._ael) {
+        return config._ael(el, eventName, callback, opts);
+      }
+    }
+  }
+  return el.addEventListener(eventName, callback, opts);
+};
+const removeEventListener = (el, eventName, callback, opts) => {
+  if (typeof window !== 'undefined') {
+    const win = window;
+    const config = win && win.Ionic && win.Ionic.config;
+    if (config) {
+      const rel = config.get('_rel');
+      if (rel) {
+        return rel(el, eventName, callback, opts);
+      }
+      else if (config._rel) {
+        return config._rel(el, eventName, callback, opts);
+      }
+    }
+  }
+  return el.removeEventListener(eventName, callback, opts);
+};
+/**
+ * Gets the root context of a shadow dom element
+ * On newer browsers this will be the shadowRoot,
+ * but for older browser this may just be the
+ * element itself.
+ *
+ * Useful for whenever you need to explicitly
+ * do "myElement.shadowRoot!.querySelector(...)".
+ */
+const getElementRoot = (el, fallback = el) => {
+  return el.shadowRoot || fallback;
+};
+/**
+ * Patched version of requestAnimationFrame that avoids ngzone
+ * Use only when you know ngzone should not run
+ */
+const raf = (h) => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(h);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(h);
+  }
+  return setTimeout(h);
+};
+const hasShadowDom = (el) => {
+  return !!el.shadowRoot && !!el.attachShadow;
+};
+const findItemLabel = (componentEl) => {
+  const itemEl = componentEl.closest('ion-item');
+  if (itemEl) {
+    return itemEl.querySelector('ion-label');
+  }
+  return null;
+};
+/**
+ * This method is used for Ionic's input components that use Shadow DOM. In
+ * order to properly label the inputs to work with screen readers, we need
+ * to get the text content of the label outside of the shadow root and pass
+ * it to the input inside of the shadow root.
+ *
+ * Referencing label elements by id from outside of the component is
+ * impossible due to the shadow boundary, read more here:
+ * https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
+ *
+ * @param componentEl The shadow element that needs the aria label
+ * @param inputId The unique identifier for the input
+ */
+const getAriaLabel = (componentEl, inputId) => {
+  let labelText;
+  // If the user provides their own label via the aria-labelledby attr
+  // we should use that instead of looking for an ion-label
+  const labelledBy = componentEl.getAttribute('aria-labelledby');
+  // Grab the id off of the component in case they are using
+  // a custom label using the label element
+  const componentId = componentEl.id;
+  let labelId = labelledBy !== null && labelledBy.trim() !== ''
+    ? labelledBy
+    : inputId + '-lbl';
+  let label = labelledBy !== null && labelledBy.trim() !== ''
+    ? document.getElementById(labelledBy)
+    : findItemLabel(componentEl);
+  if (label) {
+    if (labelledBy === null) {
+      label.id = labelId;
+    }
+    labelText = label.textContent;
+    label.setAttribute('aria-hidden', 'true');
+    // if there is no label, check to see if the user has provided
+    // one by setting an id on the component and using the label element
+  }
+  else if (componentId.trim() !== '') {
+    label = document.querySelector(`label[for="${componentId}"]`);
+    if (label) {
+      if (label.id !== '') {
+        labelId = label.id;
+      }
+      else {
+        label.id = labelId = `${componentId}-lbl`;
+      }
+      labelText = label.textContent;
+    }
+  }
+  return { label, labelId, labelText };
+};
+/**
+ * This method is used to add a hidden input to a host element that contains
+ * a Shadow DOM. It does not add the input inside of the Shadow root which
+ * allows it to be picked up inside of forms. It should contain the same
+ * values as the host element.
+ *
+ * @param always Add a hidden input even if the container does not use Shadow
+ * @param container The element where the input will be added
+ * @param name The name of the input
+ * @param value The value of the input
+ * @param disabled If true, the input is disabled
+ */
+const renderHiddenInput = (always, container, name, value, disabled) => {
+  if (always || hasShadowDom(container)) {
+    let input = container.querySelector('input.aux-input');
+    if (!input) {
+      input = container.ownerDocument.createElement('input');
+      input.type = 'hidden';
+      input.classList.add('aux-input');
+      container.appendChild(input);
+    }
+    input.disabled = disabled;
+    input.name = name;
+    input.value = value || '';
+  }
+};
+const clamp = (min, n, max) => {
+  return Math.max(min, Math.min(n, max));
+};
+const assert = (actual, reason) => {
+  if (!actual) {
+    const message = 'ASSERT: ' + reason;
+    console.error(message);
+    debugger; // tslint:disable-line
+    throw new Error(message);
+  }
+};
+const now = (ev) => {
+  return ev.timeStamp || Date.now();
+};
+const pointerCoord = (ev) => {
+  // get X coordinates for either a mouse click
+  // or a touch depending on the given event
+  if (ev) {
+    const changedTouches = ev.changedTouches;
+    if (changedTouches && changedTouches.length > 0) {
+      const touch = changedTouches[0];
+      return { x: touch.clientX, y: touch.clientY };
+    }
+    if (ev.pageX !== undefined) {
+      return { x: ev.pageX, y: ev.pageY };
+    }
+  }
+  return { x: 0, y: 0 };
+};
+/**
+ * @hidden
+ * Given a side, return if it should be on the end
+ * based on the value of dir
+ * @param side the side
+ * @param isRTL whether the application dir is rtl
+ */
+const isEndSide = (side) => {
+  const isRTL = document.dir === 'rtl';
+  switch (side) {
+    case 'start': return isRTL;
+    case 'end': return !isRTL;
+    default:
+      throw new Error(`"${side}" is not a valid value for [side]. Use "start" or "end" instead.`);
+  }
+};
+const debounceEvent = (event, wait) => {
+  const original = event._original || event;
+  return {
+    _original: event,
+    emit: debounce(original.emit.bind(original), wait)
+  };
+};
+const debounce = (func, wait = 0) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(func, wait, ...args);
+  };
+};
+
+export { componentOnReady as a, addEventListener as b, clamp as c, removeEventListener as d, getAriaLabel as e, renderHiddenInput as f, getElementRoot as g, hasShadowDom as h, inheritAttributes as i, findItemLabel as j, debounceEvent as k, isEndSide as l, assert as m, debounce as n, now as o, pointerCoord as p, raf as r };

package/dist/esm/index-51ec9e66.js

@@ -0,0 +1,448 @@
+import { G as GESTURE_CONTROLLER } from './gesture-controller-604336b7.js';
+export { G as GESTURE_CONTROLLER } from './gesture-controller-604336b7.js';
+
+const addEventListener = (el, eventName, callback, opts) => {
+  // use event listener options when supported
+  // otherwise it's just a boolean for the "capture" arg
+  const listenerOpts = supportsPassive(el) ? {
+    'capture': !!opts.capture,
+    'passive': !!opts.passive,
+  } : !!opts.capture;
+  let add;
+  let remove;
+  if (el['__zone_symbol__addEventListener']) {
+    add = '__zone_symbol__addEventListener';
+    remove = '__zone_symbol__removeEventListener';
+  }
+  else {
+    add = 'addEventListener';
+    remove = 'removeEventListener';
+  }
+  el[add](eventName, callback, listenerOpts);
+  return () => {
+    el[remove](eventName, callback, listenerOpts);
+  };
+};
+const supportsPassive = (node) => {
+  if (_sPassive === undefined) {
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        get: () => {
+          _sPassive = true;
+        }
+      });
+      node.addEventListener('optsTest', () => { return; }, opts);
+    }
+    catch (e) {
+      _sPassive = false;
+    }
+  }
+  return !!_sPassive;
+};
+let _sPassive;
+
+const MOUSE_WAIT = 2000;
+const createPointerEvents = (el, pointerDown, pointerMove, pointerUp, options) => {
+  let rmTouchStart;
+  let rmTouchMove;
+  let rmTouchEnd;
+  let rmTouchCancel;
+  let rmMouseStart;
+  let rmMouseMove;
+  let rmMouseUp;
+  let lastTouchEvent = 0;
+  const handleTouchStart = (ev) => {
+    lastTouchEvent = Date.now() + MOUSE_WAIT;
+    if (!pointerDown(ev)) {
+      return;
+    }
+    if (!rmTouchMove && pointerMove) {
+      rmTouchMove = addEventListener(el, 'touchmove', pointerMove, options);
+    }
+    /**
+     * Events are dispatched on the element that is tapped and bubble up to
+     * the reference element in the gesture. In the event that the element this
+     * event was first dispatched on is removed from the DOM, the event will no
+     * longer bubble up to our reference element. This leaves the gesture in an
+     * unusable state. To account for this, the touchend and touchcancel listeners
+     * should be added to the event target so that they still fire even if the target
+     * is removed from the DOM.
+     */
+    if (!rmTouchEnd) {
+      rmTouchEnd = addEventListener(ev.target, 'touchend', handleTouchEnd, options);
+    }
+    if (!rmTouchCancel) {
+      rmTouchCancel = addEventListener(ev.target, 'touchcancel', handleTouchEnd, options);
+    }
+  };
+  const handleMouseDown = (ev) => {
+    if (lastTouchEvent > Date.now()) {
+      return;
+    }
+    if (!pointerDown(ev)) {
+      return;
+    }
+    if (!rmMouseMove && pointerMove) {
+      rmMouseMove = addEventListener(getDocument(el), 'mousemove', pointerMove, options);
+    }
+    if (!rmMouseUp) {
+      rmMouseUp = addEventListener(getDocument(el), 'mouseup', handleMouseUp, options);
+    }
+  };
+  const handleTouchEnd = (ev) => {
+    stopTouch();
+    if (pointerUp) {
+      pointerUp(ev);
+    }
+  };
+  const handleMouseUp = (ev) => {
+    stopMouse();
+    if (pointerUp) {
+      pointerUp(ev);
+    }
+  };
+  const stopTouch = () => {
+    if (rmTouchMove) {
+      rmTouchMove();
+    }
+    if (rmTouchEnd) {
+      rmTouchEnd();
+    }
+    if (rmTouchCancel) {
+      rmTouchCancel();
+    }
+    rmTouchMove = rmTouchEnd = rmTouchCancel = undefined;
+  };
+  const stopMouse = () => {
+    if (rmMouseMove) {
+      rmMouseMove();
+    }
+    if (rmMouseUp) {
+      rmMouseUp();
+    }
+    rmMouseMove = rmMouseUp = undefined;
+  };
+  const stop = () => {
+    stopTouch();
+    stopMouse();
+  };
+  const enable = (isEnabled = true) => {
+    if (!isEnabled) {
+      if (rmTouchStart) {
+        rmTouchStart();
+      }
+      if (rmMouseStart) {
+        rmMouseStart();
+      }
+      rmTouchStart = rmMouseStart = undefined;
+      stop();
+    }
+    else {
+      if (!rmTouchStart) {
+        rmTouchStart = addEventListener(el, 'touchstart', handleTouchStart, options);
+      }
+      if (!rmMouseStart) {
+        rmMouseStart = addEventListener(el, 'mousedown', handleMouseDown, options);
+      }
+    }
+  };
+  const destroy = () => {
+    enable(false);
+    pointerUp = pointerMove = pointerDown = undefined;
+  };
+  return {
+    enable,
+    stop,
+    destroy
+  };
+};
+const getDocument = (node) => {
+  return node instanceof Document ? node : node.ownerDocument;
+};
+
+const createPanRecognizer = (direction, thresh, maxAngle) => {
+  const radians = maxAngle * (Math.PI / 180);
+  const isDirX = direction === 'x';
+  const maxCosine = Math.cos(radians);
+  const threshold = thresh * thresh;
+  let startX = 0;
+  let startY = 0;
+  let dirty = false;
+  let isPan = 0;
+  return {
+    start(x, y) {
+      startX = x;
+      startY = y;
+      isPan = 0;
+      dirty = true;
+    },
+    detect(x, y) {
+      if (!dirty) {
+        return false;
+      }
+      const deltaX = (x - startX);
+      const deltaY = (y - startY);
+      const distance = deltaX * deltaX + deltaY * deltaY;
+      if (distance < threshold) {
+        return false;
+      }
+      const hypotenuse = Math.sqrt(distance);
+      const cosine = (isDirX ? deltaX : deltaY) / hypotenuse;
+      if (cosine > maxCosine) {
+        isPan = 1;
+      }
+      else if (cosine < -maxCosine) {
+        isPan = -1;
+      }
+      else {
+        isPan = 0;
+      }
+      dirty = false;
+      return true;
+    },
+    isGesture() {
+      return isPan !== 0;
+    },
+    getDirection() {
+      return isPan;
+    }
+  };
+};
+
+const createGesture = (config) => {
+  let hasCapturedPan = false;
+  let hasStartedPan = false;
+  let hasFiredStart = true;
+  let isMoveQueued = false;
+  const finalConfig = Object.assign({ disableScroll: false, direction: 'x', gesturePriority: 0, passive: true, maxAngle: 40, threshold: 10 }, config);
+  const canStart = finalConfig.canStart;
+  const onWillStart = finalConfig.onWillStart;
+  const onStart = finalConfig.onStart;
+  const onEnd = finalConfig.onEnd;
+  const notCaptured = finalConfig.notCaptured;
+  const onMove = finalConfig.onMove;
+  const threshold = finalConfig.threshold;
+  const passive = finalConfig.passive;
+  const blurOnStart = finalConfig.blurOnStart;
+  const detail = {
+    type: 'pan',
+    startX: 0,
+    startY: 0,
+    startTime: 0,
+    currentX: 0,
+    currentY: 0,
+    velocityX: 0,
+    velocityY: 0,
+    deltaX: 0,
+    deltaY: 0,
+    currentTime: 0,
+    event: undefined,
+    data: undefined
+  };
+  const pan = createPanRecognizer(finalConfig.direction, finalConfig.threshold, finalConfig.maxAngle);
+  const gesture = GESTURE_CONTROLLER.createGesture({
+    name: config.gestureName,
+    priority: config.gesturePriority,
+    disableScroll: config.disableScroll
+  });
+  const pointerDown = (ev) => {
+    const timeStamp = now(ev);
+    if (hasStartedPan || !hasFiredStart) {
+      return false;
+    }
+    updateDetail(ev, detail);
+    detail.startX = detail.currentX;
+    detail.startY = detail.currentY;
+    detail.startTime = detail.currentTime = timeStamp;
+    detail.velocityX = detail.velocityY = detail.deltaX = detail.deltaY = 0;
+    detail.event = ev;
+    // Check if gesture can start
+    if (canStart && canStart(detail) === false) {
+      return false;
+    }
+    // Release fallback
+    gesture.release();
+    // Start gesture
+    if (!gesture.start()) {
+      return false;
+    }
+    hasStartedPan = true;
+    if (threshold === 0) {
+      return tryToCapturePan();
+    }
+    pan.start(detail.startX, detail.startY);
+    return true;
+  };
+  const pointerMove = (ev) => {
+    // fast path, if gesture is currently captured
+    // do minimum job to get user-land even dispatched
+    if (hasCapturedPan) {
+      if (!isMoveQueued && hasFiredStart) {
+        isMoveQueued = true;
+        calcGestureData(detail, ev);
+        requestAnimationFrame(fireOnMove);
+      }
+      return;
+    }
+    // gesture is currently being detected
+    calcGestureData(detail, ev);
+    if (pan.detect(detail.currentX, detail.currentY)) {
+      if (!pan.isGesture() || !tryToCapturePan()) {
+        abortGesture();
+      }
+    }
+  };
+  const fireOnMove = () => {
+    // Since fireOnMove is called inside a RAF, onEnd() might be called,
+    // we must double check hasCapturedPan
+    if (!hasCapturedPan) {
+      return;
+    }
+    isMoveQueued = false;
+    if (onMove) {
+      onMove(detail);
+    }
+  };
+  const tryToCapturePan = () => {
+    if (gesture && !gesture.capture()) {
+      return false;
+    }
+    hasCapturedPan = true;
+    hasFiredStart = false;
+    // reset start position since the real user-land event starts here
+    // If the pan detector threshold is big, not resetting the start position
+    // will cause a jump in the animation equal to the detector threshold.
+    // the array of positions used to calculate the gesture velocity does not
+    // need to be cleaned, more points in the positions array always results in a
+    // more accurate value of the velocity.
+    detail.startX = detail.currentX;
+    detail.startY = detail.currentY;
+    detail.startTime = detail.currentTime;
+    if (onWillStart) {
+      onWillStart(detail).then(fireOnStart);
+    }
+    else {
+      fireOnStart();
+    }
+    return true;
+  };
+  const blurActiveElement = () => {
+    /* tslint:disable-next-line */
+    if (typeof document !== 'undefined') {
+      const activeElement = document.activeElement;
+      if (activeElement !== null && activeElement.blur) {
+        activeElement.blur();
+      }
+    }
+  };
+  const fireOnStart = () => {
+    if (blurOnStart) {
+      blurActiveElement();
+    }
+    if (onStart) {
+      onStart(detail);
+    }
+    hasFiredStart = true;
+  };
+  const reset = () => {
+    hasCapturedPan = false;
+    hasStartedPan = false;
+    isMoveQueued = false;
+    hasFiredStart = true;
+    gesture.release();
+  };
+  // END *************************
+  const pointerUp = (ev) => {
+    const tmpHasCaptured = hasCapturedPan;
+    const tmpHasFiredStart = hasFiredStart;
+    reset();
+    if (!tmpHasFiredStart) {
+      return;
+    }
+    calcGestureData(detail, ev);
+    // Try to capture press
+    if (tmpHasCaptured) {
+      if (onEnd) {
+        onEnd(detail);
+      }
+      return;
+    }
+    // Not captured any event
+    if (notCaptured) {
+      notCaptured(detail);
+    }
+  };
+  const pointerEvents = createPointerEvents(finalConfig.el, pointerDown, pointerMove, pointerUp, {
+    capture: false,
+    passive
+  });
+  const abortGesture = () => {
+    reset();
+    pointerEvents.stop();
+    if (notCaptured) {
+      notCaptured(detail);
+    }
+  };
+  return {
+    enable(enable = true) {
+      if (!enable) {
+        if (hasCapturedPan) {
+          pointerUp(undefined);
+        }
+        reset();
+      }
+      pointerEvents.enable(enable);
+    },
+    destroy() {
+      gesture.destroy();
+      pointerEvents.destroy();
+    }
+  };
+};
+const calcGestureData = (detail, ev) => {
+  if (!ev) {
+    return;
+  }
+  const prevX = detail.currentX;
+  const prevY = detail.currentY;
+  const prevT = detail.currentTime;
+  updateDetail(ev, detail);
+  const currentX = detail.currentX;
+  const currentY = detail.currentY;
+  const timestamp = detail.currentTime = now(ev);
+  const timeDelta = timestamp - prevT;
+  if (timeDelta > 0 && timeDelta < 100) {
+    const velocityX = (currentX - prevX) / timeDelta;
+    const velocityY = (currentY - prevY) / timeDelta;
+    detail.velocityX = velocityX * 0.7 + detail.velocityX * 0.3;
+    detail.velocityY = velocityY * 0.7 + detail.velocityY * 0.3;
+  }
+  detail.deltaX = currentX - detail.startX;
+  detail.deltaY = currentY - detail.startY;
+  detail.event = ev;
+};
+const updateDetail = (ev, detail) => {
+  // get X coordinates for either a mouse click
+  // or a touch depending on the given event
+  let x = 0;
+  let y = 0;
+  if (ev) {
+    const changedTouches = ev.changedTouches;
+    if (changedTouches && changedTouches.length > 0) {
+      const touch = changedTouches[0];
+      x = touch.clientX;
+      y = touch.clientY;
+    }
+    else if (ev.pageX !== undefined) {
+      x = ev.pageX;
+      y = ev.pageY;
+    }
+  }
+  detail.currentX = x;
+  detail.currentY = y;
+};
+const now = (ev) => {
+  return ev.timeStamp || Date.now();
+};
+
+export { createGesture };