import { FoundationElement } from '@microsoft/fast-foundation';
/**
* @public
* Unit for date countdown. Rounds down to the nearest whole number. If not seconds and time is greater than zero but less than the smallest unit it will show >1m or >1h.
*/
export type CountdownUnit = 'hour' | 'minute' | 'second';
/**
* @internal
*/
export declare const formatTimeForCountDown: (totalMilliseconds: number, minUnit?: CountdownUnit) => string;
/**
* @tagname %%prefix%%-status-pill
*/
export declare class StatusPill extends FoundationElement {
/**
* @attr background-color - a valid hex, rgb or rgba color for the background fill color of the pill
* @example
* Status pill with a red background
* ```html
*
*
* ```
*/
backgroundColor: string;
/**
* @attr icon-name - a string for the icon. Valid values are from the free set of font awesome icons which can be found here https://fontawesome.com/search?ic=free
* @example
* Status pill with a house icon
* ```html
*
*
* ```
*/
iconName: string;
/**
* @attr icon-src - the src for an image. This can be used if the icon you want an icon that is not included in the free set of font awesome icons. Note, only svgs are recommended
* @example
* Status pill with an image
* ```html
*
*
* ```
*/
iconSrc: string;
/**
* @attr icon-initial - use this attribute if you want to show a single letter at the start of the pill, pass a string. Note, it will only use the first character of a string
* @example
* Status pill with an initial
* ```html
*
*
* ```
*/
iconInitial: string;
/**
* @attr icon-initial - sets a circular background on an icon
* @example
* Status pill with a background color on the initial
* ```html
*
*
* ```
*/
iconInitialBackgroundColor: string;
/**
* @attr icon-size - sets the size of the icon. Defaults to 'sm'. Can be one of any valid fa icon size, "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x"
* @example
* Status pill with large set
* ```html
*
*
* ```
*/
iconSize: string;
/**
* @attr large - a valid hex, rgb or rgba color for the color applied to text and icon.
* @example
* Status pill with text color
* ```html
*
*
* ```
*/
textColor: string;
/**
* @attr text - a string for the text shown at the end of the pill
* @example
* Status pill with text
* ```html
*
*
* ```
*/
text: string;
/**
* @attr date-countdown - a date or timestamp that the pill will count down to
* @example
* Status pill with date-countdown
* ```html
*
*
* ```
*/
dateCountdown: number;
/**
* @attr date-countdown-completed-message - the string that will be shown when the countdown is complete
* @example
* Status pill with countdown completed message
* ```html
*
*
* ```
*/
dateCountdownCompletedMessage: string;
/**
* @attr date-countdown-unit - the minimum unit of time shown in the countdown. Defaults to 'seconds'
* @example
* Status pill with countdown min unit
* ```html
*
*
* ```
*/
dateCountdownUnit: CountdownUnit;
/**
* @attr date-countdown-visible-after - a timestamp (in milliseconds) that controls
* when the countdown (and pill) becomes visible. If present, the pill will only
* be shown once the current time is equal to or after this timestamp.
* @example
* Show pill and countdown only after a specific start time
* ```html
*
* ```
*/
dateCountdownVisibleAfter: number;
/**
* @attr hide-when-countdown-completed - if true, the status pill will be removed
* from the template once the countdown has expired.
*/
hideWhenCountdownCompleted: boolean;
/**
* @internal
*/
countdown: string;
/**
* @internal
* Tracks whether the countdown has reached or passed its target.
*/
isCountdownExpired: boolean;
/**
* @internal
* Controls whether the pill should be rendered based on the optional
* date-countdown-visible-after start time.
*/
isCountdownVisible: boolean;
private dateInterval;
/**
* @internal
*/
dateCountdownChanged(oldValue: any, newValue: any): void;
dateCountdownVisibleAfterChanged(oldValue: any, newValue: any): void;
connectedCallback(): void;
disconnectedCallback(): void;
private setUpDateCountdown;
private updateCountdown;
private updateVisibilityFromStartTime;
private clearCountdownTimer;
}
/**
* The Foundation Status Pill
*
* @public
* @remarks
* HTML Element: \
*/
export declare const foundationStatusPill: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
baseName: string;
styles: import("@microsoft/fast-element").ElementStyles;
template: import("@microsoft/fast-element").ViewTemplate;
}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
baseName: string;
styles: import("@microsoft/fast-element").ElementStyles;
template: import("@microsoft/fast-element").ViewTemplate;
}, typeof StatusPill>;
//# sourceMappingURL=status-pill.d.ts.map