import { LimeWebComponent, LimeWebComponentContext, LimeWebComponentPlatform } from '@limetech/lime-web-components';
/**
 * This component generates an infographic that displays the growth trend.
 * It can be used to display the growth of a stock, the increase in sales,
 * or any other value that can be represented as a percentage.
 *
 * There are two ways to use this component:
 * 1. Provide only the `value` prop. This will display the `value` as it is with
 * a growth infographic based on it.
 * 2. Provide both the `value` and `formerValue` props. This will display the:
 *
 * calculated growth: (`value` - `formerValue`) and
 *
 * infographic based on calculate percentage growth:
 *
 * (`value` - `formerValue`) / |`formerValue`| * 100.
 *
 * @exampleComponent limebb-trend-indicator-basic
 * @exampleComponent limebb-trend-indicator-reduce-presence
 * @exampleComponent limebb-trend-indicator-composite
 * @exampleComponent limebb-trend-indicator-former-value
 * @exampleComponent limebb-trend-indicator-locale
 * @beta
 */
export declare class TrendIndicator implements LimeWebComponent {
    /**
     * @inherit
     */
    platform: LimeWebComponentPlatform;
    /**
     * @inherit
     */
    context: LimeWebComponentContext;
    /**
     * Preferably a number (or a string that can be converted to a number
     * by the component) that represents the current value.
     */
    value: number | string;
    /**
     * A number that represents the previous value.
     * When both `value` and `formerValue` are provided,
     * the component will calculate the difference between the two
     * and display the growth in an infographic way.
     */
    formerValue?: number;
    /**
     * A short piece of text to display after the value.
     */
    suffix?: string;
    /**
     * The label of the field.
     * Will be displayed as a floating label on top,
     * mimicking other form elements, such as input fields.
     */
    label?: string;
    /**
     * Set to `true` to indicate that the current value is invalid.
     */
    invalid?: boolean;
    /**
     * Set to `true` to render an asterisk beside the label,
     * only visually indicating that the field is required.
     * Useful when the component is used as a from field on cards.
     */
    required?: boolean;
    /**
     * Optional helper text to display below the field when it is focused.
     * The helper text also appears when the component is `invalid`.
     */
    helperText?: string;
    /**
     * When set to `false`, if the `value` equals `0` or there is no value
     * (_undefined_, _null_ or empty string), the component will
     * render the visualization. See the examples for more details.
     */
    reducePresence?: boolean;
    private numValue;
    private locale;
    private numberFormat;
    valueChanged(newValue: number | string): void;
    private labelId;
    private tooltipId;
    private helperTextId;
    componentWillLoad(): void;
    render(): any;
    private renderVisualization;
    private renderTooltip;
    private renderGrowthPercentage;
    private renderGrowthAmount;
    private renderHelperLine;
    private hasHelperText;
    private hasValue;
    private getContainerClassList;
    private getPercentage;
    private calculateGrowth;
    private calculatePercentage;
    private unifyMinusSign;
    private convertToUnicodeMinus;
    private parseValue;
    private formatValue;
    private getArrowIcon;
}
//# sourceMappingURL=trend-indicator.d.ts.map