cloudflare-turnstile-widget/dist/TurnstileWidget.d.ts

Framework agnostic widget for Cloudflare's free-to-use CAPTCHA service, Cloudflare Turnstile.

/**
 *
 * @element turnstile-widget
 *
 * @fires frame-load - Dispatched from the component after the frame initially loads.
 * @fires success - Dispatched when a success callback has been invoked. Event `.detail.content` property will contain the token.
 * @fires error - Dispatched when an error callback has been invoked. Event `.detail.content` property will contain the error code.
 * @fires expired - Dispatched when an expired callback has been invoked.
 * @fires unsupported - Dispatched when an unsupported callback has been invoked.
 *
 * @see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations
 *
 */
export declare class TurnstileWidget extends HTMLElement {
    /**
     * Internal instance of `HTMLIFrameElement`.
     */
    iframe: HTMLIFrameElement;
    /**
     * Unique identifier for widget with which to track widget specific events.
     */
    readonly identifier: string;
    /**
     * Every widget has a sitekey. This sitekey is associated with the corresponding widget configuration and is created upon the widget creation.
     * @see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations
     * @attr site-key
     */
    get siteKey(): string | null;
    set siteKey(value: string | null);
    /**
     * The widget theme. Can take the following values: light, dark, auto.
     * The default is auto, which respects the user preference. This can be forced to light or dark by setting the theme accordingly.
     * @default 'auto'
     * @attr
     */
    get theme(): TurnstileTheme | null;
    set theme(value: TurnstileTheme | null);
    /**
     * The widget size. Can take the following values: normal, compact.
     * Normal is 300px by 65px, and compact is 130px by 120px.
     * @see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#widget-size
     * @default 'normal'
     * @attr
     */
    get size(): TurnstileSize | null;
    set size(value: TurnstileSize | null);
    /**
     * Controls whether the widget should automatically retry to obtain a token if it did not succeed.
     * The default is auto, which will retry automatically. This can be set to never to disable retry upon failure.
     * @see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations
     * @default 'auto'
     * @attr
     */
    get retry(): TurnstileRetry | null;
    set retry(value: TurnstileRetry | null);
    /**
     * Automatically refreshes the token when it expires. Can take auto, manual or never, defaults to auto.
     * @see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations
     * @default 'auto'
     * @attr refresh-expired
     */
    get refreshExpired(): RefreshExpired | null;
    set refreshExpired(value: RefreshExpired | null);
    private get widgetFrameURL();
    private componentMessageListener;
    /**
     * Initializes the component.
     *
     * @hideconstructor
     */
    constructor();
    /**
     * Setup the component once added to the DOM.
     */
    connectedCallback(): void;
    /**
     * Clean up the component once removed from the DOM.
     */
    disconnectedCallback(): void;
    /**
     * Dispatch a custom event to say the iframe is loaded, the TurnstileWidgetFrame component listens to this event.
     */
    private frameLoaded;
    private frameMessageReceived;
    /**
     * Send a bridged message to the hosted widget frame.
     * @param eventName The event this message correlates to.
     * @param detail Custom detail to attach as event detail.
     * @param callback (Optional) Callback function to invoke on widget response.
     * @param timeout (Optional) Duration to wait for callback.
     * @param timeoutCallback (Optional) Callback function to invoke if response timeout is exceeded
     * @param callbackIdentifierPrefix (Optional) Prefix to apply on generated widget callback id
     */
    messageFrame<T = any, U = any>(eventName: string, detail?: T, callback?: (detail: U) => void, timeout?: number, timeoutCallback?: () => void, callbackIdentifierPrefix?: string): void;
    /**
     * Asynchronously sends a bridged message to the hosted widget frame, then awaits and returns its response.
     * @param eventName The event this message correlates to.
     * @param detail Custom detail to attach as event detail.
     * @param timeout (Optional) Duration to wait for before rejecting the promise. If not specified, will wait indefinitely
     * @param callbackIdentifierPrefix (Optional) Prefix to apply on generated widget callback id.
     */
    messageFrameAsync<T = any, U = any>(eventName: string, detail?: T, timeout?: number, callbackIdentifierPrefix?: string): Promise<U>;
}
export type BridgeInfo<T = any> = {
    callbackId?: string;
    detail?: T;
    bridgeEvent: string;
    identifier: string;
    fromApplication?: boolean;
};
export type WidgetEventDetail<T = any, U = any> = {
    content: T;
    callback?: (detail: U) => void;
};
declare global {
    interface HTMLElementTagNameMap {
        'turnstile-widget': TurnstileWidget;
    }
    interface Window {
        'turnstile-widget-frame-module-url': string | undefined;
    }
}
//# sourceMappingURL=TurnstileWidget.d.ts.map