import { Component, ViewChild, Input, ElementRef, Renderer } from '@angular/core';
var SidenavComponent = (function () {
    function SidenavComponent(el, renderer) {
        this.el = el;
        this.renderer = renderer;
        this.isSidenavFixed = true;
    }
    SidenavComponent.prototype.ngAfterViewInit = function () {
        this.windwosWidth = window.innerWidth;
        if (this.isSidenavFixed) {
            this.renderer.setElementClass(document.body, 'fixed-sn', true);
            if (this.windwosWidth < 1441) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
                this.setShown(false);
            }
            else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
                this.setShown(true);
            }
        }
        else {
            this.renderer.setElementClass(document.body, 'hidden-sn', true);
            this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
            this.setShown(false);
        }
    };
    SidenavComponent.prototype.windwosResize = function () {
        this.windwosWidth = window.innerWidth;
        if (this.isSidenavFixed) {
            if (this.windwosWidth < 1441 && !this.shown) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
                this.setShown(false);
            }
            else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
                this.setShown(true);
            }
            if (this.windwosWidth > 1440 && this.shown) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
                this.hideOverlay();
                this.setShown(false);
            }
        }
        else {
            if (this.windwosWidth > 1440) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
                this.hideOverlay();
                this.setShown(false);
            }
        }
    };
    SidenavComponent.prototype.show = function () {
        if (this.isSidenavFixed) {
            if (this.windwosWidth < 1441) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
                this.setShown(true);
                this.showOverlay();
            }
            else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
                this.setShown(true);
            }
        }
        else {
            this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
            this.setShown(true);
            this.showOverlay();
        }
    };
    SidenavComponent.prototype.hide = function () {
        if (this.isSidenavFixed) {
            if (this.windwosWidth < 1441) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
                this.setShown(false);
                this.hideOverlay();
            }
            else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
                this.setShown(false);
            }
        }
        else {
            this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
            this.setShown(false);
            this.hideOverlay();
        }
    };
    SidenavComponent.prototype.toggle = function () {
        if (this.shown) {
            this.hide();
        }
        else {
            this.show();
        }
    };
    SidenavComponent.prototype.showOverlay = function () {
        var _this = this;
        this.renderer.setElementStyle(this.overlay.nativeElement, 'display', 'block');
        setTimeout(function () {
            _this.renderer.setElementStyle(_this.overlay.nativeElement, 'opacity', '1');
        }, 0);
    };
    SidenavComponent.prototype.hideOverlay = function () {
        var _this = this;
        this.renderer.setElementStyle(this.overlay.nativeElement, 'opacity', '0');
        setTimeout(function () {
            _this.renderer.setElementStyle(_this.overlay.nativeElement, 'display', 'none');
        }, 200);
    };
    SidenavComponent.prototype.setShown = function (value) {
        var _this = this;
        setTimeout(function () {
            _this.shown = value;
        }, 510);
    };
    return SidenavComponent;
}());
export { SidenavComponent };
SidenavComponent.decorators = [
    { type: Component, args: [{
                selector: 'sidenav',
                template: "\n        <ul #sidenav id=\"slide-out\" class=\"side-nav fixed {{ sidenavClass }}\" >\n           <ng-content></ng-content>\n           <div class=\"sidenav-bg mask-strong\"></div>    \n        </ul>\n\n        <div (click)=\"hide()\" #overlay id=\"sidenav-overlay\" style=\"display: none;\"></div>\n\n    ",
                host: {
                    '(window:resize)': 'windwosResize()'
                }
            },] },
];
SidenavComponent.ctorParameters = function () { return [
    { type: ElementRef, },
    { type: Renderer, },
]; };
SidenavComponent.propDecorators = {
    'sidenavClass': [{ type: Input, args: ['class',] },],
    'sideNav': [{ type: ViewChild, args: ['sidenav',] },],
    'isSidenavFixed': [{ type: Input, args: ['fixed',] },],
    'overlay': [{ type: ViewChild, args: ['overlay',] },],
};
//# sourceMappingURL=sidenavComponent.js.map