@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-table.js

@@ -1,635 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getDefaultExportFromCjs, c as classNames } from './index2.js';
-import { S as Sortable } from './sortable.esm.js';
-import { d as debounce, i as isMobileViewport, q as querySelectorAllDeep } from './utils.js';
-import { d as defineCustomElement$3 } from './swirl-text2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-var dist;
-var hasRequiredDist;
-
-function requireDist () {
-	if (hasRequiredDist) return dist;
-	hasRequiredDist = 1;
-
-	/* global setTimeout, clearTimeout */
-
-	dist = function debounce(fn) {
-	  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-	  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-	  var lastCallAt = void 0;
-	  var deferred = void 0;
-	  var timer = void 0;
-	  var pendingArgs = [];
-	  return function debounced() {
-	    var currentWait = getWait(wait);
-	    var currentTime = new Date().getTime();
-
-	    var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;
-
-	    lastCallAt = currentTime;
-
-	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-	      args[_key] = arguments[_key];
-	    }
-
-	    if (isCold && options.leading) {
-	      return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {
-	        return result[0];
-	      }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));
-	    }
-
-	    if (deferred) {
-	      clearTimeout(timer);
-	    } else {
-	      deferred = defer();
-	    }
-
-	    pendingArgs.push(args);
-	    timer = setTimeout(flush.bind(this), currentWait);
-
-	    if (options.accumulate) {
-	      var argsIndex = pendingArgs.length - 1;
-	      return deferred.promise.then(function (results) {
-	        return results[argsIndex];
-	      });
-	    }
-
-	    return deferred.promise;
-	  };
-
-	  function flush() {
-	    var thisDeferred = deferred;
-	    clearTimeout(timer);
-
-	    Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);
-
-	    pendingArgs = [];
-	    deferred = null;
-	  }
-	};
-
-	function getWait(wait) {
-	  return typeof wait === 'function' ? wait() : wait;
-	}
-
-	function defer() {
-	  var deferred = {};
-	  deferred.promise = new Promise(function (resolve, reject) {
-	    deferred.resolve = resolve;
-	    deferred.reject = reject;
-	  });
-	  return deferred;
-	}
-	
-	return dist;
-}
-
-var distExports = requireDist();
-var debouncePromise = /*@__PURE__*/getDefaultExportFromCjs(distExports);
-
-const swirlTableCss = ".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n      var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),\n    2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px\n      var(--swirl-table-shadow-rgba),\n    0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
-
-const defaultDragDropInstructions = {
-    end: "Dropped. Final position in table: {position} of {rowCount}.",
-    initial: "Press space to move the row.",
-    moved: "Current position in table: {position} of {rowCount}.",
-    start: "Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop.",
-};
-const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.dropRow = createEvent(this, "dropRow", 7);
-        this.dragDropInstructions = defaultDragDropInstructions;
-        this.emptyStateLabel = "No results found.";
-        this.liveRegionText = "";
-        this.triggerRerender = debounce(async () => {
-            await this.updateLayout();
-            this.updateEmptyState();
-        }, 0, true);
-        this.updateLayout = debouncePromise(async () => {
-            this.resetCellStyles();
-            this.resetColumnStyles();
-            this.resetEmptyRowStyles();
-            this.resetRowGroupStyles();
-            this.layoutEmptyRow();
-            this.layoutRowGroups();
-            this.layOutCellsAndColumns();
-            this.updateScrolledState();
-        }, 16, { leading: true });
-        this.onScroll = () => {
-            this.updateScrolledState();
-        };
-        this.onFocus = (event) => {
-            if (this.movingViaKeyboard) {
-                const movingRow = this.el.querySelector(".table-row--moving");
-                if (movingRow) {
-                    this.focusDragHandleOfRow(movingRow);
-                }
-            }
-            const focusedDragHandle = !!event.target?.closest(this.dragDropHandle);
-            if (this.liveRegionText === "" && focusedDragHandle) {
-                this.updateLiveRegionText("initial");
-            }
-        };
-        this.onBlur = (event) => {
-            const newlyFocusedElement = event.relatedTarget;
-            const focusedDragHandle = !!newlyFocusedElement?.closest(this.dragDropHandle);
-            if (this.el.contains(newlyFocusedElement) && focusedDragHandle) {
-                return;
-            }
-            if (this.liveRegionText !== "") {
-                this.updateLiveRegionText();
-            }
-        };
-        this.onKeyDown = (event) => {
-            if (!this.enableDragDrop) {
-                return;
-            }
-            const row = event.target?.closest("swirl-table-row");
-            const focusedDragHandle = !!event.target?.closest(this.dragDropHandle);
-            if (!focusedDragHandle) {
-                return;
-            }
-            if (event.code === "Space") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.toggleKeyboardMove(row);
-            }
-            else if (event.code === "ArrowUp") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.moveRow(row, "up");
-            }
-            else if (event.code === "ArrowDown") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.moveRow(row, "down");
-            }
-            else if (event.code === "Escape") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.cancelKeyboardMove();
-            }
-        };
-    }
-    async componentDidLoad() {
-        this.setupIntersectionObserver();
-        this.setupMutationObservers();
-        queueMicrotask(() => {
-            this.setupDragDrop();
-        });
-    }
-    disconnectedCallback() {
-        this.intersectionObserver?.disconnect();
-        this.columnMutationObserver?.disconnect();
-        this.rowMutationObserver?.disconnect();
-        this.sortable?.destroy();
-    }
-    handleEnableDragDropChange() {
-        queueMicrotask(() => {
-            this.setupDragDrop();
-        });
-    }
-    /**
-     * Set up an Intersection Observer to monitor when the table container becomes visible.
-     * This is important because the table's layout may need updating when it becomes visible,
-     * especially if it is rendered within a modal that opens after rendering.
-     */
-    setupIntersectionObserver() {
-        this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-            threshold: 0,
-        });
-        this.intersectionObserver.observe(this.container);
-    }
-    /**
-     * We are not using shadow DOM for the table, so we cannot use the
-     * `slotchange` event to detect changes in the slotted content. Instead, we
-     * use a MutationObserver to watch for changes of rows.
-     */
-    setupMutationObservers() {
-        this.columnMutationObserver = new MutationObserver((mutations) => {
-            const columnWasAddedOrRemoved = mutations.some((mutation) => mutation.addedNodes.length || mutation.removedNodes.length);
-            if (columnWasAddedOrRemoved) {
-                this.updateLayout();
-            }
-        });
-        this.columnMutationObserver.observe(this.headerEl, {
-            childList: true,
-            subtree: true,
-        });
-        this.rowMutationObserver = new MutationObserver((mutations) => {
-            const rowWasAddedOrRemoved = mutations.some((mutation) => mutation.addedNodes.length || mutation.removedNodes.length);
-            if (rowWasAddedOrRemoved) {
-                this.updateEmptyState();
-                this.setupDragDrop();
-            }
-        });
-        this.startRowMutationObserver();
-    }
-    startRowMutationObserver() {
-        this.rowMutationObserver?.observe(this.bodyEl, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    stopRowMutationObserver() {
-        this.rowMutationObserver?.disconnect();
-    }
-    setupDragDrop() {
-        if (this.sortable) {
-            this.sortable.destroy();
-            this.sortable = undefined;
-        }
-        if (this.enableDragDrop) {
-            const tableHasRowGroups = !!this.el.querySelector("swirl-table-row-group");
-            if (tableHasRowGroups) {
-                // Drag & drop for multiple row groups is not yet implemented.
-                console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');
-                return;
-            }
-            if (!this.dragDropHandle) {
-                console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');
-                return;
-            }
-            const slottedEl = this.el.querySelector('[slot="rows"]');
-            this.dragDropContainer =
-                slottedEl?.tagName !== "SWIRL-TABLE-ROW"
-                    ? slottedEl ?? this.bodyEl
-                    : this.bodyEl;
-            this.sortable = new Sortable(this.dragDropContainer, {
-                animation: 100,
-                direction: "vertical",
-                handle: this.dragDropHandle,
-                fallbackOnBody: true,
-                group: `swirl-table-${Math.random().toString().substring(2)}`,
-                onStart: () => {
-                    this.stopRowMutationObserver();
-                },
-                onEnd: (event) => {
-                    event.stopPropagation();
-                    const { to, newIndex, oldIndex, item } = event;
-                    this.dropRow.emit({
-                        newIndex,
-                        oldIndex,
-                        item,
-                        itemId: item.id ?? item.querySelector(":scope > swirl-table-row").id,
-                        newNextSiblingItemId: newIndex < to.children.length - 1
-                            ? to.children[newIndex + 1].id
-                            : undefined,
-                        newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
-                    });
-                    this.startRowMutationObserver();
-                },
-            });
-        }
-    }
-    async onVisibilityChange(entries) {
-        const inViewport = entries.some((entry) => entry.isIntersecting);
-        if (inViewport) {
-            // Delay layout update to ensure the container is fully visible,
-            // especially if it was initially rendered in a modal.
-            setTimeout(async () => {
-                await this.updateLayout();
-            }, 100);
-        }
-    }
-    async componentDidRender() {
-        await this.updateLayout();
-        this.updateEmptyState();
-    }
-    async onWindowResize() {
-        await this.updateLayout();
-    }
-    /**
-     * Force a re-render of the table
-     */
-    async rerender() {
-        this.triggerRerender();
-    }
-    resetEmptyRowStyles() {
-        const emptyRow = this.el.querySelector(".table__empty-row");
-        if (!Boolean(emptyRow)) {
-            return;
-        }
-        emptyRow.style.width = "";
-    }
-    resetRowGroupStyles() {
-        const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-        tableRowGroups.forEach((tableRowGroup) => {
-            const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
-            if (!Boolean(headerRow)) {
-                return;
-            }
-            tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = "";
-        });
-    }
-    resetColumnStyles() {
-        const columns = this.getColumns();
-        columns.forEach((column) => {
-            column.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right");
-            column.style.right = "";
-            column.style.left = "";
-            column.style.position = "";
-            column.style.zIndex = "";
-        });
-    }
-    resetCellStyles() {
-        const cells = this.getCells();
-        cells.forEach((cell) => {
-            cell.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right");
-            cell.style.flex = "";
-            cell.style.left = "";
-            cell.style.right = "";
-            cell.style.position = "";
-            cell.style.zIndex = "";
-        });
-    }
-    updateScrolledState() {
-        const isMobile = isMobileViewport();
-        if (this.container === undefined) {
-            return;
-        }
-        const scrollable = this.container.scrollWidth > this.container.clientWidth;
-        const scrolled = this.container.scrollLeft > 0;
-        const scrolledToEnd = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >=
-            Math.floor(this.container.scrollWidth);
-        if (scrollable !== this.scrollable) {
-            if (scrollable && !isMobile) {
-                this.container.classList.add("table__container--scrollable");
-            }
-            else {
-                this.container.classList.remove("table__container--scrollable");
-            }
-        }
-        if (scrolled !== this.scrolled) {
-            if (scrolled && !isMobile) {
-                this.container.classList.add("table__container--scrolled");
-            }
-            else {
-                this.container.classList.remove("table__container--scrolled");
-            }
-        }
-        if (scrolledToEnd !== this.scrolledToEnd) {
-            if (scrolledToEnd && !isMobile) {
-                this.container.classList.add("table__container--scrolled-to-end");
-            }
-            else {
-                this.container.classList.remove("table__container--scrolled-to-end");
-            }
-        }
-    }
-    getColumns() {
-        return Array.from(this.el.querySelectorAll("swirl-table-column"));
-    }
-    getCells() {
-        return Array.from(this.el.querySelectorAll("swirl-table-cell"));
-    }
-    layoutEmptyRow() {
-        const emptyRow = this.el.querySelector(".table__empty-row");
-        if (!Boolean(emptyRow)) {
-            return;
-        }
-        const scrollWidth = `${this.el.querySelector(".table__container").scrollWidth}px`;
-        emptyRow.style.width = scrollWidth;
-    }
-    layoutRowGroups() {
-        const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-        const scrollWidth = `${this.el.querySelector(".table__container")?.scrollWidth}px`;
-        tableRowGroups.forEach((tableRowGroup) => {
-            const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
-            if (!Boolean(headerRow)) {
-                return;
-            }
-            tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
-        });
-    }
-    layOutCellsAndColumns() {
-        const columns = this.getColumns();
-        const cells = this.getCells();
-        columns.forEach((column, colIndex) => {
-            const cellsOfColumn = this.getCellsForColumn(cells, columns, colIndex);
-            const columnProperties = this.calculateColumnProperties(column, columns, colIndex);
-            cellsOfColumn.forEach((cell) => this.applyCellStyles(cell, column, columnProperties));
-            this.applyColumnStyles(column, columnProperties);
-        });
-    }
-    getCellsForColumn(cells, columns, colIndex) {
-        return cells.filter((_, cellIndex) => (colIndex - cellIndex) % columns.length === 0);
-    }
-    calculateColumnProperties(column, columns, colIndex) {
-        const leftOffsetForStickyColumn = column.sticky
-            ? this.getLeftOffsetForStickyColumn(columns, colIndex)
-            : 0;
-        const columnWidth = `${column.getBoundingClientRect().width}px`;
-        const isLastColumnSticky = column.sticky && columns.length === colIndex + 1;
-        const hasShadowRight = column.sticky && !this.hasStickyColumnsToRight(columns, colIndex);
-        return {
-            leftOffsetForStickyColumn,
-            columnWidth,
-            isLastColumnSticky,
-            hasShadowRight,
-        };
-    }
-    applyCellStyles(cell, column, columnProperties) {
-        const { leftOffsetForStickyColumn, columnWidth, isLastColumnSticky, hasShadowRight, } = columnProperties;
-        cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
-        if (isMobileViewport()) {
-            return;
-        }
-        if (column.sticky && !isLastColumnSticky) {
-            cell.classList.add("table-cell--is-sticky");
-            cell.style.left = leftOffsetForStickyColumn + "px";
-            if (hasShadowRight) {
-                cell.classList.add("table-cell--has-shadow-right");
-            }
-        }
-        if (isLastColumnSticky) {
-            cell.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left");
-        }
-    }
-    applyColumnStyles(column, columnProperties) {
-        if (isMobileViewport()) {
-            return;
-        }
-        const { leftOffsetForStickyColumn, isLastColumnSticky, hasShadowRight } = columnProperties;
-        if (column.sticky && !isLastColumnSticky) {
-            column.classList.add("table-column--is-sticky");
-            column.style.left = leftOffsetForStickyColumn + "px";
-            if (hasShadowRight) {
-                column.classList.add("table-column--has-shadow-right");
-            }
-        }
-        if (isLastColumnSticky) {
-            column.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
-        }
-    }
-    getLeftOffsetForStickyColumn(columns, colIndex) {
-        return columns.slice(0, colIndex).reduce((acc, column) => {
-            if (column.sticky) {
-                acc += column.getBoundingClientRect().width;
-                return acc;
-            }
-        }, 0);
-    }
-    hasStickyColumnsToRight(columns, colIndex) {
-        return columns
-            .slice(colIndex + 1, columns.length - 1)
-            .some((column) => column.sticky);
-    }
-    updateEmptyState() {
-        const rowsContainer = this.el.querySelector('[slot="rows"]');
-        this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
-    }
-    updateLiveRegionText(key, data = {}) {
-        let newText = key ? this.dragDropInstructions[key] : "";
-        for (const [key, value] of Object.entries(data ?? {})) {
-            newText = newText.replaceAll(`{${key}}`, String(value));
-        }
-        if (newText !== this.liveRegionText) {
-            this.liveRegionText = newText;
-        }
-    }
-    toggleKeyboardMove(row) {
-        if (this.movingViaKeyboard) {
-            this.endKeyboardMove(row);
-        }
-        else {
-            this.startKeyboardMove(row);
-        }
-    }
-    startKeyboardMove(row) {
-        this.movingViaKeyboard = true;
-        this.positionBeforeKeyboardMove = Array.from(this.dragDropContainer.children).indexOf(row);
-        row.classList.add("table-row--moving");
-        this.updateLiveRegionText("start", {
-            position: Array.from(this.dragDropContainer.children).indexOf(row) + 1,
-            rowCount: this.dragDropContainer.children.length,
-        });
-    }
-    endKeyboardMove(row) {
-        this.movingViaKeyboard = false;
-        row.classList.remove("table-row--moving");
-        this.updateLiveRegionText("end", {
-            position: Array.from(this.dragDropContainer.children).indexOf(row) + 1,
-            rowCount: this.dragDropContainer.children.length,
-        });
-        this.dropRow.emit({
-            item: row,
-            newIndex: Array.from(this.dragDropContainer.children).indexOf(row),
-            oldIndex: this.positionBeforeKeyboardMove,
-            itemId: row.id,
-            newNextSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(row) <
-                this.dragDropContainer.children.length - 1
-                ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(row) + 1].id
-                : undefined,
-            newPrevSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(row) > 0
-                ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(row) - 1].id
-                : undefined,
-        });
-        this.positionBeforeKeyboardMove = undefined;
-    }
-    cancelKeyboardMove() {
-        if (!this.movingViaKeyboard) {
-            return;
-        }
-        const row = this.el.querySelector(".table-row--moving");
-        if (!row) {
-            return;
-        }
-        row.classList.remove("table-row--moving");
-        this.movingViaKeyboard = false;
-        if (this.positionBeforeKeyboardMove !== undefined) {
-            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[this.positionBeforeKeyboardMove]);
-        }
-    }
-    moveRow(row, direction) {
-        if (!this.movingViaKeyboard) {
-            return;
-        }
-        let newIndex;
-        if (direction === "up") {
-            const currentIndex = Array.from(this.dragDropContainer.children).indexOf(row);
-            newIndex = Math.max(0, currentIndex - 1);
-            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[newIndex]);
-        }
-        else {
-            const currentIndex = Array.from(this.dragDropContainer.children).indexOf(row);
-            newIndex = Math.min(this.dragDropContainer.children.length - 1, currentIndex + 1);
-            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[newIndex + 1]);
-        }
-        this.updateLiveRegionText("moved", {
-            position: newIndex + 1,
-            rowCount: this.dragDropContainer.children.length,
-        });
-        this.focusDragHandleOfRow(row);
-    }
-    focusDragHandleOfRow(row) {
-        const handle = querySelectorAllDeep(row, this.dragDropHandle)?.[0];
-        if (handle.tagName === "BUTTON") {
-            handle.focus();
-        }
-        else {
-            handle.querySelector("button")?.focus();
-        }
-    }
-    render() {
-        const hasEmptyStateSlotAssignment = Boolean(this.el.querySelector('[slot="empty"]'));
-        const className = classNames("table", {
-            "table--show-empty-state": this.empty && !this.loading,
-            "table--keyboard-move": this.movingViaKeyboard,
-        });
-        return (h(Host, { key: '46d675ece1a7b46876737062746db69a19295dfa' }, h("div", { key: '69d0a47f8a15d9231d8c13d0404c4c9e082f2a45', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '7df7e892ed56c8bf7eb73de7a71f5a2ddc8f0836' }, h("span", { key: 'd8890c6311d6ce4f1e4de0a34c4a7b93fdddca3c', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: 'd6651c11c18b35b71ecb9c99cfdf178a5102d527', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '75172769ff332c17a2322e93e4e921da5ca1af3f', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '26dacce7d235f14a08eae8393170866a190d2480' }, h("div", { key: 'a16e2f210eede760500f3bd1c0f7a390a38ca0cc', id: "caption" }, this.caption))), h("div", { key: 'e8229c4050caf1d362794b84e5feebb88a0f0ed6', role: "rowgroup" }, h("div", { key: 'c818749d291b4fc31d63364630f04bc4f1f7bafb', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: 'b4d31c6ecb1fa0184ac1a4cfe88ca0a8d8650f65', name: "columns" }))), h("div", { key: '568d03e1fe1882a0683850a1a218b0c3651a1484', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: '8a1c0072e45f679cd77249a04cd726659bb334eb', name: "rows" }), h("div", { key: '27d42992a4ca6dda40fc394597aebaad41bc5eb3', class: "table__empty-row", role: "row" }, h("div", { key: '02626becf66fe815d129eb63b13abca747383a59', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: '9000edd134d818b8cd0a22258d4b8cff8248e9af', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: '3ca0b2eab927439d2fda29b8d0e4942782165fb6', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "enableDragDrop": ["handleEnableDragDropChange"]
-    }; }
-    static get style() { return swirlTableCss; }
-}, [6, "swirl-table", {
-        "caption": [1],
-        "dragDropHandle": [1, "drag-drop-handle"],
-        "dragDropInstructions": [16, "drag-drop-instructions"],
-        "emptyStateLabel": [1, "empty-state-label"],
-        "enableDragDrop": [4, "enable-drag-drop"],
-        "label": [1],
-        "loading": [4],
-        "empty": [32],
-        "liveRegionText": [32],
-        "scrollable": [32],
-        "scrolled": [32],
-        "scrolledToEnd": [32],
-        "rerender": [64]
-    }, [[9, "resize", "onWindowResize"]], {
-        "enableDragDrop": ["handleEnableDragDropChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-table", "swirl-text", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-table":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTable$1);
-            }
-            break;
-        case "swirl-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlTable = SwirlTable$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTable, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as a,transformTag as r}from"@stencil/core/internal/client";import{g as o,c as l}from"./index2.js";import{S as n}from"./sortable.esm.js";import{d as h,i as c,q as d}from"./utils.js";import{d as b}from"./swirl-text2.js";import{d as w}from"./swirl-visually-hidden2.js";var u,p,f=o((p||(p=1,u=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=void 0,a=void 0,r=void 0,o=[];return function(){var n=function(t){return"function"==typeof t?t():t}(e),h=(new Date).getTime(),c=!i||h-i>n;i=h;for(var d=arguments.length,b=Array(d),w=0;w<d;w++)b[w]=arguments[w];if(c&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[b])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(b)));if(a?clearTimeout(r):a=function(){var t={};return t.promise=new Promise((function(e,s){t.resolve=e,t.reject=s})),t}(),o.push(b),r=setTimeout(l.bind(this),n),s.accumulate){var u=o.length-1;return a.promise.then((function(t){return t[u]}))}return a.promise};function l(){var e=a;clearTimeout(r),Promise.resolve(s.accumulate?t.call(this,o):t.apply(this,o[o.length-1])).then(e.resolve,e.reject),o=[],a=null}}),u));const m={end:"Dropped. Final position in table: {position} of {rowCount}.",initial:"Press space to move the row.",moved:"Current position in table: {position} of {rowCount}.",start:"Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."},y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.dropRow=s(this,"dropRow",7),this.dragDropInstructions=m,this.emptyStateLabel="No results found.",this.liveRegionText="",this.triggerRerender=h((async()=>{await this.updateLayout(),this.updateEmptyState()}),0,!0),this.updateLayout=f((async()=>{this.resetCellStyles(),this.resetColumnStyles(),this.resetEmptyRowStyles(),this.resetRowGroupStyles(),this.layoutEmptyRow(),this.layoutRowGroups(),this.layOutCellsAndColumns(),this.updateScrolledState()}),16,{leading:!0}),this.onScroll=()=>{this.updateScrolledState()},this.onFocus=t=>{if(this.movingViaKeyboard){const t=this.el.querySelector(".table-row--moving");t&&this.focusDragHandleOfRow(t)}const e=!!t.target?.closest(this.dragDropHandle);""===this.liveRegionText&&e&&this.updateLiveRegionText("initial")},this.onBlur=t=>{const e=t.relatedTarget,s=!!e?.closest(this.dragDropHandle);this.el.contains(e)&&s||""!==this.liveRegionText&&this.updateLiveRegionText()},this.onKeyDown=t=>{if(!this.enableDragDrop)return;const e=t.target?.closest("swirl-table-row");t.target?.closest(this.dragDropHandle)&&("Space"===t.code?(t.preventDefault(),t.stopPropagation(),this.toggleKeyboardMove(e)):"ArrowUp"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"up")):"ArrowDown"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"down")):"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.cancelKeyboardMove()))}}async componentDidLoad(){this.setupIntersectionObserver(),this.setupMutationObservers(),queueMicrotask((()=>{this.setupDragDrop()}))}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.columnMutationObserver?.disconnect(),this.rowMutationObserver?.disconnect(),this.sortable?.destroy()}handleEnableDragDropChange(){queueMicrotask((()=>{this.setupDragDrop()}))}setupIntersectionObserver(){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.container)}setupMutationObservers(){this.columnMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&this.updateLayout()})),this.columnMutationObserver.observe(this.headerEl,{childList:!0,subtree:!0}),this.rowMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&(this.updateEmptyState(),this.setupDragDrop())})),this.startRowMutationObserver()}startRowMutationObserver(){this.rowMutationObserver?.observe(this.bodyEl,{childList:!0,subtree:!0})}stopRowMutationObserver(){this.rowMutationObserver?.disconnect()}setupDragDrop(){if(this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop){if(this.el.querySelector("swirl-table-row-group"))return void console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');if(!this.dragDropHandle)return void console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');const t=this.el.querySelector('[slot="rows"]');this.dragDropContainer="SWIRL-TABLE-ROW"!==t?.tagName?t??this.bodyEl:this.bodyEl,this.sortable=new n(this.dragDropContainer,{animation:100,direction:"vertical",handle:this.dragDropHandle,fallbackOnBody:!0,group:"swirl-table-"+(""+Math.random()).substring(2),onStart:()=>{this.stopRowMutationObserver()},onEnd:t=>{t.stopPropagation();const{to:e,newIndex:s,oldIndex:i,item:a}=t;this.dropRow.emit({newIndex:s,oldIndex:i,item:a,itemId:a.id??a.querySelector(":scope > swirl-table-row").id,newNextSiblingItemId:s<e.children.length-1?e.children[s+1].id:void 0,newPrevSiblingItemId:s>0?e.children[s-1].id:void 0}),this.startRowMutationObserver()}})}}async onVisibilityChange(t){t.some((t=>t.isIntersecting))&&setTimeout((async()=>{await this.updateLayout()}),100)}async componentDidRender(){await this.updateLayout(),this.updateEmptyState()}async onWindowResize(){await this.updateLayout()}async rerender(){this.triggerRerender()}resetEmptyRowStyles(){const t=this.el.querySelector(".table__empty-row");t&&(t.style.width="")}resetRowGroupStyles(){Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t=>{t.shadowRoot.querySelector(".table-row-group__header-row")&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width="")}))}resetColumnStyles(){this.getColumns().forEach((t=>{t.classList.remove("table-column--has-shadow","table-column--is-sticky","table-column--is-sticky-right"),t.style.right="",t.style.left="",t.style.position="",t.style.zIndex=""}))}resetCellStyles(){this.getCells().forEach((t=>{t.classList.remove("table-cell--has-shadow","table-cell--is-sticky","table-cell--is-sticky-right"),t.style.flex="",t.style.left="",t.style.right="",t.style.position="",t.style.zIndex=""}))}updateScrolledState(){const t=c();if(void 0===this.container)return;const e=this.container.scrollWidth>this.container.clientWidth,s=this.container.scrollLeft>0,i=Math.ceil(this.container.clientWidth+this.container.scrollLeft)>=Math.floor(this.container.scrollWidth);e!==this.scrollable&&(e&&!t?this.container.classList.add("table__container--scrollable"):this.container.classList.remove("table__container--scrollable")),s!==this.scrolled&&(s&&!t?this.container.classList.add("table__container--scrolled"):this.container.classList.remove("table__container--scrolled")),i!==this.scrolledToEnd&&(i&&!t?this.container.classList.add("table__container--scrolled-to-end"):this.container.classList.remove("table__container--scrolled-to-end"))}getColumns(){return Array.from(this.el.querySelectorAll("swirl-table-column"))}getCells(){return Array.from(this.el.querySelectorAll("swirl-table-cell"))}layoutEmptyRow(){const t=this.el.querySelector(".table__empty-row");if(!t)return;const e=this.el.querySelector(".table__container").scrollWidth+"px";t.style.width=e}layoutRowGroups(){const t=Array.from(this.el.querySelectorAll("swirl-table-row-group")),e=this.el.querySelector(".table__container")?.scrollWidth+"px";t.forEach((t=>{t.shadowRoot.querySelector(".table-row-group__header-row")&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width=e)}))}layOutCellsAndColumns(){const t=this.getColumns(),e=this.getCells();t.forEach(((s,i)=>{const a=this.getCellsForColumn(e,t,i),r=this.calculateColumnProperties(s,t,i);a.forEach((t=>this.applyCellStyles(t,s,r))),this.applyColumnStyles(s,r)}))}getCellsForColumn(t,e,s){return t.filter(((t,i)=>(s-i)%e.length==0))}calculateColumnProperties(t,e,s){return{leftOffsetForStickyColumn:t.sticky?this.getLeftOffsetForStickyColumn(e,s):0,columnWidth:t.getBoundingClientRect().width+"px",isLastColumnSticky:t.sticky&&e.length===s+1,hasShadowRight:t.sticky&&!this.hasStickyColumnsToRight(e,s)}}applyCellStyles(t,e,s){const{leftOffsetForStickyColumn:i,columnWidth:a,isLastColumnSticky:r,hasShadowRight:o}=s;t.style.flex=a?"0 0 "+a:"",c()||(e.sticky&&!r&&(t.classList.add("table-cell--is-sticky"),t.style.left=i+"px",o&&t.classList.add("table-cell--has-shadow-right")),r&&t.classList.add("table-cell--is-sticky-right","table-cell--has-shadow-left"))}applyColumnStyles(t,e){if(c())return;const{leftOffsetForStickyColumn:s,isLastColumnSticky:i,hasShadowRight:a}=e;t.sticky&&!i&&(t.classList.add("table-column--is-sticky"),t.style.left=s+"px",a&&t.classList.add("table-column--has-shadow-right")),i&&t.classList.add("table-column--is-sticky-right","table-column--has-shadow-left")}getLeftOffsetForStickyColumn(t,e){return t.slice(0,e).reduce(((t,e)=>{if(e.sticky)return t+e.getBoundingClientRect().width}),0)}hasStickyColumnsToRight(t,e){return t.slice(e+1,t.length-1).some((t=>t.sticky))}updateEmptyState(){const t=this.el.querySelector('[slot="rows"]');this.empty=!t||0===t.children.length}updateLiveRegionText(t,e={}){let s=t?this.dragDropInstructions[t]:"";for(const[t,i]of Object.entries(e??{}))s=s.replaceAll(`{${t}}`,i+"");s!==this.liveRegionText&&(this.liveRegionText=s)}toggleKeyboardMove(t){this.movingViaKeyboard?this.endKeyboardMove(t):this.startKeyboardMove(t)}startKeyboardMove(t){this.movingViaKeyboard=!0,this.positionBeforeKeyboardMove=Array.from(this.dragDropContainer.children).indexOf(t),t.classList.add("table-row--moving"),this.updateLiveRegionText("start",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length})}endKeyboardMove(t){this.movingViaKeyboard=!1,t.classList.remove("table-row--moving"),this.updateLiveRegionText("end",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length}),this.dropRow.emit({item:t,newIndex:Array.from(this.dragDropContainer.children).indexOf(t),oldIndex:this.positionBeforeKeyboardMove,itemId:t.id,newNextSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)<this.dragDropContainer.children.length-1?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)+1].id:void 0,newPrevSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)>0?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)-1].id:void 0}),this.positionBeforeKeyboardMove=void 0}cancelKeyboardMove(){if(!this.movingViaKeyboard)return;const t=this.el.querySelector(".table-row--moving");t&&(t.classList.remove("table-row--moving"),this.movingViaKeyboard=!1,void 0!==this.positionBeforeKeyboardMove&&this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[this.positionBeforeKeyboardMove]))}moveRow(t,e){if(!this.movingViaKeyboard)return;let s;if("up"===e){const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.max(0,e-1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s])}else{const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.min(this.dragDropContainer.children.length-1,e+1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s+1])}this.updateLiveRegionText("moved",{position:s+1,rowCount:this.dragDropContainer.children.length}),this.focusDragHandleOfRow(t)}focusDragHandleOfRow(t){const e=d(t,this.dragDropHandle)?.[0];"BUTTON"===e.tagName?e.focus():e.querySelector("button")?.focus()}render(){const t=!!this.el.querySelector('[slot="empty"]'),e=l("table",{"table--show-empty-state":this.empty&&!this.loading,"table--keyboard-move":this.movingViaKeyboard});return i(a,{key:"46d675ece1a7b46876737062746db69a19295dfa"},i("div",{key:"69d0a47f8a15d9231d8c13d0404c4c9e082f2a45",class:e},this.enableDragDrop&&i("swirl-visually-hidden",{key:"7df7e892ed56c8bf7eb73de7a71f5a2ddc8f0836"},i("span",{key:"d8890c6311d6ce4f1e4de0a34c4a7b93fdddca3c","aria-live":"assertive"},this.liveRegionText)),i("div",{key:"d6651c11c18b35b71ecb9c99cfdf178a5102d527",class:"table__container",onFocusin:this.onFocus,onFocusout:this.onBlur,onKeyDown:this.onKeyDown,onScroll:this.onScroll,ref:t=>this.container=t,tabIndex:-1},i("div",{key:"75172769ff332c17a2322e93e4e921da5ca1af3f","aria-describedby":this.caption?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&i("swirl-visually-hidden",{key:"26dacce7d235f14a08eae8393170866a190d2480"},i("div",{key:"a16e2f210eede760500f3bd1c0f7a390a38ca0cc",id:"caption"},this.caption)),i("div",{key:"e8229c4050caf1d362794b84e5feebb88a0f0ed6",role:"rowgroup"},i("div",{key:"c818749d291b4fc31d63364630f04bc4f1f7bafb",class:"table__header",ref:t=>this.headerEl=t,role:"row"},i("slot",{key:"b4d31c6ecb1fa0184ac1a4cfe88ca0a8d8650f65",name:"columns"}))),i("div",{key:"568d03e1fe1882a0683850a1a218b0c3651a1484",class:"table__body",ref:t=>this.bodyEl=t},i("slot",{key:"8a1c0072e45f679cd77249a04cd726659bb334eb",name:"rows"}),i("div",{key:"27d42992a4ca6dda40fc394597aebaad41bc5eb3",class:"table__empty-row",role:"row"},i("div",{key:"02626becf66fe815d129eb63b13abca747383a59","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},i("slot",{key:"9000edd134d818b8cd0a22258d4b8cff8248e9af",name:"empty"}),!t&&i("swirl-text",{key:"3ca0b2eab927439d2fda29b8d0e4942782165fb6",align:"center",size:"sm"},this.emptyStateLabel))))))))}get el(){return this}static get watchers(){return{enableDragDrop:[{handleEnableDragDropChange:0}]}}static get style(){return".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid       var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),     2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px       var(--swirl-table-shadow-rgba),     0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}"}},[262,"swirl-table",{caption:[1],dragDropHandle:[1,"drag-drop-handle"],dragDropInstructions:[16],emptyStateLabel:[1,"empty-state-label"],enableDragDrop:[4,"enable-drag-drop"],label:[1],loading:[4],empty:[32],liveRegionText:[32],scrollable:[32],scrolled:[32],scrolledToEnd:[32],rerender:[64]},[[9,"resize","onWindowResize"]],{enableDragDrop:[{handleEnableDragDropChange:0}]}]),g=y,v=function(){"undefined"!=typeof customElements&&["swirl-table","swirl-text","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-table":customElements.get(r(t))||customElements.define(r(t),y);break;case"swirl-text":customElements.get(r(t))||b();break;case"swirl-visually-hidden":customElements.get(r(t))||w()}}))};export{g as SwirlTable,v as defineCustomElement}