import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { CSSResultGroup } from 'lit';
import { default as CxIcon } from '../icon/icon';
import { default as CxTooltip } from '../tooltip/tooltip';

/**
 * @summary Copies text data to the clipboard when the user clicks the trigger.
 *
 * @event cx-copy - Emitted when the data has been copied.
 * @event cx-error - Emitted when the data could not be copied.
 *
 * @slot copy-icon - The icon to show in the default copy state. Works best with `<cx-icon>`.
 * @slot success-icon - The icon to show when the content is copied. Works best with `<cx-icon>`.
 * @slot error-icon - The icon to show when a copy error occurs. Works best with `<cx-icon>`.
 *
 * @csspart button - The internal `<button>` element.
 * @csspart copy-icon - The container that holds the copy icon.
 * @csspart success-icon - The container that holds the success icon.
 * @csspart error-icon - The container that holds the error icon.
 * @csspart tooltip__base - The tooltip's exported `base` part.
 * @csspart tooltip__base__popup - The tooltip's exported `popup` part.
 * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
 * @csspart tooltip__body - The tooltip's exported `body` part.
 *
 * @cssproperty --success-color - The color to use for success feedback.
 * @cssproperty --error-color - The color to use for error feedback.
 * @cssproperty --background-color - The background color to use for the button.
 * @cssproperty --color - The color to use for the button.
 * @cssproperty --button-font-size - The font size to use for the button.
 * @cssproperty --button-padding - The padding to use for the button.
 * @cssproperty --button-background-color - The background color to use for the button.
 *
 * @animation copy.in - The animation to use when feedback icons animate in.
 * @animation copy.out - The animation to use when feedback icons animate out.
 */
export default class CxCopyButton extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-icon': typeof CxIcon;
        'cx-tooltip': typeof CxTooltip;
    };
    private readonly localize;
    private readonly hasSlotController;
    copyIcon: HTMLSlotElement;
    successIcon: HTMLSlotElement;
    errorIcon: HTMLSlotElement;
    tooltip: CxTooltip;
    button: HTMLButtonElement;
    hasFocus: boolean;
    isCopying: boolean;
    status: 'rest' | 'success' | 'error';
    /** The text value to copy. */
    value: string;
    /** The button's size. */
    size: 'small' | 'medium' | 'large' | 'x-large';
    /**
     * An id that references an element in the same document from which data will be copied. If both this and `value` are
     * present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
     * attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
     * append a dot and the property name, e.g. `from="el.value"`.
     */
    from: string;
    /** Disables the copy button. */
    disabled: boolean;
    /** The aria-label of the copy button. */
    label: string;
    /** A custom label to show in the tooltip. */
    copyLabel: string;
    /** A custom label to show in the tooltip when the user is focused on the copy button. */
    focusCopyLabel: string;
    /** A custom label to show in the tooltip after copying. */
    successLabel: string;
    /** A custom label to show in the tooltip when a copy error occurs. */
    errorLabel: string;
    /** The length of time to show feedback before restoring the default trigger. */
    feedbackDuration: number;
    /** The preferred placement of the tooltip. */
    tooltipPlacement: 'top' | 'right' | 'bottom' | 'left';
    /** The distance of the tooltip. */
    tooltipDistance: number;
    /**
     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
     * scenarios.
     */
    hoist: boolean;
    getValue: (() => string) | null | undefined;
    /**
     * Hide icon optionally
     */
    noIcon: boolean;
    /**
     * Function for writing the value to the clipboard.
     */
    writeToClipboard: (value: string) => Promise<void>;
    runFirstUpdated(): void;
    private handleBlur;
    private handleFocus;
    private handleKeyDown;
    private handleCopy;
    private getTooltipContent;
    private showStatus;
    handleHasFocusChange(): Promise<void>;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-copy-button': CxCopyButton;
    }
}
