@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/collection/components/table/table.pin-service.js

@@ -1,389 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { readTask, writeTask } from "@stencil/core";
-import { CSSNAMESPACE } from "./table.constants";
-function addStyleSheet(id, css) {
-    const styleSheet = document.getElementById(id) ||
-        document.createElement('style');
-    styleSheet.id = id;
-    styleSheet.innerHTML = css;
-    if (!styleSheet.isConnected)
-        document.head.append(styleSheet);
-}
-/**
- * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.
- *
- * *knowing* when an element is pinned is tricky.
- * Managing the display of multiple, side-by-side pinned elements is trickier still.
- *
- * Pinning table columns are very different from pinning table rows:
- * - Rows are actual elements we can select, measure and apply styles to.
- * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.
- *
- * With this in mind, how columns and rows are pinned is different:
- * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.
- *
- * The service is slightly opinionated on how it pins rows and columns (with some room for override):
- * - Pinned columns are stuck consecutively, without overlapping.
- * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.
- * Both columns are important for context
- *
- * - Pinned rows are set to overlap *when* they have the same ancestor,
- * and stuck consecutively when they have a different ancestor.
- * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.
- * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.
- *
- * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.
- */
-export class TablePinService {
-    // Private state
-    cachedColMeta = new WeakMap();
-    tableId;
-    tableEle;
-    scrollElement;
-    startColumns;
-    endColumns;
-    topRows;
-    bottomRows;
-    tableDims;
-    constructor(table, scrollElement) {
-        this.tableEle = table;
-        this.tableId = this.tableEle.id;
-        this.scrollElement = scrollElement;
-        // Secret sauce - `getElementsByClassName` is a live collection.
-        // An HTMLCollection will keep itself up-to-date as elements come and go
-        // So we can keep assessing on scroll
-        this.startColumns = table
-            .querySelector('thead')
-            .getElementsByClassName(`${CSSNAMESPACE}__pin--start`);
-        this.endColumns = table
-            .querySelector('thead')
-            .getElementsByClassName(`${CSSNAMESPACE}__pin--end`);
-        this.topRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--top`);
-        this.bottomRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--bottom`);
-        this.onResize();
-    }
-    // Pinned cols & change detection
-    get pinnedStart() {
-        return this._pinnedStart;
-    }
-    set pinnedStart(cols) {
-        this._pinnedStart = cols;
-        this.handlePinnedStartChange();
-    }
-    _pinnedStart = [];
-    /**
-     * Called when columns are either pinned or unpinned.
-     * Attaches a tiny stylesheet to target the 'last' start column.
-     * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)
-     */
-    handlePinnedStartChange() {
-        writeTask(() => {
-            if (this.pinnedStart.length) {
-                this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--start`);
-                const lastActiveCol = this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length - 1]);
-                addStyleSheet(`${this.tableId}-col-start-active-style`, 
-                /* css */ `
-          #${this.tableId} tr > :nth-child(${lastActiveCol.idx + 1}) {
-            --pin-start-active: 1;
-          }
-        `);
-            }
-            else {
-                this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--start`);
-                addStyleSheet(`${this.tableId}-col-start-active-style`, ``);
-            }
-        });
-    }
-    get pinnedEnd() {
-        return this._pinnedEnd;
-    }
-    set pinnedEnd(cols) {
-        this._pinnedEnd = cols;
-        this.handlePinnedEndChange();
-    }
-    _pinnedEnd = [];
-    /**
-     * Called when columns are either pinned or unpinned.
-     * Attaches a tiny stylesheet to target the 'first' end column.
-     * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)
-     */
-    handlePinnedEndChange() {
-        writeTask(() => {
-            if (this.pinnedEnd.length) {
-                this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--end`);
-                const firstActiveCol = this.cachedColMeta.get(this.pinnedEnd[0]);
-                addStyleSheet(`${this.tableId}-col-end-active-style`, 
-                /* css */ `
-          #${this.tableId} tr > :nth-child(${firstActiveCol.idx + 1}) { --pin-end-active: 1; }
-        `);
-            }
-            else {
-                this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--end`);
-                addStyleSheet(`${this.tableId}-col-end-active-style`, ``);
-            }
-        });
-    }
-    get cssColDimensionCacheKey() {
-        return this._cssColDimensionCacheKey;
-    }
-    set cssColDimensionCacheKey(key) {
-        if (key === this._cssColDimensionCacheKey)
-            return;
-        this._cssColDimensionCacheKey = key;
-        this.createPinnedColDimensionStyles();
-    }
-    _cssColDimensionCacheKey = '';
-    /**
-     * To only generate column dimension styles when necessary we
-     * maintain a cache key string via serialised column meta.
-     * Only when this key changes do we generate a new stylesheet
-     */
-    generateCssCacheKey() {
-        let key = '';
-        for (const col of this.startColumns) {
-            const colMeta = this.cachedColMeta.get(col);
-            key += `${colMeta.idx}-start-${colMeta.width}`;
-        }
-        for (const col of this.endColumns) {
-            const colMeta = this.cachedColMeta.get(col);
-            key += `${colMeta.idx}-start-${colMeta.width}`;
-        }
-        this.cssColDimensionCacheKey = key;
-    }
-    /**
-     * Generates pinned column width offset styles
-     * so pinned columns can appear stuck together,
-     * then attaches a stylesheet.
-     */
-    createPinnedColDimensionStyles() {
-        let widthS = 0;
-        let widthE = 0;
-        const startCols = Array.from(this.startColumns);
-        const endCols = Array.from(this.endColumns).reverse();
-        const css = /* css */ `
-      ${startCols
-            .map((col) => {
-            const colMeta = this.cachedColMeta.get(col);
-            widthS += colMeta.width - 1 || -1;
-            return /* css */ `
-            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ td,
-            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ th {
-              --pin-start: ${widthS - 1}px;
-            }
-          `;
-        })
-            .join('')}
-      ${endCols
-            .map((col) => {
-            const colMeta = this.cachedColMeta.get(col);
-            widthE += colMeta.width - 1 || -1;
-            return /* css */ `
-            #${this.tableId} tr > td:has(~ :nth-child(${colMeta.idx + 1})),
-            #${this.tableId} tr > th:has(~ :nth-child(${colMeta.idx + 1})) {
-              --pin-end: ${widthE - 1}px;
-            }
-          `;
-        })
-            .join('')}
-    `;
-        addStyleSheet(`${this.tableId}-dimension-style`, css);
-    }
-    getParentOffsets() {
-        const { x, y } = this.scrollElement.getBoundingClientRect();
-        let offsetX = x;
-        let offsetY = y;
-        if (this.scrollElement === document.documentElement) {
-            offsetX = this.scrollElement.offsetLeft;
-            offsetY = this.scrollElement.offsetTop;
-        }
-        return { offsetX, offsetY };
-    }
-    /**
-     * Loops through all 'top' & 'bottom' rows (on scroll or resize)
-     * Manages their visual state by applying classes on stuck / unstuck
-     * And their pinned offset / distance
-     */
-    assessRows() {
-        if (!this.topRows.length && !this.bottomRows.length)
-            return;
-        // top rows
-        if (this.topRows.length) {
-            readTask(async () => {
-                let heightAggregate = 0;
-                let cacheParent;
-                const { offsetY } = this.getParentOffsets();
-                for (const topRow of this.topRows) {
-                    const { y, height } = topRow.getBoundingClientRect();
-                    const currParent = topRow.parentElement;
-                    // we'll use the applied `--pin-top` css var to decide row offset.
-                    // This allows devs to override this behaviour through selector specificity
-                    const pinTop = getComputedStyle(topRow).getPropertyValue('--pin-top');
-                    const offset = pinTop !== '' ? parseFloat(pinTop) : heightAggregate;
-                    // we need to wait for the row to finish sticking
-                    // and generating it's offset (`--pin-top`) so we can see, on
-                    // subsequent rows *if* the offset was applied
-                    writeTask(() => {
-                        if (y - offsetY <= offset) {
-                            topRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
-                        }
-                        else {
-                            topRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
-                        }
-                        // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
-                        // so only aggregate height / offset when cacheParent is different from current parent.
-                        // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
-                        if (cacheParent !== currParent) {
-                            currParent.style.setProperty('--pin-top', `${heightAggregate - 1}px`);
-                            heightAggregate += height - 1;
-                            cacheParent = currParent;
-                        }
-                    });
-                }
-            });
-        }
-        // bottom rows
-        if (this.bottomRows.length) {
-            const bottomRows = Array.from(this.bottomRows).reverse();
-            readTask(async () => {
-                let cacheParent;
-                let heightAggregate = 0;
-                const { offsetY } = this.getParentOffsets();
-                for (const bottomRow of bottomRows) {
-                    if (!bottomRow.isConnected)
-                        continue;
-                    const { y, height } = bottomRow.getBoundingClientRect();
-                    const currParent = bottomRow.parentElement;
-                    // we'll use the applied `--pin-bottom` css var to decide row offset.
-                    // This allows devs to override this behaviour through selector specificity
-                    const pinBottom = getComputedStyle(bottomRow).getPropertyValue('--pin-bottom');
-                    const offset = pinBottom !== '' ? parseFloat(pinBottom) : heightAggregate;
-                    // we need to wait for the row to finish sticking
-                    // and generating it's offset (`--pin-bottom`) to we can see, on
-                    // subsequent rows *if* the offset was applied
-                    await new Promise((resolve) => writeTask(() => {
-                        if (this.tableDims.height + offsetY - (y + height) <= offset) {
-                            bottomRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
-                        }
-                        else {
-                            bottomRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
-                        }
-                        // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
-                        // so only aggregate height / offset when cacheParent is different from current parent.
-                        // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
-                        if (cacheParent !== currParent) {
-                            currParent.style.setProperty('--pin-bottom', `${heightAggregate - 1}px`);
-                            heightAggregate += height - 1;
-                            cacheParent = currParent;
-                        }
-                        resolve();
-                    }));
-                }
-            });
-        }
-    }
-    /**
-     * Loops through all 'start' & 'end' columns (on scroll or resize)
-     * Caches meta about each column (e.g. size, position-index)
-     * and decides which columns are pinned
-     */
-    async assessCols() {
-        if (!this.startColumns.length && !this.endColumns.length)
-            return;
-        let boundBox;
-        let currPinned;
-        let parentEles;
-        const done = new Promise((resolve) => {
-            // start cols
-            if (this.startColumns.length) {
-                readTask(() => {
-                    const { offsetX } = this.getParentOffsets();
-                    // cumulatively add widths of columns together
-                    // 'cos columns stick together
-                    let widthAggregate = offsetX;
-                    parentEles = Array.from(this.startColumns[0].parentElement.children);
-                    for (const startCol of this.startColumns) {
-                        boundBox = startCol.getBoundingClientRect();
-                        // cache meta for later
-                        this.cachedColMeta.set(startCol, {
-                            width: boundBox.width,
-                            idx: parentEles.indexOf(startCol),
-                        });
-                        currPinned = this.pinnedStart.find((c) => c === startCol);
-                        if (boundBox.x < widthAggregate) {
-                            // this column is pinned
-                            if (!currPinned)
-                                this.pinnedStart = [
-                                    ...this.pinnedStart,
-                                    startCol,
-                                ];
-                        }
-                        else if (currPinned) {
-                            // this column is unpinned
-                            this.pinnedStart = this.pinnedStart.filter((c) => c !== startCol);
-                        }
-                        widthAggregate += boundBox.width;
-                    }
-                    if (!this.endColumns.length)
-                        resolve();
-                });
-            }
-            // end cols
-            if (this.endColumns.length) {
-                readTask(() => {
-                    const endCols = Array.from(this.endColumns).reverse();
-                    parentEles = Array.from(this.endColumns[0].parentElement.children);
-                    const { offsetX } = this.getParentOffsets();
-                    // cumulatively add widths of columns together
-                    // 'cos columns stick together
-                    let widthAggregate = 0;
-                    for (const endCol of endCols) {
-                        boundBox = endCol.getBoundingClientRect();
-                        // cache meta for later
-                        this.cachedColMeta.set(endCol, {
-                            width: boundBox.width,
-                            idx: parentEles.indexOf(endCol),
-                        });
-                        currPinned = this.pinnedEnd.find((c) => c === endCol);
-                        if (this.tableDims.width + offsetX - boundBox.right <=
-                            widthAggregate) {
-                            // this column is pinned
-                            if (!currPinned)
-                                this.pinnedEnd = [endCol, ...this.pinnedEnd];
-                        }
-                        else if (currPinned) {
-                            // this column is unpinned
-                            this.pinnedEnd = this.pinnedEnd.filter((c) => c !== endCol);
-                        }
-                        widthAggregate += boundBox.width;
-                    }
-                    resolve();
-                });
-            }
-        });
-        await done;
-        // potentially generate a new css stylesheet if anything changed
-        this.generateCssCacheKey();
-    }
-    cacheX = 0;
-    cacheY = 0;
-    onScroll(pos) {
-        if (this.cacheX !== pos.x) {
-            this.cacheX = pos.x;
-            this.assessCols();
-        }
-        if (this.cacheY !== pos.y) {
-            this.cacheY = pos.y;
-            this.assessRows();
-        }
-    }
-    onResize() {
-        const width = this.scrollElement.clientWidth;
-        const height = this.scrollElement.clientHeight;
-        this.tableDims = { width, height };
-        this.assessCols();
-        this.assessRows();
-    }
-}
-//# sourceMappingURL=table.pin-service.js.map

package/dist/collection/components/table/table.pin-service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.pin-service.js","sourceRoot":"","sources":["../../../../src/components/table/table.pin-service.ts"],"names":[],"mappings":"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","sourcesContent":["import { readTask, writeTask } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\n\nfunction addStyleSheet(id, css) {\n  const styleSheet =\n    (document.getElementById(id) as HTMLStyleElement) ||\n    document.createElement('style');\n  styleSheet.id = id;\n  styleSheet.innerHTML = css;\n  if (!styleSheet.isConnected) document.head.append(styleSheet);\n}\n\n/**\n * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.\n *\n * *knowing* when an element is pinned is tricky.\n * Managing the display of multiple, side-by-side pinned elements is trickier still.\n *\n * Pinning table columns are very different from pinning table rows:\n * - Rows are actual elements we can select, measure and apply styles to.\n * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.\n *\n * With this in mind, how columns and rows are pinned is different:\n * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.\n *\n * The service is slightly opinionated on how it pins rows and columns (with some room for override):\n * - Pinned columns are stuck consecutively, without overlapping.\n * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.\n * Both columns are important for context\n *\n * - Pinned rows are set to overlap *when* they have the same ancestor,\n * and stuck consecutively when they have a different ancestor.\n * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.\n * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.\n *\n * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.\n */\nexport class TablePinService {\n  // Private state\n\n  private cachedColMeta: WeakMap<HTMLElement, { width: number; idx: number }> =\n    new WeakMap();\n  private tableId: string;\n  private tableEle: HTMLTableElement;\n  private scrollElement: HTMLElement;\n  private startColumns: HTMLCollection;\n  private endColumns: HTMLCollection;\n  private topRows: HTMLCollection;\n  private bottomRows: HTMLCollection;\n  private tableDims: { height: number; width: number };\n\n  constructor(table: HTMLTableElement, scrollElement: HTMLElement) {\n    this.tableEle = table;\n    this.tableId = this.tableEle.id;\n    this.scrollElement = scrollElement;\n\n    // Secret sauce - `getElementsByClassName` is a live collection.\n    // An HTMLCollection will keep itself up-to-date as elements come and go\n    // So we can keep assessing on scroll\n\n    this.startColumns = table\n      .querySelector('thead')\n      .getElementsByClassName(`${CSSNAMESPACE}__pin--start`);\n    this.endColumns = table\n      .querySelector('thead')\n      .getElementsByClassName(`${CSSNAMESPACE}__pin--end`);\n    this.topRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--top`);\n    this.bottomRows = table.getElementsByClassName(\n      `${CSSNAMESPACE}__pin--bottom`\n    );\n    this.onResize();\n  }\n\n  // Pinned cols & change detection\n  private get pinnedStart() {\n    return this._pinnedStart;\n  }\n  private set pinnedStart(cols: HTMLElement[]) {\n    this._pinnedStart = cols;\n    this.handlePinnedStartChange();\n  }\n  private _pinnedStart: HTMLElement[] = [];\n\n  /**\n   * Called when columns are either pinned or unpinned.\n   * Attaches a tiny stylesheet to target the 'last' start column.\n   * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)\n   */\n  private handlePinnedStartChange() {\n    writeTask(() => {\n      if (this.pinnedStart.length) {\n        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--start`);\n        const lastActiveCol = this.cachedColMeta.get(\n          this.pinnedStart[this.pinnedStart.length - 1]\n        );\n\n        addStyleSheet(\n          `${this.tableId}-col-start-active-style`,\n          /* css */ `\n          #${this.tableId} tr > :nth-child(${lastActiveCol.idx + 1}) {\n            --pin-start-active: 1;\n          }\n        `\n        );\n      } else {\n        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--start`);\n        addStyleSheet(`${this.tableId}-col-start-active-style`, ``);\n      }\n    });\n  }\n\n  private get pinnedEnd() {\n    return this._pinnedEnd;\n  }\n  private set pinnedEnd(cols: HTMLElement[]) {\n    this._pinnedEnd = cols;\n    this.handlePinnedEndChange();\n  }\n  private _pinnedEnd: HTMLElement[] = [];\n\n  /**\n   * Called when columns are either pinned or unpinned.\n   * Attaches a tiny stylesheet to target the 'first' end column.\n   * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)\n   */\n  private handlePinnedEndChange() {\n    writeTask(() => {\n      if (this.pinnedEnd.length) {\n        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--end`);\n        const firstActiveCol = this.cachedColMeta.get(this.pinnedEnd[0]);\n\n        addStyleSheet(\n          `${this.tableId}-col-end-active-style`,\n          /* css */ `\n          #${this.tableId} tr > :nth-child(${\n            firstActiveCol.idx + 1\n          }) { --pin-end-active: 1; }\n        `\n        );\n      } else {\n        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--end`);\n        addStyleSheet(`${this.tableId}-col-end-active-style`, ``);\n      }\n    });\n  }\n\n  private get cssColDimensionCacheKey() {\n    return this._cssColDimensionCacheKey;\n  }\n  private set cssColDimensionCacheKey(key: string) {\n    if (key === this._cssColDimensionCacheKey) return;\n    this._cssColDimensionCacheKey = key;\n    this.createPinnedColDimensionStyles();\n  }\n  private _cssColDimensionCacheKey: string = '';\n\n  /**\n   * To only generate column dimension styles when necessary we\n   * maintain a cache key string via serialised column meta.\n   * Only when this key changes do we generate a new stylesheet\n   */\n  private generateCssCacheKey() {\n    let key = '';\n    for (const col of this.startColumns) {\n      const colMeta = this.cachedColMeta.get(col as HTMLElement);\n      key += `${colMeta.idx}-start-${colMeta.width}`;\n    }\n    for (const col of this.endColumns) {\n      const colMeta = this.cachedColMeta.get(col as HTMLElement);\n      key += `${colMeta.idx}-start-${colMeta.width}`;\n    }\n    this.cssColDimensionCacheKey = key;\n  }\n\n  /**\n   * Generates pinned column width offset styles\n   * so pinned columns can appear stuck together,\n   * then attaches a stylesheet.\n   */\n  private createPinnedColDimensionStyles() {\n    let widthS = 0;\n    let widthE = 0;\n    const startCols = Array.from(this.startColumns);\n    const endCols = Array.from(this.endColumns).reverse();\n\n    const css = /* css */ `\n      ${startCols\n        .map((col) => {\n          const colMeta = this.cachedColMeta.get(col as HTMLElement);\n          widthS += colMeta.width - 1 || -1;\n          return /* css */ `\n            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ td,\n            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ th {\n              --pin-start: ${widthS - 1}px;\n            }\n          `;\n        })\n        .join('')}\n      ${endCols\n        .map((col) => {\n          const colMeta = this.cachedColMeta.get(col as HTMLElement);\n          widthE += colMeta.width - 1 || -1;\n          return /* css */ `\n            #${this.tableId} tr > td:has(~ :nth-child(${colMeta.idx + 1})),\n            #${this.tableId} tr > th:has(~ :nth-child(${colMeta.idx + 1})) {\n              --pin-end: ${widthE - 1}px;\n            }\n          `;\n        })\n        .join('')}\n    `;\n    addStyleSheet(`${this.tableId}-dimension-style`, css);\n  }\n\n  private getParentOffsets() {\n    const { x, y } = this.scrollElement.getBoundingClientRect();\n\n    let offsetX = x;\n    let offsetY = y;\n\n    if (this.scrollElement === document.documentElement) {\n      offsetX = this.scrollElement.offsetLeft;\n      offsetY = this.scrollElement.offsetTop;\n    }\n    return { offsetX, offsetY };\n  }\n\n  /**\n   * Loops through all 'top' & 'bottom' rows (on scroll or resize)\n   * Manages their visual state by applying classes on stuck / unstuck\n   * And their pinned offset / distance\n   */\n  public assessRows() {\n    if (!this.topRows.length && !this.bottomRows.length) return;\n\n    // top rows\n    if (this.topRows.length) {\n      readTask(async () => {\n        let heightAggregate = 0;\n        let cacheParent: HTMLElement;\n        const { offsetY } = this.getParentOffsets();\n\n        for (const topRow of this.topRows) {\n          const { y, height } = topRow.getBoundingClientRect();\n          const currParent = topRow.parentElement;\n          // we'll use the applied `--pin-top` css var to decide row offset.\n          // This allows devs to override this behaviour through selector specificity\n          const pinTop = getComputedStyle(topRow).getPropertyValue('--pin-top');\n          const offset = pinTop !== '' ? parseFloat(pinTop) : heightAggregate;\n\n          // we need to wait for the row to finish sticking\n          // and generating it's offset (`--pin-top`) so we can see, on\n          // subsequent rows *if* the offset was applied\n          writeTask(() => {\n            if (y - offsetY <= offset) {\n              topRow.classList.add(\n                `${CSSNAMESPACE}__pinned`,\n                `${CSSNAMESPACE}__pinned--top`\n              );\n            } else {\n              topRow.classList.remove(\n                `${CSSNAMESPACE}__pinned`,\n                `${CSSNAMESPACE}__pinned--top`\n              );\n            }\n\n            // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)\n            // so only aggregate height / offset when cacheParent is different from current parent.\n            // Devs can override this behaviour by manually setting `--pin-bottom` on the table row\n            if (cacheParent !== currParent) {\n              currParent.style.setProperty(\n                '--pin-top',\n                `${heightAggregate - 1}px`\n              );\n              heightAggregate += height - 1;\n              cacheParent = currParent;\n            }\n          });\n        }\n      });\n    }\n\n    // bottom rows\n    if (this.bottomRows.length) {\n      const bottomRows = Array.from(this.bottomRows).reverse();\n      readTask(async () => {\n        let cacheParent: HTMLElement;\n        let heightAggregate = 0;\n        const { offsetY } = this.getParentOffsets();\n\n        for (const bottomRow of bottomRows) {\n          if (!bottomRow.isConnected) continue;\n\n          const { y, height } = bottomRow.getBoundingClientRect();\n          const currParent = bottomRow.parentElement;\n          // we'll use the applied `--pin-bottom` css var to decide row offset.\n          // This allows devs to override this behaviour through selector specificity\n          const pinBottom =\n            getComputedStyle(bottomRow).getPropertyValue('--pin-bottom');\n          const offset =\n            pinBottom !== '' ? parseFloat(pinBottom) : heightAggregate;\n\n          // we need to wait for the row to finish sticking\n          // and generating it's offset (`--pin-bottom`) to we can see, on\n          // subsequent rows *if* the offset was applied\n          await new Promise<void>((resolve) =>\n            writeTask(() => {\n              if (this.tableDims.height + offsetY - (y + height) <= offset) {\n                bottomRow.classList.add(\n                  `${CSSNAMESPACE}__pinned`,\n                  `${CSSNAMESPACE}__pinned--bottom`\n                );\n              } else {\n                bottomRow.classList.remove(\n                  `${CSSNAMESPACE}__pinned`,\n                  `${CSSNAMESPACE}__pinned--bottom`\n                );\n              }\n\n              // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)\n              // so only aggregate height / offset when cacheParent is different from current parent.\n              // Devs can override this behaviour by manually setting `--pin-bottom` on the table row\n              if (cacheParent !== currParent) {\n                currParent.style.setProperty(\n                  '--pin-bottom',\n                  `${heightAggregate - 1}px`\n                );\n                heightAggregate += height - 1;\n                cacheParent = currParent;\n              }\n              resolve();\n            })\n          );\n        }\n      });\n    }\n  }\n\n  /**\n   * Loops through all 'start' & 'end' columns (on scroll or resize)\n   * Caches meta about each column (e.g. size, position-index)\n   * and decides which columns are pinned\n   */\n  public async assessCols() {\n    if (!this.startColumns.length && !this.endColumns.length) return;\n\n    let boundBox: DOMRect;\n    let currPinned: HTMLElement;\n    let parentEles: Element[];\n\n    const done = new Promise<void>((resolve) => {\n      // start cols\n      if (this.startColumns.length) {\n        readTask(() => {\n          const { offsetX } = this.getParentOffsets();\n          // cumulatively add widths of columns together\n          // 'cos columns stick together\n          let widthAggregate = offsetX;\n          parentEles = Array.from(this.startColumns[0].parentElement.children);\n\n          for (const startCol of this.startColumns) {\n            boundBox = startCol.getBoundingClientRect();\n            // cache meta for later\n            this.cachedColMeta.set(startCol as HTMLElement, {\n              width: boundBox.width,\n              idx: parentEles.indexOf(startCol),\n            });\n\n            currPinned = this.pinnedStart.find((c) => c === startCol);\n            if (boundBox.x < widthAggregate) {\n              // this column is pinned\n              if (!currPinned)\n                this.pinnedStart = [\n                  ...this.pinnedStart,\n                  startCol as HTMLElement,\n                ];\n            } else if (currPinned) {\n              // this column is unpinned\n              this.pinnedStart = this.pinnedStart.filter((c) => c !== startCol);\n            }\n            widthAggregate += boundBox.width;\n          }\n          if (!this.endColumns.length) resolve();\n        });\n      }\n\n      // end cols\n      if (this.endColumns.length) {\n        readTask(() => {\n          const endCols = Array.from(this.endColumns).reverse();\n          parentEles = Array.from(this.endColumns[0].parentElement.children);\n          const { offsetX } = this.getParentOffsets();\n          // cumulatively add widths of columns together\n          // 'cos columns stick together\n          let widthAggregate = 0;\n\n          for (const endCol of endCols) {\n            boundBox = endCol.getBoundingClientRect();\n            // cache meta for later\n            this.cachedColMeta.set(endCol as HTMLElement, {\n              width: boundBox.width,\n              idx: parentEles.indexOf(endCol),\n            });\n\n            currPinned = this.pinnedEnd.find((c) => c === endCol);\n            if (\n              this.tableDims.width + offsetX - boundBox.right <=\n              widthAggregate\n            ) {\n              // this column is pinned\n              if (!currPinned)\n                this.pinnedEnd = [endCol as HTMLElement, ...this.pinnedEnd];\n            } else if (currPinned) {\n              // this column is unpinned\n              this.pinnedEnd = this.pinnedEnd.filter((c) => c !== endCol);\n            }\n            widthAggregate += boundBox.width;\n          }\n          resolve();\n        });\n      }\n    });\n\n    await done;\n    // potentially generate a new css stylesheet if anything changed\n    this.generateCssCacheKey();\n  }\n\n  private cacheX = 0;\n  private cacheY = 0;\n\n  public onScroll(pos: { x: number; y: number }) {\n    if (this.cacheX !== pos.x) {\n      this.cacheX = pos.x;\n      this.assessCols();\n    }\n    if (this.cacheY !== pos.y) {\n      this.cacheY = pos.y;\n      this.assessRows();\n    }\n  }\n\n  public onResize() {\n    const width = this.scrollElement.clientWidth;\n    const height = this.scrollElement.clientHeight;\n\n    this.tableDims = { width, height };\n    this.assessCols();\n    this.assessRows();\n  }\n}\n"]}

package/dist/collection/components/table/table.row.js

@@ -1,113 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { h } from "../../utils/renderer";
-import { headerPinClasses, mergeProperties, rowDataModel } from "./table.utils";
-import { baseCellClasses } from "./table.cell";
-import { CSSNAMESPACE } from "./table.constants";
-const tableCellContent = (props, children, ctx) => {
-    const cell = (h("div", { ...props.wrapperProps, class: {
-            [`${CSSNAMESPACE}__cell-content`]: true,
-            [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
-        } }, children));
-    return props.header ? (h("th", { scope: ctx, ...props.cellProps }, cell)) : (h("td", { ...props.cellProps }, cell));
-};
-export const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
-    // helper, generates <td> or <th>
-    const TableCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
-        return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'row');
-    };
-    let extraProps = {};
-    if (!rowModel) {
-        const model = rowDataModel(rowIndex);
-        rowModel = model.rowModel;
-    }
-    if (rowRenderer?.rowProperties) {
-        extraProps =
-            rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
-    }
-    let rowPinned;
-    if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
-        rowPinned = rowRenderer.pinned({ rowModel, rowIndex });
-    }
-    const props = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, extraProps);
-    const tpl = rowRenderer?.template;
-    /**
-     * Applies appropriate classes to td / th VNodes;
-     * which can be supplied by user defined templates
-     * @param children virtual / jsx node array
-     * @returns virtual / jsx node array
-     */
-    const applyCellClasses = (children) => {
-        return utils.map(children, (cNode, i) => {
-            if (['td', 'th'].includes(cNode.vtag.toString())) {
-                cNode.vattrs = mergeProperties({
-                    class: baseCellClasses(i, true),
-                }, cNode.vattrs);
-            }
-            return cNode;
-        });
-    };
-    if (tpl) {
-        let toRender = tpl(h, {
-            renderedRow: (h("tr", { ...props, key: rowModel.__uuid }, children)),
-            rowModel,
-            rowIndex,
-        }, TableCell);
-        if (Array.isArray(toRender)) {
-            toRender = utils.map(toRender, (node, i) => {
-                if (node.vtag === 'tr') {
-                    if (!node.vkey)
-                        node.vkey = `${rowModel.__uuid}_${i}`;
-                    node.vattrs = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, node.vattrs);
-                    if (node.vchildren) {
-                        node.vchildren = applyCellClasses(node.vchildren);
-                    }
-                }
-                return node;
-            });
-        }
-        return toRender;
-    }
-    return (h("tr", { ...props, key: rowModel.__uuid }, applyCellClasses(children)));
-};
-export const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
-children, utils) => {
-    let extraProps = {};
-    if (rowRenderer.rowProperties) {
-        extraProps = rowRenderer.rowProperties() || {};
-    }
-    const TableHeadFootCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
-        return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'col');
-    };
-    const pinned = rowRenderer.pinned || null;
-    const baseProps = { class: headerPinClasses('tr', pinned) };
-    const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-    const tpl = rowRenderer?.template;
-    if (tpl) {
-        let toRender = tpl(h, {
-            renderedRow: h("tr", { ...props }, children),
-        }, TableHeadFootCell);
-        if (Array.isArray(toRender)) {
-            toRender = utils.map(toRender, (node) => {
-                if (node.vtag === 'tr') {
-                    node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
-                    if (node.vchildren) {
-                        node.vchildren = utils.map(node.vchildren, (cNode) => {
-                            if (['td', 'th'].includes(cNode.vtag.toString())) {
-                                cNode.vattrs = mergeProperties({
-                                    class: headerPinClasses(cNode.vtag.toString(), pinned, true),
-                                }, cNode.vattrs);
-                            }
-                            return cNode;
-                        });
-                    }
-                }
-                return node;
-            });
-        }
-        return toRender;
-    }
-    return h("tr", { ...props }, children);
-};
-//# sourceMappingURL=table.row.js.map

package/dist/collection/components/table/table.row.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.row.js","sourceRoot":"","sources":["../../../../src/components/table/table.row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, VNode } from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { headerPinClasses, mergeProperties, rowDataModel } from './table.utils';\nimport { baseCellClasses } from './table.cell';\nimport { CSSNAMESPACE } from './table.constants';\nimport type { TableTypes } from './table-interface';\n\n// TABLE ROWS\n// (thead > tr, tfoot > tr, tr)\n\ntype TableRowProps = {\n  rowRenderer: TableTypes.RowRenderer;\n  rowIndex: number;\n  rowModel: TableTypes.RowData;\n  onRowPinned?: TableTypes.PinnedCb;\n};\n\nconst tableCellContent = (\n  props: TableTypes.TableRowCellHelperProps,\n  children: VNode[],\n  ctx: 'col' | 'row'\n): VNode => {\n  const cell = (\n    <div\n      {...props.wrapperProps}\n      class={{\n        [`${CSSNAMESPACE}__cell-content`]: true,\n        [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,\n      }}\n    >\n      {children}\n    </div>\n  );\n  return props.header ? (\n    <th scope={ctx} {...props.cellProps}>\n      {cell}\n    </th>\n  ) : (\n    <td {...props.cellProps}>{cell}</td>\n  );\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n  { rowRenderer, rowIndex, rowModel },\n  children,\n  utils\n) => {\n  // helper, generates <td> or <th>\n  const TableCell: FunctionalComponent<TableTypes.TableRowCellHelperProps> = (\n    { header, wrap, cellProps, wrapperProps },\n    children\n  ): VNode => {\n    return tableCellContent(\n      { header, wrap, cellProps, wrapperProps },\n      children,\n      'row'\n    );\n  };\n\n  let extraProps = {};\n\n  if (!rowModel) {\n    const model = rowDataModel(rowIndex);\n    rowModel = model.rowModel;\n  }\n\n  if (rowRenderer?.rowProperties) {\n    extraProps =\n      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;\n  }\n\n  let rowPinned: TableTypes.Position;\n  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n    rowPinned = rowRenderer.pinned({ rowModel, rowIndex });\n  }\n\n  const props = mergeProperties(\n    { class: headerPinClasses('tr', rowPinned, true) },\n    extraProps\n  );\n  const tpl = rowRenderer?.template;\n\n  /**\n   * Applies appropriate classes to td / th VNodes;\n   * which can be supplied by user defined templates\n   * @param children virtual / jsx node array\n   * @returns virtual / jsx node array\n   */\n  const applyCellClasses = (children: VNode[]) => {\n    return utils.map(children, (cNode, i) => {\n      if (['td', 'th'].includes(cNode.vtag.toString())) {\n        cNode.vattrs = mergeProperties(\n          {\n            class: baseCellClasses(i, true),\n          },\n          cNode.vattrs\n        );\n      }\n      return cNode;\n    });\n  };\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: (\n          <tr {...props} key={rowModel.__uuid}>\n            {children}\n          </tr>\n        ),\n        rowModel,\n        rowIndex,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node, i) => {\n        if (node.vtag === 'tr') {\n          if (!node.vkey) node.vkey = `${rowModel.__uuid}_${i}`;\n\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', rowPinned, true) },\n            node.vattrs\n          );\n\n          if (node.vchildren) {\n            node.vchildren = applyCellClasses(node.vchildren);\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return (\n    <tr {...props} key={rowModel.__uuid}>\n      {applyCellClasses(children)}\n    </tr>\n  );\n};\n\ntype TableHeadFootProps = {\n  rowRenderer: TableTypes.HeadFootRenderer;\n  onRowPinned?: TableTypes.PinnedCb;\n  onColPinned?: TableTypes.PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n  { rowRenderer }, // onRowPinned, onColPinned\n  children,\n  utils\n) => {\n  let extraProps = {};\n  if (rowRenderer.rowProperties) {\n    extraProps = rowRenderer.rowProperties() || {};\n  }\n\n  const TableHeadFootCell: FunctionalComponent<\n    TableTypes.TableRowCellHelperProps\n  > = ({ header, wrap, cellProps, wrapperProps }, children): VNode => {\n    return tableCellContent(\n      { header, wrap, cellProps, wrapperProps },\n      children,\n      'col'\n    );\n  };\n\n  const pinned = rowRenderer.pinned || null;\n  const baseProps = { class: headerPinClasses('tr', pinned) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: <tr {...props}>{children}</tr>,\n      },\n      TableHeadFootCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node) => {\n        if (node.vtag === 'tr') {\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class: headerPinClasses(\n                      cNode.vtag.toString() as 'th' | 'td',\n                      pinned,\n                      true\n                    ),\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return <tr {...props}>{children}</tr>;\n};\n"]}