import { DeepObject, DroppableUiComponent, Field, FieldComponent, FieldConfig, GroupField, SelectiveEditor, TemplateResult, Types } from '@blinkk/selective-edit'; import { MediaFileData } from '../api'; import { LiveEditorGlobalConfig } from '../editor'; import { Template } from '@blinkk/selective-edit/dist/selective/template'; export declare const DEFAULT_EXTRA_KEY = "extra"; export declare const EXT_TO_MIME_TYPE: Record; export declare const VALID_IMAGE_MIME_TYPES: string[]; export declare const VALID_VIDEO_MIME_TYPES: string[]; export interface MediaFieldConfig extends FieldConfig { /** * Valid mime or file types that the field accepts. * * Defaults to {@link VALID_IMAGE_MIME_TYPES} and {@link VALID_VIDEO_MIME_TYPES}. * * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers */ accepted?: Array; /** * Key to use for the data for the 'extra' fields. * * For example, if the `extraKey` is `foo` then the data * would look similar to: * * ```yaml * path: /path/to/file.png * foo: * title: testing * ``` */ extraKey?: string; /** * Label to use for the 'extra' fields. */ extraLabel?: string; /** * Fields to be grouped. */ fields?: Array; /** * Are the extra fields expanded to show the fields? * * Set to `true` to expand the extra fields by default. */ isExpanded?: boolean; /** * Placeholder for the path input. */ placeholder?: string; /** * Placeholder for the label input. */ placeholderLabel?: string; /** * Preview field keys. * * When showing a preview of the group, use these field keys to determine * the value to show for the preview. * * If no fields are no preview will be shown for the group when collapsed. */ previewFields?: Array; /** * Override the default media upload provider to determine if the upload * should be remote. */ remote?: boolean; } export interface MediaFieldComponent extends FieldComponent { config: MediaFieldConfig; droppableUi: DroppableUiComponent; handleFiles(files: Array): void; isProcessing?: boolean; templatePreviewMedia: Template; templatePreviewValue(editor: SelectiveEditor, data: DeepObject, index?: number): TemplateResult; } export interface MediaMeta { height: number; width: number; } declare const MediaField_base: (new (...args: any[]) => { _droppableUi?: DroppableUiComponent | undefined; droppableUi: DroppableUiComponent; }) & typeof Field; export declare class MediaField extends MediaField_base implements MediaFieldComponent { config: MediaFieldConfig; group?: GroupField; globalConfig: LiveEditorGlobalConfig; isProcessing?: boolean; meta?: MediaMeta; showFileUpload?: boolean; constructor(types: Types, config: MediaFieldConfig, globalConfig: LiveEditorGlobalConfig, fieldType?: string); /** * Cleanup the media value. * * If the media field is used in a normal list it will have trouble * determining a default empty value. * * @param value Original value from the source. */ cleanOriginalValue(value: any): any; protected ensureGroup(): void; /** * Handle when the accessibility label changes value. * * @param evt Input event from changing value. */ handleA11yLabel(evt: Event): void; handleFiles(files: Array): void; /** * Handle when the input changes value. * * @param evt Input event from changing value. */ handleInput(evt: Event): void; /** * Handle when the input changes value. * * @param evt Input event from changing value. */ handleFileUpload(evt: Event): void; handlePreviewMediaLoad(evt: Event): void; handlePreviewVideoLoad(evt: Event): void; get isClean(): boolean; /** * Check if the data format is invalid for what the field expects to edit. */ get isDataFormatValid(): boolean; get isSimple(): boolean; get isValid(): boolean; /** * Retrieve the url for previewing the field. */ get previewUrl(): string | undefined; templateAltLabel(editor: SelectiveEditor, data: DeepObject): TemplateResult; templateFileUpload(editor: SelectiveEditor, data: DeepObject): TemplateResult; templateInput(editor: SelectiveEditor, data: DeepObject): TemplateResult; templatePreview(editor: SelectiveEditor, data: DeepObject): TemplateResult; /** * Template for how to render a preview. * * @param editor Selective editor used to render the template. * @param data Data provided to render the template. */ templatePreviewValue(editor: SelectiveEditor, data: DeepObject, index?: number): TemplateResult; templatePreviewMedia(editor: SelectiveEditor, data: DeepObject): TemplateResult; templatePreviewMeta(editor: SelectiveEditor, data: DeepObject): Array; uploadFile(uploadFile: File): Promise; /** * Get the value for the field, optionally including the extra values. */ get value(): any; } export {};