@sparkle-learning/core 0.0.56 → 0.0.57

package/dist/sparkle-core/ion-reorder-group.entry.js

@@ -0,0 +1,277 @@
+import { r as registerInstance, q as createEvent, k as h, n as Host, o as getElement } from './index-1dec9544.js';
+import { g as getIonMode } from './ionic-global-127576f6.js';
+import { a as findClosestIonContent, g as getScrollElement } from './index-bb469fe3.js';
+import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-a9e94599.js';
+import './helpers-f11f0674.js';
+import './index-05b398c2.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 ReorderGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionItemReorder = createEvent(this, "ionItemReorder", 7);
+    this.lastToIndex = -1;
+    this.cachedHeights = [];
+    this.scrollElTop = 0;
+    this.scrollElBottom = 0;
+    this.scrollElInitial = 0;
+    this.containerTop = 0;
+    this.containerBottom = 0;
+    this.state = 0 /* Idle */;
+    /**
+     * If `true`, the reorder will be hidden.
+     */
+    this.disabled = true;
+  }
+  disabledChanged() {
+    if (this.gesture) {
+      this.gesture.enable(!this.disabled);
+    }
+  }
+  async connectedCallback() {
+    const contentEl = findClosestIonContent(this.el);
+    if (contentEl) {
+      this.scrollEl = await getScrollElement(contentEl);
+    }
+    this.gesture = (await import('./index-dd414b33.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),
+      onEnd: () => this.onEnd(),
+    });
+    this.disabledChanged();
+  }
+  disconnectedCallback() {
+    this.onEnd();
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  /**
+   * Completes the reorder operation. Must be called by the `ionItemReorder` event.
+   *
+   * If a list of items is passed, the list will be reordered and returned in the
+   * proper order.
+   *
+   * If no parameters are passed or if `true` is passed in, the reorder will complete
+   * and the item will remain in the position it was dragged to. If `false` is passed,
+   * the reorder will complete and the item will bounce back to its original position.
+   *
+   * @param listOrReorder A list of items to be sorted and returned in the new order or a
+   * boolean of whether or not the reorder should reposition the item.
+   */
+  complete(listOrReorder) {
+    return Promise.resolve(this.completeSync(listOrReorder));
+  }
+  canStart(ev) {
+    if (this.selectedItemEl || this.state !== 0 /* Idle */) {
+      return false;
+    }
+    const target = ev.event.target;
+    const reorderEl = target.closest('ion-reorder');
+    if (!reorderEl) {
+      return false;
+    }
+    const item = findReorderItem(reorderEl, this.el);
+    if (!item) {
+      return false;
+    }
+    ev.data = item;
+    return true;
+  }
+  onStart(ev) {
+    ev.event.preventDefault();
+    const item = (this.selectedItemEl = ev.data);
+    const heights = this.cachedHeights;
+    heights.length = 0;
+    const el = this.el;
+    const children = el.children;
+    if (!children || children.length === 0) {
+      return;
+    }
+    let sum = 0;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      sum += child.offsetHeight;
+      heights.push(sum);
+      child.$ionIndex = i;
+    }
+    const box = el.getBoundingClientRect();
+    this.containerTop = box.top;
+    this.containerBottom = box.bottom;
+    if (this.scrollEl) {
+      const scrollBox = this.scrollEl.getBoundingClientRect();
+      this.scrollElInitial = this.scrollEl.scrollTop;
+      this.scrollElTop = scrollBox.top + AUTO_SCROLL_MARGIN;
+      this.scrollElBottom = scrollBox.bottom - AUTO_SCROLL_MARGIN;
+    }
+    else {
+      this.scrollElInitial = 0;
+      this.scrollElTop = 0;
+      this.scrollElBottom = 0;
+    }
+    this.lastToIndex = indexForItem(item);
+    this.selectedItemHeight = item.offsetHeight;
+    this.state = 1 /* Active */;
+    item.classList.add(ITEM_REORDER_SELECTED);
+    hapticSelectionStart();
+  }
+  onMove(ev) {
+    const selectedItem = this.selectedItemEl;
+    if (!selectedItem) {
+      return;
+    }
+    // Scroll if we reach the scroll margins
+    const scroll = this.autoscroll(ev.currentY);
+    // // Get coordinate
+    const top = this.containerTop - scroll;
+    const bottom = this.containerBottom - scroll;
+    const currentY = Math.max(top, Math.min(ev.currentY, bottom));
+    const deltaY = scroll + currentY - ev.startY;
+    const normalizedY = currentY - top;
+    const toIndex = this.itemIndexForTop(normalizedY);
+    if (toIndex !== this.lastToIndex) {
+      const fromIndex = indexForItem(selectedItem);
+      this.lastToIndex = toIndex;
+      hapticSelectionChanged();
+      this.reorderMove(fromIndex, toIndex);
+    }
+    // Update selected item position
+    selectedItem.style.transform = `translateY(${deltaY}px)`;
+  }
+  onEnd() {
+    const selectedItemEl = this.selectedItemEl;
+    this.state = 2 /* Complete */;
+    if (!selectedItemEl) {
+      this.state = 0 /* Idle */;
+      return;
+    }
+    const toIndex = this.lastToIndex;
+    const fromIndex = indexForItem(selectedItemEl);
+    if (toIndex === fromIndex) {
+      this.completeSync();
+    }
+    else {
+      this.ionItemReorder.emit({
+        from: fromIndex,
+        to: toIndex,
+        complete: this.completeSync.bind(this),
+      });
+    }
+    hapticSelectionEnd();
+  }
+  completeSync(listOrReorder) {
+    const selectedItemEl = this.selectedItemEl;
+    if (selectedItemEl && this.state === 2 /* 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);
+      }
+      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 */;
+    }
+    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;
+      }
+    }
+    return heights.length - 1;
+  }
+  /********* DOM WRITE ********* */
+  reorderMove(fromIndex, toIndex) {
+    const itemHeight = this.selectedItemHeight;
+    const children = this.el.children;
+    for (let i = 0; i < children.length; i++) {
+      const style = children[i].style;
+      let value = '';
+      if (i > fromIndex && i <= toIndex) {
+        value = `translateY(${-itemHeight}px)`;
+      }
+      else if (i < fromIndex && i >= toIndex) {
+        value = `translateY(${itemHeight}px)`;
+      }
+      style['transform'] = value;
+    }
+  }
+  autoscroll(posY) {
+    if (!this.scrollEl) {
+      return 0;
+    }
+    let amount = 0;
+    if (posY < this.scrollElTop) {
+      amount = -SCROLL_JUMP;
+    }
+    else if (posY > this.scrollElBottom) {
+      amount = SCROLL_JUMP;
+    }
+    if (amount !== 0) {
+      this.scrollEl.scrollBy(0, amount);
+    }
+    return this.scrollEl.scrollTop - this.scrollElInitial;
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { class: {
+        [mode]: true,
+        'reorder-enabled': !this.disabled,
+        'reorder-list-active': this.state !== 0 /* Idle */,
+      } }));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["disabledChanged"]
+  }; }
+};
+const indexForItem = (element) => {
+  return element['$ionIndex'];
+};
+const findReorderItem = (node, container) => {
+  let parent;
+  while (node) {
+    parent = node.parentElement;
+    if (parent === container) {
+      return node;
+    }
+    node = parent;
+  }
+  return undefined;
+};
+const AUTO_SCROLL_MARGIN = 60;
+const SCROLL_JUMP = 10;
+const ITEM_REORDER_SELECTED = 'reorder-selected';
+const reorderArray = (array, from, to) => {
+  const element = array[from];
+  array.splice(from, 1);
+  array.splice(to, 0, element);
+  return array.slice();
+};
+ReorderGroup.style = reorderGroupCss;
+
+export { ReorderGroup as ion_reorder_group };

package/dist/sparkle-core/ion-reorder.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, k as h, n as Host, o as getElement } from './index-1dec9544.js';
+import { r as reorderThreeOutline, l as reorderTwoSharp } from './index-18a69883.js';
+import { g as getIonMode } from './ionic-global-127576f6.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}";
+
+const reorderMdCss = ":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block;font-size:22px}.reorder-icon{font-size:31px;opacity:0.3}";
+
+const Reorder = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  onClick(ev) {
+    const reorderGroup = this.el.closest('ion-reorder-group');
+    ev.preventDefault();
+    // Only stop event propagation if the reorder is inside of an enabled
+    // reorder group. This allows interaction with clickable children components.
+    if (!reorderGroup || !reorderGroup.disabled) {
+      ev.stopImmediatePropagation();
+    }
+  }
+  render() {
+    const mode = getIonMode(this);
+    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); }
+};
+Reorder.style = {
+  ios: reorderIosCss,
+  md: reorderMdCss
+};
+
+export { Reorder as ion_reorder };

package/dist/sparkle-core/ion-ripple-effect.entry.js

@@ -0,0 +1,89 @@
+import { r as registerInstance, t as readTask, l as writeTask, k as h, n as Host, o as getElement } from './index-1dec9544.js';
+import { g as getIonMode } from './ionic-global-127576f6.js';
+
+const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
+
+const RippleEffect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Sets the type of ripple-effect:
+     *
+     * - `bounded`: the ripple effect expands from the user's click position
+     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+     *
+     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+     * while surfaces for unbounded ripples should have it set to visible.
+     */
+    this.type = 'bounded';
+  }
+  /**
+   * Adds the ripple effect to the parent element.
+   *
+   * @param x The horizontal coordinate of where the ripple should start.
+   * @param y The vertical coordinate of where the ripple should start.
+   */
+  async addRipple(x, y) {
+    return new Promise((resolve) => {
+      readTask(() => {
+        const rect = this.el.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        const hypotenuse = Math.sqrt(width * width + height * height);
+        const maxDim = Math.max(height, width);
+        const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
+        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+        const finalScale = maxRadius / initialSize;
+        let posX = x - rect.left;
+        let posY = y - rect.top;
+        if (this.unbounded) {
+          posX = width * 0.5;
+          posY = height * 0.5;
+        }
+        const styleX = posX - initialSize * 0.5;
+        const styleY = posY - initialSize * 0.5;
+        const moveX = width * 0.5 - posX;
+        const moveY = height * 0.5 - posY;
+        writeTask(() => {
+          const div = document.createElement('div');
+          div.classList.add('ripple-effect');
+          const style = div.style;
+          style.top = styleY + 'px';
+          style.left = styleX + 'px';
+          style.width = style.height = initialSize + 'px';
+          style.setProperty('--final-scale', `${finalScale}`);
+          style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
+          const container = this.el.shadowRoot || this.el;
+          container.appendChild(div);
+          setTimeout(() => {
+            resolve(() => {
+              removeRipple(div);
+            });
+          }, 225 + 100);
+        });
+      });
+    });
+  }
+  get unbounded() {
+    return this.type === 'unbounded';
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { role: "presentation", class: {
+        [mode]: true,
+        unbounded: this.unbounded,
+      } }));
+  }
+  get el() { return getElement(this); }
+};
+const removeRipple = (ripple) => {
+  ripple.classList.add('fade-out');
+  setTimeout(() => {
+    ripple.remove();
+  }, 200);
+};
+const PADDING = 10;
+const INITIAL_ORIGIN_SCALE = 0.5;
+RippleEffect.style = rippleEffectCss;
+
+export { RippleEffect as ion_ripple_effect };

package/dist/sparkle-core/ion-route-redirect.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, q as createEvent } from './index-1dec9544.js';
+
+const RouteRedirect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionRouteRedirectChanged = createEvent(this, "ionRouteRedirectChanged", 7);
+  }
+  propDidChange() {
+    this.ionRouteRedirectChanged.emit();
+  }
+  connectedCallback() {
+    this.ionRouteRedirectChanged.emit();
+  }
+  static get watchers() { return {
+    "from": ["propDidChange"],
+    "to": ["propDidChange"]
+  }; }
+};
+
+export { RouteRedirect as ion_route_redirect };

package/dist/sparkle-core/ion-route.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, q as createEvent } from './index-1dec9544.js';
+
+const Route = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionRouteDataChanged = createEvent(this, "ionRouteDataChanged", 7);
+    /**
+     * Relative path that needs to match in order for this route to apply.
+     *
+     * Accepts paths similar to expressjs so that you can define parameters
+     * in the url /foo/:bar where bar would be available in incoming props.
+     */
+    this.url = '';
+  }
+  onUpdate(newValue) {
+    this.ionRouteDataChanged.emit(newValue);
+  }
+  onComponentProps(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+    const keys1 = newValue ? Object.keys(newValue) : [];
+    const keys2 = oldValue ? Object.keys(oldValue) : [];
+    if (keys1.length !== keys2.length) {
+      this.onUpdate(newValue);
+      return;
+    }
+    for (const key of keys1) {
+      if (newValue[key] !== oldValue[key]) {
+        this.onUpdate(newValue);
+        return;
+      }
+    }
+  }
+  connectedCallback() {
+    this.ionRouteDataChanged.emit();
+  }
+  static get watchers() { return {
+    "url": ["onUpdate"],
+    "component": ["onUpdate"],
+    "componentProps": ["onComponentProps"]
+  }; }
+};
+
+export { Route as ion_route };

package/dist/sparkle-core/ion-router-link.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, k as h, n as Host } from './index-1dec9544.js';
+import { g as getIonMode } from './ionic-global-127576f6.js';
+import { o as openURL, c as createColorClasses } from './theme-7ef00c83.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}";
+
+const RouterLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    this.routerDirection = 'forward';
+    this.onClick = (ev) => {
+      openURL(this.href, ev, this.routerDirection, this.routerAnimation);
+    };
+  }
+  render() {
+    const mode = getIonMode(this);
+    const attrs = {
+      href: this.href,
+      rel: this.rel,
+      target: this.target,
+    };
+    return (h(Host, { onClick: this.onClick, class: createColorClasses(this.color, {
+        [mode]: true,
+        'ion-activatable': true,
+      }) }, h("a", Object.assign({}, attrs), h("slot", null))));
+  }
+};
+RouterLink.style = routerLinkCss;
+
+export { RouterLink as ion_router_link };

package/dist/sparkle-core/ion-router-outlet.entry.js

@@ -0,0 +1,196 @@
+import { r as registerInstance, q as createEvent, k as h, o as getElement } from './index-1dec9544.js';
+import { g as getIonMode, c as config } from './ionic-global-127576f6.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-4c0db14f.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-d3fa493f.js';
+import { s as shallowEqualStringMap } from './helpers-f11f0674.js';
+import { t as transition } from './index-183cda39.js';
+
+const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
+
+const RouterOutlet = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
+    this.ionNavWillChange = createEvent(this, "ionNavWillChange", 3);
+    this.ionNavDidChange = createEvent(this, "ionNavDidChange", 3);
+    this.gestureOrAnimationInProgress = false;
+    /**
+     * The mode determines which platform styles to use.
+     */
+    this.mode = getIonMode(this);
+    /**
+     * If `true`, the router-outlet should animate the transition of components.
+     */
+    this.animated = true;
+  }
+  swipeHandlerChanged() {
+    if (this.gesture) {
+      this.gesture.enable(this.swipeHandler !== undefined);
+    }
+  }
+  async connectedCallback() {
+    const onStart = () => {
+      this.gestureOrAnimationInProgress = true;
+      if (this.swipeHandler) {
+        this.swipeHandler.onStart();
+      }
+    };
+    this.gesture = (await import('./swipe-back-9a614189.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;
+          if (this.swipeHandler) {
+            this.swipeHandler.onEnd(shouldComplete);
+          }
+        }, { oneTimeCallback: true });
+        // Account for rounding errors in JS
+        let newStepValue = shouldComplete ? -0.001 : 0.001;
+        /**
+         * Animation will be reversed here, so need to
+         * reverse the easing curve as well
+         *
+         * Additionally, we need to account for the time relative
+         * to the new easing curve, as `stepValue` is going to be given
+         * in terms of a linear curve.
+         */
+        if (!shouldComplete) {
+          this.ani.easing('cubic-bezier(1, 0, 0.68, 0.28)');
+          newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], step)[0];
+        }
+        else {
+          newStepValue += getTimeGivenProgression([0, 0], [0.32, 0.72], [0, 1], [1, 1], step)[0];
+        }
+        this.ani.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
+      }
+      else {
+        this.gestureOrAnimationInProgress = false;
+      }
+    });
+    this.swipeHandlerChanged();
+  }
+  componentWillLoad() {
+    this.ionNavWillLoad.emit();
+  }
+  disconnectedCallback() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  /** @internal */
+  async commit(enteringEl, leavingEl, opts) {
+    const unlock = await this.lock();
+    let changed = false;
+    try {
+      changed = await this.transition(enteringEl, leavingEl, opts);
+    }
+    catch (e) {
+      console.error(e);
+    }
+    unlock();
+    return changed;
+  }
+  /** @internal */
+  async setRouteId(id, params, direction, animation) {
+    const changed = await this.setRoot(id, params, {
+      duration: direction === 'root' ? 0 : undefined,
+      direction: direction === 'back' ? 'back' : 'forward',
+      animationBuilder: animation,
+    });
+    return {
+      changed,
+      element: this.activeEl,
+    };
+  }
+  /** @internal */
+  async getRouteId() {
+    const active = this.activeEl;
+    return active
+      ? {
+        id: active.tagName,
+        element: active,
+        params: this.activeParams,
+      }
+      : undefined;
+  }
+  async setRoot(component, params, opts) {
+    if (this.activeComponent === component && shallowEqualStringMap(params, this.activeParams)) {
+      return false;
+    }
+    // attach entering view to DOM
+    const leavingEl = this.activeEl;
+    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);
+    return true;
+  }
+  async transition(enteringEl, leavingEl, opts = {}) {
+    if (leavingEl === enteringEl) {
+      return false;
+    }
+    // emit nav will change event
+    this.ionNavWillChange.emit();
+    const { el, mode } = this;
+    const animated = this.animated && config.getBoolean('animated', true);
+    const animationBuilder = opts.animationBuilder || this.animation || config.get('navAnimation');
+    await transition(Object.assign(Object.assign({ mode,
+      animated,
+      enteringEl,
+      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
+           * the animation is ever set. In that scenario, we should
+           * immediately call progressEnd so that the transition promise
+           * resolves and the gesture does not get locked up.
+           */
+          if (ani !== undefined && !this.gestureOrAnimationInProgress) {
+            this.gestureOrAnimationInProgress = true;
+            ani.onFinish(() => {
+              this.gestureOrAnimationInProgress = false;
+              if (this.swipeHandler) {
+                this.swipeHandler.onEnd(false);
+              }
+            }, { oneTimeCallback: true });
+            /**
+             * Playing animation to beginning
+             * with a duration of 0 prevents
+             * any flickering when the animation
+             * is later cleaned up.
+             */
+            ani.progressEnd(0, 0, 0);
+          }
+          else {
+            this.ani = ani;
+          }
+        }
+        : undefined }, opts), { animationBuilder }));
+    // emit nav changed event
+    this.ionNavDidChange.emit();
+    return true;
+  }
+  async lock() {
+    const p = this.waitPromise;
+    let resolve;
+    this.waitPromise = new Promise((r) => (resolve = r));
+    if (p !== undefined) {
+      await p;
+    }
+    return resolve;
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "swipeHandler": ["swipeHandlerChanged"]
+  }; }
+};
+RouterOutlet.style = routeOutletCss;
+
+export { RouterOutlet as ion_router_outlet };