Add external validation support to BlnAutocompleteSelect and enhance FormBuilder with validator support for autocomplete select fields

loren · loren · commit 0c0f0957b319 · 2025-10-30T11:13:49.000+01:00
diff --git a/src/components/BlnAutocompleteSelect.ts b/src/components/BlnAutocompleteSelect.ts
@@ -27,6 +27,9 @@ export interface BlnAutocompleteSelectProps {
     minSearchChars: number;
     noResultsText: string;
     loadingText: string;
+    /** Optional externe Validierungsfunktion. Nur als Property (nicht als Attribut) setzbar. */
+    validator?: (value: string | string[], el: BlnAutocompleteSelect) => boolean | { valid: boolean; message?: string };
+
 }
 
 @customElement("bln-autocomplete-select")
@@ -63,6 +66,9 @@ export class BlnAutocompleteSelect extends TailwindElement {
 
     // Options (programmatisch gesetzt)
     @property({attribute: false}) options: BlnAutocompleteSelectProps["options"] = [];
+    /** Externe Validierungsfunktion: nur als Property setzbar (attribute: false). */
+    @property({attribute: false}) validator?: BlnAutocompleteSelectProps['validator'];
+
 
     // Internal state
     @state() private _searchTerm = "";
@@ -81,8 +87,40 @@ export class BlnAutocompleteSelect extends TailwindElement {
         if (changed.has('options') || changed.has('_searchTerm')) {
             this.updateFilteredOptions();
         }
+        if (changed.has('value')) {
+            // When value changes programmatically, also re-run validation if provided
+            this.runValidation();
+        }
     }
 
+    private runValidation() {
+        if (!this.validator) return;
+
+        try {
+            const result = this.validator(this.value, this);
+            if (typeof result === 'boolean') {
+                this.isValid = result;
+            } else if (result && typeof result === 'object') {
+                this.isValid = result.valid;
+                // Optional: Fehlermeldung im hint oder error anzeigen
+                // if (result.message) { ... }
+            }
+            this.dispatchEvent(new CustomEvent('validitychange', {
+                detail: {
+                    valid: this.isValid,
+                    value: this.value
+                },
+                bubbles: true,
+                composed: true
+            }));
+        } catch (e) {
+            console.error('Validation error:', e);
+            this.isValid = false;
+        }
+    }
+
+
+
     private updateFilteredOptions() {
         if (!this._searchTerm || this._searchTerm.length < this.minSearchChars) {
             this._filteredOptions = [...this.options];
@@ -165,10 +203,13 @@ export class BlnAutocompleteSelect extends TailwindElement {
             this.closeDropdown();
         }
 
+        // Run external validation if provided
+        this.runValidation();
         this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
         this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
     }
 
+
     private closeDropdown() {
         this._isOpen = false;
         this._focusedIndex = -1;
@@ -216,10 +257,13 @@ export class BlnAutocompleteSelect extends TailwindElement {
         e.stopPropagation();
         if (Array.isArray(this.value)) {
             this.value = this.value.filter(v => v !== optionValue);
+            // Run external validation if provided
+            this.runValidation();
             this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
         }
     }
 
+
     protected render(): TemplateResult {
         const describedBy = [
             this.ariaDescribedby || "",
diff --git a/src/components/FormBuilder.ts b/src/components/FormBuilder.ts
@@ -318,36 +318,37 @@ class FormBuilder {
     return this;
   }
 
-  // Convenience: add a BlnAutocompleteSelect
-  addBlnAutocompleteSelect(props: Partial<BlnAutocompleteSelectProps> = {}) {
-    const tpl = html`<bln-autocomplete-select
-      .label=${props.label ?? ''}
-      .cornerHint=${props.cornerHint ?? ''}
-      .hint=${props.hint ?? ''}
-      .name=${props.name ?? ''}
-      .placeholder=${props.placeholder ?? ''}
-      .searchPlaceholder=${props.searchPlaceholder ?? 'Suchen...'}
-      .value=${props.value ?? ''}
-      .disabled=${props.disabled ?? false}
-      .required=${props.required ?? false}
-      .multiple=${props.multiple ?? false}
-      .size=${props.size ?? 'medium'}
-      .class=${props.class ?? ''}
-      .isValid=${props.isValid ?? undefined}
-      .retroDesign=${props.retroDesign ?? false}
-      .minSearchChars=${props.minSearchChars ?? 1}
-      .noResultsText=${props.noResultsText ?? 'Keine Ergebnisse gefunden'}
-      .loadingText=${props.loadingText ?? 'Laden...'}
-      .options=${props.options ?? []}
-      .ariaLabel=${props.ariaLabel ?? ''}
-      .ariaLabelledby=${props.ariaLabelledby ?? ''}
-      .ariaDescribedby=${props.ariaDescribedby ?? ''}
-    ></bln-autocomplete-select>`;
-    this.fields.push(tpl);
-    return this;
-  }
+    addBlnAutocompleteSelect(props: Partial<BlnAutocompleteSelectProps> = {}) {
+        const tpl = html`<bln-autocomplete-select
+                .label=${props.label ?? ''}
+                .cornerHint=${props.cornerHint ?? ''}
+                .hint=${props.hint ?? ''}
+                .name=${props.name ?? ''}
+                .placeholder=${props.placeholder ?? ''}
+                .searchPlaceholder=${props.searchPlaceholder ?? 'Suchen...'}
+                .value=${props.value ?? ''}
+                .disabled=${props.disabled ?? false}
+                .required=${props.required ?? false}
+                .multiple=${props.multiple ?? false}
+                .size=${props.size ?? 'medium'}
+                .class=${props.class ?? ''}
+                .isValid=${props.isValid ?? undefined}
+                .retroDesign=${props.retroDesign ?? false}
+                .minSearchChars=${props.minSearchChars ?? 1}
+                .noResultsText=${props.noResultsText ?? 'Keine Ergebnisse gefunden'}
+                .loadingText=${props.loadingText ?? 'Laden...'}
+                .options=${props.options ?? []}
+                .ariaLabel=${props.ariaLabel ?? ''}
+                .ariaLabelledby=${props.ariaLabelledby ?? ''}
+                .ariaDescribedby=${props.ariaDescribedby ?? ''}
+                .validator=${props.validator ?? undefined}
+        ></bln-autocomplete-select>`;
+        this.fields.push(tpl);
+        return this;
+    }
+
 
-  // Convenience: add a BlnButton
+    // Convenience: add a BlnButton
   addBlnButton(label: string, props: Partial<BlnButtonProps> = {}, onClick?: (e: MouseEvent) => void) {
     const tpl = html`<bln-button
       .variant=${(props.variant as any) ?? 'solid'}
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
@@ -2297,6 +2297,45 @@ export const RightArrow = () => <svg
         [zum Inhaltsverzeichnis](#start)
     </div>
 </div>
+<div className="sb-container">
+    <div className='sb-section-title'>
+        <a name="blnModalDialog"></a>
+        # Ein vollständig zugänglicher modaler Dialog mit konfigurierbaren Eigenschaften.
+
+        **Hauptfunktionen:**
+        - Konfigurierbare Überschrift, Text, Eingabefeld und Buttons
+        - Event-System für Rückgabewerte und Benutzerinteraktionen
+        - Vollständige Barrierefreiheit (Fokusmanagement, Tastaturnavigation, ARIA)
+        - Modal-Hintergrund mit konfigurierbarem Verhalten
+        - Validierung für Eingabefelder
+
+        **Accessibility Features:**
+        - Fokus-Trap: Fokus bleibt innerhalb des Modals
+        - Tastaturnavigation: Escape, Tab, Enter
+        - ARIA-Attribute: role="dialog", aria-modal="true"
+        - Automatische Fokuswiederherstellung beim Schließen
+        - Screen Reader Unterstützung
+
+        **Event-System:**
+        - `open`: Modal wird geöffnet
+        - `close`: Modal wird geschlossen
+        - `button-click`: Button wurde geklickt (mit buttonId und inputValue)
+        - `input-change`: Eingabefeld wurde geändert
+
+        **Tastaturnavigation:**
+        - **Escape**: Modal schließen (wenn aktiviert)
+        - **Tab/Shift+Tab**: Zwischen fokussierbaren Elementen wechseln
+        - **Enter**: Primary Button aktivieren (wenn nicht im Eingabefeld)
+
+
+        Beispiel:
+
+
+    </div>
+
+
+</div>
+
 <div className="sb-container">
     <div className='sb-section-title'>
         <a name="formBuilder"></a>
