/**
 * A versatile interface for component configurations.
 *
 * @example
 * // A text field with a unique id (cid)
 * {
 *   type: 'text',
 *   name: 'username',
 *   placeholder: 'Enter your username',
 *   cid: 'comp1234',
 *   class: ['input', 'text-input']
 * }
 *
 * @example
 * // A label without a unique id (cid)
 * {
 *   type: 'label',
 *   text: 'Username'
 * }
 */
export interface ComponentModel {
    /**
     * The type of the component (e.g., 'text', 'label', 'checkbox', etc.).
     * please visit ../services/component-mapping.service.ts for the list of available types.
     * The type is used to determine which Angular component to load.
     */
    type: string;
    /**
     * An optional identifier for the component, used for form controls or as a reference.
     * This is typically the name of the form control in a reactive form.
     * For example, 'username' for a text input field.
     * If the component is not part of a form, this can be any unique identifier.
     */
    name?: string;
    /**
     * An optional unique component id for targeted JavaScript operations.
     * This is useful for identifying the component in the DOM or for JavaScript operations.
     * For example, 'comp1234' for a specific component instance.
     * If not provided, the component will not have a unique identifier.
     */
    cid?: string;
    /**
     * An array of nested child components, if the current component is a container.
     * For example, a 'formGroup' component can have multiple child components.
     * This property is used to define the structure of the component hierarchy.
     * Example: [{ type: 'text', name: 'username' }, { type: 'password', name: 'password' }]
     * This property is optional and should only be used if the component supports child components.
     * If not provided, the component will not have any child components.
     */
    components?: ComponentModel[];
    /**
     * Additional, component-specific properties.
     * These properties can vary widely depending on the component type.
     * For example, a text input might have 'placeholder' and 'value' properties,
     * while a checkbox might have 'checked' and 'label' properties.
     * Example: { placeholder: 'Enter text...', text: 'Display text', ... }
     */
    [key: string]: any;
}