atomicuilibrary 0.0.1

package/dist/collection/components/progress/progress.js

@@ -0,0 +1,1414 @@
+import { h, Host } from "@stencil/core";
+export class Progress {
+    /**
+     * Type of progress
+     */
+    type = 'line';
+    /**
+     * Current progress percentage (0-100)
+     */
+    percent = 0;
+    /**
+     * Status of progress
+     */
+    status = 'normal';
+    currentStatus = 'normal';
+    /**
+     * Width of progress bar stroke
+     */
+    strokeWidth = 10;
+    /**
+     * Color of progress bar (string or gradient object)
+     */
+    strokeColor = '#1890ff';
+    /**
+     * Color of unfilled part
+     */
+    trailColor = '#f0f0f0';
+    /**
+     * Enable automatic gradient based on status or strokeColor
+     */
+    gradient = false;
+    /**
+     * Whether to display progress value and status icon
+     */
+    showInfo = true;
+    /**
+     * Custom format function for progress text
+     */
+    format = (percent) => `${percent}%`;
+    /**
+     * Size of progress (only for type='circle' or 'dashboard')
+     */
+    size = 'default';
+    /**
+     * Width/Length of progress bar (for type='line' and orientation='horizontal')
+     */
+    width = '100%';
+    /**
+     * Height/Length of progress bar (for type='line' and orientation='vertical')
+     */
+    height = '100%';
+    /**
+     * Shape of progress linecap
+     */
+    strokeLinecap = 'round';
+    /**
+     * Segmented success percent
+     */
+    success = null;
+    /**
+     * Total step count (for steps progress)
+     */
+    steps = 0;
+    /**
+     * Gap degree (for circle/dashboard type)
+     */
+    gapDegree = 0;
+    /**
+     * Gap position (for circle/dashboard type)
+     */
+    gapPosition = 'top';
+    /**
+     * Multiple progress bars for stacked display
+     */
+    multiProgress = [];
+    /**
+     * Buffer percentage for loading states
+     */
+    buffer = 0;
+    /**
+     * Show buffer indicator
+     */
+    showBuffer = false;
+    /**
+     * Paused state
+     */
+    paused = false;
+    /**
+     * Show pause/resume button
+     */
+    showPauseButton = false;
+    /**
+     * Estimated time remaining in seconds
+     */
+    estimatedTime = 0;
+    /**
+     * Show time estimation
+     */
+    showTimeEstimate = false;
+    /**
+    * Milestone markers
+    */
+    milestones = [];
+    /**
+     * Indeterminate state (infinite animation)
+     */
+    indeterminate = false;
+    /**
+     * Decimal precision for percentage display
+     */
+    decimalPrecision = 0;
+    /**
+     * Independent color for the percentage text
+     */
+    percentageColor = '';
+    /**
+     * Enable premium wave/liquid animation
+     */
+    liquid = false;
+    /**
+     * Dynamic threshold mapping [{percent: 80, color: 'red', status: 'danger'}]
+     */
+    thresholds = [];
+    /**
+     * Icon name to display alongside status
+     */
+    icon = '';
+    /**
+     * Icon library (lucide, fontawesome, se, core)
+     */
+    iconLibrary = 'lucide';
+    /**
+     * Whether to display in skeleton/loading mode
+     */
+    skeleton = false;
+    /**
+     * Tracks the maximum percent reached (Ghost Marker)
+     */
+    peakMarker = 0;
+    /**
+     * Show a background 'vitality' pulse synchronized with system health
+     */
+    vitality = false;
+    /**
+     * Raw metric labels (e.g. '5.2 GB / 10 GB')
+     */
+    dataLabels = '';
+    /**
+     * Enable glassmorphism effect for the trail
+     */
+    glass = false;
+    /**
+     * Enable dynamic glow effect based on status
+     */
+    glow = false;
+    /**
+     * Label position
+     */
+    labelPosition = 'outside';
+    /**
+     * Orientation of the progress bar
+     */
+    orientation = 'horizontal';
+    /**
+     * Allow manual interaction (slider mode)
+     */
+    interactive = false;
+    /**
+     * Show scale ticks at specific intervals (e.g. 10)
+     */
+    ticks = 0;
+    animatedPercent = 0;
+    isDragging = false;
+    gradientId = `ui-progress-gradient-${Math.random().toString(36).substr(2, 9)}`;
+    el;
+    /**
+     * Emitted when user interacts/scrubs
+     */
+    progressChange;
+    componentWillLoad() {
+        this.animatedPercent = this.percent;
+        this.currentStatus = this.status;
+        this.normalizeProps();
+    }
+    normalizeProps() {
+        try {
+            if (typeof this.milestones === 'string')
+                this.milestones = JSON.parse(this.milestones);
+            if (typeof this.thresholds === 'string')
+                this.thresholds = JSON.parse(this.thresholds);
+            if (typeof this.success === 'string')
+                this.success = JSON.parse(this.success);
+            if (typeof this.strokeColor === 'string' && (this.strokeColor.startsWith('{'))) {
+                this.strokeColor = JSON.parse(this.strokeColor);
+            }
+            if (typeof this.multiProgress === 'string') {
+                this.multiProgress = JSON.parse(this.multiProgress);
+            }
+        }
+        catch (e) {
+            console.warn('Failed to parse complex progress prop', e);
+        }
+    }
+    handlePercentChange(newPercent) {
+        if (newPercent > this.peakMarker) {
+            this.peakMarker = newPercent;
+        }
+        this.animateProgress(newPercent);
+        this.applyThresholds(newPercent);
+    }
+    handleStrokeColorChange() {
+        this.normalizeProps();
+    }
+    applyThresholds(val) {
+        if (!this.thresholds.length)
+            return;
+        const sorted = [...this.thresholds].sort((a, b) => b.percent - a.percent);
+        const match = sorted.find(t => val >= t.percent);
+        if (match) {
+            if (match.status)
+                this.currentStatus = match.status;
+            if (match.color)
+                this.strokeColor = match.color; // strokeColor is usually internal or we just use it for rendering anyway
+        }
+        else {
+            this.currentStatus = this.status;
+        }
+    }
+    animateProgress(targetPercent) {
+        const duration = 500;
+        const startPercent = this.animatedPercent;
+        const diff = targetPercent - startPercent;
+        const startTime = Date.now();
+        const animate = () => {
+            const currentTime = Date.now();
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            this.animatedPercent = startPercent + diff * this.easeOut(progress);
+            if (progress < 1) {
+                requestAnimationFrame(animate);
+            }
+        };
+        requestAnimationFrame(animate);
+    }
+    easeOut(t) {
+        return 1 - Math.pow(1 - t, 3);
+    }
+    handleInteraction = (e) => {
+        if (!this.interactive)
+            return;
+        this.isDragging = true;
+        this.updateFromEvent(e);
+        const handleUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', handleMove);
+            document.removeEventListener('mouseup', handleUp);
+            document.removeEventListener('touchmove', handleMove);
+            document.removeEventListener('touchend', handleUp);
+        };
+        const handleMove = (ev) => {
+            if (this.isDragging)
+                this.updateFromEvent(ev);
+        };
+        document.addEventListener('mousemove', handleMove);
+        document.addEventListener('mouseup', handleUp);
+        document.addEventListener('touchmove', handleMove);
+        document.addEventListener('touchend', handleUp);
+    };
+    updateFromEvent(e) {
+        const rect = this.el.shadowRoot?.querySelector('.progress-line-trail')?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+        let val = 0;
+        if (this.orientation === 'vertical') {
+            val = 100 - ((clientY - rect.top) / rect.height) * 100;
+        }
+        else {
+            val = ((clientX - rect.left) / rect.width) * 100;
+        }
+        const constrained = Math.max(0, Math.min(100, Math.round(val)));
+        this.percent = constrained;
+        this.progressChange.emit({ value: constrained });
+    }
+    renderTicks() {
+        if (this.ticks <= 0)
+            return null;
+        const count = Math.floor(100 / this.ticks);
+        const nodes = [];
+        for (let i = 0; i <= count; i++) {
+            const pos = i * this.ticks;
+            nodes.push(h("div", { class: "progress-tick", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${pos}%` } }));
+        }
+        return nodes;
+    }
+    getStrokeColor() {
+        if (this.currentStatus === 'success') {
+            return '#52c41a';
+        }
+        if (this.currentStatus === 'exception' || this.currentStatus === 'danger') {
+            return '#ff4d4f';
+        }
+        if (this.currentStatus === 'warning') {
+            return '#faad14';
+        }
+        const hasGradient = this.gradient || (typeof this.strokeColor === 'object' && this.strokeColor !== null);
+        if (hasGradient) {
+            return `url(#${this.gradientId})`;
+        }
+        if (typeof this.strokeColor === 'string') {
+            return this.strokeColor;
+        }
+        return '#1890ff';
+    }
+    renderLineProgress() {
+        const strokeColor = this.getStrokeColor();
+        const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
+        let backgroundStyle = strokeColor;
+        const isGradientProp = typeof this.strokeColor === 'object' && this.strokeColor !== null;
+        const gradientObj = isGradientProp ? this.strokeColor : null;
+        const direction = this.orientation === 'vertical' ? 'to top' : (gradientObj ? (gradientObj.direction || 'to right') : 'to right');
+        if (this.gradient || isGradientProp) {
+            let fromColor = '#1890ff';
+            let toColor = '#52c41a';
+            if (gradientObj) {
+                fromColor = gradientObj.from || fromColor;
+                toColor = gradientObj.to || toColor;
+            }
+            else {
+                // Generate automatic gradient based on status or color
+                fromColor = strokeColor;
+                // Lighten/Darken logic or just a secondary color
+                toColor = this.status === 'normal' ? '#69c0ff' : strokeColor;
+            }
+            backgroundStyle = `linear-gradient(${direction}, ${fromColor}, ${toColor})`;
+        }
+        const progressStyle = {
+            [this.orientation === 'vertical' ? 'height' : 'width']: this.indeterminate ? '100%' : `${Math.min(this.animatedPercent, 100)}%`,
+            [this.orientation === 'vertical' ? 'width' : 'height']: '100%',
+            borderRadius: this.strokeLinecap === 'round' ? `${this.strokeWidth}px` : '0',
+            background: backgroundStyle,
+            ...(this.orientation === 'vertical' ? { position: 'absolute', bottom: '0', left: '0' } : {})
+        };
+        const trailStyle = {
+            [this.orientation === 'vertical' ? 'width' : 'height']: `${this.strokeWidth}px`,
+            [this.orientation === 'vertical' ? 'height' : 'width']: this.orientation === 'vertical'
+                ? (typeof this.height === 'number' ? `${this.height}px` : this.height)
+                : (typeof this.width === 'number' ? `${this.width}px` : this.width),
+            borderRadius: this.strokeLinecap === 'round' ? `${this.strokeWidth}px` : '0',
+            background: this.trailColor,
+            cursor: this.interactive ? 'pointer' : 'default',
+            flex: '1'
+        };
+        return (h("div", { class: {
+                'progress-line-wrapper': true,
+                [`progress-orient-${this.orientation}`]: true
+            } }, this.labelPosition === 'top' && this.showInfo && this.renderProgressInfo(), h("div", { class: "progress-line-trail", style: trailStyle, onMouseDown: this.handleInteraction, onTouchStart: this.handleInteraction }, this.vitality && h("div", { class: "progress-vitality-pulse" }), this.renderTicks(), this.showBuffer && this.buffer > 0 && (h("div", { class: "progress-buffer-bar", style: {
+                [this.orientation === 'vertical' ? 'height' : 'width']: `${Math.min(this.buffer, 100)}%`,
+                [this.orientation === 'vertical' ? 'width' : 'height']: `${this.strokeWidth}px`,
+                background: `${strokeColor}33`,
+                ...(this.orientation === 'vertical' ? { position: 'absolute', bottom: '0', left: '0' } : {})
+            } })), h("div", { class: {
+                'progress-line-bar': true,
+                'progress-active': (this.currentStatus === 'active' || this.indeterminate) && !this.paused,
+                'progress-indeterminate': this.indeterminate,
+                'progress-liquid': this.liquid,
+                'progress-industrial': this.type === 'industrial',
+                'progress-vibrate': this.status === 'danger'
+            }, style: progressStyle }, this.labelPosition === 'inside' && this.showInfo && (h("div", { class: "progress-text-inside", style: { color: this.percentageColor || '#fff', fontSize: `${Math.max(this.strokeWidth * 0.6, 9)}px` } }, this.icon && h("ui-icon", { name: this.icon, library: this.iconLibrary, style: { marginRight: '4px' } }), this.format(roundedPercent))), this.success && (this.success.percent ?? 0) > 0 && (h("div", { class: "progress-success-bar", style: {
+                [this.orientation === 'vertical' ? 'height' : 'width']: `${((this.success.percent ?? 0) / this.animatedPercent) * 100}%`,
+                background: this.success.strokeColor || '#52c41a',
+                ...(this.orientation === 'vertical' ? { position: 'absolute', bottom: '0', left: '0' } : {})
+            } }))), this.peakMarker > 0 && (h("div", { class: "progress-peak-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${this.peakMarker}%` }, title: `Session Peak: ${this.peakMarker}%` })), this.milestones.map(milestone => (h("div", { class: "milestone-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${milestone.percent}%` }, title: milestone.label }, milestone.icon ? h("ui-icon", { name: milestone.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" }) : h("div", { class: "milestone-dot" }))))), this.multiProgress.length > 0 && this.renderMultiProgress(), this.labelPosition !== 'top' && this.showInfo && this.renderProgressInfo(), this.showTimeEstimate && this.estimatedTime > 0 && this.renderTimeEstimate(), this.showPauseButton && this.renderPauseButton()));
+    }
+    renderMultiProgress() {
+        return (h("div", { class: "multi-progress-container", style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '12px' } }, this.multiProgress.map((prog) => (h("div", { class: "multi-progress-item", style: { display: 'flex', alignItems: 'center', gap: '12px' } }, h("div", { class: "multi-progress-bar-wrap", style: { flex: '1', height: `${this.strokeWidth}px`, background: this.trailColor, borderRadius: '4px', overflow: 'hidden' } }, h("div", { class: "multi-progress-bar", style: {
+                width: `${prog.percent}%`,
+                background: prog.color || this.getStrokeColor(),
+                height: '100%',
+                transition: 'width 0.5s ease'
+            } })), prog.label && h("span", { class: "multi-progress-label", style: { fontSize: '11px', fontWeight: '700', color: '#64748b' } }, prog.label))))));
+    }
+    renderTimeEstimate() {
+        const minutes = Math.floor(this.estimatedTime / 60);
+        const seconds = this.estimatedTime % 60;
+        const timeStr = minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+        return h("span", { class: "time-estimate" }, "Est. ", timeStr, " remaining");
+    }
+    renderPauseButton() {
+        return (h("ui-button", { variant: "ghost", class: "pause-button", onClick: () => this.paused = !this.paused, icon: this.paused ? 'play' : 'pause', iconLibrary: "fontawesome", iconOnly: true, size: "sm" }));
+    }
+    renderStepsProgress() {
+        const steps = [];
+        const stepWidth = 100 / this.steps;
+        const strokeColor = this.getStrokeColor();
+        for (let i = 0; i < this.steps; i++) {
+            const stepPercent = ((i + 1) / this.steps) * 100;
+            const isActive = stepPercent <= this.animatedPercent;
+            steps.push(h("div", { class: {
+                    'progress-step': true,
+                    'progress-step-active': isActive
+                }, style: {
+                    width: `${stepWidth}%`,
+                    background: isActive ? strokeColor : this.trailColor,
+                    height: `${this.strokeWidth}px`
+                } }));
+        }
+        return (h("div", { class: "progress-steps-wrapper", style: { width: typeof this.width === 'number' ? `${this.width}px` : this.width } }, h("div", { class: "progress-steps-container" }, steps), this.showInfo && this.renderProgressInfo()));
+    }
+    renderCircleProgress() {
+        const size = this.size === 'sm' ? 80 : 120;
+        const strokeWidth = this.strokeWidth || (this.size === 'sm' ? 6 : 8);
+        const radius = (size - strokeWidth) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const offset = this.indeterminate
+            ? circumference * 0.75 // Constant partial stroke for indeterminate
+            : circumference - (this.animatedPercent / 100) * circumference;
+        const strokeColor = this.getStrokeColor();
+        const gapDegree = this.type === 'dashboard' ? (this.gapDegree || 75) : this.gapDegree;
+        const gapPosition = this.gapPosition;
+        let rotation = 0;
+        if (gapPosition === 'bottom')
+            rotation = 180;
+        else if (gapPosition === 'top')
+            rotation = 0;
+        else if (gapPosition === 'left')
+            rotation = 270;
+        else if (gapPosition === 'right')
+            rotation = 90;
+        const pathString = this.getCirclePath(size / 2, size / 2, radius, gapDegree, rotation);
+        const iconEl = this.icon ? h("ui-icon", { name: this.icon, library: this.iconLibrary, style: { display: 'block', fontSize: `${this.size === 'sm' ? 18 : 24}px`, marginBottom: '4px' } }) : null;
+        const isGradientProp = typeof this.strokeColor === 'object' && this.strokeColor !== null;
+        const gradientObj2 = isGradientProp ? this.strokeColor : null;
+        const hasGradient = this.gradient || isGradientProp;
+        return (h("div", { class: "progress-circle-wrapper", style: { width: `${size}px`, height: `${size}px` } }, h("svg", { width: size, height: size }, hasGradient && (h("defs", null, h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, h("stop", { offset: "0%", "stop-color": gradientObj2 ? (gradientObj2.from || strokeColor) : strokeColor }), h("stop", { offset: "100%", "stop-color": gradientObj2 ? (gradientObj2.to || '#52c41a') : (this.status === 'normal' ? '#69c0ff' : strokeColor) })))), h("path", { d: pathString, stroke: this.trailColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap }), h("path", { d: pathString, stroke: strokeColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap, "stroke-dasharray": circumference, "stroke-dashoffset": offset, class: {
+                'progress-circle-path': true,
+                'progress-indeterminate': this.indeterminate,
+                'progress-liquid': this.liquid
+            } })), this.showInfo && (h("div", { class: "progress-circle-text" }, iconEl, this.renderProgressInfo()))));
+    }
+    getCirclePath(cx, cy, radius, gapDegree, rotation) {
+        const gapRad = (gapDegree * Math.PI) / 180;
+        const startAngle = -Math.PI / 2 + gapRad / 2 + (rotation * Math.PI) / 180;
+        const endAngle = startAngle + 2 * Math.PI - gapRad;
+        const startX = cx + radius * Math.cos(startAngle);
+        const startY = cy + radius * Math.sin(startAngle);
+        const endX = cx + radius * Math.cos(endAngle);
+        const endY = cy + radius * Math.sin(endAngle);
+        const lgArcFlag = 2 * Math.PI - gapRad > Math.PI ? 1 : 0;
+        return `M ${startX} ${startY} A ${radius} ${radius} 0 ${lgArcFlag} 1 ${endX} ${endY}`;
+    }
+    renderProgressInfo() {
+        if (this.indeterminate)
+            return null;
+        const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
+        const text = this.dataLabels || this.format(roundedPercent);
+        const infoStyle = this.percentageColor ? { color: this.percentageColor } : {};
+        const iconEl = this.icon ? h("ui-icon", { name: this.icon, library: this.iconLibrary, style: { marginRight: '6px' } }) : null;
+        if (this.status === 'success') {
+            return (h("span", { class: "progress-text", style: infoStyle }, iconEl || h("ui-icon", { name: "check-circle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        }
+        if (this.status === 'exception' || this.status === 'danger') {
+            return (h("span", { class: "progress-text progress-text-exception", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-triangle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        }
+        if (this.status === 'warning') {
+            return (h("span", { class: "progress-text progress-text-warning", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-circle", library: "fontawesome" }), text));
+        }
+        return (h("span", { class: "progress-text", style: infoStyle }, iconEl, text));
+    }
+    render() {
+        const progressClass = {
+            'progress': true,
+            [`progress-${this.type}`]: true,
+            'progress-active': this.status === 'active' || this.indeterminate,
+            [`progress-${this.size}`]: this.type !== 'line',
+            'progress-indeterminate': this.indeterminate,
+            'progress-liquid': this.liquid,
+            'progress-glass': this.glass,
+            'progress-glow': this.glow,
+            'progress-skeleton': this.skeleton,
+        };
+        let content;
+        if (this.steps > 0 && this.type === 'line') {
+            content = this.renderStepsProgress();
+        }
+        else if (this.type === 'line') {
+            content = this.renderLineProgress();
+        }
+        else {
+            content = this.renderCircleProgress();
+        }
+        const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
+        return (h(Host, { key: '0f584282c7c54dc1e352dcd047f9393219ea05d7', role: "progressbar", "aria-valuenow": roundedPercent, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": this.dataLabels || `Progress: ${this.percent}%`, style: this.orientation === 'vertical' ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height } : {} }, h("div", { key: '7a81c6056d073cf9cdd90abf2e7748772f0f322d', class: progressClass }, content, (this.liquid || this.type === 'industrial') && (h("svg", { key: '1bee402a754d87ab25395c92acde5edd76da64a2', style: { position: 'absolute', width: '0', height: '0' } }, h("filter", { key: 'bebea12167e23049848d62e1fd182958dc249f2b', id: "liquid-filter" }, h("feGaussianBlur", { key: 'a31af8c228fc7a4a9391b46f12a3e5a5a08ed6eb', in: "SourceGraphic", stdDeviation: "10", result: "blur" }), h("feColorMatrix", { key: 'b4dddec3e0f1dfd172a3281e8c67897a89436387', in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), h("feBlend", { key: 'f5c08e7d756af6ae228c47115dffd9a4e32142c7', in: "SourceGraphic", in2: "goo" })))))));
+    }
+    static get is() { return "ui-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'line' | 'circle' | 'dashboard' | 'segmented' | 'industrial'",
+                    "resolved": "\"circle\" | \"dashboard\" | \"industrial\" | \"line\" | \"segmented\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of progress"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'line'"
+            },
+            "percent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current progress percentage (0-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "percent",
+                "defaultValue": "0"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'exception' | 'normal' | 'active' | 'warning' | 'danger'",
+                    "resolved": "\"active\" | \"danger\" | \"exception\" | \"normal\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status of progress"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'normal'"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of progress bar stroke"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "10"
+            },
+            "strokeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { from?: string; to?: string; direction?: string }",
+                    "resolved": "string | { from?: string; to?: string; direction?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of progress bar (string or gradient object)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-color",
+                "defaultValue": "'#1890ff'"
+            },
+            "trailColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of unfilled part"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trail-color",
+                "defaultValue": "'#f0f0f0'"
+            },
+            "gradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable automatic gradient based on status or strokeColor"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient",
+                "defaultValue": "false"
+            },
+            "showInfo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display progress value and status icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-info",
+                "defaultValue": "true"
+            },
+            "format": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(percent: number) => string",
+                    "resolved": "(percent: number) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom format function for progress text"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(percent: number) => `${percent}%`"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'default'",
+                    "resolved": "\"default\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of progress (only for type='circle' or 'dashboard')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width/Length of progress bar (for type='line' and orientation='horizontal')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height/Length of progress bar (for type='line' and orientation='vertical')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'100%'"
+            },
+            "strokeLinecap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'round' | 'square'",
+                    "resolved": "\"round\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape of progress linecap"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-linecap",
+                "defaultValue": "'round'"
+            },
+            "success": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "{ percent?: number; strokeColor?: string } | null",
+                    "resolved": "{ percent?: number; strokeColor?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segmented success percent"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "steps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total step count (for steps progress)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "0"
+            },
+            "gapDegree": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap degree (for circle/dashboard type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap-degree",
+                "defaultValue": "0"
+            },
+            "gapPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap position (for circle/dashboard type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap-position",
+                "defaultValue": "'top'"
+            },
+            "multiProgress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ percent: number; color?: string; label?: string }>",
+                    "resolved": "{ percent: number; color?: string; label?: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Multiple progress bars for stacked display"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "buffer": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Buffer percentage for loading states"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "buffer",
+                "defaultValue": "0"
+            },
+            "showBuffer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show buffer indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-buffer",
+                "defaultValue": "false"
+            },
+            "paused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Paused state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "paused",
+                "defaultValue": "false"
+            },
+            "showPauseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show pause/resume button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-pause-button",
+                "defaultValue": "false"
+            },
+            "estimatedTime": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estimated time remaining in seconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "estimated-time",
+                "defaultValue": "0"
+            },
+            "showTimeEstimate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show time estimation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-time-estimate",
+                "defaultValue": "false"
+            },
+            "milestones": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Array<{ percent: number; label?: string; icon?: string }>",
+                    "resolved": "{ percent: number; label?: string; icon?: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milestone markers"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate state (infinite animation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "decimalPrecision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decimal precision for percentage display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decimal-precision",
+                "defaultValue": "0"
+            },
+            "percentageColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Independent color for the percentage text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "percentage-color",
+                "defaultValue": "''"
+            },
+            "liquid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable premium wave/liquid animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "liquid",
+                "defaultValue": "false"
+            },
+            "thresholds": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Array<{ percent: number; color?: string; status?: string; glow?: boolean; vibrate?: boolean }>",
+                    "resolved": "{ percent: number; color?: string; status?: string; glow?: boolean; vibrate?: boolean; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dynamic threshold mapping [{percent: 80, color: 'red', status: 'danger'}]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to display alongside status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon library (lucide, fontawesome, se, core)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display in skeleton/loading mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "peakMarker": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tracks the maximum percent reached (Ghost Marker)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "peak-marker",
+                "defaultValue": "0"
+            },
+            "vitality": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a background 'vitality' pulse synchronized with system health"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vitality",
+                "defaultValue": "false"
+            },
+            "dataLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Raw metric labels (e.g. '5.2 GB / 10 GB')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data-labels",
+                "defaultValue": "''"
+            },
+            "glass": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable glassmorphism effect for the trail"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glass",
+                "defaultValue": "false"
+            },
+            "glow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable dynamic glow effect based on status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glow",
+                "defaultValue": "false"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inside' | 'outside' | FourSidePosition",
+                    "resolved": "\"bottom\" | \"inside\" | \"left\" | \"outside\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'outside'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow manual interaction (slider mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
+            "ticks": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show scale ticks at specific intervals (e.g. 10)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ticks",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentStatus": {},
+            "animatedPercent": {},
+            "isDragging": {},
+            "gradientId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "progressChange",
+                "name": "progressChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user interacts/scrubs"
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "percent",
+                "methodName": "handlePercentChange"
+            }, {
+                "propName": "strokeColor",
+                "methodName": "handleStrokeColorChange"
+            }];
+    }
+}