import { EventEmitter } from '../../stencil-public-runtime';
import type { EventDetail, FormatterValueObject } from 'q2-tecton-common/lib/types/elements';
import { Q2InputCustomEvent } from "../../components";
import { Q2Input } from '../q2-input/q2-input';
/**
 * @name Editable Field
 * @category Forms
 * @summary Use for inline editing of data that is normally displayed as read-only.
 */
export declare class Q2EditableField {
    cancelBtnElement: HTMLQ2BtnElement;
    defaultValue: string;
    editBtnElement: HTMLQ2BtnElement;
    innerValue: string;
    inputElement: HTMLQ2InputElement;
    saveBtnElement: HTMLQ2BtnElement;
    scheduledAfterRender: (() => void)[];
    hostElement: HTMLElement;
    formattedValue: string;
    /** @deprecated */
    ariaLabel: string;
    /** If `true`, component expands to fill the width of its parent element. */
    block: boolean;
    /** Disables the edit button and field. */
    disabled: boolean;
    /** Controls the edit state of the element. */
    editing: boolean;
    /**
     * Determines the `errors` applied to the `q2-input` element.
     *
     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
     */
    errors: string[];
    /**
     * Determines the `formatModifier` applied to the `q2-input` element.
     * @info
     * Only applicable when `type="currency"`.
     *
     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
     */
    formatModifier: string;
    /** Hide's the field's `<label>` element from view. */
    hideLabel: boolean;
    /**
     * Determines the `hints` applied to the `q2-input` element.
     *
     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
     */
    hints: string[];
    /**
     * The visible descriptor for the element.
     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
     * @localizable
     */
    label: string;
    /**
     * Determines the `maxLength` applied to the `q2-input`.
     *
     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
     */
    maxlength: number;
    /** Displays the provided label in the read state. */
    persistentLabel: boolean;
    /** Shortens long values with ellipses instead of splitting into multiple lines. */
    truncated: boolean;
    /**
     * Determines the `type` applied to the `q2-input` element.
     *
     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.
     */
    type: Q2Input['type'];
    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */
    value: string;
    /**
     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.
     *
     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
     *
     * Call `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates).
     *@info
     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
     * @deprecated Use 'tctChange' instead
     */
    change: EventEmitter<{
        editing: boolean;
        name: 'edit' | 'cancel' | 'save';
        value?: string;
        formattedValue?: string;
    }>;
    /**
     * Emitted when the user updates the `q2-input` element in the editing state.
     * @deprecated Use 'tctInput' instead
     */
    input: EventEmitter<{
        formattedValue: string;
        value: string;
    }>;
    /**
     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.
     *
     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
     *
     * Call `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates).
     *
     * @info
     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
     */
    tctChange: EventEmitter<{
        editing: boolean;
        name: 'edit' | 'cancel' | 'save';
        value?: string;
        formattedValue?: string;
    }>;
    /**
     * Emitted when the user updates the `q2-input` element in the editing state.
     */
    tctInput: EventEmitter<{
        formattedValue: string;
        value: string;
    }>;
    componentWillLoad(): void;
    componentDidLoad(): void;
    componentDidRender(): void;
    delegateFocus(event: FocusEvent): void;
    inputFormatted(event: CustomEvent<FormatterValueObject>): void;
    /**
     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
     *
     * @testOnly
     */
    clickCancel(): void;
    /**
     * Emulates clicking the edit button, which will display the `<q2-input>` field.
     *
     * @testOnly
     */
    clickEdit(): void;
    /**
     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
     *
     * @testOnly
     */
    clickSave(): void;
    /**
     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.
     *
     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\
     * `change` event will be emitted.
     *
     * @testOnly
     */
    setValue(value: string, options?: {
        clickSave?: boolean;
    }): Promise<void>;
    ariaLabelObserver(): void;
    observesEditing(newValue: boolean, oldValue: boolean): void;
    errorsObserver(): void;
    valueObserver(newValue: string): void;
    get hasErrors(): boolean;
    get hasHints(): boolean;
    get locLabel(): string;
    get wrapperClass(): string;
    cancelClick: (event?: CustomEvent) => void;
    editClick: (event: CustomEvent) => void;
    private emitChangeEvents;
    generateEditStateDOM(): any;
    generateReadStateDOM(): any;
    inputChange: (e: CustomEvent) => void;
    inputClick: (event: MouseEvent) => void;
    inputInput: (event: Q2InputCustomEvent<EventDetail> & InputEvent) => void;
    inputKeyDown: (e: KeyboardEvent) => void;
    private isDefaultPrevented;
    saveClick: (event?: CustomEvent) => void;
    render(): any;
}