import { Component, Input } 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";
export class LoadingStateComponent {
    static nextId = 0;
    indicator = LoadingStateIndicators.Dots;
    id = `s-loading-state-${LoadingStateComponent.nextId++}`;
    blockWindow = false;
    set loading(loading) {
        this._loading = loading;
        loading ? this.block() : this.unblock();
    }
    get loading() {
        return this._loading;
    }
    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" }, 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        <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        <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{position:relative}.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 .loader .overlay{background-color:#fff;height:100%;opacity:.8;transition:opacity .2s ease-out,display .2s ease-out;width:100%}.s-loading-state .loader .spinner{display:flex;position:absolute;z-index:2}.s-loading-state.s-loading-state--loading>.loader,.s-loading-state.s-loading-state--blocking>.loader{visibility:visible}.s-loading-state.s-loading-state--loading>.loader,.s-loading-state.s-loading-state--loading>.loader>.overlay,.s-loading-state.s-loading-state--blocking>.loader,.s-loading-state.s-loading-state--blocking>.loader>.overlay{cursor:wait;z-index:1}.s-loading-state.s-loading-state--loading>.state-contents,.s-loading-state.s-loading-state--blocking>.state-contents{z-index:0!important}.s-loading-state.s-loading-state--blocking.s-loading-state--loading>.loader{opacity:1}.s-loading-state.s-loading-state--fullscreen>.loader{left:0;position:fixed;top:0;z-index:1005}::ng-deep .s-loading-state-container.s-loading-state--loading.s-loading-state--blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}::ng-deep .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" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-loading-state', 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        <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        <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{position:relative}.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 .loader .overlay{background-color:#fff;height:100%;opacity:.8;transition:opacity .2s ease-out,display .2s ease-out;width:100%}.s-loading-state .loader .spinner{display:flex;position:absolute;z-index:2}.s-loading-state.s-loading-state--loading>.loader,.s-loading-state.s-loading-state--blocking>.loader{visibility:visible}.s-loading-state.s-loading-state--loading>.loader,.s-loading-state.s-loading-state--loading>.loader>.overlay,.s-loading-state.s-loading-state--blocking>.loader,.s-loading-state.s-loading-state--blocking>.loader>.overlay{cursor:wait;z-index:1}.s-loading-state.s-loading-state--loading>.state-contents,.s-loading-state.s-loading-state--blocking>.state-contents{z-index:0!important}.s-loading-state.s-loading-state--blocking.s-loading-state--loading>.loader{opacity:1}.s-loading-state.s-loading-state--fullscreen>.loader{left:0;position:fixed;top:0;z-index:1005}::ng-deep .s-loading-state-container.s-loading-state--loading.s-loading-state--blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}::ng-deep .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 }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 