dap-design-system/dist/components/file-input/file-input-list-item.component.d.ts

Official design system for the DÁP (dap.gov.hu)

import { TemplateResult } from 'lit';
import { FeedbackType, FileItemTemplate, LinkTarget } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSFeedback } from '../feedback/feedback.component';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSIconButton } from '../icon-button/icon-button.component';
import { default as DapDSLink } from '../link/link.component';
import { default as DapDSSpinner } from '../spinner/spinner.component';
import { default as DapDSStack } from '../stack/stack.component';
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 {
    static tagName: string;
    static dependencies: {
        'dap-ds-icon': typeof DapDSIcon;
        'dap-ds-stack': typeof DapDSStack;
        'dap-ds-link': typeof DapDSLink;
        'dap-ds-spinner': typeof DapDSSpinner;
        'dap-ds-icon-button': typeof DapDSIconButton;
        'dap-ds-feedback': typeof DapDSFeedback;
    };
    /** 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;
    /** `data-testid` for the remove-file button. */
    removeButtonTestId: 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<string, any>): void;
    disconnectedCallback(): void;
    get formattedSize(): string;
    render(): TemplateResult<1>;
}
export {};