@lesterarte/sefin-ui 0.0.20-dev.8 → 0.0.20-dev.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesterarte/sefin-ui",
-  "version": "0.0.20-dev.8",
+  "version": "0.0.20-dev.9",
   "description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
   "keywords": [
     "angular",

package/types/lesterarte-sefin-ui.d.ts

@@ -1563,6 +1563,98 @@ declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit, O
     static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "sefin-datepicker", never, { "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "format": { "alias": "format"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; }, { "valueChange": "valueChange"; "dateSelected": "dateSelected"; }, never, never, true, never>;
 }
 
+type FormFieldVariant = 'outlined' | 'filled' | 'standard';
+type FormFieldSize = 'sm' | 'md' | 'lg';
+type FormFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+declare class FormFieldComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy {
+    private cdr;
+    inputRef?: ElementRef<HTMLInputElement>;
+    /** Label text for the field */
+    label: string;
+    /** FormField variant style. Options: 'outlined' | 'filled' | 'standard' */
+    variant: FormFieldVariant;
+    /** FormField size. Options: 'sm' | 'md' | 'lg' */
+    size: FormFieldSize;
+    /** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' */
+    type: FormFieldType;
+    /** Placeholder text */
+    placeholder: string;
+    /** Helper text shown below the input */
+    hint: string;
+    /** Error message to display */
+    errorMessage: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Whether the field is readonly */
+    readonly: boolean;
+    /** Maximum length of the input */
+    maxLength?: number;
+    /** Minimum length of the input */
+    minLength?: number;
+    /** Pattern for validation (regex string) */
+    pattern?: string;
+    /** Leading icon name */
+    leadingIcon?: string;
+    /** Trailing icon name */
+    trailingIcon?: string;
+    /** Whether to show character counter */
+    showCounter: boolean;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Input name attribute */
+    name: string;
+    /** Input id attribute */
+    id: string;
+    /** Additional CSS classes */
+    class: string;
+    /** Custom validation function */
+    customValidator?: (value: string) => string | null;
+    /** Event emitted when the value changes */
+    valueChange: EventEmitter<string>;
+    /** Event emitted when the input is focused */
+    focused: EventEmitter<FocusEvent>;
+    /** Event emitted when the input is blurred */
+    blurred: EventEmitter<FocusEvent>;
+    /** Event emitted when trailing icon is clicked */
+    trailingIconClick: EventEmitter<MouseEvent>;
+    value: string;
+    isFocused: boolean;
+    hasError: boolean;
+    internalErrorMessage: string;
+    internalId: string;
+    private onChange;
+    private onTouched;
+    private destroy$;
+    private control?;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private generateIdIfNeeded;
+    get fieldId(): string;
+    get labelId(): string;
+    get inputId(): string;
+    get hintId(): string;
+    onInput(event: Event): void;
+    onFocus(event: FocusEvent): void;
+    onBlur(event: FocusEvent): void;
+    onTrailingIconClick(event: MouseEvent): void;
+    private validateField;
+    get displayError(): boolean;
+    get displayErrorMessage(): string;
+    get characterCount(): number;
+    get formFieldClasses(): string;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "sefin-form-field", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; "customValidator": { "alias": "customValidator"; "required": false; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
+}
+
 type PaginationSize = 'sm' | 'md' | 'lg';
 type PaginationVariant = 'default' | 'compact';
 declare class PaginationComponent {
@@ -1702,5 +1794,5 @@ declare class TextareaComponent implements ControlValueAccessor, Validator, OnIn
 
 declare const STYLES_PATH = "./styles/index.scss";
 
-export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
-export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, ShadowToken, SpacerOrientation, SpacerSize, SpacingToken, SpinnerSize, SpinnerVariant, TabSize, TabVariant, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, FormFieldSize, FormFieldType, FormFieldVariant, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, ShadowToken, SpacerOrientation, SpacerSize, SpacingToken, SpinnerSize, SpinnerVariant, TabSize, TabVariant, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };