@limetech/lime-elements/dist/types/components/profile-picture/profile-picture.d.ts

Lime Elements

import { EventEmitter } from '../../stencil-public-runtime';
import { FileInfo } from '../../global/shared-types/file.types';
import { Icon } from '../../global/shared-types/icon.types';
import { Languages } from '../date-picker/date.types';
import { ResizeOptions } from '../../util/image-resize';
/**
 * This component displays a profile picture, while allowing the user
 * to change it via a file input or drag-and-drop.
 *
 * It supports client-side image resizing and conversion,
 * as well as a simple lazy-loading mechanism.
 *
 * @exampleComponent limel-example-profile-picture-basic
 * @exampleComponent limel-example-profile-picture-helper-text
 * @exampleComponent limel-example-profile-picture-icon
 * @exampleComponent limel-example-profile-picture-with-value
 * @exampleComponent limel-example-profile-picture-loading
 * @exampleComponent limel-example-profile-picture-image-fit
 * @exampleComponent limel-example-profile-picture-composite
 * @exampleComponent limel-example-profile-picture-resize-contain
 * @exampleComponent limel-example-profile-picture-resize-cover
 * @exampleComponent limel-example-profile-picture-resize-fallback
 * @exampleComponent limel-example-profile-picture-styling
 * @beta
 */
export declare class ProfilePicture {
    /**
     * Defines the language for translations.
     * Will translate the translatable strings on the components.
     */
    language: Languages;
    /**
     * Accessible label for the the browse button.
     */
    label: string;
    /**
     * Placeholder icon of the component, displayed when no image is present.
     */
    icon: string | Icon;
    /**
     * Helper text shown as a tooltip on hover or focus.
     */
    helperText?: string;
    /**
     * Disables user interaction.
     * Prevents uploading new pictures or removing existing ones.
     */
    disabled: boolean;
    /**
     * Readonly prevents changing the value but allows interaction like focus.
     */
    readonly: boolean;
    /**
     * Marks the control as required.
     */
    required: boolean;
    /**
     * Marks the control as invalid.
     */
    invalid: boolean;
    /**
     * Set to `true` to put the component in the `loading` state,
     * and render an indeterminate progress indicator inside.
     * This does _not_ disable the interactivity of the component!
     */
    loading: boolean;
    /**
     * Current image to display. Either a URL string or a `FileInfo` with an href.
     */
    value?: string | FileInfo;
    /**
     * How the image should fit within the container.
     * - `cover` will fill the container and crop excess parts.
     * - `contain` will scale the image to fit within the container without cropping.
     */
    imageFit: 'cover' | 'contain';
    /**
     * A comma-separated list of accepted file types.
     */
    accept: string;
    /**
     * Optional client-side resize before emitting the file.
     * If provided, the selected image will be resized on the client device.
     * :::note
     * HEIC may not decode in all browsers; when decoding fails, the original
     * file will be emitted. See the examples for more info.
     * :::
     */
    resize?: ResizeOptions;
    /**
     * Emitted when the picture changes (first FileInfo only).
     */
    change: EventEmitter<FileInfo | undefined>;
    /**
     * Emitted when a file is rejected by accept filter.
     */
    filesRejected: EventEmitter<FileInfo[]>;
    private objectUrl?;
    private imageError;
    private isErrorMessagePopoverOpen;
    private removeButtonId;
    private browseButtonId;
    disconnectedCallback(): void;
    protected handleValueChange(): void;
    render(): any;
    private get hasValue();
    private renderBrowseButton;
    private renderAvatar;
    private renderIcon;
    private renderClearButton;
    private renderSpinner;
    private renderHelperText;
    private getUnsupportedPreviewContext;
    private shouldShowErrorMessage;
    private renderErrorMessage;
    private handleNewFiles;
    private handleRejectedFiles;
    private getImageSrc;
    private revokeObjectUrl;
    private handleClear;
    private onImageError;
    private openPopover;
    private onPopoverClose;
    private getTranslation;
}
//# sourceMappingURL=profile-picture.d.ts.map