import { DOCUMENT } from '@angular/common';
import { Component, HostListener, Inject, Input, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { RThemeService } from '../../../theme';
import { RDrawer } from '../../navigation/sidenav';
import { RLayoutService } from './layout.service';
/** @dynamic */
export class RLayoutComponent {
    constructor(themeService, layoutService, document) {
        this.themeService = themeService;
        this.layoutService = layoutService;
        this.document = document;
        this.subs = new Subscription();
        this.drawerOpened = true;
        this.drawerBackdrop = false;
        this.drawerContainerAutosize = false;
        this.responsive = false;
        this.hasDrawer = true;
        this._drawerMode = 'side';
    }
    get drawerMode() {
        return this._drawerMode;
    }
    set drawerMode(value) {
        this._drawerMode = value;
    }
    ngOnInit() {
        this.subs.add(this.themeService.onThemeChange().subscribe(theme => {
            if (theme.previous) {
                this.document.body.classList.remove(`r-theme-${theme.previous}`);
            }
            this.document.body.classList.add(`r-theme-${theme.name}`);
        }));
    }
    ngOnDestroy() {
        this.subs.unsubscribe();
    }
    onResize() { }
    get isMobile() {
        return this.layoutService.isMobile;
    }
}
RLayoutComponent.decorators = [
    { type: Component, args: [{
                selector: 'r-layout',
                template: "<r-navbar>\r\n  <ng-content select=\"r-layout-navbar-content\"></ng-content>\r\n</r-navbar>\r\n<ng-container *ngIf=\"hasDrawer\">\r\n  <r-drawer-container [hasBackdrop]=\"(isMobile && responsive) || drawerBackdrop\" [autosize]=\"drawerContainerAutosize\">\r\n    <r-drawer #drawer [autoFocus]=\"false\" [mode]=\"((isMobile && responsive) ? 'over' : 'side') || drawerMode\"\r\n      [opened]=\"responsive ? !isMobile : drawerOpened\">\r\n      <ng-content select=\"r-layout-drawer-content\"></ng-content>\r\n    </r-drawer>\r\n    <r-drawer-content>\r\n      <ng-container *ngTemplateOutlet=\"layoutContent\"></ng-container>\r\n    </r-drawer-content>\r\n  </r-drawer-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"!hasDrawer\">\r\n  <ng-container *ngTemplateOutlet=\"layoutContent\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #layoutContent>\r\n  <div [class.no-drawer]=\"!hasDrawer\">\r\n    <ng-content select=\"r-layout-content\"></ng-content>\r\n  </div>\r\n</ng-template>",
                styles: [":host{display:flex;width:100%;flex-direction:column}:host .no-drawer,:host r-drawer-content{height:calc(100vh - 6.7rem);padding:1rem}@media (max-width:767.98px){:host .no-drawer,:host r-drawer-content{height:calc(100vh - 5.6rem)}}"]
            },] }
];
RLayoutComponent.ctorParameters = () => [
    { type: RThemeService },
    { type: RLayoutService },
    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
RLayoutComponent.propDecorators = {
    drawer: [{ type: ViewChild, args: [RDrawer,] }],
    drawerOpened: [{ type: Input }],
    drawerBackdrop: [{ type: Input }],
    drawerContainerAutosize: [{ type: Input }],
    responsive: [{ type: Input }],
    hasDrawer: [{ type: Input }],
    drawerMode: [{ type: Input }],
    onResize: [{ type: HostListener, args: ['window:resize',] }]
};
//# sourceMappingURL=layout.component.js.map