Integrate FormBuilder with BlnFormular to allow dynamic field rendering via templateResult property. Add Storybook example showcasing the integration.

Author: loren

src/components/BlnFormular.stories.ts

@@ -5,6 +5,7 @@ import './BlnFormular';
 import './BlnInput';
 import './BlnButton';
 import './BlnCheckBox';
+import { FormBuilder } from './FormBuilder';
 
 interface BlnFormularProps {
   ariaLabel: string;
@@ -432,3 +433,100 @@ export const RetroDesign: Story = {
     },
   },
 };
+
+export const WithFormBuilder: Story = {
+  render: (args) => {
+    const formularId = `formular-fb-${Math.random().toString(36).slice(2)}`;
+    
+    // Use setTimeout to ensure the DOM is ready before manipulating it
+    setTimeout(() => {
+      const formular = document.getElementById(formularId) as any;
+      if (!formular) return;
+      
+      // Create FormBuilder instance with fields
+      const fb = new FormBuilder()
+        .addBlnInput({ 
+          label: 'Vorname', 
+          name: 'firstname', 
+          placeholder: 'Ihr Vorname',
+          required: true 
+        })
+        .addBlnInput({ 
+          label: 'E-Mail', 
+          name: 'email', 
+          type: 'email', 
+          placeholder: 'name@example.com',
+          required: true 
+        })
+        .addBlnInput({ 
+          label: 'Alter', 
+          name: 'age', 
+          type: 'number', 
+          value: '25' 
+        })
+        .addBlnCheckbox({ 
+          name: 'newsletter', 
+          label: 'Newsletter', 
+          checked: true 
+        });
+      
+      // Pass FormBuilder fields to BlnFormular
+      formular.templateResult = fb.getFields();
+    }, 100);
+    
+    return html`
+      <bln-formular 
+        id=${formularId}
+        legend="FormBuilder Integration"
+        @bln-submit=${(e: any) => console.log('📋 FormBuilder Submit:', e.detail.data)}
+        @bln-clear=${() => console.log('🧹 FormBuilder Clear')} 
+        @bln-delete=${() => console.log('🗑️ FormBuilder Delete')}>
+        
+        <div slot="actions" class="flex gap-2">
+          <bln-button @click=${(e: Event) => (e.currentTarget as HTMLElement).closest('bln-formular')?.submit?.()}>Speichern</bln-button>
+          <bln-button variant="outline" @click=${(e: any) => (e.currentTarget as any).closest('bln-formular')?.delete?.()}>Löschen</bln-button>
+          <bln-button variant="ghost" @click=${(e: any) => (e.currentTarget as any).closest('bln-formular')?.clear?.()}>Leeren</bln-button>
+        </div>
+      </bln-formular>
+      <div class="mt-4 p-4 bg-gray-50 rounded">
+        <h4 class="font-semibold mb-2">FormBuilder Integration Code:</h4>
+        <pre class="text-sm bg-gray-800 text-green-400 p-3 rounded overflow-x-auto"><code>import { FormBuilder } from './FormBuilder';
+
+// Create FormBuilder with fields
+const fb = new FormBuilder()
+  .addBlnInput({ label: 'Name', name: 'name', required: true })
+  .addBlnCheckbox({ name: 'newsletter', checked: true })
+  .addBlnSelect({ name: 'city', options: [...] });
+
+// Get formular element
+const formular = document.getElementById('myForm');
+
+// Pass FormBuilder fields to BlnFormular
+formular.templateResult = fb.getFields();</code></pre>
+      </div>
+    `;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**FormBuilder Integration mit BlnFormular**
+
+Dieses Beispiel zeigt, wie Sie FormBuilder-Felder direkt an ein BlnFormular übergeben können:
+
+**Integration:**
+1. **FormBuilder erstellen:** \`new FormBuilder()\` mit gewünschten Feldern
+2. **Felder übergeben:** \`formular.templateResult = fb.getFields()\`
+3. **Automatische Sammlung:** BlnFormular sammelt alle Daten beim Submit
+
+**Unterstützte FormBuilder-Methoden:**
+- \`addBlnInput()\` - Text, Email, Password, Number inputs
+- \`addBlnCheckbox()\` - Checkboxen mit boolean values
+- \`addBlnSelect()\` - Dropdown-Auswahlen
+
+Die FormBuilder-Felder werden automatisch im BlnFormular gerendert und bei submit() in den Event-Daten erfasst. Öffnen Sie die Browser-Konsole, um die Daten zu sehen.
+        `.trim(),
+      },
+    },
+  },
+};

src/components/BlnFormular.ts

@@ -1,5 +1,5 @@
 import {customElement, property, queryAssignedElements} from 'lit/decorators.js';
-import {html, nothing} from 'lit';
+import {html, nothing, TemplateResult} from 'lit';
 import TailwindElement from '../app/TailwindElement';
 
 import './BlnInput';
@@ -28,6 +28,9 @@ export class BlnFormular extends TailwindElement {
   /** Enable retro design styling. */
   @property({type: Boolean, reflect: true, attribute: 'retro-design'}) retroDesign: boolean = false;
 
+  /** Template results from FormBuilder - only settable as property, not attribute */
+  @property({attribute: false}) templateResult: TemplateResult[] = [];
+
   // Grab slotted elements we can read values from
   @queryAssignedElements({flatten: true}) private _slotted!: Element[];
   @queryAssignedElements({slot: 'actions', flatten: true}) private _actions!: Element[];
@@ -161,6 +164,7 @@ export class BlnFormular extends TailwindElement {
         )}">${this.legend}</h2>` : nothing}
         <div class="contents">
           <slot></slot>
+          ${this.templateResult.length > 0 ? html`${this.templateResult}` : nothing}
         </div>
         <div class="${this.cn(
           ['mt-4 pt-4 flex flex-wrap gap-2 justify-end'],