import { IEventEmitter } from '@breadstone/mosaik-elements'; import type { IDropZoneDataEventDetail } from '../../../events'; import { DropZoneState } from '../../../Types/DropZoneState'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IDropZoneElementProps } from './IDropZoneElementProps'; declare const DropZoneElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * DropZoneElement - An interactive component that defines a target area for drag-and-drop operations. * * @description * The DropZoneElement provides a designated area within the interface where users can drop draggable items. * It is commonly used in applications that require file uploads, reordering of elements, or custom drag-and-drop * interactions. By offering a clear and accessible drop target, this component helps improve usability and * guides users through intuitive drag-and-drop workflows. * * DropZoneElement can be styled and configured to visually indicate when a draggable item is hovering over it, * and it can emit events to notify the application when an item has been dropped. This makes it a flexible * building block for implementing custom drag-and-drop experiences across web and application interfaces. * * @element mosaik-drop-zone * @category Interaction * * @slot - The default slot for content displayed inside the drop zone. * * @cssprop {String} --drop-zone-background-color - The zone background color CSS custom property. * @cssprop {String} --drop-zone-border-color - The zone border color CSS custom property. * @cssprop {String} --drop-zone-border-radius - The zone border radius CSS custom property. * @cssprop {String} --drop-zone-border-style - The zone border style CSS custom property. * @cssprop {String} --drop-zone-border-width - The zone border width CSS custom property. * @cssprop {String} --drop-zone-font-family - The zone font family CSS custom property. * @cssprop {String} --drop-zone-font-letter-spacing - The zone font letter spacing CSS custom property. * @cssprop {String} --drop-zone-font-line-height - The zone font line height CSS custom property. * @cssprop {String} --drop-zone-font-size - The zone font size CSS custom property. * @cssprop {String} --drop-zone-font-text-decoration - The zone font text decoration CSS custom property. * @cssprop {String} --drop-zone-font-text-transform - The zone font text transform CSS custom property. * @cssprop {String} --drop-zone-font-weight - The zone font weight CSS custom property. * @cssprop {String} --drop-zone-gap - The zone gap CSS custom property. * @cssprop {String} --drop-zone-padding-bottom - The zone padding bottom CSS custom property. * @cssprop {String} --drop-zone-padding-left - The zone padding left CSS custom property. * @cssprop {String} --drop-zone-padding-right - The zone padding right CSS custom property. * @cssprop {String} --drop-zone-padding-top - The zone padding top CSS custom property. * @cssprop {String} --drop-zone-shadow - The zone shadow CSS custom property. * @cssprop {String} --drop-zone-shadow-blur - The zone shadow blur CSS custom property. * @cssprop {String} --drop-zone-shadow-color - The zone shadow color CSS custom property. * @cssprop {String} --drop-zone-shadow-offset-x - The zone shadow offset x CSS custom property. * @cssprop {String} --drop-zone-shadow-offset-y - The zone shadow offset y CSS custom property. * @cssprop {String} --drop-zone-shadow-spread - The zone shadow spread CSS custom property. * @cssprop {String} --drop-zone-transition-duration - The zone transition duration CSS custom property. * @cssprop {String} --drop-zone-transition-mode - The zone transition mode CSS custom property. * @cssprop {String} --drop-zone-transition-property - The zone transition property CSS custom property. * @cssprop {String} --drop-zone-translate - The zone translate CSS custom property. * * @fires dropZoneData {DropZoneDataEvent} - Fired when data is transferred to the drop zone. * * @example * ```html * *

Drag files here to upload

*
* ``` * * @public */ export declare class DropZoneElement extends DropZoneElement_base implements IDropZoneElementProps { private readonly _dropZoneData; private _dragSubscription; private _dragOverSubscription; private _dragStartSubscription; private _dragEndSubscription; private _dragEnterSubscription; private _dragLeaveSubscription; private _dropSubscription; private _state; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `state` property. * * @readonly * @attr */ get state(): DropZoneState; private set state(value); /** * Called when the data is transferred to the drop zone. * Provides reference to `IDropZoneDataEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get dropZoneData(): IEventEmitter; /** * @public * @override */ connectedCallback(): void; disconnectedCallback(): void; /** * Emits the `dropZoneData` event. * * @protected */ protected onDropZoneData(args: IDropZoneDataEventDetail): void; /** * @protected */ protected onDrag(event: DragEvent): void; /** * @protected */ protected onDragOver(event: DragEvent): void; /** * @protected */ protected onDragStart(event: DragEvent): void; /** * @protected */ protected onDragEnd(event: DragEvent): void; /** * @protected */ protected onDragEnter(event: DragEvent): void; /** * @protected */ protected onDragLeave(event: DragEvent): void; /** * @protected */ protected onDrop(event: DragEvent): void; } /** * @public */ export declare namespace DropZoneElement { type Props = IDropZoneElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-drop-zone': DropZoneElement; } } export {}; //# sourceMappingURL=DropZoneElement.d.ts.map