import { animate, style, transition, trigger } from '@angular/animations';
import { Component, ContentChildren, effect, Input, model, } from '@angular/core';
import { TemplateDirective } from '@seniorsistemas/angular-components/template';
import { disableScroll, enableScroll } from '@seniorsistemas/angular-components/utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/cdk/a11y";
export class SidebarComponent {
    templates = null;
    visible = model(false);
    closable = true;
    dismissible = true;
    closeOnEscape = true;
    header;
    largeSized = false;
    cache = false;
    set registerConfirmClose(fn) {
        this._confirmClose = fn;
    }
    headerTemplate = null;
    bodyTemplate = null;
    footerTemplate = null;
    _confirmClose = () => true;
    visibleEffect = effect(() => {
        const visible = this.visible();
        if (visible) {
            disableScroll();
        }
        else {
            enableScroll();
        }
    });
    ngAfterContentInit() {
        this._getTemplates();
    }
    ngOnDestroy() {
        this.visibleEffect.destroy();
    }
    closeSidebar() {
        if (this._confirmClose()) {
            this.visible.set(false);
        }
    }
    handleEscape() {
        if (this.closeOnEscape) {
            this.closeSidebar();
        }
    }
    _getCustomTemplate(type) {
        return this.templates?.find((template) => template.type === type)?.template ?? null;
    }
    getHeaderTemplate() {
        return this._getCustomTemplate('header') ?? null;
    }
    getBodyTemplate() {
        return this._getCustomTemplate('body') ?? null;
    }
    getFooterTemplate() {
        return this._getCustomTemplate('footer') ?? null;
    }
    _getTemplates() {
        this.headerTemplate = this.getHeaderTemplate();
        this.bodyTemplate = this.getBodyTemplate();
        this.footerTemplate = this.getFooterTemplate();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SidebarComponent, selector: "s-sidebar", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: false, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, largeSized: { classPropertyName: "largeSized", publicName: "largeSized", isSignal: false, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: false, isRequired: false, transformFunction: null }, registerConfirmClose: { classPropertyName: "registerConfirmClose", publicName: "registerConfirmClose", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "@if (visible()) {\n    <div\n        class=\"backdrop\"\n        (click)=\"dismissible && closeSidebar()\"\n    ></div>\n}\n\n@if (cache || visible()) {\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"visible()\"\n        [@visibilityChanged]\n        class=\"sidebar\"\n        [class.sidebar--open]=\"visible()\"\n        [class.sidebar--large-size]=\"largeSized\"\n    >\n        <div class=\"sidebar__header\">\n            @if (headerTemplate) {\n                <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n            } @else {\n                <span class=\"sidebar__header__title\">{{ header }}</span>\n            }\n            @if (closable) {\n                <button\n                    class=\"sidebar__header__close fa-solid fa-xmark\"\n                    (click)=\"closeSidebar()\"\n                ></button>\n            }\n        </div>\n        <div class=\"sidebar__body\">\n            @if (bodyTemplate) {\n                <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n            } @else {\n                <ng-content></ng-content>\n            }\n        </div>\n        @if (footerTemplate) {\n            <div class=\"sidebar__footer\">\n                <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n            </div>\n        }\n    </div>\n}\n", styles: [".backdrop{background-color:#00000080;height:100%;left:0;position:fixed;top:0;transition:opacity .3s;width:100%;z-index:998}.sidebar{background-color:#fff;box-shadow:0 1px 5px #00000040;display:flex;flex-direction:column;height:100%;right:-100%;padding:1rem;position:fixed;top:0;transition:right .3s;width:100%;z-index:999}.sidebar__header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:.75rem}.sidebar__header__title{color:#212533;font-family:Inter,sans-serif;font-size:1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}.sidebar__header__close{background-color:transparent;border:none;color:#212533;cursor:pointer;font-size:1rem;padding:.5rem}.sidebar__body{flex-grow:1;overflow:auto;padding:1rem .5rem}.sidebar__footer{border-top:1px solid #dedce5;padding-top:.75rem}.sidebar--open{right:0}@media (min-width: 768px){.sidebar{width:75%}}@media (min-width: 992px){.sidebar{width:50%}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
            trigger('visibilityChanged', [
                transition(':enter', [
                    style({ transform: 'translateX(100%)' }),
                    animate('300ms', style({ transform: 'translateX(0)' })),
                ]),
                transition(':leave', [
                    style({ transform: 'translateX(0)' }),
                    animate('300ms', style({ transform: 'translateX(100%)' })),
                ]),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-sidebar', host: {
                        '(document:keydown.escape)': 'handleEscape()',
                    }, animations: [
                        trigger('visibilityChanged', [
                            transition(':enter', [
                                style({ transform: 'translateX(100%)' }),
                                animate('300ms', style({ transform: 'translateX(0)' })),
                            ]),
                            transition(':leave', [
                                style({ transform: 'translateX(0)' }),
                                animate('300ms', style({ transform: 'translateX(100%)' })),
                            ]),
                        ]),
                    ], template: "@if (visible()) {\n    <div\n        class=\"backdrop\"\n        (click)=\"dismissible && closeSidebar()\"\n    ></div>\n}\n\n@if (cache || visible()) {\n    <div\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"visible()\"\n        [@visibilityChanged]\n        class=\"sidebar\"\n        [class.sidebar--open]=\"visible()\"\n        [class.sidebar--large-size]=\"largeSized\"\n    >\n        <div class=\"sidebar__header\">\n            @if (headerTemplate) {\n                <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n            } @else {\n                <span class=\"sidebar__header__title\">{{ header }}</span>\n            }\n            @if (closable) {\n                <button\n                    class=\"sidebar__header__close fa-solid fa-xmark\"\n                    (click)=\"closeSidebar()\"\n                ></button>\n            }\n        </div>\n        <div class=\"sidebar__body\">\n            @if (bodyTemplate) {\n                <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n            } @else {\n                <ng-content></ng-content>\n            }\n        </div>\n        @if (footerTemplate) {\n            <div class=\"sidebar__footer\">\n                <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n            </div>\n        }\n    </div>\n}\n", styles: [".backdrop{background-color:#00000080;height:100%;left:0;position:fixed;top:0;transition:opacity .3s;width:100%;z-index:998}.sidebar{background-color:#fff;box-shadow:0 1px 5px #00000040;display:flex;flex-direction:column;height:100%;right:-100%;padding:1rem;position:fixed;top:0;transition:right .3s;width:100%;z-index:999}.sidebar__header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:.75rem}.sidebar__header__title{color:#212533;font-family:Inter,sans-serif;font-size:1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}.sidebar__header__close{background-color:transparent;border:none;color:#212533;cursor:pointer;font-size:1rem;padding:.5rem}.sidebar__body{flex-grow:1;overflow:auto;padding:1rem .5rem}.sidebar__footer{border-top:1px solid #dedce5;padding-top:.75rem}.sidebar--open{right:0}@media (min-width: 768px){.sidebar{width:75%}}@media (min-width: 992px){.sidebar{width:50%}}\n"] }]
        }], propDecorators: { templates: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }], closable: [{
                type: Input
            }], dismissible: [{
                type: Input
            }], closeOnEscape: [{
                type: Input
            }], header: [{
                type: Input
            }], largeSized: [{
                type: Input
            }], cache: [{
                type: Input
            }], registerConfirmClose: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 