import { PropertyValueMap } from "lit"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { Ref } from "lit/directives/ref.js"; import { FDiv } from "../f-div/f-div"; import { FText } from "../f-text/f-text"; export type FFileUploadState = "primary" | "default" | "success" | "warning" | "danger"; export type FFileUploadValueType = File | File[]; export type FFileUploadFileType = string | "all"; export type FFileUploadSizeProp = `${number} B` | `${number} KB` | `${number} MB` | `${number} GB` | `${number} TB`; export declare class FFileUpload extends FRoot { /** * css loaded from scss file */ static styles: import("lit").CSSResult[]; /** * @attribute f-file-upload has 2 type of modes: single and multiple. When type is single, a user can select only one file and the filename appears inline to the file uploader. When type is multiple, a user can select multiple files and each filename stacks under the file uploader. */ type?: "single" | "multiple"; /** * @attribute Defines the return value of f-file-uploader. When type is single, return value is single file object instance. When type is multiple, return value is an array of file object instances. */ value?: FFileUploadValueType; /** * @attribute Defines the placeholder text for f-file-upload. Note: Placeholder is replaced by file name when type is single. */ placeholder?: string; /** * @attribute Users can limit the file types by setting the file-type property to a string containing the allowed file type(s). To specify more than one type, separate the values with a comma. Acceptable file formats are displayed in brackets under description. */ fileType?: FFileUploadFileType; /** * @attribute f-file-upload can have 2 sizes. Note: Font styles are same in both sizes. Only paddings and gaps are different */ size?: "medium" | "small"; /** * @attribute States are used to communicate purpose and connotations. For example, a red color connotes danger, whereas a green color connotes success and so on. */ state?: FFileUploadState; /** * @attribute This shows the maximum file size allowed per file */ maxSize?: FFileUploadSizeProp; /** * @attribute Sets the file-upload to disabled state. */ disabled?: boolean; /** * @attribute Sets the file-upload to loading state */ loading?: boolean; fileUploadSection: HTMLElement; fileUploadHeader: FDiv; fileUploadError: FDiv; labelSlot: HTMLElement; descriptionSlot: HTMLElement; helpSlot: HTMLElement; textOverflow: FText; /** * @attribute assigned elements inside slot label */ _labelNodes: NodeListOf; /** * @attribute assigned elements inside slot description */ _descriptionNodes: NodeListOf; /** * @attribute assigned elements inside slot help */ _helpNodes: NodeListOf; bytes: number; sizeLimitFlag: boolean; acceptedFilesFlag: boolean; selectedFiles?: File[]; fileInputRef: Ref; /** * has label slot */ get hasLabel(): boolean; /** * has description slot */ get hasDescription(): boolean; /** * has help slot */ get hasHelperText(): boolean; /** * error if file format is incorrect */ get fileFormatError(): string; /** * error if file size is more than given size */ get fileSizeError(): string; /** * value for event dispatch */ get dispatchValue(): File | File[] | undefined; /** * on click open file selector window on OS */ handleClick(): void; /** * @param e DragEvent * drag and drop file(s) and event emission */ dropFile(e: DragEvent): void; /** * select file(s) from browse options * @param e InputEvent */ selectFile(e: InputEvent): void; /** * dispatch input event * @param e Event */ dispatchOnInput(e: Event): void; /** * on click remove the selected single file * @param e MouseEvent */ handleRemoveFile(e: MouseEvent): void; /** * removes the clicked respective file from selection array * @param e MouseEvent * @param file contains clicked file */ handleRemoveRespectiveFile(e: MouseEvent, file: File): void; /** * check if ellipsis happens on text and insert tooltip */ checkOverflowing(): void; /** * in multiple file selection hovering on the particular file name may open the tooltip -if ellipsis is present * @param e MouseEvent */ handleMouseEnter(e: MouseEvent): void; /** * * @param str single character * @returns boolea value if character present is alphabet or not */ isLetter(str: string): boolean; /** * * @param str string * @param index index to splice from * @returns returns an array [number, characters] */ split(str: string, index: number): string[]; /** * update file array locally */ updateSelectedValues(): void; /** * display messages according to conditions */ helpSectionMessages(): void; /** * conditional help section display for false spacing issue */ helpSectionDisplay(): void; /** * conditional header section display for false spacing issue */ headerSectionDisplay(): void; render(): import("lit-html").TemplateResult<1>; protected updated(changedProperties: PropertyValueMap | Map): void; } /** * Required for typescript */ declare global { interface HTMLElementTagNameMap { "f-file-upload": FFileUpload; } }