@govbr-ds/webcomponents 2.5.0 → 2.6.0

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

@@ -0,0 +1,461 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+/** Modelo lógico e materializador virtual da tabela. */
+import { getDeepActiveElement } from "../../shared/utils/focus";
+import { TABLE_EXPANSION_GENERATED_ATTR, TABLE_SELECTION_GENERATED_ATTR } from "./table.constants";
+import { applyTablePlacements, getTableLeafHeaders, getTablePlacements, getTableRowGroups, resolveTableSpan, } from "./table.grouping";
+/**
+ * Converte a representação de conteúdo da API (`TableDataContent`) em nós DOM.
+ *
+ * Comportamento importante:
+ * - Se um item for uma instância de `Node`, a tabela irá reutilizá-lo tal qual
+ *   (isto é, o nó é transferido para a célula com `appendChild()`). Ou seja,
+ *   não é feita clonagem — o elemento é removido da sua posição anterior no DOM
+ *   e passa a pertencer à célula da tabela.
+ * - Se o item não for um `Node`, será convertido em `TextNode` com `String(entry)`.
+ *
+ * Riscos e observações (resumido): clonagem externa é responsabilidade do
+ * consumidor quando necessário; event listeners adicionados via
+ * `addEventListener` não são clonados automaticamente; duplicação de `id`
+ * deve ser evitada ao reutilizar nós em múltiplos lugares.
+ *
+ * @param content Conteúdo fornecido pelo consumidor (Node | string | array)
+ * @returns Array de `Node` pronto para ser anexado à célula
+ */
+const materializeContent = (content) => {
+    if (content === undefined || content === null)
+        return [];
+    const entries = Array.isArray(content) ? content : [content];
+    return entries.map((entry) => (entry instanceof Node ? entry : document.createTextNode(String(entry))));
+};
+const applyOptionalAttribute = (element, name, value) => {
+    if (value !== undefined && value !== null)
+        element.setAttribute(name, value);
+};
+/**
+ * Cria um elemento `br-table-action` a partir do descriptor público `TableActionData`.
+ * O elemento retornado ainda não está anexado ao host — quem chamar decide o slot.
+ */
+const createAction = (data, slot) => {
+    const action = document.createElement('br-table-action');
+    action.setAttribute('label', data.label);
+    if (data.iconName !== undefined)
+        action.setAttribute('icon-name', data.iconName);
+    if (data.ariaLabel !== undefined)
+        action.setAttribute('aria-label', data.ariaLabel);
+    if (slot !== undefined)
+        action.setAttribute('slot', slot);
+    return action;
+};
+/**
+ * Constrói um `br-table-cell` a partir de `TableCellData`.
+ *
+ * Observação: o conteúdo passado em `data.content` será materializado via
+ * `materializeContent` e, se incluir `Node`, esses nós serão transferidos
+ * (movidos) para a célula.
+ */
+const createCell = (data) => {
+    const cell = document.createElement('br-table-cell');
+    cell.toggleAttribute('row-header', Boolean(data.rowHeader));
+    if (data.colSpan !== undefined)
+        cell.setAttribute('col-span', String(data.colSpan));
+    if (data.rowSpan !== undefined)
+        cell.setAttribute('row-span', String(data.rowSpan));
+    applyOptionalAttribute(cell, 'horizontal-alignment', data.horizontalAlignment);
+    applyOptionalAttribute(cell, 'vertical-alignment', data.verticalAlignment);
+    applyOptionalAttribute(cell, 'overflow', data.overflow);
+    applyOptionalAttribute(cell, 'tooltip-state', data.tooltipState);
+    applyOptionalAttribute(cell, 'tooltip-mode', data.tooltipMode);
+    if (data.cellActionsLimit !== undefined)
+        cell.setAttribute('cell-actions-limit', String(data.cellActionsLimit));
+    if (data.sortValue !== undefined)
+        cell.setAttribute('sort-value', String(data.sortValue));
+    materializeContent(data.content).forEach((node) => {
+        cell.appendChild(node);
+    });
+    data.actions?.forEach((action) => {
+        cell.appendChild(createAction(action));
+    });
+    return cell;
+};
+/**
+ * Constrói um `br-table-header-cell` a partir de `TableColumnData`.
+ * Conteúdo é materializado com `materializeContent`.
+ */
+const createColumn = (data) => {
+    const column = document.createElement('br-table-header-cell');
+    if (data.colSpan !== undefined)
+        column.setAttribute('col-span', String(data.colSpan));
+    if (data.rowSpan !== undefined)
+        column.setAttribute('row-span', String(data.rowSpan));
+    applyOptionalAttribute(column, 'column-width', data.columnWidth);
+    applyOptionalAttribute(column, 'horizontal-alignment', data.horizontalAlignment);
+    applyOptionalAttribute(column, 'vertical-alignment', data.verticalAlignment);
+    applyOptionalAttribute(column, 'overflow', data.overflow);
+    applyOptionalAttribute(column, 'tooltip-state', data.tooltipState);
+    applyOptionalAttribute(column, 'tooltip-mode', data.tooltipMode);
+    column.toggleAttribute('sortable', Boolean(data.sortable));
+    materializeContent(data.content).forEach((node) => {
+        column.appendChild(node);
+    });
+    return column;
+};
+/**
+ * Constrói um `br-table-row` a partir de `TableRowData`.
+ *
+ * Notas:
+ * - As células são criadas com `createCell` e anexadas ao `br-table-row`.
+ * - `expandedContent`, quando presente, é materializado e marcado com
+ *   `slot="expanded-content"` para posterior renderização de conteúdo
+ *   expandido; se o conteúdo for um nó não-`HTMLElement`, ele é embrulhado
+ *   em um `span` com o slot apropriado.
+ */
+const createRow = (data) => {
+    const row = document.createElement('br-table-row');
+    applyOptionalAttribute(row, 'row-group', data.rowGroup);
+    row.toggleAttribute('selected', Boolean(data.selected));
+    row.toggleAttribute('disabled', Boolean(data.disabled));
+    row.toggleAttribute('expanded', Boolean(data.expanded));
+    applyOptionalAttribute(row, 'row-expansion', data.rowExpansion);
+    if (data.virtualExpandedContentHeight !== undefined) {
+        row.setAttribute('virtual-expanded-content-height', String(data.virtualExpandedContentHeight));
+    }
+    applyOptionalAttribute(row, 'horizontal-alignment', data.horizontalAlignment);
+    applyOptionalAttribute(row, 'vertical-alignment', data.verticalAlignment);
+    applyOptionalAttribute(row, 'overflow', data.overflow);
+    applyOptionalAttribute(row, 'tooltip-state', data.tooltipState);
+    applyOptionalAttribute(row, 'tooltip-mode', data.tooltipMode);
+    data.cells.forEach((cell) => {
+        row.appendChild(createCell(cell));
+    });
+    materializeContent(data.expandedContent).forEach((contentNode) => {
+        let node = contentNode;
+        if (node instanceof HTMLElement)
+            node.setAttribute('slot', 'expanded-content');
+        else {
+            const wrapper = document.createElement('span');
+            wrapper.setAttribute('slot', 'expanded-content');
+            wrapper.appendChild(node);
+            node = wrapper;
+        }
+        row.appendChild(node);
+    });
+    return row;
+};
+/**
+ * Gerencia o modelo lógico e a materialização virtual da tabela.
+ *
+ * Responsabilidades principais:
+ * - Capturar marcação já presente no host (`capture`).
+ * - Substituir o conjunto lógico por dados programáticos (`replace`).
+ * - Materializar a janela virtual, preservando linhas já montadas (`mount`, `renderRange`).
+ *
+ * Observação sobre materialização de conteúdo:
+ * - Quando `TableDataContent` contém nós (`Node`), esses nós são
+ *   transferidos para as células usando `appendChild()` (re-anexação no DOM).
+ *   Não há clonagem automática; consumidores que precisam preservar o
+ *   nó original devem clonar antes de passá-lo à tabela.
+ */
+export class TableDataStore {
+    constructor() {
+        this.data = {
+            headerRows: [],
+            columns: [],
+            rows: [],
+            globalActions: [],
+            contextualActions: [],
+        };
+        this.body = null;
+        this.rowElements = [];
+        this.renderedRows = [];
+    }
+    /** Invalida apenas as unidades derivadas quando uma chave de grupo muda. */
+    invalidateGroups() {
+        this.itemGroups = undefined;
+        this.pageBoundaries = undefined;
+    }
+    getItemGroups() {
+        this.itemGroups ?? (this.itemGroups = getTableRowGroups(this.rowElements));
+        return this.itemGroups;
+    }
+    capture(host) {
+        const headerRows = Array.from(host.querySelectorAll('br-table-header > br-table-row'));
+        if (headerRows.length === 0)
+            headerRows.push(document.createElement('br-table-row'));
+        const columns = getTableLeafHeaders(headerRows)
+            .filter((el) => !el.hasAttribute(TABLE_SELECTION_GENERATED_ATTR) && !el.hasAttribute(TABLE_EXPANSION_GENERATED_ATTR))
+            .map((element) => ({ element }));
+        const rows = Array.from(host.querySelectorAll('br-table-row'))
+            .filter((row) => row.closest('br-table-header') === null)
+            .map((row, index) => {
+            row.setAttribute('data-virtual-index', String(index));
+            const cells = Array.from(row.querySelectorAll('br-table-cell'))
+                .filter((cell) => !cell.hasAttribute(TABLE_SELECTION_GENERATED_ATTR) && !cell.hasAttribute(TABLE_EXPANSION_GENERATED_ATTR))
+                .map((cell) => ({ element: cell }));
+            return {
+                element: row,
+                cells,
+                originalIndex: index,
+            };
+        });
+        const actions = Array.from(host.children).filter((el) => el.tagName.toLowerCase() === 'br-table-action');
+        this.data = {
+            headerRows,
+            columns,
+            rows,
+            globalActions: actions
+                .filter((el) => el.getAttribute('slot') === 'global-actions')
+                .map((element) => ({ element })),
+            contextualActions: actions
+                .filter((el) => el.getAttribute('slot') === 'contextual-actions')
+                .map((element) => ({ element })),
+        };
+        this.refreshRowElements();
+    }
+    replace(data) {
+        const rows = data.rows.map((rowData, index) => {
+            const element = createRow(rowData);
+            element.setAttribute('data-virtual-index', String(index));
+            return {
+                element,
+                cells: Array.from(element.querySelectorAll('br-table-cell')).map((cell) => ({
+                    element: cell,
+                })),
+                originalIndex: index,
+            };
+        });
+        const headerRows = (data.headerRows?.length ? data.headerRows : [data.columns]).map((cells) => {
+            const row = document.createElement('br-table-row');
+            row.append(...cells.map(createColumn));
+            return row;
+        });
+        this.data = {
+            headerRows,
+            columns: getTableLeafHeaders(headerRows).map((element) => ({ element })),
+            rows,
+            globalActions: (data.globalActions ?? []).map((action) => ({ element: createAction(action, 'global-actions') })),
+            contextualActions: (data.contextualActions ?? []).map((action) => ({
+                element: createAction(action, 'contextual-actions'),
+            })),
+        };
+        this.refreshRowElements();
+    }
+    mount(host) {
+        const header = document.createElement('br-table-header');
+        header.setAttribute('slot', 'header');
+        header.append(...this.data.headerRows);
+        this.body = document.createElement('br-table-body');
+        this.body.setAttribute('slot', 'body');
+        this.renderedRows = [];
+        Array.from(host.children)
+            .filter((child) => {
+            const tag = child.tagName.toLowerCase();
+            const slot = child.getAttribute('slot');
+            return (tag === 'br-table-header' ||
+                tag === 'br-table-body' ||
+                (tag === 'br-table-action' && (slot === 'global-actions' || slot === 'contextual-actions')));
+        })
+            .forEach((child) => {
+            child.remove();
+        });
+        this.data.globalActions.forEach(({ element }) => {
+            host.appendChild(element);
+        });
+        this.data.contextualActions.forEach(({ element }) => {
+            host.appendChild(element);
+        });
+        host.appendChild(header);
+        host.appendChild(this.body);
+    }
+    /**
+     * Reordena o dataset lógico completo antes da materialização virtual.
+     * Critérios com menor `columnIndex` possuem maior prioridade no multi-sort.
+     */
+    sortRows(sorting) {
+        const criteria = [...sorting].sort((a, b) => a.columnIndex - b.columnIndex);
+        const byElement = new Map(this.data.rows.map((row) => [row.element, row]));
+        const groups = getTableRowGroups(this.rowElements).map((group) => group.flatMap((row) => {
+            const entry = byElement.get(row);
+            return entry ? [entry] : [];
+        }));
+        groups.sort((groupA, groupB) => {
+            const rowA = groupA[0];
+            const rowB = groupB[0];
+            for (const criterion of criteria) {
+                const valueA = this.getSortValue(rowA, criterion.columnIndex);
+                const valueB = this.getSortValue(rowB, criterion.columnIndex);
+                const comparison = this.compareSortValues(valueA, valueB);
+                if (comparison !== 0) {
+                    return criterion.direction === 'asc' ? comparison : -comparison;
+                }
+            }
+            return rowA.originalIndex - rowB.originalIndex;
+        });
+        this.data.rows = groups.flat();
+        this.data.rows.forEach(({ element }, index) => {
+            element.setAttribute('data-virtual-index', String(index));
+        });
+        this.refreshRowElements();
+    }
+    /** Retorna as colunas lógicas, sem as colunas geradas de seleção/expansão. */
+    getColumns() {
+        return getTableLeafHeaders(this.data.headerRows).filter((cell) => !cell.hasAttribute(TABLE_SELECTION_GENERATED_ATTR) && !cell.hasAttribute(TABLE_EXPANSION_GENERATED_ATTR));
+    }
+    getSortValue(row, columnIndex) {
+        const cell = getTablePlacements([row.element], 'br-table-cell')
+            .filter(({ cell }) => !cell.hasAttribute(TABLE_SELECTION_GENERATED_ATTR) && !cell.hasAttribute(TABLE_EXPANSION_GENERATED_ATTR))
+            .find((entry) => {
+            const column = columnIndex + this.generatedColumnCount();
+            return column >= entry.column && column < entry.column + entry.colSpan;
+        })?.cell;
+        if (cell === undefined)
+            return '';
+        const explicitValue = cell.getAttribute('sort-value');
+        if (explicitValue !== null)
+            return explicitValue.trim();
+        return cell.textContent?.trim() ?? '';
+    }
+    generatedColumnCount() {
+        return (this.rowElements[0]?.querySelectorAll(`:scope > [${TABLE_SELECTION_GENERATED_ATTR}], :scope > [${TABLE_EXPANSION_GENERATED_ATTR}]`).length ?? 0);
+    }
+    /** Itens lógicos de paginação: grupos contíguos ou linhas independentes. */
+    getItemCount() {
+        return this.getItemGroups().length;
+    }
+    /** Limites físicos da página, sem dividir grupos. */
+    getPageRange(startItem, itemCount) {
+        if (!this.pageBoundaries) {
+            const boundaries = [0];
+            this.getItemGroups().forEach((group) => {
+                boundaries.push(boundaries[boundaries.length - 1] + group.length);
+            });
+            this.pageBoundaries = boundaries;
+        }
+        const count = this.pageBoundaries.length - 1;
+        return {
+            start: this.pageBoundaries[Math.min(startItem, count)],
+            end: this.pageBoundaries[Math.min(startItem + itemCount, count)],
+        };
+    }
+    compareSortValues(valueA, valueB) {
+        return valueA.localeCompare(valueB, 'pt-BR', {
+            numeric: true,
+            sensitivity: 'base',
+        });
+    }
+    renderRange(range, rows = this.data.rows, indexOffset = 0) {
+        const body = this.body;
+        if (body === null)
+            return;
+        const focused = body.contains(document.activeElement) ? getDeepActiveElement() : null;
+        const children = [];
+        const renderedRows = [];
+        const addSpacer = (height, position) => {
+            if (height <= 0)
+                return;
+            const spacer = body.querySelector(`:scope > [data-table-virtual-spacer="${position}"]`) ??
+                this.createSpacer(height, position);
+            spacer.style.height = `${height}px`;
+            children.push(spacer);
+        };
+        addSpacer(range.beforeHeight, 'before');
+        const rangeRows = rows.slice(range.start, range.end).map(({ element }) => element);
+        let logicalIndex = range.start;
+        for (const group of getTableRowGroups(rangeRows)) {
+            if (group.length > 1 ||
+                group[0].hasAttribute('row-group') ||
+                Array.from(group[0].children).some((cell) => resolveTableSpan(cell.getAttribute('col-span')) > 1)) {
+                const first = group[0];
+                const wrapper = first.parentElement?.hasAttribute('data-table-row-group')
+                    ? first.parentElement
+                    : document.createElement('div');
+                wrapper.setAttribute('data-table-row-group', '');
+                wrapper.setAttribute('role', 'presentation');
+                let expandedRow = group.length + 1;
+                group.forEach((row) => {
+                    // Detalhes ficam após as linhas do grupo para não sobrepor suas células mescladas.
+                    row.style.setProperty('--table-expanded-grid-row', String(expandedRow));
+                    if (row.hasAttribute('expanded'))
+                        expandedRow++;
+                });
+                applyTablePlacements(getTablePlacements(group, 'br-table-cell'));
+                group.forEach((row) => {
+                    row.setAttribute('data-virtual-index', String(logicalIndex++ + indexOffset));
+                    if (row.parentElement !== wrapper)
+                        wrapper.append(row);
+                    renderedRows.push(row);
+                });
+                children.push(wrapper);
+                continue;
+            }
+            const index = logicalIndex++;
+            const row = rows[index]?.element;
+            if (row === undefined)
+                continue;
+            row.style.removeProperty('--table-expanded-grid-row');
+            row.querySelectorAll(':scope > br-table-cell').forEach((cell) => {
+                cell.style.removeProperty('--table-cell-grid-column');
+                cell.style.removeProperty('--table-cell-grid-row');
+            });
+            row.setAttribute('data-virtual-index', String(index + indexOffset));
+            children.push(row);
+            renderedRows.push(row);
+        }
+        addSpacer(range.afterHeight, 'after');
+        const retained = new Set(children);
+        Array.from(body.children).forEach((child) => {
+            if (!retained.has(child))
+                child.remove();
+        });
+        // Preserva conexão, hover e foco das linhas que continuam na mesma posição.
+        let next = body.firstElementChild;
+        children.forEach((child) => {
+            if (child !== next)
+                body.insertBefore(child, next);
+            next = child.nextElementSibling;
+        });
+        this.renderedRows = renderedRows;
+        if (focused instanceof HTMLElement && focused.isConnected && getDeepActiveElement() !== focused) {
+            focused.focus({ preventScroll: true });
+        }
+    }
+    getRows() {
+        return this.rowElements.slice();
+    }
+    /** Visão interna somente leitura, estável até a ordem, os dados ou o recorte mudarem. */
+    getRowsView(start = 0, end = this.rowElements.length) {
+        if (start === 0 && end === this.rowElements.length)
+            return this.rowElements;
+        const view = this.rowView;
+        if (view?.source === this.rowElements && view.start === start && view.end === end)
+            return view.rows;
+        const rows = this.rowElements.slice(start, end);
+        this.rowView = { source: this.rowElements, start, end, rows };
+        return rows;
+    }
+    refreshRowElements() {
+        this.invalidateGroups();
+        this.rowElements = this.data.rows.map(({ element }) => element);
+        this.rowView = undefined;
+    }
+    getRow(index) {
+        return this.data.rows[index]?.element;
+    }
+    getRowCount() {
+        return this.data.rows.length;
+    }
+    getRenderedRows() {
+        return this.renderedRows.filter((row) => row.isConnected);
+    }
+    createSpacer(height, position) {
+        const spacer = document.createElement('div');
+        spacer.setAttribute('data-table-virtual-spacer', position);
+        spacer.setAttribute('role', 'presentation');
+        spacer.style.gridColumn = '1 / -1';
+        spacer.style.height = `${Math.max(0, height)}px`;
+        spacer.style.pointerEvents = 'none';
+        return spacer;
+    }
+}

package/dist/collection/components/table/table.expansion.elements.js

@@ -0,0 +1,70 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+/**
+ * Factories dos elementos utilizados pela expansão de linhas.
+ *
+ * @module table-expansion-elements
+ */
+import { TABLE_ALIGNMENT, TABLE_EXPANSION_ACTION_ATTR, TABLE_EXPANSION_COLUMN_ATTR, TABLE_EXPANSION_COLUMN_WIDTH, TABLE_EXPANSION_GENERATED_ATTR, } from "./table.constants";
+/**
+ * Sincroniza ícone, rótulos e estado acessível da ação de expansão.
+ *
+ * @param action Componente de ação que será atualizado.
+ * @param expanded Estado atual da linha.
+ * @param rowIndex Índice da linha no corpo, começando em zero.
+ */
+export function syncExpansionAction(action, expanded, rowIndex) {
+    const stateLabel = expanded ? 'Recolher' : 'Expandir';
+    action.setAttribute('label', `${stateLabel} linha ${rowIndex + 1}`);
+    action.setAttribute('aria-label', `${stateLabel} linha ${rowIndex + 1}`);
+    action.setAttribute('icon-name', expanded ? 'fa-solid:chevron-up' : 'fa-solid:chevron-down');
+    action.setAttribute('aria-expanded', String(expanded));
+}
+/**
+ * Cria uma ação de expansão reutilizando `br-table-action`.
+ *
+ * @param options Estado inicial e índice da linha.
+ * @returns Ação identificada para consumo interno do controller.
+ */
+export function createExpansionAction({ expanded, rowIndex }) {
+    const action = document.createElement('br-table-action');
+    action.setAttribute(TABLE_EXPANSION_ACTION_ATTR, '');
+    syncExpansionAction(action, expanded, rowIndex);
+    return action;
+}
+/**
+ * Cria a célula estrutural da coluna de expansão.
+ *
+ * @param action Ação opcional; linhas desabilitadas utilizam célula vazia.
+ * @returns Célula marcada como gerada pelo controller de expansão.
+ */
+export function createExpansionCell(action) {
+    const cell = document.createElement('br-table-cell');
+    cell.setAttribute(TABLE_EXPANSION_COLUMN_ATTR, '');
+    cell.setAttribute(TABLE_EXPANSION_GENERATED_ATTR, '');
+    cell.setAttribute('horizontal-alignment', TABLE_ALIGNMENT.CENTER);
+    cell.setAttribute('vertical-alignment', TABLE_ALIGNMENT.CENTER);
+    if (action !== undefined)
+        cell.appendChild(action);
+    return cell;
+}
+/**
+ * Cria o cabeçalho vazio que define a coluna de expansão no grid.
+ *
+ * @param slotName Slot utilizado pelos demais cabeçalhos.
+ * @returns Cabeçalho com largura e alinhamentos apropriados ao chevron.
+ */
+export function createExpansionHeaderCell(slotName) {
+    const cell = document.createElement('br-table-header-cell');
+    cell.setAttribute(TABLE_EXPANSION_COLUMN_ATTR, '');
+    cell.setAttribute(TABLE_EXPANSION_GENERATED_ATTR, '');
+    cell.setAttribute('column-width', TABLE_EXPANSION_COLUMN_WIDTH);
+    cell.setAttribute('horizontal-alignment', TABLE_ALIGNMENT.CENTER);
+    cell.setAttribute('vertical-alignment', TABLE_ALIGNMENT.CENTER);
+    cell.setAttribute('aria-label', 'Expansão de linha');
+    if (slotName !== undefined)
+        cell.setAttribute('slot', slotName);
+    return cell;
+}