@bbq-chat/widgets-angular 1.0.7 → 1.0.9

package/src/angular-widget-renderer.spec.ts

@@ -0,0 +1,157 @@
+import { describe, it, expect } from 'vitest';
+import { AngularWidgetRenderer } from './renderers/AngularWidgetRenderer';
+import { ButtonWidgetComponent } from './components/button.component';
+import { InputWidgetComponent } from './components/input.component';
+import { CardWidgetComponent } from './components/card.component';
+
+describe('AngularWidgetRenderer', () => {
+  it('should create an instance', () => {
+    const renderer = new AngularWidgetRenderer();
+    expect(renderer).toBeTruthy();
+    expect(renderer.framework).toBe('Angular');
+  });
+
+  it('should register components', () => {
+    const renderer = new AngularWidgetRenderer();
+    renderer.registerComponent('button', ButtonWidgetComponent);
+    
+    const mockWidget = {
+      type: 'button',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    const componentType = renderer.getComponentType(mockWidget);
+    expect(componentType).toBe(ButtonWidgetComponent);
+  });
+
+  it('should register multiple components at once', () => {
+    const renderer = new AngularWidgetRenderer();
+    renderer.registerComponents({
+      button: ButtonWidgetComponent,
+      input: InputWidgetComponent
+    });
+    
+    const mockButtonWidget = {
+      type: 'button',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    const mockInputWidget = {
+      type: 'input',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    expect(renderer.getComponentType(mockButtonWidget)).toBe(ButtonWidgetComponent);
+    expect(renderer.getComponentType(mockInputWidget)).toBe(InputWidgetComponent);
+  });
+
+  it('should return null for unregistered widget types', () => {
+    const renderer = new AngularWidgetRenderer();
+    
+    const mockWidget = {
+      type: 'unknown',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    const componentType = renderer.getComponentType(mockWidget);
+    expect(componentType).toBeNull();
+  });
+
+  it('should respect custom overrides from constructor', () => {
+    const customComponent = ButtonWidgetComponent; // Use as a stand-in for custom component
+    const renderer = new AngularWidgetRenderer({
+      components: {
+        button: customComponent
+      }
+    });
+    
+    const mockWidget = {
+      type: 'button',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    const componentType = renderer.getComponentType(mockWidget);
+    expect(componentType).toBe(customComponent);
+  });
+
+  it('should prioritize constructor overrides over registered components', () => {
+    const constructorComponent = CardWidgetComponent;
+    const registeredComponent = ButtonWidgetComponent;
+    
+    const renderer = new AngularWidgetRenderer({
+      components: {
+        button: constructorComponent
+      }
+    });
+    
+    // Register a different component
+    renderer.registerComponent('button', registeredComponent);
+    
+    const mockWidget = {
+      type: 'button',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    // Constructor override should take precedence
+    const componentType = renderer.getComponentType(mockWidget);
+    expect(componentType).toBe(constructorComponent);
+  });
+
+  it('should register built-in components', () => {
+    const renderer = new AngularWidgetRenderer();
+    
+    const builtInComponents = {
+      button: ButtonWidgetComponent,
+      input: InputWidgetComponent,
+      card: CardWidgetComponent
+    };
+    
+    renderer.registerBuiltInComponents(builtInComponents);
+    
+    const mockButtonWidget = {
+      type: 'button',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    const mockInputWidget = {
+      type: 'input',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    const mockCardWidget = {
+      type: 'card',
+      label: 'Test',
+      action: 'test_action',
+      toJson: () => '{}',
+      toObject: () => ({})
+    };
+    
+    expect(renderer.getComponentType(mockButtonWidget)).toBe(ButtonWidgetComponent);
+    expect(renderer.getComponentType(mockInputWidget)).toBe(InputWidgetComponent);
+    expect(renderer.getComponentType(mockCardWidget)).toBe(CardWidgetComponent);
+  });
+});

package/src/components/button.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { ButtonWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-button-widget',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <button 
+      class="bbq-widget bbq-button" 
+      [attr.data-widget-type]="'button'"
+      [attr.data-action]="buttonWidget.action"
+      type="button"
+      (click)="onClick()">
+      {{ buttonWidget.label }}
+    </button>
+  `,
+  styles: []
+})
+export class ButtonWidgetComponent implements CustomWidgetComponent {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+
+  get buttonWidget(): ButtonWidget {
+    return this.widget as ButtonWidget;
+  }
+
+  onClick() {
+    if (this.widgetAction) {
+      this.widgetAction(this.buttonWidget.action, {});
+    }
+  }
+}

package/src/components/card.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { CardWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-card-widget',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-card" 
+      [attr.data-widget-type]="'card'"
+      [attr.data-action]="cardWidget.action"
+      role="article">
+      <h3 class="bbq-card-title">{{ cardWidget.title }}</h3>
+      @if (cardWidget.description) {
+        <p class="bbq-card-description">{{ cardWidget.description }}</p>
+      }
+      @if (cardWidget.imageUrl) {
+        <img 
+          class="bbq-card-image" 
+          [src]="cardWidget.imageUrl" 
+          [alt]="cardWidget.title"
+          loading="lazy"
+          style="display:block;max-width:100%;height:auto;object-fit:cover;max-height:200px;border-radius:6px;margin-bottom:12px;" />
+      }
+      <button 
+        class="bbq-card-action bbq-button" 
+        [attr.data-action]="cardWidget.action"
+        type="button"
+        (click)="onClick()">
+        {{ cardWidget.label }}
+      </button>
+    </div>
+  `,
+  styles: []
+})
+export class CardWidgetComponent implements CustomWidgetComponent {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+
+  get cardWidget(): CardWidget {
+    return this.widget as CardWidget;
+  }
+
+  onClick() {
+    if (this.widgetAction) {
+      this.widgetAction(this.cardWidget.action, {});
+    }
+  }
+}

package/src/components/datepicker.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 { DatePickerWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-datepicker-widget',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-date-picker" 
+      [attr.data-widget-type]="'datepicker'">
+      <label *ngIf="showLabel" class="bbq-date-picker-label" [attr.for]="inputId">
+        {{ datePickerWidget.label }}
+      </label>
+      <input 
+        type="date" 
+        [id]="inputId"
+        [ngClass]="inputClasses"
+        [attr.data-action]="datePickerWidget.action"
+        [min]="datePickerWidget.minDate || ''"
+        [max]="datePickerWidget.maxDate || ''"
+        [(ngModel)]="value" />
+    </div>
+  `,
+  styles: []
+})
+export class DatePickerWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  value = '';
+  inputId = '';
+
+  get datePickerWidget(): DatePickerWidget {
+    return this.widget as DatePickerWidget;
+  }
+
+  get showLabel(): boolean {
+    const widget = this.datePickerWidget as any;
+    if (widget.hideLabel === true) {
+      return false;
+    }
+    if (widget.showLabel === false) {
+      return false;
+    }
+    return true;
+  }
+
+  get inputClasses(): string[] {
+    return this.isFormAppearance ? ['bbq-form-datepicker'] : ['bbq-form-datepicker', 'bbq-input'];
+  }
+
+  private get isFormAppearance(): boolean {
+    return (this.datePickerWidget as any).appearance === 'form';
+  }
+
+  ngOnInit() {
+    this.inputId = `bbq-${this.datePickerWidget.action.replace(/\s+/g, '-').toLowerCase()}-date`;
+  }
+}

package/src/components/dropdown.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import type { DropdownWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-dropdown-widget',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-dropdown" 
+      [attr.data-widget-type]="'dropdown'">
+      <label *ngIf="showLabel" class="bbq-dropdown-label" [attr.for]="selectId">
+        {{ dropdownWidget.label }}
+      </label>
+      <select 
+        [id]="selectId"
+        [ngClass]="selectClasses"
+        [attr.data-action]="dropdownWidget.action"
+        [(ngModel)]="value">
+        @for (option of dropdownWidget.options; track option) {
+          <option [value]="option">{{ option }}</option>
+        }
+      </select>
+    </div>
+  `,
+  styles: []
+})
+export class DropdownWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  value = '';
+  selectId = '';
+
+  get dropdownWidget(): DropdownWidget {
+    return this.widget as DropdownWidget;
+  }
+
+  get showLabel(): boolean {
+    const widget = this.dropdownWidget as any;
+    if (widget.hideLabel === true) {
+      return false;
+    }
+    if (widget.showLabel === false) {
+      return false;
+    }
+    return true;
+  }
+
+  get selectClasses(): string[] {
+    return this.isFormAppearance ? ['bbq-form-select'] : ['bbq-dropdown'];
+  }
+
+  private get isFormAppearance(): boolean {
+    return (this.dropdownWidget as any).appearance === 'form';
+  }
+
+  ngOnInit() {
+    this.selectId = `bbq-${this.dropdownWidget.action.replace(/\s+/g, '-').toLowerCase()}-select`;
+    this.value = this.dropdownWidget.options[0] || '';
+  }
+}

package/src/components/fileupload.component.ts

@@ -0,0 +1,71 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { FileUploadWidget } from '@bbq-chat/widgets';
+import { CustomWidgetComponent } from '../custom-widget-renderer.types';
+
+@Component({
+  selector: 'bbq-fileupload-widget',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div 
+      class="bbq-widget bbq-file-upload" 
+      [attr.data-widget-type]="'fileupload'">
+      <label *ngIf="showLabel" class="bbq-file-label" [attr.for]="inputId">
+        {{ fileUploadWidget.label }}
+      </label>
+      <input 
+        type="file" 
+        [id]="inputId"
+        [ngClass]="inputClasses"
+        [attr.data-action]="fileUploadWidget.action"
+        [accept]="fileUploadWidget.accept || ''"
+        [attr.data-max-bytes]="fileUploadWidget.maxBytes"
+        (change)="onFileChange($event)" />
+    </div>
+  `,
+  styles: []
+})
+export class FileUploadWidgetComponent implements CustomWidgetComponent, OnInit {
+  @Input() widget!: any;
+  widgetAction?: (actionName: string, payload: unknown) => void;
+  
+  inputId = '';
+
+  get fileUploadWidget(): FileUploadWidget {
+    return this.widget as FileUploadWidget;
+  }
+
+  get showLabel(): boolean {
+    const widget = this.fileUploadWidget as any;
+    if (widget.hideLabel === true) {
+      return false;
+    }
+    if (widget.showLabel === false) {
+      return false;
+    }
+    return true;
+  }
+
+  get inputClasses(): string[] {
+    return this.isFormAppearance ? ['bbq-form-fileupload'] : ['bbq-file'];
+  }
+
+  private get isFormAppearance(): boolean {
+    return (this.fileUploadWidget as any).appearance === 'form';
+  }
+
+  ngOnInit() {
+    this.inputId = `bbq-${this.fileUploadWidget.action.replace(/\s+/g, '-').toLowerCase()}-file`;
+  }
+
+  onFileChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      const file = target.files[0];
+      if (this.widgetAction) {
+        this.widgetAction(this.fileUploadWidget.action, { file });
+      }
+    }
+  }
+}