@bfrs/agentic-components 0.3.3 → 0.3.5

package/BFRS_AGENTIC_COMPONENTS.md

@@ -119,7 +119,7 @@ Registered tags cover the documented component surface: `bfrs-box`, `bfrs-contai
 
 Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`, `disabled`, `required`, `error-message`, `error-text`, `helper-text`, `prefix`, `suffix`, `min`, `max`, `step`, and `value`. Use `[props]` or the `props` JSON attribute for structured props like `options`, palette arrays, `items`, `columns`, `data`, `sections`, `steps`, and `toasts`.
 
-Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(reveal-change)`, `(copy)`, `(copy-error)`, `(close)`, `(confirm)`, `(cancel)`, `(cell-action)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`. Payloads are available on `$event.detail`.
+Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(reveal-change)`, `(copy)`, `(copy-error)`, `(close)`, `(confirm)`, `(cancel)`, `(cell-action)`, `(cell-event)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`. Payloads are available on `$event.detail`.
 
 For validated forms, keep client validation, API validation, and submit side effects in the consuming app. In React, pass field errors through `FormField errorText` and set `Input error`. In Angular, use `bfrs-input` with `[attr.error]` and `[attr.error-message]`, listen to `(value-change)`, and manage success/failure notifications with `bfrs-toast-manager`.
 
@@ -1318,6 +1318,72 @@ Custom-element DataTable action cells must be declarative because Angular/HTML c
 </bfrs-data-table>
 ```
 
+Angular/HTML consumers can also render framework-neutral rich cells with
+`cellType: "text" | "chip" | "chips" | "badge" | "badges" | "image" |
+"avatar" | "link" | "custom-element"`. Configure them through the serializable
+`cellConfig` object:
+
+```ts
+columns = [
+  {
+    id: "status",
+    header: "Status",
+    accessorKey: "status",
+    cellType: "chip",
+    cellConfig: {
+      caption: "Current status",
+      labelKey: "status",
+      toneKey: "statusTone"
+    }
+  },
+  {
+    id: "tags",
+    header: "Tags",
+    cellType: "chips",
+    cellConfig: {
+      itemsKey: "tags",
+      itemLabelKey: "label",
+      itemToneKey: "tone"
+    }
+  },
+  {
+    id: "channel",
+    header: "Channel",
+    cellType: "image",
+    cellConfig: {
+      srcKey: "channel.logo",
+      altKey: "channel.name",
+      width: 32,
+      height: 32
+    }
+  },
+  {
+    id: "customer",
+    header: "Customer",
+    cellType: "custom-element",
+    cellConfig: {
+      tagName: "customer-summary",
+      attributeMap: {
+        name: "customer.name",
+        email: "customer.email"
+      },
+      propertyMap: {
+        customerId: "customer.id"
+      },
+      events: ["open", "change"]
+    }
+  }
+];
+```
+
+`caption`/`captionKey` adds a small label above any rich cell. Key fields
+support dot-separated row paths. For custom elements, register the hyphenated
+tag before the table renders. `attributeMap` sets scalar attributes,
+`propertyMap` assigns JavaScript properties, and `rowProperty` can pass the
+complete row when the nested custom element explicitly supports it. Raw HTML is
+not rendered. Listed custom-element events are re-emitted as `cell-event` with
+`{ eventName, detail, columnId, row, rowId, rowIndex }`.
+
 ---
 
 ### Navigation

package/README.md

@@ -150,6 +150,41 @@ orderColumns = [
 ];
 ```
 
+Rich Angular/HTML cells use the same serializable column approach. Supported
+`cellType` values are `text`, `chip`, `chips`, `badge`, `badges`, `image`,
+`avatar`, `link`, `custom-element`, `button`, `buttons`, and `actions`.
+
+```ts
+orderColumns = [
+  {
+    id: "status",
+    header: "Status",
+    accessorKey: "status",
+    cellType: "chip",
+    cellConfig: { caption: "Current status", labelKey: "status", toneKey: "statusTone" }
+  },
+  {
+    id: "channel",
+    header: "Channel",
+    cellType: "image",
+    cellConfig: { srcKey: "channelLogo", altKey: "channelName", width: 32, height: 32 }
+  },
+  {
+    id: "customer",
+    header: "Customer",
+    cellType: "custom-element",
+    cellConfig: {
+      tagName: "customer-summary",
+      attributeMap: { name: "customer.name", email: "customer.email" },
+      events: ["open"]
+    }
+  }
+];
+```
+
+Registered custom-element events are re-emitted by `bfrs-data-table` as
+`cell-event` with `{ eventName, detail, columnId, row, rowId, rowIndex }`.
+
 Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `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-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-data-table`, `bfrs-tabs`, `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`, and `bfrs-step-progress-card`.
 
 ## Theme Overrides

package/dist/custom-elements.d.ts

@@ -1,7 +1,93 @@
+import { ButtonProps } from './components/primitives/Button';
+import { BadgeProps } from './components/primitives/Badge';
+import { ChipProps } from './components/primitives/Chip';
+import { AvatarProps } from './components/ui/data-display/Avatar';
 import { ColorSwatchValue } from './components/ui/forms/ColorSwatchGroup';
+import { DataTableColumn } from './components/data-display/DataTable';
 import { BfrsColorScheme } from './components/ui/providers/BfrsProvider';
 type UnknownProps = Record<string, unknown>;
 type CheckedValue = boolean | "indeterminate";
+export type DataTableElementCellAction = {
+    id?: string;
+    label?: string;
+    labelKey?: string;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+    display?: "button" | "icon" | "menu";
+    iconName?: string;
+    iconNameKey?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    disabledKey?: string;
+    destructive?: boolean;
+};
+export type DataTableElementCellConfig = {
+    /** Optional small label rendered above the cell content. */
+    caption?: string;
+    captionKey?: string;
+    /** Main display value. Falls back to the column accessor value. */
+    label?: string;
+    labelKey?: string;
+    valueKey?: string;
+    secondary?: string;
+    secondaryKey?: string;
+    /** Chip / badge presentation. Dynamic keys are resolved from the row. */
+    tone?: BadgeProps["tone"] | ChipProps["tone"];
+    toneKey?: string;
+    variant?: BadgeProps["variant"] | ChipProps["variant"];
+    variantKey?: string;
+    size?: BadgeProps["size"] | ChipProps["size"] | AvatarProps["size"];
+    sizeKey?: string;
+    dot?: boolean;
+    dotKey?: string;
+    /** Use plural cell types with arrays of primitive values or objects. */
+    itemsKey?: string;
+    itemLabelKey?: string;
+    itemValueKey?: string;
+    itemToneKey?: string;
+    /** Image / avatar presentation. */
+    src?: string;
+    srcKey?: string;
+    alt?: string;
+    altKey?: string;
+    name?: string;
+    nameKey?: string;
+    status?: AvatarProps["status"];
+    statusKey?: string;
+    width?: number | string;
+    height?: number | string;
+    rounded?: boolean;
+    /** Link presentation. */
+    href?: string;
+    hrefKey?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    rel?: string;
+    /** Registered custom-element presentation. Native tags are intentionally rejected. */
+    tagName?: string;
+    properties?: UnknownProps;
+    propertyMap?: Record<string, string>;
+    attributes?: Record<string, unknown>;
+    attributeMap?: Record<string, string>;
+    text?: string;
+    textKey?: string;
+    events?: string[];
+    /** Optionally assign the complete row object to this property on the custom element. */
+    rowProperty?: string;
+};
+export type DataTableElementCellType = "text" | "chip" | "chips" | "badge" | "badges" | "image" | "avatar" | "link" | "custom-element" | "button" | "buttons" | "actions";
+export type DataTableElementColumn = DataTableColumn<UnknownProps> & {
+    cellType?: DataTableElementCellType;
+    cellConfig?: DataTableElementCellConfig;
+    action?: DataTableElementCellAction;
+    actions?: DataTableElementCellAction[];
+    actionsDisplay?: "inline" | "menu";
+    actionId?: string;
+    actionLabel?: string;
+    actionVariant?: ButtonProps["variant"];
+    actionSize?: ButtonProps["size"];
+    iconName?: string;
+    ariaLabel?: string;
+};
 export type BfrsCustomElementRegistryOptions = {
     prefix?: string;
 };
@@ -424,6 +510,9 @@ export declare class BfrsDataTableElement extends ReactCustomElement {
     protected defaultDisplay(): string;
     protected renderElement(): unknown;
     private normalizeColumn;
+    private cellConfigValue;
+    private renderCaptionedCell;
+    private renderRichCell;
     private dataTableRowId;
     private actionDisabled;
     private emitCellAction;