import { CssLength } from '@breadstone/mosaik-themes'; import { RangeBaseElement } from '../Abstracts/RangeBaseElement'; import type { IProgressBarElementProps } from './IProgressBarElementProps'; declare const ProgressBarElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof RangeBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * ProgressBar - A horizontal or vertical indicator showing task completion or loading progress. * * @description * The ProgressBar component displays progress as a filled bar with configurable value ranges, * orientations, and visual styles. Supports determinate progress tracking with specific values * and indeterminate loading states for unknown durations. Features smooth animations, optional * segmented display for multi-step processes, and comprehensive theming. Essential for showing * task progress, file uploads, loading states, and completion percentages in user interfaces. * * @name ProgressBar * @element mosaik-progress-bar * @category Ranges * * @slot label - Text label content area for progress description or status * @slot hint - Secondary text content area for additional progress information or details * * @csspart label - Text label styling container for progress information * @csspart container - Outer container wrapping the entire progress bar structure * @csspart track - Track wrapper providing layout for the progress rail * @csspart track-fill - Inner track element displaying the background rail and overflow clipping * @csspart fill - Filled portion of the progress bar indicating current completion level * @csspart hint - Hint text styling container for additional information * * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the progress value changes * * @dependency {TextElement} - For rendering progress labels and text content * * @example * Basic determinate progress bar: * ```html * * ``` * * @example * Progress bar with label showing upload status: * ```html * * Uploading document.pdf * * ``` * * @example * Indeterminate loading bar for unknown duration: * ```html * * Loading... * * ``` * * @example * Vertical progress bar for volume control: * ```html * * * ``` * * @example * Segmented progress for multi-step wizard: * ```html * * Step 3 of 5 * * ``` * * @example * File upload progress with percentage display: * ```html *
* Uploading document.pdf * * * 0% *
* ``` * * @example * Download progress with custom styling: * ```html * * Downloading update... * 72% complete (3.6 MB / 5 MB) * * ``` * * @public */ export declare class ProgressBarElement extends ProgressBarElement_base implements IProgressBarElementProps { private _isIndeterminate; private _thickness; private _segments; /** * Constructs a new instance of the `ProgressBarElement` class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Determines if `ProgressBar` shows actual values `false` or generic, continuous progress feedback `true`. * * @public * @attr */ get isIndeterminate(): boolean; set isIndeterminate(value: boolean); /** * Gets or sets the thickness property. * * @public * @attr */ get thickness(): CssLength; set thickness(value: CssLength); /** * Gets or sets the `segments` property. * * @public * @attr */ get segments(): number; set segments(value: number); /** * @protected */ protected onSegmentsPropertyChanged(_prev: number, next: number): void; } /** * @public */ export declare namespace ProgressBarElement { type Props = IProgressBarElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-progress-bar': ProgressBarElement; } } export {}; //# sourceMappingURL=ProgressBarElement.d.ts.map