@bbq-chat/widgets-angular 1.0.9 → 1.0.10

package/src/components/progressbar.component.ts

@@ -1,50 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,107 +0,0 @@
-/**
- * @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

@@ -1,100 +0,0 @@
-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} -->`;
-  }
-}