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

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

@@ -1,8 +1,11 @@
-import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-e4deec27.js';
-import { g as getIonMode } from './ionic-global-2e28f7c7.js';
-import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic-c424e670.js';
+import { r as registerInstance, d as createEvent, h, c as getElement, H as Host } from './index-cb938ffb.js';
+import { g as getIonMode } from './ionic-global-6cd57191.js';
+import { a as findClosestIonContent, g as getScrollElement } from './index-ebf7f059.js';
+import { r as raf } from './helpers-aeff219b.js';
+import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-e7d5ef4d.js';
+import './index-1f3d8582.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) {
@@ -15,7 +18,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.
      */
@@ -27,20 +30,20 @@ const ReorderGroup = class {
     }
   }
   async connectedCallback() {
-    const contentEl = this.el.closest('ion-content');
+    const contentEl = findClosestIonContent(this.el);
     if (contentEl) {
-      this.scrollEl = await contentEl.getScrollElement();
+      this.scrollEl = await getScrollElement(contentEl);
     }
-    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
+    this.gesture = (await import('./index-d39eb62b.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();
@@ -66,10 +69,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;
@@ -86,7 +89,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;
@@ -117,7 +120,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);
     hapticSelectionStart();
   }
@@ -146,56 +149,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),
       });
     }
     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.
+       */
+      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;
@@ -240,7 +247,7 @@ const ReorderGroup = class {
     return (h(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 getElement(this); }

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-e4deec27.js';
-import { g as getIonMode } from './ionic-global-2e28f7c7.js';
+import { r as registerInstance, h, H as Host, c as getElement } from './index-cb938ffb.js';
+import { r as reorderThreeOutline, q as reorderTwoSharp } from './index-65ecd543.js';
+import { g as getIonMode } from './ionic-global-6cd57191.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}";
 
@@ -20,8 +21,8 @@ const Reorder = class {
   }
   render() {
     const mode = getIonMode(this);
-    const reorderIcon = mode === 'ios' ? 'reorder-three-outline' : 'reorder-two-sharp';
-    return (h(Host, { class: mode }, h("slot", null, h("ion-icon", { name: reorderIcon, lazy: false, class: "reorder-icon", part: "icon" }))));
+    const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
+    return (h(Host, { class: mode }, h("slot", null, h("ion-icon", { icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon" }))));
   }
   get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent } from './index-e4deec27.js';
+import { r as registerInstance, d as createEvent } from './index-cb938ffb.js';
 
 const RouteRedirect = class {
   constructor(hostRef) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent } from './index-e4deec27.js';
+import { r as registerInstance, d as createEvent } from './index-cb938ffb.js';
 
 const Route = class {
   constructor(hostRef) {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-e4deec27.js';
-import { g as getIonMode } from './ionic-global-2e28f7c7.js';
-import { o as openURL, c as createColorClasses } from './theme-d21826a7.js';
+import { r as registerInstance, h, H as Host } from './index-cb938ffb.js';
+import { g as getIonMode } from './ionic-global-6cd57191.js';
+import { o as openURL, c as createColorClasses } from './theme-7cf2cab0.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}";
 
@@ -21,11 +21,11 @@ const RouterLink = class {
     const attrs = {
       href: this.href,
       rel: this.rel,
-      target: this.target
+      target: this.target,
     };
     return (h(Host, { onClick: this.onClick, class: createColorClasses(this.color, {
         [mode]: true,
-        'ion-activatable': true
+        'ion-activatable': true,
       }) }, h("a", Object.assign({}, attrs), h("slot", null))));
   }
 };

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-e4deec27.js';
-import { g as getIonMode, c as config } from './ionic-global-2e28f7c7.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-9cd8048f.js';
-import { t as transition } from './index-8a463a85.js';
-import './helpers-44e3bd9f.js';
+import { r as registerInstance, d as createEvent, h, c as getElement } from './index-cb938ffb.js';
+import { g as getIonMode, c as config } from './ionic-global-6cd57191.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-538b6253.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-7e2b767b.js';
+import { s as shallowEqualStringMap } from './helpers-aeff219b.js';
+import { t as transition } from './index-6048aed6.js';
 
 const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
 
@@ -35,7 +35,7 @@ const RouterOutlet = class {
         this.swipeHandler.onStart();
       }
     };
-    this.gesture = (await import('./swipe-back-d84cfc8a.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 import('./swipe-back-7ef22876.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;
@@ -44,7 +44,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
@@ -95,23 +95,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 && shallowEqualStringMap(params, this.activeParams)) {
       return false;
     }
     // attach entering view to DOM
@@ -119,6 +122,7 @@ const RouterOutlet = class {
     const enteringEl = await 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 detachComponent(this.delegate, leavingEl);
@@ -136,8 +140,8 @@ const RouterOutlet = class {
     await 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
@@ -165,7 +169,7 @@ const RouterOutlet = class {
             this.ani = ani;
           }
         }
-        : undefined) }, opts), { animationBuilder }));
+        : undefined }, opts), { animationBuilder }));
     // emit nav changed event
     this.ionNavDidChange.emit();
     return true;
@@ -173,14 +177,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 (h("slot", null));
+    return h("slot", null);
   }
   get el() { return getElement(this); }
   static get watchers() { return {