@pod-os/elements 0.6.1-bea440b.0 → 0.7.1-2196a40.0

package/dist/cjs/{helpers-398ced09.js → helpers-cb08f5ae.js}

@@ -1,5 +1,51 @@
 'use strict';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const transitionEndAsync = (el, expectedDuration = 0) => {
+  return new Promise((resolve) => {
+    transitionEnd(el, expectedDuration, resolve);
+  });
+};
+/**
+ * Allows developer to wait for a transition
+ * to finish and fallback to a timer if the
+ * transition is cancelled or otherwise
+ * never finishes. Also see transitionEndAsync
+ * which is an await-able version of this.
+ */
+const transitionEnd = (el, expectedDuration = 0, callback) => {
+  let unRegTrans;
+  let animationTimeout;
+  const opts = { passive: true };
+  const ANIMATION_FALLBACK_TIMEOUT = 500;
+  const unregister = () => {
+    if (unRegTrans) {
+      unRegTrans();
+    }
+  };
+  const onTransitionEnd = (ev) => {
+    if (ev === undefined || el === ev.target) {
+      unregister();
+      callback(ev);
+    }
+  };
+  if (el) {
+    el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+    el.addEventListener('transitionend', onTransitionEnd, opts);
+    animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
+    unRegTrans = () => {
+      if (animationTimeout) {
+        clearTimeout(animationTimeout);
+        animationTimeout = undefined;
+      }
+      el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
+      el.removeEventListener('transitionend', onTransitionEnd, opts);
+    };
+  }
+  return unregister;
+};
 /**
  * Waits for a component to be ready for
  * both custom element and non-custom element builds.
@@ -14,6 +60,7 @@
  */
 const componentOnReady = (el, callback) => {
   if (el.componentOnReady) {
+    // eslint-disable-next-line custom-rules/no-component-on-ready-method
     el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
   }
   else {
@@ -32,7 +79,7 @@ const componentOnReady = (el, callback) => {
  */
 const inheritAttributes = (el, attributes = []) => {
   const attributeObject = {};
-  attributes.forEach(attr => {
+  attributes.forEach((attr) => {
     if (el.hasAttribute(attr)) {
       const value = el.getAttribute(attr);
       if (value !== null) {
@@ -105,14 +152,21 @@ const ariaAttributes = [
  * Returns an array of aria attributes that should be copied from
  * the shadow host element to a target within the light DOM.
  * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
  */
-const inheritAriaAttributes = (el) => {
-  return inheritAttributes(el, ariaAttributes);
+const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
 };
 const addEventListener = (el, eventName, callback, opts) => {
+  var _a;
   if (typeof window !== 'undefined') {
     const win = window;
-    const config = win && win.Ionic && win.Ionic.config;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
     if (config) {
       const ael = config.get('_ael');
       if (ael) {
@@ -126,9 +180,10 @@ const addEventListener = (el, eventName, callback, opts) => {
   return el.addEventListener(eventName, callback, opts);
 };
 const removeEventListener = (el, eventName, callback, opts) => {
+  var _a;
   if (typeof window !== 'undefined') {
     const win = window;
-    const config = win && win.Ionic && win.Ionic.config;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
     if (config) {
       const rel = config.get('_rel');
       if (rel) {
@@ -176,6 +231,23 @@ const findItemLabel = (componentEl) => {
   }
   return null;
 };
+const focusElement = (el) => {
+  el.focus();
+  /**
+   * When programmatically focusing an element,
+   * the focus-visible utility will not run because
+   * it is expecting a keyboard event to have triggered this;
+   * however, there are times when we need to manually control
+   * this behavior so we call the `setFocus` method on ion-app
+   * which will let us explicitly set the elements to focus.
+   */
+  if (el.classList.contains('ion-focusable')) {
+    const app = el.closest('ion-app');
+    if (app) {
+      app.setFocus([el]);
+    }
+  }
+};
 /**
  * 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
@@ -197,12 +269,8 @@ const getAriaLabel = (componentEl, inputId) => {
   // 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);
+  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;
@@ -259,7 +327,7 @@ const assert = (actual, reason) => {
   if (!actual) {
     const message = 'ASSERT: ' + reason;
     console.error(message);
-    debugger; // tslint:disable-line
+    debugger; // eslint-disable-line
     throw new Error(message);
   }
 };
@@ -291,8 +359,10 @@ const pointerCoord = (ev) => {
 const isEndSide = (side) => {
   const isRTL = document.dir === 'rtl';
   switch (side) {
-    case 'start': return isRTL;
-    case 'end': return !isRTL;
+    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.`);
   }
@@ -301,7 +371,7 @@ const debounceEvent = (event, wait) => {
   const original = event._original || event;
   return {
     _original: event,
-    emit: debounce(original.emit.bind(original), wait)
+    emit: debounce(original.emit.bind(original), wait),
   };
 };
 const debounce = (func, wait = 0) => {
@@ -311,6 +381,33 @@ const debounce = (func, wait = 0) => {
     timer = setTimeout(func, wait, ...args);
   };
 };
+/**
+ * Check whether the two string maps are shallow equal.
+ *
+ * undefined is treated as an empty map.
+ *
+ * @returns whether the keys are the same and the values are shallow equal.
+ */
+const shallowEqualStringMap = (map1, map2) => {
+  map1 !== null && map1 !== void 0 ? map1 : (map1 = {});
+  map2 !== null && map2 !== void 0 ? map2 : (map2 = {});
+  if (map1 === map2) {
+    return true;
+  }
+  const keys1 = Object.keys(map1);
+  if (keys1.length !== Object.keys(map2).length) {
+    return false;
+  }
+  for (const k1 of keys1) {
+    if (!(k1 in map2)) {
+      return false;
+    }
+    if (map1[k1] !== map2[k1]) {
+      return false;
+    }
+  }
+  return true;
+};
 
 exports.addEventListener = addEventListener;
 exports.assert = assert;
@@ -319,6 +416,7 @@ exports.componentOnReady = componentOnReady;
 exports.debounce = debounce;
 exports.debounceEvent = debounceEvent;
 exports.findItemLabel = findItemLabel;
+exports.focusElement = focusElement;
 exports.getAriaLabel = getAriaLabel;
 exports.getElementRoot = getElementRoot;
 exports.hasShadowDom = hasShadowDom;
@@ -330,3 +428,5 @@ exports.pointerCoord = pointerCoord;
 exports.raf = raf;
 exports.removeEventListener = removeEventListener;
 exports.renderHiddenInput = renderHiddenInput;
+exports.shallowEqualStringMap = shallowEqualStringMap;
+exports.transitionEndAsync = transitionEndAsync;

package/dist/cjs/{index-2067b305.js → index-1b07c737.js}

@@ -1,27 +1,33 @@
 'use strict';
 
-const index = require('./index-b4a9ece2.js');
-const helpers = require('./helpers-398ced09.js');
+const index = require('./index-eaa0d16e.js');
+const helpers = require('./helpers-cb08f5ae.js');
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
 const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-32e4623d.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-169c54f0.js'); });
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-0f31ec9a.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-d2a33a23.js'); });
 const transition = (opts) => {
   return new Promise((resolve, reject) => {
     index.writeTask(() => {
       beforeTransition(opts);
-      runTransition(opts).then(result => {
+      runTransition(opts).then((result) => {
         if (result.animation) {
           result.animation.destroy();
         }
         afterTransition(opts);
         resolve(result);
-      }, error => {
+      }, (error) => {
         afterTransition(opts);
         reject(error);
       });
@@ -53,9 +59,7 @@ const beforeTransition = (opts) => {
 };
 const runTransition = async (opts) => {
   const animationBuilder = await getAnimationBuilder(opts);
-  const ani = (animationBuilder && index.Build.isBrowser)
-    ? animation(animationBuilder, opts)
-    : noAnimation(opts); // fast path for no animation
+  const ani = animationBuilder && index.Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
   return ani;
 };
 const afterTransition = (opts) => {
@@ -75,7 +79,7 @@ const getAnimationBuilder = async (opts) => {
   if (opts.animationBuilder) {
     return opts.animationBuilder;
   }
-  const getAnimation = (opts.mode === 'ios')
+  const getAnimation = opts.mode === 'ios'
     ? (await iosTransitionAnimation()).iosTransitionAnimation
     : (await mdTransitionAnimation()).mdTransitionAnimation;
   return getAnimation;
@@ -93,7 +97,7 @@ const animation = async (animationBuilder, opts) => {
   }
   return {
     hasCompleted: didComplete,
-    animation: trans
+    animation: trans,
   };
 };
 const noAnimation = async (opts) => {
@@ -103,18 +107,14 @@ const noAnimation = async (opts) => {
   fireWillEvents(enteringEl, leavingEl);
   fireDidEvents(enteringEl, leavingEl);
   return {
-    hasCompleted: true
+    hasCompleted: true,
   };
 };
 const waitForReady = async (opts, defaultDeep) => {
   const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;
-  const promises = deep ? [
-    deepReady(opts.enteringEl),
-    deepReady(opts.leavingEl),
-  ] : [
-    shallowReady(opts.enteringEl),
-    shallowReady(opts.leavingEl),
-  ];
+  const promises = deep
+    ? [deepReady(opts.enteringEl), deepReady(opts.leavingEl)]
+    : [shallowReady(opts.enteringEl), shallowReady(opts.leavingEl)];
   await Promise.all(promises);
   await notifyViewReady(opts.viewIsReady, opts.enteringEl);
 };
@@ -125,7 +125,7 @@ const notifyViewReady = async (viewIsReady, enteringEl) => {
 };
 const playTransition = (trans, opts) => {
   const progressCallback = opts.progressCallback;
-  const promise = new Promise(resolve => {
+  const promise = new Promise((resolve) => {
     trans.onFinish((currentStep) => resolve(currentStep === 1));
   });
   // cool, let's do this, start the transition
@@ -163,7 +163,7 @@ const lifecycle = (el, eventName) => {
 };
 const shallowReady = (el) => {
   if (el) {
-    return new Promise(resolve => helpers.componentOnReady(el, resolve));
+    return new Promise((resolve) => helpers.componentOnReady(el, resolve));
   }
   return Promise.resolve();
 };
@@ -171,10 +171,23 @@ const deepReady = async (el) => {
   const element = el;
   if (element) {
     if (element.componentOnReady != null) {
+      // eslint-disable-next-line custom-rules/no-component-on-ready-method
       const stencilEl = await element.componentOnReady();
       if (stencilEl != null) {
         return;
       }
+      /**
+       * Custom elements in Stencil will have __registerHost.
+       */
+    }
+    else if (element.__registerHost != null) {
+      /**
+       * Non-lazy loaded custom elements need to wait
+       * one frame for component to be loaded.
+       */
+      const waitForCustomElement = new Promise((resolve) => helpers.raf(resolve));
+      await waitForCustomElement;
+      return;
     }
     await Promise.all(Array.from(element.children).map(deepReady));
   }
@@ -192,9 +205,7 @@ const setPageHidden = (el, hidden) => {
 };
 const setZIndex = (enteringEl, leavingEl, direction) => {
   if (enteringEl !== undefined) {
-    enteringEl.style.zIndex = (direction === 'back')
-      ? '99'
-      : '101';
+    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';
   }
   if (leavingEl !== undefined) {
     leavingEl.style.zIndex = '100';

package/dist/cjs/{index-68ae43d2.js → index-2dc3637c.js}

@@ -1,10 +1,13 @@
 'use strict';
 
-const hardwareBackButton = require('./hardware-back-button-01027575.js');
-const helpers = require('./helpers-398ced09.js');
-const ionicGlobal = require('./ionic-global-56e10eb5.js');
-const animation = require('./animation-5840e4df.js');
+const hardwareBackButton = require('./hardware-back-button-25372ec7.js');
+const helpers = require('./helpers-cb08f5ae.js');
+const ionicGlobal = require('./ionic-global-f2d95fd3.js');
+const animation = require('./animation-9bea118f.js');
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * baseAnimation
  * Base class which is extended by the various types. Each
@@ -22,6 +25,9 @@ const baseAnimation = (isIos) => {
   return animation.createAnimation().duration(isIos ? 400 : 300);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * Menu Overlay Type
  * The menu slides over the content. The content
@@ -43,18 +49,17 @@ const menuOverlayAnimation = (menu) => {
     closedX = -width + 'px';
     openedX = '0px';
   }
-  menuAnimation
-    .addElement(menu.menuInnerEl)
-    .fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
+  menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
   const mode = ionicGlobal.getIonMode(menu);
   const isIos = mode === 'ios';
   const opacity = isIos ? 0.2 : 0.25;
-  backdropAnimation
-    .addElement(menu.backdropEl)
-    .fromTo('opacity', 0.01, opacity);
+  backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
   return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * Menu Push Type
  * The content slides over to reveal the menu underneath.
@@ -79,12 +84,13 @@ const menuPushAnimation = (menu) => {
   const contentAnimation = animation.createAnimation()
     .addElement(menu.contentEl)
     .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
-  const backdropAnimation = animation.createAnimation()
-    .addElement(menu.backdropEl)
-    .fromTo('opacity', 0.01, 0.32);
+  const backdropAnimation = animation.createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
   return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 /**
  * Menu Reveal Type
  * The content slides over to reveal the menu underneath.
@@ -92,13 +98,16 @@ const menuPushAnimation = (menu) => {
  */
 const menuRevealAnimation = (menu) => {
   const mode = ionicGlobal.getIonMode(menu);
-  const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
+  const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
   const contentOpen = animation.createAnimation()
     .addElement(menu.contentEl) // REVIEW
     .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
   return baseAnimation(mode === 'ios').addAnimation(contentOpen);
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const createMenuController = () => {
   const menuAnimations = new Map();
   const menus = [];
@@ -140,7 +149,8 @@ const createMenuController = () => {
   const isOpen = async (menu) => {
     if (menu != null) {
       const menuEl = await get(menu);
-      return (menuEl !== undefined && menuEl.isOpen());
+      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+      return menuEl !== undefined && menuEl.isOpen();
     }
     else {
       const menuEl = await getOpen();
@@ -159,21 +169,21 @@ const createMenuController = () => {
     if (menu === 'start' || menu === 'end') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      const menuRef = find(m => m.side === menu && !m.disabled);
+      const menuRef = find((m) => m.side === menu && !m.disabled);
       if (menuRef) {
         return menuRef;
       }
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
-      return find(m => m.side === menu);
+      return find((m) => m.side === menu);
     }
     else if (menu != null) {
       // the menuId was not left or right
       // so try to get the menu by its "id"
-      return find(m => m.menuId === menu);
+      return find((m) => m.menuId === menu);
     }
     // return the first enabled menu
-    const menuEl = find(m => !m.disabled);
+    const menuEl = find((m) => !m.disabled);
     if (menuEl) {
       return menuEl;
     }
@@ -224,9 +234,7 @@ const createMenuController = () => {
     // then find all the other menus on this same side
     // and automatically disable other same side menus
     const side = menu.side;
-    menus
-      .filter(m => m.side === side && m !== menu)
-      .forEach(m => m.disabled = true);
+    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
   };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
@@ -249,13 +257,13 @@ const createMenuController = () => {
     return animation;
   };
   const _getOpenSync = () => {
-    return find(m => m._isOpen);
+    return find((m) => m._isOpen);
   };
   const getMenusSync = () => {
-    return menus.map(menu => menu.el);
+    return menus.map((menu) => menu.el);
   };
   const isAnimatingSync = () => {
-    return menus.some(menu => menu.isAnimating);
+    return menus.some((menu) => menu.isAnimating);
   };
   const find = (predicate) => {
     const instance = menus.find(predicate);
@@ -265,13 +273,11 @@ const createMenuController = () => {
     return undefined;
   };
   const waitUntilReady = () => {
-    return Promise.all(Array.from(document.querySelectorAll('ion-menu'))
-      .map(menu => new Promise(resolve => helpers.componentOnReady(menu, resolve))));
+    return Promise.all(Array.from(document.querySelectorAll('ion-menu')).map((menu) => new Promise((resolve) => helpers.componentOnReady(menu, resolve))));
   };
   registerAnimation('reveal', menuRevealAnimation);
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
-  /* tslint:disable-next-line */
   if (typeof document !== 'undefined') {
     document.addEventListener('ionBackButton', (ev) => {
       const openMenu = _getOpenSync();

package/dist/cjs/index-57b9fa9e.js

@@ -0,0 +1,30 @@
+'use strict';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * When accessing the window, it is important
+ * to account for SSR applications where the
+ * window is not available. Code that accesses
+ * window when it is not available will crash.
+ * Even checking if `window === undefined` will cause
+ * apps to crash in SSR.
+ *
+ * Use win below to access an SSR-safe version
+ * of the window.
+ *
+ * Example 1:
+ * Before:
+ * if (window.innerWidth > 768) { ... }
+ *
+ * After:
+ * import { win } from 'path/to/this/file';
+ * if (win?.innerWidth > 768) { ... }
+ *
+ * Note: Code inside of this if-block will
+ * not run in an SSR environment.
+ */
+const win = typeof window !== 'undefined' ? window : undefined;
+
+exports.win = win;