import { TemplateResult } from 'lit'; import { FeedbackType, FileItemTemplate, LinkTarget } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; export type FileListElement = { name: string; type: string; size: number; lastModified: number; }; declare const DapDSFileInputListItem_base: typeof DdsElement & { new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface; prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface; }; /** * `dap-ds-file-input-list-item` * @summary A file input list item is a container for file input list items. * @element dap-ds-file-input-list-item * @title - File input list item * @group file-input * * @event {{ file: FileListElement }} dds-file-remove - Dispatched when a file is removed from the list. * @event {{ file: FileListElement }} dds-file-click - Dispatched when a file is clicked. * * @slot delete-button - The delete button. * * @csspart base - The main file input list item container. * @csspart feedback - The feedback container. * @csspart link - The link text of the item component. * @csspart filename - The filename text of the item component. * @csspart filesize - The filesize text of the item component. * @csspart spinner - The spinner of the item component. * @csspart remove-button - The remove button of the item component. * @csspart thumbnail - The thumbnail of the item component. * * @cssproperty --dds-file-list-item-padding - The padding of the file list item (default: var(--dds-spacing-200)) * @cssproperty --dds-file-list-item-border-width - The border width of the file list item (default: var(--dds-border-width-base)) * @cssproperty --dds-file-list-item-border-color - The border color of the file list item (default: var(--dds-border-neutral-transparent)) * @cssproperty --dds-file-list-item-border-radius - The border radius of the file list item (default: var(--dds-radius-base)) * @cssproperty --dds-file-list-item-bg-color - The background color of the file list item (default: var(--dds-fields-background-default)) * @cssproperty --dds-file-list-item-font-weight - The font weight of the file list item (default: var(--dds-font-weight-medium)) * @cssproperty --dds-file-list-item-disabled-bg-color - The background color of the disabled file list item (default: var(--dds-cold-grey-400)) * @cssproperty --dds-file-list-item-disabled-color - The text color of the disabled file list item (default: var(--dds-text-neutral-disabled)) * @cssproperty --dds-file-list-item-content-margin - The margin of the content within the file list item (default: var(--dds-spacing-100) var(--dds-spacing-200)) * @cssproperty --dds-file-list-item-content-gap - The gap between content elements in the file list item (default: var(--dds-spacing-200)) * @cssproperty --dds-file-list-item-filename-color - The color of the filename text (default: var(--dds-text-neutral-base)) * @cssproperty --dds-file-list-item-filesize-color - The color of the filesize text (default: var(--dds-text-neutral-subtle)) * @cssproperty --dds-file-list-item-feedback-padding-x - The padding of the feedback section (default: var(--dds-spacing-200)) * @cssproperty --dds-file-list-item-feedback-padding-y - The padding of the feedback section (default: var(--dds-spacing-100)) * @cssproperty --dds-file-list-item-feedback-border-color - The border color of the feedback section (default: var(--dds-border-neutral-divider)) * @cssproperty --dds-file-list-item-feedback-font-size - The font size of the feedback text (default: var(--dds-font-sm)) */ export default class DapDSFileInputListItem extends DapDSFileInputListItem_base { /** Disables the file input list item. */ disabled: boolean; /** The name of the file input. */ inputName: string; /** The feedback message. */ feedback: string; /** Feedback type. * @type {'negative' | 'positive' | 'warning' | 'info'} */ feedbackType: FeedbackType; /** Loading state of the file input list item. */ loading?: boolean | undefined; /** Show delete button. */ showDeleteButton: string; /** Show file size. */ showFileSize?: string | undefined; /** Show file link. */ showFileLink?: string | undefined; /** Whether to emit a custom event with the file data when the file is clicked. */ emitLinkEvent: boolean; /** File item template function * @type {(fileItemTemplate: FileItemTemplate) => TemplateResult} */ fileItemTemplate?: (fileItemTemplate: FileItemTemplate) => TemplateResult; /** The label of the file link. */ fileLinkLabel: string; /** The file data. */ fileData: FileListElement | File; /** Subtle style. */ subtle: boolean; /** The progress of the file upload. */ progress: string; /** The url of the item link. If present, the item title will rendered as a link. */ href: string; /** The rel of the item link. Only used if href is present. */ rel: string; /** The target of the item link. Only used if href is present. */ target: LinkTarget; /** Whether the file should be downloaded when clicked. */ download: string; /** Whether to show thumbnail preview for supported file types. */ showThumbnail: string; /** Size of the thumbnail preview. */ thumbnailSize: 'xxs' | 'xs' | 'sm' | 'md' | 'lg'; private _fileObjectUrl; private _thumbnailUrl; private _fileType; static readonly styles: import('lit').CSSResult; delete(file?: FileListElement | File): void; private detectFileType; private getFileTypeIcon; private generateThumbnail; private createFileObjectUrl; cleanupFileObjectUrl(): void; private handleFileClick; connectedCallback(): void; updated(changedProperties: Map): void; disconnectedCallback(): void; get formattedSize(): string; render(): TemplateResult<1>; } export {};