import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@seniorsistemas/angular-components/common';
import { SVGFactoryModule } from '@seniorsistemas/angular-components/common';

class DotsIndicatorComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DotsIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DotsIndicatorComponent, selector: "s-dots-indicator", ngImport: i0, template: "<div class=\"dots-indicator\">\n    <div class=\"bounce bounce--1\"></div>\n    <div class=\"bounce bounce--2\"></div>\n    <div class=\"bounce bounce--3\"></div>\n</div>\n", styles: [".dots-indicator .bounce{animation:bounce 1.2s infinite ease-out;background-color:#333;border-radius:100%;display:inline-block;height:10px;width:10px}.dots-indicator .bounce+.bounce{margin-left:15px}.dots-indicator .bounce.bounce--1{animation-delay:0ms}.dots-indicator .bounce.bounce--2{animation-delay:.1s}.dots-indicator .bounce.bounce--3{animation-delay:.2s}@keyframes bounce{80%{transform:scale(1)}90%{transform:scale(1.8)}to{transform:scale(1)}}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DotsIndicatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-dots-indicator', template: "<div class=\"dots-indicator\">\n    <div class=\"bounce bounce--1\"></div>\n    <div class=\"bounce bounce--2\"></div>\n    <div class=\"bounce bounce--3\"></div>\n</div>\n", styles: [".dots-indicator .bounce{animation:bounce 1.2s infinite ease-out;background-color:#333;border-radius:100%;display:inline-block;height:10px;width:10px}.dots-indicator .bounce+.bounce{margin-left:15px}.dots-indicator .bounce.bounce--1{animation-delay:0ms}.dots-indicator .bounce.bounce--2{animation-delay:.1s}.dots-indicator .bounce.bounce--3{animation-delay:.2s}@keyframes bounce{80%{transform:scale(1)}90%{transform:scale(1.8)}to{transform:scale(1)}}\n"] }]
        }] });

class LoadingIndicatorComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LoadingIndicatorComponent, selector: "s-logo-indicator", ngImport: i0, template: "<div class=\"logo-indicator\">\n    <span *sSVGFactory=\"'senior'\"></span>\n</div>\n", styles: [".logo-indicator{animation:pulsar 1s infinite,scale 1s infinite;background-color:#00c89a;border-radius:50%;box-shadow:0 0 #00c89ab3;height:64px;padding:10.24px;position:relative;width:64px}@keyframes pulsar{0%{box-shadow:0 0 #00c89ab3}70%{box-shadow:0 0 0 40px #00c89a00}to{box-shadow:0 0 #00c89a00}}@keyframes scale{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}\n"], dependencies: [{ kind: "directive", type: i1.SVGFactoryDirective, selector: "[sSVGFactory]", inputs: ["sSVGFactory"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-logo-indicator', template: "<div class=\"logo-indicator\">\n    <span *sSVGFactory=\"'senior'\"></span>\n</div>\n", styles: [".logo-indicator{animation:pulsar 1s infinite,scale 1s infinite;background-color:#00c89a;border-radius:50%;box-shadow:0 0 #00c89ab3;height:64px;padding:10.24px;position:relative;width:64px}@keyframes pulsar{0%{box-shadow:0 0 #00c89ab3}70%{box-shadow:0 0 0 40px #00c89a00}to{box-shadow:0 0 #00c89a00}}@keyframes scale{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}\n"] }]
        }] });

var LoadingStateIndicators;
(function (LoadingStateIndicators) {
    LoadingStateIndicators["Dots"] = "dots";
    LoadingStateIndicators["Logo"] = "logo";
})(LoadingStateIndicators || (LoadingStateIndicators = {}));

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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DotsIndicatorComponent, selector: "s-dots-indicator" }, { kind: "component", type: 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 }]
            }] } });

class LoadingStateDirective {
    target;
    template;
    componentFactoryResolver;
    cdr;
    set sLoadingState(value) {
        if (typeof value === 'boolean') {
            this._loading = value;
            this.indicator = LoadingStateIndicators.Dots;
        }
        else if (typeof value === 'object') {
            this._loading = value.loading;
            this.indicator = value.indicator ?? LoadingStateIndicators.Dots;
        }
        if (this.loaderComponent) {
            this.loaderComponent.instance.loading = this._loading;
            this.loaderComponent.instance.indicator = this.indicator;
        }
    }
    _loading = false;
    indicator = LoadingStateIndicators.Dots;
    loaderComponent = null;
    constructor(target, template, 
    // NOSONAR - 'ComponentFactoryResolver' is deprecated.
    componentFactoryResolver, cdr) {
        this.target = target;
        this.template = template;
        this.componentFactoryResolver = componentFactoryResolver;
        this.cdr = cdr;
    }
    ngAfterViewInit() {
        this.createComponent();
    }
    createComponent() {
        const factory = this.componentFactoryResolver.resolveComponentFactory(LoadingStateComponent);
        this.loaderComponent = this.target.createComponent(factory);
        this.loaderComponent.instance.contents = this.template;
        this.loaderComponent.instance.loading = this._loading;
        this.loaderComponent.instance.indicator = this.indicator;
        this.cdr.detectChanges();
    }
    ngOnDestroy() {
        if (this.loaderComponent) {
            this.loaderComponent.destroy();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LoadingStateDirective, selector: "[sLoadingState]", inputs: { sLoadingState: "sLoadingState" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sLoadingState]',
                }]
        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }], propDecorators: { sLoadingState: [{
                type: Input
            }] } });

class LoadingStateModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateModule, declarations: [LoadingStateComponent,
            LoadingStateDirective,
            DotsIndicatorComponent,
            LoadingIndicatorComponent], imports: [CommonModule, SVGFactoryModule], exports: [LoadingStateComponent, LoadingStateDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateModule, imports: [CommonModule, SVGFactoryModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStateModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, SVGFactoryModule],
                    declarations: [
                        LoadingStateComponent,
                        LoadingStateDirective,
                        DotsIndicatorComponent,
                        LoadingIndicatorComponent,
                    ],
                    exports: [LoadingStateComponent, LoadingStateDirective],
                }]
        }] });

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

export { LoadingStateComponent, LoadingStateDirective, LoadingStateIndicators, LoadingStateModule };
//# sourceMappingURL=seniorsistemas-angular-components-loading-state.mjs.map
