@venite/components 0.16.35 → 0.16.36

package/dist/esm/ion-virtual-scroll.entry.js

@@ -1,5 +1,9 @@
-import { r as registerInstance, d as readTask, w as writeTask, f as forceUpdate, h, H as Host, a as getElement } from './index-67fab020.js';
+import { r as registerInstance, e as readTask, w as writeTask, f as forceUpdate, h, H as Host, d as getElement } from './index-034add74.js';
+import { c as componentOnReady } from './helpers-af86adf0.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const CELL_TYPE_ITEM = 'item';
 const CELL_TYPE_HEADER = 'header';
 const CELL_TYPE_FOOTER = 'footer';
@@ -7,248 +11,252 @@ const NODE_CHANGE_NONE = 0;
 const NODE_CHANGE_POSITION = 1;
 const NODE_CHANGE_CELL = 2;
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const MIN_READS = 2;
 const updateVDom = (dom, heightIndex, cells, range) => {
-    // reset dom
-    for (const node of dom) {
-        node.change = NODE_CHANGE_NONE;
-        node.d = true;
-    }
-    // try to match into exisiting dom
-    const toMutate = [];
-    const end = range.offset + range.length;
-    for (let i = range.offset; i < end; i++) {
-        const cell = cells[i];
-        const node = dom.find(n => n.d && n.cell === cell);
-        if (node) {
-            const top = heightIndex[i];
-            if (top !== node.top) {
-                node.top = top;
-                node.change = NODE_CHANGE_POSITION;
-            }
-            node.d = false;
-        }
-        else {
-            toMutate.push(cell);
-        }
-    }
-    // needs to append
-    const pool = dom.filter(n => n.d);
-    for (const cell of toMutate) {
-        const node = pool.find(n => n.d && n.cell.type === cell.type);
-        const index = cell.i;
-        if (node) {
-            node.d = false;
-            node.change = NODE_CHANGE_CELL;
-            node.cell = cell;
-            node.top = heightIndex[index];
-        }
-        else {
-            dom.push({
-                d: false,
-                cell,
-                visible: true,
-                change: NODE_CHANGE_CELL,
-                top: heightIndex[index],
-            });
-        }
-    }
-    dom
-        .filter(n => n.d && n.top !== -9999)
-        .forEach(n => {
-        n.change = NODE_CHANGE_POSITION;
-        n.top = -9999;
-    });
+  // reset dom
+  for (const node of dom) {
+    node.change = NODE_CHANGE_NONE;
+    node.d = true;
+  }
+  // try to match into exisiting dom
+  const toMutate = [];
+  const end = range.offset + range.length;
+  for (let i = range.offset; i < end; i++) {
+    const cell = cells[i];
+    const node = dom.find((n) => n.d && n.cell === cell);
+    if (node) {
+      const top = heightIndex[i];
+      if (top !== node.top) {
+        node.top = top;
+        node.change = NODE_CHANGE_POSITION;
+      }
+      node.d = false;
+    }
+    else {
+      toMutate.push(cell);
+    }
+  }
+  // needs to append
+  const pool = dom.filter((n) => n.d);
+  for (const cell of toMutate) {
+    const node = pool.find((n) => n.d && n.cell.type === cell.type);
+    const index = cell.i;
+    if (node) {
+      node.d = false;
+      node.change = NODE_CHANGE_CELL;
+      node.cell = cell;
+      node.top = heightIndex[index];
+    }
+    else {
+      dom.push({
+        d: false,
+        cell,
+        visible: true,
+        change: NODE_CHANGE_CELL,
+        top: heightIndex[index],
+      });
+    }
+  }
+  dom
+    .filter((n) => n.d && n.top !== -9999)
+    .forEach((n) => {
+    n.change = NODE_CHANGE_POSITION;
+    n.top = -9999;
+  });
 };
 const doRender = (el, nodeRender, dom, updateCellHeight) => {
-    const children = Array.from(el.children).filter(n => n.tagName !== 'TEMPLATE');
-    const childrenNu = children.length;
-    let child;
-    for (let i = 0; i < dom.length; i++) {
-        const node = dom[i];
-        const cell = node.cell;
-        // the cell change, the content must be updated
-        if (node.change === NODE_CHANGE_CELL) {
-            if (i < childrenNu) {
-                child = children[i];
-                nodeRender(child, cell, i);
-            }
-            else {
-                const newChild = createNode(el, cell.type);
-                child = nodeRender(newChild, cell, i) || newChild;
-                child.classList.add('virtual-item');
-                el.appendChild(child);
-            }
-            child['$ionCell'] = cell;
-        }
-        else {
-            child = children[i];
-        }
-        // only update position when it changes
-        if (node.change !== NODE_CHANGE_NONE) {
-            child.style.transform = `translate3d(0,${node.top}px,0)`;
-        }
-        // update visibility
-        const visible = cell.visible;
-        if (node.visible !== visible) {
-            if (visible) {
-                child.classList.remove('virtual-loading');
-            }
-            else {
-                child.classList.add('virtual-loading');
-            }
-            node.visible = visible;
-        }
-        // dynamic height
-        if (cell.reads > 0) {
-            updateCellHeight(cell, child);
-            cell.reads--;
-        }
+  const children = Array.from(el.children).filter((n) => n.tagName !== 'TEMPLATE');
+  const childrenNu = children.length;
+  let child;
+  for (let i = 0; i < dom.length; i++) {
+    const node = dom[i];
+    const cell = node.cell;
+    // the cell change, the content must be updated
+    if (node.change === NODE_CHANGE_CELL) {
+      if (i < childrenNu) {
+        child = children[i];
+        nodeRender(child, cell, i);
+      }
+      else {
+        const newChild = createNode(el, cell.type);
+        child = nodeRender(newChild, cell, i) || newChild;
+        child.classList.add('virtual-item');
+        el.appendChild(child);
+      }
+      child['$ionCell'] = cell;
+    }
+    else {
+      child = children[i];
+    }
+    // only update position when it changes
+    if (node.change !== NODE_CHANGE_NONE) {
+      child.style.transform = `translate3d(0,${node.top}px,0)`;
+    }
+    // update visibility
+    const visible = cell.visible;
+    if (node.visible !== visible) {
+      if (visible) {
+        child.classList.remove('virtual-loading');
+      }
+      else {
+        child.classList.add('virtual-loading');
+      }
+      node.visible = visible;
     }
+    // dynamic height
+    if (cell.reads > 0) {
+      updateCellHeight(cell, child);
+      cell.reads--;
+    }
+  }
 };
 const createNode = (el, type) => {
-    const template = getTemplate(el, type);
-    if (template && el.ownerDocument) {
-        return el.ownerDocument.importNode(template.content, true).children[0];
-    }
-    return null;
+  const template = getTemplate(el, type);
+  if (template && el.ownerDocument) {
+    return el.ownerDocument.importNode(template.content, true).children[0];
+  }
+  return null;
 };
 const getTemplate = (el, type) => {
-    switch (type) {
-        case CELL_TYPE_ITEM: return el.querySelector('template:not([name])');
-        case CELL_TYPE_HEADER: return el.querySelector('template[name=header]');
-        case CELL_TYPE_FOOTER: return el.querySelector('template[name=footer]');
-    }
+  switch (type) {
+    case CELL_TYPE_ITEM:
+      return el.querySelector('template:not([name])');
+    case CELL_TYPE_HEADER:
+      return el.querySelector('template[name=header]');
+    case CELL_TYPE_FOOTER:
+      return el.querySelector('template[name=footer]');
+  }
 };
 const getViewport = (scrollTop, vierportHeight, margin) => {
-    return {
-        top: Math.max(scrollTop - margin, 0),
-        bottom: scrollTop + vierportHeight + margin
-    };
+  return {
+    top: Math.max(scrollTop - margin, 0),
+    bottom: scrollTop + vierportHeight + margin,
+  };
 };
 const getRange = (heightIndex, viewport, buffer) => {
-    const topPos = viewport.top;
-    const bottomPos = viewport.bottom;
-    // find top index
-    let i = 0;
-    for (; i < heightIndex.length; i++) {
-        if (heightIndex[i] > topPos) {
-            break;
-        }
-    }
-    const offset = Math.max(i - buffer - 1, 0);
-    // find bottom index
-    for (; i < heightIndex.length; i++) {
-        if (heightIndex[i] >= bottomPos) {
-            break;
-        }
-    }
-    const end = Math.min(i + buffer, heightIndex.length);
-    const length = end - offset;
-    return { offset, length };
+  const topPos = viewport.top;
+  const bottomPos = viewport.bottom;
+  // find top index
+  let i = 0;
+  for (; i < heightIndex.length; i++) {
+    if (heightIndex[i] > topPos) {
+      break;
+    }
+  }
+  const offset = Math.max(i - buffer - 1, 0);
+  // find bottom index
+  for (; i < heightIndex.length; i++) {
+    if (heightIndex[i] >= bottomPos) {
+      break;
+    }
+  }
+  const end = Math.min(i + buffer, heightIndex.length);
+  const length = end - offset;
+  return { offset, length };
 };
 const getShouldUpdate = (dirtyIndex, currentRange, range) => {
-    const end = range.offset + range.length;
-    return (dirtyIndex <= end ||
-        currentRange.offset !== range.offset ||
-        currentRange.length !== range.length);
+  const end = range.offset + range.length;
+  return dirtyIndex <= end || currentRange.offset !== range.offset || currentRange.length !== range.length;
 };
 const findCellIndex = (cells, index) => {
-    const max = cells.length > 0 ? cells[cells.length - 1].index : 0;
-    if (index === 0) {
-        return 0;
-    }
-    else if (index === max + 1) {
-        return cells.length;
-    }
-    else {
-        return cells.findIndex(c => c.index === index);
-    }
+  const max = cells.length > 0 ? cells[cells.length - 1].index : 0;
+  if (index === 0) {
+    return 0;
+  }
+  else if (index === max + 1) {
+    return cells.length;
+  }
+  else {
+    return cells.findIndex((c) => c.index === index);
+  }
 };
 const inplaceUpdate = (dst, src, offset) => {
-    if (offset === 0 && src.length >= dst.length) {
-        return src;
-    }
-    for (let i = 0; i < src.length; i++) {
-        dst[i + offset] = src[i];
-    }
-    return dst;
+  if (offset === 0 && src.length >= dst.length) {
+    return src;
+  }
+  for (let i = 0; i < src.length; i++) {
+    dst[i + offset] = src[i];
+  }
+  return dst;
 };
 const calcCells = (items, itemHeight, headerHeight, footerHeight, headerFn, footerFn, approxHeaderHeight, approxFooterHeight, approxItemHeight, j, offset, len) => {
-    const cells = [];
-    const end = len + offset;
-    for (let i = offset; i < end; i++) {
-        const item = items[i];
-        if (headerFn) {
-            const value = headerFn(item, i, items);
-            if (value != null) {
-                cells.push({
-                    i: j++,
-                    type: CELL_TYPE_HEADER,
-                    value,
-                    index: i,
-                    height: headerHeight ? headerHeight(value, i) : approxHeaderHeight,
-                    reads: headerHeight ? 0 : MIN_READS,
-                    visible: !!headerHeight,
-                });
-            }
-        }
+  const cells = [];
+  const end = len + offset;
+  for (let i = offset; i < end; i++) {
+    const item = items[i];
+    if (headerFn) {
+      const value = headerFn(item, i, items);
+      if (value != null) {
+        cells.push({
+          i: j++,
+          type: CELL_TYPE_HEADER,
+          value,
+          index: i,
+          height: headerHeight ? headerHeight(value, i) : approxHeaderHeight,
+          reads: headerHeight ? 0 : MIN_READS,
+          visible: !!headerHeight,
+        });
+      }
+    }
+    cells.push({
+      i: j++,
+      type: CELL_TYPE_ITEM,
+      value: item,
+      index: i,
+      height: itemHeight ? itemHeight(item, i) : approxItemHeight,
+      reads: itemHeight ? 0 : MIN_READS,
+      visible: !!itemHeight,
+    });
+    if (footerFn) {
+      const value = footerFn(item, i, items);
+      if (value != null) {
         cells.push({
-            i: j++,
-            type: CELL_TYPE_ITEM,
-            value: item,
-            index: i,
-            height: itemHeight ? itemHeight(item, i) : approxItemHeight,
-            reads: itemHeight ? 0 : MIN_READS,
-            visible: !!itemHeight,
+          i: j++,
+          type: CELL_TYPE_FOOTER,
+          value,
+          index: i,
+          height: footerHeight ? footerHeight(value, i) : approxFooterHeight,
+          reads: footerHeight ? 0 : MIN_READS,
+          visible: !!footerHeight,
         });
-        if (footerFn) {
-            const value = footerFn(item, i, items);
-            if (value != null) {
-                cells.push({
-                    i: j++,
-                    type: CELL_TYPE_FOOTER,
-                    value,
-                    index: i,
-                    height: footerHeight ? footerHeight(value, i) : approxFooterHeight,
-                    reads: footerHeight ? 0 : MIN_READS,
-                    visible: !!footerHeight,
-                });
-            }
-        }
-    }
-    return cells;
+      }
+    }
+  }
+  return cells;
 };
 const calcHeightIndex = (buf, cells, index) => {
-    let acum = buf[index];
-    for (let i = index; i < buf.length; i++) {
-        buf[i] = acum;
-        acum += cells[i].height;
-    }
-    return acum;
+  let acum = buf[index];
+  for (let i = index; i < buf.length; i++) {
+    buf[i] = acum;
+    acum += cells[i].height;
+  }
+  return acum;
 };
 const resizeBuffer = (buf, len) => {
-    if (!buf) {
-        return new Uint32Array(len);
-    }
-    if (buf.length === len) {
-        return buf;
-    }
-    else if (len > buf.length) {
-        const newBuf = new Uint32Array(len);
-        newBuf.set(buf);
-        return newBuf;
-    }
-    else {
-        return buf.subarray(0, len);
-    }
+  if (!buf) {
+    return new Uint32Array(len);
+  }
+  if (buf.length === len) {
+    return buf;
+  }
+  else if (len > buf.length) {
+    const newBuf = new Uint32Array(len);
+    newBuf.set(buf);
+    return newBuf;
+  }
+  else {
+    return buf.subarray(0, len);
+  }
 };
 const positionForIndex = (index, cells, heightIndex) => {
-    const cell = cells.find(c => c.type === CELL_TYPE_ITEM && c.index === index);
-    if (cell) {
-        return heightIndex[cell.i];
-    }
-    return -1;
+  const cell = cells.find((c) => c.type === CELL_TYPE_ITEM && c.index === index);
+  if (cell) {
+    return heightIndex[cell.i];
+  }
+  return -1;
 };
 
 const virtualScrollCss = "ion-virtual-scroll{display:block;position:relative;width:100%;contain:strict;user-select:none}ion-virtual-scroll>.virtual-loading{opacity:0}ion-virtual-scroll>.virtual-item{position:absolute !important;top:0 !important;right:0 !important;left:0 !important;transition-duration:0ms;will-change:transform}";
@@ -306,6 +314,9 @@ const VirtualScroll = class {
     this.calcCells();
     this.updateVirtualScroll();
   }
+  componentWillLoad() {
+    console.warn(`[Deprecation Warning]: ion-virtual-scroll has been deprecated and will be removed in Ionic Framework v7.0. See https://ionicframework.com/docs/angular/virtual-scroll for migration steps.`);
+  }
   async connectedCallback() {
     const contentEl = this.el.closest('ion-content');
     if (!contentEl) {
@@ -337,7 +348,7 @@ const VirtualScroll = class {
    * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as
    * dirty any time the content or their style changes.
    *
-   * The subset of items to be updated can are specifing by an offset and a length.
+   * The subset of items to be updated can are specifying by an offset and a length.
    */
   async checkRange(offset, len = -1) {
     // TODO: kind of hacky how we do in-place updated of the cells
@@ -345,9 +356,7 @@ const VirtualScroll = class {
     if (!this.items) {
       return;
     }
-    const length = (len === -1)
-      ? this.items.length - offset
-      : len;
+    const length = len === -1 ? this.items.length - offset : len;
     const cellIndex = findCellIndex(this.cells, offset);
     const cells = calcCells(this.items, this.itemHeight, this.headerHeight, this.footerHeight, this.headerFn, this.footerFn, this.approxHeaderHeight, this.approxFooterHeight, this.approxItemHeight, cellIndex, offset, length);
     this.cells = inplaceUpdate(this.cells, cells, cellIndex);
@@ -389,7 +398,7 @@ const VirtualScroll = class {
     let node = el;
     while (node && node !== contentEl) {
       topOffset += node.offsetTop;
-      node = node.parentElement;
+      node = node.offsetParent;
     }
     this.viewportOffset = topOffset;
     if (scrollEl) {
@@ -434,8 +443,8 @@ const VirtualScroll = class {
         this.setCellHeight(cell, height);
       }
     };
-    if (node && node.componentOnReady) {
-      node.componentOnReady().then(update);
+    if (node) {
+      componentOnReady(node, update);
     }
     else {
       update();
@@ -459,8 +468,7 @@ const VirtualScroll = class {
     this.timerUpdate = setTimeout(() => this.updateVirtualScroll(), 100);
   }
   updateState() {
-    const shouldEnable = !!(this.scrollEl &&
-      this.cells);
+    const shouldEnable = !!(this.scrollEl && this.cells);
     if (shouldEnable !== this.isEnabled) {
       this.enableScrollEvents(shouldEnable);
       if (shouldEnable) {
@@ -505,15 +513,18 @@ const VirtualScroll = class {
   renderVirtualNode(node) {
     const { type, value, index } = node.cell;
     switch (type) {
-      case CELL_TYPE_ITEM: return this.renderItem(value, index);
-      case CELL_TYPE_HEADER: return this.renderHeader(value, index);
-      case CELL_TYPE_FOOTER: return this.renderFooter(value, index);
+      case CELL_TYPE_ITEM:
+        return this.renderItem(value, index);
+      case CELL_TYPE_HEADER:
+        return this.renderHeader(value, index);
+      case CELL_TYPE_FOOTER:
+        return this.renderFooter(value, index);
     }
   }
   render() {
     return (h(Host, { style: {
-        height: `${this.totalHeight}px`
-      } }, this.renderItem && (h(VirtualProxy, { dom: this.virtualDom }, this.virtualDom.map(node => this.renderVirtualNode(node))))));
+        height: `${this.totalHeight}px`,
+      } }, this.renderItem && (h(VirtualProxy, { dom: this.virtualDom }, this.virtualDom.map((node) => this.renderVirtualNode(node))))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {