atomicuilibrary 0.0.1

package/dist/cjs/ui-progress.cjs.entry.js

@@ -0,0 +1,516 @@
+'use strict';
+
+var index = require('./index-ClkOYpT8.js');
+
+const progressCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}:host *{box-sizing:border-box}.progress{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:14px;height:100%;width:100%;border-radius:inherit;display:flex;flex-direction:column}.progress-line-wrapper{display:flex;align-items:center;gap:12px}.progress-line-wrapper.progress-orient-vertical{flex-direction:column;height:100%;width:100%}.progress-line-wrapper.progress-orient-vertical .progress-text{text-align:center;min-width:unset;font-size:11px;font-weight:700;letter-spacing:0.05em;margin-top:8px;margin-left:0}.progress-line-trail{position:relative;overflow:hidden;transition:all 0.3s ease}.progress-line-trail:hover{opacity:0.9}.progress-line-bar{position:absolute;top:0;left:0;transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);border-radius:inherit;display:flex;align-items:center;justify-content:center;white-space:nowrap}.progress-text-inside{position:relative;z-index:2;font-weight:700;padding:0 8px;display:flex;align-items:center;justify-content:center}.progress-success-bar{position:absolute;top:0;right:0;border-radius:inherit}.progress-active .progress-line-bar::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:var(--bg-primary, #ffffff);opacity:0;animation:progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;border-radius:inherit}@keyframes progress-active{0%{opacity:0.1;width:0}20%{opacity:0.5;width:0}100%{opacity:0;width:100%}}.progress-indeterminate.progress-line .progress-line-bar{width:100%}.progress-indeterminate.progress-line .progress-line-bar::after{content:"";position:absolute;top:0;left:0;bottom:0;width:50%;background:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);animation:progress-line-indeterminate 1.5s infinite linear}@keyframes progress-line-indeterminate{0%{left:-100%}100%{left:100%}}.progress-steps-wrapper{display:flex;align-items:center;gap:12px}.progress-steps-container{display:flex;gap:4px;flex:1}.progress-step{border-radius:4px;transition:background 0.3s ease}.progress-circle-wrapper{position:relative;display:inline-block}.progress-indeterminate.progress-circle .progress-circle-wrapper,.progress-indeterminate.progress-dashboard .progress-circle-wrapper{animation:progress-circle-rotate 2s infinite linear}.progress-circle-path{transition:stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes progress-circle-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.progress-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;font-size:24px;font-weight:600;color:rgba(0, 0, 0, 0.85)}.progress-sm .progress-circle-text{font-size:16px}.progress-text{font-size:14px;color:rgba(0, 0, 0, 0.65);white-space:nowrap;min-width:32px;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}.progress-text ui-icon{font-size:16px;vertical-align:middle}.progress-circle .progress-text{text-align:center}.progress-text i{font-size:16px;vertical-align:middle;margin-right:4px}.progress-success .progress-text i{color:var(--color-success, #52c41a)}.progress-text-warning i{color:var(--color-danger, #faad14)}.progress-text-exception i,.progress-exception .progress-text i,.progress-danger .progress-text i{color:var(--color-danger, #ff4d4f)}.progress-success .progress-line-bar{background:var(--color-success, #52c41a)}.progress-warning .progress-line-bar{background:var(--color-danger, #faad14)}.progress-exception .progress-line-bar,.progress-danger .progress-line-bar{background:var(--color-danger, #ff4d4f)}.progress-success .progress-circle-path{stroke:var(--color-success, #52c41a)}.progress-warning .progress-circle-path{stroke:var(--color-danger, #faad14)}.progress-exception .progress-circle-path,.progress-danger .progress-circle-path{stroke:var(--color-danger, #ff4d4f)}.progress-sm.progress-circle .progress-circle-wrapper{width:80px;height:80px}.progress-default.progress-circle .progress-circle-wrapper{width:120px;height:120px}.progress-liquid{overflow:hidden}.progress-liquid.progress-line-bar::after{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath fill='var(--bg-primary, #ffffff)' opacity='0.2' d='M0 15 Q25 10 50 15 T100 15 V20 H0 Z'/%3E%3C/svg%3E");background-size:50% 100%;animation:wave-move 2s infinite linear}.progress-liquid.progress-circle-path{filter:url(#liquid-filter);stroke-dasharray:20 2 !important;animation:circular-liquid 2s infinite linear}@keyframes circular-liquid{0%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}@keyframes wave-move{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.progress-glass .progress-line-trail{background:rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.2);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.05)}.progress-glass .progress-circle-wrapper path:first-child{stroke:rgba(255, 255, 255, 0.2) !important;filter:blur(1px)}.progress-glow.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px currentColor)}.progress-glow.progress-circle .progress-circle-path,.progress-glow.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px currentColor)}.progress-success.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-success, #52c41a))}.progress-exception.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-danger, #ff4d4f))}.progress-active.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-primary, #1890ff))}.progress-industrial{mask-size:16px 100%;mask-image:linear-gradient(to right, var(--text-primary, #000) 70%, transparent 70%)}.progress-orient-vertical .progress-industrial{mask-size:100% 16px;mask-image:linear-gradient(to top, var(--text-primary, #000) 70%, transparent 70%)}.progress-industrial{box-shadow:inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);border:1px solid rgba(255, 255, 255, 0.1)}.progress-vibrate{animation:thermal-vibration 0.15s infinite}@keyframes thermal-vibration{0%{transform:translateY(0)}25%{transform:translateY(-1px) translateX(1px)}50%{transform:translateY(1px) translateX(-1px)}75%{transform:translateY(-1px)}100%{transform:translateY(0)}}.progress-peak-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--color-primary, #1890ff);box-shadow:0 0 8px var(--color-primary, #1890ff);transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10;pointer-events:none}.progress-peak-marker::after{content:"";position:absolute;top:-4px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--color-primary, #1890ff)}.progress-vitality-pulse{position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);width:50%;animation:vitality-wave 3s infinite ease-in-out;pointer-events:none;z-index:5}.progress-orient-vertical .progress-vitality-pulse{width:100%;height:50%;background:linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);animation:vitality-wave-vertical 3s infinite ease-in-out}@keyframes vitality-wave{0%{transform:translateX(-100%) skewX(-20deg)}50%{opacity:0.5}100%{transform:translateX(200%) skewX(-20deg)}}@keyframes vitality-wave-vertical{0%{transform:translateY(100%) skewY(-20deg)}50%{opacity:0.5}100%{transform:translateY(-200%) skewY(-20deg)}}.progress-tick{position:absolute;background:rgba(0, 0, 0, 0.1);pointer-events:none;z-index:1}.progress-orient-horizontal .progress-tick{top:0;bottom:0;width:1px}.progress-orient-vertical .progress-tick{left:0;right:0;height:1px}.milestone-marker{position:absolute;top:50%;transform:translate(-50%, -50%);z-index:15;cursor:help;display:flex;align-items:center;justify-content:center}.progress-orient-vertical .milestone-marker{left:50%;transform:translate(-50%, 50%)}.milestone-marker ui-icon{font-size:14px;color:var(--text-primary, #1a202c);background:var(--bg-primary, #ffffff);border-radius:50%;padding:2px;box-shadow:0 0 6px rgba(0, 0, 0, 0.1)}.milestone-dot{width:8px;height:8px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #1890ff);border-radius:50%;box-shadow:0 0 4px rgba(0, 0, 0, 0.15)}.multi-progress-container{border-top:1px solid var(--border-subtle, #edf2f7);padding-top:16px;margin-top:20px}.multi-progress-item{transition:all 0.2s ease}.multi-progress-item:hover{transform:translateX(4px)}.multi-progress-bar-wrap{position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.05)}.multi-progress-label{letter-spacing:0.025em;text-transform:uppercase}.time-estimate{font-size:11px;color:var(--color-primary, #718096);font-weight:600;margin-top:8px;display:block}.pause-button{display:flex;align-items:center;justify-content:center;background:var(--bg-primary, #f7fafc);border:1px solid var(--border-subtle, #e2e8f0);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--color-primary, #4a5568);transition:all 0.2s ease;margin-top:8px}.pause-button:hover{background:var(--bg-primary, #edf2f7);color:var(--color-primary, #2d3748);transform:scale(1.1)}.pause-button ui-icon{font-size:10px}.progress-skeleton .progress-line-trail{background:var(--bg-primary, #e2e8f0) !important;position:relative;overflow:hidden}.progress-skeleton .progress-line-trail::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);animation:progress-shimmer 1.5s infinite}.progress-skeleton .progress-line-bar{display:none !important}@keyframes progress-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (forced-colors: active){.progress-line-trail{border:1px solid CanvasText}.progress-line-bar{background:Highlight}.progress-peak-marker{background:Mark;box-shadow:none}.progress-tick{background:CanvasText;opacity:0.3}}`;
+
+const Progress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.progressChange = index.createEvent(this, "progressChange");
+    }
+    /**
+     * 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)}`;
+    get el() { return index.getElement(this); }
+    /**
+     * 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(index.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 (index.h("div", { class: {
+                'progress-line-wrapper': true,
+                [`progress-orient-${this.orientation}`]: true
+            } }, this.labelPosition === 'top' && this.showInfo && this.renderProgressInfo(), index.h("div", { class: "progress-line-trail", style: trailStyle, onMouseDown: this.handleInteraction, onTouchStart: this.handleInteraction }, this.vitality && index.h("div", { class: "progress-vitality-pulse" }), this.renderTicks(), this.showBuffer && this.buffer > 0 && (index.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' } : {})
+            } })), index.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 && (index.h("div", { class: "progress-text-inside", style: { color: this.percentageColor || '#fff', fontSize: `${Math.max(this.strokeWidth * 0.6, 9)}px` } }, this.icon && index.h("ui-icon", { name: this.icon, library: this.iconLibrary, style: { marginRight: '4px' } }), this.format(roundedPercent))), this.success && (this.success.percent ?? 0) > 0 && (index.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 && (index.h("div", { class: "progress-peak-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${this.peakMarker}%` }, title: `Session Peak: ${this.peakMarker}%` })), this.milestones.map(milestone => (index.h("div", { class: "milestone-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${milestone.percent}%` }, title: milestone.label }, milestone.icon ? index.h("ui-icon", { name: milestone.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" }) : index.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 (index.h("div", { class: "multi-progress-container", style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '12px' } }, this.multiProgress.map((prog) => (index.h("div", { class: "multi-progress-item", style: { display: 'flex', alignItems: 'center', gap: '12px' } }, index.h("div", { class: "multi-progress-bar-wrap", style: { flex: '1', height: `${this.strokeWidth}px`, background: this.trailColor, borderRadius: '4px', overflow: 'hidden' } }, index.h("div", { class: "multi-progress-bar", style: {
+                width: `${prog.percent}%`,
+                background: prog.color || this.getStrokeColor(),
+                height: '100%',
+                transition: 'width 0.5s ease'
+            } })), prog.label && index.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 index.h("span", { class: "time-estimate" }, "Est. ", timeStr, " remaining");
+    }
+    renderPauseButton() {
+        return (index.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(index.h("div", { class: {
+                    'progress-step': true,
+                    'progress-step-active': isActive
+                }, style: {
+                    width: `${stepWidth}%`,
+                    background: isActive ? strokeColor : this.trailColor,
+                    height: `${this.strokeWidth}px`
+                } }));
+        }
+        return (index.h("div", { class: "progress-steps-wrapper", style: { width: typeof this.width === 'number' ? `${this.width}px` : this.width } }, index.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 ? index.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 (index.h("div", { class: "progress-circle-wrapper", style: { width: `${size}px`, height: `${size}px` } }, index.h("svg", { width: size, height: size }, hasGradient && (index.h("defs", null, index.h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, index.h("stop", { offset: "0%", "stop-color": gradientObj2 ? (gradientObj2.from || strokeColor) : strokeColor }), index.h("stop", { offset: "100%", "stop-color": gradientObj2 ? (gradientObj2.to || '#52c41a') : (this.status === 'normal' ? '#69c0ff' : strokeColor) })))), index.h("path", { d: pathString, stroke: this.trailColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap }), index.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 && (index.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 ? index.h("ui-icon", { name: this.icon, library: this.iconLibrary, style: { marginRight: '6px' } }) : null;
+        if (this.status === 'success') {
+            return (index.h("span", { class: "progress-text", style: infoStyle }, iconEl || index.h("ui-icon", { name: "check-circle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        }
+        if (this.status === 'exception' || this.status === 'danger') {
+            return (index.h("span", { class: "progress-text progress-text-exception", style: infoStyle }, iconEl || index.h("ui-icon", { name: "exclamation-triangle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        }
+        if (this.status === 'warning') {
+            return (index.h("span", { class: "progress-text progress-text-warning", style: infoStyle }, iconEl || index.h("ui-icon", { name: "exclamation-circle", library: "fontawesome" }), text));
+        }
+        return (index.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 (index.h(index.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 } : {} }, index.h("div", { key: '7a81c6056d073cf9cdd90abf2e7748772f0f322d', class: progressClass }, content, (this.liquid || this.type === 'industrial') && (index.h("svg", { key: '1bee402a754d87ab25395c92acde5edd76da64a2', style: { position: 'absolute', width: '0', height: '0' } }, index.h("filter", { key: 'bebea12167e23049848d62e1fd182958dc249f2b', id: "liquid-filter" }, index.h("feGaussianBlur", { key: 'a31af8c228fc7a4a9391b46f12a3e5a5a08ed6eb', in: "SourceGraphic", stdDeviation: "10", result: "blur" }), index.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" }), index.h("feBlend", { key: 'f5c08e7d756af6ae228c47115dffd9a4e32142c7', in: "SourceGraphic", in2: "goo" })))))));
+    }
+    static get watchers() { return {
+        "percent": [{
+                "handlePercentChange": 0
+            }],
+        "strokeColor": [{
+                "handleStrokeColorChange": 0
+            }]
+    }; }
+};
+Progress.style = progressCss();
+
+exports.ui_progress = Progress;