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 hint - Secondary text content area for additional progress information or details * @slot label - Text label content area for progress description or status * * @csspart container - Outer container wrapping the entire progress bar structure * @csspart fill - Filled portion of the progress bar indicating current completion level * @csspart hint - Hint text styling container for additional information * @csspart label - Text label styling container for progress information * @csspart track - Track wrapper providing layout for the progress rail * @csspart track-fill - Inner track element displaying the background rail and overflow clipping * * @cssprop {String} --progress-bar-font-family - The bar font family CSS custom property. * @cssprop {String} --progress-bar-font-letter-spacing - The bar font letter spacing CSS custom property. * @cssprop {String} --progress-bar-font-line-height - The bar font line height CSS custom property. * @cssprop {String} --progress-bar-font-size - The bar font size CSS custom property. * @cssprop {String} --progress-bar-font-text-decoration - The bar font text decoration CSS custom property. * @cssprop {String} --progress-bar-font-text-transform - The bar font text transform CSS custom property. * @cssprop {String} --progress-bar-font-weight - The bar font weight CSS custom property. * @cssprop {String} --progress-bar-gap - The bar gap CSS custom property. * @cssprop {String} --progress-bar-padding-bottom - The bar padding bottom CSS custom property. * @cssprop {String} --progress-bar-padding-left - The bar padding left CSS custom property. * @cssprop {String} --progress-bar-padding-right - The bar padding right CSS custom property. * @cssprop {String} --progress-bar-padding-top - The bar padding top CSS custom property. * @cssprop {String} --progress-bar-segment-gap - The bar segment gap CSS custom property. * @cssprop {String} --progress-bar-shadow - The bar shadow CSS custom property. * @cssprop {String} --progress-bar-shadow-blur - The bar shadow blur CSS custom property. * @cssprop {String} --progress-bar-shadow-color - The bar shadow color CSS custom property. * @cssprop {String} --progress-bar-shadow-offset-x - The bar shadow offset x CSS custom property. * @cssprop {String} --progress-bar-shadow-offset-y - The bar shadow offset y CSS custom property. * @cssprop {String} --progress-bar-shadow-spread - The bar shadow spread CSS custom property. * @cssprop {String} --progress-bar-transition-duration - The bar transition duration CSS custom property. * @cssprop {String} --progress-bar-transition-mode - The bar transition mode CSS custom property. * @cssprop {String} --progress-bar-transition-property - The bar transition property CSS custom property. * @cssprop {String} --progress-bar-translate - The bar translate CSS custom property. * * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the progress value changes * * @dependency mosaik-text - The Text element. * * @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