import { MXBaseComponent, AXComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { Router, NavigationError, NavigationCancel, NavigationEnd, NavigationStart } from '@angular/router';
import { interval, delay } from 'rxjs';
import { CommonModule } from '@angular/common';

/**
 * Shows routing progress with visual feedback during navigation.
 *
 * @category
 */
class AXRoutingProgressComponent extends MXBaseComponent {
    /** @ignore */
    constructor() {
        super();
        this.router = inject(Router);
        /**
         * Indicates whether loading is in progress.
         * @defaultValue false
         */
        this.loading = false;
        /**
         * Specifies the width of the component.
         * @defaultValue 0
         */
        this.width = 0;
        this.router.events.subscribe((event) => {
            this.width = 0;
            switch (true) {
                case event instanceof NavigationStart: {
                    this.loading = true;
                    this.subscription = interval(50)
                        .pipe(delay(300))
                        .subscribe(() => {
                        this.width += this.width > 70 ? 1 : 7;
                        if (this.width >= 100) {
                            this.width = 100;
                            this.subscription.unsubscribe();
                        }
                        this.cdr.markForCheck();
                    });
                    break;
                }
                case event instanceof NavigationEnd:
                case event instanceof NavigationCancel:
                case event instanceof NavigationError: {
                    this.subscription?.unsubscribe();
                    setTimeout(() => {
                        this.width = 100;
                        this.loading = false;
                        this.cdr.markForCheck();
                    }, 500);
                    break;
                }
                default: {
                    break;
                }
            }
        });
    }
    /** @ignore */
    ngOnDestroy() {
        this.subscription?.unsubscribe();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRoutingProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXRoutingProgressComponent, isStandalone: true, selector: "ax-routing-progress", providers: [{ provide: AXComponent, useExisting: AXRoutingProgressComponent }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\n  <div [style.width.%]=\"width\"></div>\n}\n", styles: ["ax-routing-progress{position:fixed;inset-inline-start:0px;top:0;z-index:100;display:block;height:.25rem;width:100%}ax-routing-progress>div{transition:width .3s ease-out,opacity .15s .15s ease-in;transform:translateZ(0);height:100%;background-color:rgba(var(--ax-sys-color-primary-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRoutingProgressComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-routing-progress', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXRoutingProgressComponent }], template: "@if (loading) {\n  <div [style.width.%]=\"width\"></div>\n}\n", styles: ["ax-routing-progress{position:fixed;inset-inline-start:0px;top:0;z-index:100;display:block;height:.25rem;width:100%}ax-routing-progress>div{transition:width .3s ease-out,opacity .15s .15s ease-in;transform:translateZ(0);height:100%;background-color:rgba(var(--ax-sys-color-primary-surface))}\n"] }]
        }], ctorParameters: () => [] });

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

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

export { AXRoutingProgressComponent, AXRoutingProgressModule };
//# sourceMappingURL=acorex-components-routing-progress.mjs.map
