import { trigger, transition, style, animate, state } from '@angular/animations';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, Input, Output, HostListener, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';

class SlidePanelService {
    modalCloseMap = new Map();
    createSlidePanel(id) {
        const panelSubject = new Subject();
        this.modalCloseMap.set(id, panelSubject);
        return panelSubject.asObservable();
    }
    getModalCloseObservable(id) {
        return this.modalCloseMap.get(id)?.asObservable() ?? null;
    }
    closeModal(id) {
        const subject = this.modalCloseMap.get(id);
        if (subject) {
            subject.next();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlidePanelService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlidePanelService, decorators: [{
            type: Injectable
        }] });

const SMALL_DEVICE_BREAKPOINT = 420;
class SlidePanelComponent {
    slidePanelService;
    static nextId = 0;
    id = `slide-panel-${++SlidePanelComponent.nextId}`;
    openIcon = "fas fa-chevron-right";
    closeIcon = "fas fa-chevron-left";
    cache = false;
    createOpen = false;
    noOverlap = false;
    panelOpened = new EventEmitter();
    panelClosed = new EventEmitter();
    isOpen = false;
    isSlideOver = false;
    isAnimating = false;
    isContentAnimationDisabled = true;
    _unsubscribe$ = new Subject();
    onResize() {
        this._checkOverBehavior();
    }
    constructor(slidePanelService) {
        this.slidePanelService = slidePanelService;
    }
    ngOnInit() {
        this._checkOverBehavior();
        this.slidePanelService.createSlidePanel(this.id)
            .pipe(takeUntil(this._unsubscribe$))
            .subscribe(() => {
            this.isOpen = false;
        });
    }
    ngAfterViewInit() {
        queueMicrotask(() => {
            if (this.createOpen) {
                this.isOpen = true;
            }
        });
    }
    ngAfterViewChecked() {
        return;
        // to executed at a safe time prior to control returning to the browser's event loop
        // queueMicrotask(() => {
        //     this._calculateSlideHeight();
        //     this.isContentAnimationDisabled = false;
        // });
    }
    ngOnDestroy() {
        this._unsubscribe$.next();
        this._unsubscribe$.complete();
    }
    onClickButton() {
        if (this.isAnimating) {
            return;
        }
        this.isOpen = !this.isOpen;
        if (this.isOpen) {
            this.panelOpened.emit();
        }
        else {
            this.panelClosed.emit();
        }
    }
    onContentAnimationStart() {
        this.isAnimating = true;
    }
    onContentAnimationDone() {
        this.isAnimating = false;
    }
    _checkOverBehavior() {
        this.isSlideOver = window.innerWidth <= SMALL_DEVICE_BREAKPOINT;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlidePanelComponent, deps: [{ token: SlidePanelService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SlidePanelComponent, selector: "s-slide-panel", inputs: { id: "id", openIcon: "openIcon", closeIcon: "closeIcon", cache: "cache", createOpen: "createOpen", noOverlap: "noOverlap" }, outputs: { panelOpened: "panelOpened", panelClosed: "panelClosed" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<div class=\"slide-panel\">\n    <div\n        class=\"slide-content\"\n        [ngClass]=\"{\n            'slide-content--closed': !isOpen,\n            'slide-content--over': isSlideOver,\n            'slide-content--no-overlap': noOverlap,\n        }\"\n    >\n        <div\n            #mainContainer\n            class=\"main-container\"\n        >\n            @if (cache) {\n                <div\n                    class=\"content-container\"\n                    [@cacheAnimation]=\"isOpen\"\n                    [@.disabled]=\"isContentAnimationDisabled\"\n                    (@cacheAnimation.start)=\"onContentAnimationStart()\"\n                    (@cacheAnimation.done)=\"onContentAnimationDone()\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n                </div>\n            } @else {\n                @if (isOpen) {\n                    <div\n                        class=\"content-container\"\n                        @cachelessAnimation\n                        [@.disabled]=\"isContentAnimationDisabled\"\n                        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n                        (@cachelessAnimation.done)=\"onContentAnimationDone()\"\n                    >\n                        <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n                    </div>\n                }\n            }\n        </div>\n        <button\n            class=\"button\"\n            [ngClass]=\"isOpen ? closeIcon : openIcon\"\n            (click)=\"onClickButton()\"\n        ></button>\n    </div>\n    <div\n        class=\"side-content\"\n    >\n        <ng-content select=\"[side-content]\"></ng-content>\n    </div>\n</div>\n\n<ng-template #slideContentTemplate>\n    <ng-content select=\"[slide-content]\"></ng-content>\n</ng-template>\n", styles: [".slide-panel{display:flex;width:100%}.slide-panel .slide-content{display:flex;position:relative}.slide-panel .slide-content .main-container{background-color:#eeebf2;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-panel .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-panel .slide-content .button{align-items:center;background-color:#eeebf2;border:1px solid #ccc;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:flex;font-family:\"Font Awesome 5 Pro\";font-size:16px;height:32px;justify-content:center;position:absolute;right:-32px;top:16px;width:32px;z-index:99}.slide-panel .slide-content--closed .main-container{border:none}.slide-panel .slide-content--over{position:absolute}.slide-panel .slide-content--no-overlap{margin-right:32px}.slide-panel .side-content{display:flex;height:max-content;overflow:auto;transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
            trigger("cachelessAnimation", [
                transition(":enter", [
                    style({ width: "0" }),
                    animate("200ms linear", style({ width: "*" })),
                ]),
                transition(":leave", [
                    style({ width: "*" }),
                    animate("200ms linear", style({ width: "0" })),
                ]),
            ]),
            trigger("cacheAnimation", [
                state("true", style({ width: "*", padding: '0 16px' })),
                state("false", style({ width: '0px', padding: '0' })),
                transition("* => *", animate("200ms")),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlidePanelComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-slide-panel", animations: [
                        trigger("cachelessAnimation", [
                            transition(":enter", [
                                style({ width: "0" }),
                                animate("200ms linear", style({ width: "*" })),
                            ]),
                            transition(":leave", [
                                style({ width: "*" }),
                                animate("200ms linear", style({ width: "0" })),
                            ]),
                        ]),
                        trigger("cacheAnimation", [
                            state("true", style({ width: "*", padding: '0 16px' })),
                            state("false", style({ width: '0px', padding: '0' })),
                            transition("* => *", animate("200ms")),
                        ]),
                    ], template: "<div class=\"slide-panel\">\n    <div\n        class=\"slide-content\"\n        [ngClass]=\"{\n            'slide-content--closed': !isOpen,\n            'slide-content--over': isSlideOver,\n            'slide-content--no-overlap': noOverlap,\n        }\"\n    >\n        <div\n            #mainContainer\n            class=\"main-container\"\n        >\n            @if (cache) {\n                <div\n                    class=\"content-container\"\n                    [@cacheAnimation]=\"isOpen\"\n                    [@.disabled]=\"isContentAnimationDisabled\"\n                    (@cacheAnimation.start)=\"onContentAnimationStart()\"\n                    (@cacheAnimation.done)=\"onContentAnimationDone()\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n                </div>\n            } @else {\n                @if (isOpen) {\n                    <div\n                        class=\"content-container\"\n                        @cachelessAnimation\n                        [@.disabled]=\"isContentAnimationDisabled\"\n                        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n                        (@cachelessAnimation.done)=\"onContentAnimationDone()\"\n                    >\n                        <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n                    </div>\n                }\n            }\n        </div>\n        <button\n            class=\"button\"\n            [ngClass]=\"isOpen ? closeIcon : openIcon\"\n            (click)=\"onClickButton()\"\n        ></button>\n    </div>\n    <div\n        class=\"side-content\"\n    >\n        <ng-content select=\"[side-content]\"></ng-content>\n    </div>\n</div>\n\n<ng-template #slideContentTemplate>\n    <ng-content select=\"[slide-content]\"></ng-content>\n</ng-template>\n", styles: [".slide-panel{display:flex;width:100%}.slide-panel .slide-content{display:flex;position:relative}.slide-panel .slide-content .main-container{background-color:#eeebf2;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-panel .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-panel .slide-content .button{align-items:center;background-color:#eeebf2;border:1px solid #ccc;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:flex;font-family:\"Font Awesome 5 Pro\";font-size:16px;height:32px;justify-content:center;position:absolute;right:-32px;top:16px;width:32px;z-index:99}.slide-panel .slide-content--closed .main-container{border:none}.slide-panel .slide-content--over{position:absolute}.slide-panel .slide-content--no-overlap{margin-right:32px}.slide-panel .side-content{display:flex;height:max-content;overflow:auto;transition:width .1s linear}\n"] }]
        }], ctorParameters: () => [{ type: SlidePanelService }], propDecorators: { id: [{
                type: Input
            }], openIcon: [{
                type: Input
            }], closeIcon: [{
                type: Input
            }], cache: [{
                type: Input
            }], createOpen: [{
                type: Input
            }], noOverlap: [{
                type: Input
            }], panelOpened: [{
                type: Output
            }], panelClosed: [{
                type: Output
            }], onResize: [{
                type: HostListener,
                args: ["window:resize"]
            }] } });

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

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

export { SlidePanelComponent, SlidePanelModule, SlidePanelService };
//# sourceMappingURL=seniorsistemas-angular-components-slide-panel.mjs.map
