import { trigger, transition, style, animate, state } from '@angular/animations';
import * as i0 from '@angular/core';
import { Injectable, inject, EventEmitter, Component, Input, Output, HostListener, NgModule } from '@angular/core';
import * as i1 from '@seniorsistemas/angular-components/common/deprecated-selector';
import { DEPRECATED_CONFIG, DeprecatedSelectorDirective } from '@seniorsistemas/angular-components/common/deprecated-selector';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';

class SlideInBarService {
    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: SlideInBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlideInBarService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlideInBarService, decorators: [{
            type: Injectable
        }] });

const SMALL_DEVICE_BREAKPOINT = 420;
/**
 * @description Componente de painel deslizante lateral que expande/colapsa ao clicar em um botão de toggle.
 * Em telas pequenas (≤ 420px), o painel entra em modo overlay, sobrepondo o conteúdo.
 * Substitui o seletor `s-slide-panel` (deprecado desde v20.0.0).
 *
 * @example
 * ```html
 * <s-slide-in-bar [cache]="true" (panelOpened)="onOpen()">
 *   <p>Conteúdo lateral</p>
 * </s-slide-in-bar>
 * ```
 *
 * @category Overlay
 */
class SlideInBarComponent {
    slidePanelService = inject(SlideInBarService);
    static nextId = 0;
    /**
     * @description Identificador único do painel. Gerado automaticamente se não informado.
     * Usado internamente pelo `SlideInBarService` para comunicação entre painéis.
     */
    id = `slide-panel-${++SlideInBarComponent.nextId}`;
    /**
     * @description Classe de ícone exibida no botão de abertura do painel.
     *
     * @default 'fas fa-chevron-right'
     */
    openIcon = 'fas fa-chevron-right';
    /**
     * @description Classe de ícone exibida no botão de fechamento do painel.
     *
     * @default 'fas fa-chevron-left'
     */
    closeIcon = 'fas fa-chevron-left';
    /**
     * @description Quando `true`, mantém o conteúdo do painel no DOM mesmo quando fechado,
     * preservando o estado interno dos componentes filhos.
     *
     * @default false
     */
    cache = false;
    /**
     * @description Quando `true`, o painel é iniciado já aberto.
     *
     * @default false
     */
    createOpen = false;
    /**
     * @description Quando `true`, o painel não sobrepõe o conteúdo ao expandir,
     * empurrando o layout adjacente.
     *
     * @default false
     */
    noOverlap = false;
    /**
     * @description Emitido quando o painel é aberto pelo usuário.
     */
    panelOpened = new EventEmitter();
    /**
     * @description Emitido quando o painel é fechado pelo usuário.
     */
    panelClosed = new EventEmitter();
    isOpen = false;
    isSlideOver = false;
    isAnimating = false;
    isContentAnimationDisabled = true;
    _unsubscribe$ = new Subject();
    onResize() {
        this._checkOverBehavior();
    }
    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: SlideInBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SlideInBarComponent, selector: "s-slide-in-bar, 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()" } }, providers: [
            {
                provide: DEPRECATED_CONFIG,
                useValue: {
                    oldSelector: 's-slide-panel',
                    newSelector: 's-slide-in-bar',
                    removalVersion: '20.0.0',
                },
            },
        ], hostDirectives: [{ directive: i1.DeprecatedSelectorDirective }], ngImport: i0, template: "<div class=\"slide-in-bar\">\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-in-bar{display:flex;width:100%}.slide-in-bar .slide-content{display:flex;position:relative}.slide-in-bar .slide-content .main-container{background-color:#eeebf2;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-in-bar .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-in-bar .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-in-bar .slide-content--closed .main-container{border:none}.slide-in-bar .slide-content--over{position:absolute}.slide-in-bar .slide-content--no-overlap{margin-right:32px}.slide-in-bar .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: SlideInBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-slide-in-bar, s-slide-panel', hostDirectives: [DeprecatedSelectorDirective], providers: [
                        {
                            provide: DEPRECATED_CONFIG,
                            useValue: {
                                oldSelector: 's-slide-panel',
                                newSelector: 's-slide-in-bar',
                                removalVersion: '20.0.0',
                            },
                        },
                    ], 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-in-bar\">\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-in-bar{display:flex;width:100%}.slide-in-bar .slide-content{display:flex;position:relative}.slide-in-bar .slide-content .main-container{background-color:#eeebf2;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-in-bar .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-in-bar .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-in-bar .slide-content--closed .main-container{border:none}.slide-in-bar .slide-content--over{position:absolute}.slide-in-bar .slide-content--no-overlap{margin-right:32px}.slide-in-bar .side-content{display:flex;height:max-content;overflow:auto;transition:width .1s linear}\n"] }]
        }], 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 SlideInBarModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlideInBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SlideInBarModule, declarations: [SlideInBarComponent], imports: [CommonModule], exports: [SlideInBarComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlideInBarModule, providers: [SlideInBarService], imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlideInBarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule],
                    declarations: [SlideInBarComponent],
                    exports: [SlideInBarComponent],
                    providers: [SlideInBarService],
                }]
        }] });

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

export { SlideInBarComponent, SlideInBarModule, SlideInBarService };
//# sourceMappingURL=seniorsistemas-angular-components-slide-in-bar.mjs.map
