@govbr-ds/webcomponents 2.4.0 → 2.6.0

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

@@ -0,0 +1,179 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+/**
+ * Controller responsável pela expansão de linhas.
+ *
+ * @module table-expansion
+ */
+import { TABLE_EXPANSION_ACTION_ATTR, TABLE_EXPANSION_GENERATED_ATTR, TABLE_ROW_EXPANSION } from "./table.constants";
+import { createExpansionAction, createExpansionCell, createExpansionHeaderCell, syncExpansionAction, } from "./table.expansion.elements";
+/**
+ * Coordena a coluna, as ações e o estado de expansão das linhas.
+ *
+ * @remarks A coluna permanece estruturalmente alinhada mesmo em linhas desabilitadas.
+ */
+export class TableExpansionController {
+    constructor(options) {
+        this.options = options;
+    }
+    /**
+     * Sincroniza a estrutura segundo a configuração global e os overrides das linhas.
+     *
+     * @param tableEnabled Indica se a expansão está habilitada na tabela.
+     */
+    sync(tableEnabled) {
+        const rows = this.getBodyRows();
+        const hasExpandableRows = rows.some((row) => this.isRowEnabled(row, tableEnabled));
+        if (!hasExpandableRows) {
+            this.removeColumn();
+            return;
+        }
+        this.ensureHeaderCell();
+        rows.forEach((row, rowIndex) => {
+            this.syncRow(row, rowIndex, tableEnabled);
+        });
+    }
+    /**
+     * Consome cliques originados pelas ações internas de expansão.
+     *
+     * @param event Evento emitido por `br-table-action`.
+     * @returns `true` quando o evento foi tratado como expansão.
+     */
+    handleActionClick(event) {
+        const action = event
+            .composedPath()
+            .find((node) => node instanceof HTMLElement &&
+            node.tagName.toLowerCase() === 'br-table-action' &&
+            node.hasAttribute(TABLE_EXPANSION_ACTION_ATTR));
+        if (action === undefined)
+            return false;
+        const row = action.closest('br-table-row');
+        if (row === null)
+            return false;
+        if (row.hasAttribute('disabled'))
+            return true;
+        this.setExpanded(row, !row.hasAttribute('expanded'), 'action');
+        return true;
+    }
+    /**
+     * Define o estado de expansão de uma linha elegível.
+     *
+     * @param row Linha que receberá a mudança.
+     * @param expanded Novo estado de expansão.
+     * @param source Origem utilizada no evento público.
+     */
+    setExpanded(row, expanded, source = 'programmatic') {
+        if (!row.hasAttribute('data-row-expansion-enabled'))
+            return;
+        row.toggleAttribute('expanded', expanded);
+        row.removeAttribute('aria-expanded');
+        this.syncRowAction(row);
+        const rows = this.getBodyRows();
+        this.options.onChange({ row, rowIndex: rows.indexOf(row), expanded, source });
+    }
+    /**
+     * Recolhe todas as linhas atualmente expandidas.
+     */
+    collapseAll() {
+        this.getBodyRows().forEach((row) => {
+            if (row.hasAttribute('expanded'))
+                this.setExpanded(row, false);
+        });
+    }
+    getBodyRows() {
+        if (this.options.getRows !== undefined) {
+            return this.options.getRows();
+        }
+        return Array.from(this.options.host.querySelectorAll('br-table-row')).filter((row) => row.closest('br-table-header') === null);
+    }
+    /**
+     * Resolve o override declarado diretamente na linha.
+     */
+    getRowOverride(row) {
+        const value = row.getAttribute('row-expansion');
+        if (value === TABLE_ROW_EXPANSION.ENABLED)
+            return true;
+        if (value === TABLE_ROW_EXPANSION.DISABLED)
+            return false;
+        return undefined;
+    }
+    isRowEnabled(row, tableEnabled) {
+        const override = this.getRowOverride(row);
+        return override ?? tableEnabled;
+    }
+    /**
+     * Garante que a coluna de expansão permaneça na primeira posição.
+     */
+    ensureHeaderCell() {
+        const firstHeader = this.options.host.querySelector('br-table-header-cell');
+        if (firstHeader === null)
+            return;
+        let cell = this.options.host.querySelector(`br-table-header-cell[${TABLE_EXPANSION_GENERATED_ATTR}]`);
+        if (cell === null) {
+            const slotName = firstHeader.getAttribute('slot');
+            cell = createExpansionHeaderCell(slotName ?? undefined);
+        }
+        const parent = firstHeader.parentElement;
+        if (parent !== null && parent.firstElementChild !== cell)
+            parent.prepend(cell);
+    }
+    /**
+     * Sincroniza ação, célula estrutural e atributos de uma linha.
+     */
+    syncRow(row, rowIndex, tableEnabled) {
+        let cell = row.querySelector(`br-table-cell[${TABLE_EXPANSION_GENERATED_ATTR}]`);
+        if (!this.isRowEnabled(row, tableEnabled)) {
+            if (cell === null) {
+                cell = createExpansionCell();
+                row.prepend(cell);
+            }
+            else {
+                cell.replaceChildren();
+            }
+            row.removeAttribute('data-row-expansion-enabled');
+            row.removeAttribute('expanded');
+            row.removeAttribute('aria-expanded');
+            if (row.firstElementChild !== cell)
+                row.prepend(cell);
+            return;
+        }
+        row.setAttribute('data-row-expansion-enabled', '');
+        if (cell === null) {
+            const action = createExpansionAction({ expanded: row.hasAttribute('expanded'), rowIndex });
+            cell = createExpansionCell(action);
+            row.prepend(cell);
+        }
+        else if (cell.querySelector(`br-table-action[${TABLE_EXPANSION_ACTION_ATTR}]`) === null) {
+            cell.appendChild(createExpansionAction({ expanded: row.hasAttribute('expanded'), rowIndex }));
+        }
+        row.removeAttribute('aria-expanded');
+        if (row.firstElementChild !== cell)
+            row.prepend(cell);
+        this.syncRowAction(row, rowIndex);
+    }
+    /**
+     * Atualiza ícone e rótulos da ação pertencente à linha.
+     */
+    syncRowAction(row, rowIndex) {
+        const action = row.querySelector(`br-table-action[${TABLE_EXPANSION_ACTION_ATTR}]`);
+        if (action === null)
+            return;
+        const resolvedIndex = rowIndex ?? this.getBodyRows().indexOf(row);
+        syncExpansionAction(action, row.hasAttribute('expanded'), resolvedIndex);
+    }
+    /**
+     * Remove somente os elementos e atributos gerados pela expansão.
+     */
+    removeColumn() {
+        this.options.host.querySelectorAll(`[${TABLE_EXPANSION_GENERATED_ATTR}]`).forEach((node) => {
+            node.remove();
+        });
+        this.getBodyRows().forEach((row) => {
+            row.removeAttribute('data-row-expansion-enabled');
+            row.removeAttribute('expanded');
+            row.removeAttribute('aria-expanded');
+        });
+    }
+}

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

@@ -0,0 +1,97 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { TABLE_EXPANSION_GENERATED_ATTR, TABLE_SELECTION_GENERATED_ATTR } from "./table.constants";
+/** Entradas inválidas seguem o comportamento de uma célula simples. */
+export function resolveTableSpan(value) {
+    const span = Number(value);
+    return Number.isInteger(span) && span > 0 && span <= 1000 ? span : 1;
+}
+/** Posiciona células omitidas por mesclas, sem depender da posição no array da linha. */
+export function getTablePlacements(rows, selector) {
+    const occupied = rows.map(() => []);
+    const placements = [];
+    rows.forEach((row, rowIndex) => {
+        let column = 0;
+        Array.from(row.children)
+            .filter((cell) => cell.matches(selector))
+            .forEach((cell) => {
+            const rowSpan = Math.min(resolveTableSpan(cell.getAttribute('row-span')), rows.length - rowIndex);
+            const colSpan = resolveTableSpan(cell.getAttribute('col-span'));
+            while (Array.from({ length: colSpan }, (_, offset) => occupied[rowIndex][column + offset]).some(Boolean))
+                column++;
+            placements.push({ cell: cell, row: rowIndex, column, rowSpan, colSpan });
+            for (let y = rowIndex; y < rowIndex + rowSpan; y++) {
+                for (let x = column; x < column + colSpan; x++)
+                    occupied[y][x] = true;
+            }
+            column += colSpan;
+        });
+    });
+    return placements;
+}
+/** Colunas finais, incluindo folhas que atravessam níveis do cabeçalho. */
+export function getTableLeafHeaders(rows) {
+    const columns = [];
+    for (const placement of getTablePlacements(rows, 'br-table-header-cell')) {
+        for (let index = placement.column; index < placement.column + placement.colSpan; index++) {
+            columns[index] = placement.cell;
+        }
+    }
+    return columns;
+}
+/** Um grupo é uma sequência contígua com a mesma chave; linhas sem chave são unidades independentes. */
+export function getTableRowGroups(rows) {
+    const groups = [];
+    let previousKey;
+    for (const row of rows) {
+        const key = row.getAttribute('row-group')?.trim() || undefined;
+        if (key !== undefined && key === previousKey)
+            groups[groups.length - 1].push(row);
+        else
+            groups.push([row]);
+        previousKey = key;
+    }
+    return groups;
+}
+/** Amplia uma faixa sem separar células mescladas ou linhas de um mesmo grupo. */
+export function expandTableGroupRange(rows, start, end) {
+    const firstKey = rows[start]?.getAttribute('row-group')?.trim();
+    const lastKey = rows[end - 1]?.getAttribute('row-group')?.trim();
+    while (firstKey && start > 0 && rows[start - 1].getAttribute('row-group')?.trim() === firstKey)
+        start--;
+    while (lastKey && end < rows.length && rows[end].getAttribute('row-group')?.trim() === lastKey)
+        end++;
+    return { start, end };
+}
+/** Escreve apenas tokens internos e ARIA; não modifica props públicas do consumidor. */
+export function applyTablePlacements(placements) {
+    for (const { cell, row, column, rowSpan, colSpan } of placements) {
+        const firstRow = row + 1;
+        const lastRow = row + rowSpan + 1;
+        cell.style.setProperty('--table-cell-grid-column', `${column + 1} / span ${colSpan}`);
+        cell.style.setProperty('--table-cell-grid-row', `${firstRow} / ${lastRow}`);
+        cell.setAttribute('aria-colindex', String(column + 1));
+        if (colSpan > 1)
+            cell.setAttribute('aria-colspan', String(colSpan));
+        else
+            cell.removeAttribute('aria-colspan');
+        if (rowSpan > 1)
+            cell.setAttribute('aria-rowspan', String(rowSpan));
+        else
+            cell.removeAttribute('aria-rowspan');
+    }
+}
+/** Configura a grade multinível e estende as colunas geradas até o último nível. */
+export function applyTableHeaderLayout(header) {
+    const rows = Array.from(header?.querySelectorAll(':scope > br-table-row') ?? []);
+    header?.toggleAttribute('data-multilevel', rows.length > 1);
+    rows[0]
+        ?.querySelectorAll(`[${TABLE_SELECTION_GENERATED_ATTR}], [${TABLE_EXPANSION_GENERATED_ATTR}]`)
+        .forEach((cell) => {
+        if (cell.getAttribute('row-span') !== String(rows.length))
+            cell.setAttribute('row-span', String(rows.length));
+    });
+    applyTablePlacements(getTablePlacements(rows, 'br-table-header-cell'));
+}

package/dist/collection/components/table/table.header-height.js

@@ -0,0 +1,47 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+/** Publica a altura border-box fora do ciclo de scroll. */
+export class TableHeaderHeightObserver {
+    constructor(host, surface) {
+        this.host = host;
+        this.surface = surface;
+        this.refresh = () => {
+            if (this.observer === undefined && this.host.isConnected) {
+                this.publish(this.surface.getBoundingClientRect().height);
+            }
+        };
+    }
+    connect() {
+        this.disconnect();
+        if (this.host.closest('br-table') === null)
+            return;
+        this.publish(this.surface.getBoundingClientRect().height);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        this.observer = new ResizeObserver(([entry]) => {
+            if (!this.host.isConnected || entry === undefined)
+                return;
+            const size = entry.borderBoxSize[0];
+            const horizontal = !/^(vertical|sideways)/.test(getComputedStyle(this.surface).writingMode);
+            this.publish(size === undefined
+                ? this.surface.getBoundingClientRect().height
+                : horizontal
+                    ? size.blockSize
+                    : size.inlineSize);
+        });
+        this.observer.observe(this.surface, { box: 'border-box' });
+    }
+    disconnect() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+    }
+    publish(height) {
+        this.host.dispatchEvent(new CustomEvent('brInternalTableHeaderHeight', {
+            bubbles: true,
+            composed: false,
+            detail: { host: this.host, height, refresh: this.refresh },
+        }));
+    }
+}