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

/**
 * @summary Outputs a localized time phrase relative to the current date and time.
 *
 * @description Localization is handled by the browser's
 * [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat).
 * No language packs are required.
 *
 * @cssproperty --cx-relative-time-color - Text color of the relative time.
 * @cssproperty --cx-relative-time-font-size - Font size of the relative time.
 * @cssproperty --cx-relative-time-font-weight - Font weight of the relative time.
 */
export default class CxRelativeTime extends CortexElement {
    static readonly styles: CSSResultGroup;
    private readonly localize;
    private updateTimeout;
    private isoTime;
    private relativeTime;
    /**
     * The date from which to calculate time from. If not set, the current date and time will be used. When passing a
     * string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
     * a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
     */
    date: Date | string;
    /** The formatting style to use. */
    format: 'long' | 'short' | 'narrow';
    /**
     * When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
     * "1 day ago" and "in 1 day" will be shown.
     */
    numeric: 'always' | 'auto';
    /** Keep the displayed value up to date as time passes. */
    sync: boolean;
    /**
     * The interval in milliseconds to update the displayed value when `sync` is enabled. If not set, the component will
     * determine the next update interval based on the current time unit (e.g., second, minute, hour, day).
     */
    syncInterval: number;
    connectedCallback(): void;
    disconnectedCallback(): void;
    render(): "" | import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-relative-time': CxRelativeTime;
    }
}
