import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ZuiB } from '@material-zui/core';
export class ZuiSideNavComponent {
    constructor() {
        this.position = 'end';
        this.mode = 'side';
        this.width = '300px';
        this.padding = '10px';
        this.blurToClose = true;
        this.hasBackdrop = true;
        this.showClose = true;
        this.openedStart = new EventEmitter();
        this.backdropClick = new EventEmitter();
        this.open = () => {
            this.sideNav.open();
        };
        this.close = () => {
            this.sideNav.close();
        };
        this.onBackdropClick = () => {
            var _a;
            if (this.blurToClose)
                this.close();
            (_a = this.backdropClick) === null || _a === void 0 ? void 0 : _a.emit();
        };
    }
    set disabledBlurToClose(val) {
        this.blurToClose = ZuiB.toBoolReverse(val);
    }
    set noBackdrop(val) {
        this.hasBackdrop = ZuiB.toBoolReverse(val);
    }
    set hideClose(val) {
        this.showClose = ZuiB.toBoolReverse(val);
    }
}
ZuiSideNavComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-sidenav',
                template: "<mat-sidenav-container class=\"zui-sidenav__container\" [hasBackdrop]=\"hasBackdrop\" (backdropClick)=\"onBackdropClick()\" fullscreen>\n  <mat-sidenav #sideNav [mode]=\"mode\" [position]=\"position\" (keydown.escape)=\"close()\" (openedStart)=\"openedStart?.emit()\" [fixedInViewport]=\"true\" disableClose>\n    <div class=\"d-flex flex-column h-100\" [ngStyle]=\"{width: width}\">\n      <div class=\"d-flex\" [ngStyle]=\"{padding: padding}\">\n        <div class=\"d-flex-1 zui-sidenav__header\">\n          <ng-content select=\"[header]\"></ng-content>\n        </div>\n        <mat-icon *ngIf=\"showClose\" class=\"zui-pointer zui-noselect\" (click)=\"close()\">close</mat-icon>\n      </div>\n      <div class=\"d-flex-1 overflow-y-auto\" [ngStyle]=\"{padding: padding}\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div [ngStyle]=\"{padding: padding}\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n",
                styles: [".zui-sidenav__container{visibility:hidden}.zui-sidenav__header{font-weight:500;font-size:20px}"]
            },] }
];
ZuiSideNavComponent.propDecorators = {
    position: [{ type: Input }],
    mode: [{ type: Input }],
    width: [{ type: Input }],
    padding: [{ type: Input }],
    disabledBlurToClose: [{ type: Input }],
    noBackdrop: [{ type: Input }],
    hideClose: [{ type: Input }],
    openedStart: [{ type: Output }],
    backdropClick: [{ type: Output }],
    sideNav: [{ type: ViewChild, args: ['sideNav',] }]
};
//# sourceMappingURL=index.component.js.map