@bfrs/agentic-components 0.1.8 → 0.2.0

package/BFRS_AGENTIC_COMPONENTS.md

@@ -44,6 +44,17 @@ import "@bfrs/agentic-components/custom-elements";
 @import "@bfrs/agentic-components/styles";
 ```
 
+If Angular does not resolve the package style export, add the built CSS file in `angular.json`:
+
+```json
+{
+  "styles": [
+    "node_modules/@bfrs/agentic-components/dist/style.css",
+    "src/styles.scss"
+  ]
+}
+```
+
 Add `CUSTOM_ELEMENTS_SCHEMA` where the tags are rendered:
 
 ```ts
@@ -64,11 +75,18 @@ export class AgenticExampleComponent {
 }
 ```
 
+Use native Angular DOM event bindings for interactions. Do not pass React-style `onClick` in Angular templates:
+
+```html
+<bfrs-button variant="primary" (click)="continue()">Continue</bfrs-button>
+<bfrs-paper (click)="openDetails()">Open details</bfrs-paper>
+```
+
 Registered tags cover the documented component surface: `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-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `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`, and `bfrs-step-progress-card`.
 
 Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`, `disabled`, `required`, `error-message`, `helper-text`, `prefix`, `suffix`. Use `[props]` or the `props` JSON attribute for structured props like `options`, `items`, `columns`, `data`, `sections`, `steps`, and `toasts`.
 
-Common Angular events: `(value-change)`, `(checked-change)`, `(open-change)`, `(close)`, `(confirm)`, `(cancel)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`.
+Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(close)`, `(confirm)`, `(cancel)`, `(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`.
 
 ```html
 <bfrs-select

package/README.md

@@ -56,6 +56,17 @@ import "@bfrs/agentic-components/custom-elements";
 @import "@bfrs/agentic-components/styles";
 ```
 
+If Angular does not resolve the package style export, add the built CSS file in `angular.json`:
+
+```json
+{
+  "styles": [
+    "node_modules/@bfrs/agentic-components/dist/style.css",
+    "src/styles.scss"
+  ]
+}
+```
+
 Add `CUSTOM_ELEMENTS_SCHEMA` to the module or standalone component that renders the tags:
 
 ```ts
@@ -76,6 +87,13 @@ export class ExampleComponent {
 }
 ```
 
+Use native Angular DOM event bindings for interactions. Do not pass React-style `onClick` in Angular templates:
+
+```html
+<bfrs-button variant="primary" (click)="continue()">Continue</bfrs-button>
+<bfrs-paper (click)="openDetails()">Open details</bfrs-paper>
+```
+
 The custom-elements entrypoint registers Angular-friendly tags for the documented component surface, including layout, forms, feedback, overlays, filters, data display, navigation, and agentic pattern components.
 
 Use simple attributes for primitive values and `[props]` for structured values or callback-capable advanced props:

package/dist/custom-elements.d.ts

@@ -5,8 +5,11 @@ export type BfrsCustomElementRegistryOptions = {
 };
 declare abstract class ReactCustomElement extends HTMLElement {
     private root;
+    private mountNode;
     private initialText;
     private initialHtml;
+    private hasCapturedInitialContent;
+    private initialRenderQueued;
     private propertyProps;
     get props(): UnknownProps;
     set props(value: UnknownProps);
@@ -31,6 +34,9 @@ declare abstract class ReactCustomElement extends HTMLElement {
     protected objectValue<Value extends UnknownProps>(name: string, fallback: Value): Value;
     protected emit(name: string, detail?: unknown): void;
     private applyDefaultDisplay;
+    private ensureMountNode;
+    private scheduleInitialUpdate;
+    private captureInitialContent;
 }
 declare abstract class ComponentCustomElement extends ReactCustomElement {
     protected abstract component(): unknown;
@@ -352,6 +358,7 @@ export declare class BfrsFilterBarElement extends ReactCustomElement {
     static readonly tagName = "filter-bar";
     static get observedAttributes(): string[];
     private searchValue;
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected defaultDisplay(): string;
     protected renderElement(): unknown;
 }