@raintonic/formaui 0.2.0 → 0.3.0

package/types/raintonic-formaui-components-dynamic-form.d.ts

@@ -1,412 +0,0 @@
-import * as i0 from '@angular/core';
-import { InputSignal, OutputEmitterRef } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
-
-/**
- * Input types supported by the dynamic form renderer
- */
-type DynamicFormInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
-/**
- * Field types supported by the dynamic form renderer
- */
-type DynamicFormFieldType = 'input' | 'select' | 'autocomplete' | 'textarea' | 'file' | 'checkbox' | 'spacer';
-/**
- * Title importance levels - maps to typography classes
- * - h1: fui-display-xl (largest)
- * - h2: fui-display-lg
- * - h3: fui-display-md
- * - h4: fui-display-sm
- * - h5: fui-display-xs
- * - h6: fui-text-xl (smallest heading)
- */
-type DynamicFormTitleImportance = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-/**
- * Option for select/autocomplete fields
- */
-interface DynamicFormOption {
-    value: unknown;
-    label: string;
-    disabled?: boolean;
-    group?: string;
-}
-/**
- * Configuration for file input fields
- */
-interface DynamicFormFileConfig {
-    accept?: string;
-    multiple?: boolean;
-    maxSize?: number;
-}
-/**
- * Base configuration for all field types
- */
-interface DynamicFormFieldBase {
-    /** Form control name - must match the key in the FormGroup */
-    key: string;
-    /** Field type */
-    type: DynamicFormFieldType;
-    /** Label text */
-    label?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Hint/helper text displayed below the field */
-    hint?: string;
-    /** Error messages mapped to validation error keys */
-    errors?: Record<string, string>;
-    /** Whether the field is disabled */
-    disabled?: boolean;
-    /** Whether the field is readonly */
-    readonly?: boolean;
-    /** Custom CSS class(es) for the field container */
-    className?: string;
-    /** Whether to hide the label */
-    hideLabel?: boolean;
-    /** Column span in a flex row (1-12, default: auto) */
-    colSpan?: number;
-    /** Prefix icon name */
-    prefixIcon?: string;
-    /** Suffix icon name */
-    suffixIcon?: string;
-}
-/**
- * Configuration for input fields
- */
-interface DynamicFormInputField extends DynamicFormFieldBase {
-    type: 'input';
-    /** HTML input type */
-    inputType?: DynamicFormInputType;
-    /** Maximum length for text inputs */
-    maxLength?: number;
-    /** Minimum length for text inputs */
-    minLength?: number;
-    /** Pattern for text validation */
-    pattern?: string;
-    /** Minimum value for number inputs */
-    min?: number;
-    /** Maximum value for number inputs */
-    max?: number;
-    /** Step value for number inputs */
-    step?: number;
-}
-/**
- * Configuration for textarea fields
- */
-interface DynamicFormTextareaField extends DynamicFormFieldBase {
-    type: 'textarea';
-    /** Number of rows */
-    rows?: number;
-    /** Maximum length */
-    maxLength?: number;
-    /** Minimum length */
-    minLength?: number;
-    /** Whether to auto-resize based on content */
-    autoResize?: boolean;
-}
-/**
- * Configuration for select fields
- */
-interface DynamicFormSelectField extends DynamicFormFieldBase {
-    type: 'select';
-    /** Options for the select */
-    options: DynamicFormOption[];
-    /** Allow multiple selection */
-    multiple?: boolean;
-    /** Custom comparison function for value equality */
-    compareWith?: (o1: unknown, o2: unknown) => boolean;
-}
-/**
- * Configuration for autocomplete fields
- */
-interface DynamicFormAutocompleteField extends DynamicFormFieldBase {
-    type: 'autocomplete';
-    /** Options for the autocomplete (can use FuiAutocompleteOption for groups) */
-    options: DynamicFormOption[];
-    /** Show add new button */
-    showAddButton?: boolean;
-    /** Show refresh button */
-    showRefreshButton?: boolean;
-    /** Label for add button */
-    addButtonLabel?: string;
-    /** Label for refresh button */
-    refreshButtonLabel?: string;
-    /** Text to show when no options match */
-    noOptionsText?: string;
-    /** Placeholder for search input */
-    searchPlaceholder?: string;
-}
-/**
- * Configuration for file input fields
- */
-interface DynamicFormFileField extends DynamicFormFieldBase {
-    type: 'file';
-    /** File configuration */
-    fileConfig?: DynamicFormFileConfig;
-}
-/**
- * Configuration for checkbox fields
- */
-interface DynamicFormCheckboxField extends DynamicFormFieldBase {
-    type: 'checkbox';
-    /** Label position relative to checkbox */
-    labelPosition?: 'before' | 'after';
-}
-/**
- * Configuration for spacer (empty area)
- */
-interface DynamicFormSpacerField extends Omit<DynamicFormFieldBase, 'key' | 'label' | 'placeholder' | 'hint' | 'errors' | 'disabled' | 'readonly' | 'prefixIcon' | 'suffixIcon'> {
-    type: 'spacer';
-    key?: string;
-}
-/**
- * Union type for all field configurations
- */
-type DynamicFormField = DynamicFormInputField | DynamicFormTextareaField | DynamicFormSelectField | DynamicFormAutocompleteField | DynamicFormFileField | DynamicFormCheckboxField | DynamicFormSpacerField;
-/**
- * Configuration for a row of fields
- */
-interface DynamicFormRow {
-    /** Fields in this row */
-    fields: DynamicFormField[];
-    /** Gap between fields (uses spacing tokens, e.g., '03' for spacing-03) */
-    gap?: string;
-    /** Custom CSS class(es) for the row */
-    className?: string;
-    /** Alignment of items in the row */
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    /** Justification of items in the row */
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-}
-/**
- * Configuration for a section title
- */
-interface DynamicFormTitle {
-    /** Title text */
-    text: string;
-    /** Importance level (h1-h6) */
-    importance: DynamicFormTitleImportance;
-    /** Custom CSS class(es) for the title */
-    className?: string;
-    /** Description/subtitle text */
-    description?: string;
-}
-/**
- * Configuration for a section (group of rows with optional title)
- */
-interface DynamicFormSection {
-    /** Optional section title */
-    title?: DynamicFormTitle;
-    /** Rows in this section */
-    rows: DynamicFormRow[];
-    /** Custom CSS class(es) for the section */
-    className?: string;
-    /** Gap between rows (uses spacing tokens, e.g., '05' for spacing-05) */
-    rowGap?: string;
-}
-/**
- * Complete form configuration
- */
-interface DynamicFormConfig {
-    /** Sections of the form */
-    sections: DynamicFormSection[];
-    /** Global gap between sections (uses spacing tokens) */
-    sectionGap?: string;
-    /** Custom CSS class(es) for the form container */
-    className?: string;
-}
-/**
- * Event emitted when an autocomplete action is triggered
- */
-interface DynamicFormAutocompleteEvent {
-    fieldKey: string;
-    action: 'add' | 'refresh';
-}
-/**
- * Event emitted when a file is selected
- */
-interface DynamicFormFileEvent {
-    fieldKey: string;
-    files: FileList | null;
-}
-
-/**
- * # DynamicFormRenderer Component
- *
- * A component that automatically renders forms based on a JSON configuration.
- * It takes a FormGroup and a configuration object that specifies the form structure.
- *
- * ## Features
- * - Supports multiple field types: input, select, autocomplete, textarea, file, checkbox
- * - Flexible row-based layout with configurable column spans
- * - Section grouping with customizable titles
- * - Empty area/spacer support for layout control
- * - Full integration with Angular reactive forms
- * - Responsive design with mobile-first approach
- *
- * ## Usage
- *
- * ### Basic Form
- * ```typescript
- * @Component({
- *   template: `
- *     <fui-dynamic-form-renderer
- *       [formGroup]="myForm"
- *       [config]="formConfig"
- *     ></fui-dynamic-form-renderer>
- *   `
- * })
- * export class MyComponent {
- *   myForm = new FormGroup({
- *     firstName: new FormControl(''),
- *     lastName: new FormControl(''),
- *     email: new FormControl(''),
- *   });
- *
- *   formConfig: DynamicFormConfig = {
- *     sections: [{
- *       title: { text: 'Personal Information', importance: 'h3' },
- *       rows: [
- *         {
- *           fields: [
- *             { key: 'firstName', type: 'input', label: 'First Name', colSpan: 6 },
- *             { key: 'lastName', type: 'input', label: 'Last Name', colSpan: 6 },
- *           ]
- *         },
- *         {
- *           fields: [
- *             { key: 'email', type: 'input', inputType: 'email', label: 'Email', colSpan: 12 },
- *           ]
- *         }
- *       ]
- *     }]
- *   };
- * }
- * ```
- *
- * ### With Validation Errors
- * ```typescript
- * formConfig: DynamicFormConfig = {
- *   sections: [{
- *     rows: [{
- *       fields: [{
- *         key: 'email',
- *         type: 'input',
- *         inputType: 'email',
- *         label: 'Email',
- *         errors: {
- *           required: 'Email is required',
- *           email: 'Please enter a valid email'
- *         }
- *       }]
- *     }]
- *   }]
- * };
- * ```
- *
- * ### With Select and Autocomplete
- * ```typescript
- * formConfig: DynamicFormConfig = {
- *   sections: [{
- *     rows: [{
- *       fields: [
- *         {
- *           key: 'country',
- *           type: 'select',
- *           label: 'Country',
- *           options: [
- *             { value: 'us', label: 'United States' },
- *             { value: 'ca', label: 'Canada' },
- *           ],
- *           colSpan: 6
- *         },
- *         {
- *           key: 'city',
- *           type: 'autocomplete',
- *           label: 'City',
- *           options: [
- *             { value: 'nyc', label: 'New York' },
- *             { value: 'la', label: 'Los Angeles' },
- *           ],
- *           showAddButton: true,
- *           colSpan: 6
- *         }
- *       ]
- *     }]
- *   }]
- * };
- * ```
- */
-declare class FuiDynamicFormRendererComponent {
-    /**
-     * The FormGroup instance to bind the form to
-     */
-    readonly formGroup: InputSignal<FormGroup>;
-    /**
-     * The configuration object that defines the form structure
-     */
-    readonly config: InputSignal<DynamicFormConfig>;
-    /**
-     * Emitted when an autocomplete action (add/refresh) is triggered
-     */
-    readonly autocompleteAction: OutputEmitterRef<DynamicFormAutocompleteEvent>;
-    /**
-     * Emitted when a file input changes
-     */
-    readonly fileChange: OutputEmitterRef<DynamicFormFileEvent>;
-    /**
-     * Default comparison function for select components
-     */
-    readonly defaultCompareWith: (o1: unknown, o2: unknown) => boolean;
-    /**
-     * Gets a FormControl from the FormGroup by key
-     * @param key The control name/key
-     * @returns The FormControl instance
-     */
-    getControl(key: string): FormControl;
-    /**
-     * Converts error object entries to array for iteration
-     * @param errors The errors object from field config
-     * @returns Array of key-value pairs
-     */
-    getErrorEntries(errors: Record<string, string>): {
-        key: string;
-        value: string;
-    }[];
-    /**
-     * Gets CSS align-items value from row align setting
-     * @param align The row alignment setting
-     * @returns CSS align-items value
-     */
-    getAlignItems(align?: DynamicFormRow['align']): string;
-    /**
-     * Gets CSS justify-content value from row justify setting
-     * @param justify The row justification setting
-     * @returns CSS justify-content value
-     */
-    getJustifyContent(justify?: DynamicFormRow['justify']): string;
-    /**
-     * Handles autocomplete add/refresh button clicks
-     * @param fieldKey The field key that triggered the action
-     * @param action The action type ('add' or 'refresh')
-     */
-    onAutocompleteAction(fieldKey: string, action: 'add' | 'refresh'): void;
-    /**
-     * Handles file input changes
-     * @param event The input change event
-     * @param fieldKey The field key
-     */
-    onFileChange(event: Event, fieldKey: string): void;
-    /**
-     * Type guard to check if a field is not a spacer
-     * @param field The field configuration
-     * @returns Whether the field has a key
-     */
-    isFieldWithKey(field: DynamicFormField): field is Exclude<DynamicFormField, {
-        type: 'spacer';
-    }>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FuiDynamicFormRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FuiDynamicFormRendererComponent, "fui-dynamic-form-renderer", never, { "formGroup": { "alias": "formGroup"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; }, { "autocompleteAction": "autocompleteAction"; "fileChange": "fileChange"; }, never, never, true, never>;
-}
-
-export { FuiDynamicFormRendererComponent };
-export type { DynamicFormAutocompleteEvent, DynamicFormAutocompleteField, DynamicFormCheckboxField, DynamicFormConfig, DynamicFormField, DynamicFormFieldBase, DynamicFormFieldType, DynamicFormFileConfig, DynamicFormFileEvent, DynamicFormFileField, DynamicFormInputField, DynamicFormInputType, DynamicFormOption, DynamicFormRow, DynamicFormSection, DynamicFormSelectField, DynamicFormSpacerField, DynamicFormTextareaField, DynamicFormTitle, DynamicFormTitleImportance };
-//# sourceMappingURL=raintonic-formaui-components-dynamic-form.d.ts.map

package/types/raintonic-formaui-components-dynamic-form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"raintonic-formaui-components-dynamic-form.d.ts","sources":["../../../lib/components/dynamic-form/dynamic-form.types.ts","../../../lib/components/dynamic-form/dynamic-form-renderer.component.ts"],"mappings":";;;;AAAA;;AAEG;AACG,KAAM,oBAAoB;AAYhC;;AAEG;KACS,oBAAoB;AAEhC;;;;;;;;AAQG;AACG,KAAM,0BAA0B;AAEtC;;AAEG;UACc,iBAAiB;;;;;AAKjC;AAED;;AAEG;UACc,qBAAqB;;;;AAIrC;AAED;;AAEG;UACc,oBAAoB;;;;UAI7B,oBAAoB;;;;;;;;aAQjB,MAAM;;;;;;;;;;;;;;;AAehB;AAED;;AAEG;AACG,UAAW,qBAAsB,SAAQ,oBAAoB;;;gBAGrD,oBAAoB;;;;;;;;;;;;;AAajC;AAED;;AAEG;AACG,UAAW,wBAAyB,SAAQ,oBAAoB;;;;;;;;;;AAUrE;AAED;;AAEG;AACG,UAAW,sBAAuB,SAAQ,oBAAoB;;;aAGzD,iBAAiB;;;;AAI1B;AACD;AAED;;AAEG;AACG,UAAW,4BAA6B,SAAQ,oBAAoB;;;aAG/D,iBAAiB;;;;;;;;;;;;;AAa3B;AAED;;AAEG;AACG,UAAW,oBAAqB,SAAQ,oBAAoB;;;iBAGnD,qBAAqB;AACnC;AAED;;AAEG;AACG,UAAW,wBAAyB,SAAQ,oBAAoB;;;AAGpE;AACD;AAED;;AAEG;AACG,UAAW,sBAAuB,SAAQ,IAAI,CAClD,oBAAoB;;;AAKrB;AAED;;AAEG;KACS,gBAAgB,GACxB,qBAAqB,GACrB,wBAAwB,GACxB,sBAAsB,GACtB,4BAA4B,GAC5B,oBAAoB,GACpB,wBAAwB,GACxB,sBAAsB;AAE1B;;AAEG;UACc,cAAc;;YAErB,gBAAgB;;;;;;;;AAQxB;AACD;AAED;;AAEG;UACc,gBAAgB;;;;gBAInB,0BAA0B;;;;;AAKvC;AAED;;AAEG;UACc,kBAAkB;;YAEzB,gBAAgB;;UAElB,cAAc;;;;;AAKrB;AAED;;AAEG;UACc,iBAAiB;;cAEtB,kBAAkB;;;;;AAK7B;AAED;;AAEG;UACc,4BAA4B;;AAE3C;AACD;AAED;;AAEG;UACc,oBAAoB;;AAEnC,WAAO,QAAQ;AAChB;;ACrOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GG;AACH,cA2Ba,+BAA+B;AAC1C;;AAEG;AACH,wBAAoB,WAAW,CAAC,SAAS;AAEzC;;AAEG;AACH,qBAAiB,WAAW,CAAC,iBAAiB;AAE9C;;AAEG;AACH,iCAA6B,gBAAgB,CAAC,4BAA4B;AAE1E;;AAEG;AACH,yBAAqB,gBAAgB,CAAC,oBAAoB;AAE1D;;AAEG;;AAGH;;;;AAIG;AACH,6BAAyB,WAAW;AASpC;;;;AAIG;4BACqB,MAAM;;;;AAI9B;;;;AAIG;0BACmB,cAAc;AAepC;;;;AAIG;gCACyB,cAAc;AAmB1C;;;;AAIG;;AAKH;;;;AAIG;wBACiB,KAAK;AAYzB;;;;AAIG;0BACmB,gBAAgB,YAAY,OAAO,CAAC,gBAAgB;;;yCA5H/D,+BAA+B;2CAA/B,+BAA+B;AA+H3C;;;;","names":[]}