import { Component, Input, ViewChild } from '@angular/core';
import { SideNav } from '../model/sidenav.model';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/material/sidenav";
import * as i4 from "@angular/material/list";
export class SidenavComponent {
    constructor() {
        this.data = new SideNav();
        this.menu = '';
        this.icon = '';
        this.items = [];
        this.isExpanded = true;
        this.showSubmenu = false;
        this.isShowing = false;
        this.showSubSubMenu = false;
    }
    ngOnInit() {
        this.menu = this.data.menu;
        this.icon = this.data.icon;
        this.items = this.data.items;
    }
    mouseenter() {
        if (!this.isExpanded) {
            this.isShowing = true;
        }
    }
    mouseleave() {
        if (!this.isExpanded) {
            this.isShowing = false;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidenavComponent, selector: "qms-sidenav", inputs: { data: "data" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true }], ngImport: i0, template: "<mat-sidenav\n  #sidenav\n  class=\"sidenav__container\"\n  mode=\"side\"\n  opened=\"true\"\n  (mouseenter)=\"mouseenter()\"\n  (mouseleave)=\"mouseleave()\"\n>\n  <mat-nav-list>\n    <mat-list-item (click)=\"showSubmenu = !showSubmenu\">\n      <span class=\"sidenav-width\" *ngIf=\"isExpanded || isShowing\">{{\n        menu\n      }}</span>\n      <mat-icon mat-list-icon>{{ icon }}</mat-icon>\n      <mat-icon\n        class=\"menu-button\"\n        [ngClass]=\"{ rotated: showSubmenu }\"\n        *ngIf=\"isExpanded || isShowing\"\n        >expand_more</mat-icon\n      >\n    </mat-list-item>\n    <div\n      class=\"submenu\"\n      [ngClass]=\"{ expanded: showSubmenu }\"\n      *ngIf=\"isShowing || isExpanded\"\n    >\n      <div *ngFor=\"let item of items\">\n        <a mat-list-item href=\"{{ item.url }}\">{{ item.name }}</a>\n      </div>\n    </div>\n  </mat-nav-list>\n  <mat-nav-list> </mat-nav-list>\n</mat-sidenav>\n", styles: [".sidenav__container{-webkit-user-select:none;user-select:none}.sidenav-width{width:100%}.menu-button{transition:.3s ease-in-out;transform:rotate(0)}.menu-button.rotated{transform:rotate(180deg)}.submenu{overflow-y:hidden;transition:transform .3s ease;transform:scaleY(0);transform-origin:top;padding-left:30px}.submenu.expanded{transform:scaleY(1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidenavComponent, decorators: [{
            type: Component,
            args: [{ selector: 'qms-sidenav', template: "<mat-sidenav\n  #sidenav\n  class=\"sidenav__container\"\n  mode=\"side\"\n  opened=\"true\"\n  (mouseenter)=\"mouseenter()\"\n  (mouseleave)=\"mouseleave()\"\n>\n  <mat-nav-list>\n    <mat-list-item (click)=\"showSubmenu = !showSubmenu\">\n      <span class=\"sidenav-width\" *ngIf=\"isExpanded || isShowing\">{{\n        menu\n      }}</span>\n      <mat-icon mat-list-icon>{{ icon }}</mat-icon>\n      <mat-icon\n        class=\"menu-button\"\n        [ngClass]=\"{ rotated: showSubmenu }\"\n        *ngIf=\"isExpanded || isShowing\"\n        >expand_more</mat-icon\n      >\n    </mat-list-item>\n    <div\n      class=\"submenu\"\n      [ngClass]=\"{ expanded: showSubmenu }\"\n      *ngIf=\"isShowing || isExpanded\"\n    >\n      <div *ngFor=\"let item of items\">\n        <a mat-list-item href=\"{{ item.url }}\">{{ item.name }}</a>\n      </div>\n    </div>\n  </mat-nav-list>\n  <mat-nav-list> </mat-nav-list>\n</mat-sidenav>\n", styles: [".sidenav__container{-webkit-user-select:none;user-select:none}.sidenav-width{width:100%}.menu-button{transition:.3s ease-in-out;transform:rotate(0)}.menu-button.rotated{transform:rotate(180deg)}.submenu{overflow-y:hidden;transition:transform .3s ease;transform:scaleY(0);transform-origin:top;padding-left:30px}.submenu.expanded{transform:scaleY(1)}\n"] }]
        }], propDecorators: { data: [{
                type: Input
            }], sidenav: [{
                type: ViewChild,
                args: ['sidenav']
            }] } });
//# sourceMappingURL=data:application/json;base64, 