import type { Data, Variables, ComponentDocument, OptimisticResponseType, RefetchQueriesType, MutationUpdaterFn, VariablesOf } from '@apollo-elements/core/types';
import type { PropertyValues } from 'lit';
import type { FetchResult, MutationOptions, ErrorPolicy } from '@apollo/client/core';
import { ApolloElement } from './apollo-element.js';
import { ApolloMutationController } from '@apollo-elements/core/apollo-mutation-controller';
declare global {
    interface HTMLElementTagNameMap {
        'apollo-mutation': ApolloMutationElement;
    }
}
/** @noInheritDoc */
interface ButtonLikeElement extends HTMLElement {
    disabled: boolean;
}
/** @noInheritDoc */
interface InputLikeElement extends HTMLElement {
    value: string;
    disabled: boolean;
}
/** @ignore */
export declare class WillMutateError extends Error {
}
declare const ApolloMutationElement_base: typeof ApolloElement;
/**
 * Simple Mutation component that takes a button or link-wrapped button as it's trigger.
 * When loading, it disables the button.
 * On error, it toasts a snackbar with the error message.
 * You can pass a `variables` object property,
 * or if all your variables properties are strings,
 * you can use the element's data attributes
 *
 * See [`ApolloMutationInterface`](https://apolloelements.dev/api/core/interfaces/mutation) for more information on events
 *
 * @fires {WillMutateEvent} will-mutate - The element is about to mutate. Useful for setting variables. Prevent default to prevent mutation. Detail is `{ element: this }`
 * @fires {WillNavigateEvent} will-navigate - The mutation resolved and the element is about to navigate. cancel the event to handle navigation yourself e.g. using a client-side router. . `detail` is `{ data: Data, element: this }`
 * @fires {MutationCompletedEvent} mutation-completed - The mutation resolves. `detail` is `{ data: Data, element: this }`
 * @fires {MutationErrorEvent} mutation-error - The mutation rejected. `detail` is `{ error: ApolloError, element: this }`
 * @fires {ApolloElementEvent} apollo-element-disconnected - The element disconnected from the DOM
 * @fires {ApolloElementEvent} apollo-element-connected - The element connected to the DOM
 *
 * @slot - Mutations typically trigger when clicking a button.
 *         Slot in an element with a `trigger` attribute to assign it as the element's trigger.
 *         The triggering element. Must be a button or and anchor that wraps a button.
 *
 *         You may also slot in input elements with the `data-variable="variableName"` attribute.
 *         It's `value` property gets the value for the corresponding variable.
 *
 * @example <caption>Using data attributes</caption>
 * ```html
 *          <apollo-mutation data-type="Type" data-action="ACTION">
 *            <mwc-button trigger>OK</mwc-button>
 *          </apollo-mutation>
 * ```
 * Will mutate with the following as `variables`:
 * ```json
 *          {
 *            "type": "Type",
 *            "action": "ACTION"
 *          }
 * ```
 *
 * @example <caption>Using data attributes and variables</caption>
 * ```html
 *          <apollo-mutation data-type="Quote" data-action="FLUB">
 *            <mwc-button trigger label="OK"></mwc-button>
 *            <mwc-textfield
 *                data-variable="name"
 *                value="Neil"
 *                label="Name"></mwc-textfield>
 *            <mwc-textarea
 *                data-variable="comment"
 *                value="That's one small step..."
 *                label="comment"></mwc-textarea>
 *          </apollo-mutation>
 * ```
 * Will mutate with the following as `variables`:
 * ```json
 *          {
 *            "name": "Neil",
 *            "comment": "That's one small step...",
 *            "type": "Quote",
 *            "action": "FLUB"
 *          }
 * ```
 *
 * @example <caption>Using variable-for inputs</caption>
 * ```html
 *          <label>Comment <input variable-for="comment-mutation" value="Hey!"></label>
 *          <button trigger-for="comment-mutation">OK</button>
 *          <apollo-mutation id="comment-mutation"></apollo-mutation>
 * ```
 * Will mutate with the following as `variables`:
 * ```json
 *          { "comment": "Hey!" }
 * ```
 *
 * @example <caption>Using data attributes and variables with input property</caption>
 * ```html
 *          <apollo-mutation data-type="Type" data-action="ACTION" input-key="actionInput">
 *            <mwc-button trigger label="OK"></mwc-button>
 *            <mwc-textfield
 *                data-variable="comment"
 *                value="Hey!"
 *                label="comment"></mwc-textfield>
 *          </apollo-mutation>
 * ```
 * Will mutate with the following as `variables`:
 * ```json
 *          {
 *            "actionInput": {
 *              "comment": "Hey!",
 *              "type": "Type",
 *              "action": "ACTION"
 *            }
 *          }
 * ```
 *
 * @example <caption>Using DOM properties</caption>
 * ```html
 *          <apollo-mutation id="mutation">
 *            <mwc-button trigger label="OK"></mwc-button>
 *          </apollo-mutation>
 *          <script>
 *            document.getElementById('mutation').mutation = SomeMutation;
 *            document.getElementById('mutation').variables = {
 *              type: "Type",
 *              action: "ACTION"
 *            };
 *          </script>
 * ```
 *
 * Will mutate with the following as `variables`:
 *
 * ```json
 *          {
 *            "type": "Type",
 *            "action": "ACTION"
 *          }
 * ```
 */
export declare class ApolloMutationElement<D = unknown, V = VariablesOf<D>> extends ApolloMutationElement_base<D, V> {
    #private;
    static readonly is: 'apollo-mutation';
    /**
     * False when the element is a link.
     */
    private static isButton;
    private static isLink;
    private static toVariables;
    private static isTriggerNode;
    private static debounce;
    private inFlightTrigger;
    private doMutate;
    private debouncedMutate;
    /**
     * Variable input nodes
     */
    protected get inputs(): InputLikeElement[];
    /**
     * Slotted trigger nodes
     */
    protected get triggers(): Element[];
    /**
     * If the slotted trigger node is a button, the trigger
     * If the slotted trigger node is a link with a button as it's first child, the button
     */
    protected get buttons(): ButtonLikeElement[];
    get template(): HTMLTemplateElement;
    controller: ApolloMutationController<D, V>;
    /**
     * When set, variable data attributes will be packed into an
     * object property with the name of this property
     * @example <caption>Using the input-key attribute</caption>
     * ```html
     *          <apollo-mutation id="a" data-variable="var"></apollo-mutation>
     *          <apollo-mutation id="b" input-key="input" data-variable="var"></apollo-mutation>
     *          <script>
     *            console.log(a.variables) // { variable: 'var' }
     *            console.log(b.variables) // { input: { variable: 'var' } }
     *          </script>
     * ```
     * @summary key to wrap variables in e.g. `input`.
     */
    inputKey: string | null;
    /**
     * @summary Optional number of milliseconds to wait between calls
     */
    debounce: number | null;
    /**
     * @summary Whether the mutation was called
     */
    called: boolean;
    /** @summary The mutation. */
    mutation: null | ComponentDocument<D, V>;
    /** @summary Context passed to the link execution chain. */
    context?: Record<string, unknown>;
    /**
     * An object that represents the result of this mutation that will be optimistically
     * stored before the server has actually returned a result, or a unary function that
     * takes the mutation's variables and returns such an object.
     *
     * This is most often used for optimistic UI, where we want to be able to see
     * the result of a mutation immediately, and update the UI later if any errors
     * appear.
     * @example <caption>Using a function</caption>
     * ```ts
     *         element.optimisticResponse = ({ name }: HelloMutationVariables) => ({
     *           __typename: 'Mutation',
     *           hello: {
     *             __typename: 'Greeting',
     *             name,
     *           },
     *         });
     * ```
     */
    optimisticResponse?: OptimisticResponseType<D, V>;
    /**
     * An object that maps from the name of a variable as used in the mutation GraphQL document to that variable's value.
     *
     * @summary Mutation variables.
     */
    variables: Variables<D, V> | null;
    /**
     * @summary If true, the returned data property will not update with the mutation result.
     */
    ignoreResults: boolean;
    /**
     * Queries refetched as part of refetchQueries are handled asynchronously,
     * and are not waited on before the mutation is completed (resolved).
     * Setting this to true will make sure refetched queries are completed
     * before the mutation is considered done. false by default.
     * @attr await-refetch-queries
     */
    awaitRefetchQueries: boolean;
    /**
     * Specifies the ErrorPolicy to be used for this mutation.
     * @attr error-policy
     */
    errorPolicy?: ErrorPolicy;
    /**
     * Specifies the FetchPolicy to be used for this mutation.
     * @attr fetch-policy
     */
    fetchPolicy?: 'no-cache';
    /**
     * A list of query names which will be refetched once this mutation has returned.
     * This is often used if you have a set of queries which may be affected by a mutation and will have to update.
     * Rather than writing a mutation query reducer (i.e. `updateQueries`) for this,
     * you can refetch the queries that will be affected
     * and achieve a consistent store once these queries return.
     * @attr refetch-queries
     */
    refetchQueries: RefetchQueriesType<D> | null;
    /**
     * Define this function to determine the URL to navigate to after a mutation.
     * Function can be synchronous or async.
     * If this function is not defined, will navigate to the `href` property of the link trigger.
     * @example <caption>Navigate to a post's page after creating it</caption>
     * ```html
     *          <apollo-mutation id="mutation">
     *            <script type="application/graphql">
     *              mutation CreatePostMutation($title: String, $content: String) {
     *                createPost(title: $title, content: $content) {
     *                  slug
     *                }
     *              }
     *            </script>
     *            <mwc-textfield label="Post title" data-variable="title"></mwc-textfield>
     *            <mwc-textarea label="Post Content" data-variable="content"></mwc-textarea>
     *          </apollo-mutation>
     *
     *          <script>
     *            document.getElementById('mutation').resolveURL =
     *              data => `/posts/${data.createPost.slug}/`;
     *          </script>
     * ```
     * @param data mutation data
     * @param trigger the trigger element which triggered this mutation
     * @returns url to navigate to
     */
    resolveURL?(data: Data<D>, trigger: HTMLElement): string | Promise<string>;
    constructor();
    private onLightDomMutation;
    private onSlotchange;
    private addTriggerListener;
    private willMutate;
    private willNavigate;
    private didMutate;
    private onTriggerEvent;
    protected createRenderRoot(): ShadowRoot | HTMLElement;
    /**
     * Constructs a variables object from the element's data-attributes and any slotted variable inputs.
     */
    protected getVariablesFromInputs(): Variables<D, V> | null;
    update(changed: PropertyValues<this>): void;
    /**
     * A function which updates the apollo cache when the query responds.
     * This function will be called twice over the lifecycle of a mutation.
     * Once at the very beginning if an optimisticResponse was provided.
     * The writes created from the optimistic data will be rolled back before
     * the second time this function is called which is when the mutation has
     * succesfully resolved. At that point update will be called with the actual
     * mutation result and those writes will not be rolled back.
     *
     * The reason a DataProxy is provided instead of the user calling the methods
     * directly on ApolloClient is that all of the writes are batched together at
     * the end of the update, and it allows for writes generated by optimistic
     * data to be rolled back.
     */
    updater?(...params: Parameters<MutationUpdaterFn<Data<D>, Variables<D, V>>>): ReturnType<MutationUpdaterFn<Data<D>, Variables<D, V>>>;
    mutate(params?: Partial<MutationOptions<Data<D>, Variables<D, V>>>): Promise<FetchResult<Data<D>>>;
}
export {};