import { type MaybePromise } from '@augment-vir/common';
import { type DirectiveResult } from '../../lit-exports/all-lit-exports.js';
import { type DefinedTypedEvent, type TypedEvent } from '../../typed-event/typed-event.js';
/** We don't care at all what this returns, just allow anything! */
type ListenCallbackReturn = MaybePromise<any>;
/**
 * Listen to events. These can be native DOM events (use a string for the inputType argument) or
 * typed events (pass in a return value from {@link defineTypedEvent}).
 *
 * @category Directives
 * @example
 *
 * ```ts
 * import {html, defineElement, listen} from 'element-vir';
 *
 * const MyElement = defineElement()({
 *     tagName: 'my-element',
 *     render() {
 *         return html`
 *             <div
 *                 ${listen('click', () => {
 *                     console.log('clicked!');
 *                 })}
 *             >
 *                 Some div
 *             </div>
 *             <${MyOtherElement}
 *                 ${listen(MyOtherElement.events.someEvent, (event) => {
 *                     console.log('event value', event.detail);
 *                 })}
 *             ></${MyOtherElement}>
 *         `;
 *     },
 * });
 * ```
 */
export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric>(
/**
 * Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
 * from a typed event created via the {@link defineTypedEvent} function, or be the name of a
 * built-in event (like `'click'`).
 */
eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, 
/**
 * The callback to fire when an event is caught. Assuming the {@link defineTypedEvent} input is
 * properly typed, the event given to this callback will also be typed.
 */
listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => ListenCallbackReturn): DirectiveResult<any>;
/**
 * Listen to events. These can be native DOM events (use a string for the inputType argument) or
 * typed events (pass in a return value from {@link defineTypedEvent}).
 *
 * @category Directives
 * @example
 *
 * ```ts
 * import {html, defineElement, listen} from 'element-vir';
 *
 * const MyElement = defineElement()({
 *     tagName: 'my-element',
 *     render() {
 *         return html`
 *             <div
 *                 ${listen('click', () => {
 *                     console.log('clicked!');
 *                 })}
 *             >
 *                 Some div
 *             </div>
 *             <${MyOtherElement}
 *                 ${listen(MyOtherElement.events.someEvent, (event) => {
 *                     console.log('event value', event.detail);
 *                 })}
 *             ></${MyOtherElement}>
 *         `;
 *     },
 * });
 * ```
 */
export declare function listen<NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(
/**
 * Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
 * from a typed event created via the {@link defineTypedEvent} function, or be the name of a
 * built-in event (like `'click'`).
 */
eventType: NativeElementEventNameGeneric, 
/**
 * The callback to fire when an event is caught. Assuming the {@link defineTypedEvent} input is
 * properly typed, the event given to this callback will also be typed.
 */
listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => ListenCallbackReturn): DirectiveResult<any>;
export {};