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

package/dist/cjs/ion-reorder-group.cjs.entry.js

@@ -2,11 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b4a9ece2.js');
-const ionicGlobal = require('./ionic-global-56e10eb5.js');
-const haptic = require('./haptic-09e73337.js');
+const index = require('./index-eaa0d16e.js');
+const ionicGlobal = require('./ionic-global-f2d95fd3.js');
+const index$1 = require('./index-9fca5d6f.js');
+const helpers = require('./helpers-cb08f5ae.js');
+const haptic = require('./haptic-7358cb0b.js');
+require('./index-b2a479e4.js');
 
-const reorderGroupCss = ".reorder-list-active>*{transition:transform 300ms;will-change:transform}.reorder-enabled{user-select:none}.reorder-enabled ion-reorder{display:block;cursor:grab;pointer-events:all;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:grabbing}.reorder-selected{position:relative;transition:none !important;box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{transform:translate3d(0,  0,  0)}";
+const reorderGroupCss = ".reorder-list-active>*{display:block;transition:transform 300ms;will-change:transform}.reorder-enabled{user-select:none}.reorder-enabled ion-reorder{display:block;cursor:grab;pointer-events:all;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:grabbing}.reorder-selected{position:relative;transition:none !important;box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{transform:translate3d(0,  0,  0)}";
 
 const ReorderGroup = class {
   constructor(hostRef) {
@@ -19,7 +22,7 @@ const ReorderGroup = class {
     this.scrollElInitial = 0;
     this.containerTop = 0;
     this.containerBottom = 0;
-    this.state = 0 /* Idle */;
+    this.state = 0 /* ReorderGroupState.Idle */;
     /**
      * If `true`, the reorder will be hidden.
      */
@@ -31,20 +34,20 @@ const ReorderGroup = class {
     }
   }
   async connectedCallback() {
-    const contentEl = this.el.closest('ion-content');
+    const contentEl = index$1.findClosestIonContent(this.el);
     if (contentEl) {
-      this.scrollEl = await contentEl.getScrollElement();
+      this.scrollEl = await index$1.getScrollElement(contentEl);
     }
-    this.gesture = (await Promise.resolve().then(function () { return require('./index-d01d9183.js'); })).createGesture({
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-643851c6.js'); })).createGesture({
       el: this.el,
       gestureName: 'reorder',
       gesturePriority: 110,
       threshold: 0,
       direction: 'y',
       passive: false,
-      canStart: detail => this.canStart(detail),
-      onStart: ev => this.onStart(ev),
-      onMove: ev => this.onMove(ev),
+      canStart: (detail) => this.canStart(detail),
+      onStart: (ev) => this.onStart(ev),
+      onMove: (ev) => this.onMove(ev),
       onEnd: () => this.onEnd(),
     });
     this.disabledChanged();
@@ -70,10 +73,10 @@ const ReorderGroup = class {
    * boolean of whether or not the reorder should reposition the item.
    */
   complete(listOrReorder) {
-    return Promise.resolve(this.completeSync(listOrReorder));
+    return Promise.resolve(this.completeReorder(listOrReorder));
   }
   canStart(ev) {
-    if (this.selectedItemEl || this.state !== 0 /* Idle */) {
+    if (this.selectedItemEl || this.state !== 0 /* ReorderGroupState.Idle */) {
       return false;
     }
     const target = ev.event.target;
@@ -90,7 +93,7 @@ const ReorderGroup = class {
   }
   onStart(ev) {
     ev.event.preventDefault();
-    const item = this.selectedItemEl = ev.data;
+    const item = (this.selectedItemEl = ev.data);
     const heights = this.cachedHeights;
     heights.length = 0;
     const el = this.el;
@@ -121,7 +124,7 @@ const ReorderGroup = class {
     }
     this.lastToIndex = indexForItem(item);
     this.selectedItemHeight = item.offsetHeight;
-    this.state = 1 /* Active */;
+    this.state = 1 /* ReorderGroupState.Active */;
     item.classList.add(ITEM_REORDER_SELECTED);
     haptic.hapticSelectionStart();
   }
@@ -150,56 +153,60 @@ const ReorderGroup = class {
   }
   onEnd() {
     const selectedItemEl = this.selectedItemEl;
-    this.state = 2 /* Complete */;
+    this.state = 2 /* ReorderGroupState.Complete */;
     if (!selectedItemEl) {
-      this.state = 0 /* Idle */;
+      this.state = 0 /* ReorderGroupState.Idle */;
       return;
     }
     const toIndex = this.lastToIndex;
     const fromIndex = indexForItem(selectedItemEl);
     if (toIndex === fromIndex) {
-      this.completeSync();
+      this.completeReorder();
     }
     else {
       this.ionItemReorder.emit({
         from: fromIndex,
         to: toIndex,
-        complete: this.completeSync.bind(this)
+        complete: this.completeReorder.bind(this),
       });
     }
     haptic.hapticSelectionEnd();
   }
-  completeSync(listOrReorder) {
+  completeReorder(listOrReorder) {
     const selectedItemEl = this.selectedItemEl;
-    if (selectedItemEl && this.state === 2 /* Complete */) {
+    if (selectedItemEl && this.state === 2 /* ReorderGroupState.Complete */) {
       const children = this.el.children;
       const len = children.length;
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
-      if (toIndex !== fromIndex && (listOrReorder === undefined || listOrReorder === true)) {
-        const ref = (fromIndex < toIndex)
-          ? children[toIndex + 1]
-          : children[toIndex];
-        this.el.insertBefore(selectedItemEl, ref);
-      }
+      /**
+       * insertBefore and setting the transform
+       * needs to happen in the same frame otherwise
+       * there will be a duplicate transition. This primarily
+       * impacts Firefox where insertBefore and transform operations
+       * are happening in two separate frames.
+       */
+      helpers.raf(() => {
+        if (toIndex !== fromIndex && (listOrReorder === undefined || listOrReorder === true)) {
+          const ref = fromIndex < toIndex ? children[toIndex + 1] : children[toIndex];
+          this.el.insertBefore(selectedItemEl, ref);
+        }
+        for (let i = 0; i < len; i++) {
+          children[i].style['transform'] = '';
+        }
+      });
       if (Array.isArray(listOrReorder)) {
         listOrReorder = reorderArray(listOrReorder, fromIndex, toIndex);
       }
-      for (let i = 0; i < len; i++) {
-        children[i].style['transform'] = '';
-      }
       selectedItemEl.style.transition = '';
       selectedItemEl.classList.remove(ITEM_REORDER_SELECTED);
       this.selectedItemEl = undefined;
-      this.state = 0 /* Idle */;
+      this.state = 0 /* ReorderGroupState.Idle */;
     }
     return listOrReorder;
   }
   itemIndexForTop(deltaY) {
     const heights = this.cachedHeights;
-    // TODO: since heights is a sorted array of integers, we can do
-    // speed up the search using binary search. Remember that linear-search is still
-    // faster than binary-search for small arrays (<64) due CPU branch misprediction.
     for (let i = 0; i < heights.length; i++) {
       if (heights[i] > deltaY) {
         return i;
@@ -244,7 +251,7 @@ const ReorderGroup = class {
     return (index.h(index.Host, { class: {
         [mode]: true,
         'reorder-enabled': !this.disabled,
-        'reorder-list-active': this.state !== 0 /* Idle */,
+        'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
       } }));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/ion-reorder.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b4a9ece2.js');
-const ionicGlobal = require('./ionic-global-56e10eb5.js');
+const index = require('./index-eaa0d16e.js');
+const index$1 = require('./index-731691ca.js');
+const ionicGlobal = require('./ionic-global-f2d95fd3.js');
 
 const reorderIosCss = ":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block;font-size:22px}.reorder-icon{font-size:34px;opacity:0.4}";
 
@@ -24,8 +25,8 @@ const Reorder = class {
   }
   render() {
     const mode = ionicGlobal.getIonMode(this);
-    const reorderIcon = mode === 'ios' ? 'reorder-three-outline' : 'reorder-two-sharp';
-    return (index.h(index.Host, { class: mode }, index.h("slot", null, index.h("ion-icon", { name: reorderIcon, lazy: false, class: "reorder-icon", part: "icon" }))));
+    const reorderIcon = mode === 'ios' ? index$1.reorderThreeOutline : index$1.reorderTwoSharp;
+    return (index.h(index.Host, { class: mode }, index.h("slot", null, index.h("ion-icon", { icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon" }))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/ion-route-redirect.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b4a9ece2.js');
+const index = require('./index-eaa0d16e.js');
 
 const RouteRedirect = class {
   constructor(hostRef) {

package/dist/cjs/ion-route.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b4a9ece2.js');
+const index = require('./index-eaa0d16e.js');
 
 const Route = class {
   constructor(hostRef) {

package/dist/cjs/ion-router-link.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b4a9ece2.js');
-const ionicGlobal = require('./ionic-global-56e10eb5.js');
-const theme = require('./theme-2259d0f5.js');
+const index = require('./index-eaa0d16e.js');
+const ionicGlobal = require('./ionic-global-f2d95fd3.js');
+const theme = require('./theme-fc63803b.js');
 
 const routerLinkCss = ":host{--background:transparent;--color:var(--ion-color-primary, #3880ff);background:var(--background);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}a{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit}";
 
@@ -25,11 +25,11 @@ const RouterLink = class {
     const attrs = {
       href: this.href,
       rel: this.rel,
-      target: this.target
+      target: this.target,
     };
     return (index.h(index.Host, { onClick: this.onClick, class: theme.createColorClasses(this.color, {
         [mode]: true,
-        'ion-activatable': true
+        'ion-activatable': true,
       }) }, index.h("a", Object.assign({}, attrs), index.h("slot", null))));
   }
 };

package/dist/cjs/ion-router-outlet.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b4a9ece2.js');
-const ionicGlobal = require('./ionic-global-56e10eb5.js');
-const cubicBezier = require('./cubic-bezier-dcb7bfef.js');
-const frameworkDelegate = require('./framework-delegate-c45292a3.js');
-const index$1 = require('./index-2067b305.js');
-require('./helpers-398ced09.js');
+const index = require('./index-eaa0d16e.js');
+const ionicGlobal = require('./ionic-global-f2d95fd3.js');
+const cubicBezier = require('./cubic-bezier-0b702a31.js');
+const frameworkDelegate = require('./framework-delegate-437c0645.js');
+const helpers = require('./helpers-cb08f5ae.js');
+const index$1 = require('./index-1b07c737.js');
 
 const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
 
@@ -39,7 +39,7 @@ const RouterOutlet = class {
         this.swipeHandler.onStart();
       }
     };
-    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-c4a778df.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
+    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-666ea8e6.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
       if (this.ani) {
         this.ani.onFinish(() => {
           this.gestureOrAnimationInProgress = false;
@@ -48,7 +48,7 @@ const RouterOutlet = class {
           }
         }, { oneTimeCallback: true });
         // Account for rounding errors in JS
-        let newStepValue = (shouldComplete) ? -0.001 : 0.001;
+        let newStepValue = shouldComplete ? -0.001 : 0.001;
         /**
          * Animation will be reversed here, so need to
          * reverse the easing curve as well
@@ -99,23 +99,26 @@ const RouterOutlet = class {
     const changed = await this.setRoot(id, params, {
       duration: direction === 'root' ? 0 : undefined,
       direction: direction === 'back' ? 'back' : 'forward',
-      animationBuilder: animation
+      animationBuilder: animation,
     });
     return {
       changed,
-      element: this.activeEl
+      element: this.activeEl,
     };
   }
   /** @internal */
   async getRouteId() {
     const active = this.activeEl;
-    return active ? {
-      id: active.tagName,
-      element: active,
-    } : undefined;
+    return active
+      ? {
+        id: active.tagName,
+        element: active,
+        params: this.activeParams,
+      }
+      : undefined;
   }
   async setRoot(component, params, opts) {
-    if (this.activeComponent === component) {
+    if (this.activeComponent === component && helpers.shallowEqualStringMap(params, this.activeParams)) {
       return false;
     }
     // attach entering view to DOM
@@ -123,6 +126,7 @@ const RouterOutlet = class {
     const enteringEl = await frameworkDelegate.attachComponent(this.delegate, this.el, component, ['ion-page', 'ion-page-invisible'], params);
     this.activeComponent = component;
     this.activeEl = enteringEl;
+    this.activeParams = params;
     // commit animation
     await this.commit(enteringEl, leavingEl, opts);
     await frameworkDelegate.detachComponent(this.delegate, leavingEl);
@@ -140,8 +144,8 @@ const RouterOutlet = class {
     await index$1.transition(Object.assign(Object.assign({ mode,
       animated,
       enteringEl,
-      leavingEl, baseEl: el, progressCallback: (opts.progressAnimation
-        ? ani => {
+      leavingEl, baseEl: el, progressCallback: opts.progressAnimation
+        ? (ani) => {
           /**
            * Because this progress callback is called asynchronously
            * it is possible for the gesture to start and end before
@@ -169,7 +173,7 @@ const RouterOutlet = class {
             this.ani = ani;
           }
         }
-        : undefined) }, opts), { animationBuilder }));
+        : undefined }, opts), { animationBuilder }));
     // emit nav changed event
     this.ionNavDidChange.emit();
     return true;
@@ -177,14 +181,14 @@ const RouterOutlet = class {
   async lock() {
     const p = this.waitPromise;
     let resolve;
-    this.waitPromise = new Promise(r => resolve = r);
+    this.waitPromise = new Promise((r) => (resolve = r));
     if (p !== undefined) {
       await p;
     }
     return resolve;
   }
   render() {
-    return (index.h("slot", null));
+    return index.h("slot", null);
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {