@sixbell-telco/sdk/components/file-upload/file-uploader/file-uploader.component.d.ts

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

import { ElementRef } from '@angular/core';
import { ControlValueAccessor, FormGroup } from '@angular/forms';
import { InputSizeProps, InputVariantProps } from '@sixbell-telco/sdk/components/forms/input';
import { FileExtension } from '../shared/types/file-upload';
import * as i0 from "@angular/core";
/** Possible style variants for the file uploader component */
export type FileUploaderVariantProps = InputVariantProps;
/** Possible size variants for the file uploader component */
export type FileUploaderSizeProps = InputSizeProps;
/** Configuration object for file uploader styling */
export type FileUploaderProps = {
    variant?: FileUploaderVariantProps;
    size?: FileUploaderSizeProps;
};
/**
 * A customizable file upload component with form integration and validation support
 *
 * @remarks
 * Supports file type restrictions, form control integration, and visual validation states.
 * Implements ControlValueAccessor for Angular form compatibility.
 *
 * @example
 * ```html
 * <!-- Basic file upload -->
 * <st-file-uploader
 *   [extensions]="['.pdf', '.docx']"
 *   label="Upload Resume"
 * ></st-file-uploader>
 * ```
 *
 * @example
 * ```html
 * <!-- Reactive form integration -->
 * <st-file-uploader
 *   [parentForm]="documentForm"
 *   formControlName="attachment"
 *   variant="primary"
 * ></st-file-uploader>
 * ```
 */
export declare class FileUploaderComponent implements ControlValueAccessor {
    /**
     * Visual style variant
     * @defaultValue 'secondary'
     */
    variant: import("@angular/core").InputSignal<InputVariantProps>;
    /**
     * Component size variant
     * @defaultValue 'md'
     */
    size: import("@angular/core").InputSignal<InputSizeProps>;
    /**
     * Label displayed above the uploader
     */
    label: import("@angular/core").InputSignal<string>;
    /**
     * HTML name attribute for the input
     */
    name: import("@angular/core").InputSignal<string | null>;
    /**
     * Placeholder text when no file is selected
     */
    placeholder: import("@angular/core").InputSignal<string>;
    /**
     * Whether to show allowed file extensions
     * @defaultValue true
     */
    showExtensions: import("@angular/core").InputSignal<boolean>;
    /**
     * Allowed file extensions (e.g., ['.pdf', '.docx'])
     */
    extensions: import("@angular/core").InputSignal<FileExtension[]>;
    /**
     * Computed accept attribute for native file input
     * @internal
     */
    accept: import("@angular/core").Signal<string>;
    /**
     * Event emitted when a valid file is selected
     */
    fileUpdated: import("@angular/core").OutputEmitterRef<File>;
    /**
     * Current selected filename
     * @internal
     */
    filename: string;
    /**
     * Current file value
     * @internal
     */
    fileValue: File | null;
    /**
     * Formatted extensions string for display
     * @internal
     */
    formattedExtensions: import("@angular/core").Signal<string>;
    /**
     * Reference to the hidden file input
     * @internal
     */
    fileInput: import("@angular/core").Signal<ElementRef<any> | undefined>;
    /**
     * Event emitted on component blur
     */
    blurred: import("@angular/core").OutputEmitterRef<File | null>;
    /**
     * Whether the component is disabled
     * @defaultValue false
     */
    disabled: import("@angular/core").ModelSignal<boolean>;
    /** @internal Track blur events for validation */
    private blurTrigger;
    /**
     * 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>;
    /**
     * Two-way bindable file value
     */
    value: import("@angular/core").ModelSignal<File | null>;
    /** @internal */
    private onControlChange;
    /** @internal */
    private onControlTouch;
    /**
     * Writes form value to component
     * @param obj - The incoming form value
     */
    writeValue(obj: any): void;
    /**
     * Registers change callback
     * @param fn - Callback function for value changes
     */
    registerOnChange(fn: any): void;
    /**
     * Registers touch callback
     * @param fn - Callback function for touch events
     */
    registerOnTouched(fn: any): void;
    /**
     * Sets disabled state
     * @param isDisabled - Whether the component should be disabled
     */
    setDisabledState(isDisabled: boolean): void;
    /**
     * Handles click event on the upload area
     * @internal
     */
    handleClick(): void;
    /**
     * Notifies form control of value changes
     * @internal
     */
    handleChange(): void;
    /**
     * Handles file selection from input
     * @param event - File input change event
     * @internal
     */
    handleFileChange(event: Event): void;
    /**
     * Clears selected file
     * @internal
     */
    removeFile(): void;
    /**
     * @internal
     * Returns base component classes
     */
    componentClass(): FileUploaderProps;
    /**
     * @internal
     * Returns error state classes
     */
    errorClass(): FileUploaderProps;
    /**
     * @internal
     * Returns success state classes
     */
    successClass(): FileUploaderProps;
    /**
     * Handles blur events and validation
     * @internal
     */
    handleBlur(): void;
    /** @internal */
    private formControl;
    /** @internal */
    private formControl$;
    /** @internal */
    private statusChanges$;
    /** @internal */
    private stateChanges$;
    /** @internal */
    private statusSignal;
    /** @internal */
    private stateSignal;
    /**
     * Computes validation classes based on form state
     * @internal
     */
    validationClass: import("@angular/core").Signal<FileUploaderProps>;
    static ɵfac: i0.ɵɵFactoryDeclaration<FileUploaderComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<FileUploaderComponent, "st-file-uploader", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showExtensions": { "alias": "showExtensions"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "parentForm": { "alias": "parentForm"; "required": false; "isSignal": true; }; "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "fileUpdated": "fileUpdated"; "blurred": "blurred"; "disabled": "disabledChange"; "value": "valueChange"; }, never, ["*"], true, never>;
}