@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/components/ion-reorder-group.js

@@ -0,0 +1,303 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { f as findClosestIonContent, g as getScrollElement } from './index5.js';
+import { r as raf } from './helpers.js';
+import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 /* ReorderGroupState.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('./index9.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.completeReorder(listOrReorder));
+  }
+  canStart(ev) {
+    if (this.selectedItemEl || this.state !== 0 /* ReorderGroupState.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 /* ReorderGroupState.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 /* ReorderGroupState.Complete */;
+    if (!selectedItemEl) {
+      this.state = 0 /* ReorderGroupState.Idle */;
+      return;
+    }
+    const toIndex = this.lastToIndex;
+    const fromIndex = indexForItem(selectedItemEl);
+    if (toIndex === fromIndex) {
+      this.completeReorder();
+    }
+    else {
+      this.ionItemReorder.emit({
+        from: fromIndex,
+        to: toIndex,
+        complete: this.completeReorder.bind(this),
+      });
+    }
+    hapticSelectionEnd();
+  }
+  completeReorder(listOrReorder) {
+    const selectedItemEl = this.selectedItemEl;
+    if (selectedItemEl && this.state === 2 /* ReorderGroupState.Complete */) {
+      const children = this.el.children;
+      const len = children.length;
+      const toIndex = this.lastToIndex;
+      const fromIndex = indexForItem(selectedItemEl);
+      /**
+       * 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);
+      }
+      selectedItemEl.style.transition = '';
+      selectedItemEl.classList.remove(ITEM_REORDER_SELECTED);
+      this.selectedItemEl = undefined;
+      this.state = 0 /* ReorderGroupState.Idle */;
+    }
+    return listOrReorder;
+  }
+  itemIndexForTop(deltaY) {
+    const heights = this.cachedHeights;
+    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 /* ReorderGroupState.Idle */,
+      } }));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "disabled": ["disabledChanged"]
+  }; }
+  static get style() { return reorderGroupCss; }
+}, [0, "ion-reorder-group", {
+    "disabled": [4],
+    "state": [32],
+    "complete": [64]
+  }]);
+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();
+};
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-reorder-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-reorder-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ReorderGroup);
+      }
+      break;
+  } });
+}
+
+const IonReorderGroup = ReorderGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonReorderGroup, defineCustomElement };

package/dist/components/ion-reorder.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { r as reorderThreeOutline, p as reorderTwoSharp } from './index2.js';
+import { g as getIonMode } from './ionic-global.js';
+import { d as defineCustomElement$2 } from './icon.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  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 this; }
+  static get style() { return {
+    ios: reorderIosCss,
+    md: reorderMdCss
+  }; }
+}, [33, "ion-reorder", undefined, [[2, "click", "onClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-reorder", "ion-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-reorder":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Reorder);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonReorder = Reorder;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonReorder, defineCustomElement };

package/dist/components/ion-ripple-effect.js

@@ -0,0 +1,6 @@
+import { R as RippleEffect, d as defineCustomElement$1 } from './ripple-effect.js';
+
+const IonRippleEffect = RippleEffect;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonRippleEffect, defineCustomElement };

package/dist/components/ion-route-redirect.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+
+const RouteRedirect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.ionRouteRedirectChanged = createEvent(this, "ionRouteRedirectChanged", 7);
+  }
+  propDidChange() {
+    this.ionRouteRedirectChanged.emit();
+  }
+  connectedCallback() {
+    this.ionRouteRedirectChanged.emit();
+  }
+  static get watchers() { return {
+    "from": ["propDidChange"],
+    "to": ["propDidChange"]
+  }; }
+}, [0, "ion-route-redirect", {
+    "from": [1],
+    "to": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-route-redirect"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-route-redirect":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RouteRedirect);
+      }
+      break;
+  } });
+}
+
+const IonRouteRedirect = RouteRedirect;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonRouteRedirect, defineCustomElement };

package/dist/components/ion-route.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+
+const Route = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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"]
+  }; }
+}, [0, "ion-route", {
+    "url": [1],
+    "component": [1],
+    "componentProps": [16],
+    "beforeLeave": [16],
+    "beforeEnter": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-route"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-route":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Route);
+      }
+      break;
+  } });
+}
+
+const IonRoute = Route;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonRoute, defineCustomElement };

package/dist/components/ion-router-link.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { o as openURL, c as createColorClasses } from './theme.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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))));
+  }
+  static get style() { return routerLinkCss; }
+}, [1, "ion-router-link", {
+    "color": [513],
+    "href": [1],
+    "rel": [1],
+    "routerDirection": [1, "router-direction"],
+    "routerAnimation": [16],
+    "target": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-router-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-router-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RouterLink);
+      }
+      break;
+  } });
+}
+
+const IonRouterLink = RouterLink;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonRouterLink, defineCustomElement };