@suntelecoms/ngx-dynamic-form 1.1.0

package/fesm2022/suntelecoms-ngx-dynamic-form.mjs

@@ -0,0 +1,1100 @@
+import * as i0 from '@angular/core';
+import { Injectable, Input, Component, EventEmitter, Output, inject, signal, computed, InjectionToken, makeEnvironmentProviders } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormControl, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatFormField, MatLabel, MatError, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink, ActivatedRoute } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { tap, of, map } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+class DynamicFormBuilderService {
+    /**
+     * Build a FormGroup from an array of DynamicFormField definitions.
+     */
+    buildFormGroup(fields) {
+        const group = {};
+        for (const field of fields) {
+            if (field.type === 'divider' || field.type === 'heading')
+                continue;
+            const validators = this.buildValidators(field.validation);
+            const control = new FormControl({
+                value: field.defaultValue ?? null,
+                disabled: field.disabled ?? false,
+            }, validators);
+            group[field.key] = control;
+        }
+        return new FormGroup(group);
+    }
+    /**
+     * Convert FieldValidation config into Angular ValidatorFn[].
+     */
+    buildValidators(validation) {
+        if (!validation)
+            return [];
+        const validators = [];
+        if (validation.required)
+            validators.push(Validators.required);
+        if (validation.email)
+            validators.push(Validators.email);
+        if (validation.minLength != null)
+            validators.push(Validators.minLength(validation.minLength));
+        if (validation.maxLength != null)
+            validators.push(Validators.maxLength(validation.maxLength));
+        if (validation.min != null)
+            validators.push(Validators.min(validation.min));
+        if (validation.max != null)
+            validators.push(Validators.max(validation.max));
+        if (validation.pattern)
+            validators.push(Validators.pattern(validation.pattern));
+        if (validation.custom) {
+            const customFn = validation.custom;
+            validators.push((control) => {
+                const msg = customFn(control.value);
+                return msg ? { custom: msg } : null;
+            });
+        }
+        return validators;
+    }
+    /**
+     * Get the human-readable error message for a form control.
+     */
+    getErrorMessage(control, validation) {
+        if (!control.errors || !control.touched)
+            return null;
+        const msgs = validation?.messages ?? {};
+        if (control.errors['required'])
+            return msgs['required'] ?? 'Ce champ est requis.';
+        if (control.errors['email'])
+            return msgs['email'] ?? 'Adresse e-mail invalide.';
+        if (control.errors['minlength'])
+            return (msgs['minLength'] ??
+                `Minimum ${control.errors['minlength'].requiredLength} caractères.`);
+        if (control.errors['maxlength'])
+            return (msgs['maxLength'] ??
+                `Maximum ${control.errors['maxlength'].requiredLength} caractères.`);
+        if (control.errors['min'])
+            return msgs['min'] ?? `Valeur minimum : ${control.errors['min'].min}.`;
+        if (control.errors['max'])
+            return msgs['max'] ?? `Valeur maximum : ${control.errors['max'].max}.`;
+        if (control.errors['pattern'])
+            return msgs['pattern'] ?? 'Format invalide.';
+        if (control.errors['custom'])
+            return control.errors['custom'];
+        return 'Valeur invalide.';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormBuilderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormBuilderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DynamicFieldComponent {
+    constructor(builder) {
+        this.builder = builder;
+        this.resolvedOptions = [];
+    }
+    ngOnInit() {
+        if (this.hasOptions) {
+            this.resolveOptions();
+        }
+    }
+    resolveOptions() {
+        const opts = this.field.options;
+        if (!opts)
+            return;
+        if (Array.isArray(opts)) {
+            this.resolvedOptions = opts.map((o) => typeof o === 'string' ? { label: o, value: o } : o);
+        }
+    }
+    get formControl() {
+        return this.form.get(this.field.key);
+    }
+    get isInputField() {
+        return this.field.type !== 'divider' && this.field.type !== 'heading';
+    }
+    get hasOptions() {
+        return ['select', 'multiselect', 'radio'].includes(this.field.type);
+    }
+    get hasError() {
+        const ctrl = this.formControl;
+        return !!(ctrl && ctrl.invalid && ctrl.touched);
+    }
+    get errorMessage() {
+        const ctrl = this.formControl;
+        if (!ctrl)
+            return null;
+        return this.builder.getErrorMessage(ctrl, this.field.validation);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldComponent, deps: [{ token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DynamicFieldComponent, isStandalone: true, selector: "ngx-dynamic-field", inputs: { field: "field", form: "form" }, ngImport: i0, template: `
+    @if (field.type === 'divider') {
+      <hr class="ngx-divider" />
+    }
+
+    @if (field.type === 'heading') {
+      @switch (field.level || 2) {
+        @case (1) { <h1 class="ngx-heading">{{ field.text || field.label }}</h1> }
+        @case (2) { <h2 class="ngx-heading">{{ field.text || field.label }}</h2> }
+        @case (3) { <h3 class="ngx-heading">{{ field.text || field.label }}</h3> }
+        @case (4) { <h4 class="ngx-heading">{{ field.text || field.label }}</h4> }
+        @case (5) { <h5 class="ngx-heading">{{ field.text || field.label }}</h5> }
+        @case (6) { <h6 class="ngx-heading">{{ field.text || field.label }}</h6> }
+        @default   { <h2 class="ngx-heading">{{ field.text || field.label }}</h2> }
+      }
+    }
+
+    @if (isInputField) {
+      @if (field.type === 'checkbox') {
+        <div class="ngx-checkbox-wrapper">
+          <mat-checkbox color="primary" [formControl]="formControl">
+            {{ field.placeholder || field.label }}
+          </mat-checkbox>
+          @if (hasError) {
+            <small class="ngx-mat-standalone-error">{{ errorMessage }}</small>
+          }
+        </div>
+
+      } @else if (field.type === 'radio') {
+        <div class="ngx-radio-wrapper">
+          @if (field.label) {
+            <label class="ngx-radio-label">{{ field.label }}</label>
+          }
+          <mat-radio-group [formControl]="formControl" class="ngx-radio-group">
+            @for (opt of resolvedOptions; track opt.value) {
+              <mat-radio-button [value]="opt.value" color="primary">
+                {{ opt.label }}
+              </mat-radio-button>
+            }
+          </mat-radio-group>
+          @if (hasError) {
+            <small class="ngx-mat-standalone-error">{{ errorMessage }}</small>
+          }
+        </div>
+
+      } @else if (field.type === 'textarea') {
+        <mat-form-field appearance="outline" class="ngx-mat-field">
+          @if (field.label) { <mat-label>{{ field.label }}</mat-label> }
+          @if (field.icon) { <mat-icon matPrefix>{{ field.icon }}</mat-icon> }
+          <textarea
+            matInput
+            [id]="field.key"
+            [formControl]="formControl"
+            [placeholder]="field.placeholder || ''"
+            [rows]="field.rows || 3"
+            [readonly]="field.readonly || false"
+          ></textarea>
+          @if (field.iconSuffix) { <mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon> }
+          @if (field.hint) { <mat-hint>{{ field.hint }}</mat-hint> }
+          <mat-error>{{ errorMessage }}</mat-error>
+        </mat-form-field>
+
+      } @else if (field.type === 'select' || field.type === 'multiselect') {
+        <mat-form-field appearance="outline" class="ngx-mat-field">
+          @if (field.label) { <mat-label>{{ field.label }}</mat-label> }
+          @if (field.icon) { <mat-icon matPrefix>{{ field.icon }}</mat-icon> }
+          <mat-select [formControl]="formControl" [multiple]="field.type === 'multiselect'">
+            @if (field.placeholder) {
+              <mat-option value="">{{ field.placeholder }}</mat-option>
+            }
+            @for (opt of resolvedOptions; track opt.value) {
+              <mat-option [value]="opt.value" [disabled]="opt.disabled || false">
+                {{ opt.label }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (field.iconSuffix) { <mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon> }
+          @if (field.hint) { <mat-hint>{{ field.hint }}</mat-hint> }
+          <mat-error>{{ errorMessage }}</mat-error>
+        </mat-form-field>
+
+      } @else if (field.type === 'file') {
+        <div class="ngx-file-wrapper">
+          @if (field.label) {
+            <label class="ngx-file-label">
+              {{ field.label }}
+              @if (field.validation?.required) {
+                <span class="ngx-required" aria-hidden="true"> *</span>
+              }
+            </label>
+          }
+          <input
+            type="file"
+            [id]="field.key"
+            [accept]="field.accept || '*'"
+            [multiple]="field.multiple || false"
+            class="ngx-file-input"
+          />
+          @if (field.hint) { <small class="ngx-hint">{{ field.hint }}</small> }
+        </div>
+
+      } @else if (field.type === 'hidden') {
+        <input type="hidden" [formControl]="formControl" />
+
+      } @else {
+        <mat-form-field appearance="outline" class="ngx-mat-field">
+          @if (field.label) { <mat-label>{{ field.label }}</mat-label> }
+          @if (field.icon) { <mat-icon matPrefix>{{ field.icon }}</mat-icon> }
+          <input
+            matInput
+            [id]="field.key"
+            [type]="field.type"
+            [formControl]="formControl"
+            [placeholder]="field.placeholder || ''"
+            [readonly]="field.readonly || false"
+            [attr.min]="field.validation?.min"
+            [attr.max]="field.validation?.max"
+            [attr.minlength]="field.validation?.minLength"
+            [attr.maxlength]="field.validation?.maxLength"
+          />
+          @if (field.iconSuffix) { <mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon> }
+          @if (field.hint) { <mat-hint>{{ field.hint }}</mat-hint> }
+          <mat-error>{{ errorMessage }}</mat-error>
+        </mat-form-field>
+      }
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;width:100%}.ngx-mat-field{width:100%}.ngx-radio-wrapper{display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0 .75rem}.ngx-radio-label{font-size:.875rem;font-weight:500;color:#0009}.ngx-radio-group{display:flex;flex-wrap:wrap;gap:.75rem}.ngx-checkbox-wrapper{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0}.ngx-file-wrapper{display:flex;flex-direction:column;gap:.375rem;padding-bottom:.75rem}.ngx-file-label{font-size:.875rem;font-weight:500;color:#000000de}.ngx-file-input{border:1px solid rgba(0,0,0,.23);border-radius:4px;padding:.625rem .75rem;font-size:.875rem;cursor:pointer;background:transparent;transition:border-color .15s}.ngx-file-input:hover{border-color:#000000de}.ngx-mat-standalone-error{font-size:.75rem;color:var(--mat-sys-error, #b00020)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dynamic-field', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatFormField, MatLabel, MatError, MatHint, MatPrefix, MatSuffix,
+                        MatInput,
+                        MatSelect, MatOption,
+                        MatRadioGroup, MatRadioButton,
+                        MatCheckbox,
+                        MatIcon,
+                    ], template: `
+    @if (field.type === 'divider') {
+      <hr class="ngx-divider" />
+    }
+
+    @if (field.type === 'heading') {
+      @switch (field.level || 2) {
+        @case (1) { <h1 class="ngx-heading">{{ field.text || field.label }}</h1> }
+        @case (2) { <h2 class="ngx-heading">{{ field.text || field.label }}</h2> }
+        @case (3) { <h3 class="ngx-heading">{{ field.text || field.label }}</h3> }
+        @case (4) { <h4 class="ngx-heading">{{ field.text || field.label }}</h4> }
+        @case (5) { <h5 class="ngx-heading">{{ field.text || field.label }}</h5> }
+        @case (6) { <h6 class="ngx-heading">{{ field.text || field.label }}</h6> }
+        @default   { <h2 class="ngx-heading">{{ field.text || field.label }}</h2> }
+      }
+    }
+
+    @if (isInputField) {
+      @if (field.type === 'checkbox') {
+        <div class="ngx-checkbox-wrapper">
+          <mat-checkbox color="primary" [formControl]="formControl">
+            {{ field.placeholder || field.label }}
+          </mat-checkbox>
+          @if (hasError) {
+            <small class="ngx-mat-standalone-error">{{ errorMessage }}</small>
+          }
+        </div>
+
+      } @else if (field.type === 'radio') {
+        <div class="ngx-radio-wrapper">
+          @if (field.label) {
+            <label class="ngx-radio-label">{{ field.label }}</label>
+          }
+          <mat-radio-group [formControl]="formControl" class="ngx-radio-group">
+            @for (opt of resolvedOptions; track opt.value) {
+              <mat-radio-button [value]="opt.value" color="primary">
+                {{ opt.label }}
+              </mat-radio-button>
+            }
+          </mat-radio-group>
+          @if (hasError) {
+            <small class="ngx-mat-standalone-error">{{ errorMessage }}</small>
+          }
+        </div>
+
+      } @else if (field.type === 'textarea') {
+        <mat-form-field appearance="outline" class="ngx-mat-field">
+          @if (field.label) { <mat-label>{{ field.label }}</mat-label> }
+          @if (field.icon) { <mat-icon matPrefix>{{ field.icon }}</mat-icon> }
+          <textarea
+            matInput
+            [id]="field.key"
+            [formControl]="formControl"
+            [placeholder]="field.placeholder || ''"
+            [rows]="field.rows || 3"
+            [readonly]="field.readonly || false"
+          ></textarea>
+          @if (field.iconSuffix) { <mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon> }
+          @if (field.hint) { <mat-hint>{{ field.hint }}</mat-hint> }
+          <mat-error>{{ errorMessage }}</mat-error>
+        </mat-form-field>
+
+      } @else if (field.type === 'select' || field.type === 'multiselect') {
+        <mat-form-field appearance="outline" class="ngx-mat-field">
+          @if (field.label) { <mat-label>{{ field.label }}</mat-label> }
+          @if (field.icon) { <mat-icon matPrefix>{{ field.icon }}</mat-icon> }
+          <mat-select [formControl]="formControl" [multiple]="field.type === 'multiselect'">
+            @if (field.placeholder) {
+              <mat-option value="">{{ field.placeholder }}</mat-option>
+            }
+            @for (opt of resolvedOptions; track opt.value) {
+              <mat-option [value]="opt.value" [disabled]="opt.disabled || false">
+                {{ opt.label }}
+              </mat-option>
+            }
+          </mat-select>
+          @if (field.iconSuffix) { <mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon> }
+          @if (field.hint) { <mat-hint>{{ field.hint }}</mat-hint> }
+          <mat-error>{{ errorMessage }}</mat-error>
+        </mat-form-field>
+
+      } @else if (field.type === 'file') {
+        <div class="ngx-file-wrapper">
+          @if (field.label) {
+            <label class="ngx-file-label">
+              {{ field.label }}
+              @if (field.validation?.required) {
+                <span class="ngx-required" aria-hidden="true"> *</span>
+              }
+            </label>
+          }
+          <input
+            type="file"
+            [id]="field.key"
+            [accept]="field.accept || '*'"
+            [multiple]="field.multiple || false"
+            class="ngx-file-input"
+          />
+          @if (field.hint) { <small class="ngx-hint">{{ field.hint }}</small> }
+        </div>
+
+      } @else if (field.type === 'hidden') {
+        <input type="hidden" [formControl]="formControl" />
+
+      } @else {
+        <mat-form-field appearance="outline" class="ngx-mat-field">
+          @if (field.label) { <mat-label>{{ field.label }}</mat-label> }
+          @if (field.icon) { <mat-icon matPrefix>{{ field.icon }}</mat-icon> }
+          <input
+            matInput
+            [id]="field.key"
+            [type]="field.type"
+            [formControl]="formControl"
+            [placeholder]="field.placeholder || ''"
+            [readonly]="field.readonly || false"
+            [attr.min]="field.validation?.min"
+            [attr.max]="field.validation?.max"
+            [attr.minlength]="field.validation?.minLength"
+            [attr.maxlength]="field.validation?.maxLength"
+          />
+          @if (field.iconSuffix) { <mat-icon matSuffix>{{ field.iconSuffix }}</mat-icon> }
+          @if (field.hint) { <mat-hint>{{ field.hint }}</mat-hint> }
+          <mat-error>{{ errorMessage }}</mat-error>
+        </mat-form-field>
+      }
+    }
+  `, styles: [":host{display:flex;flex-direction:column;width:100%}.ngx-mat-field{width:100%}.ngx-radio-wrapper{display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0 .75rem}.ngx-radio-label{font-size:.875rem;font-weight:500;color:#0009}.ngx-radio-group{display:flex;flex-wrap:wrap;gap:.75rem}.ngx-checkbox-wrapper{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0}.ngx-file-wrapper{display:flex;flex-direction:column;gap:.375rem;padding-bottom:.75rem}.ngx-file-label{font-size:.875rem;font-weight:500;color:#000000de}.ngx-file-input{border:1px solid rgba(0,0,0,.23);border-radius:4px;padding:.625rem .75rem;font-size:.875rem;cursor:pointer;background:transparent;transition:border-color .15s}.ngx-file-input:hover{border-color:#000000de}.ngx-mat-standalone-error{font-size:.75rem;color:var(--mat-sys-error, #b00020)}\n"] }]
+        }], ctorParameters: () => [{ type: DynamicFormBuilderService }], propDecorators: { field: [{
+                type: Input,
+                args: [{ required: true }]
+            }], form: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ConditionEvaluatorService {
+    /**
+     * Evaluate whether a field should be visible based on its showWhen condition(s).
+     */
+    isVisible(field, form) {
+        if (field.hidden)
+            return false;
+        if (!field.showWhen)
+            return true;
+        const conditions = Array.isArray(field.showWhen)
+            ? field.showWhen
+            : [field.showWhen];
+        // ALL conditions must be true (AND logic)
+        return conditions.every((condition) => this.evaluate(condition, form));
+    }
+    evaluate(condition, form) {
+        const control = form.get(condition.field);
+        const value = control?.value;
+        switch (condition.operator) {
+            case 'equals':
+                return value === condition.value;
+            case 'notEquals':
+                return value !== condition.value;
+            case 'contains':
+                return Array.isArray(value)
+                    ? value.includes(condition.value)
+                    : String(value ?? '').includes(String(condition.value));
+            case 'greaterThan':
+                return Number(value) > Number(condition.value);
+            case 'lessThan':
+                return Number(value) < Number(condition.value);
+            case 'exists':
+                return value !== null && value !== undefined && value !== '';
+            case 'notExists':
+                return value === null || value === undefined || value === '';
+            default:
+                return true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConditionEvaluatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConditionEvaluatorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ConditionEvaluatorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DynamicFormComponent {
+    constructor(builder, conditionEvaluator, cdr) {
+        this.builder = builder;
+        this.conditionEvaluator = conditionEvaluator;
+        this.cdr = cdr;
+        /** Emitted on valid form submit */
+        this.formSubmit = new EventEmitter();
+        /** Emitted on every value change */
+        this.formChange = new EventEmitter();
+        /** Emitted when form is reset */
+        this.formReset = new EventEmitter();
+    }
+    ngOnInit() {
+        this.buildForm();
+    }
+    ngOnChanges(changes) {
+        // Rebuild form if config changes (e.g. dynamic schema loading)
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.buildForm();
+        }
+        // Patch values if initialValues is updated
+        if (changes['initialValues'] && this.form) {
+            this.form.patchValue(this.initialValues ?? {});
+        }
+    }
+    buildForm() {
+        this.form = this.builder.buildFormGroup(this.config.fields);
+        if (this.initialValues) {
+            this.form.patchValue(this.initialValues);
+        }
+        this.form.valueChanges.subscribe((val) => {
+            this.formChange.emit(val);
+            this.cdr.markForCheck();
+        });
+    }
+    isVisible(field) {
+        return this.conditionEvaluator.isVisible(field, this.form);
+    }
+    onSubmit() {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.formSubmit.emit({
+            value: this.form.value,
+            rawValue: this.form.getRawValue(), // includes disabled fields
+        });
+    }
+    onReset() {
+        this.form.reset();
+        this.formReset.emit();
+    }
+    /** Public API: access the FormGroup from the parent */
+    getForm() {
+        return this.form;
+    }
+    /** Public API: patch values from outside */
+    patchValues(values) {
+        this.form.patchValue(values);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormBuilderService }, { token: ConditionEvaluatorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset" }, usesOnChanges: true, ngImport: i0, template: `
+    <form
+      [formGroup]="form"
+      (ngSubmit)="onSubmit()"
+      [class]="'ngx-form ngx-form--' + (config.layout || 'vertical') + ' ' + (config.cssClass || '')"
+      novalidate
+    >
+      <div class="ngx-form-grid">
+        @for (field of config.fields; track field.key) {
+          @if (isVisible(field)) {
+            <div [style.grid-column]="'span ' + (field.col ?? 12)">
+              <ngx-dynamic-field [field]="field" [form]="form" />
+            </div>
+          }
+        }
+      </div>
+
+      @if (config.debug) {
+        <pre class="ngx-debug">{{ form.value | json }}</pre>
+      }
+
+      <div class="ngx-form-actions">
+        @if (config.showReset) {
+          <button type="button" mat-stroked-button (click)="onReset()">
+            {{ config.resetLabel || 'Réinitialiser' }}
+          </button>
+        }
+        <button
+          type="submit"
+          mat-flat-button
+          color="primary"
+          [disabled]="form.invalid && form.touched"
+        >
+          {{ config.submitLabel || 'Envoyer' }}
+        </button>
+      </div>
+    </form>
+  `, isInline: true, dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "form"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dynamic-form', standalone: true, imports: [JsonPipe, ReactiveFormsModule, DynamicFieldComponent, MatButton], template: `
+    <form
+      [formGroup]="form"
+      (ngSubmit)="onSubmit()"
+      [class]="'ngx-form ngx-form--' + (config.layout || 'vertical') + ' ' + (config.cssClass || '')"
+      novalidate
+    >
+      <div class="ngx-form-grid">
+        @for (field of config.fields; track field.key) {
+          @if (isVisible(field)) {
+            <div [style.grid-column]="'span ' + (field.col ?? 12)">
+              <ngx-dynamic-field [field]="field" [form]="form" />
+            </div>
+          }
+        }
+      </div>
+
+      @if (config.debug) {
+        <pre class="ngx-debug">{{ form.value | json }}</pre>
+      }
+
+      <div class="ngx-form-actions">
+        @if (config.showReset) {
+          <button type="button" mat-stroked-button (click)="onReset()">
+            {{ config.resetLabel || 'Réinitialiser' }}
+          </button>
+        }
+        <button
+          type="submit"
+          mat-flat-button
+          color="primary"
+          [disabled]="form.invalid && form.touched"
+        >
+          {{ config.submitLabel || 'Envoyer' }}
+        </button>
+      </div>
+    </form>
+  ` }]
+        }], ctorParameters: () => [{ type: DynamicFormBuilderService }, { type: ConditionEvaluatorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                type: Input,
+                args: [{ required: true }]
+            }], initialValues: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }], formChange: [{
+                type: Output
+            }], formReset: [{
+                type: Output
+            }] } });
+
+class FormStorageAdapter {
+    generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+    }
+}
+
+class FormConfigService {
+    constructor() {
+        this.adapter = inject(FormStorageAdapter);
+        this._schemas = signal([]);
+        this.schemas = this._schemas.asReadonly();
+        this.adapter.list().subscribe(list => this._schemas.set(list));
+    }
+    get(id) {
+        return this._schemas().find(s => s.id === id) ?? null;
+    }
+    save(id, title, config) {
+        const schema = {
+            id,
+            title: title.trim() || 'Sans titre',
+            config,
+            updatedAt: new Date().toISOString(),
+        };
+        return this.adapter.save(schema).pipe(tap(saved => this._schemas.update(list => [...list.filter(s => s.id !== saved.id), saved])));
+    }
+    delete(id) {
+        return this.adapter.delete(id).pipe(tap(() => this._schemas.update(list => list.filter(s => s.id !== id))));
+    }
+    generateId() {
+        return this.adapter.generateId();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormConfigService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormConfigService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const FIELD_TYPES = [
+    { type: 'text', label: 'Texte', icon: 'text_fields', group: 'Saisie' },
+    { type: 'email', label: 'E-mail', icon: 'email', group: 'Saisie' },
+    { type: 'password', label: 'Mot de passe', icon: 'lock', group: 'Saisie' },
+    { type: 'number', label: 'Nombre', icon: 'pin', group: 'Saisie' },
+    { type: 'tel', label: 'Téléphone', icon: 'phone', group: 'Saisie' },
+    { type: 'url', label: 'URL', icon: 'link', group: 'Saisie' },
+    { type: 'date', label: 'Date', icon: 'calendar_today', group: 'Saisie' },
+    { type: 'textarea', label: 'Zone de texte', icon: 'notes', group: 'Saisie' },
+    { type: 'file', label: 'Fichier', icon: 'attach_file', group: 'Saisie' },
+    { type: 'select', label: 'Liste déroulante', icon: 'arrow_drop_down_circle', group: 'Choix' },
+    { type: 'multiselect', label: 'Multi-sélection', icon: 'checklist', group: 'Choix' },
+    { type: 'radio', label: 'Boutons radio', icon: 'radio_button_checked', group: 'Choix' },
+    { type: 'checkbox', label: 'Case à cocher', icon: 'check_box', group: 'Choix' },
+    { type: 'heading', label: 'Titre de section', icon: 'title', group: 'Mise en page' },
+    { type: 'divider', label: 'Séparateur', icon: 'horizontal_rule', group: 'Mise en page' },
+];
+const FIELD_ICONS = Object.fromEntries(FIELD_TYPES.map(f => [f.type, f.icon]));
+const GROUPS = ['Saisie', 'Choix', 'Mise en page'];
+const COL_OPTIONS = [1, 2, 3, 4, 6, 8, 9, 12];
+class FormBuilderComponent {
+    constructor() {
+        /** Route du lien "Retour" dans la topbar */
+        this.backRoute = '/';
+        this.formService = inject(FormConfigService);
+        this.snack = inject(MatSnackBar);
+        this.fields = signal([]);
+        this.selectedIdx = signal(null);
+        this.activeTab = signal('schema');
+        this.formTitle = signal('Mon formulaire');
+        this.submitLabel = signal('Envoyer');
+        this.resetLabel = signal('Réinitialiser');
+        this.showReset = signal(false);
+        this.currentId = signal(null);
+        this.showExport = signal(false);
+        this.exportContent = signal('');
+        this.savedSchemas = this.formService.schemas;
+        this.groups = GROUPS;
+        this.fieldTypes = FIELD_TYPES;
+        this.colOptions = COL_OPTIONS;
+        this.selectedField = computed(() => {
+            const i = this.selectedIdx();
+            return i !== null ? this.fields()[i] : null;
+        });
+        this.previewConfig = computed(() => ({
+            submitLabel: this.submitLabel(),
+            resetLabel: this.resetLabel(),
+            showReset: this.showReset(),
+            fields: this.fields(),
+        }));
+        this.groupedTypes = computed(() => GROUPS.map(g => ({ label: g, types: FIELD_TYPES.filter(f => f.group === g) })));
+    }
+    getIcon(type) { return FIELD_ICONS[type] ?? 'input'; }
+    getFieldDisplay(field) {
+        return field.label || field.text || field.placeholder || field.key;
+    }
+    isInputField(type) { return type !== 'divider' && type !== 'heading'; }
+    hasOptions(type) { return ['select', 'multiselect', 'radio'].includes(type); }
+    needsRows(type) { return type === 'textarea'; }
+    isHeading(type) { return type === 'heading'; }
+    isDivider(type) { return type === 'divider'; }
+    addField(type) {
+        const existing = this.fields().filter(f => f.type === type).length;
+        const suffix = existing > 0 ? existing + 1 : '';
+        const key = `${type.replace('-', '_')}${suffix}`;
+        const base = { key, type, col: 12 };
+        if (this.isInputField(type))
+            base.label = this._defaultLabel(type);
+        if (this.hasOptions(type))
+            base.options = [{ label: 'Option 1', value: 'option1' }];
+        if (type === 'heading')
+            Object.assign(base, { text: 'Nouvelle section', level: 3 });
+        if (type === 'radio')
+            base.defaultValue = null;
+        this.fields.update(f => [...f, base]);
+        this.selectedIdx.set(this.fields().length - 1);
+        this.activeTab.set('schema');
+    }
+    removeField(i, e) {
+        e.stopPropagation();
+        this.fields.update(f => f.filter((_, idx) => idx !== i));
+        if (this.selectedIdx() === i)
+            this.selectedIdx.set(null);
+        else if ((this.selectedIdx() ?? 0) > i)
+            this.selectedIdx.update(v => (v ?? 1) - 1);
+    }
+    moveUp(i, e) {
+        e.stopPropagation();
+        if (i === 0)
+            return;
+        this.fields.update(f => { const a = [...f]; [a[i - 1], a[i]] = [a[i], a[i - 1]]; return a; });
+        if (this.selectedIdx() === i)
+            this.selectedIdx.set(i - 1);
+    }
+    moveDown(i, e) {
+        e.stopPropagation();
+        if (i >= this.fields().length - 1)
+            return;
+        this.fields.update(f => { const a = [...f]; [a[i], a[i + 1]] = [a[i + 1], a[i]]; return a; });
+        if (this.selectedIdx() === i)
+            this.selectedIdx.set(i + 1);
+    }
+    selectField(i) { this.selectedIdx.set(this.selectedIdx() === i ? null : i); }
+    duplicateField(i, e) {
+        e.stopPropagation();
+        const clone = {
+            ...this.fields()[i],
+            key: `${this.fields()[i].key}_copy${Date.now().toString(36).slice(-3)}`,
+        };
+        this.fields.update(f => [...f.slice(0, i + 1), clone, ...f.slice(i + 1)]);
+        this.selectedIdx.set(i + 1);
+    }
+    updateProp(prop, value) {
+        const i = this.selectedIdx();
+        if (i === null)
+            return;
+        this.fields.update(list => { const c = [...list]; c[i] = { ...c[i], [prop]: value }; return c; });
+    }
+    updateValidation(prop, value) {
+        const i = this.selectedIdx();
+        if (i === null)
+            return;
+        this.fields.update(list => {
+            const c = [...list];
+            const field = { ...c[i] };
+            const valid = { ...field.validation };
+            if (value === '' || value === null || value === undefined || value === false) {
+                delete valid[prop];
+            }
+            else {
+                valid[prop] = value;
+            }
+            field.validation = Object.keys(valid).length ? valid : undefined;
+            c[i] = field;
+            return c;
+        });
+    }
+    getOptions() { return this.selectedField()?.options ?? []; }
+    addOption() {
+        const n = this.getOptions().length + 1;
+        this.updateProp('options', [...this.getOptions(), { label: `Option ${n}`, value: `option${n}` }]);
+    }
+    updateOption(idx, prop, value) {
+        const opts = [...this.getOptions()];
+        opts[idx] = { ...opts[idx], [prop]: value };
+        this.updateProp('options', opts);
+    }
+    removeOption(idx) {
+        this.updateProp('options', this.getOptions().filter((_, i) => i !== idx));
+    }
+    save() {
+        const id = this.currentId() ?? this.formService.generateId();
+        const title = this.formTitle();
+        this.formService.save(id, title, this.previewConfig()).subscribe(() => {
+            this.currentId.set(id);
+            this.snack.open(`✓ "${title}" sauvegardé`, '', { duration: 2500 });
+        });
+    }
+    loadSchema(id) {
+        const schema = this.formService.get(id);
+        if (!schema)
+            return;
+        this.fields.set(schema.config.fields ?? []);
+        this.formTitle.set(schema.title);
+        this.submitLabel.set(schema.config.submitLabel ?? 'Envoyer');
+        this.resetLabel.set(schema.config.resetLabel ?? 'Réinitialiser');
+        this.showReset.set(schema.config.showReset ?? false);
+        this.currentId.set(id);
+        this.selectedIdx.set(null);
+        this.snack.open(`✓ "${schema.title}" chargé`, '', { duration: 2000 });
+    }
+    deleteSchema(id, e) {
+        e.stopPropagation();
+        this.formService.delete(id).subscribe(() => {
+            if (this.currentId() === id)
+                this.newForm();
+        });
+    }
+    newForm() {
+        this.fields.set([]);
+        this.formTitle.set('Mon formulaire');
+        this.submitLabel.set('Envoyer');
+        this.resetLabel.set('Réinitialiser');
+        this.showReset.set(false);
+        this.currentId.set(null);
+        this.selectedIdx.set(null);
+    }
+    exportJSON() {
+        this.exportContent.set(JSON.stringify(this.previewConfig(), null, 2));
+        this.showExport.set(true);
+    }
+    exportTypeScript() {
+        const ts = `const config: DynamicFormConfig = ${JSON.stringify(this.previewConfig(), null, 2)
+            .replace(/"([a-zA-Z_][a-zA-Z0-9_]*)"\s*:/g, '$1:')
+            .replace(/"/g, "'")};\n`;
+        this.exportContent.set(ts);
+        this.showExport.set(true);
+    }
+    async copyExport() {
+        await navigator.clipboard.writeText(this.exportContent());
+        this.snack.open('✓ Copié dans le presse-papiers', '', { duration: 2000 });
+    }
+    copyFormUrl() {
+        const id = this.currentId();
+        if (!id) {
+            this.snack.open('Sauvegardez d\'abord le formulaire', '', { duration: 2000 });
+            return;
+        }
+        navigator.clipboard.writeText(`${location.origin}/form/${id}`);
+        this.snack.open(`✓ Lien copié : /form/${id}`, '', { duration: 3000 });
+    }
+    validationOf(key) {
+        return this.selectedField()?.validation?.[key] ?? null;
+    }
+    labelOf(type) {
+        return FIELD_TYPES.find(f => f.type === type)?.label ?? type;
+    }
+    trackByKey(_i, field) { return field.key; }
+    trackByIdx(i) { return i; }
+    _defaultLabel(type) {
+        const map = {
+            text: 'Texte', email: 'E-mail', password: 'Mot de passe', number: 'Nombre',
+            tel: 'Téléphone', url: 'URL', date: 'Date', textarea: 'Message',
+            select: 'Sélection', multiselect: 'Sélection multiple', radio: 'Choix',
+            checkbox: 'Option', file: 'Fichier',
+        };
+        return map[type] ?? type;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormBuilderComponent, isStandalone: true, selector: "ngx-form-builder", inputs: { backRoute: "backRoute" }, ngImport: i0, template: "<div class=\"builder-root\">\n\n  <!-- \u2500\u2500 Top Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"topbar\">\n    <a [routerLink]=\"backRoute\" class=\"topbar-back\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>Retour</span>\n    </a>\n\n    <div class=\"topbar-center\">\n      <mat-icon class=\"topbar-logo\">dashboard_customize</mat-icon>\n      <input\n        class=\"title-input\"\n        [ngModel]=\"formTitle()\"\n        (ngModelChange)=\"formTitle.set($event)\"\n        placeholder=\"Titre du formulaire\"\n        aria-label=\"Titre du formulaire\"\n      />\n    </div>\n\n    <div class=\"topbar-actions\">\n      <button class=\"btn-icon\" matTooltip=\"Nouveau formulaire\" (click)=\"newForm()\">\n        <mat-icon>add_circle_outline</mat-icon>\n      </button>\n      <button class=\"btn-icon\" matTooltip=\"Copier le lien du formulaire\" (click)=\"copyFormUrl()\">\n        <mat-icon>share</mat-icon>\n      </button>\n      <button class=\"btn-outline\" (click)=\"exportJSON()\">\n        <mat-icon>data_object</mat-icon> JSON\n      </button>\n      <button class=\"btn-outline\" (click)=\"exportTypeScript()\">\n        <mat-icon>code</mat-icon> TypeScript\n      </button>\n      <button class=\"btn-primary\" (click)=\"save()\">\n        <mat-icon>save</mat-icon> Sauvegarder\n      </button>\n    </div>\n  </header>\n\n  <!-- \u2500\u2500 Main Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"builder-body\">\n\n    <!-- \u2500\u2500 Left: Palette \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <aside class=\"palette\">\n\n      <div class=\"palette-section\">\n        <p class=\"palette-section-title\">Types de champs</p>\n        @for (group of groupedTypes(); track group.label) {\n          <p class=\"palette-group-label\">{{ group.label }}</p>\n          @for (ft of group.types; track ft.type) {\n            <button class=\"palette-btn\" (click)=\"addField(ft.type)\" matTooltip=\"Ajouter {{ ft.label }}\">\n              <mat-icon>{{ ft.icon }}</mat-icon>\n              <span>{{ ft.label }}</span>\n            </button>\n          }\n        }\n      </div>\n\n      <!-- Saved schemas -->\n      <div class=\"palette-section\">\n        <p class=\"palette-section-title\">\n          <mat-icon style=\"font-size:1rem;width:1rem;height:1rem;vertical-align:middle\">folder_open</mat-icon>\n          Formulaires sauvegard\u00E9s\n        </p>\n        @if (savedSchemas().length === 0) {\n          <p class=\"palette-empty\">Aucun formulaire sauvegard\u00E9</p>\n        }\n        @for (schema of savedSchemas(); track schema.id) {\n          <div class=\"saved-item\" [class.active]=\"currentId() === schema.id\">\n            <button class=\"saved-item-name\" (click)=\"loadSchema(schema.id)\" matTooltip=\"Charger\">\n              <mat-icon>description</mat-icon>\n              <span>{{ schema.title }}</span>\n            </button>\n            <button class=\"saved-item-delete\" (click)=\"deleteSchema(schema.id, $event)\" matTooltip=\"Supprimer\">\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n\n    </aside>\n\n    <!-- \u2500\u2500 Center: Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <main class=\"canvas\">\n\n      <!-- Tab bar -->\n      <div class=\"canvas-tabs\">\n        <button\n          class=\"canvas-tab\"\n          [class.active]=\"activeTab() === 'schema'\"\n          (click)=\"activeTab.set('schema')\"\n        >\n          <mat-icon>list_alt</mat-icon> Sch\u00E9ma\n        </button>\n        <button\n          class=\"canvas-tab\"\n          [class.active]=\"activeTab() === 'preview'\"\n          (click)=\"activeTab.set('preview')\"\n        >\n          <mat-icon>visibility</mat-icon> Aper\u00E7u\n        </button>\n        <span class=\"canvas-tabs-info\">\n          {{ fields().length }} champ{{ fields().length !== 1 ? 's' : '' }}\n        </span>\n      </div>\n\n      <!-- \u2500\u2500 Schema Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (activeTab() === 'schema') {\n        <div class=\"schema-view\">\n\n          @if (fields().length === 0) {\n            <div class=\"empty-canvas\">\n              <mat-icon>add_box</mat-icon>\n              <p>Cliquez sur un type de champ \u00E0 gauche pour commencer</p>\n            </div>\n          }\n\n          <div class=\"field-list\">\n            @for (field of fields(); track trackByKey($index, field); let i = $index) {\n              <div\n                class=\"field-card\"\n                [class.selected]=\"selectedIdx() === i\"\n                (click)=\"selectField(i)\"\n              >\n                <mat-icon class=\"field-card-icon\">{{ getIcon(field.type) }}</mat-icon>\n\n                <div class=\"field-card-body\">\n                  <span class=\"field-card-label\">{{ getFieldDisplay(field) }}</span>\n                  <span class=\"field-card-meta\">{{ labelOf(field.type) }} \u00B7 col-{{ field.col ?? 12 }}</span>\n                </div>\n\n                @if (field.key) {\n                  <code class=\"field-card-key\">{{ field.key }}</code>\n                }\n\n                <div class=\"field-card-actions\">\n                  <button class=\"action-btn\" (click)=\"moveUp(i, $event)\" [disabled]=\"i === 0\" matTooltip=\"Monter\">\n                    <mat-icon>arrow_upward</mat-icon>\n                  </button>\n                  <button class=\"action-btn\" (click)=\"moveDown(i, $event)\" [disabled]=\"i === fields().length - 1\" matTooltip=\"Descendre\">\n                    <mat-icon>arrow_downward</mat-icon>\n                  </button>\n                  <button class=\"action-btn\" (click)=\"duplicateField(i, $event)\" matTooltip=\"Dupliquer\">\n                    <mat-icon>content_copy</mat-icon>\n                  </button>\n                  <button class=\"action-btn danger\" (click)=\"removeField(i, $event)\" matTooltip=\"Supprimer\">\n                    <mat-icon>delete_outline</mat-icon>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Form settings -->\n          <div class=\"form-settings\">\n            <p class=\"settings-title\">\n              <mat-icon>settings</mat-icon> Param\u00E8tres du formulaire\n            </p>\n            <div class=\"settings-row\">\n              <label>Bouton Envoyer</label>\n              <input [ngModel]=\"submitLabel()\" (ngModelChange)=\"submitLabel.set($event)\" placeholder=\"Envoyer\" />\n            </div>\n            <div class=\"settings-row\">\n              <label>\n                <input type=\"checkbox\" [ngModel]=\"showReset()\" (ngModelChange)=\"showReset.set($event)\" />\n                Afficher R\u00E9initialiser\n              </label>\n            </div>\n            @if (showReset()) {\n              <div class=\"settings-row\">\n                <label>Bouton Reset</label>\n                <input [ngModel]=\"resetLabel()\" (ngModelChange)=\"resetLabel.set($event)\" placeholder=\"R\u00E9initialiser\" />\n              </div>\n            }\n          </div>\n\n        </div>\n      }\n\n      <!-- \u2500\u2500 Preview Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (activeTab() === 'preview') {\n        <div class=\"preview-view\">\n          @if (fields().length === 0) {\n            <div class=\"empty-canvas\">\n              <mat-icon>preview</mat-icon>\n              <p>Ajoutez des champs pour voir l'aper\u00E7u du formulaire</p>\n            </div>\n          } @else {\n            <div class=\"preview-wrapper\">\n              <p class=\"preview-hint\">\n                <mat-icon>info_outline</mat-icon>\n                Aper\u00E7u en temps r\u00E9el \u2014 les donn\u00E9es ne sont pas envoy\u00E9es\n              </p>\n              <ngx-dynamic-form [config]=\"previewConfig()\" />\n            </div>\n          }\n        </div>\n      }\n\n    </main>\n\n    <!-- \u2500\u2500 Right: Properties \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <aside class=\"properties\">\n\n      @if (selectedField(); as field) {\n        <div class=\"props-header\">\n          <mat-icon>{{ getIcon(field.type) }}</mat-icon>\n          <span>{{ labelOf(field.type) }}</span>\n          <button class=\"props-close\" (click)=\"selectedIdx.set(null)\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"props-body\">\n\n          <!-- \u2500\u2500 G\u00C9N\u00C9RAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <section class=\"prop-section\">\n            <p class=\"prop-section-title\">G\u00E9n\u00E9ral</p>\n\n            <div class=\"prop-row\">\n              <label>Cl\u00E9 (key)</label>\n              <input [ngModel]=\"field.key\" (ngModelChange)=\"updateProp('key', $event)\" placeholder=\"mon_champ\" />\n            </div>\n\n            <div class=\"prop-row\">\n              <label>Largeur (col)</label>\n              <select [ngModel]=\"field.col ?? 12\" (ngModelChange)=\"updateProp('col', +$event)\">\n                @for (c of colOptions; track c) {\n                  <option [value]=\"c\">{{ c }} / 12</option>\n                }\n              </select>\n            </div>\n\n            @if (!isDivider(field.type) && !isHeading(field.type)) {\n              <div class=\"prop-row\">\n                <label>Label</label>\n                <input [ngModel]=\"field.label\" (ngModelChange)=\"updateProp('label', $event)\" placeholder=\"Libell\u00E9 du champ\" />\n              </div>\n            }\n\n            @if (isHeading(field.type)) {\n              <div class=\"prop-row\">\n                <label>Texte</label>\n                <input [ngModel]=\"field.text\" (ngModelChange)=\"updateProp('text', $event)\" placeholder=\"Titre de section\" />\n              </div>\n              <div class=\"prop-row\">\n                <label>Niveau (h1\u2013h6)</label>\n                <select [ngModel]=\"field.level ?? 3\" (ngModelChange)=\"updateProp('level', +$event)\">\n                  @for (n of [1,2,3,4,5,6]; track n) {\n                    <option [value]=\"n\">h{{ n }}</option>\n                  }\n                </select>\n              </div>\n            }\n          </section>\n\n          <!-- \u2500\u2500 SAISIE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (isInputField(field.type)) {\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Saisie</p>\n\n              <div class=\"prop-row\">\n                <label>Placeholder</label>\n                <input [ngModel]=\"field.placeholder\" (ngModelChange)=\"updateProp('placeholder', $event)\" placeholder=\"Texte indicatif\" />\n              </div>\n\n              <div class=\"prop-row\">\n                <label>Texte d'aide (hint)</label>\n                <input [ngModel]=\"field.hint\" (ngModelChange)=\"updateProp('hint', $event)\" placeholder=\"Aide visible sous le champ\" />\n              </div>\n\n              @if (needsRows(field.type)) {\n                <div class=\"prop-row\">\n                  <label>Lignes (rows)</label>\n                  <input type=\"number\" min=\"2\" max=\"20\" [ngModel]=\"field.rows ?? 4\" (ngModelChange)=\"updateProp('rows', +$event)\" />\n                </div>\n              }\n\n              <div class=\"prop-row\">\n                <label>\n                  <input type=\"checkbox\" [ngModel]=\"field.readonly ?? false\" (ngModelChange)=\"updateProp('readonly', $event)\" />\n                  Lecture seule (readonly)\n                </label>\n              </div>\n            </section>\n\n            <!-- \u2500\u2500 IC\u00D4NES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Ic\u00F4nes <span class=\"prop-hint\">Material Icons</span></p>\n              <div class=\"prop-row\">\n                <label>Pr\u00E9fixe (gauche)</label>\n                <input [ngModel]=\"field.icon\" (ngModelChange)=\"updateProp('icon', $event || undefined)\" placeholder=\"person, email, lock\u2026\" />\n              </div>\n              <div class=\"prop-row\">\n                <label>Suffixe (droite)</label>\n                <input [ngModel]=\"field.iconSuffix\" (ngModelChange)=\"updateProp('iconSuffix', $event || undefined)\" placeholder=\"visibility, search\u2026\" />\n              </div>\n            </section>\n\n            <!-- \u2500\u2500 VALIDATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Validation</p>\n\n              <div class=\"prop-row\">\n                <label>\n                  <input type=\"checkbox\" [ngModel]=\"!!field.validation?.required\" (ngModelChange)=\"updateValidation('required', $event)\" />\n                  Champ obligatoire (required)\n                </label>\n              </div>\n\n              @if (['text','email','password','textarea','url'].includes(field.type)) {\n                <div class=\"prop-row\">\n                  <label>Longueur min</label>\n                  <input type=\"number\" min=\"0\"\n                    [ngModel]=\"field.validation?.minLength ?? ''\"\n                    (ngModelChange)=\"updateValidation('minLength', $event ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n                <div class=\"prop-row\">\n                  <label>Longueur max</label>\n                  <input type=\"number\" min=\"0\"\n                    [ngModel]=\"field.validation?.maxLength ?? ''\"\n                    (ngModelChange)=\"updateValidation('maxLength', $event ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n              }\n\n              @if (field.type === 'number') {\n                <div class=\"prop-row\">\n                  <label>Valeur min</label>\n                  <input type=\"number\"\n                    [ngModel]=\"field.validation?.min ?? ''\"\n                    (ngModelChange)=\"updateValidation('min', $event !== '' ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n                <div class=\"prop-row\">\n                  <label>Valeur max</label>\n                  <input type=\"number\"\n                    [ngModel]=\"field.validation?.max ?? ''\"\n                    (ngModelChange)=\"updateValidation('max', $event !== '' ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n              }\n\n              @if (field.type === 'email') {\n                <div class=\"prop-row\">\n                  <label>\n                    <input type=\"checkbox\" [ngModel]=\"!!field.validation?.email\" (ngModelChange)=\"updateValidation('email', $event)\" />\n                    Valider le format e-mail\n                  </label>\n                </div>\n              }\n\n              @if (field.type === 'file') {\n                <div class=\"prop-row\">\n                  <label>Types accept\u00E9s</label>\n                  <input [ngModel]=\"field.accept\" (ngModelChange)=\"updateProp('accept', $event)\" placeholder=\".pdf,.docx,image/*\" />\n                </div>\n                <div class=\"prop-row\">\n                  <label>\n                    <input type=\"checkbox\" [ngModel]=\"field.multiple ?? false\" (ngModelChange)=\"updateProp('multiple', $event)\" />\n                    Fichiers multiples\n                  </label>\n                </div>\n              }\n            </section>\n          }\n\n          <!-- \u2500\u2500 OPTIONS (select / radio) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (hasOptions(field.type)) {\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Options</p>\n              <div class=\"options-list\">\n                @for (opt of getOptions(); track trackByIdx($index); let oi = $index) {\n                  <div class=\"option-row\">\n                    <input placeholder=\"Label\" [ngModel]=\"opt.label\" (ngModelChange)=\"updateOption(oi, 'label', $event)\" />\n                    <input placeholder=\"Valeur\" [ngModel]=\"opt.value\" (ngModelChange)=\"updateOption(oi, 'value', $event)\" />\n                    <button class=\"action-btn danger\" (click)=\"removeOption(oi)\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </div>\n                }\n              </div>\n              <button class=\"btn-add-option\" (click)=\"addOption()\">\n                <mat-icon>add</mat-icon> Ajouter une option\n              </button>\n            </section>\n          }\n\n        </div>\n\n      } @else {\n        <div class=\"props-empty\">\n          <mat-icon>tune</mat-icon>\n          <p>S\u00E9lectionnez un champ pour modifier ses propri\u00E9t\u00E9s</p>\n        </div>\n      }\n\n    </aside>\n\n  </div><!-- /.builder-body -->\n\n</div><!-- /.builder-root -->\n\n<!-- \u2500\u2500 Export Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showExport()) {\n  <div class=\"modal-overlay\" (click)=\"showExport.set(false)\">\n    <div class=\"modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <span>Code export\u00E9</span>\n        <button (click)=\"showExport.set(false)\"><mat-icon>close</mat-icon></button>\n      </div>\n      <textarea class=\"modal-code\" readonly [value]=\"exportContent()\"></textarea>\n      <div class=\"modal-footer\">\n        <button class=\"btn-primary\" (click)=\"copyExport()\">\n          <mat-icon>content_copy</mat-icon> Copier\n        </button>\n        <button class=\"btn-outline\" (click)=\"showExport.set(false)\">Fermer</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100vh;overflow:hidden;font-family:Roboto,sans-serif;--palette-w: 210px;--props-w: 280px;--topbar-h: 52px;--border: #e2e8f0;--bg: #f8fafc;--surface: #ffffff;--primary: #2563eb;--primary-light: #eff6ff;--danger: #dc2626;--text: #1e293b;--text-muted: #64748b;--radius: 8px}.topbar{display:flex;align-items:center;gap:1rem;height:var(--topbar-h);padding:0 1rem;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 1px 4px #0000000f;z-index:10;flex-shrink:0}.topbar-back{display:inline-flex;align-items:center;gap:.25rem;color:var(--text-muted);text-decoration:none;font-size:.85rem;white-space:nowrap}.topbar-back:hover{color:var(--primary)}.topbar-back mat-icon{font-size:1rem;width:1rem;height:1rem}.topbar-center{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.topbar-logo{color:var(--primary);flex-shrink:0}.title-input{flex:1;min-width:0;border:none;border-bottom:2px solid transparent;background:transparent;font-size:1rem;font-weight:600;color:var(--text);padding:.25rem .5rem;border-radius:4px;outline:none;transition:border-color .15s}.title-input:focus{border-bottom-color:var(--primary)}.title-input::placeholder{color:var(--text-muted);font-weight:400}.topbar-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:transparent;border-radius:var(--radius);color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}.btn-icon:hover{background:var(--bg);color:var(--text)}.btn-icon mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem}.btn-outline{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);font-size:.82rem;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}.btn-outline:hover{background:var(--bg);border-color:#cbd5e1}.btn-outline mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.btn-primary{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .85rem;border:none;background:var(--primary);color:#fff;border-radius:var(--radius);font-size:.85rem;font-weight:500;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#1d4ed8}.btn-primary mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.builder-body{display:grid;grid-template-columns:var(--palette-w) 1fr var(--props-w);height:calc(100vh - var(--topbar-h));overflow:hidden}.palette{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:.75rem .5rem;gap:1rem}.palette-section{display:flex;flex-direction:column;gap:.2rem}.palette-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:.25rem .5rem;margin:.4rem 0 .2rem}.palette-group-label{font-size:.7rem;color:var(--text-muted);padding:.1rem .5rem;margin-top:.4rem;margin-bottom:.05rem}.palette-btn{display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;border:none;background:transparent;border-radius:6px;color:var(--text);font-size:.82rem;cursor:pointer;text-align:left;transition:background .12s}.palette-btn:hover{background:var(--primary-light);color:var(--primary)}.palette-btn mat-icon{font-size:1rem;width:1rem;height:1rem;color:var(--text-muted)}.palette-btn:hover mat-icon{color:var(--primary)}.palette-empty{font-size:.78rem;color:var(--text-muted);padding:.25rem .5rem;font-style:italic}.saved-item{display:flex;align-items:center;border-radius:6px;overflow:hidden}.saved-item.active{background:var(--primary-light)}.saved-item .saved-item-name{flex:1;display:flex;align-items:center;gap:.35rem;padding:.4rem .5rem;border:none;background:transparent;font-size:.8rem;color:var(--text);cursor:pointer;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;transition:color .12s}.saved-item .saved-item-name:hover{color:var(--primary)}.saved-item .saved-item-name mat-icon{font-size:.9rem;width:.9rem;height:.9rem;flex-shrink:0}.saved-item .saved-item-name span{overflow:hidden;text-overflow:ellipsis}.saved-item .saved-item-delete{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .12s,background .12s}.saved-item .saved-item-delete:hover{color:var(--danger);background:#fee2e2}.saved-item .saved-item-delete mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.canvas{display:flex;flex-direction:column;background:var(--bg);overflow:hidden}.canvas-tabs{display:flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.canvas-tab{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:1px solid transparent;background:transparent;border-radius:var(--radius);font-size:.82rem;color:var(--text-muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}.canvas-tab mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.canvas-tab.active{background:var(--primary-light);color:var(--primary);border-color:#bfdbfe;font-weight:500}.canvas-tab:not(.active):hover{background:var(--bg);color:var(--text)}.canvas-tabs-info{margin-left:auto;font-size:.78rem;color:var(--text-muted)}.schema-view{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.empty-canvas{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:3rem 1rem;color:var(--text-muted);text-align:center;border:2px dashed var(--border);border-radius:var(--radius)}.empty-canvas mat-icon{font-size:2.5rem;width:2.5rem;height:2.5rem;opacity:.5}.empty-canvas p{font-size:.9rem;margin:0}.field-list{display:flex;flex-direction:column;gap:.5rem}.field-card{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}.field-card:hover{border-color:#93c5fd;box-shadow:0 1px 6px #2563eb1a}.field-card.selected{border-color:var(--primary);box-shadow:0 0 0 2px #bfdbfe}.field-card-icon{font-size:1.2rem;width:1.2rem;height:1.2rem;color:var(--primary);flex-shrink:0}.field-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.field-card-label{font-size:.85rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-card-meta{font-size:.72rem;color:var(--text-muted)}.field-card-key{font-size:.72rem;background:#f1f5f9;color:#0f172a;padding:.1rem .35rem;border-radius:4px;font-family:Fira Code,Courier New,monospace;white-space:nowrap;flex-shrink:0}.field-card-actions{display:flex;align-items:center;gap:.15rem;flex-shrink:0}.action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:5px;color:var(--text-muted);cursor:pointer;transition:background .12s,color .12s}.action-btn:hover{background:var(--bg);color:var(--text)}.action-btn.danger:hover{background:#fee2e2;color:var(--danger)}.action-btn:disabled{opacity:.35;pointer-events:none}.action-btn mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.form-settings{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.settings-title{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .25rem}.settings-title mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.settings-row{display:flex;align-items:center;gap:.75rem;font-size:.83rem}.settings-row label{display:flex;align-items:center;gap:.4rem;color:var(--text);white-space:nowrap;cursor:pointer;min-width:130px}.settings-row input[type=text],.settings-row input:not([type=checkbox]){flex:1;padding:.3rem .5rem;border:1px solid var(--border);border-radius:5px;font-size:.83rem;outline:none}.settings-row input[type=text]:focus,.settings-row input:not([type=checkbox]):focus{border-color:var(--primary)}.preview-view{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;align-items:center}.preview-wrapper{width:100%;max-width:720px;display:flex;flex-direction:column;gap:.75rem}.preview-hint{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text-muted);background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:.4rem .75rem;margin:0}.preview-hint mat-icon{font-size:.9rem;width:.9rem;height:.9rem;color:#b45309}.properties{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.props-header{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;background:var(--primary-light);border-bottom:1px solid #bfdbfe;flex-shrink:0}.props-header mat-icon{color:var(--primary);font-size:1rem;width:1rem;height:1rem}.props-header span{flex:1;font-size:.85rem;font-weight:600;color:var(--primary)}.props-close{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;transition:background .12s}.props-close:hover{background:#dbeafe}.props-close mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.props-body{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.25rem}.props-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--text-muted);padding:2rem 1rem;text-align:center}.props-empty mat-icon{font-size:2rem;width:2rem;height:2rem;opacity:.4}.props-empty p{font-size:.85rem;margin:0;max-width:180px}.prop-section{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:.6rem .75rem;display:flex;flex-direction:column;gap:.4rem}.prop-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 .3rem;display:flex;align-items:center;gap:.4rem}.prop-hint{font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:0;color:#94a3b8;margin-left:.25rem}.prop-row{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem}.prop-row>label{display:flex;align-items:center;gap:.4rem;color:var(--text);font-size:.8rem;cursor:pointer}.prop-row>input[type=text],.prop-row>input[type=number],.prop-row>input:not([type=checkbox]),.prop-row>select{width:100%;padding:.3rem .5rem;border:1px solid var(--border);border-radius:5px;font-size:.82rem;color:var(--text);background:var(--surface);outline:none;box-sizing:border-box;transition:border-color .12s}.prop-row>input[type=text]:focus,.prop-row>input[type=number]:focus,.prop-row>input:not([type=checkbox]):focus,.prop-row>select:focus{border-color:var(--primary)}.options-list{display:flex;flex-direction:column;gap:.35rem}.option-row{display:flex;align-items:center;gap:.3rem}.option-row input{flex:1;padding:.28rem .45rem;border:1px solid var(--border);border-radius:5px;font-size:.78rem;outline:none}.option-row input:focus{border-color:var(--primary)}.option-row .action-btn{width:24px;height:24px;flex-shrink:0}.option-row .action-btn mat-icon{font-size:.85rem;width:.85rem;height:.85rem}.btn-add-option{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .6rem;border:1px dashed var(--border);background:transparent;border-radius:5px;font-size:.78rem;color:var(--text-muted);cursor:pointer;transition:border-color .12s,color .12s;margin-top:.25rem}.btn-add-option:hover{border-color:var(--primary);color:var(--primary)}.btn-add-option mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.modal-overlay{position:fixed;inset:0;background:#00000073;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem}.modal{background:var(--surface);border-radius:10px;box-shadow:0 20px 60px #0003;display:flex;flex-direction:column;width:100%;max-width:700px;max-height:80vh;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.9rem}.modal-header button{display:flex;align-items:center;border:none;background:transparent;cursor:pointer;color:var(--text-muted);border-radius:4px;padding:.2rem;transition:background .12s}.modal-header button:hover{background:var(--bg)}.modal-header button mat-icon{font-size:1rem;width:1rem;height:1rem}.modal-code{flex:1;padding:1rem;font-family:Fira Code,Courier New,monospace;font-size:.8rem;color:var(--text);border:none;resize:none;outline:none;background:#1e293b;color:#e2e8f0;overflow-y:auto;min-height:320px}.modal-footer{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border);justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "initialValues"], outputs: ["formSubmit", "formChange", "formReset"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-form-builder', standalone: true, imports: [FormsModule, MatIcon, MatTooltip, RouterLink, DynamicFormComponent], template: "<div class=\"builder-root\">\n\n  <!-- \u2500\u2500 Top Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"topbar\">\n    <a [routerLink]=\"backRoute\" class=\"topbar-back\">\n      <mat-icon>arrow_back</mat-icon>\n      <span>Retour</span>\n    </a>\n\n    <div class=\"topbar-center\">\n      <mat-icon class=\"topbar-logo\">dashboard_customize</mat-icon>\n      <input\n        class=\"title-input\"\n        [ngModel]=\"formTitle()\"\n        (ngModelChange)=\"formTitle.set($event)\"\n        placeholder=\"Titre du formulaire\"\n        aria-label=\"Titre du formulaire\"\n      />\n    </div>\n\n    <div class=\"topbar-actions\">\n      <button class=\"btn-icon\" matTooltip=\"Nouveau formulaire\" (click)=\"newForm()\">\n        <mat-icon>add_circle_outline</mat-icon>\n      </button>\n      <button class=\"btn-icon\" matTooltip=\"Copier le lien du formulaire\" (click)=\"copyFormUrl()\">\n        <mat-icon>share</mat-icon>\n      </button>\n      <button class=\"btn-outline\" (click)=\"exportJSON()\">\n        <mat-icon>data_object</mat-icon> JSON\n      </button>\n      <button class=\"btn-outline\" (click)=\"exportTypeScript()\">\n        <mat-icon>code</mat-icon> TypeScript\n      </button>\n      <button class=\"btn-primary\" (click)=\"save()\">\n        <mat-icon>save</mat-icon> Sauvegarder\n      </button>\n    </div>\n  </header>\n\n  <!-- \u2500\u2500 Main Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"builder-body\">\n\n    <!-- \u2500\u2500 Left: Palette \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <aside class=\"palette\">\n\n      <div class=\"palette-section\">\n        <p class=\"palette-section-title\">Types de champs</p>\n        @for (group of groupedTypes(); track group.label) {\n          <p class=\"palette-group-label\">{{ group.label }}</p>\n          @for (ft of group.types; track ft.type) {\n            <button class=\"palette-btn\" (click)=\"addField(ft.type)\" matTooltip=\"Ajouter {{ ft.label }}\">\n              <mat-icon>{{ ft.icon }}</mat-icon>\n              <span>{{ ft.label }}</span>\n            </button>\n          }\n        }\n      </div>\n\n      <!-- Saved schemas -->\n      <div class=\"palette-section\">\n        <p class=\"palette-section-title\">\n          <mat-icon style=\"font-size:1rem;width:1rem;height:1rem;vertical-align:middle\">folder_open</mat-icon>\n          Formulaires sauvegard\u00E9s\n        </p>\n        @if (savedSchemas().length === 0) {\n          <p class=\"palette-empty\">Aucun formulaire sauvegard\u00E9</p>\n        }\n        @for (schema of savedSchemas(); track schema.id) {\n          <div class=\"saved-item\" [class.active]=\"currentId() === schema.id\">\n            <button class=\"saved-item-name\" (click)=\"loadSchema(schema.id)\" matTooltip=\"Charger\">\n              <mat-icon>description</mat-icon>\n              <span>{{ schema.title }}</span>\n            </button>\n            <button class=\"saved-item-delete\" (click)=\"deleteSchema(schema.id, $event)\" matTooltip=\"Supprimer\">\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n\n    </aside>\n\n    <!-- \u2500\u2500 Center: Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <main class=\"canvas\">\n\n      <!-- Tab bar -->\n      <div class=\"canvas-tabs\">\n        <button\n          class=\"canvas-tab\"\n          [class.active]=\"activeTab() === 'schema'\"\n          (click)=\"activeTab.set('schema')\"\n        >\n          <mat-icon>list_alt</mat-icon> Sch\u00E9ma\n        </button>\n        <button\n          class=\"canvas-tab\"\n          [class.active]=\"activeTab() === 'preview'\"\n          (click)=\"activeTab.set('preview')\"\n        >\n          <mat-icon>visibility</mat-icon> Aper\u00E7u\n        </button>\n        <span class=\"canvas-tabs-info\">\n          {{ fields().length }} champ{{ fields().length !== 1 ? 's' : '' }}\n        </span>\n      </div>\n\n      <!-- \u2500\u2500 Schema Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (activeTab() === 'schema') {\n        <div class=\"schema-view\">\n\n          @if (fields().length === 0) {\n            <div class=\"empty-canvas\">\n              <mat-icon>add_box</mat-icon>\n              <p>Cliquez sur un type de champ \u00E0 gauche pour commencer</p>\n            </div>\n          }\n\n          <div class=\"field-list\">\n            @for (field of fields(); track trackByKey($index, field); let i = $index) {\n              <div\n                class=\"field-card\"\n                [class.selected]=\"selectedIdx() === i\"\n                (click)=\"selectField(i)\"\n              >\n                <mat-icon class=\"field-card-icon\">{{ getIcon(field.type) }}</mat-icon>\n\n                <div class=\"field-card-body\">\n                  <span class=\"field-card-label\">{{ getFieldDisplay(field) }}</span>\n                  <span class=\"field-card-meta\">{{ labelOf(field.type) }} \u00B7 col-{{ field.col ?? 12 }}</span>\n                </div>\n\n                @if (field.key) {\n                  <code class=\"field-card-key\">{{ field.key }}</code>\n                }\n\n                <div class=\"field-card-actions\">\n                  <button class=\"action-btn\" (click)=\"moveUp(i, $event)\" [disabled]=\"i === 0\" matTooltip=\"Monter\">\n                    <mat-icon>arrow_upward</mat-icon>\n                  </button>\n                  <button class=\"action-btn\" (click)=\"moveDown(i, $event)\" [disabled]=\"i === fields().length - 1\" matTooltip=\"Descendre\">\n                    <mat-icon>arrow_downward</mat-icon>\n                  </button>\n                  <button class=\"action-btn\" (click)=\"duplicateField(i, $event)\" matTooltip=\"Dupliquer\">\n                    <mat-icon>content_copy</mat-icon>\n                  </button>\n                  <button class=\"action-btn danger\" (click)=\"removeField(i, $event)\" matTooltip=\"Supprimer\">\n                    <mat-icon>delete_outline</mat-icon>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Form settings -->\n          <div class=\"form-settings\">\n            <p class=\"settings-title\">\n              <mat-icon>settings</mat-icon> Param\u00E8tres du formulaire\n            </p>\n            <div class=\"settings-row\">\n              <label>Bouton Envoyer</label>\n              <input [ngModel]=\"submitLabel()\" (ngModelChange)=\"submitLabel.set($event)\" placeholder=\"Envoyer\" />\n            </div>\n            <div class=\"settings-row\">\n              <label>\n                <input type=\"checkbox\" [ngModel]=\"showReset()\" (ngModelChange)=\"showReset.set($event)\" />\n                Afficher R\u00E9initialiser\n              </label>\n            </div>\n            @if (showReset()) {\n              <div class=\"settings-row\">\n                <label>Bouton Reset</label>\n                <input [ngModel]=\"resetLabel()\" (ngModelChange)=\"resetLabel.set($event)\" placeholder=\"R\u00E9initialiser\" />\n              </div>\n            }\n          </div>\n\n        </div>\n      }\n\n      <!-- \u2500\u2500 Preview Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (activeTab() === 'preview') {\n        <div class=\"preview-view\">\n          @if (fields().length === 0) {\n            <div class=\"empty-canvas\">\n              <mat-icon>preview</mat-icon>\n              <p>Ajoutez des champs pour voir l'aper\u00E7u du formulaire</p>\n            </div>\n          } @else {\n            <div class=\"preview-wrapper\">\n              <p class=\"preview-hint\">\n                <mat-icon>info_outline</mat-icon>\n                Aper\u00E7u en temps r\u00E9el \u2014 les donn\u00E9es ne sont pas envoy\u00E9es\n              </p>\n              <ngx-dynamic-form [config]=\"previewConfig()\" />\n            </div>\n          }\n        </div>\n      }\n\n    </main>\n\n    <!-- \u2500\u2500 Right: Properties \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <aside class=\"properties\">\n\n      @if (selectedField(); as field) {\n        <div class=\"props-header\">\n          <mat-icon>{{ getIcon(field.type) }}</mat-icon>\n          <span>{{ labelOf(field.type) }}</span>\n          <button class=\"props-close\" (click)=\"selectedIdx.set(null)\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n\n        <div class=\"props-body\">\n\n          <!-- \u2500\u2500 G\u00C9N\u00C9RAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <section class=\"prop-section\">\n            <p class=\"prop-section-title\">G\u00E9n\u00E9ral</p>\n\n            <div class=\"prop-row\">\n              <label>Cl\u00E9 (key)</label>\n              <input [ngModel]=\"field.key\" (ngModelChange)=\"updateProp('key', $event)\" placeholder=\"mon_champ\" />\n            </div>\n\n            <div class=\"prop-row\">\n              <label>Largeur (col)</label>\n              <select [ngModel]=\"field.col ?? 12\" (ngModelChange)=\"updateProp('col', +$event)\">\n                @for (c of colOptions; track c) {\n                  <option [value]=\"c\">{{ c }} / 12</option>\n                }\n              </select>\n            </div>\n\n            @if (!isDivider(field.type) && !isHeading(field.type)) {\n              <div class=\"prop-row\">\n                <label>Label</label>\n                <input [ngModel]=\"field.label\" (ngModelChange)=\"updateProp('label', $event)\" placeholder=\"Libell\u00E9 du champ\" />\n              </div>\n            }\n\n            @if (isHeading(field.type)) {\n              <div class=\"prop-row\">\n                <label>Texte</label>\n                <input [ngModel]=\"field.text\" (ngModelChange)=\"updateProp('text', $event)\" placeholder=\"Titre de section\" />\n              </div>\n              <div class=\"prop-row\">\n                <label>Niveau (h1\u2013h6)</label>\n                <select [ngModel]=\"field.level ?? 3\" (ngModelChange)=\"updateProp('level', +$event)\">\n                  @for (n of [1,2,3,4,5,6]; track n) {\n                    <option [value]=\"n\">h{{ n }}</option>\n                  }\n                </select>\n              </div>\n            }\n          </section>\n\n          <!-- \u2500\u2500 SAISIE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (isInputField(field.type)) {\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Saisie</p>\n\n              <div class=\"prop-row\">\n                <label>Placeholder</label>\n                <input [ngModel]=\"field.placeholder\" (ngModelChange)=\"updateProp('placeholder', $event)\" placeholder=\"Texte indicatif\" />\n              </div>\n\n              <div class=\"prop-row\">\n                <label>Texte d'aide (hint)</label>\n                <input [ngModel]=\"field.hint\" (ngModelChange)=\"updateProp('hint', $event)\" placeholder=\"Aide visible sous le champ\" />\n              </div>\n\n              @if (needsRows(field.type)) {\n                <div class=\"prop-row\">\n                  <label>Lignes (rows)</label>\n                  <input type=\"number\" min=\"2\" max=\"20\" [ngModel]=\"field.rows ?? 4\" (ngModelChange)=\"updateProp('rows', +$event)\" />\n                </div>\n              }\n\n              <div class=\"prop-row\">\n                <label>\n                  <input type=\"checkbox\" [ngModel]=\"field.readonly ?? false\" (ngModelChange)=\"updateProp('readonly', $event)\" />\n                  Lecture seule (readonly)\n                </label>\n              </div>\n            </section>\n\n            <!-- \u2500\u2500 IC\u00D4NES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Ic\u00F4nes <span class=\"prop-hint\">Material Icons</span></p>\n              <div class=\"prop-row\">\n                <label>Pr\u00E9fixe (gauche)</label>\n                <input [ngModel]=\"field.icon\" (ngModelChange)=\"updateProp('icon', $event || undefined)\" placeholder=\"person, email, lock\u2026\" />\n              </div>\n              <div class=\"prop-row\">\n                <label>Suffixe (droite)</label>\n                <input [ngModel]=\"field.iconSuffix\" (ngModelChange)=\"updateProp('iconSuffix', $event || undefined)\" placeholder=\"visibility, search\u2026\" />\n              </div>\n            </section>\n\n            <!-- \u2500\u2500 VALIDATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Validation</p>\n\n              <div class=\"prop-row\">\n                <label>\n                  <input type=\"checkbox\" [ngModel]=\"!!field.validation?.required\" (ngModelChange)=\"updateValidation('required', $event)\" />\n                  Champ obligatoire (required)\n                </label>\n              </div>\n\n              @if (['text','email','password','textarea','url'].includes(field.type)) {\n                <div class=\"prop-row\">\n                  <label>Longueur min</label>\n                  <input type=\"number\" min=\"0\"\n                    [ngModel]=\"field.validation?.minLength ?? ''\"\n                    (ngModelChange)=\"updateValidation('minLength', $event ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n                <div class=\"prop-row\">\n                  <label>Longueur max</label>\n                  <input type=\"number\" min=\"0\"\n                    [ngModel]=\"field.validation?.maxLength ?? ''\"\n                    (ngModelChange)=\"updateValidation('maxLength', $event ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n              }\n\n              @if (field.type === 'number') {\n                <div class=\"prop-row\">\n                  <label>Valeur min</label>\n                  <input type=\"number\"\n                    [ngModel]=\"field.validation?.min ?? ''\"\n                    (ngModelChange)=\"updateValidation('min', $event !== '' ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n                <div class=\"prop-row\">\n                  <label>Valeur max</label>\n                  <input type=\"number\"\n                    [ngModel]=\"field.validation?.max ?? ''\"\n                    (ngModelChange)=\"updateValidation('max', $event !== '' ? +$event : null)\"\n                    placeholder=\"\u2013\" />\n                </div>\n              }\n\n              @if (field.type === 'email') {\n                <div class=\"prop-row\">\n                  <label>\n                    <input type=\"checkbox\" [ngModel]=\"!!field.validation?.email\" (ngModelChange)=\"updateValidation('email', $event)\" />\n                    Valider le format e-mail\n                  </label>\n                </div>\n              }\n\n              @if (field.type === 'file') {\n                <div class=\"prop-row\">\n                  <label>Types accept\u00E9s</label>\n                  <input [ngModel]=\"field.accept\" (ngModelChange)=\"updateProp('accept', $event)\" placeholder=\".pdf,.docx,image/*\" />\n                </div>\n                <div class=\"prop-row\">\n                  <label>\n                    <input type=\"checkbox\" [ngModel]=\"field.multiple ?? false\" (ngModelChange)=\"updateProp('multiple', $event)\" />\n                    Fichiers multiples\n                  </label>\n                </div>\n              }\n            </section>\n          }\n\n          <!-- \u2500\u2500 OPTIONS (select / radio) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (hasOptions(field.type)) {\n            <section class=\"prop-section\">\n              <p class=\"prop-section-title\">Options</p>\n              <div class=\"options-list\">\n                @for (opt of getOptions(); track trackByIdx($index); let oi = $index) {\n                  <div class=\"option-row\">\n                    <input placeholder=\"Label\" [ngModel]=\"opt.label\" (ngModelChange)=\"updateOption(oi, 'label', $event)\" />\n                    <input placeholder=\"Valeur\" [ngModel]=\"opt.value\" (ngModelChange)=\"updateOption(oi, 'value', $event)\" />\n                    <button class=\"action-btn danger\" (click)=\"removeOption(oi)\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </div>\n                }\n              </div>\n              <button class=\"btn-add-option\" (click)=\"addOption()\">\n                <mat-icon>add</mat-icon> Ajouter une option\n              </button>\n            </section>\n          }\n\n        </div>\n\n      } @else {\n        <div class=\"props-empty\">\n          <mat-icon>tune</mat-icon>\n          <p>S\u00E9lectionnez un champ pour modifier ses propri\u00E9t\u00E9s</p>\n        </div>\n      }\n\n    </aside>\n\n  </div><!-- /.builder-body -->\n\n</div><!-- /.builder-root -->\n\n<!-- \u2500\u2500 Export Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showExport()) {\n  <div class=\"modal-overlay\" (click)=\"showExport.set(false)\">\n    <div class=\"modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <span>Code export\u00E9</span>\n        <button (click)=\"showExport.set(false)\"><mat-icon>close</mat-icon></button>\n      </div>\n      <textarea class=\"modal-code\" readonly [value]=\"exportContent()\"></textarea>\n      <div class=\"modal-footer\">\n        <button class=\"btn-primary\" (click)=\"copyExport()\">\n          <mat-icon>content_copy</mat-icon> Copier\n        </button>\n        <button class=\"btn-outline\" (click)=\"showExport.set(false)\">Fermer</button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100vh;overflow:hidden;font-family:Roboto,sans-serif;--palette-w: 210px;--props-w: 280px;--topbar-h: 52px;--border: #e2e8f0;--bg: #f8fafc;--surface: #ffffff;--primary: #2563eb;--primary-light: #eff6ff;--danger: #dc2626;--text: #1e293b;--text-muted: #64748b;--radius: 8px}.topbar{display:flex;align-items:center;gap:1rem;height:var(--topbar-h);padding:0 1rem;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 1px 4px #0000000f;z-index:10;flex-shrink:0}.topbar-back{display:inline-flex;align-items:center;gap:.25rem;color:var(--text-muted);text-decoration:none;font-size:.85rem;white-space:nowrap}.topbar-back:hover{color:var(--primary)}.topbar-back mat-icon{font-size:1rem;width:1rem;height:1rem}.topbar-center{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.topbar-logo{color:var(--primary);flex-shrink:0}.title-input{flex:1;min-width:0;border:none;border-bottom:2px solid transparent;background:transparent;font-size:1rem;font-weight:600;color:var(--text);padding:.25rem .5rem;border-radius:4px;outline:none;transition:border-color .15s}.title-input:focus{border-bottom-color:var(--primary)}.title-input::placeholder{color:var(--text-muted);font-weight:400}.topbar-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:transparent;border-radius:var(--radius);color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}.btn-icon:hover{background:var(--bg);color:var(--text)}.btn-icon mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem}.btn-outline{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);font-size:.82rem;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}.btn-outline:hover{background:var(--bg);border-color:#cbd5e1}.btn-outline mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.btn-primary{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .85rem;border:none;background:var(--primary);color:#fff;border-radius:var(--radius);font-size:.85rem;font-weight:500;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#1d4ed8}.btn-primary mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.builder-body{display:grid;grid-template-columns:var(--palette-w) 1fr var(--props-w);height:calc(100vh - var(--topbar-h));overflow:hidden}.palette{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:.75rem .5rem;gap:1rem}.palette-section{display:flex;flex-direction:column;gap:.2rem}.palette-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:.25rem .5rem;margin:.4rem 0 .2rem}.palette-group-label{font-size:.7rem;color:var(--text-muted);padding:.1rem .5rem;margin-top:.4rem;margin-bottom:.05rem}.palette-btn{display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;border:none;background:transparent;border-radius:6px;color:var(--text);font-size:.82rem;cursor:pointer;text-align:left;transition:background .12s}.palette-btn:hover{background:var(--primary-light);color:var(--primary)}.palette-btn mat-icon{font-size:1rem;width:1rem;height:1rem;color:var(--text-muted)}.palette-btn:hover mat-icon{color:var(--primary)}.palette-empty{font-size:.78rem;color:var(--text-muted);padding:.25rem .5rem;font-style:italic}.saved-item{display:flex;align-items:center;border-radius:6px;overflow:hidden}.saved-item.active{background:var(--primary-light)}.saved-item .saved-item-name{flex:1;display:flex;align-items:center;gap:.35rem;padding:.4rem .5rem;border:none;background:transparent;font-size:.8rem;color:var(--text);cursor:pointer;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;transition:color .12s}.saved-item .saved-item-name:hover{color:var(--primary)}.saved-item .saved-item-name mat-icon{font-size:.9rem;width:.9rem;height:.9rem;flex-shrink:0}.saved-item .saved-item-name span{overflow:hidden;text-overflow:ellipsis}.saved-item .saved-item-delete{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .12s,background .12s}.saved-item .saved-item-delete:hover{color:var(--danger);background:#fee2e2}.saved-item .saved-item-delete mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.canvas{display:flex;flex-direction:column;background:var(--bg);overflow:hidden}.canvas-tabs{display:flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.canvas-tab{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:1px solid transparent;background:transparent;border-radius:var(--radius);font-size:.82rem;color:var(--text-muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}.canvas-tab mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.canvas-tab.active{background:var(--primary-light);color:var(--primary);border-color:#bfdbfe;font-weight:500}.canvas-tab:not(.active):hover{background:var(--bg);color:var(--text)}.canvas-tabs-info{margin-left:auto;font-size:.78rem;color:var(--text-muted)}.schema-view{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.empty-canvas{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:3rem 1rem;color:var(--text-muted);text-align:center;border:2px dashed var(--border);border-radius:var(--radius)}.empty-canvas mat-icon{font-size:2.5rem;width:2.5rem;height:2.5rem;opacity:.5}.empty-canvas p{font-size:.9rem;margin:0}.field-list{display:flex;flex-direction:column;gap:.5rem}.field-card{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}.field-card:hover{border-color:#93c5fd;box-shadow:0 1px 6px #2563eb1a}.field-card.selected{border-color:var(--primary);box-shadow:0 0 0 2px #bfdbfe}.field-card-icon{font-size:1.2rem;width:1.2rem;height:1.2rem;color:var(--primary);flex-shrink:0}.field-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.field-card-label{font-size:.85rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-card-meta{font-size:.72rem;color:var(--text-muted)}.field-card-key{font-size:.72rem;background:#f1f5f9;color:#0f172a;padding:.1rem .35rem;border-radius:4px;font-family:Fira Code,Courier New,monospace;white-space:nowrap;flex-shrink:0}.field-card-actions{display:flex;align-items:center;gap:.15rem;flex-shrink:0}.action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:5px;color:var(--text-muted);cursor:pointer;transition:background .12s,color .12s}.action-btn:hover{background:var(--bg);color:var(--text)}.action-btn.danger:hover{background:#fee2e2;color:var(--danger)}.action-btn:disabled{opacity:.35;pointer-events:none}.action-btn mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.form-settings{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.settings-title{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .25rem}.settings-title mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.settings-row{display:flex;align-items:center;gap:.75rem;font-size:.83rem}.settings-row label{display:flex;align-items:center;gap:.4rem;color:var(--text);white-space:nowrap;cursor:pointer;min-width:130px}.settings-row input[type=text],.settings-row input:not([type=checkbox]){flex:1;padding:.3rem .5rem;border:1px solid var(--border);border-radius:5px;font-size:.83rem;outline:none}.settings-row input[type=text]:focus,.settings-row input:not([type=checkbox]):focus{border-color:var(--primary)}.preview-view{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;align-items:center}.preview-wrapper{width:100%;max-width:720px;display:flex;flex-direction:column;gap:.75rem}.preview-hint{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text-muted);background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:.4rem .75rem;margin:0}.preview-hint mat-icon{font-size:.9rem;width:.9rem;height:.9rem;color:#b45309}.properties{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.props-header{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;background:var(--primary-light);border-bottom:1px solid #bfdbfe;flex-shrink:0}.props-header mat-icon{color:var(--primary);font-size:1rem;width:1rem;height:1rem}.props-header span{flex:1;font-size:.85rem;font-weight:600;color:var(--primary)}.props-close{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:4px;transition:background .12s}.props-close:hover{background:#dbeafe}.props-close mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.props-body{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.25rem}.props-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--text-muted);padding:2rem 1rem;text-align:center}.props-empty mat-icon{font-size:2rem;width:2rem;height:2rem;opacity:.4}.props-empty p{font-size:.85rem;margin:0;max-width:180px}.prop-section{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:.6rem .75rem;display:flex;flex-direction:column;gap:.4rem}.prop-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 .3rem;display:flex;align-items:center;gap:.4rem}.prop-hint{font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:0;color:#94a3b8;margin-left:.25rem}.prop-row{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem}.prop-row>label{display:flex;align-items:center;gap:.4rem;color:var(--text);font-size:.8rem;cursor:pointer}.prop-row>input[type=text],.prop-row>input[type=number],.prop-row>input:not([type=checkbox]),.prop-row>select{width:100%;padding:.3rem .5rem;border:1px solid var(--border);border-radius:5px;font-size:.82rem;color:var(--text);background:var(--surface);outline:none;box-sizing:border-box;transition:border-color .12s}.prop-row>input[type=text]:focus,.prop-row>input[type=number]:focus,.prop-row>input:not([type=checkbox]):focus,.prop-row>select:focus{border-color:var(--primary)}.options-list{display:flex;flex-direction:column;gap:.35rem}.option-row{display:flex;align-items:center;gap:.3rem}.option-row input{flex:1;padding:.28rem .45rem;border:1px solid var(--border);border-radius:5px;font-size:.78rem;outline:none}.option-row input:focus{border-color:var(--primary)}.option-row .action-btn{width:24px;height:24px;flex-shrink:0}.option-row .action-btn mat-icon{font-size:.85rem;width:.85rem;height:.85rem}.btn-add-option{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .6rem;border:1px dashed var(--border);background:transparent;border-radius:5px;font-size:.78rem;color:var(--text-muted);cursor:pointer;transition:border-color .12s,color .12s;margin-top:.25rem}.btn-add-option:hover{border-color:var(--primary);color:var(--primary)}.btn-add-option mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.modal-overlay{position:fixed;inset:0;background:#00000073;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem}.modal{background:var(--surface);border-radius:10px;box-shadow:0 20px 60px #0003;display:flex;flex-direction:column;width:100%;max-width:700px;max-height:80vh;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.9rem}.modal-header button{display:flex;align-items:center;border:none;background:transparent;cursor:pointer;color:var(--text-muted);border-radius:4px;padding:.2rem;transition:background .12s}.modal-header button:hover{background:var(--bg)}.modal-header button mat-icon{font-size:1rem;width:1rem;height:1rem}.modal-code{flex:1;padding:1rem;font-family:Fira Code,Courier New,monospace;font-size:.8rem;color:var(--text);border:none;resize:none;outline:none;background:#1e293b;color:#e2e8f0;overflow-y:auto;min-height:320px}.modal-footer{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border);justify-content:flex-end}\n"] }]
+        }], propDecorators: { backRoute: [{
+                type: Input
+            }] } });
+
+class MesFormulairesComponent {
+    constructor() {
+        /** Route vers le builder (lien "Nouveau formulaire" et actions d'édition) */
+        this.builderRoute = '/builder';
+        /** Préfixe de route pour l'ouverture d'un formulaire par ID */
+        this.formRoute = '/form';
+        /** Route du lien "Retour" */
+        this.backRoute = '/';
+        this.formService = inject(FormConfigService);
+        this.savedForms = this.formService.schemas;
+        this.selectedId = signal(null);
+        this.submitted = signal(false);
+        this.submitData = signal({});
+        this.activeConfig = computed(() => {
+            const id = this.selectedId();
+            return id ? (this.formService.get(id)?.config ?? null) : null;
+        });
+        this.activeSchema = computed(() => {
+            const id = this.selectedId();
+            return id ? (this.formService.get(id) ?? null) : null;
+        });
+    }
+    selectForm(id) {
+        if (this.selectedId() === id) {
+            this.selectedId.set(null);
+        }
+        else {
+            this.selectedId.set(id);
+            this.submitted.set(false);
+            this.submitData.set({});
+        }
+    }
+    onSubmit(event) {
+        this.submitData.set(event.value);
+        this.submitted.set(true);
+    }
+    resetForm() {
+        this.submitted.set(false);
+        this.submitData.set({});
+    }
+    deleteForm(id, e) {
+        e.stopPropagation();
+        this.formService.delete(id).subscribe(() => {
+            if (this.selectedId() === id)
+                this.selectedId.set(null);
+        });
+    }
+    formatDate(iso) {
+        return new Date(iso).toLocaleDateString('fr-FR', {
+            day: '2-digit', month: 'short', year: 'numeric',
+            hour: '2-digit', minute: '2-digit',
+        });
+    }
+    fieldCount(config) {
+        return config.fields?.filter(f => f.type !== 'divider' && f.type !== 'heading').length ?? 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MesFormulairesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MesFormulairesComponent, isStandalone: true, selector: "ngx-mes-formulaires", inputs: { builderRoute: "builderRoute", formRoute: "formRoute", backRoute: "backRoute" }, ngImport: i0, template: "<div class=\"page\">\n\n  <header class=\"page-header\">\n    <a [routerLink]=\"backRoute\" class=\"back-link\">\n      <mat-icon>arrow_back</mat-icon>\n    </a>\n    <div class=\"header-text\">\n      <h1>Mes Formulaires</h1>\n      <p>S\u00E9lectionnez un formulaire pour le charger via <code>FormConfigService</code></p>\n    </div>\n    <a [routerLink]=\"builderRoute\" class=\"btn-primary\">\n      <mat-icon>add</mat-icon> Nouveau formulaire\n    </a>\n  </header>\n\n  <div class=\"page-body\">\n\n    <!-- \u2550\u2550\u2550\u2550 COLONNE GAUCHE : liste des formulaires \u2550\u2550\u2550\u2550 -->\n    <aside class=\"sidebar\">\n\n      <p class=\"sidebar-title\">\n        <mat-icon>folder_open</mat-icon>\n        {{ savedForms().length }} formulaire{{ savedForms().length !== 1 ? 's' : '' }} sauvegard\u00E9{{ savedForms().length !== 1 ? 's' : '' }}\n      </p>\n\n      @if (savedForms().length === 0) {\n        <div class=\"empty-state\">\n          <mat-icon>inbox</mat-icon>\n          <p>Aucun formulaire sauvegard\u00E9</p>\n          <a [routerLink]=\"builderRoute\" class=\"btn-outline-sm\">\n            <mat-icon>add</mat-icon> Cr\u00E9er un formulaire\n          </a>\n        </div>\n      }\n\n      <div class=\"form-list\">\n        @for (schema of savedForms(); track schema.id) {\n          <div\n            class=\"form-item\"\n            [class.active]=\"selectedId() === schema.id\"\n            (click)=\"selectForm(schema.id)\"\n            role=\"button\"\n            tabindex=\"0\"\n          >\n            <div class=\"form-item-icon\">\n              <mat-icon>description</mat-icon>\n            </div>\n\n            <div class=\"form-item-body\">\n              <span class=\"form-item-title\">{{ schema.title }}</span>\n              <span class=\"form-item-meta\">\n                {{ fieldCount(schema.config) }} champ{{ fieldCount(schema.config) !== 1 ? 's' : '' }}\n                &nbsp;\u00B7&nbsp; {{ formatDate(schema.updatedAt) }}\n              </span>\n              <code class=\"form-item-id\">ID : {{ schema.id }}</code>\n            </div>\n\n            <div class=\"form-item-actions\">\n              <a\n                [routerLink]=\"[formRoute, schema.id]\"\n                class=\"action-icon\"\n                title=\"Ouvrir dans la page d\u00E9di\u00E9e\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>open_in_new</mat-icon>\n              </a>\n              <a\n                [routerLink]=\"builderRoute\"\n                class=\"action-icon\"\n                title=\"\u00C9diter dans le Builder\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>edit</mat-icon>\n              </a>\n              <button\n                class=\"action-icon danger\"\n                title=\"Supprimer\"\n                (click)=\"deleteForm(schema.id, $event)\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"code-hint\">\n        <p class=\"code-hint-title\">\n          <mat-icon>integration_instructions</mat-icon> Chargement par ID\n        </p>\n        <pre class=\"code-block\">private formService = inject(FormConfigService);\n\nconst schema = this.formService.get('{{ selectedId() ?? \"votre-id\" }}');\nthis.config.set(schema?.config ?? null);</pre>\n      </div>\n\n    </aside>\n\n    <!-- \u2550\u2550\u2550\u2550 COLONNE DROITE : rendu du formulaire \u2550\u2550\u2550\u2550 -->\n    <main class=\"content\">\n\n      @if (!selectedId()) {\n        <div class=\"select-hint\">\n          <mat-icon>arrow_back</mat-icon>\n          <p>S\u00E9lectionnez un formulaire \u00E0 gauche pour le charger</p>\n        </div>\n      }\n\n      @if (selectedId() && activeConfig(); as config) {\n\n        @if (!submitted()) {\n          <div class=\"form-card\">\n\n            <div class=\"form-card-header\">\n              <mat-icon>dynamic_form</mat-icon>\n              <div>\n                <h2>{{ activeSchema()?.title }}</h2>\n                <span class=\"loaded-badge\">\n                  <mat-icon>check_circle</mat-icon>\n                  Charg\u00E9 via <code>FormConfigService.get('{{ selectedId() }}')</code>\n                </span>\n              </div>\n            </div>\n\n            <ngx-dynamic-form\n              [config]=\"config\"\n              (formSubmit)=\"onSubmit($event)\"\n            />\n\n          </div>\n        }\n\n        @if (submitted()) {\n          <div class=\"result-card\">\n            <mat-icon class=\"result-icon\">check_circle</mat-icon>\n            <h2>Donn\u00E9es soumises avec succ\u00E8s</h2>\n            <p class=\"result-sub\">\n              Les donn\u00E9es ci-dessous ont \u00E9t\u00E9 re\u00E7ues par <code>onSubmit(event)</code>\n            </p>\n\n            <div class=\"result-data\">\n              <p class=\"result-data-title\">event.value :</p>\n              <pre>{{ submitData() | json }}</pre>\n            </div>\n\n            <div class=\"result-actions\">\n              <button class=\"btn-outline\" (click)=\"resetForm()\">\n                <mat-icon>refresh</mat-icon> Recommencer\n              </button>\n              <a class=\"btn-primary\" [routerLink]=\"builderRoute\">\n                <mat-icon>dashboard_customize</mat-icon> Builder\n              </a>\n            </div>\n          </div>\n        }\n\n      }\n\n      @if (selectedId() && !activeConfig()) {\n        <div class=\"select-hint error\">\n          <mat-icon>error_outline</mat-icon>\n          <p>Formulaire introuvable pour l'ID <code>{{ selectedId() }}</code></p>\n        </div>\n      }\n\n    </main>\n\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-height:100vh;background:#f8fafc;font-family:Roboto,sans-serif}.page{display:flex;flex-direction:column;height:100vh;overflow:hidden}.page-header{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 4px #0000000f;flex-shrink:0}.back-link{display:flex;align-items:center;color:#64748b;text-decoration:none;padding:.2rem;border-radius:6px;transition:color .15s,background .15s}.back-link:hover{color:#2563eb;background:#eff6ff}.back-link mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem}.header-text{flex:1}.header-text h1{font-size:1.1rem;font-weight:700;color:#1e293b;margin:0}.header-text p{font-size:.78rem;color:#64748b;margin:.15rem 0 0}.header-text p code{background:#f1f5f9;padding:.1rem .3rem;border-radius:3px;font-size:.75rem;color:#0f172a}.page-body{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - 64px);overflow:hidden}.sidebar{background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;overflow-y:auto;padding:1rem .75rem;gap:.75rem}.sidebar-title{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin:0 0 .25rem .1rem}.sidebar-title mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.empty-state{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2rem 1rem;text-align:center;color:#94a3b8;border:2px dashed #e2e8f0;border-radius:8px}.empty-state mat-icon{font-size:2rem;width:2rem;height:2rem;opacity:.5}.empty-state p{font-size:.85rem;margin:0}.form-list{display:flex;flex-direction:column;gap:.4rem}.form-item{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;position:relative}.form-item:hover{border-color:#93c5fd;background:#f8faff}.form-item.active{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 2px #bfdbfe}.form-item-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#f1f5f9;border-radius:7px;flex-shrink:0;margin-top:.1rem}.form-item.active .form-item-icon{background:#dbeafe}.form-item-icon mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;color:#64748b}.form-item.active .form-item-icon mat-icon{color:#2563eb}.form-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}.form-item-title{font-size:.88rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.form-item-meta{font-size:.72rem;color:#94a3b8}.form-item-id{font-size:.68rem;color:#94a3b8;font-family:Courier New,monospace;background:#f1f5f9;padding:.1rem .3rem;border-radius:3px;align-self:flex-start}.form-item-actions{display:flex;flex-direction:column;gap:.15rem;flex-shrink:0}.action-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;border-radius:5px;color:#94a3b8;cursor:pointer;text-decoration:none;transition:background .12s,color .12s}.action-icon:hover{background:#f1f5f9;color:#1e293b}.action-icon.danger:hover{background:#fee2e2;color:#dc2626}.action-icon mat-icon{font-size:.85rem;width:.85rem;height:.85rem}.code-hint{background:#1e293b;border-radius:8px;padding:.85rem;margin-top:auto}.code-hint-title{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:#94a3b8;margin:0 0 .6rem}.code-hint-title mat-icon{font-size:.85rem;width:.85rem;height:.85rem;color:#60a5fa}.code-block{margin:0;font-size:.72rem;font-family:Fira Code,Courier New,monospace;color:#7dd3fc;white-space:pre-wrap;line-height:1.65}.content{overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;align-items:center}.select-hint{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:4rem 1rem;color:#94a3b8;text-align:center}.select-hint mat-icon{font-size:2.5rem;width:2.5rem;height:2.5rem;opacity:.5}.select-hint p{font-size:.9rem;margin:0;max-width:260px}.select-hint.error{color:#dc2626}.select-hint.error mat-icon{opacity:1}.select-hint.error code{background:#fee2e2;padding:.1rem .35rem;border-radius:4px;font-family:monospace;font-size:.85rem}.form-card{width:100%;max-width:700px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px #0000000f}.form-card-header{display:flex;align-items:flex-start;gap:.85rem;padding:1.1rem 1.25rem;background:#eff6ff;border-bottom:1px solid #bfdbfe}.form-card-header>mat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem;color:#2563eb;margin-top:.15rem;flex-shrink:0}.form-card-header h2{font-size:1rem;font-weight:700;color:#1e293b;margin:0 0 .35rem}.loaded-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:#059669}.loaded-badge mat-icon{font-size:.8rem;width:.8rem;height:.8rem}.loaded-badge code{background:#d1fae5;padding:.1rem .3rem;border-radius:3px;font-size:.7rem;color:#065f46;font-family:Courier New,monospace}.form-card ngx-dynamic-form{display:block;padding:1.25rem}.result-card{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:620px;background:#fff;border:1.5px solid #bbf7d0;border-radius:12px;padding:2.5rem 2rem;text-align:center;box-shadow:0 4px 20px #16a34a14}.result-icon{font-size:3rem;width:3rem;height:3rem;color:#16a34a}.result-card h2{font-size:1.2rem;color:#1e293b;margin:0}.result-sub{font-size:.85rem;color:#64748b;margin:0}.result-sub code{background:#f1f5f9;padding:.1rem .3rem;border-radius:3px;font-family:monospace;font-size:.8rem}.result-data{width:100%;background:#1e293b;border-radius:8px;padding:1rem;text-align:left;overflow:auto}.result-data-title{font-size:.72rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .5rem}.result-data pre{margin:0;font-size:.78rem;font-family:Fira Code,monospace;color:#7dd3fc;white-space:pre-wrap;word-break:break-all}.result-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn-primary{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:none;background:#2563eb;color:#fff;border-radius:7px;font-size:.85rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#1d4ed8}.btn-primary mat-icon{font-size:1rem;width:1rem;height:1rem}.btn-outline{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:1px solid #e2e8f0;background:#fff;color:#1e293b;border-radius:7px;font-size:.85rem;cursor:pointer;text-decoration:none;transition:border-color .15s}.btn-outline:hover{border-color:#94a3b8}.btn-outline mat-icon{font-size:1rem;width:1rem;height:1rem}.btn-outline-sm{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .7rem;border:1px solid #cbd5e1;background:#fff;color:#64748b;border-radius:6px;font-size:.78rem;text-decoration:none;transition:border-color .15s,color .15s}.btn-outline-sm:hover{border-color:#2563eb;color:#2563eb}.btn-outline-sm mat-icon{font-size:.85rem;width:.85rem;height:.85rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "initialValues"], outputs: ["formSubmit", "formChange", "formReset"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MesFormulairesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mes-formulaires', standalone: true, imports: [RouterLink, MatIcon, DynamicFormComponent, JsonPipe], template: "<div class=\"page\">\n\n  <header class=\"page-header\">\n    <a [routerLink]=\"backRoute\" class=\"back-link\">\n      <mat-icon>arrow_back</mat-icon>\n    </a>\n    <div class=\"header-text\">\n      <h1>Mes Formulaires</h1>\n      <p>S\u00E9lectionnez un formulaire pour le charger via <code>FormConfigService</code></p>\n    </div>\n    <a [routerLink]=\"builderRoute\" class=\"btn-primary\">\n      <mat-icon>add</mat-icon> Nouveau formulaire\n    </a>\n  </header>\n\n  <div class=\"page-body\">\n\n    <!-- \u2550\u2550\u2550\u2550 COLONNE GAUCHE : liste des formulaires \u2550\u2550\u2550\u2550 -->\n    <aside class=\"sidebar\">\n\n      <p class=\"sidebar-title\">\n        <mat-icon>folder_open</mat-icon>\n        {{ savedForms().length }} formulaire{{ savedForms().length !== 1 ? 's' : '' }} sauvegard\u00E9{{ savedForms().length !== 1 ? 's' : '' }}\n      </p>\n\n      @if (savedForms().length === 0) {\n        <div class=\"empty-state\">\n          <mat-icon>inbox</mat-icon>\n          <p>Aucun formulaire sauvegard\u00E9</p>\n          <a [routerLink]=\"builderRoute\" class=\"btn-outline-sm\">\n            <mat-icon>add</mat-icon> Cr\u00E9er un formulaire\n          </a>\n        </div>\n      }\n\n      <div class=\"form-list\">\n        @for (schema of savedForms(); track schema.id) {\n          <div\n            class=\"form-item\"\n            [class.active]=\"selectedId() === schema.id\"\n            (click)=\"selectForm(schema.id)\"\n            role=\"button\"\n            tabindex=\"0\"\n          >\n            <div class=\"form-item-icon\">\n              <mat-icon>description</mat-icon>\n            </div>\n\n            <div class=\"form-item-body\">\n              <span class=\"form-item-title\">{{ schema.title }}</span>\n              <span class=\"form-item-meta\">\n                {{ fieldCount(schema.config) }} champ{{ fieldCount(schema.config) !== 1 ? 's' : '' }}\n                &nbsp;\u00B7&nbsp; {{ formatDate(schema.updatedAt) }}\n              </span>\n              <code class=\"form-item-id\">ID : {{ schema.id }}</code>\n            </div>\n\n            <div class=\"form-item-actions\">\n              <a\n                [routerLink]=\"[formRoute, schema.id]\"\n                class=\"action-icon\"\n                title=\"Ouvrir dans la page d\u00E9di\u00E9e\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>open_in_new</mat-icon>\n              </a>\n              <a\n                [routerLink]=\"builderRoute\"\n                class=\"action-icon\"\n                title=\"\u00C9diter dans le Builder\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <mat-icon>edit</mat-icon>\n              </a>\n              <button\n                class=\"action-icon danger\"\n                title=\"Supprimer\"\n                (click)=\"deleteForm(schema.id, $event)\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"code-hint\">\n        <p class=\"code-hint-title\">\n          <mat-icon>integration_instructions</mat-icon> Chargement par ID\n        </p>\n        <pre class=\"code-block\">private formService = inject(FormConfigService);\n\nconst schema = this.formService.get('{{ selectedId() ?? \"votre-id\" }}');\nthis.config.set(schema?.config ?? null);</pre>\n      </div>\n\n    </aside>\n\n    <!-- \u2550\u2550\u2550\u2550 COLONNE DROITE : rendu du formulaire \u2550\u2550\u2550\u2550 -->\n    <main class=\"content\">\n\n      @if (!selectedId()) {\n        <div class=\"select-hint\">\n          <mat-icon>arrow_back</mat-icon>\n          <p>S\u00E9lectionnez un formulaire \u00E0 gauche pour le charger</p>\n        </div>\n      }\n\n      @if (selectedId() && activeConfig(); as config) {\n\n        @if (!submitted()) {\n          <div class=\"form-card\">\n\n            <div class=\"form-card-header\">\n              <mat-icon>dynamic_form</mat-icon>\n              <div>\n                <h2>{{ activeSchema()?.title }}</h2>\n                <span class=\"loaded-badge\">\n                  <mat-icon>check_circle</mat-icon>\n                  Charg\u00E9 via <code>FormConfigService.get('{{ selectedId() }}')</code>\n                </span>\n              </div>\n            </div>\n\n            <ngx-dynamic-form\n              [config]=\"config\"\n              (formSubmit)=\"onSubmit($event)\"\n            />\n\n          </div>\n        }\n\n        @if (submitted()) {\n          <div class=\"result-card\">\n            <mat-icon class=\"result-icon\">check_circle</mat-icon>\n            <h2>Donn\u00E9es soumises avec succ\u00E8s</h2>\n            <p class=\"result-sub\">\n              Les donn\u00E9es ci-dessous ont \u00E9t\u00E9 re\u00E7ues par <code>onSubmit(event)</code>\n            </p>\n\n            <div class=\"result-data\">\n              <p class=\"result-data-title\">event.value :</p>\n              <pre>{{ submitData() | json }}</pre>\n            </div>\n\n            <div class=\"result-actions\">\n              <button class=\"btn-outline\" (click)=\"resetForm()\">\n                <mat-icon>refresh</mat-icon> Recommencer\n              </button>\n              <a class=\"btn-primary\" [routerLink]=\"builderRoute\">\n                <mat-icon>dashboard_customize</mat-icon> Builder\n              </a>\n            </div>\n          </div>\n        }\n\n      }\n\n      @if (selectedId() && !activeConfig()) {\n        <div class=\"select-hint error\">\n          <mat-icon>error_outline</mat-icon>\n          <p>Formulaire introuvable pour l'ID <code>{{ selectedId() }}</code></p>\n        </div>\n      }\n\n    </main>\n\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-height:100vh;background:#f8fafc;font-family:Roboto,sans-serif}.page{display:flex;flex-direction:column;height:100vh;overflow:hidden}.page-header{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 4px #0000000f;flex-shrink:0}.back-link{display:flex;align-items:center;color:#64748b;text-decoration:none;padding:.2rem;border-radius:6px;transition:color .15s,background .15s}.back-link:hover{color:#2563eb;background:#eff6ff}.back-link mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem}.header-text{flex:1}.header-text h1{font-size:1.1rem;font-weight:700;color:#1e293b;margin:0}.header-text p{font-size:.78rem;color:#64748b;margin:.15rem 0 0}.header-text p code{background:#f1f5f9;padding:.1rem .3rem;border-radius:3px;font-size:.75rem;color:#0f172a}.page-body{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - 64px);overflow:hidden}.sidebar{background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;overflow-y:auto;padding:1rem .75rem;gap:.75rem}.sidebar-title{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin:0 0 .25rem .1rem}.sidebar-title mat-icon{font-size:.9rem;width:.9rem;height:.9rem}.empty-state{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2rem 1rem;text-align:center;color:#94a3b8;border:2px dashed #e2e8f0;border-radius:8px}.empty-state mat-icon{font-size:2rem;width:2rem;height:2rem;opacity:.5}.empty-state p{font-size:.85rem;margin:0}.form-list{display:flex;flex-direction:column;gap:.4rem}.form-item{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;position:relative}.form-item:hover{border-color:#93c5fd;background:#f8faff}.form-item.active{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 2px #bfdbfe}.form-item-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#f1f5f9;border-radius:7px;flex-shrink:0;margin-top:.1rem}.form-item.active .form-item-icon{background:#dbeafe}.form-item-icon mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;color:#64748b}.form-item.active .form-item-icon mat-icon{color:#2563eb}.form-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}.form-item-title{font-size:.88rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.form-item-meta{font-size:.72rem;color:#94a3b8}.form-item-id{font-size:.68rem;color:#94a3b8;font-family:Courier New,monospace;background:#f1f5f9;padding:.1rem .3rem;border-radius:3px;align-self:flex-start}.form-item-actions{display:flex;flex-direction:column;gap:.15rem;flex-shrink:0}.action-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;border-radius:5px;color:#94a3b8;cursor:pointer;text-decoration:none;transition:background .12s,color .12s}.action-icon:hover{background:#f1f5f9;color:#1e293b}.action-icon.danger:hover{background:#fee2e2;color:#dc2626}.action-icon mat-icon{font-size:.85rem;width:.85rem;height:.85rem}.code-hint{background:#1e293b;border-radius:8px;padding:.85rem;margin-top:auto}.code-hint-title{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:#94a3b8;margin:0 0 .6rem}.code-hint-title mat-icon{font-size:.85rem;width:.85rem;height:.85rem;color:#60a5fa}.code-block{margin:0;font-size:.72rem;font-family:Fira Code,Courier New,monospace;color:#7dd3fc;white-space:pre-wrap;line-height:1.65}.content{overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;align-items:center}.select-hint{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:4rem 1rem;color:#94a3b8;text-align:center}.select-hint mat-icon{font-size:2.5rem;width:2.5rem;height:2.5rem;opacity:.5}.select-hint p{font-size:.9rem;margin:0;max-width:260px}.select-hint.error{color:#dc2626}.select-hint.error mat-icon{opacity:1}.select-hint.error code{background:#fee2e2;padding:.1rem .35rem;border-radius:4px;font-family:monospace;font-size:.85rem}.form-card{width:100%;max-width:700px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px #0000000f}.form-card-header{display:flex;align-items:flex-start;gap:.85rem;padding:1.1rem 1.25rem;background:#eff6ff;border-bottom:1px solid #bfdbfe}.form-card-header>mat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem;color:#2563eb;margin-top:.15rem;flex-shrink:0}.form-card-header h2{font-size:1rem;font-weight:700;color:#1e293b;margin:0 0 .35rem}.loaded-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:#059669}.loaded-badge mat-icon{font-size:.8rem;width:.8rem;height:.8rem}.loaded-badge code{background:#d1fae5;padding:.1rem .3rem;border-radius:3px;font-size:.7rem;color:#065f46;font-family:Courier New,monospace}.form-card ngx-dynamic-form{display:block;padding:1.25rem}.result-card{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:620px;background:#fff;border:1.5px solid #bbf7d0;border-radius:12px;padding:2.5rem 2rem;text-align:center;box-shadow:0 4px 20px #16a34a14}.result-icon{font-size:3rem;width:3rem;height:3rem;color:#16a34a}.result-card h2{font-size:1.2rem;color:#1e293b;margin:0}.result-sub{font-size:.85rem;color:#64748b;margin:0}.result-sub code{background:#f1f5f9;padding:.1rem .3rem;border-radius:3px;font-family:monospace;font-size:.8rem}.result-data{width:100%;background:#1e293b;border-radius:8px;padding:1rem;text-align:left;overflow:auto}.result-data-title{font-size:.72rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .5rem}.result-data pre{margin:0;font-size:.78rem;font-family:Fira Code,monospace;color:#7dd3fc;white-space:pre-wrap;word-break:break-all}.result-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn-primary{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:none;background:#2563eb;color:#fff;border-radius:7px;font-size:.85rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#1d4ed8}.btn-primary mat-icon{font-size:1rem;width:1rem;height:1rem}.btn-outline{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:1px solid #e2e8f0;background:#fff;color:#1e293b;border-radius:7px;font-size:.85rem;cursor:pointer;text-decoration:none;transition:border-color .15s}.btn-outline:hover{border-color:#94a3b8}.btn-outline mat-icon{font-size:1rem;width:1rem;height:1rem}.btn-outline-sm{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .7rem;border:1px solid #cbd5e1;background:#fff;color:#64748b;border-radius:6px;font-size:.78rem;text-decoration:none;transition:border-color .15s,color .15s}.btn-outline-sm:hover{border-color:#2563eb;color:#2563eb}.btn-outline-sm mat-icon{font-size:.85rem;width:.85rem;height:.85rem}\n"] }]
+        }], propDecorators: { builderRoute: [{
+                type: Input
+            }], formRoute: [{
+                type: Input
+            }], backRoute: [{
+                type: Input
+            }] } });
+
+class FormLoaderComponent {
+    constructor() {
+        /** Route du lien "Retour" */
+        this.backRoute = '/';
+        /** Route vers le builder */
+        this.builderRoute = '/builder';
+        this.route = inject(ActivatedRoute, { optional: true });
+        this.formService = inject(FormConfigService);
+        this.config = signal(null);
+        this.formTitle = signal('');
+        this.schemaId = signal('');
+        this.submitted = signal(false);
+        this.submitData = signal({});
+        this.notFound = signal(false);
+    }
+    ngOnInit() {
+        const id = this.formId
+            ?? this.route?.snapshot?.paramMap?.get('id')
+            ?? '';
+        this.schemaId.set(id);
+        const schema = this.formService.get(id);
+        if (schema) {
+            this.config.set(schema.config);
+            this.formTitle.set(schema.title);
+        }
+        else {
+            this.notFound.set(true);
+        }
+    }
+    onSubmit(event) {
+        this.submitData.set(event.value);
+        this.submitted.set(true);
+    }
+    reset() {
+        this.submitted.set(false);
+        this.submitData.set({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormLoaderComponent, isStandalone: true, selector: "ngx-form-loader", inputs: { formId: "formId", backRoute: "backRoute", builderRoute: "builderRoute" }, ngImport: i0, template: "<div class=\"loader-page\">\n\n  <header class=\"loader-header\">\n    <a [routerLink]=\"backRoute\" class=\"back-link\">\n      <mat-icon>arrow_back</mat-icon>\n    </a>\n    @if (formTitle()) {\n      <h1 class=\"loader-title\">{{ formTitle() }}</h1>\n    }\n    <a [routerLink]=\"builderRoute\" class=\"edit-link\" title=\"\u00C9diter dans le Builder\">\n      <mat-icon>edit</mat-icon>\n      <span>\u00C9diter</span>\n    </a>\n  </header>\n\n  <div class=\"loader-body\">\n\n    @if (config(); as cfg) {\n\n      @if (!submitted()) {\n        <div class=\"form-wrapper\">\n          <p class=\"api-badge\">\n            <mat-icon>api</mat-icon>\n            Charg\u00E9 via FormConfigService \u00B7 ID :\n            <code>{{ schemaId() }}</code>\n          </p>\n          <ngx-dynamic-form [config]=\"cfg\" (formSubmit)=\"onSubmit($event)\" />\n        </div>\n      }\n\n      @if (submitted()) {\n        <div class=\"success-card\">\n          <mat-icon class=\"success-icon\">check_circle</mat-icon>\n          <h2>Formulaire soumis avec succ\u00E8s</h2>\n          <p>Les donn\u00E9es ont \u00E9t\u00E9 re\u00E7ues (simulation \u2014 aucun envoi r\u00E9seau).</p>\n\n          <div class=\"data-preview\">\n            <p class=\"data-title\">Donn\u00E9es re\u00E7ues :</p>\n            <pre>{{ submitData() | json }}</pre>\n          </div>\n\n          <div class=\"success-actions\">\n            <button class=\"btn-outline\" (click)=\"reset()\">\n              <mat-icon>refresh</mat-icon> Recommencer\n            </button>\n            <a class=\"btn-primary\" [routerLink]=\"builderRoute\">\n              <mat-icon>dashboard_customize</mat-icon> Retour au builder\n            </a>\n          </div>\n        </div>\n      }\n\n    }\n\n    @if (notFound()) {\n      <div class=\"not-found\">\n        <mat-icon>search_off</mat-icon>\n        <h2>Formulaire introuvable</h2>\n        <p>\n          Aucun formulaire avec l'identifiant <code>{{ schemaId() }}</code> n'a \u00E9t\u00E9 trouv\u00E9\n          dans le stockage.\n        </p>\n        <p class=\"not-found-hint\">\n          Cr\u00E9ez un formulaire dans le <a [routerLink]=\"builderRoute\">Form Builder</a>,\n          sauvegardez-le, puis copiez son lien.\n        </p>\n      </div>\n    }\n\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-height:100vh;background:#f8fafc;font-family:Roboto,sans-serif}.loader-page{display:flex;flex-direction:column;min-height:100vh}.loader-header{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 4px #0000000f}.back-link{display:flex;align-items:center;color:#64748b;text-decoration:none;border-radius:6px;padding:.2rem;transition:color .15s,background .15s}.back-link:hover{color:#2563eb;background:#eff6ff}.back-link mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem}.loader-title{flex:1;font-size:1.05rem;font-weight:600;color:#1e293b;margin:0}.edit-link{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.82rem;color:#64748b;text-decoration:none;transition:border-color .15s,color .15s}.edit-link:hover{border-color:#2563eb;color:#2563eb}.edit-link mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.loader-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.form-wrapper{width:100%;max-width:700px;display:flex;flex-direction:column;gap:1rem}.api-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:.3rem .8rem;margin:0}.api-badge mat-icon{font-size:.9rem;width:.9rem;height:.9rem;color:#2563eb}.api-badge code{background:#f1f5f9;padding:.1rem .35rem;border-radius:4px;font-family:monospace;font-size:.8rem;color:#0f172a}.success-card{display:flex;flex-direction:column;align-items:center;gap:1rem;background:#fff;border:1px solid #bbf7d0;border-radius:12px;padding:2.5rem 2rem;max-width:560px;width:100%;text-align:center;box-shadow:0 4px 20px #16a34a14}.success-icon{font-size:3rem;width:3rem;height:3rem;color:#16a34a}.success-card h2{font-size:1.25rem;color:#1e293b;margin:0}.success-card>p{font-size:.88rem;color:#64748b;margin:0}.data-preview{width:100%;text-align:left;background:#1e293b;border-radius:8px;padding:1rem;overflow:auto}.data-title{font-size:.75rem;color:#94a3b8;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.05em}.data-preview pre{margin:0;font-size:.78rem;font-family:Fira Code,monospace;color:#7dd3fc;white-space:pre-wrap;word-break:break-all}.success-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn-outline{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:1px solid #e2e8f0;background:#fff;border-radius:7px;font-size:.85rem;color:#1e293b;cursor:pointer;text-decoration:none;transition:border-color .15s}.btn-outline:hover{border-color:#94a3b8}.btn-outline mat-icon{font-size:1rem;width:1rem;height:1rem}.btn-primary{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:none;background:#2563eb;color:#fff;border-radius:7px;font-size:.85rem;font-weight:500;text-decoration:none;transition:background .15s}.btn-primary:hover{background:#1d4ed8}.btn-primary mat-icon{font-size:1rem;width:1rem;height:1rem}.not-found{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:3rem 1rem;color:#64748b}.not-found mat-icon{font-size:3rem;width:3rem;height:3rem;color:#cbd5e1}.not-found h2{font-size:1.2rem;color:#1e293b;margin:0}.not-found p{margin:0;font-size:.88rem}.not-found code{background:#f1f5f9;padding:.1rem .35rem;border-radius:4px;font-family:monospace}.not-found-hint a{color:#2563eb}\n"], dependencies: [{ kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "initialValues"], outputs: ["formSubmit", "formChange", "formReset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-form-loader', standalone: true, imports: [DynamicFormComponent, MatIcon, RouterLink, JsonPipe], template: "<div class=\"loader-page\">\n\n  <header class=\"loader-header\">\n    <a [routerLink]=\"backRoute\" class=\"back-link\">\n      <mat-icon>arrow_back</mat-icon>\n    </a>\n    @if (formTitle()) {\n      <h1 class=\"loader-title\">{{ formTitle() }}</h1>\n    }\n    <a [routerLink]=\"builderRoute\" class=\"edit-link\" title=\"\u00C9diter dans le Builder\">\n      <mat-icon>edit</mat-icon>\n      <span>\u00C9diter</span>\n    </a>\n  </header>\n\n  <div class=\"loader-body\">\n\n    @if (config(); as cfg) {\n\n      @if (!submitted()) {\n        <div class=\"form-wrapper\">\n          <p class=\"api-badge\">\n            <mat-icon>api</mat-icon>\n            Charg\u00E9 via FormConfigService \u00B7 ID :\n            <code>{{ schemaId() }}</code>\n          </p>\n          <ngx-dynamic-form [config]=\"cfg\" (formSubmit)=\"onSubmit($event)\" />\n        </div>\n      }\n\n      @if (submitted()) {\n        <div class=\"success-card\">\n          <mat-icon class=\"success-icon\">check_circle</mat-icon>\n          <h2>Formulaire soumis avec succ\u00E8s</h2>\n          <p>Les donn\u00E9es ont \u00E9t\u00E9 re\u00E7ues (simulation \u2014 aucun envoi r\u00E9seau).</p>\n\n          <div class=\"data-preview\">\n            <p class=\"data-title\">Donn\u00E9es re\u00E7ues :</p>\n            <pre>{{ submitData() | json }}</pre>\n          </div>\n\n          <div class=\"success-actions\">\n            <button class=\"btn-outline\" (click)=\"reset()\">\n              <mat-icon>refresh</mat-icon> Recommencer\n            </button>\n            <a class=\"btn-primary\" [routerLink]=\"builderRoute\">\n              <mat-icon>dashboard_customize</mat-icon> Retour au builder\n            </a>\n          </div>\n        </div>\n      }\n\n    }\n\n    @if (notFound()) {\n      <div class=\"not-found\">\n        <mat-icon>search_off</mat-icon>\n        <h2>Formulaire introuvable</h2>\n        <p>\n          Aucun formulaire avec l'identifiant <code>{{ schemaId() }}</code> n'a \u00E9t\u00E9 trouv\u00E9\n          dans le stockage.\n        </p>\n        <p class=\"not-found-hint\">\n          Cr\u00E9ez un formulaire dans le <a [routerLink]=\"builderRoute\">Form Builder</a>,\n          sauvegardez-le, puis copiez son lien.\n        </p>\n      </div>\n    }\n\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-height:100vh;background:#f8fafc;font-family:Roboto,sans-serif}.loader-page{display:flex;flex-direction:column;min-height:100vh}.loader-header{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 4px #0000000f}.back-link{display:flex;align-items:center;color:#64748b;text-decoration:none;border-radius:6px;padding:.2rem;transition:color .15s,background .15s}.back-link:hover{color:#2563eb;background:#eff6ff}.back-link mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem}.loader-title{flex:1;font-size:1.05rem;font-weight:600;color:#1e293b;margin:0}.edit-link{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.82rem;color:#64748b;text-decoration:none;transition:border-color .15s,color .15s}.edit-link:hover{border-color:#2563eb;color:#2563eb}.edit-link mat-icon{font-size:.95rem;width:.95rem;height:.95rem}.loader-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.form-wrapper{width:100%;max-width:700px;display:flex;flex-direction:column;gap:1rem}.api-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:.3rem .8rem;margin:0}.api-badge mat-icon{font-size:.9rem;width:.9rem;height:.9rem;color:#2563eb}.api-badge code{background:#f1f5f9;padding:.1rem .35rem;border-radius:4px;font-family:monospace;font-size:.8rem;color:#0f172a}.success-card{display:flex;flex-direction:column;align-items:center;gap:1rem;background:#fff;border:1px solid #bbf7d0;border-radius:12px;padding:2.5rem 2rem;max-width:560px;width:100%;text-align:center;box-shadow:0 4px 20px #16a34a14}.success-icon{font-size:3rem;width:3rem;height:3rem;color:#16a34a}.success-card h2{font-size:1.25rem;color:#1e293b;margin:0}.success-card>p{font-size:.88rem;color:#64748b;margin:0}.data-preview{width:100%;text-align:left;background:#1e293b;border-radius:8px;padding:1rem;overflow:auto}.data-title{font-size:.75rem;color:#94a3b8;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.05em}.data-preview pre{margin:0;font-size:.78rem;font-family:Fira Code,monospace;color:#7dd3fc;white-space:pre-wrap;word-break:break-all}.success-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn-outline{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:1px solid #e2e8f0;background:#fff;border-radius:7px;font-size:.85rem;color:#1e293b;cursor:pointer;text-decoration:none;transition:border-color .15s}.btn-outline:hover{border-color:#94a3b8}.btn-outline mat-icon{font-size:1rem;width:1rem;height:1rem}.btn-primary{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 1rem;border:none;background:#2563eb;color:#fff;border-radius:7px;font-size:.85rem;font-weight:500;text-decoration:none;transition:background .15s}.btn-primary:hover{background:#1d4ed8}.btn-primary mat-icon{font-size:1rem;width:1rem;height:1rem}.not-found{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:3rem 1rem;color:#64748b}.not-found mat-icon{font-size:3rem;width:3rem;height:3rem;color:#cbd5e1}.not-found h2{font-size:1.2rem;color:#1e293b;margin:0}.not-found p{margin:0;font-size:.88rem}.not-found code{background:#f1f5f9;padding:.1rem .35rem;border-radius:4px;font-family:monospace}.not-found-hint a{color:#2563eb}\n"] }]
+        }], propDecorators: { formId: [{
+                type: Input
+            }], backRoute: [{
+                type: Input
+            }], builderRoute: [{
+                type: Input
+            }] } });
+
+const KEY = 'ngx-dynamic-form__schemas';
+class LocalStorageAdapter extends FormStorageAdapter {
+    list() {
+        return of(this._read());
+    }
+    get(id) {
+        return of(this._read().find(s => s.id === id) ?? null);
+    }
+    save(schema) {
+        const list = this._read().filter(s => s.id !== schema.id);
+        this._write([...list, schema]);
+        return of(schema);
+    }
+    delete(id) {
+        this._write(this._read().filter(s => s.id !== id));
+        return of(undefined);
+    }
+    _read() {
+        try {
+            const raw = localStorage.getItem(KEY);
+            return raw ? JSON.parse(raw) : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    _write(schemas) {
+        try {
+            localStorage.setItem(KEY, JSON.stringify(schemas));
+        }
+        catch {
+            console.warn('[LocalStorageAdapter] Cannot write to localStorage');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalStorageAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalStorageAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalStorageAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+const FORM_API_URL = new InjectionToken('FORM_API_URL');
+class HttpStorageAdapter extends FormStorageAdapter {
+    constructor() {
+        super(...arguments);
+        this.http = inject(HttpClient);
+        this.apiUrl = inject(FORM_API_URL);
+    }
+    list() {
+        return this.http.get(this.apiUrl);
+    }
+    get(id) {
+        return this.http.get(`${this.apiUrl}/${id}`).pipe(map(s => s ?? null));
+    }
+    save(schema) {
+        return this.http.put(`${this.apiUrl}/${schema.id}`, schema);
+    }
+    delete(id) {
+        return this.http.delete(`${this.apiUrl}/${id}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HttpStorageAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HttpStorageAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HttpStorageAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+function provideNgxForms(options) {
+    if (options.storage === 'http') {
+        return makeEnvironmentProviders([
+            { provide: FORM_API_URL, useValue: options.apiUrl },
+            { provide: FormStorageAdapter, useClass: HttpStorageAdapter },
+            FormConfigService,
+        ]);
+    }
+    return makeEnvironmentProviders([
+        { provide: FormStorageAdapter, useClass: LocalStorageAdapter },
+        FormConfigService,
+    ]);
+}
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConditionEvaluatorService, DynamicFieldComponent, DynamicFormBuilderService, DynamicFormComponent, FORM_API_URL, FormBuilderComponent, FormConfigService, FormLoaderComponent, FormStorageAdapter, HttpStorageAdapter, LocalStorageAdapter, MesFormulairesComponent, provideNgxForms };
+//# sourceMappingURL=suntelecoms-ngx-dynamic-form.mjs.map