signal-template-forms
Version:
A powerful, type-safe Angular forms library built with signals, providing reactive form management with excellent developer experience and performance.
202 lines (201 loc) • 8.24 kB
TypeScript
import { ElementRef, Injector, Renderer2 } from '@angular/core';
import { FormFieldType } from '../../../enums/form-field-type.enum';
import { type SignalFormContainer, type SignalFormField } from '../../../models/signal-form.model';
import * as i0 from "@angular/core";
import * as i1 from "../../base/host-directive/signal-form-host.directive";
/**
* Signal Form Input Item Component
*
* Renders individual form fields with support for custom styling, validation,
* and various field types. This component handles the wrapper, label, input,
* error messages, and hint text for each field.
*
* Features:
* - Custom styling via modifierClass, stylesFn, and inlineStylesFn
* - Dynamic validation state styling
* - Part-specific styling (wrapper, label, input, error, hint)
* - Reactive computed values
* - Focus management and error highlighting
* - ViewEncapsulation.None for external styling support
*
* @template TModel - The type of the form model this field belongs to
*/
export declare class SignalFormInputItemComponent<TModel> {
private readonly renderer;
private readonly host;
private readonly injector;
/** The field configuration and state for this input item */
field: import("@angular/core").InputSignal<SignalFormField<TModel>>;
/** The parent form container that this field belongs to */
form: import("@angular/core").InputSignal<SignalFormContainer<TModel, unknown>>;
/** Optional index for repeatable fields (used in field naming) */
index: import("@angular/core").InputSignal<number | null | undefined>;
/** Form field type constants for template use */
protected readonly FormFieldType: typeof FormFieldType;
/** Tracks whether the component has been initialized with computed values */
private initialized;
/** Service for handling field validation */
private validationService;
/**
* Computed name for the field, including index if applicable
* Used for HTML id, for attributes, and accessibility
*/
protected name: import("@angular/core").Signal<string>;
/**
* Grid area binding for CSS Grid layouts
* Uses the field name as the grid area identifier
*/
get gridArea(): string | null;
/**
* Host class binding that applies wrapper-level styling
* Combines static modifier classes and dynamic styling functions
* as well as theme based classes too
*/
get hostClasses(): string;
/**
* Host style binding that applies wrapper-level inline styles
* Uses the inlineStylesFn to generate dynamic styles
*/
get hostStyles(): {
[key: string]: string;
};
/**
* Computes CSS classes for the field wrapper element
* Handles static modifierClass and dynamic stylesFn results
*
* @returns Space-separated string of CSS classes
* @private
*/
private computeWrapperClasses;
/**
* Computes inline styles for the field wrapper element
*
* @returns Object containing CSS property-value pairs
* @private
*/
private computeWrapperStyles;
/**
* Extracts CSS classes for specific field parts (label, input, error, hint)
*
* @param part - The field part to get classes for
* @returns Space-separated string of CSS classes for the specified part
* @private
*/
private getPartClasses;
/**
* Extracts inline styles for specific field parts (label, input, error, hint)
*
* @param part - The field part to get styles for
* @returns Object containing CSS property-value pairs for the specified part
* @private
*/
private getPartStyles;
/** Computed CSS classes for the field label */
protected labelClasses: import("@angular/core").Signal<string>;
/** Computed CSS classes for the field input wrapper */
protected inputClasses: import("@angular/core").Signal<string>;
/** Computed CSS classes for the field error message */
protected errorClasses: import("@angular/core").Signal<string>;
/** Computed CSS classes for the field hint text */
protected hintClasses: import("@angular/core").Signal<string>;
/** Computed inline styles for the field label */
protected labelStyles: import("@angular/core").Signal<{
[key: string]: string;
}>;
/** Computed inline styles for the field input wrapper */
protected inputStyles: import("@angular/core").Signal<{
[key: string]: string;
}>;
/** Computed inline styles for the field error message */
protected errorStyles: import("@angular/core").Signal<{
[key: string]: string;
}>;
/** Computed inline styles for the field hint text */
protected hintStyles: import("@angular/core").Signal<{
[key: string]: string;
}>;
/**
* Component constructor
* Initializes all reactive effects for computed values, validation, and focus management
*
* @param renderer - Angular Renderer2 for DOM manipulation
* @param host - Reference to the component's host element
* @param injector - Angular injector for effect contexts
*/
constructor(renderer: Renderer2, host: ElementRef, injector: Injector);
/**
* Determines if the field is required based on its validators
*
* @returns True if the field has required validators
* @protected
*/
protected isRequired(): boolean;
/**
* Computed property that returns the combined error message for the field
* Combines synchronous and asynchronous validation errors
*/
protected hasError: import("@angular/core").Signal<string | null>;
/**
* Computed property that determines if the field is currently validating
* Checks for async validation in progress
*/
protected isValidating: import("@angular/core").Signal<any>;
/**
* Placeholder for form options initialization
* Reserved for future functionality
*
* @private
*/
private initializeFormOptionsEffect;
/**
* Effect that initializes computed field values on component setup
* Runs once when the component first loads if the field has a computedValue function
*
* @private
*/
private initializeComputedValueEffect;
/**
* Effect that watches for changes to computed field values
* Updates the field value when the computed value function result changes
*
* @private
*/
private watchComputedValueEffect;
/**
* Effect that sets up validation for the field
* Configures validation triggers, debouncing, and async validation
*
* @private
*/
private setupValidation;
/**
* Effect that handles field focus behavior
* Scrolls to and highlights fields when focus is requested,
* typically when navigating to validation errors
*
* @private
*/
private focusEffect;
/**
* Computed property that determines if the field should be hidden
* Supports both boolean and function-based hidden conditions
*/
protected isHidden: import("@angular/core").Signal<boolean>;
/**
* Computed property that determines if the field should be disabled
* Supports both boolean and function-based disabled conditions
*/
protected isDisabled: import("@angular/core").Signal<boolean>;
/**
* Sets the field value with proper type handling
* Handles different value types (string, number, boolean, Date, object)
* and updates the field's touched and dirty states
*
* @param value - The value to set on the field
* @param markTouched - Whether to mark the field as touched and dirty (default: true)
* @private
*/
private setValue;
static ɵfac: i0.ɵɵFactoryDeclaration<SignalFormInputItemComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SignalFormInputItemComponent<any>, "signal-form-input-item", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "form": { "alias": "form"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.SignalFormHostDirective; inputs: {}; outputs: {}; }]>;
}