@bbq-chat/widgets-angular 1.0.3 → 1.0.4

package/dist/README.md

@@ -0,0 +1,252 @@
+# @bbq-chat/widgets-angular
+
+Angular components and services for BbQ ChatWidgets. This package provides Angular-native wrappers for the core [@bbq-chat/widgets](https://www.npmjs.com/package/@bbq-chat/widgets) library.
+
+## Installation
+
+```bash
+npm install @bbq-chat/widgets-angular @bbq-chat/widgets
+```
+
+## Peer Dependencies
+
+This package requires:
+- `@angular/common` >= 17.0.0
+- `@angular/core` >= 17.0.0
+- `@bbq-chat/widgets` ^1.0.0
+
+## Quick Start
+
+### 1. Import the component
+
+```typescript
+import { Component } from '@angular/core';
+import { WidgetRendererComponent } from '@bbq-chat/widgets-angular';
+import type { ChatWidget } from '@bbq-chat/widgets-angular';
+
+@Component({
+  selector: 'app-chat',
+  standalone: true,
+  imports: [WidgetRendererComponent],
+  template: `
+    <bbq-widget-renderer 
+      [widgets]="widgets" 
+      (widgetAction)="handleWidgetAction($event)">
+    </bbq-widget-renderer>
+  `
+})
+export class ChatComponent {
+  widgets: ChatWidget[] = [];
+
+  handleWidgetAction(event: { actionName: string; payload: any }) {
+    console.log('Widget action:', event.actionName, event.payload);
+    // Handle the action (e.g., send to backend)
+  }
+}
+```
+
+### 2. Import styles
+
+In your `styles.css` or `styles.scss`:
+
+```css
+@import '@bbq-chat/widgets/styles';
+```
+
+Or import a specific theme:
+
+```css
+@import '@bbq-chat/widgets/styles/light';
+@import '@bbq-chat/widgets/styles/dark';
+@import '@bbq-chat/widgets/styles/corporate';
+```
+
+## Components
+
+### WidgetRendererComponent
+
+The main component for rendering chat widgets.
+
+**Inputs:**
+- `widgets: ChatWidget[] | null | undefined` - Array of widgets to render
+
+**Outputs:**
+- `widgetAction: EventEmitter<{ actionName: string; payload: any }>` - Emits when a widget action is triggered
+
+**Example:**
+
+```typescript
+<bbq-widget-renderer 
+  [widgets]="messageWidgets" 
+  (widgetAction)="onWidgetAction($event)">
+</bbq-widget-renderer>
+```
+
+## Services
+
+### WidgetRegistryService
+
+Service for registering custom widget types.
+
+**Example:**
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { WidgetRegistryService } from '@bbq-chat/widgets-angular';
+
+export class MyCustomWidget {
+  type = 'myCustomWidget';
+  constructor(public label: string, public action: string) {}
+}
+
+@Component({
+  selector: 'app-root',
+  template: '...'
+})
+export class AppComponent implements OnInit {
+  constructor(private widgetRegistry: WidgetRegistryService) {}
+
+  ngOnInit() {
+    // Register custom widget factory
+    this.widgetRegistry.registerFactory('myCustomWidget', (obj) => {
+      if (obj.type === 'myCustomWidget') {
+        return new MyCustomWidget(obj.label, obj.action);
+      }
+      return null;
+    });
+  }
+}
+```
+
+## Widget Types
+
+All standard widget types from `@bbq-chat/widgets` are supported:
+
+- `ButtonWidget` - Clickable buttons
+- `CardWidget` - Information cards
+- `FormWidget` - Form containers
+- `InputWidget` - Text input fields
+- `TextAreaWidget` - Multi-line text input
+- `DropdownWidget` - Dropdown selects
+- `SliderWidget` - Range sliders
+- `ToggleWidget` - Toggle switches
+- `FileUploadWidget` - File upload controls
+- `DatePickerWidget` - Date pickers
+- `MultiSelectWidget` - Multi-select dropdowns
+- `ThemeSwitcherWidget` - Theme switcher controls
+- `ProgressBarWidget` - Progress indicators
+- `ImageWidget` - Image displays
+- `ImageCollectionWidget` - Image galleries
+
+## Advanced Usage
+
+### Handling Widget Actions
+
+Widget actions are emitted when users interact with widgets. Handle these actions in your component:
+
+```typescript
+async handleWidgetAction(event: { actionName: string; payload: any }) {
+  const { actionName, payload } = event;
+
+  try {
+    const response = await fetch('/api/chat/action', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: actionName, payload })
+    });
+
+    const data = await response.json();
+    // Update widgets with response
+    this.widgets = data.widgets;
+  } catch (error) {
+    console.error('Failed to handle widget action:', error);
+  }
+}
+```
+
+### Custom Widget Renderers
+
+The library now supports three types of custom widget renderers for enhanced flexibility:
+
+#### 1. HTML Function Renderer
+
+Simple function that returns HTML strings:
+
+```typescript
+this.widgetRegistry.registerRenderer('myWidget', (widget) => {
+  return `<div class="my-widget">${widget.label}</div>`;
+});
+```
+
+#### 2. Angular Component Renderer (Recommended)
+
+Use Angular components for full framework features including data binding, change detection, and dependency injection:
+
+```typescript
+import { Component, Input } from '@angular/core';
+import { CustomWidgetComponent } from '@bbq-chat/widgets-angular';
+
+@Component({
+  selector: 'app-my-widget',
+  standalone: true,
+  template: `
+    <div class="my-widget">
+      <h3>{{ myWidget.title }}</h3>
+      <button (click)="onClick()">Action</button>
+    </div>
+  `
+})
+export class MyWidgetComponent implements CustomWidgetComponent {
+  @Input() widget!: ChatWidget;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+
+  get myWidget(): MyCustomWidget {
+    return this.widget as MyCustomWidget;
+  }
+
+  onClick() {
+    this.widgetAction?.('my_action', { data: 'example' });
+  }
+}
+
+// Register the component
+this.widgetRegistry.registerRenderer('myWidget', MyWidgetComponent);
+```
+
+#### 3. Angular Template Renderer
+
+Use inline templates with full Angular template syntax:
+
+```typescript
+import { WidgetTemplateContext } from '@bbq-chat/widgets-angular';
+
+@Component({
+  template: `
+    <ng-template #myTemplate let-widget let-emitAction="emitAction">
+      <div class="my-widget">
+        <h3>{{ widget.title }}</h3>
+        <button (click)="emitAction('my_action', { data: 'example' })">
+          Action
+        </button>
+      </div>
+    </ng-template>
+  `
+})
+export class AppComponent implements OnInit {
+  @ViewChild('myTemplate', { static: true }) myTemplate!: TemplateRef<WidgetTemplateContext>;
+
+  ngOnInit() {
+    this.widgetRegistry.registerRenderer('myWidget', this.myTemplate);
+  }
+}
+```
+
+See [EXAMPLES.md](./EXAMPLES.md) for detailed examples and best practices.
+
+## License
+
+MIT
+
+## Repository
+
+https://github.com/JeanMarcMbouma/BbQ.ChatWidgets

package/dist/fesm2022/index.mjs

@@ -0,0 +1,542 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, EventEmitter, createComponent, ViewChild, Output, Input, Inject, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@bbq-chat/widgets';
+import { WidgetEventManager, SsrWidgetRenderer, customWidgetRegistry } from '@bbq-chat/widgets';
+export { ChatWidget, SsrWidgetRenderer, WidgetEventManager, customWidgetRegistry } from '@bbq-chat/widgets';
+
+/**
+ * Type guard to check if a renderer is a TemplateRef
+ */
+function isTemplateRenderer(renderer) {
+    return (renderer !== null &&
+        typeof renderer === 'object' &&
+        'createEmbeddedView' in renderer);
+}
+/**
+ * Type guard to check if a renderer is an Angular Component
+ *
+ * Note: This uses a heuristic check based on the following assumptions:
+ * 1. Components are constructor functions
+ * 2. Components have a prototype with a constructor property
+ * 3. Components typically use dependency injection (no required constructor params)
+ *
+ * Limitation: This may not detect components with required constructor parameters.
+ * For edge cases, explicitly check your component's constructor signature.
+ *
+ * Alternative: You can always register a wrapper component that has no required params.
+ */
+function isComponentRenderer(renderer) {
+    // Check if it's a function (constructor) but not a regular function renderer
+    if (typeof renderer !== 'function') {
+        return false;
+    }
+    // Check for Angular component characteristics
+    // Components typically have prototype with constructor property
+    return (renderer.prototype !== undefined &&
+        renderer.prototype.constructor === renderer &&
+        renderer.length === 0 // Constructor with no required params (Angular DI)
+    );
+}
+/**
+ * Type guard to check if a renderer is an HTML function
+ *
+ * Note: This should be checked AFTER checking for component and template renderers
+ * since components are also functions but with additional properties.
+ */
+function isHtmlRenderer(renderer) {
+    return typeof renderer === 'function';
+}
+
+const WIDGET_EVENT_MANAGER_FACTORY = new InjectionToken('WIDGET_EVENT_MANAGER_FACTORY');
+/**
+ * Injection token for SsrWidgetRenderer
+ *
+ * Use this token to inject a SsrWidgetRenderer instance in your components.
+ * By default, WidgetRendererComponent provides this token with a factory that creates
+ * a new instance for each component.
+ *
+ * @example
+ * ```typescript
+ * constructor(@Inject(SSR_WIDGET_RENDERER) private renderer: SsrWidgetRenderer) {}
+ * ```
+ */
+const SSR_WIDGET_RENDERER = new InjectionToken('SSR_WIDGET_RENDERER');
+/**
+ * Factory function for creating WidgetEventManager instances
+ *
+ * This factory is used by default in WidgetRendererComponent's providers array.
+ * You can override this in your own providers if you need custom initialization.
+ *
+ * @returns A factory function that creates WidgetEventManager instances
+ */
+function widgetEventManagerFactoryProvider() {
+    return (actionHandler) => new WidgetEventManager(actionHandler);
+}
+/**
+ * Factory function for creating SsrWidgetRenderer instances
+ *
+ * This factory is used by default in WidgetRendererComponent's providers array.
+ * You can override this in your own providers if you need custom initialization
+ * or custom rendering options.
+ *
+ * @returns A new SsrWidgetRenderer instance
+ */
+function ssrWidgetRendererFactory() {
+    return new SsrWidgetRenderer();
+}
+
+/**
+ * Service for registering custom widget factories and renderers
+ *
+ * This service provides a centralized way to register custom widget types
+ * that extend the base widget functionality, including support for
+ * Angular components and templates as custom renderers.
+ *
+ * @example
+ * ```typescript
+ * constructor(private widgetRegistry: WidgetRegistryService) {
+ *   // Register a widget factory
+ *   this.widgetRegistry.registerFactory('myWidget', (obj) => {
+ *     if (obj.type === 'myWidget') {
+ *       return new MyCustomWidget(obj.label, obj.action);
+ *     }
+ *     return null;
+ *   });
+ *
+ *   // Register a component-based renderer
+ *   this.widgetRegistry.registerRenderer('myWidget', MyWidgetComponent);
+ * }
+ * ```
+ */
+class WidgetRegistryService {
+    customRenderers = new Map();
+    /**
+     * Register a custom widget factory function
+     *
+     * @param type - The widget type identifier
+     * @param factory - Factory function that creates widget instances from plain objects
+     */
+    registerFactory(type, factory) {
+        customWidgetRegistry.registerFactory(type, factory);
+    }
+    /**
+     * Register a widget class with automatic factory creation
+     *
+     * @param type - The widget type identifier
+     * @param ctor - Widget class constructor
+     */
+    registerClass(type, ctor) {
+        customWidgetRegistry.registerClass(type, ctor);
+    }
+    /**
+     * Get a factory for a specific widget type
+     *
+     * @param type - The widget type identifier
+     * @returns The factory function if registered, undefined otherwise
+     */
+    getFactory(type) {
+        return customWidgetRegistry.getFactory(type);
+    }
+    /**
+     * Register a custom renderer for a specific widget type
+     *
+     * The renderer can be:
+     * - A function that returns HTML string
+     * - An Angular Component class
+     * - An Angular TemplateRef
+     *
+     * @param type - The widget type identifier
+     * @param renderer - The custom renderer (function, Component, or TemplateRef)
+     *
+     * @example
+     * ```typescript
+     * // HTML function renderer
+     * widgetRegistry.registerRenderer('weather', (widget) => `<div>${widget.label}</div>`);
+     *
+     * // Component renderer
+     * widgetRegistry.registerRenderer('weather', WeatherWidgetComponent);
+     *
+     * // Template renderer (from @ViewChild or elsewhere)
+     * widgetRegistry.registerRenderer('weather', this.weatherTemplate);
+     * ```
+     */
+    registerRenderer(type, renderer) {
+        if (!type || typeof type !== 'string') {
+            throw new Error('type must be a non-empty string');
+        }
+        if (!renderer) {
+            throw new Error('renderer is required');
+        }
+        this.customRenderers.set(type, renderer);
+    }
+    /**
+     * Get a custom renderer for a specific widget type
+     *
+     * @param type - The widget type identifier
+     * @returns The custom renderer if registered, undefined otherwise
+     */
+    getRenderer(type) {
+        return this.customRenderers.get(type);
+    }
+    /**
+     * Check if a custom renderer is registered for a widget type
+     *
+     * @param type - The widget type identifier
+     * @returns True if a custom renderer is registered, false otherwise
+     */
+    hasRenderer(type) {
+        return this.customRenderers.has(type);
+    }
+    /**
+     * Unregister a custom renderer for a widget type
+     *
+     * @param type - The widget type identifier
+     * @returns True if a renderer was removed, false if none was registered
+     */
+    unregisterRenderer(type) {
+        return this.customRenderers.delete(type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Angular component for rendering chat widgets
+ *
+ * This component handles rendering of chat widgets using the BbQ ChatWidgets library.
+ * It manages widget lifecycle, event handling, and cleanup.
+ *
+ * Supports three types of custom widget renderers:
+ * 1. HTML function renderers (return HTML strings)
+ * 2. Angular Component renderers (render as dynamic components)
+ * 3. Angular TemplateRef renderers (render as embedded views)
+ *
+ * @example
+ * ```typescript
+ * <bbq-widget-renderer
+ *   [widgets]="messageWidgets"
+ *   (widgetAction)="handleWidgetAction($event)">
+ * </bbq-widget-renderer>
+ * ```
+ */
+class WidgetRendererComponent {
+    renderer;
+    eventManagerFactory;
+    widgetRegistry;
+    injector;
+    environmentInjector;
+    /**
+     * Array of widgets to render
+     */
+    widgets;
+    /**
+     * Emits when a widget action is triggered
+     */
+    widgetAction = new EventEmitter();
+    containerRef;
+    widgetItems = [];
+    eventManager;
+    isViewInitialized = false;
+    dynamicComponents = [];
+    dynamicViews = [];
+    constructor(renderer, eventManagerFactory, widgetRegistry, injector, environmentInjector) {
+        this.renderer = renderer;
+        this.eventManagerFactory = eventManagerFactory;
+        this.widgetRegistry = widgetRegistry;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+    }
+    ngOnInit() {
+        // this.updateWidgetHtml();
+    }
+    ngOnChanges(changes) {
+        if (changes['widgets']) {
+            this.updateWidgetHtml();
+        }
+    }
+    ngAfterViewInit() {
+        this.updateWidgetHtml();
+        this.isViewInitialized = true;
+        this.setupEventHandlers();
+        // Render dynamic components/templates after view init
+        this.renderDynamicWidgets();
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    /**
+     * Base implementation for updating the rendered HTML for the current widgets.
+     *
+     * Subclasses may override this method to customize how widgets are rendered
+     * (for example, to inject additional markup or perform preprocessing).
+     *
+     * Since this is the base implementation, overriding implementations are not
+     * required to call `super.updateWidgetHtml()`.
+     */
+    updateWidgetHtml() {
+        if (!this.widgets || this.widgets.length === 0) {
+            this.widgetItems = [];
+            return;
+        }
+        this.widgetItems = this.widgets.map((widget, index) => {
+            const customRenderer = this.widgetRegistry.getRenderer(widget.type);
+            // Check template renderer first (most specific)
+            if (customRenderer && isTemplateRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: false,
+                };
+            }
+            // Check component renderer second
+            if (customRenderer && isComponentRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: false,
+                };
+            }
+            // Check HTML function renderer last (most general, matches any function)
+            if (customRenderer && isHtmlRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: true,
+                    html: customRenderer(widget),
+                };
+            }
+            // Default: render using the BbQ library renderer
+            return {
+                index,
+                widget,
+                isHtml: true,
+                html: this.renderer.renderWidget(widget),
+            };
+        });
+        // After view updates, reinitialize widgets only if view is already initialized
+        if (this.isViewInitialized) {
+            setTimeout(() => {
+                this.setupEventHandlers();
+                this.renderDynamicWidgets();
+            }, 0);
+        }
+    }
+    /**
+     * Render dynamic components and templates for custom widgets
+     */
+    renderDynamicWidgets() {
+        if (!this.containerRef?.nativeElement)
+            return;
+        // Use microtask to ensure Angular has completed change detection
+        Promise.resolve().then(() => {
+            if (!this.containerRef?.nativeElement)
+                return;
+            // Clean up existing dynamic components and views
+            this.cleanupDynamicWidgets();
+            const container = this.containerRef.nativeElement;
+            // Query all widget divs without the data-rendered filter
+            const dynamicWidgetDivs = Array.from(container.querySelectorAll('.bbq-widget'));
+            let dynamicIndex = 0;
+            this.widgetItems.forEach((item) => {
+                if (!item.isHtml) {
+                    const customRenderer = this.widgetRegistry.getRenderer(item.widget.type);
+                    if (!customRenderer)
+                        return;
+                    const targetDiv = dynamicWidgetDivs[dynamicIndex];
+                    if (!targetDiv)
+                        return;
+                    // Clear the div content before rendering
+                    targetDiv.innerHTML = '';
+                    if (isComponentRenderer(customRenderer)) {
+                        this.renderComponent(customRenderer, item.widget, targetDiv);
+                    }
+                    else if (isTemplateRenderer(customRenderer)) {
+                        this.renderTemplate(customRenderer, item.widget, targetDiv);
+                    }
+                    dynamicIndex++;
+                }
+            });
+        });
+    }
+    /**
+     * Render an Angular component for a custom widget
+     *
+     * Note: This method safely assigns properties to component instances
+     * by checking for property existence at runtime. This approach is necessary
+     * because we cannot statically verify that all components implement
+     * the CustomWidgetComponent interface.
+     */
+    renderComponent(componentType, widget, targetElement) {
+        // Create the component using Angular's createComponent API
+        const componentRef = createComponent(componentType, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: this.injector,
+        });
+        // Safely set component inputs if they exist
+        const instance = componentRef.instance;
+        // Set widget property if it exists in the prototype chain
+        instance['widget'] = widget;
+        // Set widgetAction property if it exists in the prototype chain
+        instance['widgetAction'] = (actionName, payload) => {
+            this.widgetAction.emit({ actionName, payload });
+        };
+        // Attach the component's host view to the target element
+        targetElement.appendChild(componentRef.location.nativeElement);
+        // Store reference for cleanup
+        this.dynamicComponents.push(componentRef);
+        // Trigger change detection (use optional chaining for safety)
+        componentRef.changeDetectorRef?.detectChanges();
+    }
+    /**
+     * Render an Angular template for a custom widget
+     */
+    renderTemplate(templateRef, widget, targetElement) {
+        const context = {
+            $implicit: widget,
+            widget: widget,
+            emitAction: (actionName, payload) => {
+                this.widgetAction.emit({ actionName, payload });
+            },
+        };
+        const viewRef = templateRef.createEmbeddedView(context);
+        // Attach the view's DOM nodes to the target element
+        viewRef.rootNodes.forEach((node) => {
+            targetElement.appendChild(node);
+        });
+        // Store reference for cleanup
+        this.dynamicViews.push(viewRef);
+        // Trigger change detection
+        viewRef.detectChanges();
+    }
+    /**
+     * Cleanup dynamic components and views
+     */
+    cleanupDynamicWidgets() {
+        this.dynamicComponents.forEach((componentRef) => {
+            componentRef.destroy();
+        });
+        this.dynamicComponents = [];
+        this.dynamicViews.forEach((viewRef) => {
+            viewRef.destroy();
+        });
+        this.dynamicViews = [];
+    }
+    setupEventHandlers() {
+        if (!this.containerRef?.nativeElement)
+            return;
+        // Cleanup old resources before setting up new ones
+        this.cleanup();
+        const container = this.containerRef.nativeElement;
+        // Create a custom action handler that emits events
+        const actionHandler = {
+            handle: async (action, payload) => {
+                this.widgetAction.emit({ actionName: action, payload });
+            },
+        };
+        // Use the injected factory to create an event manager with the component-specific action handler
+        this.eventManager = this.eventManagerFactory(actionHandler);
+        this.eventManager.attachHandlers(container);
+    }
+    handleClick(event) {
+        const target = event.target;
+        // Only trigger actions on non-form buttons and clickable elements (cards)
+        // Don't trigger on input elements or form buttons (let WidgetEventManager handle those)
+        const button = target.tagName === 'BUTTON' ? target : target.closest('button');
+        if (button && !button.closest('[data-widget-type="form"]')) {
+            const actionName = button.getAttribute('data-action');
+            if (actionName) {
+                try {
+                    const payloadStr = button.getAttribute('data-payload');
+                    const payload = payloadStr ? JSON.parse(payloadStr) : {};
+                    this.widgetAction.emit({ actionName, payload });
+                }
+                catch (err) {
+                    console.error('Failed to parse widget action payload:', err);
+                }
+            }
+        }
+    }
+    /**
+     * Cleanup all resources including event listeners.
+     */
+    cleanup() {
+        // Cleanup dynamic widgets first
+        this.cleanupDynamicWidgets();
+        // Cleanup event manager
+        this.eventManager = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRendererComponent, deps: [{ token: SSR_WIDGET_RENDERER }, { token: WIDGET_EVENT_MANAGER_FACTORY }, { token: WidgetRegistryService }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: WidgetRendererComponent, isStandalone: true, selector: "bbq-widget-renderer", inputs: { widgets: "widgets" }, outputs: { widgetAction: "widgetAction" }, providers: [
+            { provide: WIDGET_EVENT_MANAGER_FACTORY, useFactory: widgetEventManagerFactoryProvider },
+            { provide: SSR_WIDGET_RENDERER, useFactory: ssrWidgetRendererFactory },
+        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["widgetContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div #widgetContainer class="bbq-widgets-container" (click)="handleClick($event)">
+      @for (item of widgetItems; track item.index) {
+        @if (item.isHtml) {
+          <div class="bbq-widget" [innerHTML]="item.html"></div>
+        } @else {
+          <div class="bbq-widget" #dynamicWidget></div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".bbq-widgets-container{margin-top:.5rem}.bbq-widget{margin-bottom:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbq-widget-renderer', standalone: true, imports: [CommonModule], providers: [
+                        { provide: WIDGET_EVENT_MANAGER_FACTORY, useFactory: widgetEventManagerFactoryProvider },
+                        { provide: SSR_WIDGET_RENDERER, useFactory: ssrWidgetRendererFactory },
+                    ], template: `
+    <div #widgetContainer class="bbq-widgets-container" (click)="handleClick($event)">
+      @for (item of widgetItems; track item.index) {
+        @if (item.isHtml) {
+          <div class="bbq-widget" [innerHTML]="item.html"></div>
+        } @else {
+          <div class="bbq-widget" #dynamicWidget></div>
+        }
+      }
+    </div>
+  `, styles: [".bbq-widgets-container{margin-top:.5rem}.bbq-widget{margin-bottom:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i2.SsrWidgetRenderer, decorators: [{
+                    type: Inject,
+                    args: [SSR_WIDGET_RENDERER]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WIDGET_EVENT_MANAGER_FACTORY]
+                }] }, { type: WidgetRegistryService }, { type: i0.Injector }, { type: i0.EnvironmentInjector }], propDecorators: { widgets: [{
+                type: Input
+            }], widgetAction: [{
+                type: Output
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['widgetContainer', { static: false }]
+            }] } });
+
+/**
+ * @bbq-chat/widgets-angular
+ *
+ * Angular components and services for BbQ ChatWidgets
+ *
+ * This package provides Angular-native components and services that wrap
+ * the core @bbq-chat/widgets library, making it easy to integrate chat
+ * widgets into Angular applications.
+ *
+ * @packageDocumentation
+ */
+// Export components
+// Version
+const VERSION = '1.0.3';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SSR_WIDGET_RENDERER, VERSION, WIDGET_EVENT_MANAGER_FACTORY, WidgetRegistryService, WidgetRendererComponent, isComponentRenderer, isHtmlRenderer, isTemplateRenderer, ssrWidgetRendererFactory, widgetEventManagerFactoryProvider };
+//# sourceMappingURL=index.mjs.map

package/dist/fesm2022/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/custom-widget-renderer.types.ts","../../src/widget-di.tokens.ts","../../src/widget-registry.service.ts","../../src/widget-renderer.component.ts","../../src/public_api.ts","../../src/index.ts"],"sourcesContent":["import { Type, TemplateRef } from '@angular/core';\r\nimport { ChatWidget } from '@bbq-chat/widgets';\r\n\r\n/**\r\n * Context provided to template-based custom widget renderers\r\n */\r\nexport interface WidgetTemplateContext {\r\n  /**\r\n   * The widget instance being rendered\r\n   */\r\n  $implicit: ChatWidget;\r\n  \r\n  /**\r\n   * The widget instance (alternative access)\r\n   */\r\n  widget: ChatWidget;\r\n  \r\n  /**\r\n   * Emit a widget action\r\n   */\r\n  emitAction: (actionName: string, payload: unknown) => void;\r\n}\r\n\r\n/**\r\n * Interface for component-based custom widget renderers\r\n */\r\nexport interface CustomWidgetComponent {\r\n  /**\r\n   * The widget instance to render\r\n   */\r\n  widget: ChatWidget;\r\n  \r\n  /**\r\n   * Event emitter for widget actions (optional, will be set by the renderer)\r\n   */\r\n  widgetAction?: (actionName: string, payload: unknown) => void;\r\n}\r\n\r\n/**\r\n * Type for custom widget renderer functions that return HTML strings\r\n */\r\nexport type CustomWidgetHtmlRenderer = (widget: ChatWidget) => string;\r\n\r\n/**\r\n * Type for custom widget renderer configurations\r\n */\r\nexport type CustomWidgetRenderer =\r\n  | CustomWidgetHtmlRenderer\r\n  | Type<CustomWidgetComponent>\r\n  | TemplateRef<WidgetTemplateContext>;\r\n\r\n/**\r\n * Configuration for registering a custom widget renderer\r\n */\r\nexport interface CustomWidgetRendererConfig {\r\n  /**\r\n   * The widget type identifier\r\n   */\r\n  type: string;\r\n  \r\n  /**\r\n   * The renderer: can be a function returning HTML, an Angular Component class, or a TemplateRef\r\n   */\r\n  renderer: CustomWidgetRenderer;\r\n}\r\n\r\n/**\r\n * Type guard to check if a renderer is a TemplateRef\r\n */\r\nexport function isTemplateRenderer(\r\n  renderer: CustomWidgetRenderer\r\n): renderer is TemplateRef<WidgetTemplateContext> {\r\n  return (\r\n    renderer !== null &&\r\n    typeof renderer === 'object' &&\r\n    'createEmbeddedView' in renderer\r\n  );\r\n}\r\n\r\n/**\r\n * Type guard to check if a renderer is an Angular Component\r\n * \r\n * Note: This uses a heuristic check based on the following assumptions:\r\n * 1. Components are constructor functions\r\n * 2. Components have a prototype with a constructor property\r\n * 3. Components typically use dependency injection (no required constructor params)\r\n * \r\n * Limitation: This may not detect components with required constructor parameters.\r\n * For edge cases, explicitly check your component's constructor signature.\r\n * \r\n * Alternative: You can always register a wrapper component that has no required params.\r\n */\r\nexport function isComponentRenderer(\r\n  renderer: CustomWidgetRenderer\r\n): renderer is Type<CustomWidgetComponent> {\r\n  // Check if it's a function (constructor) but not a regular function renderer\r\n  if (typeof renderer !== 'function') {\r\n    return false;\r\n  }\r\n  \r\n  // Check for Angular component characteristics\r\n  // Components typically have prototype with constructor property\r\n  return (\r\n    renderer.prototype !== undefined &&\r\n    renderer.prototype.constructor === renderer &&\r\n    renderer.length === 0 // Constructor with no required params (Angular DI)\r\n  );\r\n}\r\n\r\n/**\r\n * Type guard to check if a renderer is an HTML function\r\n * \r\n * Note: This should be checked AFTER checking for component and template renderers\r\n * since components are also functions but with additional properties.\r\n */\r\nexport function isHtmlRenderer(\r\n  renderer: CustomWidgetRenderer\r\n): renderer is CustomWidgetHtmlRenderer {\r\n  return typeof renderer === 'function';\r\n}\r\n","import { InjectionToken } from '@angular/core';\r\nimport { SsrWidgetRenderer, WidgetEventManager, IWidgetActionHandler } from '@bbq-chat/widgets';\r\n\r\n/**\r\n * Injection token for WidgetEventManager factory\r\n * \r\n * Use this token to inject a factory function that creates WidgetEventManager instances.\r\n * The factory accepts an optional action handler to configure the manager.\r\n * \r\n * @example\r\n * ```typescript\r\n * constructor(@Inject(WIDGET_EVENT_MANAGER_FACTORY) private eventManagerFactory: WidgetEventManagerFactory) {\r\n *   const actionHandler = { handle: async (action, payload) => { ... } };\r\n *   this.eventManager = this.eventManagerFactory(actionHandler);\r\n * }\r\n * ```\r\n */\r\nexport type WidgetEventManagerFactory = (actionHandler?: IWidgetActionHandler) => WidgetEventManager;\r\n\r\nexport const WIDGET_EVENT_MANAGER_FACTORY = new InjectionToken<WidgetEventManagerFactory>(\r\n  'WIDGET_EVENT_MANAGER_FACTORY'\r\n);\r\n\r\n/**\r\n * Injection token for SsrWidgetRenderer\r\n * \r\n * Use this token to inject a SsrWidgetRenderer instance in your components.\r\n * By default, WidgetRendererComponent provides this token with a factory that creates\r\n * a new instance for each component.\r\n * \r\n * @example\r\n * ```typescript\r\n * constructor(@Inject(SSR_WIDGET_RENDERER) private renderer: SsrWidgetRenderer) {}\r\n * ```\r\n */\r\nexport const SSR_WIDGET_RENDERER = new InjectionToken<SsrWidgetRenderer>(\r\n  'SSR_WIDGET_RENDERER'\r\n);\r\n\r\n/**\r\n * Factory function for creating WidgetEventManager instances\r\n * \r\n * This factory is used by default in WidgetRendererComponent's providers array.\r\n * You can override this in your own providers if you need custom initialization.\r\n * \r\n * @returns A factory function that creates WidgetEventManager instances\r\n */\r\nexport function widgetEventManagerFactoryProvider(): WidgetEventManagerFactory {\r\n  return (actionHandler?: IWidgetActionHandler) => new WidgetEventManager(actionHandler);\r\n}\r\n\r\n/**\r\n * Factory function for creating SsrWidgetRenderer instances\r\n * \r\n * This factory is used by default in WidgetRendererComponent's providers array.\r\n * You can override this in your own providers if you need custom initialization\r\n * or custom rendering options.\r\n * \r\n * @returns A new SsrWidgetRenderer instance\r\n */\r\nexport function ssrWidgetRendererFactory(): SsrWidgetRenderer {\r\n  return new SsrWidgetRenderer();\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { customWidgetRegistry, ChatWidget } from '@bbq-chat/widgets';\r\nimport { CustomWidgetRenderer } from './custom-widget-renderer.types';\r\n\r\n/**\r\n * Service for registering custom widget factories and renderers\r\n * \r\n * This service provides a centralized way to register custom widget types\r\n * that extend the base widget functionality, including support for\r\n * Angular components and templates as custom renderers.\r\n * \r\n * @example\r\n * ```typescript\r\n * constructor(private widgetRegistry: WidgetRegistryService) {\r\n *   // Register a widget factory\r\n *   this.widgetRegistry.registerFactory('myWidget', (obj) => {\r\n *     if (obj.type === 'myWidget') {\r\n *       return new MyCustomWidget(obj.label, obj.action);\r\n *     }\r\n *     return null;\r\n *   });\r\n * \r\n *   // Register a component-based renderer\r\n *   this.widgetRegistry.registerRenderer('myWidget', MyWidgetComponent);\r\n * }\r\n * ```\r\n */\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class WidgetRegistryService {\r\n  private readonly customRenderers = new Map<string, CustomWidgetRenderer>();\r\n  /**\r\n   * Register a custom widget factory function\r\n   * \r\n   * @param type - The widget type identifier\r\n   * @param factory - Factory function that creates widget instances from plain objects\r\n   */\r\n  registerFactory(\r\n    type: string,\r\n    factory: (obj: unknown) => ChatWidget | null\r\n  ): void {\r\n    customWidgetRegistry.registerFactory(type, factory);\r\n  }\r\n\r\n  /**\r\n   * Register a widget class with automatic factory creation\r\n   * \r\n   * @param type - The widget type identifier\r\n   * @param ctor - Widget class constructor\r\n   */\r\n  registerClass(type: string, ctor: any): void {\r\n    customWidgetRegistry.registerClass(type, ctor);\r\n  }\r\n\r\n  /**\r\n   * Get a factory for a specific widget type\r\n   * \r\n   * @param type - The widget type identifier\r\n   * @returns The factory function if registered, undefined otherwise\r\n   */\r\n  getFactory(type: string): ((obj: any) => ChatWidget | null) | undefined {\r\n    return customWidgetRegistry.getFactory(type);\r\n  }\r\n\r\n  /**\r\n   * Register a custom renderer for a specific widget type\r\n   * \r\n   * The renderer can be:\r\n   * - A function that returns HTML string\r\n   * - An Angular Component class\r\n   * - An Angular TemplateRef\r\n   * \r\n   * @param type - The widget type identifier\r\n   * @param renderer - The custom renderer (function, Component, or TemplateRef)\r\n   * \r\n   * @example\r\n   * ```typescript\r\n   * // HTML function renderer\r\n   * widgetRegistry.registerRenderer('weather', (widget) => `<div>${widget.label}</div>`);\r\n   * \r\n   * // Component renderer\r\n   * widgetRegistry.registerRenderer('weather', WeatherWidgetComponent);\r\n   * \r\n   * // Template renderer (from @ViewChild or elsewhere)\r\n   * widgetRegistry.registerRenderer('weather', this.weatherTemplate);\r\n   * ```\r\n   */\r\n  registerRenderer(type: string, renderer: CustomWidgetRenderer): void {\r\n    if (!type || typeof type !== 'string') {\r\n      throw new Error('type must be a non-empty string');\r\n    }\r\n    if (!renderer) {\r\n      throw new Error('renderer is required');\r\n    }\r\n    this.customRenderers.set(type, renderer);\r\n  }\r\n\r\n  /**\r\n   * Get a custom renderer for a specific widget type\r\n   * \r\n   * @param type - The widget type identifier\r\n   * @returns The custom renderer if registered, undefined otherwise\r\n   */\r\n  getRenderer(type: string): CustomWidgetRenderer | undefined {\r\n    return this.customRenderers.get(type);\r\n  }\r\n\r\n  /**\r\n   * Check if a custom renderer is registered for a widget type\r\n   * \r\n   * @param type - The widget type identifier\r\n   * @returns True if a custom renderer is registered, false otherwise\r\n   */\r\n  hasRenderer(type: string): boolean {\r\n    return this.customRenderers.has(type);\r\n  }\r\n\r\n  /**\r\n   * Unregister a custom renderer for a widget type\r\n   * \r\n   * @param type - The widget type identifier\r\n   * @returns True if a renderer was removed, false if none was registered\r\n   */\r\n  unregisterRenderer(type: string): boolean {\r\n    return this.customRenderers.delete(type);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  ElementRef,\r\n  AfterViewInit,\r\n  OnInit,\r\n  OnDestroy,\r\n  OnChanges,\r\n  SimpleChanges,\r\n  ViewChild,\r\n  ComponentRef,\r\n  EmbeddedViewRef,\r\n  TemplateRef,\r\n  Injector,\r\n  createComponent,\r\n  EnvironmentInjector,\r\n  Inject,\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n  SsrWidgetRenderer,\r\n  WidgetEventManager,\r\n  ChatWidget,\r\n} from '@bbq-chat/widgets';\r\nimport { WidgetRegistryService } from './widget-registry.service';\r\nimport {\r\n  WidgetTemplateContext,\r\n  isHtmlRenderer,\r\n  isComponentRenderer,\r\n  isTemplateRenderer,\r\n} from './custom-widget-renderer.types';\r\nimport {\r\n  WIDGET_EVENT_MANAGER_FACTORY,\r\n  SSR_WIDGET_RENDERER,\r\n  widgetEventManagerFactoryProvider,\r\n  ssrWidgetRendererFactory,\r\n  WidgetEventManagerFactory,\r\n} from './widget-di.tokens';\r\n\r\n/**\r\n * Angular component for rendering chat widgets\r\n * \r\n * This component handles rendering of chat widgets using the BbQ ChatWidgets library.\r\n * It manages widget lifecycle, event handling, and cleanup. \r\n * \r\n * Supports three types of custom widget renderers:\r\n * 1. HTML function renderers (return HTML strings)\r\n * 2. Angular Component renderers (render as dynamic components)\r\n * 3. Angular TemplateRef renderers (render as embedded views)\r\n * \r\n * @example\r\n * ```typescript\r\n * <bbq-widget-renderer \r\n *   [widgets]=\"messageWidgets\" \r\n *   (widgetAction)=\"handleWidgetAction($event)\">\r\n * </bbq-widget-renderer>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'bbq-widget-renderer',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  providers: [\r\n    { provide: WIDGET_EVENT_MANAGER_FACTORY, useFactory: widgetEventManagerFactoryProvider },\r\n    { provide: SSR_WIDGET_RENDERER, useFactory: ssrWidgetRendererFactory },\r\n  ],\r\n  template: `\r\n    <div #widgetContainer class=\"bbq-widgets-container\" (click)=\"handleClick($event)\">\r\n      @for (item of widgetItems; track item.index) {\r\n        @if (item.isHtml) {\r\n          <div class=\"bbq-widget\" [innerHTML]=\"item.html\"></div>\r\n        } @else {\r\n          <div class=\"bbq-widget\" #dynamicWidget></div>\r\n        }\r\n      }\r\n    </div>\r\n  `,\r\n  styles: [\r\n    `\r\n      .bbq-widgets-container {\r\n        margin-top: 0.5rem;\r\n      }\r\n\r\n      .bbq-widget {\r\n        margin-bottom: 0.5rem;\r\n      }\r\n    `,\r\n  ],\r\n})\r\nexport class WidgetRendererComponent\r\n  implements OnInit, AfterViewInit, OnDestroy, OnChanges {\r\n  /**\r\n   * Array of widgets to render\r\n   */\r\n  @Input() widgets: ChatWidget[] | null | undefined;\r\n\r\n  /**\r\n   * Emits when a widget action is triggered\r\n   */\r\n  @Output() widgetAction = new EventEmitter<{\r\n    actionName: string;\r\n    payload: unknown;\r\n  }>();\r\n\r\n  @ViewChild('widgetContainer', { static: false })\r\n  containerRef!: ElementRef<HTMLDivElement>;\r\n\r\n  protected widgetItems: Array<{\r\n    index: number;\r\n    widget: ChatWidget;\r\n    isHtml: boolean;\r\n    html?: string;\r\n  }> = [];\r\n\r\n  protected eventManager?: WidgetEventManager;\r\n  protected isViewInitialized = false;\r\n  protected dynamicComponents: Array<ComponentRef<any>> = [];\r\n  protected dynamicViews: Array<EmbeddedViewRef<WidgetTemplateContext>> = [];\r\n\r\n  constructor(\r\n    @Inject(SSR_WIDGET_RENDERER) protected renderer: SsrWidgetRenderer,\r\n    @Inject(WIDGET_EVENT_MANAGER_FACTORY) protected eventManagerFactory: WidgetEventManagerFactory,\r\n    protected widgetRegistry: WidgetRegistryService,\r\n    protected injector: Injector,\r\n    protected environmentInjector: EnvironmentInjector\r\n  ) { }\r\n\r\n  ngOnInit() {\r\n    // this.updateWidgetHtml();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes['widgets']) {\r\n      this.updateWidgetHtml();\r\n    }\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.updateWidgetHtml();\r\n    this.isViewInitialized = true;\r\n    this.setupEventHandlers();\r\n    // Render dynamic components/templates after view init\r\n    this.renderDynamicWidgets();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.cleanup();\r\n  }\r\n\r\n  /**\r\n   * Base implementation for updating the rendered HTML for the current widgets.\r\n   *\r\n   * Subclasses may override this method to customize how widgets are rendered\r\n   * (for example, to inject additional markup or perform preprocessing).\r\n   *\r\n   * Since this is the base implementation, overriding implementations are not\r\n   * required to call `super.updateWidgetHtml()`.\r\n   */\r\n  protected updateWidgetHtml() {\r\n    if (!this.widgets || this.widgets.length === 0) {\r\n      this.widgetItems = [];\r\n      return;\r\n    }\r\n\r\n    this.widgetItems = this.widgets.map((widget, index) => {\r\n      const customRenderer = this.widgetRegistry.getRenderer(widget.type);\r\n\r\n      // Check template renderer first (most specific)\r\n      if (customRenderer && isTemplateRenderer(customRenderer)) {\r\n        return {\r\n          index,\r\n          widget,\r\n          isHtml: false,\r\n        };\r\n      }\r\n\r\n      // Check component renderer second\r\n      if (customRenderer && isComponentRenderer(customRenderer)) {\r\n        return {\r\n          index,\r\n          widget,\r\n          isHtml: false,\r\n        };\r\n      }\r\n\r\n      // Check HTML function renderer last (most general, matches any function)\r\n      if (customRenderer && isHtmlRenderer(customRenderer)) {\r\n        return {\r\n          index,\r\n          widget,\r\n          isHtml: true,\r\n          html: customRenderer(widget),\r\n        };\r\n      }\r\n\r\n      // Default: render using the BbQ library renderer\r\n      return {\r\n        index,\r\n        widget,\r\n        isHtml: true,\r\n        html: this.renderer.renderWidget(widget),\r\n      };\r\n    });\r\n\r\n    // After view updates, reinitialize widgets only if view is already initialized\r\n    if (this.isViewInitialized) {\r\n      setTimeout(() => {\r\n        this.setupEventHandlers();\r\n        this.renderDynamicWidgets();\r\n      }, 0);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Render dynamic components and templates for custom widgets\r\n   */\r\n  protected renderDynamicWidgets() {\r\n    if (!this.containerRef?.nativeElement) return;\r\n\r\n    // Use microtask to ensure Angular has completed change detection\r\n    Promise.resolve().then(() => {\r\n      if (!this.containerRef?.nativeElement) return;\r\n\r\n      // Clean up existing dynamic components and views\r\n      this.cleanupDynamicWidgets();\r\n\r\n      const container = this.containerRef.nativeElement;\r\n      // Query all widget divs without the data-rendered filter\r\n      const dynamicWidgetDivs = Array.from(\r\n        container.querySelectorAll('.bbq-widget')\r\n      ) as HTMLElement[];\r\n\r\n      let dynamicIndex = 0;\r\n      this.widgetItems.forEach((item) => {\r\n        if (!item.isHtml) {\r\n          const customRenderer = this.widgetRegistry.getRenderer(item.widget.type);\r\n\r\n          if (!customRenderer) return;\r\n\r\n          const targetDiv = dynamicWidgetDivs[dynamicIndex];\r\n          if (!targetDiv) return;\r\n\r\n          // Clear the div content before rendering\r\n          targetDiv.innerHTML = '';\r\n\r\n          if (isComponentRenderer(customRenderer)) {\r\n            this.renderComponent(customRenderer, item.widget, targetDiv);\r\n          } else if (isTemplateRenderer(customRenderer)) {\r\n            this.renderTemplate(customRenderer, item.widget, targetDiv);\r\n          }\r\n\r\n          dynamicIndex++;\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Render an Angular component for a custom widget\r\n   * \r\n   * Note: This method safely assigns properties to component instances\r\n   * by checking for property existence at runtime. This approach is necessary\r\n   * because we cannot statically verify that all components implement\r\n   * the CustomWidgetComponent interface.\r\n   */\r\n  protected renderComponent(\r\n    componentType: any,\r\n    widget: ChatWidget,\r\n    targetElement: HTMLElement\r\n  ) {\r\n    // Create the component using Angular's createComponent API\r\n    const componentRef = createComponent(componentType, {\r\n      environmentInjector: this.environmentInjector,\r\n      elementInjector: this.injector,\r\n    });\r\n\r\n    // Safely set component inputs if they exist\r\n    const instance = componentRef.instance as any;\r\n    // Set widget property if it exists in the prototype chain\r\n    instance['widget'] = widget;\r\n    // Set widgetAction property if it exists in the prototype chain\r\n    instance['widgetAction'] = (actionName: string, payload: unknown) => {\r\n        this.widgetAction.emit({ actionName, payload });\r\n      };\r\n    // Attach the component's host view to the target element\r\n    targetElement.appendChild(componentRef.location.nativeElement);\r\n\r\n    // Store reference for cleanup\r\n    this.dynamicComponents.push(componentRef);\r\n\r\n    // Trigger change detection (use optional chaining for safety)\r\n    componentRef.changeDetectorRef?.detectChanges();\r\n  }\r\n\r\n  /**\r\n   * Render an Angular template for a custom widget\r\n   */\r\n  protected renderTemplate(\r\n    templateRef: TemplateRef<WidgetTemplateContext>,\r\n    widget: ChatWidget,\r\n    targetElement: HTMLElement\r\n  ) {\r\n    const context: WidgetTemplateContext = {\r\n      $implicit: widget,\r\n      widget: widget,\r\n      emitAction: (actionName: string, payload: unknown) => {\r\n        this.widgetAction.emit({ actionName, payload });\r\n      },\r\n    };\r\n\r\n    const viewRef = templateRef.createEmbeddedView(context);\r\n\r\n    // Attach the view's DOM nodes to the target element\r\n    viewRef.rootNodes.forEach((node: Node) => {\r\n      targetElement.appendChild(node);\r\n    });\r\n\r\n    // Store reference for cleanup\r\n    this.dynamicViews.push(viewRef);\r\n\r\n    // Trigger change detection\r\n    viewRef.detectChanges();\r\n  }\r\n\r\n  /**\r\n   * Cleanup dynamic components and views\r\n   */\r\n  protected cleanupDynamicWidgets() {\r\n    this.dynamicComponents.forEach((componentRef) => {\r\n      componentRef.destroy();\r\n    });\r\n    this.dynamicComponents = [];\r\n\r\n    this.dynamicViews.forEach((viewRef) => {\r\n      viewRef.destroy();\r\n    });\r\n    this.dynamicViews = [];\r\n  }\r\n\r\n  private setupEventHandlers() {\r\n    if (!this.containerRef?.nativeElement) return;\r\n\r\n    // Cleanup old resources before setting up new ones\r\n    this.cleanup();\r\n\r\n    const container = this.containerRef.nativeElement;\r\n\r\n    // Create a custom action handler that emits events\r\n    const actionHandler = {\r\n      handle: async (action: string, payload: any) => {\r\n        this.widgetAction.emit({ actionName: action, payload });\r\n      },\r\n    };\r\n\r\n    // Use the injected factory to create an event manager with the component-specific action handler\r\n    this.eventManager = this.eventManagerFactory(actionHandler);\r\n    this.eventManager.attachHandlers(container);\r\n  }\r\n\r\n  handleClick(event: MouseEvent) {\r\n    const target = event.target as HTMLElement;\r\n    // Only trigger actions on non-form buttons and clickable elements (cards)\r\n    // Don't trigger on input elements or form buttons (let WidgetEventManager handle those)\r\n    const button = target.tagName === 'BUTTON' ? target : target.closest('button');\r\n    if (button && !button.closest('[data-widget-type=\"form\"]')) {\r\n      const actionName = button.getAttribute('data-action');\r\n      if (actionName) {\r\n        try {\r\n          const payloadStr = button.getAttribute('data-payload');\r\n          const payload = payloadStr ? JSON.parse(payloadStr) : {};\r\n          this.widgetAction.emit({ actionName, payload });\r\n        } catch (err) {\r\n          console.error('Failed to parse widget action payload:', err);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Cleanup all resources including event listeners.\r\n   */\r\n  private cleanup() {\r\n    // Cleanup dynamic widgets first\r\n    this.cleanupDynamicWidgets();\r\n\r\n    // Cleanup event manager\r\n    this.eventManager = undefined;\r\n  }\r\n}\r\n","/**\r\n * @bbq-chat/widgets-angular\r\n * \r\n * Angular components and services for BbQ ChatWidgets\r\n * \r\n * This package provides Angular-native components and services that wrap\r\n * the core @bbq-chat/widgets library, making it easy to integrate chat\r\n * widgets into Angular applications.\r\n * \r\n * @packageDocumentation\r\n */\r\n\r\n// Export components\r\nexport { WidgetRendererComponent } from './widget-renderer.component';\r\n\r\n// Export services\r\nexport { WidgetRegistryService } from './widget-registry.service';\r\n\r\n// Export DI tokens and factories\r\nexport {\r\n  WIDGET_EVENT_MANAGER_FACTORY,\r\n  SSR_WIDGET_RENDERER,\r\n  widgetEventManagerFactoryProvider,\r\n  ssrWidgetRendererFactory,\r\n} from './widget-di.tokens';\r\n\r\nexport type { WidgetEventManagerFactory } from './widget-di.tokens';\r\n\r\n// Export custom widget renderer types\r\nexport type {\r\n  CustomWidgetComponent,\r\n  CustomWidgetRenderer,\r\n  CustomWidgetHtmlRenderer,\r\n  CustomWidgetRendererConfig,\r\n  WidgetTemplateContext,\r\n} from './custom-widget-renderer.types';\r\n\r\nexport {\r\n  isHtmlRenderer,\r\n  isComponentRenderer,\r\n  isTemplateRenderer,\r\n} from './custom-widget-renderer.types';\r\n\r\n// Re-export commonly used types and classes from core package\r\nexport {\r\n  ChatWidget,\r\n} from '@bbq-chat/widgets';\r\n\r\nexport type {\r\n  ButtonWidget,\r\n  CardWidget,\r\n  FormWidget,\r\n  InputWidget,\r\n  TextAreaWidget,\r\n  DropdownWidget,\r\n  SliderWidget,\r\n  ToggleWidget,\r\n  FileUploadWidget,\r\n  DatePickerWidget,\r\n  MultiSelectWidget,\r\n  ProgressBarWidget,\r\n  ThemeSwitcherWidget,\r\n  ImageWidget,\r\n  ImageCollectionWidget,\r\n} from '@bbq-chat/widgets';\r\n\r\n// Re-export utilities\r\nexport {\r\n  SsrWidgetRenderer,\r\n  WidgetEventManager,\r\n  customWidgetRegistry,\r\n} from '@bbq-chat/widgets';\r\n\r\n// Version\r\nexport const VERSION = '1.0.3';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.WidgetRegistryService"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -0,0 +1,335 @@
+import * as i0 from '@angular/core';
+import { Type, TemplateRef, InjectionToken, OnInit, AfterViewInit, OnDestroy, OnChanges, Injector, EnvironmentInjector, EventEmitter, ElementRef, ComponentRef, EmbeddedViewRef, SimpleChanges } from '@angular/core';
+import { ChatWidget, IWidgetActionHandler, WidgetEventManager, SsrWidgetRenderer } from '@bbq-chat/widgets';
+export { ButtonWidget, CardWidget, ChatWidget, DatePickerWidget, DropdownWidget, FileUploadWidget, FormWidget, ImageCollectionWidget, ImageWidget, InputWidget, MultiSelectWidget, ProgressBarWidget, SliderWidget, SsrWidgetRenderer, TextAreaWidget, ThemeSwitcherWidget, ToggleWidget, WidgetEventManager, customWidgetRegistry } from '@bbq-chat/widgets';
+
+/**
+ * Context provided to template-based custom widget renderers
+ */
+interface WidgetTemplateContext {
+    /**
+     * The widget instance being rendered
+     */
+    $implicit: ChatWidget;
+    /**
+     * The widget instance (alternative access)
+     */
+    widget: ChatWidget;
+    /**
+     * Emit a widget action
+     */
+    emitAction: (actionName: string, payload: unknown) => void;
+}
+/**
+ * Interface for component-based custom widget renderers
+ */
+interface CustomWidgetComponent {
+    /**
+     * The widget instance to render
+     */
+    widget: ChatWidget;
+    /**
+     * Event emitter for widget actions (optional, will be set by the renderer)
+     */
+    widgetAction?: (actionName: string, payload: unknown) => void;
+}
+/**
+ * Type for custom widget renderer functions that return HTML strings
+ */
+type CustomWidgetHtmlRenderer = (widget: ChatWidget) => string;
+/**
+ * Type for custom widget renderer configurations
+ */
+type CustomWidgetRenderer = CustomWidgetHtmlRenderer | Type<CustomWidgetComponent> | TemplateRef<WidgetTemplateContext>;
+/**
+ * Configuration for registering a custom widget renderer
+ */
+interface CustomWidgetRendererConfig {
+    /**
+     * The widget type identifier
+     */
+    type: string;
+    /**
+     * The renderer: can be a function returning HTML, an Angular Component class, or a TemplateRef
+     */
+    renderer: CustomWidgetRenderer;
+}
+/**
+ * Type guard to check if a renderer is a TemplateRef
+ */
+declare function isTemplateRenderer(renderer: CustomWidgetRenderer): renderer is TemplateRef<WidgetTemplateContext>;
+/**
+ * Type guard to check if a renderer is an Angular Component
+ *
+ * Note: This uses a heuristic check based on the following assumptions:
+ * 1. Components are constructor functions
+ * 2. Components have a prototype with a constructor property
+ * 3. Components typically use dependency injection (no required constructor params)
+ *
+ * Limitation: This may not detect components with required constructor parameters.
+ * For edge cases, explicitly check your component's constructor signature.
+ *
+ * Alternative: You can always register a wrapper component that has no required params.
+ */
+declare function isComponentRenderer(renderer: CustomWidgetRenderer): renderer is Type<CustomWidgetComponent>;
+/**
+ * Type guard to check if a renderer is an HTML function
+ *
+ * Note: This should be checked AFTER checking for component and template renderers
+ * since components are also functions but with additional properties.
+ */
+declare function isHtmlRenderer(renderer: CustomWidgetRenderer): renderer is CustomWidgetHtmlRenderer;
+
+/**
+ * Service for registering custom widget factories and renderers
+ *
+ * This service provides a centralized way to register custom widget types
+ * that extend the base widget functionality, including support for
+ * Angular components and templates as custom renderers.
+ *
+ * @example
+ * ```typescript
+ * constructor(private widgetRegistry: WidgetRegistryService) {
+ *   // Register a widget factory
+ *   this.widgetRegistry.registerFactory('myWidget', (obj) => {
+ *     if (obj.type === 'myWidget') {
+ *       return new MyCustomWidget(obj.label, obj.action);
+ *     }
+ *     return null;
+ *   });
+ *
+ *   // Register a component-based renderer
+ *   this.widgetRegistry.registerRenderer('myWidget', MyWidgetComponent);
+ * }
+ * ```
+ */
+declare class WidgetRegistryService {
+    private readonly customRenderers;
+    /**
+     * Register a custom widget factory function
+     *
+     * @param type - The widget type identifier
+     * @param factory - Factory function that creates widget instances from plain objects
+     */
+    registerFactory(type: string, factory: (obj: unknown) => ChatWidget | null): void;
+    /**
+     * Register a widget class with automatic factory creation
+     *
+     * @param type - The widget type identifier
+     * @param ctor - Widget class constructor
+     */
+    registerClass(type: string, ctor: any): void;
+    /**
+     * Get a factory for a specific widget type
+     *
+     * @param type - The widget type identifier
+     * @returns The factory function if registered, undefined otherwise
+     */
+    getFactory(type: string): ((obj: any) => ChatWidget | null) | undefined;
+    /**
+     * Register a custom renderer for a specific widget type
+     *
+     * The renderer can be:
+     * - A function that returns HTML string
+     * - An Angular Component class
+     * - An Angular TemplateRef
+     *
+     * @param type - The widget type identifier
+     * @param renderer - The custom renderer (function, Component, or TemplateRef)
+     *
+     * @example
+     * ```typescript
+     * // HTML function renderer
+     * widgetRegistry.registerRenderer('weather', (widget) => `<div>${widget.label}</div>`);
+     *
+     * // Component renderer
+     * widgetRegistry.registerRenderer('weather', WeatherWidgetComponent);
+     *
+     * // Template renderer (from @ViewChild or elsewhere)
+     * widgetRegistry.registerRenderer('weather', this.weatherTemplate);
+     * ```
+     */
+    registerRenderer(type: string, renderer: CustomWidgetRenderer): void;
+    /**
+     * Get a custom renderer for a specific widget type
+     *
+     * @param type - The widget type identifier
+     * @returns The custom renderer if registered, undefined otherwise
+     */
+    getRenderer(type: string): CustomWidgetRenderer | undefined;
+    /**
+     * Check if a custom renderer is registered for a widget type
+     *
+     * @param type - The widget type identifier
+     * @returns True if a custom renderer is registered, false otherwise
+     */
+    hasRenderer(type: string): boolean;
+    /**
+     * Unregister a custom renderer for a widget type
+     *
+     * @param type - The widget type identifier
+     * @returns True if a renderer was removed, false if none was registered
+     */
+    unregisterRenderer(type: string): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WidgetRegistryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WidgetRegistryService>;
+}
+
+/**
+ * Injection token for WidgetEventManager factory
+ *
+ * Use this token to inject a factory function that creates WidgetEventManager instances.
+ * The factory accepts an optional action handler to configure the manager.
+ *
+ * @example
+ * ```typescript
+ * constructor(@Inject(WIDGET_EVENT_MANAGER_FACTORY) private eventManagerFactory: WidgetEventManagerFactory) {
+ *   const actionHandler = { handle: async (action, payload) => { ... } };
+ *   this.eventManager = this.eventManagerFactory(actionHandler);
+ * }
+ * ```
+ */
+type WidgetEventManagerFactory = (actionHandler?: IWidgetActionHandler) => WidgetEventManager;
+declare const WIDGET_EVENT_MANAGER_FACTORY: InjectionToken<WidgetEventManagerFactory>;
+/**
+ * Injection token for SsrWidgetRenderer
+ *
+ * Use this token to inject a SsrWidgetRenderer instance in your components.
+ * By default, WidgetRendererComponent provides this token with a factory that creates
+ * a new instance for each component.
+ *
+ * @example
+ * ```typescript
+ * constructor(@Inject(SSR_WIDGET_RENDERER) private renderer: SsrWidgetRenderer) {}
+ * ```
+ */
+declare const SSR_WIDGET_RENDERER: InjectionToken<SsrWidgetRenderer>;
+/**
+ * Factory function for creating WidgetEventManager instances
+ *
+ * This factory is used by default in WidgetRendererComponent's providers array.
+ * You can override this in your own providers if you need custom initialization.
+ *
+ * @returns A factory function that creates WidgetEventManager instances
+ */
+declare function widgetEventManagerFactoryProvider(): WidgetEventManagerFactory;
+/**
+ * Factory function for creating SsrWidgetRenderer instances
+ *
+ * This factory is used by default in WidgetRendererComponent's providers array.
+ * You can override this in your own providers if you need custom initialization
+ * or custom rendering options.
+ *
+ * @returns A new SsrWidgetRenderer instance
+ */
+declare function ssrWidgetRendererFactory(): SsrWidgetRenderer;
+
+/**
+ * Angular component for rendering chat widgets
+ *
+ * This component handles rendering of chat widgets using the BbQ ChatWidgets library.
+ * It manages widget lifecycle, event handling, and cleanup.
+ *
+ * Supports three types of custom widget renderers:
+ * 1. HTML function renderers (return HTML strings)
+ * 2. Angular Component renderers (render as dynamic components)
+ * 3. Angular TemplateRef renderers (render as embedded views)
+ *
+ * @example
+ * ```typescript
+ * <bbq-widget-renderer
+ *   [widgets]="messageWidgets"
+ *   (widgetAction)="handleWidgetAction($event)">
+ * </bbq-widget-renderer>
+ * ```
+ */
+declare class WidgetRendererComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+    protected renderer: SsrWidgetRenderer;
+    protected eventManagerFactory: WidgetEventManagerFactory;
+    protected widgetRegistry: WidgetRegistryService;
+    protected injector: Injector;
+    protected environmentInjector: EnvironmentInjector;
+    /**
+     * Array of widgets to render
+     */
+    widgets: ChatWidget[] | null | undefined;
+    /**
+     * Emits when a widget action is triggered
+     */
+    widgetAction: EventEmitter<{
+        actionName: string;
+        payload: unknown;
+    }>;
+    containerRef: ElementRef<HTMLDivElement>;
+    protected widgetItems: Array<{
+        index: number;
+        widget: ChatWidget;
+        isHtml: boolean;
+        html?: string;
+    }>;
+    protected eventManager?: WidgetEventManager;
+    protected isViewInitialized: boolean;
+    protected dynamicComponents: Array<ComponentRef<any>>;
+    protected dynamicViews: Array<EmbeddedViewRef<WidgetTemplateContext>>;
+    constructor(renderer: SsrWidgetRenderer, eventManagerFactory: WidgetEventManagerFactory, widgetRegistry: WidgetRegistryService, injector: Injector, environmentInjector: EnvironmentInjector);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Base implementation for updating the rendered HTML for the current widgets.
+     *
+     * Subclasses may override this method to customize how widgets are rendered
+     * (for example, to inject additional markup or perform preprocessing).
+     *
+     * Since this is the base implementation, overriding implementations are not
+     * required to call `super.updateWidgetHtml()`.
+     */
+    protected updateWidgetHtml(): void;
+    /**
+     * Render dynamic components and templates for custom widgets
+     */
+    protected renderDynamicWidgets(): void;
+    /**
+     * Render an Angular component for a custom widget
+     *
+     * Note: This method safely assigns properties to component instances
+     * by checking for property existence at runtime. This approach is necessary
+     * because we cannot statically verify that all components implement
+     * the CustomWidgetComponent interface.
+     */
+    protected renderComponent(componentType: any, widget: ChatWidget, targetElement: HTMLElement): void;
+    /**
+     * Render an Angular template for a custom widget
+     */
+    protected renderTemplate(templateRef: TemplateRef<WidgetTemplateContext>, widget: ChatWidget, targetElement: HTMLElement): void;
+    /**
+     * Cleanup dynamic components and views
+     */
+    protected cleanupDynamicWidgets(): void;
+    private setupEventHandlers;
+    handleClick(event: MouseEvent): void;
+    /**
+     * Cleanup all resources including event listeners.
+     */
+    private cleanup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WidgetRendererComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WidgetRendererComponent, "bbq-widget-renderer", never, { "widgets": { "alias": "widgets"; "required": false; }; }, { "widgetAction": "widgetAction"; }, never, never, true, never>;
+}
+
+/**
+ * @bbq-chat/widgets-angular
+ *
+ * Angular components and services for BbQ ChatWidgets
+ *
+ * This package provides Angular-native components and services that wrap
+ * the core @bbq-chat/widgets library, making it easy to integrate chat
+ * widgets into Angular applications.
+ *
+ * @packageDocumentation
+ */
+
+declare const VERSION = "1.0.3";
+
+export { SSR_WIDGET_RENDERER, VERSION, WIDGET_EVENT_MANAGER_FACTORY, WidgetRegistryService, WidgetRendererComponent, isComponentRenderer, isHtmlRenderer, isTemplateRenderer, ssrWidgetRendererFactory, widgetEventManagerFactoryProvider };
+export type { CustomWidgetComponent, CustomWidgetHtmlRenderer, CustomWidgetRenderer, CustomWidgetRendererConfig, WidgetEventManagerFactory, WidgetTemplateContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbq-chat/widgets-angular",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Angular components and services for BbQ ChatWidgets",
   "license": "MIT",
   "author": "BbQ ChatWidgets Contributors",
@@ -27,6 +27,13 @@
     "README.md",
     "LICENSE"
   ],
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
   "packageManager": "npm@10.9.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -38,18 +45,14 @@
     "rxjs": "~7.8.0",
     "@bbq-chat/widgets": "^1.0.0"
   },
-  "module": "fesm2022/index.mjs",
-  "typings": "types/index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/index.d.ts",
-      "default": "./fesm2022/index.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
+  "devDependencies": {
+    "@angular/build": "^21.0.5",
+    "@angular/cli": "^21.0.5",
+    "@angular/compiler-cli": "^21.0.0",
+    "@bbq-chat/widgets": "file:../js",
+    "jsdom": "^27.1.0",
+    "ng-packagr": "^21.0.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
   }
-}
+}