@bbq-chat/widgets-angular 1.0.8 → 1.0.9

package/src/renderers/built-in-components.ts

@@ -0,0 +1,41 @@
+import { Type } from '@angular/core';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+import {
+  ButtonWidgetComponent,
+  CardWidgetComponent,
+  InputWidgetComponent,
+  TextAreaWidgetComponent,
+  DropdownWidgetComponent,
+  SliderWidgetComponent,
+  ToggleWidgetComponent,
+  FileUploadWidgetComponent,
+  ThemeSwitcherWidgetComponent,
+  DatePickerWidgetComponent,
+  MultiSelectWidgetComponent,
+  ProgressBarWidgetComponent,
+  FormWidgetComponent,
+  ImageWidgetComponent,
+  ImageCollectionWidgetComponent,
+} from '../components';
+
+/**
+ * Registry of all built-in widget components
+ * Maps widget type to Angular component class
+ */
+export const BUILT_IN_WIDGET_COMPONENTS: Record<string, Type<CustomWidgetComponent>> = {
+  button: ButtonWidgetComponent,
+  card: CardWidgetComponent,
+  input: InputWidgetComponent,
+  textarea: TextAreaWidgetComponent,
+  dropdown: DropdownWidgetComponent,
+  slider: SliderWidgetComponent,
+  toggle: ToggleWidgetComponent,
+  fileupload: FileUploadWidgetComponent,
+  themeswitcher: ThemeSwitcherWidgetComponent,
+  datepicker: DatePickerWidgetComponent,
+  multiselect: MultiSelectWidgetComponent,
+  progressbar: ProgressBarWidgetComponent,
+  form: FormWidgetComponent,
+  image: ImageWidgetComponent,
+  imagecollection: ImageCollectionWidgetComponent,
+};

package/src/renderers/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Angular widget renderers
+ */
+
+export { AngularWidgetRenderer } from './AngularWidgetRenderer';
+export type { AngularRendererOptions } from './AngularWidgetRenderer';
+export * from '../components';

package/src/services/form-validation.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+export interface FormValidationEvent {
+  formId: string;
+  valid: boolean;
+  errors: Array<{ field: string; reason?: string }>;
+}
+
+@Injectable({ providedIn: 'root' })
+export class FormValidationService {
+  private subject = new Subject<FormValidationEvent>();
+
+  get validation$(): Observable<FormValidationEvent> {
+    return this.subject.asObservable();
+  }
+
+  emit(event: FormValidationEvent) {
+    try { this.subject.next(event); } catch { }
+  }
+}

package/src/widget-di.tokens.ts

@@ -0,0 +1,95 @@
+import { InjectionToken } from '@angular/core';
+import { SsrWidgetRenderer, WidgetEventManager, IWidgetActionHandler } from '@bbq-chat/widgets';
+import { AngularWidgetRenderer } from './renderers/AngularWidgetRenderer';
+import { BUILT_IN_WIDGET_COMPONENTS } from './renderers/built-in-components';
+
+/**
+ * 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);
+ * }
+ * ```
+ */
+export type WidgetEventManagerFactory = (actionHandler?: IWidgetActionHandler) => WidgetEventManager;
+
+export const WIDGET_EVENT_MANAGER_FACTORY = new InjectionToken<WidgetEventManagerFactory>(
+  '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) {}
+ * ```
+ */
+export const SSR_WIDGET_RENDERER = new InjectionToken<SsrWidgetRenderer>(
+  'SSR_WIDGET_RENDERER'
+);
+
+/**
+ * Injection token for AngularWidgetRenderer
+ * 
+ * Use this token to inject an AngularWidgetRenderer instance in your components.
+ * This is the recommended renderer for Angular applications as it provides
+ * native Angular component rendering instead of HTML string rendering.
+ * 
+ * @example
+ * ```typescript
+ * constructor(@Inject(ANGULAR_WIDGET_RENDERER) private renderer: AngularWidgetRenderer) {}
+ * ```
+ */
+export const ANGULAR_WIDGET_RENDERER = new InjectionToken<AngularWidgetRenderer>(
+  'ANGULAR_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
+ */
+export function widgetEventManagerFactoryProvider(): WidgetEventManagerFactory {
+  return (actionHandler?: IWidgetActionHandler) => 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
+ */
+export function ssrWidgetRendererFactory(): SsrWidgetRenderer {
+  return new SsrWidgetRenderer();
+}
+
+/**
+ * Factory function for creating AngularWidgetRenderer instances
+ * 
+ * This factory creates an AngularWidgetRenderer with all built-in widget components
+ * pre-registered. This is the recommended renderer for Angular applications.
+ * 
+ * @returns A new AngularWidgetRenderer instance with built-in components registered
+ */
+export function angularWidgetRendererFactory(): AngularWidgetRenderer {
+  const renderer = new AngularWidgetRenderer();
+  renderer.registerBuiltInComponents(BUILT_IN_WIDGET_COMPONENTS);
+  return renderer;
+}

package/src/widget-registry.service.ts

@@ -0,0 +1,128 @@
+import { Injectable } from '@angular/core';
+import { customWidgetRegistry, ChatWidget } from '@bbq-chat/widgets';
+import { CustomWidgetRenderer } from './custom-widget-renderer.types';
+
+/**
+ * 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);
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class WidgetRegistryService {
+  private readonly customRenderers = new Map<string, CustomWidgetRenderer>();
+  /**
+   * 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 {
+    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: string, ctor: any): void {
+    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: string): ((obj: any) => ChatWidget | null) | undefined {
+    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: string, renderer: CustomWidgetRenderer): void {
+    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: string): CustomWidgetRenderer | undefined {
+    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: string): boolean {
+    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: string): boolean {
+    return this.customRenderers.delete(type);
+  }
+}