import { LitElement } from 'lit';
import '../Icon/Icon';
declare global {
    interface HTMLElementTagNameMap {
        'ctt-loading': CttLoading;
    }
}
/**
 * CTT Loading Component
 *
 * A loading spinner component that shows a centered spinner with optional title and description.
 * Uses the existing ctt-icon component for the spinner animation.
 *
 * @example
 * ```html
 * <!-- Basic spinner -->
 * <ctt-loading></ctt-loading>
 *
 * <!-- With title and description -->
 * <ctt-loading
 *   title="Processing your request"
 *   description="This may take a few seconds">
 * </ctt-loading>
 *
 * <!-- Spinner with counter side by side -->
 * <ctt-loading
 *   show-spinner="true"
 *   show-counter="true"
 *   counter="75"
 *   counter-layout="side">
 * </ctt-loading>
 * ```
 *
 * @example
 * ```javascript
 * // Animated progress for API calls
 * const loader = document.querySelector('ctt-loading');
 *
 * // Method 1: Using withProgress() utility
 * await loader.withProgress(
 *   () => fetch('/api/data').then(r => r.json()),
 *   {
 *     title: 'Fetching data...',
 *     duration: 3000
 *   }
 * );
 *
 * // Method 2: Manual progress control
 * loader.startProgress(2000); // Animate 0->100% over 2 seconds
 *
 * // Method 3: Step-by-step animation
 * await loader.animateCounter(50, 1000); // Go to 50% in 1 second
 * await loader.animateCounter(100, 1000); // Complete in another second
 * loader.completeProgress(); // Hide spinner and finish
 * ```
 */
export declare class CttLoading extends LitElement {
    static styles: import("lit").CSSResult;
    /**
     * Size of the loading spinner
     */
    size: 'small' | 'medium' | 'large';
    /**
     * Color variant of the spinner
     */
    variant: 'primary' | 'secondary' | 'default';
    /**
     * Title text to display above the spinner
     */
    title: string;
    /**
     * Description text to display below the spinner
     */
    description: string;
    /**
     * Counter value to display as percentage (0-100)
     */
    counter: number;
    /**
     * Whether to show the loading spinner
     */
    showSpinner: boolean;
    /**
     * Whether to show the counter
     */
    showCounter: boolean;
    /**
     * Counter layout - 'side' for side-by-side with spinner, 'below' for below spinner
     */
    counterLayout: 'side' | 'below';
    /**
     * ARIA label for accessibility
     */
    ariaLabel: string;
    private _animationId;
    private _startTime;
    private _startValue;
    private _targetValue;
    private _duration;
    constructor();
    render(): import("lit-html").TemplateResult<1>;
    /**
     * Animates the counter from current value to target value
     */
    animateCounter(targetValue: number, duration?: number): Promise<void>;
    /**
     * Starts progress animation from 0 to 100% over specified duration
     */
    startProgress(duration?: number): Promise<void>;
    /**
     * Completes the progress immediately
     */
    completeProgress(): void;
    /**
     * Resets the progress counter to 0
     */
    resetProgress(): void;
    /**
     * Utility method for API requests with progress animation
     */
    withProgress<T>(apiCall: () => Promise<T>, options?: {
        duration?: number;
        title?: string;
        description?: string;
        completeTitle?: string;
        completeDescription?: string;
    }): Promise<T>;
    disconnectedCallback(): void;
}