@brios-sorzu/components

Paquete unificado de componentes Brios Grid. La primera entrada disponible es Angular:

import {
  BriosGridComponent,
  BriosComboBoxComponent,
  BriosDatePickerComponent,
  BriosTabsComponent
} from '@brios-sorzu/components/angular';

La raíz también reexporta aliases útiles para TypeScript y funciones de datos:

import {
  BriosInput,
  BriosNumericInput,
  BriosComboBox,
  BriosDatePicker,
  BriosTreeView,
  BriosDateRangePicker,
  BriosFilterPanel,
  BriosDialog,
  BriosAlert,
  BriosAlertOutlet,
  BriosConfirmDialog,
  BriosToast,
  BriosLoadingOverlay,
  BriosFileUpload,
  BriosContextMenu,
  BriosCommandBar,
  BriosPagination
} from '@brios-sorzu/components';

Para usar componentes en @Component({ imports: [...] }), utiliza siempre el secondary entrypoint Angular. Así Angular puede analizar de forma estática el metadata standalone:

import { BriosInput, BriosDialog } from '@brios-sorzu/components/angular';

Los contratos sin framework se importan desde la entrada core:

import { GridController, GridLayoutEngine, filterRows, GridGroupEngine } from '@brios-sorzu/components/core';

Los exportadores también están disponibles desde la raíz del paquete único:

import { toCsv, toXlsx, toPdf } from '@brios-sorzu/components';

const columns = [
  { key: 'id', header: 'ID', dataType: 'number' },
  { key: 'total', header: 'Total', dataType: 'currency' }
] as const;
const csv = toCsv({ columns, rows });
const workbook = toXlsx({ columns, rows, sheetName: 'Clientes' });

toExcelXml soporta varias hojas, tipos básicos y numberFormat. toXlsxAsync permite exportaciones grandes con AbortSignal y onProgress. Todos los formatos aceptan hooks beforeRow, beforeCell y afterRow para filtrar o transformar datos antes de generarlos.

Todos los controles de datos implementan ControlValueAccessor, por lo que funcionan con ReactiveFormsModule y [(ngModel)]. Soportan estados disabled, readonly, required, invalid y pending, además de eventos valueChange cuando corresponde. También aceptan ariaLabel para uso standalone; dentro de BriosFormField se conserva la relación accesible generada por aria-labelledby. BriosFormField observa el NgControl proyectado para anunciar estados touched, dirty, pending y mensajes de validación comunes (required, minlength, maxlength, min, max y pattern). Los mensajes se pueden personalizar por clave con [errorMessages], por ejemplo:

<brios-form-field label="Cliente" [errorMessages]="{ required: 'Selecciona un cliente' }">
  <brios-combo-box formControlName="clientId" [options]="clients" />
</brios-form-field>

BriosDateRangePicker también implementa ControlValueAccessor para trabajar con rangos dentro de formularios reactivos o ngModel. BriosDateTimePicker acepta [timezone]="'utc'" para editar en un control nativo local y emitir/recibir valores ISO UTC. BriosNumericInput acepta [currency]="'MXN'", [locale]="'es-MX'" y [formatOnBlur]="true"; presenta moneda localizada y conserva un valor numérico para Reactive Forms o ngModel. BriosAutoComplete y BriosMultiSelect virtualizan sus opciones por defecto para evitar montar miles de elementos; ajusta [optionWindowSize] o desactívalo con [virtualizeOptions]="false" cuando necesites un comportamiento completamente renderizado. BriosOptionTemplateDirective (briosOptionTemplate) permite personalizar la presentación de opciones de BriosAutoComplete y BriosMultiSelect; su contexto expone option, selected y focused.

Los estados de BriosAutoComplete y BriosMultiSelect se pueden personalizar con briosDataTemplate="empty|loading|error|value". El contexto expone $implicit, value, error y retry; value se usa para personalizar el resumen de BriosMultiSelect.

<brios-multi-select [options]="tags" [loading]="loading" [error]="loadError">
  <ng-template briosDataTemplate="value" let-value="value">
    {{ value?.length || 0 }} etiquetas
  </ng-template>
  <ng-template briosDataTemplate="empty">No hay coincidencias</ng-template>
  <ng-template briosDataTemplate="error" let-error="error" let-retry="retry">
    {{ error }} <button type="button" (click)="retry()">Reintentar</button>
  </ng-template>
</brios-multi-select>

BriosOverlayService expone posicionamiento con colisión básica contra el viewport y recalcula al hacer scroll o resize. BriosDropdown lo usa internamente y acepta un trigger proyectado con el atributo [trigger]. Los tokens --brios-z-dropdown, --brios-z-tooltip, --brios-z-dialog, --brios-z-toast y --brios-z-context-menu permiten integrarlo en aplicaciones con otros overlays. Los textos accesibles de árbol y toast se pueden personalizar con expandLabel, collapseLabel y closeLabel. Para cambiar textos compartidos dinámicamente, inyecta BriosLocaleService:

import { BriosLocaleService } from '@brios-sorzu/components/angular';

constructor(readonly locale: BriosLocaleService) {}

locale.setLocale('en-US', { close: 'Close', expand: 'Expand', collapse: 'Collapse' });

La grilla incluye footer de resumen, fórmulas, column chooser, filtros por operador y valores únicos, edición de filas y selección masiva, eventos de commit/cancelación, formato condicional, prefetch/cache remoto y menú contextual.

También expone BriosGridGroupTemplateDirective para personalizar grupos y subtotales, además de pasteAtomic, confirmPaste y pasteComplete para controlar pegados multi-celda con validación, confirmación y rollback. BriosGridValidationTemplateDirective permite personalizar el contenido de los errores de celda. Cuando un GridDataSource rechaza una actualización y resolveConflict no reconcilia la fila, BriosGrid emite remoteConflict y expone remoteConflictState; el banner integrado ofrece reabrir la edición o descartar el conflicto.

La referencia completa por componente está en docs/docs-API-COMPONENTES.md.

La suite visual también incluye BriosTreeView, BriosCalendar, BriosDateRangePicker, BriosFilterPanel, BriosAlert, BriosToast, BriosConfirmDialog, BriosLoadingOverlay, BriosFileUpload, BriosContextMenu y BriosCommandBar.

Para alertas globales, registra una sola vez <brios-alert-outlet></brios-alert-outlet> en la aplicación y usa BriosAlertService.show(...) desde cualquier endpoint o flujo.

Panel de filtros externo:

fields = [
  { key: 'status', label: 'Estado', type: 'select', options: [
    { value: 'Activo', label: 'Activo' },
    { value: 'Pendiente', label: 'Pendiente' }
  ] },
  { key: 'minBalance', label: 'Saldo mínimo', type: 'number' }
];
filters = {};

<brios-filter-panel
  [fields]="fields"
  [value]="filters"
  (valueChange)="filters = $event"
  (applied)="applyFilters()"
  (cleared)="clearFilters()">
</brios-filter-panel>

Ejemplo mínimo de edición:

<brios-grid
  [items]="rows"
  [columns]="columns"
  [showFooter]="true"
  [showColumnChooser]="true"
  [allowRowEditing]="true"
  [allowRowAdding]="true"
  [allowRowRemoving]="true">
</brios-grid>

Incluye los componentes de datos, controles visuales y la grilla existente. Importa theme.css una vez en la aplicación para activar los tokens visuales:

{ "styles": ["@brios-sorzu/components/theme.css"] }

Los paquetes @brios-sorzu/core y @brios-sorzu/angular son las entradas modulares nuevas. Los paquetes anteriores @brios-grid/* continúan disponibles como aliases de compatibilidad.

@brios-sorzu/components/angular es un secondary entrypoint Angular real del paquete; esto permite que el linker de Angular analice los componentes standalone al instalar el tarball desde cero.

Esta versión soporta Angular. React y Vue están explícitamente fuera del alcance actual.