@sixbell-telco/sdk/components/forms/input/src/input.component.d.ts

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { ControlValueAccessor, FormGroup } from '@angular/forms';
import * as i0 from "@angular/core";
/** Possible input style variants */
export type InputVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | null | undefined;
/** Possible input size variants */
export type InputSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Configuration object for input styling */
export type InputProps = {
    variant?: InputVariantProps;
    size?: InputSizeProps;
};
/** Native HTML input types supported by the component */
type HTMLNativeInputType = 'text' | 'email' | 'number' | 'password' | 'file';
/**
 * A customizable input component with validation, debouncing, and styling variants
 *
 * @remarks
 * Implements ControlValueAccessor for seamless integration with Angular forms.
 * Supports both template-driven and reactive forms, with automatic validation styling.
 *
 * @example
 * ```html
 * <!-- Basic usage -->
 * <st-input label="Username" [(value)]="username"></st-input>
 * ```
 *
 * @example
 * ```html
 * <!-- With validation and custom styling -->
 * <st-input
 *   variant="secondary"
 *   size="lg"
 *   label="Email"
 *   type="email"
 *   [parentForm]="userForm"
 *   formControlName="email"
 * ></st-input>
 * ```
 */
export declare class InputComponent implements ControlValueAccessor {
    /**
     * Input style variant
     * @defaultValue 'secondary'
     */
    variant: import("@angular/core").InputSignal<InputVariantProps>;
    /**
     * Input size variant
     * @defaultValue 'md'
     */
    size: import("@angular/core").InputSignal<InputSizeProps>;
    /**
     * Label text displayed above the input
     */
    label: import("@angular/core").InputSignal<string>;
    /**
     * HTML input type
     * @defaultValue 'text'
     */
    type: import("@angular/core").InputSignal<HTMLNativeInputType>;
    /**
     * HTML name attribute for the input
     */
    name: import("@angular/core").InputSignal<string | null>;
    /**
     * Input placeholder text
     */
    placeholder: import("@angular/core").InputSignal<string>;
    /**
     * Whether the input is read-only
     * @defaultValue false
     */
    readonly: import("@angular/core").InputSignal<boolean>;
    focus: import("@angular/core").InputSignal<boolean>;
    justNumbers: import("@angular/core").InputSignal<boolean>;
    /**
     * Whether to use ghost (transparent) styling
     * @defaultValue false
     */
    ghost: import("@angular/core").InputSignal<boolean>;
    /**
     * Two-way bindable input value
     */
    value: import("@angular/core").ModelSignal<string>;
    /**
     * Parent form group for reactive forms
     */
    parentForm: import("@angular/core").InputSignal<FormGroup<any> | null>;
    /**
     * Form control name for reactive forms
     */
    formControlName: import("@angular/core").InputSignal<string>;
    private onControlChange;
    private onControlTouch;
    /**
     * Whether the input is disabled
     * @defaultValue false
     */
    disabled: import("@angular/core").ModelSignal<boolean>;
    /**
     * Event emitted when Enter key is pressed
     */
    enterPressed: import("@angular/core").OutputEmitterRef<string>;
    /**
     * Event emitted when input loses focus
     */
    blurred: import("@angular/core").OutputEmitterRef<string>;
    /**
     * Event emitted with debounced value changes
     */
    valueDebounced: import("@angular/core").OutputEmitterRef<string>;
    /**
     * Debounce time in milliseconds for value changes
     * @defaultValue 500
     */
    debounceTime: import("@angular/core").InputSignal<number>;
    private blurTrigger;
    private debounceAction$;
    private debounceTimeEffect;
    private value$;
    constructor();
    /**
     * @internal
     * Computed base input classes
     */
    componentClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Computed error state classes
     */
    errorClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Computed success state classes
     */
    successClass: import("@angular/core").Signal<string>;
    writeValue(obj: any): void;
    registerOnChange(fn: any): void;
    registerOnTouched(fn: any): void;
    setDisabledState(isDisabled: boolean): void;
    /**
     * @internal
     * Handles input value changes
     */
    handleChange(): void;
    /**
     * @internal
     * Handles Enter key press
     */
    handleEnter(): void;
    /**
     * @internal
     * Handles blur event
     */
    handleBlur(): void;
    /** @internal */
    private formControl;
    /** @internal */
    private formControl$;
    /** @internal */
    private statusChanges$;
    /** @internal */
    private stateChanges$;
    /** @internal */
    private statusSignal;
    /** @internal */
    private stateSignal;
    /**
     * @internal
     * Reactive validation class computation
     */
    validationClass: import("@angular/core").Signal<string>;
    /**
     * @internal
     * Sets up debounced value changes
     */
    private setupDebounce;
    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "st-input", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "focus": { "alias": "focus"; "required": false; "isSignal": true; }; "justNumbers": { "alias": "justNumbers"; "required": false; "isSignal": true; }; "ghost": { "alias": "ghost"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "parentForm": { "alias": "parentForm"; "required": false; "isSignal": true; }; "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "enterPressed": "enterPressed"; "blurred": "blurred"; "valueDebounced": "valueDebounced"; }, never, ["st-input-content[alignment='start']", "st-input-content[alignment='end']", ":not(st-input-content)"], true, never>;
}
export {};