@gnggln/ng-ui-system 1.0.0-alpha.2 → 1.0.0-alpha.21

package/form-builder-editor/lib/components/form-builder-editor/form-builder-editor.component.d.ts

@@ -0,0 +1,117 @@
+/**
+ * @module ng-ui-system/form-builder-editor
+ * Componente principale dell'editor visuale del form builder.
+ *
+ * Layout a tre pannelli:
+ * - Sinistra: palette dei tipi di campo (drag source)
+ * - Centro: sezioni con campi (drop target + editor inline)
+ * - Destra: pannello di configurazione del campo selezionato
+ *
+ * Funzionalita principali:
+ * - Drag & drop dei campi dalla palette alle sezioni
+ * - Riordino campi all'interno e tra sezioni
+ * - Configurazione campi in tempo reale
+ * - Preview live del form
+ * - Import/export JSON
+ * - Auto-save su localStorage
+ */
+import { OnInit, OnDestroy } from '@angular/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { MatDialogRef } from '@angular/material/dialog';
+import { UiFormFieldDescriptor } from '../form-builder/types/index';
+import { UiEditorState, UiEditorBreadcrumbItem, UiEditorAvailableField, UiEditorDialogData } from './types/editor.types';
+import { UiEditorStateService } from './services/editor-state.service';
+import * as i0 from "@angular/core";
+export declare class UiFormBuilderEditorComponent implements OnInit, OnDestroy {
+    dialogRef: MatDialogRef<UiFormBuilderEditorComponent>;
+    dialogData: UiEditorDialogData;
+    /** @internal Servizio per lo stato dell'editor. */
+    readonly stateService: UiEditorStateService;
+    /** @internal Servizio per la persistenza. */
+    private readonly persistenceService;
+    /** @internal Factory per i campi. */
+    private readonly fieldFactory;
+    /** @internal Snack bar per i messaggi. */
+    private readonly snackBar;
+    /** @internal Change detector. */
+    private readonly cdr;
+    /** @internal Subject per la distruzione. */
+    private readonly destroy$;
+    /** Stato corrente dell'editor. */
+    state: UiEditorState;
+    /** Indice del tab selezionato (0=Editor, 1=Preview). */
+    selectedTabIndex: number;
+    /** Breadcrumb di navigazione. */
+    breadcrumb: UiEditorBreadcrumbItem[];
+    /** Se il componente e aperto in modalita dialog. */
+    isDialogMode: boolean;
+    /** Chiave per forzare il re-render del preview. */
+    previewKey: number;
+    /** Campi disponibili per le condizioni (cache). */
+    availableFields: UiEditorAvailableField[];
+    /** Larghezza della sidebar sinistra (px). */
+    leftSidebarWidth: number;
+    /** Larghezza della sidebar destra (px). */
+    rightSidebarWidth: number;
+    /** Se e in corso il resize della sidebar destra. */
+    isResizing: boolean;
+    /** Se e in corso il resize della sidebar sinistra. */
+    isResizingLeft: boolean;
+    /** @internal Limiti di resize sidebar destra. */
+    private readonly MIN_SIDEBAR_WIDTH;
+    private readonly MAX_SIDEBAR_WIDTH;
+    /** @internal Limiti di resize sidebar sinistra. */
+    private readonly MIN_LEFT_SIDEBAR_WIDTH;
+    private readonly MAX_LEFT_SIDEBAR_WIDTH;
+    private resizeStartX;
+    private resizeStartWidth;
+    private readonly SIDEBAR_WIDTH_KEY;
+    private readonly LEFT_SIDEBAR_WIDTH_KEY;
+    constructor(dialogRef: MatDialogRef<UiFormBuilderEditorComponent>, dialogData: UiEditorDialogData);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Aggiunge una nuova sezione. */
+    onAddSection(): void;
+    /** Salva nel localStorage. */
+    onSave(): void;
+    /** Crea un nuovo form. */
+    onNewForm(): void;
+    /** Importa da file JSON. */
+    onImportJson(): void;
+    /** Esporta come file JSON. */
+    onExportJson(): void;
+    /** Pulisce tutto lo schema. */
+    onClear(): void;
+    onSectionDuplicate(sectionId: string): void;
+    onSectionDelete(sectionId: string): void;
+    onFieldSelect(sectionId: string, fieldKey: string): void;
+    onFieldDuplicate(sectionId: string, fieldKey: string): void;
+    onFieldDelete(sectionId: string, fieldKey: string): void;
+    onFieldUpdate(sectionId: string, fieldKey: string, updates: Partial<UiFormFieldDescriptor>): void;
+    /** Gestisce il drop di un campo (dalla palette o tra sezioni). */
+    onFieldDrop(event: CdkDragDrop<any>): void;
+    /** Campo attualmente selezionato. */
+    get selectedField(): UiFormFieldDescriptor | null;
+    /** ID della sezione del campo selezionato. */
+    get selectedFieldSectionId(): string | null;
+    onTabChange(index: number): void;
+    refreshPreview(): void;
+    /** Chiude la modale restituendo lo schema corrente. */
+    closeDialog(): void;
+    onResizeStart(event: MouseEvent): void;
+    private onResizeMove;
+    private onResizeEnd;
+    onLeftResizeStart(event: MouseEvent): void;
+    private onLeftResizeMove;
+    private onLeftResizeEnd;
+    private checkForRecovery;
+    private autoSave;
+    private updateBreadcrumb;
+    private updateAvailableFields;
+    private showMessage;
+    private loadSidebarWidth;
+    private saveSidebarWidth;
+    private saveLeftSidebarWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiFormBuilderEditorComponent, [{ optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiFormBuilderEditorComponent, "ui-form-builder-editor", never, {}, {}, never, never, true, never>;
+}

package/form-builder-editor/lib/components/form-builder-editor/form-builder-editor.service.d.ts

@@ -0,0 +1,38 @@
+import { MatDialogRef } from '@angular/material/dialog';
+import { UiFormSchema } from '../form-builder/types/index';
+import { UiFormBuilderEditorComponent } from './form-builder-editor.component';
+import * as i0 from "@angular/core";
+/**
+ * Servizio per aprire l'editor visuale del form builder
+ * in una modale fullscreen tramite il UiModalService.
+ *
+ * @usageNotes
+ *
+ * ### Apertura base
+ * ```typescript
+ * const ref = this.editorService.open();
+ * ref.afterClosed().subscribe(schema => {
+ *   if (schema) console.log('Schema risultante:', schema);
+ * });
+ * ```
+ *
+ * ### Apertura con schema iniziale
+ * ```typescript
+ * this.editorService.open(myExistingSchema)
+ *   .afterClosed()
+ *   .subscribe(schema => { ... });
+ * ```
+ */
+export declare class UiFormBuilderEditorService {
+    /** @internal Servizio modale per l'apertura. */
+    private readonly modalService;
+    /**
+     * Apre l'editor in una modale fullscreen.
+     *
+     * @param initialSchema - Schema iniziale da caricare nell'editor
+     * @returns Riferimento alla dialog per gestire chiusura e risultato
+     */
+    open(initialSchema?: UiFormSchema): MatDialogRef<UiFormBuilderEditorComponent, UiFormSchema | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiFormBuilderEditorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiFormBuilderEditorService>;
+}

package/form-builder-editor/lib/components/form-builder-editor/index.d.ts

@@ -0,0 +1,17 @@
+export { UiFormBuilderEditorComponent } from './form-builder-editor.component';
+export { UiFormBuilderEditorService } from './form-builder-editor.service';
+export { UiEditorStateService } from './services/editor-state.service';
+export { UiEditorPersistenceService } from './services/editor-persistence.service';
+export { UiEditorFieldFactoryService } from './services/field-factory.service';
+export { UiEditorToolbarComponent } from './sub-components/editor-toolbar/editor-toolbar.component';
+export { UiFieldPaletteComponent } from './sub-components/field-palette/field-palette.component';
+export { UiSectionEditorComponent } from './sub-components/section-editor/section-editor.component';
+export { UiEditorFieldConfigPanelComponent } from './sub-components/field-config-panel/field-config-panel.component';
+export { UiEditorPreviewContainerComponent } from './sub-components/preview-container/preview-container.component';
+export { UiValidationEditorComponent } from './sub-components/validation-editor/validation-editor.component';
+export { UiConditionEditorComponent } from './sub-components/condition-editor/condition-editor.component';
+export { UiOptionsEditorComponent } from './sub-components/options-editor/options-editor.component';
+export { UiEditorFormValuesPanelComponent } from './sub-components/form-values-panel/form-values-panel.component';
+export * from './types/editor.types';
+export { PRESET_ANAGRAFICA, PRESET_TICKET, PRESET_SURVEY, EDITOR_PRESETS } from './presets/editor-presets';
+export type { EditorPresetInfo } from './presets/editor-presets';

package/form-builder-editor/lib/components/form-builder-editor/presets/editor-presets.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @module ng-ui-system/form-builder-editor
+ * Preset di schemi per l'editor del form builder.
+ *
+ * Raccolta di scenari comuni che dimostrano le capacità del descrittore:
+ * - Validazione avanzata (required, pattern, cross-field)
+ * - Condizioni di visibilità e disabilitazione
+ * - Layout multi-colonna con breakpoints
+ * - Campi select/radio/multiselect con opzioni
+ * - Sezioni multiple organizzate per contesto
+ * - File upload, switch, divider, textarea
+ *
+ * Utilizzabili sia nella variante Material che Bootstrap Italia.
+ */
+import type { UiFormSchema } from '../../form-builder/types/index';
+export declare const PRESET_ANAGRAFICA: UiFormSchema;
+export declare const PRESET_TICKET: UiFormSchema;
+export declare const PRESET_SURVEY: UiFormSchema;
+export interface EditorPresetInfo {
+    key: string;
+    label: string;
+    description: string;
+    schema: UiFormSchema;
+}
+export declare const EDITOR_PRESETS: EditorPresetInfo[];

package/form-builder-editor/lib/components/form-builder-editor/services/editor-persistence.service.d.ts

@@ -0,0 +1,42 @@
+import { UiFormSchema } from '../../form-builder/types/index';
+import * as i0 from "@angular/core";
+/**
+ * Gestisce il salvataggio e il recupero degli schemi dell'editor.
+ *
+ * Supporta:
+ * - Auto-save e recupero da localStorage
+ * - Import/export da/verso file JSON
+ * - Backup automatici con rotazione (max 5)
+ */
+export declare class UiEditorPersistenceService {
+    /** @internal Chiave localStorage per l'auto-save. */
+    private readonly STORAGE_KEY;
+    /** @internal Versione dello storage per migrazioni future. */
+    private readonly STORAGE_VERSION;
+    /** @internal Durata massima di un salvataggio (24 ore). */
+    private readonly MAX_AGE_MS;
+    /** Salva lo schema nel localStorage. */
+    saveToLocalStorage(schema: UiFormSchema): void;
+    /** Carica lo schema dal localStorage (null se scaduto o assente). */
+    loadFromLocalStorage(): UiFormSchema | null;
+    /** Verifica se esiste un salvataggio valido. */
+    hasLocalStorageData(): boolean;
+    /** Restituisce la data dell'ultimo salvataggio. */
+    getLocalStorageAge(): Date | null;
+    /** Rimuove il salvataggio dal localStorage. */
+    clearLocalStorage(): void;
+    /** Esporta lo schema come file JSON scaricabile. */
+    exportToJSON(schema: UiFormSchema, filename?: string): void;
+    /** Importa lo schema da un file JSON. */
+    importFromJSON(file: File): Promise<UiFormSchema>;
+    /** Crea un backup dello schema prima di operazioni distruttive. */
+    createBackup(schema: UiFormSchema): void;
+    /** @internal Validazione strutturale minima dello schema. */
+    private isValidSchema;
+    /** @internal Scarica un blob come file. */
+    private downloadBlob;
+    /** @internal Mantiene solo gli ultimi 5 backup. */
+    private cleanOldBackups;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiEditorPersistenceService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiEditorPersistenceService>;
+}

package/form-builder-editor/lib/components/form-builder-editor/services/editor-state.service.d.ts

@@ -0,0 +1,66 @@
+import { Observable } from 'rxjs';
+import { UiFormSchema, UiFormSection, UiFormFieldDescriptor } from '../../form-builder/types/index';
+import { UiEditorState, UiEditorSchemaValidationResult } from '../types/editor.types';
+import * as i0 from "@angular/core";
+/**
+ * Servizio per la gestione reattiva dello stato dell'editor visuale.
+ *
+ * Espone lo stato come Observable e fornisce metodi immutabili
+ * per tutte le operazioni CRUD su sezioni e campi.
+ */
+export declare class UiEditorStateService {
+    /** @internal Factory per la creazione dei campi. */
+    private readonly fieldFactory;
+    /** @internal Stato iniziale dell'editor. */
+    private readonly initialState;
+    /** @internal Subject per lo stato dell'editor. */
+    private readonly _state$;
+    /** Stream reattivo dello stato dell'editor. */
+    readonly state$: Observable<UiEditorState>;
+    /** Restituisce un snapshot dello stato corrente. */
+    getCurrentState(): UiEditorState;
+    /** Restituisce lo schema corrente. */
+    getSchema(): UiFormSchema;
+    /** @internal Aggiorna lo stato e marca come dirty. */
+    private updateState;
+    /** Imposta uno schema completo (es. da import). */
+    setSchema(schema: UiFormSchema): void;
+    /** Marca lo stato come salvato. */
+    markAsSaved(): void;
+    /** Reset allo stato iniziale. */
+    reset(): void;
+    /** Pulisce lo schema mantenendo l'ID. */
+    clearSchema(): void;
+    /** Aggiunge una nuova sezione e la seleziona. */
+    addSection(section?: Partial<UiFormSection>): string;
+    /** Rimuove una sezione per ID. */
+    removeSection(sectionId: string): void;
+    /** Aggiorna proprieta di una sezione. */
+    updateSection(sectionId: string, updates: Partial<UiFormSection>): void;
+    /** Duplica una sezione con nuovi ID per sezione e campi. */
+    duplicateSection(sectionId: string): string | null;
+    /** Aggiunge un campo a una sezione in una posizione specifica. */
+    addFieldAtIndex(sectionId: string, field: UiFormFieldDescriptor, index: number): void;
+    /** Rimuove un campo da una sezione. */
+    removeField(sectionId: string, fieldKey: string): void;
+    /** Aggiorna proprieta di un campo. */
+    updateField(sectionId: string, fieldKey: string, fieldUpdates: Partial<UiFormFieldDescriptor>): void;
+    /** Duplica un campo nella stessa sezione. */
+    duplicateField(sectionId: string, fieldKey: string): void;
+    /** Riordina un campo all'interno della stessa sezione. */
+    moveFieldInSection(sectionId: string, fromIndex: number, toIndex: number): void;
+    /** Sposta un campo tra due sezioni diverse. */
+    moveFieldBetweenSections(fromSectionId: string, toSectionId: string, fieldKey: string, toIndex: number): void;
+    /** Seleziona una sezione (deseleziona il campo). */
+    selectSection(sectionId: string | null): void;
+    /** Seleziona un campo (e la sua sezione). */
+    selectField(sectionId: string, fieldKey: string | null): void;
+    /** Trova la sezione che contiene un campo. */
+    findSectionByFieldKey(fieldKey: string): UiFormSection | null;
+    /** Trova un campo per chiave attraverso tutte le sezioni. */
+    findFieldByKey(fieldKey: string): UiFormFieldDescriptor | null;
+    /** Valida lo schema corrente cercando errori e warning strutturali. */
+    validateSchema(): UiEditorSchemaValidationResult;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiEditorStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiEditorStateService>;
+}

package/form-builder-editor/lib/components/form-builder-editor/services/field-factory.service.d.ts

@@ -0,0 +1,28 @@
+import { UiFormFieldDescriptor, UiFieldType } from '../../form-builder/types/index';
+import * as i0 from "@angular/core";
+/**
+ * Servizio factory per creare field descriptor con configurazioni
+ * di default appropriate per ogni tipo di campo.
+ */
+export declare class UiEditorFieldFactoryService {
+    /** @internal Contatore per generare chiavi univoche. */
+    private fieldCounter;
+    /**
+     * Crea un field descriptor di default per il tipo specificato.
+     *
+     * @param type - Tipo di campo da creare
+     * @param key - Chiave opzionale (se omessa viene generata automaticamente)
+     * @returns Field descriptor con valori di default
+     */
+    createDefaultField(type: UiFieldType, key?: string): UiFormFieldDescriptor;
+    /** Duplica un campo generando una nuova chiave univoca. */
+    duplicateField(field: UiFormFieldDescriptor): UiFormFieldDescriptor;
+    /** @internal Genera una chiave univoca per un campo. */
+    private generateUniqueKey;
+    /** @internal Mappa tipo -> label di default. */
+    private getDefaultLabel;
+    /** @internal Mappa tipo -> placeholder di default. */
+    private getDefaultPlaceholder;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiEditorFieldFactoryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiEditorFieldFactoryService>;
+}

package/form-builder-editor/lib/components/form-builder-editor/sub-components/condition-editor/condition-editor.component.d.ts

@@ -0,0 +1,139 @@
+import { EventEmitter } from '@angular/core';
+import { UiFieldCondition, UiConditionalOperator } from '../../../form-builder/types/index';
+import { UiEditorAvailableField } from '../../types/editor.types';
+import * as i0 from "@angular/core";
+/**
+ * Interfaccia per le opzioni degli operatori condizionali nella select.
+ */
+interface OperatorOption {
+    /** Valore dell'operatore. */
+    value: UiConditionalOperator;
+    /** Etichetta visualizzata nella select. */
+    label: string;
+}
+/**
+ * Editor per le condizioni di visibilita/disabilitazione dei campi.
+ *
+ * Permette di configurare condizioni con editor visuale o JSON.
+ * Supporta operatori di confronto multipli, logica AND/OR
+ * e selezione dei valori dalle opzioni dei campi disponibili.
+ *
+ * @selector ui-condition-editor
+ */
+export declare class UiConditionEditorComponent {
+    /** Lista delle condizioni da editare. */
+    conditions: UiFieldCondition[];
+    /** Titolo visualizzato nell'intestazione. */
+    title: string;
+    /** Campi disponibili per la selezione nelle condizioni. */
+    availableFields: UiEditorAvailableField[];
+    /** Emesso quando la lista di condizioni viene modificata. */
+    conditionsChange: EventEmitter<UiFieldCondition[]>;
+    /** Indica se l'editor e in modalita JSON. */
+    jsonMode: boolean;
+    /** Testo JSON corrente nell'editor. */
+    jsonText: string;
+    /** Errore di parsing del JSON. */
+    jsonError: string;
+    /** Opzioni disponibili per gli operatori condizionali. */
+    readonly operators: OperatorOption[];
+    /**
+     * Verifica se l'operatore non richiede un campo valore.
+     * @param operator - Operatore da verificare
+     * @returns true se l'operatore non necessita di valore
+     */
+    isNoValueOperator(operator: UiConditionalOperator): boolean;
+    /**
+     * Verifica se l'operatore opera su array di valori.
+     * @param operator - Operatore da verificare
+     * @returns true se l'operatore richiede un array di valori
+     */
+    isArrayOperator(operator: UiConditionalOperator): boolean;
+    /**
+     * Restituisce le opzioni disponibili per un campo specifico.
+     * @param fieldKey - Chiave del campo
+     * @returns Array di opzioni del campo, vuoto se non disponibili
+     */
+    getFieldOptions(fieldKey: string): {
+        value: any;
+        label: string;
+    }[];
+    /**
+     * Garantisce che il valore sia un array (per select multiple).
+     * @param value - Valore da normalizzare
+     * @returns Il valore come array
+     */
+    ensureArray(value: any): any[];
+    /**
+     * Attiva/disattiva la modalita editor JSON.
+     * In apertura serializza le condizioni, in chiusura le deserializza.
+     */
+    toggleJsonMode(): void;
+    /**
+     * Formatta il JSON nell'editor con indentazione.
+     */
+    formatJson(): void;
+    /**
+     * Gestisce il cambio del testo JSON nell'editor.
+     * Tenta il parsing e aggiorna le condizioni se valido.
+     * @param text - Testo JSON inserito dall'utente
+     */
+    onJsonChange(text: string): void;
+    /**
+     * Aggiunge una nuova condizione con valori predefiniti.
+     */
+    addCondition(): void;
+    /**
+     * Rimuove la condizione all'indice specificato.
+     * @param index - Indice della condizione da rimuovere
+     */
+    removeCondition(index: number): void;
+    /**
+     * Rimuove tutte le condizioni.
+     */
+    clearAll(): void;
+    /**
+     * Gestisce il cambio della logica di combinazione (AND/OR).
+     * @param index - Indice della condizione
+     * @param logic - Nuova logica ('AND' | 'OR')
+     */
+    onLogicChange(index: number, logic: 'AND' | 'OR'): void;
+    /**
+     * Gestisce il cambio del campo selezionato in una condizione.
+     * Resetta il valore quando il campo cambia.
+     * @param index - Indice della condizione
+     * @param field - Nuova chiave campo
+     */
+    onFieldChange(index: number, field: string): void;
+    /**
+     * Gestisce il cambio dell'operatore in una condizione.
+     * Resetta il valore per operatori senza valore.
+     * @param index - Indice della condizione
+     * @param operator - Nuovo operatore
+     */
+    onOperatorChange(index: number, operator: UiConditionalOperator): void;
+    /**
+     * Gestisce il cambio del valore in una condizione.
+     * @param index - Indice della condizione
+     * @param value - Nuovo valore
+     */
+    onValueChange(index: number, value: any): void;
+    /**
+     * Tenta di applicare il JSON corrente come array di condizioni.
+     * Aggiorna l'errore in caso di JSON non valido.
+     */
+    private applyJson;
+    /**
+     * Clona l'array delle condizioni per garantire immutabilita.
+     * @returns Copia superficiale dell'array di condizioni
+     */
+    private cloneConditions;
+    /**
+     * Emette l'evento di cambio condizioni.
+     * @param conditions - Nuova lista di condizioni
+     */
+    private emitChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiConditionEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiConditionEditorComponent, "ui-condition-editor", never, { "conditions": { "alias": "conditions"; "required": false; }; "title": { "alias": "title"; "required": false; }; "availableFields": { "alias": "availableFields"; "required": false; }; }, { "conditionsChange": "conditionsChange"; }, never, never, true, never>;
+}
+export {};

package/form-builder-editor/lib/components/form-builder-editor/sub-components/editor-toolbar/editor-toolbar.component.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from '@angular/core';
+import { UiEditorBreadcrumbItem } from '../../types/editor.types';
+import * as i0 from "@angular/core";
+/**
+ * Toolbar principale dell'editor di form.
+ *
+ * Contiene:
+ * - Sezione sinistra: icona, titolo e breadcrumb di navigazione
+ * - Centro: indicatore dello stato di salvataggio
+ * - Destra: pulsanti azione (aggiungi sezione, salva, file, altro)
+ *
+ * @selector ui-editor-toolbar
+ */
+export declare class UiEditorToolbarComponent {
+    /** Elementi del breadcrumb di navigazione. */
+    breadcrumb: UiEditorBreadcrumbItem[];
+    /** Indica se ci sono modifiche non salvate. */
+    isDirty: boolean;
+    /** Data dell'ultimo salvataggio riuscito. */
+    lastSaved: Date | null;
+    /** Emesso alla richiesta di creare un nuovo form. */
+    newForm: EventEmitter<void>;
+    /** Emesso alla richiesta di importare un JSON. */
+    importJson: EventEmitter<void>;
+    /** Emesso alla richiesta di esportare il JSON. */
+    exportJson: EventEmitter<void>;
+    /** Emesso alla richiesta di salvataggio. */
+    save: EventEmitter<void>;
+    /** Emesso alla richiesta di pulizia completa. */
+    clear: EventEmitter<void>;
+    /** Emesso alla richiesta di aggiungere una nuova sezione. */
+    addSection: EventEmitter<void>;
+    /**
+     * Formatta la data dell'ultimo salvataggio in testo leggibile.
+     * Restituisce descrizioni relative come "pochi secondi fa", "5 minuti fa", ecc.
+     *
+     * @param date - Data dell'ultimo salvataggio oppure null
+     * @returns Stringa descrittiva dello stato di salvataggio
+     */
+    formatLastSaved(date: Date | null): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiEditorToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiEditorToolbarComponent, "ui-editor-toolbar", never, { "breadcrumb": { "alias": "breadcrumb"; "required": false; }; "isDirty": { "alias": "isDirty"; "required": false; }; "lastSaved": { "alias": "lastSaved"; "required": false; }; }, { "newForm": "newForm"; "importJson": "importJson"; "exportJson": "exportJson"; "save": "save"; "clear": "clear"; "addSection": "addSection"; }, never, never, true, never>;
+}

package/form-builder-editor/lib/components/form-builder-editor/sub-components/field-config-panel/field-config-panel.component.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { UiFormFieldDescriptor, UiFieldType } from '../../../form-builder/types/index';
+import { UiEditorAvailableField } from '../../types/editor.types';
+import * as i0 from "@angular/core";
+/**
+ * Pannello laterale destro per la configurazione di un campo selezionato.
+ *
+ * Mostra un form reattivo suddiviso in pannelli espandibili per gestire
+ * proprieta base, stato, layout, validazioni, opzioni e condizioni.
+ * Emette aggiornamenti parziali con debounce di 300ms.
+ *
+ * @selector ui-editor-field-config-panel
+ */
+export declare class UiEditorFieldConfigPanelComponent implements OnChanges, OnDestroy {
+    /** @internal Servizio per la costruzione del FormGroup. */
+    private readonly fb;
+    /** @internal Subject per la distruzione e pulizia delle sottoscrizioni. */
+    private readonly destroy$;
+    /** Campo attualmente selezionato per la configurazione. */
+    field: UiFormFieldDescriptor | null;
+    /** Lista dei campi disponibili per le condizioni. */
+    availableFields: UiEditorAvailableField[];
+    /** Emesso quando il campo viene aggiornato dall'utente. */
+    fieldUpdate: EventEmitter<Partial<UiFormFieldDescriptor>>;
+    /** Form reattivo per la configurazione del campo. */
+    configForm: FormGroup | null;
+    /** Lista dei tipi di campo per la select. */
+    readonly fieldTypes: {
+        value: UiFieldType;
+        label: string;
+    }[];
+    /**
+     * Indica se il campo selezionato supporta le opzioni.
+     * Viene utilizzato per mostrare/nascondere il pannello opzioni.
+     */
+    get isOptionsField(): boolean;
+    /**
+     * Rileva cambiamenti sugli input e ricostruisce il form
+     * quando cambia il campo selezionato.
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /**
+     * Restituisce le opzioni del campo come array statico.
+     * Ignora opzioni osservabili poiche non gestibili nell'editor.
+     */
+    getFieldOptions(): {
+        value: any;
+        label: string;
+    }[];
+    /**
+     * Gestisce l'aggiornamento delle validazioni dal sotto-componente.
+     * @param validations - Nuova lista di regole di validazione
+     */
+    onValidationsChange(validations: any[]): void;
+    /**
+     * Gestisce l'aggiornamento delle opzioni dal sotto-componente.
+     * @param options - Nuova lista di opzioni
+     */
+    onOptionsChange(options: {
+        value: any;
+        label: string;
+    }[]): void;
+    /**
+     * Gestisce l'aggiornamento delle condizioni di visibilita.
+     * @param conditions - Nuova lista di condizioni
+     */
+    onVisibilityConditionsChange(conditions: any[]): void;
+    /**
+     * Gestisce l'aggiornamento delle condizioni di disabilitazione.
+     * @param conditions - Nuova lista di condizioni
+     */
+    onDisableConditionsChange(conditions: any[]): void;
+    /**
+     * @internal
+     * Costruisce il FormGroup a partire dal campo selezionato.
+     * Si sottoscrive ai valueChanges con debounce per emettere aggiornamenti.
+     */
+    private buildForm;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiEditorFieldConfigPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiEditorFieldConfigPanelComponent, "ui-editor-field-config-panel", never, { "field": { "alias": "field"; "required": false; }; "availableFields": { "alias": "availableFields"; "required": false; }; }, { "fieldUpdate": "fieldUpdate"; }, never, never, true, never>;
+}

package/form-builder-editor/lib/components/form-builder-editor/sub-components/field-palette/field-palette.component.d.ts

@@ -0,0 +1,40 @@
+import { UiEditorFieldPaletteItem, UiEditorFieldCategory } from '../../types/editor.types';
+import { UiIconName } from '../../../../core/types';
+import * as i0 from "@angular/core";
+/**
+ * Interfaccia interna per una categoria della palette.
+ * Raggruppa un insieme di elementi sotto un'etichetta comune.
+ */
+interface PaletteCategory {
+    /** Identificativo della categoria. */
+    key: UiEditorFieldCategory;
+    /** Etichetta visualizzata nell'intestazione dell'accordion. */
+    label: string;
+    /** Icona Lucide della categoria. */
+    icon: UiIconName;
+    /** Elementi trascinabili appartenenti alla categoria. */
+    items: UiEditorFieldPaletteItem[];
+}
+/**
+ * Palette laterale dei tipi di campo disponibili.
+ *
+ * Mostra i campi raggruppati per categoria tramite pannelli espandibili.
+ * Ogni elemento e trascinabile (CDK drag-drop) verso le sezioni del form.
+ *
+ * @selector ui-field-palette
+ */
+export declare class UiFieldPaletteComponent {
+    /**
+     * Predicato che impedisce il drop di elementi dentro la palette.
+     * La palette e solo una sorgente di drag, non una destinazione.
+     */
+    noDrop: () => boolean;
+    /**
+     * Catalogo completo degli elementi della palette,
+     * organizzato per categorie con i rispettivi metadati.
+     */
+    readonly categories: PaletteCategory[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldPaletteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiFieldPaletteComponent, "ui-field-palette", never, {}, {}, never, never, true, never>;
+}
+export {};