import { Component, Input, ViewEncapsulation } from '@angular/core';
import { LoadingStateIndicators } from './components/loading-state-indicators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./components/dots-indicator/dots-indicator.components";
import * as i3 from "./components/logo-indicator/logo-indicator.component";
import * as i4 from "./components/progress-bar-indicator/progress-bar-indicator.component";
/**
 * @description Componente de estado de carregamento que exibe um indicador animado enquanto
 * um processo assíncrono está em andamento. Suporta bloqueio da janela inteira
 * e diferentes tipos de indicadores visuais.
 * Também pode ser usado como diretiva estrutural `[sLoadingState]`.
 *
 * @example
 * ```html
 * <s-loading-state [loading]="isLoading" [blockWindow]="true">
 *   <p>Conteúdo carregado!</p>
 * </s-loading-state>
 * ```
 *
 * @category Feedback
 */
export class LoadingStateComponent {
    static nextId = 0;
    /**
     * @description Tipo de indicador visual exibido durante o carregamento.
     * - `LoadingStateIndicators.Dots`: indicador de pontos animados (padrão).
     * - `LoadingStateIndicators.Logo`: indicador com logotipo animado.
     *
     * @default LoadingStateIndicators.Dots
     */
    indicator = LoadingStateIndicators.Dots;
    /**
     * @description Identificador único do componente. Gerado automaticamente se não informado.
     */
    id = `s-loading-state-${LoadingStateComponent.nextId++}`;
    /**
     * @description Quando `true`, bloqueia a janela inteira durante o carregamento,
     * sobrepondo todo o conteúdo da página com o indicador.
     *
     * @default false
     */
    blockWindow = false;
    /**
     * @description Controla o estado de carregamento do componente. Campo obrigatório.
     * Quando `true`, exibe o indicador de carregamento após um breve delay.
     * Quando `false`, remove o indicador após um breve delay (evita flash).
     */
    set loading(loading) {
        this._loading = loading;
        loading ? this.block() : this.unblock();
    }
    get loading() {
        return this._loading;
    }
    /**
     * @description Modo da barra de progresso. Usado quando `indicator` é `LoadingStateIndicators.ProgressBar`.
     * - `'percentage'`: exibe o preenchimento proporcional ao `progressBarValue`.
     * - `'intermittent'`: anima a barra indo e voltando.
     *
     * @default 'intermittent'
     */
    progressBarMode = 'intermittent';
    /**
     * @description Valor de progresso (0–100). Usado quando `indicator` é `LoadingStateIndicators.ProgressBar`
     * e `progressBarMode` é `'percentage'`.
     *
     * @default 0
     */
    progressBarValue = 0;
    /**
     * @description Texto exibido abaixo da barra de progresso.
     * Quando omitido, usa `'{value}%'` no modo `'percentage'` ou `'Carregando...'` no modo `'intermittent'`.
     */
    progressBarLabel;
    contents = null;
    blocking = false;
    _loading = false;
    BLOCK_TIMEOUT_VALUE = 300;
    UNBLOCK_TIMEOUT_VALUE = 200;
    blockTimeoutId;
    unblockTimeoutId;
    ngOnDestroy() {
        if (this.blockTimeoutId) {
            clearTimeout(this.blockTimeoutId);
        }
        if (this.unblockTimeoutId) {
            clearTimeout(this.unblockTimeoutId);
        }
    }
    block() {
        if (this.unblockTimeoutId) {
            clearTimeout(this.unblockTimeoutId);
            this.unblockTimeoutId = undefined;
        }
        if (!this.blockTimeoutId) {
            this.blockTimeoutId = setTimeout(() => {
                this.blocking = true;
                this.blockTimeoutId = undefined;
            }, this.BLOCK_TIMEOUT_VALUE);
        }
    }
    unblock() {
        if (this.blockTimeoutId) {
            clearTimeout(this.blockTimeoutId);
            this.blockTimeoutId = undefined;
        }
        if (!this.unblockTimeoutId) {
            this.unblockTimeoutId = setTimeout(() => {
                this.blocking = false;
                this.unblockTimeoutId = undefined;
            }, this.UNBLOCK_TIMEOUT_VALUE);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoadingStateComponent, selector: "s-loading-state", inputs: { indicator: "indicator", id: "id", blockWindow: "blockWindow", loading: "loading", progressBarMode: "progressBarMode", progressBarValue: "progressBarValue", progressBarLabel: "progressBarLabel" }, ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"s-loading-state\"\n    [ngClass]=\"{\n        's-loading-state--loading': loading,\n        's-loading-state--blocking': blocking,\n        's-loading-state--fullscreen': blockWindow\n    }\"\n>\n    <div\n        [id]=\"id + '-loader'\"\n        class=\"loader\"\n    >\n        @if (indicator === 'progress-bar') {\n            <div class=\"progress-bar-wrapper\">\n                <s-progress-bar-indicator\n                    [mode]=\"progressBarMode\"\n                    [value]=\"progressBarValue\"\n                    [label]=\"progressBarLabel\"\n                ></s-progress-bar-indicator>\n            </div>\n        } @else {\n            <div\n                [id]=\"id + '-spinner'\"\n                class=\"spinner\"\n            >\n                @switch (indicator) {\n                    @case ('logo') {\n                        <s-logo-indicator></s-logo-indicator>\n                    }\n                    @case ('dots') {\n                        <s-dots-indicator></s-dots-indicator>\n                    }\n                }\n            </div>\n        }\n        <div\n            [id]=\"id + '-overlay'\"\n            class=\"overlay\"\n        ></div>\n    </div>\n    <div\n        [id]=\"id + '-contents'\"\n        class=\"state-contents\"\n    >\n        <ng-container *ngTemplateOutlet=\"contents || originalContent\"></ng-container>\n        <ng-template #originalContent>\n            <ng-content></ng-content>\n        </ng-template>\n    </div>\n</div>\n", styles: ["s-loading-state .s-loading-state{position:relative}s-loading-state .s-loading-state .loader{opacity:0;position:absolute;transition:opacity .2s ease-out,display .2s ease-out;visibility:hidden;inset:1px;display:flex;justify-content:center;align-items:center}s-loading-state .s-loading-state .loader .overlay{height:100%;opacity:.8;transition:opacity .2s ease-out,display .2s ease-out;width:100%}s-loading-state .s-loading-state .loader .spinner{display:flex;position:absolute;z-index:2}s-loading-state .s-loading-state .loader .progress-bar-wrapper{padding:0 16px;position:absolute;width:100%;z-index:2}s-loading-state .s-loading-state.s-loading-state--loading>.loader,s-loading-state .s-loading-state.s-loading-state--blocking>.loader{cursor:wait;visibility:visible;z-index:2}s-loading-state .s-loading-state.s-loading-state--loading>.loader>.overlay,s-loading-state .s-loading-state.s-loading-state--blocking>.loader>.overlay{cursor:wait;z-index:1}s-loading-state .s-loading-state.s-loading-state--loading>.state-contents,s-loading-state .s-loading-state.s-loading-state--blocking>.state-contents{position:relative;z-index:0!important;opacity:.5}s-loading-state .s-loading-state.s-loading-state--fullscreen>.loader{left:0;position:fixed;top:0;z-index:1005}s-loading-state .s-loading-state.s-loading-state--blocking.s-loading-state--loading>.loader{opacity:1}s-loading-state .s-loading-state-container.s-loading-state--loading.s-loading-state--blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}s-loading-state .s-loading-state-container.s-loading-state--loading.s-loading-state--blocking s-loading-state .s-loading-state-container>.state-contents{z-index:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DotsIndicatorComponent, selector: "s-dots-indicator" }, { kind: "component", type: i3.LoadingIndicatorComponent, selector: "s-logo-indicator" }, { kind: "component", type: i4.ProgressBarIndicatorComponent, selector: "s-progress-bar-indicator", inputs: ["mode", "value", "label"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-loading-state', encapsulation: ViewEncapsulation.None, template: "<div\n    [id]=\"id\"\n    class=\"s-loading-state\"\n    [ngClass]=\"{\n        's-loading-state--loading': loading,\n        's-loading-state--blocking': blocking,\n        's-loading-state--fullscreen': blockWindow\n    }\"\n>\n    <div\n        [id]=\"id + '-loader'\"\n        class=\"loader\"\n    >\n        @if (indicator === 'progress-bar') {\n            <div class=\"progress-bar-wrapper\">\n                <s-progress-bar-indicator\n                    [mode]=\"progressBarMode\"\n                    [value]=\"progressBarValue\"\n                    [label]=\"progressBarLabel\"\n                ></s-progress-bar-indicator>\n            </div>\n        } @else {\n            <div\n                [id]=\"id + '-spinner'\"\n                class=\"spinner\"\n            >\n                @switch (indicator) {\n                    @case ('logo') {\n                        <s-logo-indicator></s-logo-indicator>\n                    }\n                    @case ('dots') {\n                        <s-dots-indicator></s-dots-indicator>\n                    }\n                }\n            </div>\n        }\n        <div\n            [id]=\"id + '-overlay'\"\n            class=\"overlay\"\n        ></div>\n    </div>\n    <div\n        [id]=\"id + '-contents'\"\n        class=\"state-contents\"\n    >\n        <ng-container *ngTemplateOutlet=\"contents || originalContent\"></ng-container>\n        <ng-template #originalContent>\n            <ng-content></ng-content>\n        </ng-template>\n    </div>\n</div>\n", styles: ["s-loading-state .s-loading-state{position:relative}s-loading-state .s-loading-state .loader{opacity:0;position:absolute;transition:opacity .2s ease-out,display .2s ease-out;visibility:hidden;inset:1px;display:flex;justify-content:center;align-items:center}s-loading-state .s-loading-state .loader .overlay{height:100%;opacity:.8;transition:opacity .2s ease-out,display .2s ease-out;width:100%}s-loading-state .s-loading-state .loader .spinner{display:flex;position:absolute;z-index:2}s-loading-state .s-loading-state .loader .progress-bar-wrapper{padding:0 16px;position:absolute;width:100%;z-index:2}s-loading-state .s-loading-state.s-loading-state--loading>.loader,s-loading-state .s-loading-state.s-loading-state--blocking>.loader{cursor:wait;visibility:visible;z-index:2}s-loading-state .s-loading-state.s-loading-state--loading>.loader>.overlay,s-loading-state .s-loading-state.s-loading-state--blocking>.loader>.overlay{cursor:wait;z-index:1}s-loading-state .s-loading-state.s-loading-state--loading>.state-contents,s-loading-state .s-loading-state.s-loading-state--blocking>.state-contents{position:relative;z-index:0!important;opacity:.5}s-loading-state .s-loading-state.s-loading-state--fullscreen>.loader{left:0;position:fixed;top:0;z-index:1005}s-loading-state .s-loading-state.s-loading-state--blocking.s-loading-state--loading>.loader{opacity:1}s-loading-state .s-loading-state-container.s-loading-state--loading.s-loading-state--blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}s-loading-state .s-loading-state-container.s-loading-state--loading.s-loading-state--blocking s-loading-state .s-loading-state-container>.state-contents{z-index:0!important}\n"] }]
        }], propDecorators: { indicator: [{
                type: Input
            }], id: [{
                type: Input
            }], blockWindow: [{
                type: Input
            }], loading: [{
                type: Input,
                args: [{ required: true }]
            }], progressBarMode: [{
                type: Input
            }], progressBarValue: [{
                type: Input
            }], progressBarLabel: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 