@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/cjs/nano-table.cjs.entry.js

@@ -1,20 +1,239 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var throttle = require('./throttle-CrRDOkln.js');
+var renderer = require('./renderer-SkVn69pT.js');
 
-const nanoTable_entry = require('./nano-table-54523fe5.js');
-require('./index-615cdb64.js');
-require('./renderer-cd8b6098.js');
-require('./math-ea9cdc71.js');
-require('./throttle-46a497fb.js');
-require('./scroll-parent-798d9651.js');
-require('./index-a92a0379.js');
+const tableCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 
+const NanoTable = class {
+    get host() { return index.getElement(this); }
+    propsReady = false;
+    /** If true, the table will be rendered in a compact style. */
+    compact = 'auto';
+    handleCompactChange() {
+        this.setupProperties();
+    }
+    /** If true, will render any nested table in a scrollable container (using `overflow: auto`) */
+    scrollable = true;
+    /** Visually hide the table's caption */
+    hideCaption = false;
+    handleHideCaptionChange() {
+        const caption = this.caption;
+        if (!caption)
+            return;
+        caption.classList.toggle('visually-hidden', this.hideCaption);
+    }
+    resizeObserver;
+    mutationObserver;
+    intersectionObserver;
+    settingUp = false;
+    get table() {
+        return this.host.querySelector('table');
+    }
+    get caption() {
+        const caption = this.host.querySelector('caption');
+        if (!caption) {
+            console.error('nano-table: No caption found. For better a11y, please add a <caption> element to the table.');
+            return null;
+        }
+        return caption;
+    }
+    setupProperties = () => {
+        const table = this.table;
+        if (!table || this.settingUp)
+            return;
+        this.settingUp = true;
+        // Clickable rows
+        const rows = Array.from(this.host.querySelectorAll('tr'));
+        for (const row of rows) {
+            if (this.getRowClickElements(row).length === 1) {
+                row.setAttribute('clickable', 'true');
+                row.addEventListener('click', this.rowClickHandler);
+            }
+            else {
+                row.removeAttribute('clickable');
+                row.removeEventListener('click', this.rowClickHandler);
+            }
+        }
+        // Sticky columns and rows
+        const tableSections = table.querySelectorAll('thead, tbody, tfoot');
+        let offset = 0;
+        if (table.querySelector('[sticky=start], [sticky=end]')) {
+            for (const section of tableSections) {
+                const sectionHeight = section.offsetHeight;
+                // this is used to make the column shadows when the columns stick;
+                // it allows to have one long shadow instead of one per row
+                section.style.setProperty('--section-height', `${sectionHeight}px`);
+            }
+            const headCols = Array.from(this.host.querySelectorAll('thead th, thead td'));
+            for (const col of headCols) {
+                if (col.matches('[sticky=start]')) {
+                    this.makeCellsSticky(col, 'start', offset);
+                    if (offset > 0) {
+                        col.style.setProperty('--sticky-start', `${offset}px`);
+                    }
+                    offset += col.offsetWidth - 1;
+                }
+            }
+            offset = 0;
+            for (const col of [...headCols].reverse()) {
+                if (col.matches('[sticky=end]')) {
+                    this.makeCellsSticky(col, 'end', offset);
+                    if (offset > 0) {
+                        col.style.setProperty('--sticky-end', `${offset}px`);
+                    }
+                    offset += col.offsetWidth - 1;
+                }
+            }
+        }
+        if (table.querySelector('[sticky=top]')) {
+            // sticky rows are slightly different; we only want one per section to be visible (the rest will overlap)
+            // e.g. 1 tr in thead, 1 tr in tbody, 1 tr in tfoot
+            offset = 0;
+            for (const section of tableSections) {
+                const stickyRows = Array.from(section.querySelectorAll('tr[sticky]'));
+                for (const [idx, row] of stickyRows.entries()) {
+                    if (row.matches('[sticky=top]') && offset > 0) {
+                        row.style.setProperty('--sticky-top', `${offset}px`);
+                    }
+                    if (idx === stickyRows.length - 1) {
+                        offset += row.offsetHeight - 1;
+                    }
+                }
+            }
+        }
+        this.settingUp = false;
+        this.propsReady = true;
+    };
+    getRowClickElements(row) {
+        const anchors = row.querySelectorAll('a');
+        const buttons = row.querySelectorAll('button');
+        const cbs = Array.from(row.querySelectorAll('input[type="checkbox"]')).filter((cb) => {
+            // filter out checkboxes that are not nano-checkboxes
+            return !cb.closest('nano-checkbox');
+        });
+        const radios = Array.from(row.querySelectorAll('input[type="radio"]')).filter((radio) => {
+            // filter out radios that are not nano-checkboxes
+            return !radio.closest('nano-checkbox');
+        });
+        const nanoCbs = row.querySelectorAll('nano-checkbox');
+        return [...anchors, ...buttons, ...nanoCbs, ...cbs, ...radios];
+    }
+    rowClickHandler = (e) => {
+        const target = e.target;
+        const row = target.closest('tr');
+        if (!row)
+            return;
+        const clickEle = this.getRowClickElements(row);
+        if (clickEle.length === 1 &&
+            target.closest(clickEle[0].tagName) !== clickEle[0]) {
+            clickEle[0].click();
+        }
+    };
+    makeCellsSticky(thElement, sticky, offset = 0) {
+        const table = thElement.closest('table');
+        const theadRow = thElement.closest('tr');
+        const ths = Array.from(theadRow.cells);
+        // Step 1: Get the visual column index of the target th (respecting colspan)
+        let targetColIndex = 0;
+        for (const th of ths) {
+            if (th === thElement)
+                break;
+            targetColIndex += th.colSpan || 1;
+        }
+        // Step 2: Iterate through tbody rows and find the corresponding cell
+        for (const tbody of table.tBodies) {
+            for (const row of tbody.rows) {
+                let colIndex = 0;
+                for (const cell of row.cells) {
+                    const span = cell.colSpan || 1;
+                    if (colIndex <= targetColIndex && targetColIndex < colIndex + span) {
+                        cell.setAttribute('sticky', sticky);
+                        if (offset > 0) {
+                            cell.style.setProperty('--sticky-' + sticky, `${offset}px`);
+                        }
+                        break;
+                    }
+                    colIndex += span;
+                }
+            }
+        }
+    }
+    addObservers() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.setupProperties();
+        });
+        this.resizeObserver.observe(this.host);
+        this.mutationObserver = new MutationObserver(() => {
+            this.setupProperties();
+        });
+        const table = this.table;
+        this.mutationObserver.observe(table, {
+            childList: true,
+            subtree: true,
+        });
+        // dimensions will not be accurate until table is in the viewport
+        this.intersectionObserver = new IntersectionObserver(() => {
+            this.setupProperties();
+            this.intersectionObserver.disconnect();
+        }, { threshold: 1 });
+        this.intersectionObserver.observe(table);
+    }
+    cleanUpObservers() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+    }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.setupProperties = throttle.debounce(this.setupProperties, 100);
+    }
+    connectedCallback() {
+        this.addObservers();
+        this.handleHideCaptionChange();
+    }
+    componentDidRender() {
+        if (this.scrollable !== false && this.table) {
+            // a hack. Revise in-future.
+            // the table is always rendered in the light DOM - so it should always be visible, but
+            // if we conditionally render the slot within the masked overflow there's quite a noticeable
+            //  CLS as it moves before the nano-masked-overflow is bootstrapped.
+            customElements
+                .whenDefined(renderer.transformTag('nano-masked-overflow'))
+                .then(() => {
+                this.host
+                    .querySelector('.nano-table__overflow')
+                    ?.appendChild(this.table);
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.cleanUpObservers();
+    }
+    render() {
+        return (renderer.h(index.Host, { key: '61d6bc7ce049b636466f22e2ebec084752ecfd29', class: {
+                'nano-table': true,
+                'nano-table--props-ready': this.propsReady,
+            } }, this.scrollable && (renderer.h("nano-masked-overflow", { key: '0534fae03c985ea7f1247bce7abdb5deac889feb', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, renderer.h("div", { key: '8e911ddbf727b07c8cd56dab2d56568b73a745b2', class: "nano-table__overflow" }))), renderer.h("slot", { key: '2d57257dc468275502d1c1a1d2c07e32f8cfa881' })));
+    }
+    static get watchers() { return {
+        "compact": ["handleCompactChange"],
+        "hideCaption": ["handleHideCaptionChange"]
+    }; }
+};
+NanoTable.style = tableCss;
 
-
-exports.nano_table = nanoTable_entry.Table;
-
-//# sourceMappingURL=nano-table.cjs.entry.js.map
+exports.nano_table = NanoTable;

package/dist/cjs/page-dots-D-QQnR4W.js

@@ -0,0 +1,138 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var nanoSlides_entry = require('./nano-slides-D5q9vQ4P.js');
+require('./index-DYD4xvxr.js');
+require('./renderer-SkVn69pT.js');
+
+// -------------------------- PageDots -------------------------- //
+function PageDots(parent) {
+    this.parent = parent;
+    this.parentElement = this.parent.element.shadowRoot || this.parent.element;
+    this._create();
+}
+PageDots.prototype = Object.create(nanoSlides_entry.Unipointer.prototype);
+PageDots.prototype._create = function () {
+    // create holder element
+    this.holder = document.createElement('div');
+    this.holder.className = 'flickity-page-dots';
+    this.holder.part.add('pagination');
+    // create dots, array of elements
+    this.dots = [];
+    // events
+    this.handleClick = this.onClick.bind(this);
+    this.on('pointerDown', this.parent.childUIPointerDown.bind(this.parent));
+};
+PageDots.prototype.activate = function () {
+    this.setDots();
+    this.holder.addEventListener('click', this.handleClick);
+    this.bindStartEvent(this.holder);
+    // add to DOM
+    this.parentElement.appendChild(this.holder);
+};
+PageDots.prototype.deactivate = function () {
+    this.holder.removeEventListener('click', this.handleClick);
+    this.unbindStartEvent(this.holder);
+    // remove from DOM
+    this.parentElement.removeChild(this.holder);
+};
+PageDots.prototype.setDots = function () {
+    // get difference between number of slides and number of dots
+    const delta = this.parent.slides.length - this.dots.length;
+    if (delta > 0) {
+        this.addDots(delta);
+    }
+    else if (delta < 0) {
+        this.removeDots(-delta);
+    }
+};
+PageDots.prototype.addDots = function (count) {
+    const fragment = document.createDocumentFragment();
+    const newDots = [];
+    const length = this.dots.length;
+    const max = length + count;
+    for (let i = length; i < max; i++) {
+        const dot = document.createElement('button');
+        dot.classList.add('dot');
+        dot.innerText = `Go to slide ${i + 1}`;
+        fragment.appendChild(dot);
+        newDots.push(dot);
+    }
+    this.holder.appendChild(fragment);
+    this.dots = this.dots.concat(newDots);
+};
+PageDots.prototype.removeDots = function (count) {
+    // remove from this.dots collection
+    const removeDots = this.dots.splice(this.dots.length - count, count);
+    // remove from DOM
+    removeDots.forEach(function (dot) {
+        this.holder.removeChild(dot);
+    }, this);
+};
+PageDots.prototype.updateSelected = function () {
+    // remove selected class on previous
+    if (this.selectedDot) {
+        this.selectedDot.classList.remove('is-selected');
+        this.selectedDot.part.remove('pagination-item--active');
+        this.selectedDot.removeAttribute('aria-current');
+    }
+    // don't proceed if no dots
+    if (!this.dots.length) {
+        return;
+    }
+    this.selectedDot = this.dots[this.parent.selectedIndex];
+    this.selectedDot.classList.add('is-selected');
+    this.selectedDot.part.add('pagination-item--active');
+    this.selectedDot.setAttribute('aria-current', 'step');
+};
+PageDots.prototype.onTap = PageDots.prototype.onClick = function (event) {
+    // old method name, backwards-compatible
+    const target = event.target;
+    // only care about dot clicks
+    if (target.nodeName != 'BUTTON') {
+        return;
+    }
+    this.parent.uiChange();
+    const index = this.dots.indexOf(target);
+    this.parent.select(index);
+};
+PageDots.prototype.destroy = function () {
+    this.deactivate();
+    this.allOff();
+};
+// @ts-ignore
+nanoSlides_entry.Flickity.PageDots = PageDots;
+// -------------------------- Flickity -------------------------- //
+nanoSlides_entry.utils.extend(nanoSlides_entry.Flickity.defaults, {
+    pageDots: true,
+});
+nanoSlides_entry.Flickity.createMethods.push('_createPageDots');
+const proto = nanoSlides_entry.Flickity.prototype;
+proto._createPageDots = function () {
+    if (!this.options.pageDots) {
+        return;
+    }
+    this.pageDots = new PageDots(this);
+    // events
+    this.on('activate', this.activatePageDots);
+    this.on('select', this.updateSelectedPageDots);
+    this.on('cellChange', this.updatePageDots);
+    this.on('resize', this.updatePageDots);
+    this.on('deactivate', this.deactivatePageDots);
+};
+proto.activatePageDots = function () {
+    this.pageDots.activate();
+};
+proto.updateSelectedPageDots = function () {
+    this.pageDots.updateSelected();
+};
+proto.updatePageDots = function () {
+    this.pageDots.setDots();
+};
+proto.deactivatePageDots = function () {
+    this.pageDots.deactivate();
+};
+// @ts-ignore
+nanoSlides_entry.Flickity.PageDots = PageDots;