@bbq-chat/widgets-angular 1.0.9 → 1.0.11

package/src/components/button.component.ts

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

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

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

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

@@ -1,71 +0,0 @@
-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 });
-      }
-    }
-  }
-}