@bbq-chat/widgets-angular 1.0.1 → 1.0.2

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.2";
+
+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.1",
+  "version": "1.0.2",
   "description": "Angular components and services for BbQ ChatWidgets",
   "license": "MIT",
   "author": "BbQ ChatWidgets Contributors",
@@ -21,56 +21,38 @@
     "components",
     "bbq-chat"
   ],
-  "main": "./dist/fesm2022/bbq-chat-widgets-angular.mjs",
-  "module": "./dist/fesm2022/bbq-chat-widgets-angular.mjs",
-  "esm2022": "./dist/esm2022/bbq-chat-widgets-angular.mjs",
-  "fesm2022": "./dist/fesm2022/bbq-chat-widgets-angular.mjs",
-  "typings": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./dist/index.d.ts",
-      "esm2022": "./dist/esm2022/bbq-chat-widgets-angular.mjs",
-      "esm": "./dist/esm2022/bbq-chat-widgets-angular.mjs",
-      "default": "./dist/fesm2022/bbq-chat-widgets-angular.mjs"
-    }
-  },
   "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "build": "ng-packagr -p ng-package.json",
-    "build:watch": "ng-packagr -p ng-package.json --watch",
-    "test": "echo \"No tests yet\"",
-    "lint": "eslint src --ext .ts",
-    "lint:fix": "eslint src --ext .ts --fix",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "npm run build && npm run lint"
+    "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": ">=19.2.17",
-    "@angular/core": ">=19.2.17",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "rxjs": "~7.8.0",
     "@bbq-chat/widgets": "^1.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^19.2.17",
-    "@angular/compiler": "^19.2.17",
-    "@angular/compiler-cli": "^19.2.17",
-    "@angular/core": "^19.2.17",
+    "@angular/build": "^21.0.5",
+    "@angular/cli": "^21.0.5",
+    "@angular/compiler-cli": "^21.0.0",
     "@bbq-chat/widgets": "file:../js",
-    "@types/node": "^20.10.0",
-    "@typescript-eslint/eslint-plugin": "^6.13.0",
-    "@typescript-eslint/parser": "^6.13.0",
-    "eslint": "^8.55.0",
-    "ng-packagr": "^19.0.0",
-    "prettier": "^3.1.1",
-    "rxjs": "^7.8.0",
-    "tslib": "^2.3.0",
-    "typescript": "~5.7.0",
-    "zone.js": "^0.15.0"
-  },
-  "engines": {
-    "node": ">=14.0.0"
+    "jsdom": "^27.1.0",
+    "ng-packagr": "^21.0.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
   }
 }

package/.eslintrc.json

@@ -1,23 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "project": "./tsconfig.json"
-  },
-  "plugins": ["@typescript-eslint"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  },
-  "env": {
-    "browser": true,
-    "es2020": true,
-    "node": true
-  }
-}

package/.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false
-}