/*
 *  @license
 *  Copyright Hôpitaux Universitaires de Genève. All Rights Reserved.
 *
 *  Use of this source code is governed by an Apache-2.0 license that can be
 *  found in the LICENSE file at https://github.com/DSI-HUG/dejajs-components/blob/master/LICENSE
 */
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { Destroy } from '@deja-js/component/core';
import { filter, map, mergeMap, takeUntil } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "./sidenav.service";
import * as i2 from "@deja-js/component/core";
import * as i3 from "@angular/router";
import * as i4 from "@angular/material/sidenav";
import * as i5 from "@angular/material/toolbar";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/button";
import * as i8 from "@angular/common";
export class DejaSidenavComponent extends Destroy {
    constructor(sidenavService, mediaService, router, activatedRoute, changeDetectorRef) {
        super();
        this.sidenavService = sidenavService;
        this.mediaService = mediaService;
        this.router = router;
        this.activatedRoute = activatedRoute;
        this.changeDetectorRef = changeDetectorRef;
        this.headerText = 'TITLE';
        this.headerIcon = 'face';
        this.mode = 'side';
        this._showToolbar = false;
        this.mediaService.mediaChanged$.pipe(takeUntil(this.destroyed$)).subscribe(alias => {
            this.sidenavService.hidden = alias === 'xs';
            this.sidenavService.opened = alias === 'lg' || alias === 'xl';
            this.sidenavService.mode = alias === 'xs' ? 'over' : 'side';
            this.changeDetectorRef.markForCheck();
        });
    }
    set showToolbar(value) {
        this._showToolbar = coerceBooleanProperty(value);
    }
    ngOnInit() {
        // Initialize
        this.title = this.getActivatedRouteLastChild().data.title;
        // Listen for future route changes
        this.router.events.pipe(filter(event => event instanceof NavigationEnd), map(() => this.activatedRoute), map(route => {
            // eslint-disable-next-line no-loops/no-loops
            while (route.firstChild) {
                route = route.firstChild;
            }
            return route;
        }), filter(route => route.outlet === 'primary'), mergeMap(route => route.data), takeUntil(this.destroyed$)).subscribe(event => {
            this.title = event.title;
        });
    }
    getActivatedRouteLastChild() {
        let route = this.activatedRoute.snapshot.root;
        // eslint-disable-next-line no-loops/no-loops
        while (route.firstChild) {
            route = route.firstChild;
        }
        return route;
    }
}
DejaSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaSidenavComponent, deps: [{ token: i1.DejaSidenavService }, { token: i2.MediaService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DejaSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: DejaSidenavComponent, selector: "deja-sidenav", inputs: { showToolbar: "showToolbar", headerText: "headerText", headerIcon: "headerIcon" }, usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container autosize [class.sidenav-hidden]=\"sidenavService.hidden\" [class.sidenav-light]=\"!sidenavService.hidden && !sidenavService.opened\">\n    <mat-sidenav [(opened)]=\"sidenavService.opened\" [mode]=\"sidenavService.mode\">\n        <mat-toolbar class=\"header\">\n            <mat-icon class=\"header-icon\">{{headerIcon}}</mat-icon>\n            <span class=\"header-text\">{{headerText}}</span>\n            <button type=\"button\" mat-icon-button class=\"header-menu-btn\" (click)=\"sidenavService.toggle()\">\n                <mat-icon>{{!sidenavService.hidden && !sidenavService.opened ? 'menu' : 'keyboard_arrow_left'}}</mat-icon>\n            </button>\n        </mat-toolbar>\n        <ng-content select=\"deja-sidenav-menu\"></ng-content>\n    </mat-sidenav>\n\n    <mat-toolbar color=\"primary\" *ngIf=\"_showToolbar\">\n        <button type=\"button\" mat-icon-button class=\"menu-btn\" *ngIf=\"!sidenavService.opened\" (click)=\"sidenavService.open()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <span class=\"menu-title\">{{ title }}</span>\n        <ng-content select=\"deja-sidenav-header\"></ng-content>\n    </mat-toolbar>\n    <ng-content select=\"deja-sidenav-content\"></ng-content>\n</mat-sidenav-container>\n", styles: ["deja-sidenav{display:flex;flex:1 1 100%;height:100%}deja-sidenav .header{flex:0 0 auto}deja-sidenav .mat-drawer-container{height:100%;flex:1 1 100%}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav{transform:translate(calc(-100% + 58px));visibility:visible!important}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav .header{padding:0 8px;justify-content:flex-end}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav .header .header-icon,deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav .header .header-text{display:none}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content{justify-content:flex-end}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content .mat-list-icon{padding:0}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content .mat-list-text{display:none}deja-sidenav .mat-drawer-container.sidenav-light .mat-drawer-content{margin-left:58px!important}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-sidenav{width:280px}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-sidenav .mat-toolbar{border-right:none}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-drawer-content .mat-toolbar{padding:0 8px}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-drawer-content .mat-toolbar .menu-btn{margin-right:8px;display:block!important}deja-sidenav .mat-drawer-container .mat-sidenav{overflow:visible;width:320px}deja-sidenav .mat-drawer-container .mat-sidenav .mat-drawer-inner-container{display:flex;flex-direction:column}deja-sidenav .mat-drawer-container .mat-sidenav .header{padding-right:8px;font-size:14px}deja-sidenav .mat-drawer-container .mat-sidenav .header .header-icon{padding:4px}deja-sidenav .mat-drawer-container .mat-sidenav .header .header-text{margin-left:32px;flex:1 1 auto}deja-sidenav .mat-drawer-container .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content .mat-list-text{padding-left:32px;font-size:14px}deja-sidenav .mat-drawer-container .mat-sidenav deja-sidenav-menu .mat-divider{margin:.7rem 0}deja-sidenav .mat-drawer-container .mat-drawer-content{display:flex;flex-direction:column;height:100%}deja-sidenav .mat-drawer-container .mat-drawer-content>div{overflow:hidden;height:100%}deja-sidenav .mat-drawer-container .mat-drawer-content .mat-toolbar{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;-webkit-font-smoothing:antialiased;padding-right:8px;flex:0 0 auto}deja-sidenav .mat-drawer-container .mat-drawer-content .mat-toolbar .menu-title{flex:1 1 auto}deja-sidenav .mat-drawer-container .mat-drawer-content .mat-toolbar .menu-btn{display:none}deja-sidenav .mat-drawer-container .mat-drawer-content deja-sidenav-content{overflow-y:auto}deja-sidenav .mat-drawer-container .mat-drawer-content deja-sidenav-content>*{overflow-x:hidden;overflow-y:auto}\n"], components: [{ type: i4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: DejaSidenavComponent, decorators: [{
            type: Component,
            args: [{ encapsulation: ViewEncapsulation.None, selector: 'deja-sidenav', template: "<mat-sidenav-container autosize [class.sidenav-hidden]=\"sidenavService.hidden\" [class.sidenav-light]=\"!sidenavService.hidden && !sidenavService.opened\">\n    <mat-sidenav [(opened)]=\"sidenavService.opened\" [mode]=\"sidenavService.mode\">\n        <mat-toolbar class=\"header\">\n            <mat-icon class=\"header-icon\">{{headerIcon}}</mat-icon>\n            <span class=\"header-text\">{{headerText}}</span>\n            <button type=\"button\" mat-icon-button class=\"header-menu-btn\" (click)=\"sidenavService.toggle()\">\n                <mat-icon>{{!sidenavService.hidden && !sidenavService.opened ? 'menu' : 'keyboard_arrow_left'}}</mat-icon>\n            </button>\n        </mat-toolbar>\n        <ng-content select=\"deja-sidenav-menu\"></ng-content>\n    </mat-sidenav>\n\n    <mat-toolbar color=\"primary\" *ngIf=\"_showToolbar\">\n        <button type=\"button\" mat-icon-button class=\"menu-btn\" *ngIf=\"!sidenavService.opened\" (click)=\"sidenavService.open()\">\n            <mat-icon>menu</mat-icon>\n        </button>\n        <span class=\"menu-title\">{{ title }}</span>\n        <ng-content select=\"deja-sidenav-header\"></ng-content>\n    </mat-toolbar>\n    <ng-content select=\"deja-sidenav-content\"></ng-content>\n</mat-sidenav-container>\n", styles: ["deja-sidenav{display:flex;flex:1 1 100%;height:100%}deja-sidenav .header{flex:0 0 auto}deja-sidenav .mat-drawer-container{height:100%;flex:1 1 100%}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav{transform:translate(calc(-100% + 58px));visibility:visible!important}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav .header{padding:0 8px;justify-content:flex-end}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav .header .header-icon,deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav .header .header-text{display:none}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content{justify-content:flex-end}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content .mat-list-icon{padding:0}deja-sidenav .mat-drawer-container.sidenav-light .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content .mat-list-text{display:none}deja-sidenav .mat-drawer-container.sidenav-light .mat-drawer-content{margin-left:58px!important}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-sidenav{width:280px}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-sidenav .mat-toolbar{border-right:none}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-drawer-content .mat-toolbar{padding:0 8px}deja-sidenav .mat-drawer-container.sidenav-hidden .mat-drawer-content .mat-toolbar .menu-btn{margin-right:8px;display:block!important}deja-sidenav .mat-drawer-container .mat-sidenav{overflow:visible;width:320px}deja-sidenav .mat-drawer-container .mat-sidenav .mat-drawer-inner-container{display:flex;flex-direction:column}deja-sidenav .mat-drawer-container .mat-sidenav .header{padding-right:8px;font-size:14px}deja-sidenav .mat-drawer-container .mat-sidenav .header .header-icon{padding:4px}deja-sidenav .mat-drawer-container .mat-sidenav .header .header-text{margin-left:32px;flex:1 1 auto}deja-sidenav .mat-drawer-container .mat-sidenav deja-sidenav-menu .mat-list-item .mat-list-item-content .mat-list-text{padding-left:32px;font-size:14px}deja-sidenav .mat-drawer-container .mat-sidenav deja-sidenav-menu .mat-divider{margin:.7rem 0}deja-sidenav .mat-drawer-container .mat-drawer-content{display:flex;flex-direction:column;height:100%}deja-sidenav .mat-drawer-container .mat-drawer-content>div{overflow:hidden;height:100%}deja-sidenav .mat-drawer-container .mat-drawer-content .mat-toolbar{box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;-webkit-font-smoothing:antialiased;padding-right:8px;flex:0 0 auto}deja-sidenav .mat-drawer-container .mat-drawer-content .mat-toolbar .menu-title{flex:1 1 auto}deja-sidenav .mat-drawer-container .mat-drawer-content .mat-toolbar .menu-btn{display:none}deja-sidenav .mat-drawer-container .mat-drawer-content deja-sidenav-content{overflow-y:auto}deja-sidenav .mat-drawer-container .mat-drawer-content deja-sidenav-content>*{overflow-x:hidden;overflow-y:auto}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DejaSidenavService }, { type: i2.MediaService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showToolbar: [{
                type: Input
            }], headerText: [{
                type: Input
            }], headerIcon: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 