import { MXColorComponent, AXComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

class AXProgressBarComponent extends MXColorComponent {
    constructor() {
        super(...arguments);
        /**
         * @event
         * Emits when the slider value changes.
         */
        this.ValueChange = new EventEmitter();
        /** @ignore */
        this._progress = 0;
        /**
         * Specifies the progress indicator mode.
         */
        this.mode = 'determinate';
        /**
         * Emitted when the size changes.
         * @event
         */
        this.sizeChange = new EventEmitter();
        /** @ignore */
        this._height = 8;
    }
    /**
     * Gets or sets the progress value (0-100).
     */
    get progress() {
        return this._progress;
    }
    /**
     * Sets the progress value (0-100).
     * @param {number} v
     */
    set progress(v) {
        this.setOption({
            name: 'progress',
            value: v,
        });
    }
    /**
     * Gets or sets the height of the component.
     * @param {number} v
     */
    get height() {
        return this._height;
    }
    /**
     * Sets the height of the component.
     * @param {number} v
     */
    set height(v) {
        this.setOption({
            name: 'height',
            value: v,
        });
    }
    /** @ignore */
    get __hostClass() {
        return `ax-${this['color']}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXProgressBarComponent, isStandalone: true, selector: "ax-progress-bar", inputs: { color: "color", mode: "mode", progress: "progress", height: "height" }, outputs: { ValueChange: "ValueChange", sizeChange: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXProgressBarComponent }], viewQueries: [{ propertyName: "circle", first: true, predicate: ["c"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n  @case ('indeterminate') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n    </div>\n  }\n  @case ('query') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-query-progress\"></div>\n    </div>\n  }\n  @case ('buffer') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n    </div>\n  }\n  @default {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n    </div>\n  }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-dark);--ax-comp-progress-bar-backdrop-bg-color-opacity: .2}ax-progress-bar.ax-primary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar.ax-secondary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-secondary-surface)}ax-progress-bar.ax-success{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-success-surface)}ax-progress-bar.ax-warning{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-warning-surface)}ax-progress-bar.ax-danger{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-danger-surface)}ax-progress-bar.ax-accent1{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent1-surface)}ax-progress-bar.ax-accent2{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent2-surface)}ax-progress-bar.ax-accent3{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent3-surface)}ax-progress-bar.ax-accent4{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent4-surface)}ax-progress-bar.ax-accent5{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent5-surface)}ax-progress-bar.ax-accent6{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent6-surface)}ax-progress-bar.ax-accent7{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent7-surface)}.ax-dark ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-light)}html[dir=rtl] ax-progress-bar{direction:rtl}ax-progress-bar{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;position:relative}ax-progress-bar .ax-progress{width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-progress-bar-backdrop-bg-color),var(--ax-comp-progress-bar-backdrop-bg-color-opacity));border-radius:var(--ax-sys-border-radius)}ax-progress-bar .ax-progress .ax-progress-bar{height:100%;background-color:rgba(var(--ax-comp-progress-bar-bg-color));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);border-style:solid}ax-progress-bar .ax-indeterminate-progress{animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}ax-progress-bar .ax-query-progress{animation:queryAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes queryAnimation{0%{transform:translate(100%) scaleX(0)}40%{transform:translate(0) scaleX(.7)}to{transform:translate(-50%) scaleX(.5)}}ax-progress-bar .ax-buffer-progress{animation:bufferAnimation 5s infinite linear;transform-origin:0% 50%;width:100%;height:100%;background-color:transparent!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) 1rem)!important;background-size:100%}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXProgressBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-progress-bar', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXProgressBarComponent }], template: "<ng-content select=\"ax-prefix\"></ng-content>\n@switch (mode) {\n  @case ('indeterminate') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-indeterminate-progress\"></div>\n    </div>\n  }\n  @case ('query') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-query-progress\"></div>\n    </div>\n  }\n  @case ('buffer') {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar ax-buffer-progress\"></div>\n    </div>\n  }\n  @default {\n    <div class=\"ax-progress\" [style.height.px]=\"height\" role=\"progressbar\">\n      <div class=\"ax-progress-bar\" [style.width.%]=\"progress\"></div>\n    </div>\n  }\n}\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-progress-bar.ax-default{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-dark);--ax-comp-progress-bar-backdrop-bg-color-opacity: .2}ax-progress-bar.ax-primary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-primary-surface)}ax-progress-bar.ax-secondary{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-secondary-surface)}ax-progress-bar.ax-success{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-success-surface)}ax-progress-bar.ax-warning{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-warning-surface)}ax-progress-bar.ax-danger{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-danger-surface)}ax-progress-bar.ax-accent1{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent1-surface)}ax-progress-bar.ax-accent2{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent2-surface)}ax-progress-bar.ax-accent3{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent3-surface)}ax-progress-bar.ax-accent4{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent4-surface)}ax-progress-bar.ax-accent5{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent5-surface)}ax-progress-bar.ax-accent6{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent6-surface)}ax-progress-bar.ax-accent7{--ax-comp-progress-bar-bg-color: var(--ax-sys-color-accent7-surface)}.ax-dark ax-progress-bar{--ax-comp-progress-bar-backdrop-bg-color: var(--ax-sys-color-light)}html[dir=rtl] ax-progress-bar{direction:rtl}ax-progress-bar{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;position:relative}ax-progress-bar .ax-progress{width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-progress-bar-backdrop-bg-color),var(--ax-comp-progress-bar-backdrop-bg-color-opacity));border-radius:var(--ax-sys-border-radius)}ax-progress-bar .ax-progress .ax-progress-bar{height:100%;background-color:rgba(var(--ax-comp-progress-bar-bg-color));transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);border-style:solid}ax-progress-bar .ax-indeterminate-progress{animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}ax-progress-bar .ax-query-progress{animation:queryAnimation 1s infinite linear;transform-origin:0% 50%;width:100%;height:100%}@keyframes queryAnimation{0%{transform:translate(100%) scaleX(0)}40%{transform:translate(0) scaleX(.7)}to{transform:translate(-50%) scaleX(.5)}}ax-progress-bar .ax-buffer-progress{animation:bufferAnimation 5s infinite linear;transform-origin:0% 50%;width:100%;height:100%;background-color:transparent!important;background-image:repeating-linear-gradient(to right,transparent,transparent .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) .5rem,rgba(var(--ax-comp-progress-bar-bg-color)) 1rem)!important;background-size:100%}@keyframes bufferAnimation{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
        }], propDecorators: { circle: [{
                type: ViewChild,
                args: ['c']
            }], ValueChange: [{
                type: Output
            }], mode: [{
                type: Input
            }], progress: [{
                type: Input
            }], sizeChange: [{
                type: Output
            }], height: [{
                type: Input
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AXProgressBarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXProgressBarModule, imports: [CommonModule, AXProgressBarComponent], exports: [AXProgressBarComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXProgressBarModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXProgressBarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, AXProgressBarComponent],
                    exports: [AXProgressBarComponent],
                    providers: [],
                }]
        }] });

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

export { AXProgressBarComponent, AXProgressBarModule };
//# sourceMappingURL=acorex-components-progress-bar.mjs.map
