import * as i0 from '@angular/core';
import { numberAttribute, inject, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i2 from '@eui/components/eui-icon-state';
import { EUI_ICON_STATE } from '@eui/components/eui-icon-state';

/**
 * Transform function that ensures progress value doesn't exceed 100
 * @param value - The input progress value
 * @returns A number between 0 and 100
 */
const progressAttribute = (value) => Math.min(numberAttribute(value), 100);
/**
 * @description
 * Horizontal progress indicator component that visualizes task completion or loading states.
 * Supports determinate progress with percentage values and indeterminate loading animations.
 * Provides optional labeling and status icons for contextual feedback.
 * Integrates with BaseStatesDirective for theming variants (success, warning, danger) and sizing options.
 * Commonly used for file uploads, form submissions, data processing, and loading indicators.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-progress-bar [progress]="75" label="Upload progress"></eui-progress-bar>
 * ```
 *
 * ### Indeterminate loading
 * ```html
 * <eui-progress-bar [isIndeterminate]="true" label="Loading..."></eui-progress-bar>
 * ```
 *
 * ### With status variants
 * ```html
 * <eui-progress-bar [progress]="90" euiSuccess [hasStatusIcon]="true"></eui-progress-bar>
 * <eui-progress-bar [progress]="50" euiWarning></eui-progress-bar>
 * <eui-progress-bar [progress]="25" euiDanger></eui-progress-bar>
 * ```
 *
 * ### Accessibility
 * - Uses ARIA attributes to communicate progress state to assistive technologies
 * - Label provides context for screen readers
 * - Status icons enhance visual feedback for users with color vision deficiencies
 *
 * ### Notes
 * - Progress values are automatically capped at 100
 * - Indeterminate mode shows continuous animation for unknown duration tasks
 * - Combine with status variants to indicate success, warning, or error states
 */
class EuiProgressBarComponent {
    constructor() {
        /** Element attribute for e2e testing */
        this.e2eAttr = 'eui-progress-bar';
        /** Optional label displayed above the progress bar */
        this.label = '';
        /**
         * When true, shows an indeterminate progress animation
         * instead of a specific progress value
         */
        this.isIndeterminate = false;
        /**
         * When true, displays a status icon based on the current state
         * (success, warning, error, etc.)
         */
        this.hasStatusIcon = false;
        /**
         * Reference to the BaseStatesDirective for managing component states
         */
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /** CSS classes applied to the host element */
    get cssClasses() {
        return this.getCssClasses();
    }
    ngOnChanges(changes) {
        if (changes['progress']) {
            this.progress = changes['progress'].currentValue;
            if (this?.progress > 100) {
                this.progress = 100;
            }
        }
    }
    /**
     * Generates CSS classes for the component based on current state
     * @returns Space-separated string of CSS class names
     */
    getCssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-progress-bar'),
            this.isIndeterminate ? 'eui-progress-bar--indeterminate' : '',
            this.hasStatusIcon ? 'eui-progress-bar--hasStatusIcon' : '',
        ]
            .join(' ')
            .trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiProgressBarComponent, isStandalone: true, selector: "eui-progress-bar", inputs: { e2eAttr: "e2eAttr", label: "label", progress: ["progress", "progress", numberAttribute], isIndeterminate: ["isIndeterminate", "isIndeterminate", booleanAttribute], hasStatusIcon: ["hasStatusIcon", "hasStatusIcon", booleanAttribute] }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiSize2XS", "euiSize2XS", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiVariant", "euiVariant", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "@if(label || hasStatusIcon) {\n    <div class=\"eui-progress-bar__header\">\n        @if(label) {\n            <div class=\"eui-progress-bar__header-label\">{{ label }}</div>\n        }\n        @if(hasStatusIcon) {\n            <div class=\"eui-progress-bar__header-status\">\n                <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\"/>\n            </div>\n        }\n    </div>\n}\n<div class=\"eui-progress-bar__indicator-container\">\n    <div class=\"eui-progress-bar__indicator\" [style.width]=\"!isIndeterminate ? progress + '%' : null\"></div>\n</div>\n", styles: [".eui-21 :host.eui-progress-bar{align-items:center;display:flex;flex-direction:column;position:relative}.eui-21 :host.eui-progress-bar .eui-progress-bar__header{align-items:center;display:flex;justify-content:space-between;height:var(--eui-s-l);margin-bottom:var(--eui-s-s);width:100%}.eui-21 :host.eui-progress-bar .eui-progress-bar__header-label{display:flex;justify-content:flex-start;font:var(--eui-f-m-semi-bold)}.eui-21 :host.eui-progress-bar .eui-progress-bar__header-status{display:flex;justify-content:flex-end}.eui-21 :host.eui-progress-bar .eui-progress-bar__indicator-container{margin-bottom:var(--eui-s-3xs);background-color:var(--eui-c-surface-container-3);height:var(--eui-s-3xs);position:relative;width:100%}.eui-21 :host.eui-progress-bar .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-primary-surface);height:100%;transition:width .25s ease}.eui-21 :host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-s-3xs)}.eui-21 :host.eui-progress-bar--size-xs .eui-progress-bar__indicator-container{height:var(--eui-s-xs)}.eui-21 :host.eui-progress-bar--size-s .eui-progress-bar__indicator-container{height:var(--eui-s-s)}.eui-21 :host.eui-progress-bar--size-m .eui-progress-bar__indicator-container{height:var(--eui-s-m)}.eui-21 :host.eui-progress-bar--size-l .eui-progress-bar__indicator-container{height:var(--eui-s-l)}.eui-21 :host.eui-progress-bar--size-xl .eui-progress-bar__indicator-container{height:var(--eui-s-xl)}.eui-21 :host.eui-progress-bar--secondary .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-secondary-surface)}.eui-21 :host.eui-progress-bar--success .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-success-surface)}.eui-21 :host.eui-progress-bar--info .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-info-surface)}.eui-21 :host.eui-progress-bar--warning .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-warning-surface)}.eui-21 :host.eui-progress-bar--danger .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-danger-surface)}.eui-21 :host.eui-progress-bar--indeterminate .eui-progress-bar__indicator-container .eui-progress-bar__indicator{animation:progress-linear-indeterminate 2s infinite linear;background-color:var(--eui-c-surface-container-3);background-size:200% 100%;background-image:linear-gradient(to right,transparent 50%,var(--eui-c-primary) 50%,var(--eui-c-primary) 60%,transparent 60%,transparent 71.5%,var(--eui-c-primary) 71.5%,var(--eui-c-primary) 84%,transparent 84%);transition:all .2s}@keyframes progress-linear-indeterminate{0%{background-size:200% 100%;background-position:left -31.25% top 0%}50%{background-size:800% 100%;background-position:left -49% top 0%}to{background-size:400% 100%;background-position:left -102% top 0%}}@media screen and (max-width:767px){.eui-21 :host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-s-xs)}}\n"], dependencies: [{ kind: "component", type: i2.EuiIconStateComponent, selector: "eui-icon-state", inputs: ["size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiProgressBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON,
                        ...EUI_ICON_STATE,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiSize2XS',
                                'euiSizeXS',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiVariant',
                                'euiSizeVariant',
                            ],
                        },
                    ], template: "@if(label || hasStatusIcon) {\n    <div class=\"eui-progress-bar__header\">\n        @if(label) {\n            <div class=\"eui-progress-bar__header-label\">{{ label }}</div>\n        }\n        @if(hasStatusIcon) {\n            <div class=\"eui-progress-bar__header-status\">\n                <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\"/>\n            </div>\n        }\n    </div>\n}\n<div class=\"eui-progress-bar__indicator-container\">\n    <div class=\"eui-progress-bar__indicator\" [style.width]=\"!isIndeterminate ? progress + '%' : null\"></div>\n</div>\n", styles: [".eui-21 :host.eui-progress-bar{align-items:center;display:flex;flex-direction:column;position:relative}.eui-21 :host.eui-progress-bar .eui-progress-bar__header{align-items:center;display:flex;justify-content:space-between;height:var(--eui-s-l);margin-bottom:var(--eui-s-s);width:100%}.eui-21 :host.eui-progress-bar .eui-progress-bar__header-label{display:flex;justify-content:flex-start;font:var(--eui-f-m-semi-bold)}.eui-21 :host.eui-progress-bar .eui-progress-bar__header-status{display:flex;justify-content:flex-end}.eui-21 :host.eui-progress-bar .eui-progress-bar__indicator-container{margin-bottom:var(--eui-s-3xs);background-color:var(--eui-c-surface-container-3);height:var(--eui-s-3xs);position:relative;width:100%}.eui-21 :host.eui-progress-bar .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-primary-surface);height:100%;transition:width .25s ease}.eui-21 :host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-s-3xs)}.eui-21 :host.eui-progress-bar--size-xs .eui-progress-bar__indicator-container{height:var(--eui-s-xs)}.eui-21 :host.eui-progress-bar--size-s .eui-progress-bar__indicator-container{height:var(--eui-s-s)}.eui-21 :host.eui-progress-bar--size-m .eui-progress-bar__indicator-container{height:var(--eui-s-m)}.eui-21 :host.eui-progress-bar--size-l .eui-progress-bar__indicator-container{height:var(--eui-s-l)}.eui-21 :host.eui-progress-bar--size-xl .eui-progress-bar__indicator-container{height:var(--eui-s-xl)}.eui-21 :host.eui-progress-bar--secondary .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-secondary-surface)}.eui-21 :host.eui-progress-bar--success .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-success-surface)}.eui-21 :host.eui-progress-bar--info .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-info-surface)}.eui-21 :host.eui-progress-bar--warning .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-warning-surface)}.eui-21 :host.eui-progress-bar--danger .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-c-danger-surface)}.eui-21 :host.eui-progress-bar--indeterminate .eui-progress-bar__indicator-container .eui-progress-bar__indicator{animation:progress-linear-indeterminate 2s infinite linear;background-color:var(--eui-c-surface-container-3);background-size:200% 100%;background-image:linear-gradient(to right,transparent 50%,var(--eui-c-primary) 50%,var(--eui-c-primary) 60%,transparent 60%,transparent 71.5%,var(--eui-c-primary) 71.5%,var(--eui-c-primary) 84%,transparent 84%);transition:all .2s}@keyframes progress-linear-indeterminate{0%{background-size:200% 100%;background-position:left -31.25% top 0%}50%{background-size:800% 100%;background-position:left -49% top 0%}to{background-size:400% 100%;background-position:left -102% top 0%}}@media screen and (max-width:767px){.eui-21 :host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-s-xs)}}\n"] }]
        }], propDecorators: { e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], label: [{
                type: Input
            }], progress: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], isIndeterminate: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasStatusIcon: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

const EUI_PROGRESS_BAR = [
    EuiProgressBarComponent,
];
// export { EuiProgressBarComponent as EuiProgressBar } from './eui-progress-bar.component';

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_PROGRESS_BAR, EuiProgressBarComponent };
//# sourceMappingURL=eui-components-eui-progress-bar.mjs.map
