@bbq-chat/widgets-angular 1.0.7 → 1.0.9

package/src/components/progressbar.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { ProgressBarWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-progressbar-widget',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-progress-bar" 
+      [attr.data-widget-type]="'progressbar'">
+      <label class="bbq-progress-bar-label" [attr.for]="progressId">
+        {{ progressBarWidget.label }}
+      </label>
+      <progress 
+        [id]="progressId"
+        class="bbq-progress-bar-element" 
+        [value]="progressBarWidget.value"
+        [max]="progressBarWidget.max"
+        [attr.data-action]="progressBarWidget.action"
+        [attr.aria-label]="progressBarWidget.label"
+        [attr.aria-valuenow]="progressBarWidget.value"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="progressBarWidget.max">
+        {{ percentage }}%
+      </progress>
+      <span class="bbq-progress-bar-value" aria-live="polite">{{ percentage }}%</span>
+    </div>
+  `,
+  styles: []
+})
+export class ProgressBarWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  progressId = '';
+  percentage = 0;
+
+  get progressBarWidget(): ProgressBarWidget {
+    return this.widget as ProgressBarWidget;
+  }
+
+  ngOnInit() {
+    this.progressId = `bbq-${this.progressBarWidget.action.replace(/\s+/g, '-').toLowerCase()}-progress`;
+    const max = this.progressBarWidget.max;
+    this.percentage = max > 0 ? Math.floor((this.progressBarWidget.value * 100) / max) : 0;
+  }
+}

package/src/components/slider.component.ts

@@ -0,0 +1,67 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import type { SliderWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-slider-widget',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-slider" 
+      [attr.data-widget-type]="'slider'">
+      <label *ngIf="showLabel" class="bbq-slider-label" [attr.for]="sliderId">
+        {{ sliderWidget.label }}
+      </label>
+      <input 
+        type="range" 
+        [id]="sliderId"
+        [ngClass]="sliderClasses"
+        [min]="sliderWidget.min"
+        [max]="sliderWidget.max"
+        [step]="sliderWidget.step"
+        [attr.data-action]="sliderWidget.action"
+        [attr.aria-label]="sliderWidget.label"
+        [(ngModel)]="value" />
+      <span class="bbq-slider-value" aria-live="polite">{{ value }}</span>
+    </div>
+  `,
+  styles: []
+})
+export class SliderWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  value: number = 0;
+  sliderId = '';
+
+  get sliderWidget(): SliderWidget {
+    return this.widget as SliderWidget;
+  }
+
+  get showLabel(): boolean {
+    const widget = this.sliderWidget as any;
+    if (widget.hideLabel === true) {
+      return false;
+    }
+    if (widget.showLabel === false) {
+      return false;
+    }
+    return true;
+  }
+
+  get sliderClasses(): string[] {
+    return this.isFormAppearance ? ['bbq-form-slider'] : ['bbq-slider'];
+  }
+
+  private get isFormAppearance(): boolean {
+    return (this.sliderWidget as any).appearance === 'form';
+  }
+
+  ngOnInit() {
+    this.sliderId = `bbq-${this.sliderWidget.action.replace(/\s+/g, '-').toLowerCase()}-slider`;
+    this.value = this.sliderWidget.defaultValue ?? this.sliderWidget.min;
+  }
+}

package/src/components/textarea.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import type { TextAreaWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-textarea-widget',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-textarea" 
+      [attr.data-widget-type]="'textarea'">
+      <label *ngIf="showLabel" class="bbq-textarea-label" [attr.for]="textareaId">
+        {{ textareaWidget.label }}
+      </label>
+      <textarea 
+        [id]="textareaId"
+        [ngClass]="textareaClasses"
+        [attr.data-action]="textareaWidget.action"
+        [placeholder]="textareaWidget.placeholder || ''"
+        [maxLength]="textareaWidget.maxLength || 0"
+        [rows]="textareaWidget.rows || 4"
+        [(ngModel)]="value"></textarea>
+    </div>
+  `,
+  styles: []
+})
+export class TextAreaWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  value = '';
+  textareaId = '';
+
+  get textareaWidget(): TextAreaWidget {
+    return this.widget as TextAreaWidget;
+  }
+
+  get showLabel(): boolean {
+    const widget = this.textareaWidget as any;
+    if (widget.hideLabel === true) {
+      return false;
+    }
+    if (widget.showLabel === false) {
+      return false;
+    }
+    return true;
+  }
+
+  get textareaClasses(): string[] {
+    return this.isFormAppearance ? ['bbq-form-textarea'] : ['bbq-form-textarea', 'bbq-input'];
+  }
+
+  private get isFormAppearance(): boolean {
+    return (this.textareaWidget as any).appearance === 'form';
+  }
+
+  ngOnInit() {
+    this.textareaId = `bbq-${this.textareaWidget.action.replace(/\s+/g, '-').toLowerCase()}-textarea`;
+  }
+}

package/src/components/themeswitcher.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import type { ThemeSwitcherWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-themeswitcher-widget',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-theme-switcher" 
+      [attr.data-widget-type]="'themeswitcher'">
+      <label class="bbq-theme-switcher-label" [attr.for]="selectId">
+        {{ themeSwitcherWidget.label }}
+      </label>
+      <select 
+        [id]="selectId"
+        class="bbq-theme-switcher-select" 
+        [attr.data-action]="themeSwitcherWidget.action"
+        [(ngModel)]="value">
+        @for (theme of themeSwitcherWidget.themes; track theme) {
+          <option [value]="theme">{{ theme }}</option>
+        }
+      </select>
+    </div>
+  `,
+  styles: []
+})
+export class ThemeSwitcherWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  value = '';
+  selectId = '';
+
+  get themeSwitcherWidget(): ThemeSwitcherWidget {
+    return this.widget as ThemeSwitcherWidget;
+  }
+
+  ngOnInit() {
+    this.selectId = `bbq-${this.themeSwitcherWidget.action.replace(/\s+/g, '-').toLowerCase()}-select`;
+    this.value = this.themeSwitcherWidget.themes[0] || '';
+  }
+}

package/src/components/toggle.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import type { ToggleWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-toggle-widget',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-toggle" 
+      [attr.data-widget-type]="'toggle'">
+      <label class="bbq-toggle-label" [attr.for]="checkboxId">
+        <input 
+          type="checkbox" 
+          [id]="checkboxId"
+          [ngClass]="checkboxClasses"
+          [attr.data-action]="toggleWidget.action"
+          [attr.aria-label]="toggleWidget.label"
+          [(ngModel)]="checked" />
+        <span *ngIf="showLabel" class="bbq-toggle-text">{{ toggleWidget.label }}</span>
+      </label>
+    </div>
+  `,
+  styles: []
+})
+export class ToggleWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  checked = false;
+  checkboxId = '';
+
+  get toggleWidget(): ToggleWidget {
+    return this.widget as ToggleWidget;
+  }
+
+  get showLabel(): boolean {
+    const widget = this.toggleWidget as any;
+    if (widget.hideLabel === true) {
+      return false;
+    }
+    if (widget.showLabel === false) {
+      return false;
+    }
+    return true;
+  }
+
+  get checkboxClasses(): string[] {
+    return this.isFormAppearance ? ['bbq-toggle-input', 'bbq-form-toggle'] : ['bbq-toggle-input'];
+  }
+
+  private get isFormAppearance(): boolean {
+    return (this.toggleWidget as any).appearance === 'form';
+  }
+
+  ngOnInit() {
+    this.checkboxId = `bbq-${this.toggleWidget.action.replace(/\s+/g, '-').toLowerCase()}-checkbox`;
+    this.checked = this.toggleWidget.defaultValue ?? false;
+  }
+}

package/src/custom-widget-renderer.types.ts

@@ -0,0 +1,120 @@
+import { Type, TemplateRef } from '@angular/core';
+import { ChatWidget } from '@bbq-chat/widgets';
+
+/**
+ * Context provided to template-based custom widget renderers
+ */
+export 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
+ */
+export 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
+ */
+export type CustomWidgetHtmlRenderer = (widget: ChatWidget) => string;
+
+/**
+ * Type for custom widget renderer configurations
+ */
+export type CustomWidgetRenderer =
+  | CustomWidgetHtmlRenderer
+  | Type<CustomWidgetComponent>
+  | TemplateRef<WidgetTemplateContext>;
+
+/**
+ * Configuration for registering a custom widget renderer
+ */
+export 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
+ */
+export function isTemplateRenderer(
+  renderer: CustomWidgetRenderer
+): renderer is TemplateRef<WidgetTemplateContext> {
+  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.
+ */
+export function isComponentRenderer(
+  renderer: CustomWidgetRenderer
+): renderer is Type<CustomWidgetComponent> {
+  // 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.
+ */
+export function isHtmlRenderer(
+  renderer: CustomWidgetRenderer
+): renderer is CustomWidgetHtmlRenderer {
+  return typeof renderer === 'function';
+}

package/src/examples/form-validation-listener.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { FormValidationService, FormValidationEvent } from '../services/form-validation.service';
+
+@Component({
+  selector: 'bbq-form-validation-listener',
+  standalone: true,
+  imports: [JsonPipe],
+  template: `
+    <div class="bbq-validation-listener">
+      @if (lastEvent) {
+        <div>
+          <strong>Last validation (formId: {{ lastEvent.formId }})</strong>
+          <pre>{{ lastEvent | json }}</pre>
+        </div>
+      } @else {
+        <small>No validation events yet.</small>
+      }
+    </div>
+  `,
+})
+export class FormValidationListenerComponent implements OnInit, OnDestroy {
+  @Input() formId?: string;
+  lastEvent?: FormValidationEvent | null = null;
+  private sub?: Subscription;
+
+  constructor(private svc: FormValidationService) {}
+
+  ngOnInit() {
+    this.sub = this.svc.validation$.subscribe(ev => {
+      if (!this.formId || ev.formId === this.formId) {
+        this.lastEvent = ev;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.sub?.unsubscribe();
+  }
+}

package/src/public_api.ts

@@ -0,0 +1,107 @@
+/**
+ * @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
+export { WidgetRendererComponent } from './widget-renderer.component';
+
+// Export services
+export { WidgetRegistryService } from './widget-registry.service';
+export { FormValidationService } from './services/form-validation.service';
+
+// Export DI tokens and factories
+export {
+  WIDGET_EVENT_MANAGER_FACTORY,
+  SSR_WIDGET_RENDERER,
+  ANGULAR_WIDGET_RENDERER,
+  widgetEventManagerFactoryProvider,
+  ssrWidgetRendererFactory,
+  angularWidgetRendererFactory,
+} from './widget-di.tokens';
+
+export type { WidgetEventManagerFactory } from './widget-di.tokens';
+
+// Export custom widget renderer types
+export type {
+  CustomWidgetComponent,
+  CustomWidgetRenderer,
+  CustomWidgetHtmlRenderer,
+  CustomWidgetRendererConfig,
+  WidgetTemplateContext,
+} from './custom-widget-renderer.types';
+
+export {
+  isHtmlRenderer,
+  isComponentRenderer,
+  isTemplateRenderer,
+} from './custom-widget-renderer.types';
+
+// Export Angular renderer and built-in components
+export {
+  AngularWidgetRenderer,
+  ButtonWidgetComponent,
+  CardWidgetComponent,
+  InputWidgetComponent,
+  TextAreaWidgetComponent,
+  DropdownWidgetComponent,
+  SliderWidgetComponent,
+  ToggleWidgetComponent,
+  FileUploadWidgetComponent,
+  ThemeSwitcherWidgetComponent,
+  DatePickerWidgetComponent,
+  MultiSelectWidgetComponent,
+  ProgressBarWidgetComponent,
+  FormWidgetComponent,
+  ImageWidgetComponent,
+  ImageCollectionWidgetComponent,
+} from './renderers';
+
+export type {
+  AngularRendererOptions,
+} from './renderers';
+
+export { BUILT_IN_WIDGET_COMPONENTS } from './renderers/built-in-components';
+
+// Re-export commonly used types and classes from core package
+export {
+  ChatWidget,
+} from '@bbq-chat/widgets';
+
+export type {
+  ButtonWidget,
+  CardWidget,
+  FormWidget,
+  InputWidget,
+  TextAreaWidget,
+  DropdownWidget,
+  SliderWidget,
+  ToggleWidget,
+  FileUploadWidget,
+  DatePickerWidget,
+  MultiSelectWidget,
+  ProgressBarWidget,
+  ThemeSwitcherWidget,
+  ImageWidget,
+  ImageCollectionWidget,
+} from '@bbq-chat/widgets';
+
+// Re-export utilities
+export {
+  SsrWidgetRenderer,
+  WidgetEventManager,
+  customWidgetRegistry,
+} from '@bbq-chat/widgets';
+
+// Examples
+export { FormValidationListenerComponent } from './examples/form-validation-listener.component';
+
+// Version
+export const VERSION = '1.0.9';

package/src/renderers/AngularWidgetRenderer.ts

@@ -0,0 +1,100 @@
+import { Type } from '@angular/core';
+import { IWidgetRenderer } from '@bbq-chat/widgets';
+import type { ChatWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+/**
+ * Options for configuring the Angular widget renderer
+ */
+export interface AngularRendererOptions {
+  /**
+   * Per-widget-type component overrides. Key is widget.type.
+   */
+  components?: Partial<Record<string, Type<CustomWidgetComponent>>>;
+}
+
+/**
+ * Angular widget renderer
+ * Returns Angular component types for dynamic rendering
+ * Provides feature parity with SsrWidgetRenderer but uses Angular components
+ */
+export class AngularWidgetRenderer implements IWidgetRenderer {
+  readonly framework = 'Angular';
+  private overrides: AngularRendererOptions['components'] | undefined;
+  private componentRegistry: Map<string, Type<CustomWidgetComponent>> = new Map();
+
+  constructor(options?: AngularRendererOptions) {
+    this.overrides = options?.components;
+  }
+
+  /**
+   * Register all built-in widget components
+   * Must be called after components are imported to avoid circular dependencies
+   */
+  registerBuiltInComponents(components: Record<string, Type<CustomWidgetComponent>>) {
+    for (const [type, component] of Object.entries(components)) {
+      this.componentRegistry.set(type, component);
+    }
+  }
+
+  /**
+   * Register or override a widget component
+   * Use this to replace built-in components or add custom ones
+   * 
+   * @example
+   * ```typescript
+   * renderer.registerComponent('button', MyCustomButtonComponent);
+   * ```
+   */
+  registerComponent(type: string, component: Type<CustomWidgetComponent>) {
+    this.componentRegistry.set(type, component);
+  }
+
+  /**
+   * Register multiple widget components at once
+   * 
+   * @example
+   * ```typescript
+   * renderer.registerComponents({
+   *   button: MyButtonComponent,
+   *   card: MyCardComponent
+   * });
+   * ```
+   */
+  registerComponents(components: Record<string, Type<CustomWidgetComponent>>) {
+    for (const [type, component] of Object.entries(components)) {
+      this.componentRegistry.set(type, component);
+    }
+  }
+
+  /**
+   * Get the Angular component type for a given widget
+   * Returns the component class that should be dynamically instantiated
+   */
+  getComponentType(widget: ChatWidget): Type<CustomWidgetComponent> | null {
+    const type = widget.type;
+
+    // Check for custom override first
+    if (this.overrides && this.overrides[type]) {
+      return this.overrides[type] as Type<CustomWidgetComponent>;
+    }
+
+    // Check built-in registry
+    if (this.componentRegistry.has(type)) {
+      return this.componentRegistry.get(type)!;
+    }
+
+    return null;
+  }
+
+  /**
+   * Legacy method for IWidgetRenderer interface compatibility
+   * Not used in Angular rendering but required by interface
+   * @deprecated Use getComponentType() instead for Angular rendering
+   */
+  renderWidget(widget: ChatWidget): string {
+    // This method is not used in Angular rendering
+    // It's only here for interface compatibility
+    return `<!-- Angular component rendering for ${widget.type} -->`;
+  }
+}