@bfrs/agentic-components 0.4.0 → 0.4.2

package/BFRS_AGENTIC_COMPONENTS.md

@@ -142,8 +142,11 @@ Use native Angular DOM event bindings for interactions. Do not pass React-style
 Registered tags cover the documented component surface, including
 `bfrs-button-group`, `bfrs-toast-provider`, `bfrs-table-toolbar`,
 `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
-`bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
+`bfrs-table-row-actions`, `bfrs-table-bulk-actions`,
 `bfrs-table-column-visibility`, and `bfrs-table-save-view` in addition to the existing component tags.
+Primitive table building blocks `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`,
+`bfrs-tr`, `bfrs-th`, and `bfrs-td` are also registered for custom layouts where `bfrs-data-table`
+is too prescriptive.
 Existing form and pattern tags include `bfrs-date-range-picker`,
 `bfrs-multi-select`, `bfrs-horizontal-stepper`, `bfrs-step-progress-card`, `bfrs-data-table`,
 `bfrs-modal`, `bfrs-tabs`, and the rest of the documented `bfrs-*` surface.
@@ -1589,11 +1592,15 @@ Angular: pass `sorting` as JSON attribute `[sorting]='{"columnId":"name","direct
   accessorFn?: (row: T) => unknown;
   sortable?: boolean;
   cell?: (row: T) => ReactNode;
+  width?: number | string;
+  minWidth?: number | string;
 }
 ```
 
 `enableSorting`, `enableColumnPinning`, and `enableColumnReordering` are enabled by default. Pass `false` to disable each behavior for a simpler table.
 
+For pinned columns, declare `width` / `minWidth` for predictable layout. `DataTable` measures rendered header cell widths for sticky offsets so pinned columns stay fixed even when the table stretches.
+
 When `loading` is true, `DataTable` renders built-in table-row skeleton placeholders rather than a spinner. The consumer app only owns the loading boolean.
 
 Use `TableSaveView` with `TableColumnVisibility` when the user changes columns or filters and needs to save the draft as a named view. It opens the "Save this view" modal, collects the view name, summarizes settings like hidden columns, and calls `onSave({ name, visibleColumnIds, hiddenColumnCount, filtersCount, appliedSettingLabels })`; persistence remains app-owned.
@@ -2521,7 +2528,7 @@ Custom elements: `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`, `bfrs-t
 | `min-width` | `bfrs-table` | CSS min-width on the table |
 | `aria-label` | `bfrs-table` | Accessibility label |
 | `sticky` | `bfrs-thead` | Boolean — sticks header at scroll top |
-| `on-click` | `bfrs-tr` | Emits `click` event; adds `cursor-pointer` |
+| `on-click` | `bfrs-tr` | Boolean marker — adds `cursor-pointer` styling. Use Angular `(click)` binding for the actual event handler |
 | `align` | `bfrs-th`, `bfrs-td` | `"left"`, `"center"`, or `"right"` |
 | `density` | `bfrs-th`, `bfrs-td` | Override density per cell (set explicitly; overrides table propagation) |
 

package/README.md

@@ -260,9 +260,12 @@ DataTable also accepts declarative `leadingColumn`, `rowActions`,
 The standalone helpers are available as `bfrs-table-toolbar`,
 `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`,
 `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, and
-`bfrs-table-column-visibility`.
+`bfrs-table-column-visibility`, plus `bfrs-table-save-view`.
+For custom Angular table layouts where `bfrs-data-table` is too prescriptive,
+use the primitive table tags: `bfrs-table`, `bfrs-thead`, `bfrs-tbody`,
+`bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, and `bfrs-td`.
 
-Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-button-group`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-toast-provider`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-table-toolbar`, `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`, `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, `bfrs-table-column-visibility`, `bfrs-data-table`, `bfrs-tabs`, `bfrs-tabs-list`, `bfrs-tabs-trigger`, `bfrs-tabs-content`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, `bfrs-horizontal-stepper`, and `bfrs-step-progress-card`.
+Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-button-group`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-slider`, `bfrs-color-picker`, `bfrs-color-swatch-group`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-multi-select`, `bfrs-suggest-input`, `bfrs-option-card-group`, `bfrs-selectable-chip-group`, `bfrs-number-stepper`, `bfrs-file-dropzone`, `bfrs-reveal-field`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-info-card`, `bfrs-tip`, `bfrs-toast-manager`, `bfrs-toast-provider`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-table-toolbar`, `bfrs-table-empty-state`, `bfrs-table-error-state`, `bfrs-table-skeleton`, `bfrs-table-row-actions`, `bfrs-table-bulk-actions`, `bfrs-table-column-visibility`, `bfrs-table-save-view`, `bfrs-data-table`, `bfrs-table`, `bfrs-thead`, `bfrs-tbody`, `bfrs-tfoot`, `bfrs-tr`, `bfrs-th`, `bfrs-td`, `bfrs-tabs`, `bfrs-tabs-list`, `bfrs-tabs-trigger`, `bfrs-tabs-content`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, `bfrs-collapsible`, `bfrs-accordion`, `bfrs-summary-bar`, `bfrs-entity-display-card`, `bfrs-reveal-and-copy`, `bfrs-horizontal-stepper`, and `bfrs-step-progress-card`.
 
 `HorizontalStepper` provides the compact horizontal flow layout with an optional announcement banner and parent-owned `onClose` / `onStepSelect` behavior:
 

package/dist/components/data-display/Table/Table.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { TableDensity } from '../DataTable/DataTable.types';
+export interface TableProps {
+    children?: ReactNode;
+    density?: TableDensity;
+    minWidth?: number | string;
+    maxHeight?: number | string;
+    className?: string;
+    tableClassName?: string;
+    "aria-label"?: string;
+}
+export declare function Table({ children, density, minWidth, maxHeight, className, tableClassName, "aria-label": ariaLabel }: TableProps): import("react/jsx-runtime").JSX.Element;
+export interface TheadProps {
+    children?: ReactNode;
+    sticky?: boolean;
+    className?: string;
+}
+export declare function Thead({ children, sticky, className }: TheadProps): import("react/jsx-runtime").JSX.Element;
+export interface TbodyProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Tbody({ children, className }: TbodyProps): import("react/jsx-runtime").JSX.Element;
+export interface TfootProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Tfoot({ children, className }: TfootProps): import("react/jsx-runtime").JSX.Element;
+export interface TrProps {
+    children?: ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+export declare function Tr({ children, onClick, className }: TrProps): import("react/jsx-runtime").JSX.Element;
+export interface ThProps {
+    children?: ReactNode;
+    align?: "left" | "center" | "right";
+    colSpan?: number;
+    className?: string;
+}
+export declare function Th({ children, align, colSpan, className }: ThProps): import("react/jsx-runtime").JSX.Element;
+export interface TdProps {
+    children?: ReactNode;
+    align?: "left" | "center" | "right";
+    colSpan?: number;
+    className?: string;
+}
+export declare function Td({ children, align, colSpan, className }: TdProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/Table/index.d.ts

@@ -0,0 +1 @@
+export * from './Table';

package/dist/components/ui/index.d.ts

@@ -51,6 +51,7 @@ export * from '../overlays/ConfirmDialog';
 export * from './data-display/Avatar';
 export * from '../data-display/MetricCard';
 export * from '../data-display/DataTable';
+export * from '../data-display/Table';
 export * from './data-display/KpiCard';
 export * from './navigation/Tabs';
 export * from './navigation/Breadcrumbs';

package/dist/custom-elements.d.ts

@@ -654,6 +654,52 @@ export declare class BfrsTabsElement extends ValueCustomElement {
     disconnectedCallback(): void;
     protected renderElement(): unknown;
 }
+export declare class BfrsTableElement extends ReactCustomElement {
+    static readonly tagName = "table";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTheadElement extends ReactCustomElement {
+    static readonly tagName = "thead";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTbodyElement extends ReactCustomElement {
+    static readonly tagName = "tbody";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTfootElement extends ReactCustomElement {
+    static readonly tagName = "tfoot";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTrElement extends ReactCustomElement {
+    static readonly tagName = "tr";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    private readonly _onHoverIn;
+    private readonly _onHoverOut;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderElement(): unknown;
+}
+export declare class BfrsThElement extends ReactCustomElement {
+    static readonly tagName = "th";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsTdElement extends ReactCustomElement {
+    static readonly tagName = "td";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
 export declare class BfrsBreadcrumbsElement extends ReactCustomElement {
     static readonly tagName = "breadcrumbs";
     static get observedAttributes(): string[];
@@ -896,6 +942,7 @@ declare global {
         "bfrs-suggest-input": BfrsSuggestInputElement;
         "bfrs-summary-bar": BfrsSummaryBarElement;
         "bfrs-switch": BfrsSwitchElement;
+        "bfrs-table": BfrsTableElement;
         "bfrs-table-pagination": BfrsTablePaginationElement;
         "bfrs-table-toolbar": BfrsTableToolbarElement;
         "bfrs-table-empty-state": BfrsTableEmptyStateElement;
@@ -909,7 +956,13 @@ declare global {
         "bfrs-tabs-list": BfrsTabsListElement;
         "bfrs-tabs-trigger": BfrsTabsTriggerElement;
         "bfrs-tabs-content": BfrsTabsContentElement;
+        "bfrs-tbody": BfrsTbodyElement;
+        "bfrs-td": BfrsTdElement;
         "bfrs-text": BfrsTextElement;
+        "bfrs-tfoot": BfrsTfootElement;
+        "bfrs-th": BfrsThElement;
+        "bfrs-thead": BfrsTheadElement;
+        "bfrs-tr": BfrsTrElement;
         "bfrs-textarea": BfrsTextareaElement;
         "bfrs-toast-manager": BfrsToastManagerElement;
         "bfrs-toast-provider": BfrsToastProviderElement;