@muxima-ui/core 1.2.0 → 1.4.0

package/fesm2022/muxima-ui-core-data-grid.mjs

@@ -0,0 +1,1187 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, model, booleanAttribute, numberAttribute, output, contentChildren, viewChild, ElementRef, Injector, signal, computed, afterRenderEffect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MxCheckbox } from '@muxima-ui/core/checkbox';
+import { mxUniqueId, mxNormalize } from '@muxima-ui/core/form-field';
+import * as i1 from '@muxima-ui/core/menu';
+import { MX_MENU } from '@muxima-ui/core/menu';
+
+/**
+ * Modelo de uma célula: `<ng-template mxGridCell="estado" let-row let-value="value">`.
+ */
+class MxGridCell {
+    key = input.required({ ...(ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {}), alias: 'mxGridCell' });
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxGridCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: MxGridCell, isStandalone: true, selector: "ng-template[mxGridCell]", inputs: { key: { classPropertyName: "key", publicName: "mxGridCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxGridCell, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mxGridCell]' }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "mxGridCell", required: true }] }] } });
+/** Conteúdo da barra por cima da grelha (pesquisa, botões). */
+class MxGridToolbar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxGridToolbar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: MxGridToolbar, isStandalone: true, selector: "[mxGridToolbar]", host: { classAttribute: "mx-grid-toolbar-slot" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxGridToolbar, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mxGridToolbar]', host: { class: 'mx-grid-toolbar-slot' } }]
+        }] });
+const HEADER_ROWS_BASE = 1;
+/** Aplica o filtro de uma coluna numérica: 100, >100, >=100, <100, <=100, 10-20. */
+function numberMatch(value, expr) {
+    const n = typeof value === 'number' ? value : Number(String(value).replace(/\s/g, '').replace(',', '.'));
+    if (Number.isNaN(n))
+        return false;
+    const e = expr.replace(/\s/g, '').replace(',', '.');
+    let m;
+    if ((m = e.match(/^(-?[\d.]+)-(-?[\d.]+)$/)))
+        return n >= Number(m[1]) && n <= Number(m[2]);
+    if ((m = e.match(/^(>=|<=|>|<|=)?(-?[\d.]+)$/))) {
+        const v = Number(m[2]);
+        switch (m[1]) {
+            case '>':
+                return n > v;
+            case '>=':
+                return n >= v;
+            case '<':
+                return n < v;
+            case '<=':
+                return n <= v;
+            default:
+                return n === v;
+        }
+    }
+    return true;
+}
+/**
+ * Grelha de dados (padrão WAI-ARIA Grid): ordenação, filtros por coluna, pesquisa,
+ * selecção, colunas redimensionáveis, fixas e escondíveis, e scroll virtual para
+ * milhares de linhas. Navega-se célula a célula com as setas.
+ *
+ * ```html
+ * <mx-data-grid [data]="facturas" [columns]="colunas" rowKey="numero"
+ *   selection="multiple" [(selected)]="escolhidas" height="480px" aria-label="Facturas">
+ *   <ng-template mxGridCell="estado" let-row>
+ *     <span mxBadge [variant]="cor(row.estado)">{{ row.estado }}</span>
+ *   </ng-template>
+ * </mx-data-grid>
+ * ```
+ *
+ * Com `manual`, a grelha não ordena nem filtra: emite [(sort)] e [(filters)] para o
+ * servidor e mostra `data` tal como chega (indica o total em `totalRows`).
+ */
+class MxDataGrid {
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Chave única de cada linha: nome do campo ou função. */
+    rowKey = input('id', ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    selection = input('none', ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Chaves das linhas seleccionadas. */
+    selected = model([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    sort = model({ key: null, direction: 'asc' }, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /** Texto de cada filtro, por chave de coluna. */
+    filters = model({}, ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    /** Pesquisa em todas as colunas visíveis. */
+    query = input('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /** Não ordena nem filtra: só emite sort e filters (dados do servidor). */
+    manual = input(false, { ...(ngDevMode ? { debugName: "manual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Total de linhas no servidor (modo manual), para aria-rowcount e o estado. */
+    totalRows = input(null, ...(ngDevMode ? [{ debugName: "totalRows" }] : /* istanbul ignore next */ []));
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    rowHeight = input(40, { ...(ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Scroll virtual: `auto` liga a partir de 100 linhas (precisa de height). */
+    virtual = input('auto', ...(ngDevMode ? [{ debugName: "virtual" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    columnMenu = input(true, { ...(ngDevMode ? { debugName: "columnMenu" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input('Tabela de dados', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Coluna cujo texto identifica a linha nos nomes ("Seleccionar FT 2026/0201"). */
+    labelKey = input(null, ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    emptyText = input('Sem resultados.', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    loadingText = input('A carregar...', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    columnsText = input('Colunas', ...(ngDevMode ? [{ debugName: "columnsText" }] : /* istanbul ignore next */ []));
+    filterText = input('Filtrar', ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+    allText = input('Todos', ...(ngDevMode ? [{ debugName: "allText" }] : /* istanbul ignore next */ []));
+    selectAllText = input('Seleccionar todas as linhas', ...(ngDevMode ? [{ debugName: "selectAllText" }] : /* istanbul ignore next */ []));
+    selectRowText = input('Seleccionar', ...(ngDevMode ? [{ debugName: "selectRowText" }] : /* istanbul ignore next */ []));
+    selectText = input('Selecção', ...(ngDevMode ? [{ debugName: "selectText" }] : /* istanbul ignore next */ []));
+    resizeHint = input('Alt e setas esquerda e direita mudam a largura da coluna.', ...(ngDevMode ? [{ debugName: "resizeHint" }] : /* istanbul ignore next */ []));
+    /** Enter ou duplo clique numa linha. */
+    rowActivate = output();
+    cells = contentChildren(MxGridCell, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    toolbarSlot = contentChildren(MxGridToolbar, ...(ngDevMode ? [{ debugName: "toolbarSlot" }] : /* istanbul ignore next */ []));
+    scroller = viewChild.required('scroller');
+    host = inject(ElementRef).nativeElement;
+    injector = inject(Injector);
+    announcer = inject(LiveAnnouncer);
+    checkWidth = 44;
+    resizeHintId = mxUniqueId('mx-grid-resize');
+    radioName = mxUniqueId('mx-grid-row');
+    widths = signal({}, ...(ngDevMode ? [{ debugName: "widths" }] : /* istanbul ignore next */ []));
+    hiddenKeys = signal(null, ...(ngDevMode ? [{ debugName: "hiddenKeys" }] : /* istanbul ignore next */ []));
+    scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    viewport = signal(400, ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+    /** Célula activa: linha e coluna na grelha (0 = cabeçalho). */
+    active = signal([0, 0], ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    showToolbar = computed(() => this.columnMenu() || this.toolbarSlot().length > 0, ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    offset = computed(() => (this.selection() === 'none' ? 0 : 1), ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    hasFilters = computed(() => this.columns().some((c) => c.filter), ...(ngDevMode ? [{ debugName: "hasFilters" }] : /* istanbul ignore next */ []));
+    headerRows = computed(() => HEADER_ROWS_BASE + (this.hasFilters() ? 1 : 0), ...(ngDevMode ? [{ debugName: "headerRows" }] : /* istanbul ignore next */ []));
+    hideableColumns = computed(() => this.columns().filter((c) => c.hideable !== false), ...(ngDevMode ? [{ debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
+    visibleColumns = computed(() => {
+        const hidden = this.hiddenKeys();
+        const cols = this.columns().filter((c) => !(hidden ? hidden.has(c.key) : c.hidden));
+        return [
+            ...cols.filter((c) => c.pinned === 'start'),
+            ...cols.filter((c) => !c.pinned),
+            ...cols.filter((c) => c.pinned === 'end'),
+        ];
+    }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    colCount = computed(() => this.visibleColumns().length + this.offset(), ...(ngDevMode ? [{ debugName: "colCount" }] : /* istanbul ignore next */ []));
+    tableWidth = computed(() => this.visibleColumns().reduce((a, c) => a + this.widthOf(c), 0) +
+        (this.offset() ? this.checkWidth : 0), ...(ngDevMode ? [{ debugName: "tableWidth" }] : /* istanbul ignore next */ []));
+    /** Linhas depois de filtros, pesquisa e ordenação. */
+    rows = computed(() => {
+        const data = this.data();
+        if (this.manual())
+            return data;
+        const filters = Object.entries(this.filters()).filter(([, v]) => v?.trim());
+        const cols = this.columns();
+        const q = mxNormalize(this.query().trim());
+        let out = data.filter((row) => filters.every(([key, v]) => {
+            const c = cols.find((x) => x.key === key);
+            if (!c)
+                return true;
+            const value = this.valueOf(c, row);
+            if (c.filter === 'number')
+                return numberMatch(value, v);
+            if (c.filter === 'select')
+                return String(value ?? '') === v;
+            return mxNormalize(this.text(c, row)).includes(mxNormalize(v.trim()));
+        }));
+        if (q) {
+            const vis = this.visibleColumns();
+            out = out.filter((row) => vis.some((c) => mxNormalize(this.text(c, row)).includes(q)));
+        }
+        const s = this.sort();
+        const sc = s.key ? cols.find((c) => c.key === s.key) : null;
+        if (sc) {
+            const collator = new Intl.Collator('pt', { numeric: true, sensitivity: 'base' });
+            const dir = s.direction === 'asc' ? 1 : -1;
+            out = [...out].sort((a, b) => {
+                const x = this.valueOf(sc, a);
+                const y = this.valueOf(sc, b);
+                if (x == null && y == null)
+                    return 0;
+                if (x == null)
+                    return 1;
+                if (y == null)
+                    return -1;
+                if (x instanceof Date && y instanceof Date)
+                    return (x.getTime() - y.getTime()) * dir;
+                if (typeof x === 'number' && typeof y === 'number')
+                    return (x - y) * dir;
+                return collator.compare(String(x), String(y)) * dir;
+            });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    isVirtual = computed(() => {
+        const v = this.virtual();
+        return (v === 'auto' ? this.rows().length > 100 : v) && !!(this.height() || this.maxHeight());
+    }, ...(ngDevMode ? [{ debugName: "isVirtual" }] : /* istanbul ignore next */ []));
+    range = computed(() => {
+        const n = this.rows().length;
+        if (!this.isVirtual())
+            return { start: 0, end: n };
+        const h = this.rowHeight();
+        const buffer = 8;
+        const start = Math.max(0, Math.floor(this.scrollTop() / h) - buffer);
+        const end = Math.min(n, start + Math.ceil(this.viewport() / h) + buffer * 2);
+        return { start, end };
+    }, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    rendered = computed(() => {
+        const { start, end } = this.range();
+        return this.rows().slice(start, end);
+    }, ...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
+    rowCount = computed(() => (this.totalRows() ?? this.rows().length) + this.headerRows(), ...(ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []));
+    selectedSet = computed(() => new Set(this.selected()), ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    allSelected = computed(() => this.rows().length > 0 && this.rows().every((r) => this.selectedSet().has(this.keyOf(r))), ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    someSelected = computed(() => !this.allSelected() && this.rows().some((r) => this.selectedSet().has(this.keyOf(r))), ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    statusText = computed(() => {
+        const fmt = new Intl.NumberFormat('pt-AO');
+        const total = this.totalRows() ?? this.rows().length;
+        const parts = [`${fmt.format(total)} ${total === 1 ? 'linha' : 'linhas'}`];
+        if (!this.manual() && this.rows().length !== this.data().length)
+            parts[0] += ` de ${fmt.format(this.data().length)}`;
+        const sel = this.selected().length;
+        if (this.selection() !== 'none' && sel)
+            parts.push(`${fmt.format(sel)} ${sel === 1 ? 'seleccionada' : 'seleccionadas'}`);
+        return parts.join(', ');
+    }, ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // tabindex itinerante: só a célula activa (ou o controlo dentro dela) entra no Tab
+        afterRenderEffect({
+            write: () => {
+                const [r, c] = this.active();
+                this.rendered();
+                this.visibleColumns();
+                const table = this.host.querySelector('.mx-grid-table');
+                if (!table)
+                    return;
+                let activeEl = table.querySelector(`[data-cell="${r}:${c}"]`);
+                if (!activeEl)
+                    activeEl = table.querySelector('[data-cell]');
+                table.querySelectorAll('[data-cell]').forEach((cell) => {
+                    const isActive = cell === activeEl;
+                    const widget = this.widgetIn(cell);
+                    cell.tabIndex = isActive && !widget ? 0 : -1;
+                    cell
+                        .querySelectorAll('button, a[href], input, select, textarea, [tabindex]')
+                        .forEach((w) => {
+                        if (w === cell)
+                            return;
+                        w.tabIndex = isActive && w === widget ? 0 : -1;
+                    });
+                });
+            },
+        });
+        afterNextRender(() => this.measure());
+    }
+    // ---- utilitários ----
+    keyOf(row) {
+        const k = this.rowKey();
+        return typeof k === 'function' ? k(row) : row[k];
+    }
+    valueOf(c, row) {
+        return c.value ? c.value(row) : row[c.key];
+    }
+    text(c, row) {
+        const v = this.valueOf(c, row);
+        if (c.format)
+            return c.format(v, row);
+        if (v instanceof Date)
+            return v.toLocaleDateString('pt-AO');
+        if (typeof v === 'number')
+            return v.toLocaleString('pt-AO');
+        return v == null ? '' : String(v);
+    }
+    rowLabel(row) {
+        const key = this.labelKey() ?? this.visibleColumns()[0]?.key;
+        const c = this.columns().find((x) => x.key === key);
+        return c ? this.text(c, row) : String(this.keyOf(row));
+    }
+    cellTemplate(key) {
+        return this.cells().find((t) => t.key() === key)?.template ?? null;
+    }
+    widthOf(c) {
+        return this.widths()[c.key] ?? c.width ?? 160;
+    }
+    pinOffset(c) {
+        let left = this.offset() ? this.checkWidth : 0;
+        for (const x of this.visibleColumns()) {
+            if (x === c)
+                break;
+            if (x.pinned === 'start')
+                left += this.widthOf(x);
+        }
+        return left;
+    }
+    pinOffsetEnd(c) {
+        let right = 0;
+        const cols = [...this.visibleColumns()].reverse();
+        for (const x of cols) {
+            if (x === c)
+                break;
+            if (x.pinned === 'end')
+                right += this.widthOf(x);
+        }
+        return right;
+    }
+    optionsOf(c) {
+        if (c.filterOptions)
+            return c.filterOptions;
+        return [...new Set(this.data().map((r) => String(this.valueOf(c, r) ?? '')))]
+            .filter(Boolean)
+            .sort((a, b) => a.localeCompare(b, 'pt'));
+    }
+    isHidden(c) {
+        const hidden = this.hiddenKeys();
+        return hidden ? hidden.has(c.key) : !!c.hidden;
+    }
+    ariaSort(c) {
+        if (c.sortable === false)
+            return null;
+        const s = this.sort();
+        return s.key === c.key ? (s.direction === 'asc' ? 'ascending' : 'descending') : 'none';
+    }
+    isSelected(row) {
+        return this.selectedSet().has(this.keyOf(row));
+    }
+    // ---- acções ----
+    toggleSort(c) {
+        if (c.sortable === false)
+            return;
+        const s = this.sort();
+        const next = s.key !== c.key
+            ? { key: c.key, direction: 'asc' }
+            : s.direction === 'asc'
+                ? { key: c.key, direction: 'desc' }
+                : { key: null, direction: 'asc' };
+        this.sort.set(next);
+        this.announcer.announce(next.key
+            ? `Ordenado por ${c.header}, ${next.direction === 'asc' ? 'ascendente' : 'descendente'}`
+            : 'Sem ordenação');
+    }
+    setFilter(key, value) {
+        this.filters.update((f) => ({ ...f, [key]: value }));
+        this.scrollTo(0);
+    }
+    toggleColumn(key) {
+        const current = new Set(this.hiddenKeys() ??
+            this.columns()
+                .filter((c) => c.hidden)
+                .map((c) => c.key));
+        if (current.has(key))
+            current.delete(key);
+        else if (this.visibleColumns().length > 1)
+            current.add(key);
+        this.hiddenKeys.set(current);
+    }
+    toggleRow(row) {
+        const key = this.keyOf(row);
+        if (this.selection() === 'single') {
+            this.selected.set(this.isSelected(row) ? [] : [key]);
+            return;
+        }
+        const set = new Set(this.selected());
+        if (set.has(key))
+            set.delete(key);
+        else
+            set.add(key);
+        this.selected.set([...set]);
+    }
+    toggleAll() {
+        const keys = this.rows().map((r) => this.keyOf(r));
+        if (this.allSelected()) {
+            const drop = new Set(keys);
+            this.selected.set(this.selected().filter((k) => !drop.has(k)));
+        }
+        else {
+            this.selected.set([...new Set([...this.selected(), ...keys])]);
+        }
+    }
+    setWidth(key, width) {
+        const c = this.columns().find((x) => x.key === key);
+        const min = c?.minWidth ?? 64;
+        this.widths.update((w) => ({ ...w, [key]: Math.max(min, Math.round(width)) }));
+    }
+    resetWidth(c) {
+        this.widths.update((w) => {
+            const { [c.key]: _, ...rest } = w;
+            return rest;
+        });
+    }
+    startResize(event, c) {
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = event.clientX;
+        const start = this.widthOf(c);
+        const move = (e) => this.setWidth(c.key, start + (e.clientX - startX));
+        const up = () => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+    }
+    // ---- scroll ----
+    measure() {
+        const el = this.scroller().nativeElement;
+        this.viewport.set(el.clientHeight || 400);
+    }
+    onScroll() {
+        const el = this.scroller().nativeElement;
+        this.scrollTop.set(el.scrollTop);
+        if (el.clientHeight)
+            this.viewport.set(el.clientHeight);
+    }
+    scrollTo(top) {
+        const el = this.scroller().nativeElement;
+        el.scrollTop = top;
+        this.scrollTop.set(top);
+    }
+    // ---- teclado (padrão Grid) ----
+    widgetIn(cell) {
+        return cell.querySelector('input, select, textarea, button:not(.mx-grid-resize), a[href]');
+    }
+    parseCell(el) {
+        const cell = el?.closest('[data-cell]');
+        if (!cell)
+            return null;
+        const [r, c] = cell.dataset['cell'].split(':').map(Number);
+        return [r, c];
+    }
+    onFocusIn(event) {
+        const pos = this.parseCell(event.target);
+        if (pos && (pos[0] !== this.active()[0] || pos[1] !== this.active()[1]))
+            this.active.set(pos);
+    }
+    lastRow() {
+        return Math.max(this.headerRows() - 1, this.headerRows() + this.rows().length - 1);
+    }
+    /** Move a célula activa e põe-lhe o foco (fazendo scroll se for preciso). */
+    focusCell(row, col) {
+        const r = Math.min(Math.max(row, 0), this.lastRow());
+        const c = Math.min(Math.max(col, 0), this.colCount() - 1);
+        this.active.set([r, c]);
+        const dataIndex = r - this.headerRows();
+        if (this.isVirtual() && dataIndex >= 0) {
+            const el = this.scroller().nativeElement;
+            const h = this.rowHeight();
+            const headerH = el.querySelector('thead')?.getBoundingClientRect().height ?? 0;
+            const top = dataIndex * h;
+            if (top < el.scrollTop)
+                this.scrollTo(top);
+            else if (top + h > el.scrollTop + el.clientHeight - headerH)
+                this.scrollTo(top + h - el.clientHeight + headerH);
+        }
+        afterNextRender(() => {
+            const cell = this.host.querySelector(`[data-cell="${r}:${c}"]`);
+            if (!cell)
+                return;
+            (this.widgetIn(cell) ?? cell).focus();
+            cell.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+        }, { injector: this.injector });
+    }
+    onKeydown(event) {
+        const pos = this.parseCell(event.target);
+        if (!pos)
+            return;
+        const [r, c] = pos;
+        const target = event.target;
+        const inText = target.matches('input:not([type=checkbox]):not([type=radio]), textarea');
+        const inSelect = target.matches('select');
+        const page = Math.max(1, Math.floor(this.scroller().nativeElement.clientHeight / this.rowHeight()) - 1);
+        const col = this.visibleColumns()[c - this.offset()];
+        const dataIndex = r - this.headerRows();
+        const row = dataIndex >= 0 ? this.rows()[dataIndex] : undefined;
+        // redimensionar com Alt + setas no cabeçalho
+        if (event.altKey &&
+            r === 0 &&
+            col &&
+            col.resizable !== false &&
+            (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            event.preventDefault();
+            this.setWidth(col.key, this.widthOf(col) + (event.key === 'ArrowRight' ? 16 : -16));
+            this.announcer.announce(`${col.header}, ${this.widthOf(col)} píxeis`);
+            return;
+        }
+        if (inSelect)
+            return;
+        if (inText && !['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown'].includes(event.key))
+            return;
+        const ctrl = event.ctrlKey || event.metaKey;
+        let next = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = [r, c + 1];
+                break;
+            case 'ArrowLeft':
+                next = [r, c - 1];
+                break;
+            case 'ArrowDown':
+                next = [r + 1, c];
+                break;
+            case 'ArrowUp':
+                next = [r - 1, c];
+                break;
+            case 'Home':
+                next = ctrl ? [0, 0] : [r, 0];
+                break;
+            case 'End':
+                next = ctrl ? [this.lastRow(), this.colCount() - 1] : [r, this.colCount() - 1];
+                break;
+            case 'PageDown':
+                next = [Math.max(r, this.headerRows()) + page, c];
+                break;
+            case 'PageUp':
+                next = [Math.max(this.headerRows(), r - page), c];
+                break;
+            case ' ':
+                if (row && this.selection() !== 'none' && !target.matches('button, a, input')) {
+                    event.preventDefault();
+                    this.toggleRow(row);
+                }
+                return;
+            case 'Enter':
+                if (r === 0 && col) {
+                    event.preventDefault();
+                    this.toggleSort(col);
+                }
+                else if (row && !target.matches('button, a, input, select')) {
+                    event.preventDefault();
+                    this.rowActivate.emit(row);
+                }
+                return;
+            case 'a':
+                if (ctrl && this.selection() === 'multiple') {
+                    event.preventDefault();
+                    this.toggleAll();
+                }
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.focusCell(next[0], next[1]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxDataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxDataGrid, isStandalone: true, selector: "mx-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, totalRows: { classPropertyName: "totalRows", publicName: "totalRows", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, columnMenu: { classPropertyName: "columnMenu", publicName: "columnMenu", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, columnsText: { classPropertyName: "columnsText", publicName: "columnsText", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, allText: { classPropertyName: "allText", publicName: "allText", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, selectRowText: { classPropertyName: "selectRowText", publicName: "selectRowText", isSignal: true, isRequired: false, transformFunction: null }, selectText: { classPropertyName: "selectText", publicName: "selectText", isSignal: true, isRequired: false, transformFunction: null }, resizeHint: { classPropertyName: "resizeHint", publicName: "resizeHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", sort: "sortChange", filters: "filtersChange", rowActivate: "rowActivate" }, host: { properties: { "attr.data-density": "density() === \"comfortable\" ? null : density()", "attr.aria-label": "null" }, classAttribute: "mx-grid" }, queries: [{ propertyName: "cells", predicate: MxGridCell, isSignal: true }, { propertyName: "toolbarSlot", predicate: MxGridToolbar, isSignal: true }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], exportAs: ["mxDataGrid"], ngImport: i0, template: `
+    @if (showToolbar()) {
+      <div class="mx-grid-toolbar">
+        <ng-content select="[mxGridToolbar]" />
+        @if (columnMenu()) {
+          <button type="button" class="mx-grid-columns-button" [mxMenuTriggerFor]="colunas">
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path
+                d="M2.5 3.5h11v9h-11zM6.5 3.5v9M10 3.5v9"
+                stroke="currentColor"
+                stroke-width="1.3"
+                stroke-linejoin="round"
+              />
+            </svg>
+            {{ columnsText() }}
+          </button>
+          <ng-template #colunas>
+            <div mxMenu>
+              @for (c of hideableColumns(); track c.key) {
+                <button
+                  mxMenuItemCheckbox
+                  type="button"
+                  [checked]="!isHidden(c)"
+                  (mxMenuItemTriggered)="toggleColumn(c.key)"
+                >
+                  {{ c.header }}
+                </button>
+              }
+            </div>
+          </ng-template>
+        }
+      </div>
+    }
+
+    <div
+      class="mx-grid-scroller"
+      #scroller
+      [style.height]="height()"
+      [style.max-height]="maxHeight()"
+      (scroll)="onScroll()"
+    >
+      <table
+        class="mx-grid-table"
+        role="grid"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-rowcount]="rowCount()"
+        [attr.aria-colcount]="colCount()"
+        [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null"
+        [attr.aria-busy]="loading() ? 'true' : null"
+        [style.width.px]="tableWidth()"
+        (keydown)="onKeydown($event)"
+        (focusin)="onFocusIn($event)"
+      >
+        <colgroup>
+          @if (selection() !== 'none') {
+            <col [style.width.px]="checkWidth" />
+          }
+          @for (c of visibleColumns(); track c.key) {
+            <col [style.width.px]="widthOf(c)" />
+          }
+        </colgroup>
+        <thead>
+          <tr aria-rowindex="1" class="mx-grid-header-row">
+            @if (selection() !== 'none') {
+              <th
+                class="mx-grid-check mx-grid-pinned-start"
+                scope="col"
+                aria-colindex="1"
+                [style.left.px]="0"
+                [attr.data-cell]="'0:0'"
+              >
+                @if (selection() === 'multiple') {
+                  <input
+                    type="checkbox"
+                    mxCheckbox
+                    [checked]="allSelected()"
+                    [indeterminate]="someSelected()"
+                    [attr.aria-label]="selectAllText()"
+                    (change)="toggleAll()"
+                    tabindex="-1"
+                  />
+                } @else {
+                  <span class="mx-visually-hidden">{{ selectText() }}</span>
+                }
+              </th>
+            }
+            @for (c of visibleColumns(); track c.key; let i = $index) {
+              <th
+                scope="col"
+                [attr.aria-colindex]="i + 1 + offset()"
+                [attr.aria-sort]="ariaSort(c)"
+                [attr.aria-describedby]="c.resizable !== false ? resizeHintId : null"
+                [attr.data-align]="c.align ?? null"
+                [attr.data-cell]="'0:' + (i + offset())"
+                [class.mx-grid-pinned-start]="c.pinned === 'start'"
+                [class.mx-grid-pinned-end]="c.pinned === 'end'"
+                [style.left.px]="c.pinned === 'start' ? pinOffset(c) : null"
+                [style.right.px]="c.pinned === 'end' ? pinOffsetEnd(c) : null"
+              >
+                @if (c.sortable !== false) {
+                  <button type="button" class="mx-grid-sort" tabindex="-1" (click)="toggleSort(c)">
+                    {{ c.header }}
+                    <svg class="mx-sort-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                      @switch (ariaSort(c)) {
+                        @case ('ascending') {
+                          <path
+                            d="M8 12V4M4.5 7.5L8 4l3.5 3.5"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        }
+                        @case ('descending') {
+                          <path
+                            d="M8 4v8M4.5 8.5L8 12l3.5-3.5"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        }
+                        @default {
+                          <path
+                            d="M5 6.5L8 3.5l3 3M5 9.5l3 3 3-3"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        }
+                      }
+                    </svg>
+                  </button>
+                } @else {
+                  <span class="mx-grid-header-text">{{ c.header }}</span>
+                }
+                @if (c.resizable !== false) {
+                  <span
+                    class="mx-grid-resize"
+                    aria-hidden="true"
+                    (pointerdown)="startResize($event, c)"
+                    (dblclick)="resetWidth(c)"
+                  ></span>
+                }
+              </th>
+            }
+          </tr>
+          @if (hasFilters()) {
+            <tr aria-rowindex="2" class="mx-grid-filter-row">
+              @if (selection() !== 'none') {
+                <td
+                  class="mx-grid-check mx-grid-pinned-start"
+                  aria-colindex="1"
+                  [style.left.px]="0"
+                  [attr.data-cell]="'1:0'"
+                ></td>
+              }
+              @for (c of visibleColumns(); track c.key; let i = $index) {
+                <td
+                  [attr.aria-colindex]="i + 1 + offset()"
+                  [attr.data-cell]="'1:' + (i + offset())"
+                  [class.mx-grid-pinned-start]="c.pinned === 'start'"
+                  [class.mx-grid-pinned-end]="c.pinned === 'end'"
+                  [style.left.px]="c.pinned === 'start' ? pinOffset(c) : null"
+                  [style.right.px]="c.pinned === 'end' ? pinOffsetEnd(c) : null"
+                >
+                  @switch (c.filter) {
+                    @case ('select') {
+                      <select
+                        class="mx-grid-filter"
+                        tabindex="-1"
+                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [value]="filters()[c.key] || ''"
+                        (change)="setFilter(c.key, $any($event.target).value)"
+                      >
+                        <option value="">{{ allText() }}</option>
+                        @for (o of optionsOf(c); track o) {
+                          <option [value]="o" [selected]="filters()[c.key] === o">{{ o }}</option>
+                        }
+                      </select>
+                    }
+                    @case ('text') {
+                      <input
+                        class="mx-grid-filter"
+                        tabindex="-1"
+                        type="search"
+                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [value]="filters()[c.key] || ''"
+                        (input)="setFilter(c.key, $any($event.target).value)"
+                      />
+                    }
+                    @case ('number') {
+                      <input
+                        class="mx-grid-filter"
+                        tabindex="-1"
+                        type="text"
+                        inputmode="decimal"
+                        placeholder=">, <, 10-20"
+                        [attr.aria-label]="
+                          filterText() +
+                          ' ' +
+                          c.header +
+                          ', aceita maior que, menor que e intervalos'
+                        "
+                        [value]="filters()[c.key] || ''"
+                        (input)="setFilter(c.key, $any($event.target).value)"
+                      />
+                    }
+                  }
+                </td>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody>
+          @if (range().start > 0) {
+            <tr class="mx-grid-spacer" aria-hidden="true">
+              <td [attr.colspan]="colCount()" [style.height.px]="range().start * rowHeight()"></td>
+            </tr>
+          }
+          @for (row of rendered(); track keyOf(row); let r = $index) {
+            @let ri = range().start + r;
+            <tr
+              [attr.aria-rowindex]="ri + headerRows() + 1"
+              [attr.aria-selected]="selection() === 'none' ? null : isSelected(row)"
+              [style.height.px]="rowHeight()"
+              (dblclick)="rowActivate.emit(row)"
+            >
+              @if (selection() !== 'none') {
+                <td
+                  class="mx-grid-check mx-grid-pinned-start"
+                  aria-colindex="1"
+                  [style.left.px]="0"
+                  [attr.data-cell]="ri + headerRows() + ':0'"
+                >
+                  @if (selection() === 'multiple') {
+                    <input
+                      type="checkbox"
+                      mxCheckbox
+                      tabindex="-1"
+                      [checked]="isSelected(row)"
+                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      (change)="toggleRow(row)"
+                    />
+                  } @else {
+                    <input
+                      type="radio"
+                      class="mx-radio"
+                      tabindex="-1"
+                      [name]="radioName"
+                      [checked]="isSelected(row)"
+                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      (change)="toggleRow(row)"
+                    />
+                  }
+                </td>
+              }
+              @for (c of visibleColumns(); track c.key; let i = $index) {
+                <td
+                  [attr.aria-colindex]="i + 1 + offset()"
+                  [attr.data-cell]="ri + headerRows() + ':' + (i + offset())"
+                  [attr.data-align]="c.align ?? null"
+                  [class.mx-grid-pinned-start]="c.pinned === 'start'"
+                  [class.mx-grid-pinned-end]="c.pinned === 'end'"
+                  [style.left.px]="c.pinned === 'start' ? pinOffset(c) : null"
+                  [style.right.px]="c.pinned === 'end' ? pinOffsetEnd(c) : null"
+                >
+                  @if (cellTemplate(c.key); as tpl) {
+                    <ng-container
+                      *ngTemplateOutlet="
+                        tpl;
+                        context: { $implicit: row, value: valueOf(c, row), column: c }
+                      "
+                    />
+                  } @else {
+                    {{ text(c, row) }}
+                  }
+                </td>
+              }
+            </tr>
+          } @empty {
+            <tr>
+              <td
+                class="mx-grid-empty"
+                [attr.colspan]="colCount()"
+                [attr.data-cell]="headerRows() + ':0'"
+              >
+                {{ loading() ? loadingText() : emptyText() }}
+              </td>
+            </tr>
+          }
+          @if (range().end < rows().length) {
+            <tr class="mx-grid-spacer" aria-hidden="true">
+              <td
+                [attr.colspan]="colCount()"
+                [style.height.px]="(rows().length - range().end) * rowHeight()"
+              ></td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mx-grid-footer">
+      <span class="mx-grid-status" aria-live="polite">{{ statusText() }}</span>
+      <ng-content select="[mxGridFooter]" />
+    </div>
+    <span class="mx-visually-hidden" [id]="resizeHintId">{{ resizeHint() }}</span>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MxCheckbox, selector: "input[type=checkbox][mxCheckbox]", inputs: ["size", "indeterminate"], exportAs: ["mxCheckbox"] }, { kind: "directive", type: i1.MxMenuTrigger, selector: "[mxMenuTriggerFor]", exportAs: ["mxMenuTrigger"] }, { kind: "directive", type: i1.MxMenu, selector: "[mxMenu]", exportAs: ["mxMenu"] }, { kind: "directive", type: i1.MxMenuItemCheckbox, selector: "[mxMenuItemCheckbox]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxDataGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-data-grid',
+                    exportAs: 'mxDataGrid',
+                    imports: [NgTemplateOutlet, MxCheckbox, MX_MENU],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'mx-grid',
+                        '[attr.data-density]': 'density() === "comfortable" ? null : density()',
+                        '[attr.aria-label]': 'null',
+                    },
+                    template: `
+    @if (showToolbar()) {
+      <div class="mx-grid-toolbar">
+        <ng-content select="[mxGridToolbar]" />
+        @if (columnMenu()) {
+          <button type="button" class="mx-grid-columns-button" [mxMenuTriggerFor]="colunas">
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path
+                d="M2.5 3.5h11v9h-11zM6.5 3.5v9M10 3.5v9"
+                stroke="currentColor"
+                stroke-width="1.3"
+                stroke-linejoin="round"
+              />
+            </svg>
+            {{ columnsText() }}
+          </button>
+          <ng-template #colunas>
+            <div mxMenu>
+              @for (c of hideableColumns(); track c.key) {
+                <button
+                  mxMenuItemCheckbox
+                  type="button"
+                  [checked]="!isHidden(c)"
+                  (mxMenuItemTriggered)="toggleColumn(c.key)"
+                >
+                  {{ c.header }}
+                </button>
+              }
+            </div>
+          </ng-template>
+        }
+      </div>
+    }
+
+    <div
+      class="mx-grid-scroller"
+      #scroller
+      [style.height]="height()"
+      [style.max-height]="maxHeight()"
+      (scroll)="onScroll()"
+    >
+      <table
+        class="mx-grid-table"
+        role="grid"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-rowcount]="rowCount()"
+        [attr.aria-colcount]="colCount()"
+        [attr.aria-multiselectable]="selection() === 'multiple' ? 'true' : null"
+        [attr.aria-busy]="loading() ? 'true' : null"
+        [style.width.px]="tableWidth()"
+        (keydown)="onKeydown($event)"
+        (focusin)="onFocusIn($event)"
+      >
+        <colgroup>
+          @if (selection() !== 'none') {
+            <col [style.width.px]="checkWidth" />
+          }
+          @for (c of visibleColumns(); track c.key) {
+            <col [style.width.px]="widthOf(c)" />
+          }
+        </colgroup>
+        <thead>
+          <tr aria-rowindex="1" class="mx-grid-header-row">
+            @if (selection() !== 'none') {
+              <th
+                class="mx-grid-check mx-grid-pinned-start"
+                scope="col"
+                aria-colindex="1"
+                [style.left.px]="0"
+                [attr.data-cell]="'0:0'"
+              >
+                @if (selection() === 'multiple') {
+                  <input
+                    type="checkbox"
+                    mxCheckbox
+                    [checked]="allSelected()"
+                    [indeterminate]="someSelected()"
+                    [attr.aria-label]="selectAllText()"
+                    (change)="toggleAll()"
+                    tabindex="-1"
+                  />
+                } @else {
+                  <span class="mx-visually-hidden">{{ selectText() }}</span>
+                }
+              </th>
+            }
+            @for (c of visibleColumns(); track c.key; let i = $index) {
+              <th
+                scope="col"
+                [attr.aria-colindex]="i + 1 + offset()"
+                [attr.aria-sort]="ariaSort(c)"
+                [attr.aria-describedby]="c.resizable !== false ? resizeHintId : null"
+                [attr.data-align]="c.align ?? null"
+                [attr.data-cell]="'0:' + (i + offset())"
+                [class.mx-grid-pinned-start]="c.pinned === 'start'"
+                [class.mx-grid-pinned-end]="c.pinned === 'end'"
+                [style.left.px]="c.pinned === 'start' ? pinOffset(c) : null"
+                [style.right.px]="c.pinned === 'end' ? pinOffsetEnd(c) : null"
+              >
+                @if (c.sortable !== false) {
+                  <button type="button" class="mx-grid-sort" tabindex="-1" (click)="toggleSort(c)">
+                    {{ c.header }}
+                    <svg class="mx-sort-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                      @switch (ariaSort(c)) {
+                        @case ('ascending') {
+                          <path
+                            d="M8 12V4M4.5 7.5L8 4l3.5 3.5"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        }
+                        @case ('descending') {
+                          <path
+                            d="M8 4v8M4.5 8.5L8 12l3.5-3.5"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        }
+                        @default {
+                          <path
+                            d="M5 6.5L8 3.5l3 3M5 9.5l3 3 3-3"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        }
+                      }
+                    </svg>
+                  </button>
+                } @else {
+                  <span class="mx-grid-header-text">{{ c.header }}</span>
+                }
+                @if (c.resizable !== false) {
+                  <span
+                    class="mx-grid-resize"
+                    aria-hidden="true"
+                    (pointerdown)="startResize($event, c)"
+                    (dblclick)="resetWidth(c)"
+                  ></span>
+                }
+              </th>
+            }
+          </tr>
+          @if (hasFilters()) {
+            <tr aria-rowindex="2" class="mx-grid-filter-row">
+              @if (selection() !== 'none') {
+                <td
+                  class="mx-grid-check mx-grid-pinned-start"
+                  aria-colindex="1"
+                  [style.left.px]="0"
+                  [attr.data-cell]="'1:0'"
+                ></td>
+              }
+              @for (c of visibleColumns(); track c.key; let i = $index) {
+                <td
+                  [attr.aria-colindex]="i + 1 + offset()"
+                  [attr.data-cell]="'1:' + (i + offset())"
+                  [class.mx-grid-pinned-start]="c.pinned === 'start'"
+                  [class.mx-grid-pinned-end]="c.pinned === 'end'"
+                  [style.left.px]="c.pinned === 'start' ? pinOffset(c) : null"
+                  [style.right.px]="c.pinned === 'end' ? pinOffsetEnd(c) : null"
+                >
+                  @switch (c.filter) {
+                    @case ('select') {
+                      <select
+                        class="mx-grid-filter"
+                        tabindex="-1"
+                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [value]="filters()[c.key] || ''"
+                        (change)="setFilter(c.key, $any($event.target).value)"
+                      >
+                        <option value="">{{ allText() }}</option>
+                        @for (o of optionsOf(c); track o) {
+                          <option [value]="o" [selected]="filters()[c.key] === o">{{ o }}</option>
+                        }
+                      </select>
+                    }
+                    @case ('text') {
+                      <input
+                        class="mx-grid-filter"
+                        tabindex="-1"
+                        type="search"
+                        [attr.aria-label]="filterText() + ' ' + c.header"
+                        [value]="filters()[c.key] || ''"
+                        (input)="setFilter(c.key, $any($event.target).value)"
+                      />
+                    }
+                    @case ('number') {
+                      <input
+                        class="mx-grid-filter"
+                        tabindex="-1"
+                        type="text"
+                        inputmode="decimal"
+                        placeholder=">, <, 10-20"
+                        [attr.aria-label]="
+                          filterText() +
+                          ' ' +
+                          c.header +
+                          ', aceita maior que, menor que e intervalos'
+                        "
+                        [value]="filters()[c.key] || ''"
+                        (input)="setFilter(c.key, $any($event.target).value)"
+                      />
+                    }
+                  }
+                </td>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody>
+          @if (range().start > 0) {
+            <tr class="mx-grid-spacer" aria-hidden="true">
+              <td [attr.colspan]="colCount()" [style.height.px]="range().start * rowHeight()"></td>
+            </tr>
+          }
+          @for (row of rendered(); track keyOf(row); let r = $index) {
+            @let ri = range().start + r;
+            <tr
+              [attr.aria-rowindex]="ri + headerRows() + 1"
+              [attr.aria-selected]="selection() === 'none' ? null : isSelected(row)"
+              [style.height.px]="rowHeight()"
+              (dblclick)="rowActivate.emit(row)"
+            >
+              @if (selection() !== 'none') {
+                <td
+                  class="mx-grid-check mx-grid-pinned-start"
+                  aria-colindex="1"
+                  [style.left.px]="0"
+                  [attr.data-cell]="ri + headerRows() + ':0'"
+                >
+                  @if (selection() === 'multiple') {
+                    <input
+                      type="checkbox"
+                      mxCheckbox
+                      tabindex="-1"
+                      [checked]="isSelected(row)"
+                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      (change)="toggleRow(row)"
+                    />
+                  } @else {
+                    <input
+                      type="radio"
+                      class="mx-radio"
+                      tabindex="-1"
+                      [name]="radioName"
+                      [checked]="isSelected(row)"
+                      [attr.aria-label]="selectRowText() + ' ' + rowLabel(row)"
+                      (change)="toggleRow(row)"
+                    />
+                  }
+                </td>
+              }
+              @for (c of visibleColumns(); track c.key; let i = $index) {
+                <td
+                  [attr.aria-colindex]="i + 1 + offset()"
+                  [attr.data-cell]="ri + headerRows() + ':' + (i + offset())"
+                  [attr.data-align]="c.align ?? null"
+                  [class.mx-grid-pinned-start]="c.pinned === 'start'"
+                  [class.mx-grid-pinned-end]="c.pinned === 'end'"
+                  [style.left.px]="c.pinned === 'start' ? pinOffset(c) : null"
+                  [style.right.px]="c.pinned === 'end' ? pinOffsetEnd(c) : null"
+                >
+                  @if (cellTemplate(c.key); as tpl) {
+                    <ng-container
+                      *ngTemplateOutlet="
+                        tpl;
+                        context: { $implicit: row, value: valueOf(c, row), column: c }
+                      "
+                    />
+                  } @else {
+                    {{ text(c, row) }}
+                  }
+                </td>
+              }
+            </tr>
+          } @empty {
+            <tr>
+              <td
+                class="mx-grid-empty"
+                [attr.colspan]="colCount()"
+                [attr.data-cell]="headerRows() + ':0'"
+              >
+                {{ loading() ? loadingText() : emptyText() }}
+              </td>
+            </tr>
+          }
+          @if (range().end < rows().length) {
+            <tr class="mx-grid-spacer" aria-hidden="true">
+              <td
+                [attr.colspan]="colCount()"
+                [style.height.px]="(rows().length - range().end) * rowHeight()"
+              ></td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mx-grid-footer">
+      <span class="mx-grid-status" aria-live="polite">{{ statusText() }}</span>
+      <ng-content select="[mxGridFooter]" />
+    </div>
+    <span class="mx-visually-hidden" [id]="resizeHintId">{{ resizeHint() }}</span>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], manual: [{ type: i0.Input, args: [{ isSignal: true, alias: "manual", required: false }] }], totalRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRows", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], columnMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnMenu", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], columnsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsText", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }], allText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], selectRowText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowText", required: false }] }], selectText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectText", required: false }] }], resizeHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeHint", required: false }] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MxGridCell), { isSignal: true }] }], toolbarSlot: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MxGridToolbar), { isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
+const MX_DATA_GRID = [MxDataGrid, MxGridCell, MxGridToolbar];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MX_DATA_GRID, MxDataGrid, MxGridCell, MxGridToolbar };
+//# sourceMappingURL=muxima-ui-core-data-grid.mjs.map