import { MXColorComponent, AXComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { viewChild, input, model, afterNextRender, effect, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';

/**
 * Displays the progress of an operation in a circular form. Supports determinate and indeterminate modes,
 * configurable size and stroke, and color theming.
 *
 * @category Components
 */
class AXCircularProgressComponent extends MXColorComponent {
    /**
     *  @ignore
     */
    constructor() {
        super();
        /**
         *  @ignore
         */
        this.circle = viewChild('circle', ...(ngDevMode ? [{ debugName: "circle" }] : []));
        /**
         * Defines the progress calculation mode.
         * Use 'determinate' to show a specific percentage or 'indeterminate' for ongoing/spinner state.
         */
        this.mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
        /**
         * The percentage value to set for the progress (0–100).
         */
        this.progress = model(...(ngDevMode ? [undefined, { debugName: "progress" }] : []));
        /**
         * Stroke width of the circular track, in pixels.
         */
        this.stroke = model(...(ngDevMode ? [undefined, { debugName: "stroke" }] : []));
        /**
         * Overall diameter of the circular progress, in pixels.
         */
        this.size = model(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
        afterNextRender(() => {
            this.setCircularSize();
            this.updateProgress();
        });
        effect(() => {
            this.setCircularSize();
            this.updateProgress();
        });
    }
    /**
     *  @ignore
     */
    get __hostClass() {
        return `ax-${this['color']}`;
    }
    /**
     * Sets the CSS custom properties to reflect the current `size` and `stroke` values.
     *
     * Updates `--ax-comp-circular-progress-circle-size` and `--ax-comp-circular-progress-stroke-size` on the circle.
     *
     * @returns void - Styles are applied to the circle element when available.
     */
    setCircularSize() {
        if (this.circle()) {
            this.circle().nativeElement.style.setProperty('--ax-comp-circular-progress-stroke-size', `${this.size() - this.stroke()}px`);
            this.circle().nativeElement.style.setProperty('--ax-comp-circular-progress-circle-size', `${this.size()}px`);
        }
    }
    /**
     * Recalculates and applies the progress arc background based on the current `progress` value.
     *
     * Uses a conic-gradient with `--ax-comp-progress-circular-color` and `--ax-comp-progress-circular-line-color`.
     * The expected range for `progress` is 0–100.
     *
     * @returns void - Styles are applied to the circle element when available.
     */
    updateProgress() {
        if (this.circle()) {
            this.circle().nativeElement.style.background = `conic-gradient(var(--ax-comp-progress-circular-color) ${this.progress() * 3.6}deg, var(--ax-comp-progress-circular-line-color) 0deg)`;
        }
    }
    /**
     * Applies a default visual state for the indeterminate mode when no explicit `progress` is set.
     *
     * If `mode` is 'indeterminate' and `progress` is not set, it sets `progress` to 65 to render a visible arc.
     *
     * @returns void
     */
    setIndeterminateMode() {
        if (this.mode() === 'indeterminate' && !this.progress()) {
            this.progress.set(65);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: AXCircularProgressComponent, isStandalone: true, selector: "ax-circular-progress", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { progress: "progressChange", stroke: "strokeChange", size: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXCircularProgressComponent }], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{ mode() }}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-circular-progress{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-primary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-secondary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-secondary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-secondary-surface), .25)}ax-circular-progress.ax-success .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-success-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-success-surface), .25)}ax-circular-progress.ax-warning .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-warning-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-warning-surface), .25)}ax-circular-progress.ax-danger .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-danger-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-danger-surface), .25)}ax-circular-progress.ax-accent1 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent1-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent1-surface), .25)}ax-circular-progress.ax-accent2 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent2-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent2-surface), .25)}ax-circular-progress.ax-accent3 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent3-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent3-surface), .25)}ax-circular-progress.ax-accent4 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent4-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent4-surface), .25)}ax-circular-progress.ax-accent5 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent5-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent5-surface), .25)}ax-circular-progress.ax-accent6 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent6-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent6-surface), .25)}ax-circular-progress.ax-accent7 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent7-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent7-surface), .25)}.ax-dark ax-circular-progress{--ax-comp-progress-circular-inside-bg-color: var(--ax-sys-color-darkest-surface)}ax-circular-progress .ax-progress-circular{width:var(--ax-comp-circular-progress-circle-size, 48px);height:var(--ax-comp-circular-progress-circle-size, 48px);border-radius:9999px;background:conic-gradient(var(--ax-comp-progress-circular-color) 0deg,var(--ax-comp-progress-circular-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular:before{content:\"\";position:absolute;border-radius:9999px;width:var(--ax-comp-circular-progress-stroke-size, 44px);height:var(--ax-comp-circular-progress-stroke-size, 44px);background-color:rgba(var(--ax-comp-progress-circular-inside-bg-color, var(--ax-sys-color-lightest-surface)))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular.ax-progress-indeterminate{animation-name:rotate;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:var(--ax-comp-circular-progress-animation-duration, 1.5s)}@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCircularProgressComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-circular-progress', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXCircularProgressComponent }], template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{ mode() }}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>\n", styles: ["ax-circular-progress{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-primary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-secondary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-secondary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-secondary-surface), .25)}ax-circular-progress.ax-success .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-success-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-success-surface), .25)}ax-circular-progress.ax-warning .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-warning-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-warning-surface), .25)}ax-circular-progress.ax-danger .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-danger-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-danger-surface), .25)}ax-circular-progress.ax-accent1 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent1-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent1-surface), .25)}ax-circular-progress.ax-accent2 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent2-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent2-surface), .25)}ax-circular-progress.ax-accent3 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent3-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent3-surface), .25)}ax-circular-progress.ax-accent4 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent4-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent4-surface), .25)}ax-circular-progress.ax-accent5 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent5-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent5-surface), .25)}ax-circular-progress.ax-accent6 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent6-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent6-surface), .25)}ax-circular-progress.ax-accent7 .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-accent7-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-accent7-surface), .25)}.ax-dark ax-circular-progress{--ax-comp-progress-circular-inside-bg-color: var(--ax-sys-color-darkest-surface)}ax-circular-progress .ax-progress-circular{width:var(--ax-comp-circular-progress-circle-size, 48px);height:var(--ax-comp-circular-progress-circle-size, 48px);border-radius:9999px;background:conic-gradient(var(--ax-comp-progress-circular-color) 0deg,var(--ax-comp-progress-circular-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular:before{content:\"\";position:absolute;border-radius:9999px;width:var(--ax-comp-circular-progress-stroke-size, 44px);height:var(--ax-comp-circular-progress-stroke-size, 44px);background-color:rgba(var(--ax-comp-progress-circular-inside-bg-color, var(--ax-sys-color-lightest-surface)))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular.ax-progress-indeterminate{animation-name:rotate;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:var(--ax-comp-circular-progress-animation-duration, 1.5s)}@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:rotate(360deg)}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { circle: [{ type: i0.ViewChild, args: ['circle', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }, { type: i0.Output, args: ["progressChange"] }], stroke: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroke", required: false }] }, { type: i0.Output, args: ["strokeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

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

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

export { AXCircularProgressComponent, AXCircularProgressModule };
//# sourceMappingURL=acorex-components-circular-progress.mjs.map
