import { PropertyValueMap } from "lit";
import { FRoot } from "../../mixins/components/f-root/f-root";
import { FDiv } from "../f-div/f-div";
export type FProgressBarState = "primary" | "default" | "success" | "warning" | "danger" | `custom, ${string}`;
export type FProgressBarWidthProp = "fill-container" | `${number}px`;
export type FProgressBarValueProp = `${number}%`;
export declare class FProgressBar extends FRoot {
    /**
     * css loaded from scss file
     */
    static styles: import("lit").CSSResult[];
    /**
     * @attribute value of the fill section in progress-bar
     */
    value?: FProgressBarValueProp;
    /**
     * @attribute Variants are visual representations of progress bar. A progress bar can be round or block.

     */
    variant?: "block" | "curved" | "circle";
    /**
     * @attribute The medium size is the default and recommended option.
     */
    size?: "large" | "medium" | "small" | "x-small";
    /**
     * @attribute States are used to communicate purpose and it’s connotation. For example, a red color connotes danger, whereas a green color connotes success and so on.
     */
    state?: FProgressBarState;
    /**
     * @attribute By default progress bar takes full width of the parent container. User can change it using width property.
     */
    width?: FProgressBarWidthProp;
    /**
     * @attribute Enable animation
     */
    animation?: boolean | undefined;
    /**
     * progress-bar fill query selector
     */
    fProgressBarFill?: FDiv;
    /**
     * compyr height of the progress-bar
     */
    get computedHeight(): "16px" | "12px" | "8px" | "4px";
    get circleDiameter(): "16px" | "12px" | "30px" | "22px";
    /**
     * compute width of fill in the track
     */
    get computedWidth(): `${number}px` | "100%" | undefined;
    fill: string;
    /**
     * Calculate angle of pseudo element
     */
    get valueInAngle(): number;
    /**
     * Calculate value in number by removing % character
     */
    get valueInNumber(): number;
    /**
     * Calculate overall style to apply
     */
    get circleProgressStyle(): string;
    protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
}
/**
 * Required for typescript
 */
declare global {
    interface HTMLElementTagNameMap {
        "f-progress-bar": FProgressBar;
    }
}
