@bbq-chat/widgets-angular 1.0.3 → 1.0.5

package/dist/fesm2022/index.mjs

@@ -0,0 +1,1992 @@
+import * as i0 from '@angular/core';
+import { Input, Component, createComponent, ViewContainerRef, ViewChildren, InjectionToken, Injectable, EventEmitter, ViewChild, Output, Inject, Optional } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@bbq-chat/widgets';
+import { WidgetEventManager, SsrWidgetRenderer, customWidgetRegistry } from '@bbq-chat/widgets';
+export { ChatWidget, SsrWidgetRenderer, WidgetEventManager, customWidgetRegistry } from '@bbq-chat/widgets';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+/**
+ * Type guard to check if a renderer is a TemplateRef
+ */
+function isTemplateRenderer(renderer) {
+    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.
+ */
+function isComponentRenderer(renderer) {
+    // 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.
+ */
+function isHtmlRenderer(renderer) {
+    return typeof renderer === 'function';
+}
+
+/**
+ * Angular widget renderer
+ * Returns Angular component types for dynamic rendering
+ * Provides feature parity with SsrWidgetRenderer but uses Angular components
+ */
+class AngularWidgetRenderer {
+    framework = 'Angular';
+    overrides;
+    componentRegistry = new Map();
+    constructor(options) {
+        this.overrides = options?.components;
+    }
+    /**
+     * Register all built-in widget components
+     * Must be called after components are imported to avoid circular dependencies
+     */
+    registerBuiltInComponents(components) {
+        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, component) {
+        this.componentRegistry.set(type, component);
+    }
+    /**
+     * Register multiple widget components at once
+     *
+     * @example
+     * ```typescript
+     * renderer.registerComponents({
+     *   button: MyButtonComponent,
+     *   card: MyCardComponent
+     * });
+     * ```
+     */
+    registerComponents(components) {
+        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) {
+        const type = widget.type;
+        // Check for custom override first
+        if (this.overrides && this.overrides[type]) {
+            return this.overrides[type];
+        }
+        // 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) {
+        // This method is not used in Angular rendering
+        // It's only here for interface compatibility
+        return `<!-- Angular component rendering for ${widget.type} -->`;
+    }
+}
+
+class ButtonWidgetComponent {
+    widget;
+    widgetAction;
+    get buttonWidget() {
+        return this.widget;
+    }
+    onClick() {
+        if (this.widgetAction) {
+            this.widgetAction(this.buttonWidget.action, {});
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ButtonWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ButtonWidgetComponent, isStandalone: true, selector: "bbq-button-widget", inputs: { widget: "widget" }, ngImport: i0, template: `
+    <button 
+      class="bbq-widget bbq-button" 
+      [attr.data-widget-type]="'button'"
+      [attr.data-action]="buttonWidget.action"
+      type="button"
+      (click)="onClick()">
+      {{ buttonWidget.label }}
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ButtonWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class CardWidgetComponent {
+    widget;
+    widgetAction;
+    get cardWidget() {
+        return this.widget;
+    }
+    onClick() {
+        if (this.widgetAction) {
+            this.widgetAction(this.cardWidget.action, {});
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: CardWidgetComponent, isStandalone: true, selector: "bbq-card-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class InputWidgetComponent {
+    widget;
+    widgetAction;
+    value = '';
+    inputId = '';
+    get inputWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.inputWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get inputClasses() {
+        return this.isFormAppearance ? ['bbq-form-input'] : ['bbq-input'];
+    }
+    get isFormAppearance() {
+        return this.inputWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.inputId = `bbq-${this.inputWidget.action.replace(/\s+/g, '-').toLowerCase()}-input`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: InputWidgetComponent, isStandalone: true, selector: "bbq-input-widget", inputs: { widget: "widget" }, ngImport: i0, template: `
+    <div 
+      class="bbq-widget bbq-input" 
+      [attr.data-widget-type]="'input'">
+      <label *ngIf="showLabel" class="bbq-input-label" [attr.for]="inputId">
+        {{ inputWidget.label }}
+      </label>
+      <input 
+        type="text" 
+        [id]="inputId"
+        [ngClass]="inputClasses"
+        [attr.data-action]="inputWidget.action"
+        [placeholder]="inputWidget.placeholder || ''"
+        [maxLength]="inputWidget.maxLength || 0"
+        [(ngModel)]="value" />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbq-input-widget', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div 
+      class="bbq-widget bbq-input" 
+      [attr.data-widget-type]="'input'">
+      <label *ngIf="showLabel" class="bbq-input-label" [attr.for]="inputId">
+        {{ inputWidget.label }}
+      </label>
+      <input 
+        type="text" 
+        [id]="inputId"
+        [ngClass]="inputClasses"
+        [attr.data-action]="inputWidget.action"
+        [placeholder]="inputWidget.placeholder || ''"
+        [maxLength]="inputWidget.maxLength || 0"
+        [(ngModel)]="value" />
+    </div>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class TextAreaWidgetComponent {
+    widget;
+    widgetAction;
+    value = '';
+    textareaId = '';
+    get textareaWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.textareaWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get textareaClasses() {
+        return this.isFormAppearance ? ['bbq-form-textarea'] : ['bbq-form-textarea', 'bbq-input'];
+    }
+    get isFormAppearance() {
+        return this.textareaWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.textareaId = `bbq-${this.textareaWidget.action.replace(/\s+/g, '-').toLowerCase()}-textarea`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextAreaWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TextAreaWidgetComponent, isStandalone: true, selector: "bbq-textarea-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextAreaWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class DropdownWidgetComponent {
+    widget;
+    widgetAction;
+    value = '';
+    selectId = '';
+    get dropdownWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.dropdownWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get selectClasses() {
+        return this.isFormAppearance ? ['bbq-form-select'] : ['bbq-dropdown'];
+    }
+    get isFormAppearance() {
+        return this.dropdownWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.selectId = `bbq-${this.dropdownWidget.action.replace(/\s+/g, '-').toLowerCase()}-select`;
+        this.value = this.dropdownWidget.options[0] || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DropdownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DropdownWidgetComponent, isStandalone: true, selector: "bbq-dropdown-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DropdownWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class SliderWidgetComponent {
+    widget;
+    widgetAction;
+    value = 0;
+    sliderId = '';
+    get sliderWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.sliderWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get sliderClasses() {
+        return this.isFormAppearance ? ['bbq-form-slider'] : ['bbq-slider'];
+    }
+    get isFormAppearance() {
+        return this.sliderWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.sliderId = `bbq-${this.sliderWidget.action.replace(/\s+/g, '-').toLowerCase()}-slider`;
+        this.value = this.sliderWidget.defaultValue ?? this.sliderWidget.min;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SliderWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SliderWidgetComponent, isStandalone: true, selector: "bbq-slider-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SliderWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class ToggleWidgetComponent {
+    widget;
+    widgetAction;
+    checked = false;
+    checkboxId = '';
+    get toggleWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.toggleWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get checkboxClasses() {
+        return this.isFormAppearance ? ['bbq-toggle-input', 'bbq-form-toggle'] : ['bbq-toggle-input'];
+    }
+    get isFormAppearance() {
+        return this.toggleWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.checkboxId = `bbq-${this.toggleWidget.action.replace(/\s+/g, '-').toLowerCase()}-checkbox`;
+        this.checked = this.toggleWidget.defaultValue ?? false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToggleWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ToggleWidgetComponent, isStandalone: true, selector: "bbq-toggle-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToggleWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class FileUploadWidgetComponent {
+    widget;
+    widgetAction;
+    inputId = '';
+    get fileUploadWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.fileUploadWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get inputClasses() {
+        return this.isFormAppearance ? ['bbq-form-fileupload'] : ['bbq-file'];
+    }
+    get isFormAppearance() {
+        return this.fileUploadWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.inputId = `bbq-${this.fileUploadWidget.action.replace(/\s+/g, '-').toLowerCase()}-file`;
+    }
+    onFileChange(event) {
+        const target = event.target;
+        if (target.files && target.files.length > 0) {
+            const file = target.files[0];
+            if (this.widgetAction) {
+                this.widgetAction(this.fileUploadWidget.action, { file });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FileUploadWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: FileUploadWidgetComponent, isStandalone: true, selector: "bbq-fileupload-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FileUploadWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class ThemeSwitcherWidgetComponent {
+    widget;
+    widgetAction;
+    value = '';
+    selectId = '';
+    get themeSwitcherWidget() {
+        return this.widget;
+    }
+    ngOnInit() {
+        this.selectId = `bbq-${this.themeSwitcherWidget.action.replace(/\s+/g, '-').toLowerCase()}-select`;
+        this.value = this.themeSwitcherWidget.themes[0] || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ThemeSwitcherWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ThemeSwitcherWidgetComponent, isStandalone: true, selector: "bbq-themeswitcher-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ThemeSwitcherWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class DatePickerWidgetComponent {
+    widget;
+    widgetAction;
+    value = '';
+    inputId = '';
+    get datePickerWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.datePickerWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get inputClasses() {
+        return this.isFormAppearance ? ['bbq-form-datepicker'] : ['bbq-form-datepicker', 'bbq-input'];
+    }
+    get isFormAppearance() {
+        return this.datePickerWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.inputId = `bbq-${this.datePickerWidget.action.replace(/\s+/g, '-').toLowerCase()}-date`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatePickerWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: DatePickerWidgetComponent, isStandalone: true, selector: "bbq-datepicker-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatePickerWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class MultiSelectWidgetComponent {
+    widget;
+    widgetAction;
+    values = [];
+    selectId = '';
+    get multiSelectWidget() {
+        return this.widget;
+    }
+    get showLabel() {
+        const widget = this.multiSelectWidget;
+        if (widget.hideLabel === true) {
+            return false;
+        }
+        if (widget.showLabel === false) {
+            return false;
+        }
+        return true;
+    }
+    get selectClasses() {
+        return this.isFormAppearance
+            ? ['bbq-form-multiselect', 'bbq-form-select']
+            : ['bbq-form-multiselect', 'bbq-form-select'];
+    }
+    get isFormAppearance() {
+        return this.multiSelectWidget.appearance === 'form';
+    }
+    ngOnInit() {
+        this.selectId = `bbq-${this.multiSelectWidget.action.replace(/\s+/g, '-').toLowerCase()}-select`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiSelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MultiSelectWidgetComponent, isStandalone: true, selector: "bbq-multiselect-widget", inputs: { widget: "widget" }, ngImport: i0, template: `
+    <div 
+      class="bbq-widget bbq-multi-select" 
+      [attr.data-widget-type]="'multiselect'">
+      <label *ngIf="showLabel" class="bbq-multi-select-label" [attr.for]="selectId">
+        {{ multiSelectWidget.label }}
+      </label>
+      <select 
+        [id]="selectId"
+        [ngClass]="selectClasses"
+        [attr.data-action]="multiSelectWidget.action"
+        multiple
+        [(ngModel)]="values">
+        @for (option of multiSelectWidget.options; track option) {
+          <option [value]="option">{{ option }}</option>
+        }
+      </select>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiSelectWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbq-multiselect-widget', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div 
+      class="bbq-widget bbq-multi-select" 
+      [attr.data-widget-type]="'multiselect'">
+      <label *ngIf="showLabel" class="bbq-multi-select-label" [attr.for]="selectId">
+        {{ multiSelectWidget.label }}
+      </label>
+      <select 
+        [id]="selectId"
+        [ngClass]="selectClasses"
+        [attr.data-action]="multiSelectWidget.action"
+        multiple
+        [(ngModel)]="values">
+        @for (option of multiSelectWidget.options; track option) {
+          <option [value]="option">{{ option }}</option>
+        }
+      </select>
+    </div>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class ProgressBarWidgetComponent {
+    widget;
+    widgetAction;
+    progressId = '';
+    percentage = 0;
+    get progressBarWidget() {
+        return this.widget;
+    }
+    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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ProgressBarWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ProgressBarWidgetComponent, isStandalone: true, selector: "bbq-progressbar-widget", inputs: { widget: "widget" }, ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ProgressBarWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+/**
+ * Helper class to wrap form fields as widgets for dynamic rendering
+ */
+class FormFieldWidget {
+    field;
+    formId;
+    type;
+    label;
+    action;
+    appearance = 'form';
+    hideLabel = true;
+    constructor(field, formId) {
+        this.field = field;
+        this.formId = formId;
+        this.type = this.mapFieldTypeToWidgetType(field.type);
+        this.label = field.label;
+        this.action = `${formId}_${field.name}`;
+    }
+    mapFieldTypeToWidgetType(fieldType) {
+        const typeMap = {
+            'input': 'input',
+            'text': 'input',
+            'email': 'input',
+            'number': 'input',
+            'password': 'input',
+            'textarea': 'textarea',
+            'dropdown': 'dropdown',
+            'select': 'dropdown',
+            'slider': 'slider',
+            'toggle': 'toggle',
+            'datepicker': 'datepicker',
+            'multiselect': 'multiselect',
+            'fileupload': 'fileupload'
+        };
+        return typeMap[fieldType] || 'input';
+    }
+    // Map field properties to widget properties
+    get placeholder() {
+        return this.field.placeholder ?? undefined;
+    }
+    get maxLength() {
+        return this.field['maxLength'];
+    }
+    get rows() {
+        return this.field['rows'];
+    }
+    get options() {
+        return this.field['options'] || [];
+    }
+    get min() {
+        return this.field['min'] ?? 0;
+    }
+    get max() {
+        return this.field['max'] ?? 100;
+    }
+    get step() {
+        return this.field['step'] ?? 1;
+    }
+    get defaultValue() {
+        return this.field['defaultValue'] ?? (this.type === 'slider' ? this.min : undefined);
+    }
+    get minDate() {
+        return this.field['minDate'];
+    }
+    get maxDate() {
+        return this.field['maxDate'];
+    }
+    get accept() {
+        return this.field['accept'];
+    }
+    get maxBytes() {
+        return this.field['maxBytes'];
+    }
+    // ChatWidget interface methods
+    toJson() {
+        return JSON.stringify(this.toObject());
+    }
+    toObject() {
+        return {
+            type: this.type,
+            label: this.label,
+            action: this.action,
+            ...this.field
+        };
+    }
+}
+class FormWidgetComponent {
+    injector;
+    environmentInjector;
+    widget;
+    widgetAction;
+    fieldContainers;
+    formId = '';
+    formData = {};
+    showValidationMessage = false;
+    componentRefs = [];
+    // Component registry for field types
+    fieldComponentRegistry = {
+        'input': InputWidgetComponent,
+        'text': InputWidgetComponent,
+        'email': InputWidgetComponent,
+        'number': InputWidgetComponent,
+        'password': InputWidgetComponent,
+        'textarea': TextAreaWidgetComponent,
+        'dropdown': DropdownWidgetComponent,
+        'select': DropdownWidgetComponent,
+        'slider': SliderWidgetComponent,
+        'toggle': ToggleWidgetComponent,
+        'datepicker': DatePickerWidgetComponent,
+        'multiselect': MultiSelectWidgetComponent,
+        'fileupload': FileUploadWidgetComponent,
+        'checkbox': ToggleWidgetComponent,
+        'radio': ToggleWidgetComponent,
+    };
+    get formWidget() {
+        return this.widget;
+    }
+    constructor(injector, environmentInjector) {
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+    }
+    ngOnInit() {
+        this.formId = `bbq-${this.formWidget.action.replace(/\s+/g, '-').toLowerCase()}`;
+        // Initialize form data with default values
+        for (const field of this.formWidget.fields || []) {
+            if (field.type === 'slider') {
+                this.formData[field.name] = field['default'] ?? field['defaultValue'] ?? field['min'] ?? 0;
+            }
+            else if (field.type === 'toggle' || field.type === 'checkbox') {
+                this.formData[field.name] = field['defaultValue'] ?? false;
+            }
+            else if (field.type === 'multiselect') {
+                this.formData[field.name] = [];
+            }
+            else {
+                this.formData[field.name] = '';
+            }
+        }
+    }
+    ngAfterViewInit() {
+        // Render field widgets dynamically
+        setTimeout(() => this.renderFieldWidgets(), 0);
+    }
+    ngOnDestroy() {
+        // Clean up component refs
+        this.componentRefs.forEach(ref => ref.destroy());
+        this.componentRefs = [];
+    }
+    renderFieldWidgets() {
+        const containers = this.fieldContainers.toArray();
+        const fields = this.formWidget.fields || [];
+        fields.forEach((field, index) => {
+            const container = containers[index];
+            if (!container)
+                return;
+            const componentType = this.fieldComponentRegistry[field.type];
+            if (!componentType) {
+                // Fallback to input for unknown types
+                this.renderInputFallback(container, field);
+                return;
+            }
+            // Create the field widget
+            const fieldWidget = new FormFieldWidget(field, this.formId);
+            // Create the component
+            const componentRef = createComponent(componentType, {
+                environmentInjector: this.environmentInjector,
+                elementInjector: this.injector,
+            });
+            // Set component inputs
+            const instance = componentRef.instance;
+            instance['widget'] = fieldWidget;
+            // Connect to form data via widgetAction
+            instance['widgetAction'] = (actionName, payload) => {
+                // Handle field value changes - for now, we'll sync via the rendered widget's internal state
+                // The actual form submission will gather values from the DOM
+            };
+            // Attach to container
+            container.insert(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            // Trigger change detection
+            componentRef.changeDetectorRef.detectChanges();
+        });
+    }
+    renderInputFallback(container, field) {
+        // For unsupported field types, render a basic input
+        const fieldWidget = new FormFieldWidget(field, this.formId);
+        const componentRef = createComponent(InputWidgetComponent, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: this.injector,
+        });
+        const instance = componentRef.instance;
+        instance['widget'] = fieldWidget;
+        container.insert(componentRef.hostView);
+        this.componentRefs.push(componentRef);
+        componentRef.changeDetectorRef.detectChanges();
+    }
+    getFieldId(fieldName) {
+        // Match the ID format used by dynamically rendered input widgets
+        return `bbq-${this.formId}_${fieldName}-input`;
+    }
+    getFieldProp(field, prop) {
+        return field[prop];
+    }
+    onActionClick(actionType) {
+        if (actionType === 'submit') {
+            // Validate required fields
+            const hasErrors = this.validateForm();
+            if (hasErrors) {
+                this.showValidationMessage = true;
+                return;
+            }
+            this.showValidationMessage = false;
+            // Gather form data from the DOM (since widgets manage their own state)
+            this.gatherFormData();
+            if (this.widgetAction) {
+                this.widgetAction(this.formWidget.action, this.formData);
+            }
+        }
+        else {
+            // Cancel or other actions
+            if (this.widgetAction) {
+                this.widgetAction(this.formWidget.action, { actionType });
+            }
+        }
+    }
+    validateForm() {
+        for (const field of this.formWidget.fields || []) {
+            if (field.required) {
+                const value = this.formData[field.name];
+                if (value === undefined || value === null || value === '' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return true; // Has errors
+                }
+            }
+        }
+        return false; // No errors
+    }
+    gatherFormData() {
+        // Gather data from the rendered field widgets
+        // Since each widget component manages its own state via ngModel,
+        // we need to query the DOM to get the current values
+        const fields = this.formWidget.fields || [];
+        fields.forEach((field) => {
+            const fieldId = this.getFieldId(field.name);
+            const element = document.getElementById(fieldId);
+            if (element) {
+                if (element.type === 'checkbox') {
+                    this.formData[field.name] = element.checked;
+                }
+                else if (element.type === 'file') {
+                    this.formData[field.name] = element.files?.[0];
+                }
+                else if (element.tagName === 'SELECT' && element.multiple) {
+                    const select = element;
+                    this.formData[field.name] = Array.from(select.selectedOptions).map(opt => opt.value);
+                }
+                else {
+                    this.formData[field.name] = element.value;
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormWidgetComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FormWidgetComponent, isStandalone: true, selector: "bbq-form-widget", inputs: { widget: "widget" }, viewQueries: [{ propertyName: "fieldContainers", predicate: ["fieldContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    <div 
+      class="bbq-widget bbq-form" 
+      [attr.data-widget-id]="formId"
+      [attr.data-widget-type]="'form'"
+      [attr.data-action]="formWidget.action">
+      <fieldset class="bbq-form-fieldset">
+        <legend class="bbq-form-title">{{ formWidget.title }}</legend>
+
+        @for (field of formWidget.fields; track field.name) {
+          <div 
+            class="bbq-form-field"
+            [class.bbq-form-field-required]="field.required"
+            [attr.data-required]="field.required ? 'true' : null">
+            <label class="bbq-form-field-label" [attr.for]="getFieldId(field.name)">
+              {{ field.label }}
+              @if (field.required) {
+                <span class="bbq-form-required">*</span>
+              }
+            </label>
+
+            <div #fieldContainer class="bbq-form-field-widget"></div>
+
+            @if (getFieldProp(field, 'validationHint')) {
+              <span class="bbq-form-field-hint">{{ getFieldProp(field, 'validationHint') }}</span>
+            }
+          </div>
+        }
+
+        <div class="bbq-form-validation-message" [style.display]="showValidationMessage ? 'block' : 'none'">
+          Please fill in all required fields before submitting.
+        </div>
+
+        @if (formWidget.actions && formWidget.actions.length > 0) {
+          <div class="bbq-form-actions">
+            @for (action of formWidget.actions; track action.label) {
+              <button 
+                type="button" 
+                class="bbq-form-button"
+                [class.bbq-form-submit]="action.type === 'submit'"
+                [class.bbq-form-cancel]="action.type !== 'submit'"
+                [attr.data-action]="formWidget.action"
+                [attr.data-action-type]="action.type"
+                (click)="onActionClick(action.type)">
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+      </fieldset>
+    </div>
+  `, isInline: true, styles: [".bbq-form-field-widget{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbq-form-widget', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div 
+      class="bbq-widget bbq-form" 
+      [attr.data-widget-id]="formId"
+      [attr.data-widget-type]="'form'"
+      [attr.data-action]="formWidget.action">
+      <fieldset class="bbq-form-fieldset">
+        <legend class="bbq-form-title">{{ formWidget.title }}</legend>
+
+        @for (field of formWidget.fields; track field.name) {
+          <div 
+            class="bbq-form-field"
+            [class.bbq-form-field-required]="field.required"
+            [attr.data-required]="field.required ? 'true' : null">
+            <label class="bbq-form-field-label" [attr.for]="getFieldId(field.name)">
+              {{ field.label }}
+              @if (field.required) {
+                <span class="bbq-form-required">*</span>
+              }
+            </label>
+
+            <div #fieldContainer class="bbq-form-field-widget"></div>
+
+            @if (getFieldProp(field, 'validationHint')) {
+              <span class="bbq-form-field-hint">{{ getFieldProp(field, 'validationHint') }}</span>
+            }
+          </div>
+        }
+
+        <div class="bbq-form-validation-message" [style.display]="showValidationMessage ? 'block' : 'none'">
+          Please fill in all required fields before submitting.
+        </div>
+
+        @if (formWidget.actions && formWidget.actions.length > 0) {
+          <div class="bbq-form-actions">
+            @for (action of formWidget.actions; track action.label) {
+              <button 
+                type="button" 
+                class="bbq-form-button"
+                [class.bbq-form-submit]="action.type === 'submit'"
+                [class.bbq-form-cancel]="action.type !== 'submit'"
+                [attr.data-action]="formWidget.action"
+                [attr.data-action-type]="action.type"
+                (click)="onActionClick(action.type)">
+                {{ action.label }}
+              </button>
+            }
+          </div>
+        }
+      </fieldset>
+    </div>
+  `, styles: [".bbq-form-field-widget{display:contents}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.EnvironmentInjector }], propDecorators: { widget: [{
+                type: Input
+            }], fieldContainers: [{
+                type: ViewChildren,
+                args: ['fieldContainer', { read: ViewContainerRef }]
+            }] } });
+
+class ImageWidgetComponent {
+    widget;
+    widgetAction;
+    get imageWidget() {
+        return this.widget;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ImageWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ImageWidgetComponent, isStandalone: true, selector: "bbq-image-widget", inputs: { widget: "widget" }, ngImport: i0, template: `
+    <div 
+      class="bbq-widget bbq-image" 
+      [attr.data-widget-type]="'image'"
+      [attr.data-action]="imageWidget.action">
+      <img 
+        class="bbq-image-img" 
+        [src]="imageWidget.imageUrl" 
+        [alt]="imageWidget.alt || 'Image'"
+        [style.width]="imageWidget.width ? imageWidget.width + 'px' : 'auto'"
+        [style.height]="imageWidget.height ? imageWidget.height + 'px' : 'auto'"
+        loading="lazy" />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ImageWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbq-image-widget', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="bbq-widget bbq-image" 
+      [attr.data-widget-type]="'image'"
+      [attr.data-action]="imageWidget.action">
+      <img 
+        class="bbq-image-img" 
+        [src]="imageWidget.imageUrl" 
+        [alt]="imageWidget.alt || 'Image'"
+        [style.width]="imageWidget.width ? imageWidget.width + 'px' : 'auto'"
+        [style.height]="imageWidget.height ? imageWidget.height + 'px' : 'auto'"
+        loading="lazy" />
+    </div>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+class ImageCollectionWidgetComponent {
+    widget;
+    widgetAction;
+    get imageCollectionWidget() {
+        return this.widget;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ImageCollectionWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ImageCollectionWidgetComponent, isStandalone: true, selector: "bbq-imagecollection-widget", inputs: { widget: "widget" }, ngImport: i0, template: `
+    <div 
+      class="bbq-widget bbq-image-collection" 
+      [attr.data-widget-type]="'imagecollection'"
+      [attr.data-action]="imageCollectionWidget.action">
+      <div class="bbq-image-collection-grid">
+        @for (image of imageCollectionWidget.images; track image.imageUrl) {
+          <div class="bbq-image-collection-item">
+            <img 
+              class="bbq-image-collection-img" 
+              [src]="image.imageUrl" 
+              [alt]="image.alt || 'Image'"
+              [style.width]="image.width ? image.width + 'px' : 'auto'"
+              [style.height]="image.height ? image.height + 'px' : 'auto'"
+              loading="lazy" />
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ImageCollectionWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbq-imagecollection-widget', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="bbq-widget bbq-image-collection" 
+      [attr.data-widget-type]="'imagecollection'"
+      [attr.data-action]="imageCollectionWidget.action">
+      <div class="bbq-image-collection-grid">
+        @for (image of imageCollectionWidget.images; track image.imageUrl) {
+          <div class="bbq-image-collection-item">
+            <img 
+              class="bbq-image-collection-img" 
+              [src]="image.imageUrl" 
+              [alt]="image.alt || 'Image'"
+              [style.width]="image.width ? image.width + 'px' : 'auto'"
+              [style.height]="image.height ? image.height + 'px' : 'auto'"
+              loading="lazy" />
+          </div>
+        }
+      </div>
+    </div>
+  ` }]
+        }], propDecorators: { widget: [{
+                type: Input
+            }] } });
+
+/**
+ * Built-in widget components
+ * These components provide Angular implementations for all standard widget types
+ */
+
+/**
+ * Registry of all built-in widget components
+ * Maps widget type to Angular component class
+ */
+const BUILT_IN_WIDGET_COMPONENTS = {
+    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,
+};
+
+const WIDGET_EVENT_MANAGER_FACTORY = new InjectionToken('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) {}
+ * ```
+ */
+const SSR_WIDGET_RENDERER = new InjectionToken('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) {}
+ * ```
+ */
+const ANGULAR_WIDGET_RENDERER = new InjectionToken('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
+ */
+function widgetEventManagerFactoryProvider() {
+    return (actionHandler) => 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
+ */
+function ssrWidgetRendererFactory() {
+    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
+ */
+function angularWidgetRendererFactory() {
+    const renderer = new AngularWidgetRenderer();
+    renderer.registerBuiltInComponents(BUILT_IN_WIDGET_COMPONENTS);
+    return renderer;
+}
+
+/**
+ * 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);
+ * }
+ * ```
+ */
+class WidgetRegistryService {
+    customRenderers = new Map();
+    /**
+     * 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, factory) {
+        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, ctor) {
+        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) {
+        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, renderer) {
+        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) {
+        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) {
+        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) {
+        return this.customRenderers.delete(type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Angular component for rendering chat widgets
+ *
+ * This component handles rendering of chat widgets using the BbQ ChatWidgets library.
+ * It manages widget lifecycle, event handling, and cleanup.
+ *
+ * Supports three types of custom widget renderers:
+ * 1. HTML function renderers (return HTML strings)
+ * 2. Angular Component renderers (render as dynamic components)
+ * 3. Angular TemplateRef renderers (render as embedded views)
+ *
+ * @example
+ * ```typescript
+ * <bbq-widget-renderer
+ *   [widgets]="messageWidgets"
+ *   (widgetAction)="handleWidgetAction($event)">
+ * </bbq-widget-renderer>
+ * ```
+ */
+class WidgetRendererComponent {
+    renderer;
+    angularRenderer;
+    eventManagerFactory;
+    widgetRegistry;
+    injector;
+    environmentInjector;
+    /**
+     * Array of widgets to render
+     */
+    widgets;
+    /**
+     * Emits when a widget action is triggered
+     */
+    widgetAction = new EventEmitter();
+    containerRef;
+    widgetItems = [];
+    eventManager;
+    isViewInitialized = false;
+    dynamicComponents = [];
+    dynamicViews = [];
+    constructor(renderer, angularRenderer, eventManagerFactory, widgetRegistry, injector, environmentInjector) {
+        this.renderer = renderer;
+        this.angularRenderer = angularRenderer;
+        this.eventManagerFactory = eventManagerFactory;
+        this.widgetRegistry = widgetRegistry;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+    }
+    ngOnInit() {
+        // this.updateWidgetHtml();
+    }
+    ngOnChanges(changes) {
+        if (changes['widgets']) {
+            this.updateWidgetHtml();
+        }
+    }
+    ngAfterViewInit() {
+        this.updateWidgetHtml();
+        this.isViewInitialized = true;
+        this.setupEventHandlers();
+        // Render dynamic components/templates after view init
+        this.renderDynamicWidgets();
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    /**
+     * Base implementation for updating the rendered HTML for the current widgets.
+     *
+     * Subclasses may override this method to customize how widgets are rendered
+     * (for example, to inject additional markup or perform preprocessing).
+     *
+     * Since this is the base implementation, overriding implementations are not
+     * required to call `super.updateWidgetHtml()`.
+     */
+    updateWidgetHtml() {
+        if (!this.widgets || this.widgets.length === 0) {
+            this.widgetItems = [];
+            return;
+        }
+        this.widgetItems = this.widgets.map((widget, index) => {
+            const customRenderer = this.widgetRegistry.getRenderer(widget.type);
+            // Check template renderer first (most specific)
+            if (customRenderer && isTemplateRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: false,
+                };
+            }
+            // Check component renderer second
+            if (customRenderer && isComponentRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: false,
+                };
+            }
+            // Check HTML function renderer last (most general, matches any function)
+            if (customRenderer && isHtmlRenderer(customRenderer)) {
+                return {
+                    index,
+                    widget,
+                    isHtml: true,
+                    html: customRenderer(widget),
+                };
+            }
+            // Try to use AngularWidgetRenderer for built-in widgets
+            if (this.angularRenderer) {
+                const componentType = this.angularRenderer.getComponentType(widget);
+                if (componentType) {
+                    return {
+                        index,
+                        widget,
+                        isHtml: false,
+                    };
+                }
+            }
+            // Fallback: render using the SSR library renderer
+            return {
+                index,
+                widget,
+                isHtml: true,
+                html: this.renderer.renderWidget(widget),
+            };
+        });
+        // After view updates, reinitialize widgets only if view is already initialized
+        if (this.isViewInitialized) {
+            setTimeout(() => {
+                this.setupEventHandlers();
+                this.renderDynamicWidgets();
+            }, 0);
+        }
+    }
+    /**
+     * Render dynamic components and templates for custom widgets
+     */
+    renderDynamicWidgets() {
+        if (!this.containerRef?.nativeElement)
+            return;
+        // Use microtask to ensure Angular has completed change detection
+        Promise.resolve().then(() => {
+            if (!this.containerRef?.nativeElement)
+                return;
+            // Clean up existing dynamic components and views
+            this.cleanupDynamicWidgets();
+            const container = this.containerRef.nativeElement;
+            // Query all widget divs without the data-rendered filter
+            const dynamicWidgetDivs = Array.from(container.querySelectorAll('.bbq-widget'));
+            let dynamicIndex = 0;
+            this.widgetItems.forEach((item) => {
+                if (!item.isHtml) {
+                    const customRenderer = this.widgetRegistry.getRenderer(item.widget.type);
+                    const targetDiv = dynamicWidgetDivs[dynamicIndex];
+                    if (!targetDiv)
+                        return;
+                    // Clear the div content before rendering
+                    targetDiv.innerHTML = '';
+                    // Handle custom renderers first
+                    if (customRenderer) {
+                        if (isComponentRenderer(customRenderer)) {
+                            this.renderComponent(customRenderer, item.widget, targetDiv);
+                        }
+                        else if (isTemplateRenderer(customRenderer)) {
+                            this.renderTemplate(customRenderer, item.widget, targetDiv);
+                        }
+                    }
+                    else if (this.angularRenderer) {
+                        // Try to render using AngularWidgetRenderer for built-in widgets
+                        const componentType = this.angularRenderer.getComponentType(item.widget);
+                        if (componentType) {
+                            this.renderComponent(componentType, item.widget, targetDiv);
+                        }
+                    }
+                    dynamicIndex++;
+                }
+            });
+        });
+    }
+    /**
+     * Render an Angular component for a custom widget
+     *
+     * Note: This method safely assigns properties to component instances
+     * by checking for property existence at runtime. This approach is necessary
+     * because we cannot statically verify that all components implement
+     * the CustomWidgetComponent interface.
+     */
+    renderComponent(componentType, widget, targetElement) {
+        // Create the component using Angular's createComponent API
+        const componentRef = createComponent(componentType, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: this.injector,
+        });
+        // Safely set component inputs if they exist
+        const instance = componentRef.instance;
+        // Set widget property if it exists in the prototype chain
+        if (!instance['widget']) {
+            instance['widget'] = widget;
+        }
+        // Set widgetAction property if it exists in the prototype chain
+        if (!instance['widgetAction']) {
+            instance['widgetAction'] = (actionName, payload) => {
+                this.widgetAction.emit({ actionName, payload });
+            };
+        }
+        // Attach the component's host view to the target element
+        targetElement.appendChild(componentRef.location.nativeElement);
+        // Store reference for cleanup
+        this.dynamicComponents.push(componentRef);
+        // Trigger change detection (use optional chaining for safety)
+        componentRef.changeDetectorRef?.detectChanges();
+    }
+    /**
+     * Render an Angular template for a custom widget
+     */
+    renderTemplate(templateRef, widget, targetElement) {
+        const context = {
+            $implicit: widget,
+            widget: widget,
+            emitAction: (actionName, payload) => {
+                this.widgetAction.emit({ actionName, payload });
+            },
+        };
+        const viewRef = templateRef.createEmbeddedView(context);
+        // Attach the view's DOM nodes to the target element
+        viewRef.rootNodes.forEach((node) => {
+            targetElement.appendChild(node);
+        });
+        // Store reference for cleanup
+        this.dynamicViews.push(viewRef);
+        // Trigger change detection
+        viewRef.detectChanges();
+    }
+    /**
+     * Cleanup dynamic components and views
+     */
+    cleanupDynamicWidgets() {
+        this.dynamicComponents.forEach((componentRef) => {
+            componentRef.destroy();
+        });
+        this.dynamicComponents = [];
+        this.dynamicViews.forEach((viewRef) => {
+            viewRef.destroy();
+        });
+        this.dynamicViews = [];
+    }
+    setupEventHandlers() {
+        if (!this.containerRef?.nativeElement)
+            return;
+        // Cleanup old resources before setting up new ones
+        this.cleanup();
+        const container = this.containerRef.nativeElement;
+        // Create a custom action handler that emits events
+        const actionHandler = {
+            handle: async (action, payload) => {
+                this.widgetAction.emit({ actionName: action, payload });
+            },
+        };
+        // Use the injected factory to create an event manager with the component-specific action handler
+        this.eventManager = this.eventManagerFactory(actionHandler);
+        this.eventManager.attachHandlers(container);
+    }
+    handleClick(event) {
+        const target = event.target;
+        // Only trigger actions on non-form buttons and clickable elements (cards)
+        // Don't trigger on input elements or form buttons (let WidgetEventManager handle those)
+        const button = target.tagName === 'BUTTON' ? target : target.closest('button');
+        if (button && !button.closest('[data-widget-type="form"]')) {
+            const actionName = button.getAttribute('data-action');
+            if (actionName) {
+                try {
+                    const payloadStr = button.getAttribute('data-payload');
+                    const payload = payloadStr ? JSON.parse(payloadStr) : {};
+                    this.widgetAction.emit({ actionName, payload });
+                }
+                catch (err) {
+                    console.error('Failed to parse widget action payload:', err);
+                }
+            }
+        }
+    }
+    /**
+     * Cleanup all resources including event listeners.
+     */
+    cleanup() {
+        // Cleanup dynamic widgets first
+        this.cleanupDynamicWidgets();
+        // Cleanup event manager
+        this.eventManager = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRendererComponent, deps: [{ token: SSR_WIDGET_RENDERER }, { token: ANGULAR_WIDGET_RENDERER, optional: true }, { token: WIDGET_EVENT_MANAGER_FACTORY }, { token: WidgetRegistryService }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: WidgetRendererComponent, isStandalone: true, selector: "bbq-widget-renderer", inputs: { widgets: "widgets" }, outputs: { widgetAction: "widgetAction" }, providers: [
+            { provide: WIDGET_EVENT_MANAGER_FACTORY, useFactory: widgetEventManagerFactoryProvider },
+            { provide: SSR_WIDGET_RENDERER, useFactory: ssrWidgetRendererFactory },
+            { provide: ANGULAR_WIDGET_RENDERER, useFactory: angularWidgetRendererFactory },
+        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["widgetContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div #widgetContainer class="bbq-widgets-container" (click)="handleClick($event)">
+      @for (item of widgetItems; track item.index) {
+        @if (item.isHtml) {
+          <div class="bbq-widget" [innerHTML]="item.html"></div>
+        } @else {
+          <div class="bbq-widget" #dynamicWidget></div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".bbq-widgets-container{margin-top:.5rem}.bbq-widget{margin-bottom:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: WidgetRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bbq-widget-renderer', standalone: true, imports: [CommonModule], providers: [
+                        { provide: WIDGET_EVENT_MANAGER_FACTORY, useFactory: widgetEventManagerFactoryProvider },
+                        { provide: SSR_WIDGET_RENDERER, useFactory: ssrWidgetRendererFactory },
+                        { provide: ANGULAR_WIDGET_RENDERER, useFactory: angularWidgetRendererFactory },
+                    ], template: `
+    <div #widgetContainer class="bbq-widgets-container" (click)="handleClick($event)">
+      @for (item of widgetItems; track item.index) {
+        @if (item.isHtml) {
+          <div class="bbq-widget" [innerHTML]="item.html"></div>
+        } @else {
+          <div class="bbq-widget" #dynamicWidget></div>
+        }
+      }
+    </div>
+  `, styles: [".bbq-widgets-container{margin-top:.5rem}.bbq-widget{margin-bottom:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.SsrWidgetRenderer, decorators: [{
+                    type: Inject,
+                    args: [SSR_WIDGET_RENDERER]
+                }] }, { type: AngularWidgetRenderer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ANGULAR_WIDGET_RENDERER]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WIDGET_EVENT_MANAGER_FACTORY]
+                }] }, { type: WidgetRegistryService }, { type: i0.Injector }, { type: i0.EnvironmentInjector }], propDecorators: { widgets: [{
+                type: Input
+            }], widgetAction: [{
+                type: Output
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['widgetContainer', { static: false }]
+            }] } });
+
+/**
+ * Angular widget renderers
+ */
+
+/**
+ * @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
+// Version
+const VERSION = '1.0.4';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ANGULAR_WIDGET_RENDERER, AngularWidgetRenderer, BUILT_IN_WIDGET_COMPONENTS, ButtonWidgetComponent, CardWidgetComponent, DatePickerWidgetComponent, DropdownWidgetComponent, FileUploadWidgetComponent, FormWidgetComponent, ImageCollectionWidgetComponent, ImageWidgetComponent, InputWidgetComponent, MultiSelectWidgetComponent, ProgressBarWidgetComponent, SSR_WIDGET_RENDERER, SliderWidgetComponent, TextAreaWidgetComponent, ThemeSwitcherWidgetComponent, ToggleWidgetComponent, VERSION, WIDGET_EVENT_MANAGER_FACTORY, WidgetRegistryService, WidgetRendererComponent, angularWidgetRendererFactory, isComponentRenderer, isHtmlRenderer, isTemplateRenderer, ssrWidgetRendererFactory, widgetEventManagerFactoryProvider };
+//# sourceMappingURL=index.mjs.map