juvo-rafa-library
Version:
A comprehensive Angular component library featuring real-world components and validators extracted from the Juvo Rafa backoffice application. Now with improved select components and bug fixes.
126 lines (125 loc) • 4.24 kB
TypeScript
import { EventEmitter } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
/**
* File upload interface
* @interface UploadedFile
* @since 2.1.0
*/
export interface UploadedFile {
name: string;
size: number;
type: string;
url?: string;
file?: File;
}
/**
* Image Picker Component
*
* @description
* A drag-and-drop image picker component for file uploads.
* Supports multiple file selection, preview, and validation.
* Originally designed for backoffice applications with image management needs.
*
* @example
* ```html
* <!-- Basic image picker -->
* <juvo-image-picker
* [multiple]="false"
* [maxSize]="5242880"
* (filesSelected)="onFilesSelected($event)"
* (fileRemoved)="onFileRemoved($event)">
* </juvo-image-picker>
*
* <!-- Multiple images with preview -->
* <juvo-image-picker
* [multiple]="true"
* [maxFiles]="5"
* [showPreview]="true"
* acceptedTypes="image/*"
* [(ngModel)]="selectedFiles">
* </juvo-image-picker>
* ```
*
* @selector juvo-image-picker
* @since 2.1.0
* @author Juvo Rafa Team
*/
export declare class JuvoImagePickerComponent implements ControlValueAccessor {
/** Whether multiple files can be selected @default false */
multiple: boolean;
/** Maximum file size in bytes @default 5MB */
maxSize: number;
/** Maximum number of files (for multiple mode) @default 10 */
maxFiles: number;
/** Accepted file types @default "image/*" */
acceptedTypes: string;
/** Whether to show file preview @default true */
showPreview: boolean;
/** Whether component is disabled @default false */
disabled: boolean;
/** Placeholder text */
placeholder: string;
/** Upload button text */
buttonText: string;
/** Whether to show file details @default true */
showFileDetails: boolean;
/** Emitted when files are selected */
filesSelected: EventEmitter<UploadedFile[]>;
/** Emitted when a file is removed */
fileRemoved: EventEmitter<UploadedFile>;
/** Emitted when validation errors occur */
validationError: EventEmitter<string>;
files: UploadedFile[];
isDragOver: boolean;
private _onChange;
private _onTouched;
/**
* Gets CSS classes for the drop zone
* @returns Combined CSS classes
*/
get dropZoneClasses(): string;
/**
* Handles drag over event
*/
onDragOver(event: DragEvent): void;
/**
* Handles drag leave event
*/
onDragLeave(event: DragEvent): void;
/**
* Handles file drop event
*/
onDrop(event: DragEvent): void;
/**
* Handles file input change
*/
onFileInputChange(event: Event): void;
/**
* Processes selected files
*/
private handleFiles;
/**
* Validates file type
*/
private isValidFileType;
/**
* Removes a file
*/
removeFile(file: UploadedFile): void;
/**
* Formats file size for display
*/
formatFileSize(size: number): string;
/**
* Updates form control value
*/
private updateValue;
writeValue(value: UploadedFile[]): void;
registerOnChange(fn: (value: UploadedFile[]) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState(isDisabled: boolean): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<JuvoImagePickerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<JuvoImagePickerComponent, "juvo-image-picker", never, { "multiple": { "alias": "multiple"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "maxFiles": { "alias": "maxFiles"; "required": false; }; "acceptedTypes": { "alias": "acceptedTypes"; "required": false; }; "showPreview": { "alias": "showPreview"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "showFileDetails": { "alias": "showFileDetails"; "required": false; }; }, { "filesSelected": "filesSelected"; "fileRemoved": "fileRemoved"; "validationError": "validationError"; }, never, never, true, never>;
}