dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
107 lines (106 loc) • 5.35 kB
TypeScript
import { DdsElement } from '../../internal/dds-hu-element';
declare const ProgressBaseWithSized: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
export type ProgressVariant = 'linear' | 'circular';
export type ProgressColor = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
/**
* `dap-ds-progress`
* @summary Progress indicator component with linear and circular variants.
* @element dap-ds-progress
* @title - Progress
*
* @csspart base - The main progress container.
* @csspart track - The progress track (background).
* @csspart fill - The progress fill (bar for linear, circle for circular).
* @csspart label - The progress label text.
* @csspart percentage - The percentage text (circular variant only).
* @csspart background - The background circle (circular variant only).
*
* @slot label - Custom label content for the progress indicator.
*
* @cssprop --dds-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))
* @cssprop --dds-progress-fill-color-neutral - Fill color for neutral variant (default: var(--dds-icon-neutral-base))
* @cssprop --dds-progress-fill-color-brand - Fill color for brand variant (default: var(--dds-icon-brand-subtle))
* @cssprop --dds-progress-fill-color-negative - Fill color for negative variant (default: var(--dds-icon-negative-subtle))
* @cssprop --dds-progress-fill-color-positive - Fill color for positive variant (default: var(--dds-icon-positive-subtle))
* @cssprop --dds-progress-fill-color-inverted - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted))
* @cssprop --dds-progress-height-xs - Height for extra small linear progress (default: var(--dds-spacing-50))
* @cssprop --dds-progress-height-sm - Height for small linear progress (default: var(--dds-spacing-100))
* @cssprop --dds-progress-height-md - Height for medium linear progress (default: var(--dds-spacing-150))
* @cssprop --dds-progress-height-lg - Height for large linear progress (default: var(--dds-spacing-200))
* @cssprop --dds-progress-height-xl - Height for extra large linear progress (default: var(--dds-spacing-300))
* @cssprop --dds-progress-height-xxl - Height for extra extra large linear progress (default: var(--dds-spacing-400))
* @cssprop --dds-progress-diameter-xs - Diameter for extra small circular progress (default: var(--dds-spacing-600))
* @cssprop --dds-progress-diameter-sm - Diameter for small circular progress (default: var(--dds-spacing-800))
* @cssprop --dds-progress-diameter-md - Diameter for medium circular progress (default: var(--dds-spacing-1200))
* @cssprop --dds-progress-diameter-lg - Diameter for large circular progress (default: var(--dds-spacing-1600))
* @cssprop --dds-progress-diameter-xl - Diameter for extra large circular progress (default: var(--dds-spacing-2000))
* @cssprop --dds-progress-diameter-xxl - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400))
* @cssprop --dds-progress-stroke-width - Stroke width for circular progress (default: var(--dds-spacing-200))
* @cssprop --dds-progress-animation-duration - Duration of indeterminate animation (default: 1.5s)
*
* @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the progress indicator. Default is `sm`. See SizedMixin.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
*/
export default class DapDSProgress extends ProgressBaseWithSized {
static tagName: string;
/**
* The variant of the progress indicator.
* @type {"linear" | "circular"}
*/
variant: ProgressVariant;
/**
* The color variant of the progress indicator.
* @type {"neutral" | "brand" | "negative" | "positive" | "inverted"}
*/
color: ProgressColor;
/**
* Current progress value (0-100 for percentage, or 0-max).
*/
value?: number;
/**
* Maximum value for the progress indicator.
*/
max: number;
/**
* Whether to show the progress as indeterminate (loading animation).
*/
indeterminate: boolean;
/**
* Whether to show percentage text in the center (circular variant only).
*/
showPercentage: boolean;
/**
* Label text for the progress indicator.
*/
label?: string;
/**
* The aria-live politeness level for screen readers.
* @type {"polite" | "assertive" | "off"}
*/
ariaLive: 'polite' | 'assertive' | 'off';
static readonly styles: import('lit').CSSResult;
/** Maps effectiveSize from SizedMixin to progress visual size class (xs–lg; xxs maps to xs). */
private get progressSize();
/**
* Calculate the percentage value (0-100).
*/
private get percentage();
/**
* Calculate the stroke-dashoffset for circular progress.
* Circle circumference = 2πr where r = 45 (radius of circle with center at 50,50 in viewBox 0 0 100 100)
*/
private get circleOffset();
/**
* Render the linear progress variant.
*/
private renderLinear;
/**
* Render the circular progress variant.
*/
private renderCircular;
render(): import('lit-html').TemplateResult<1>;
}
export {};