ngx-mat-menu/bundles/ngx-mat-menu.umd.min.js

⚡ Try it on [StackBlitz](https://stackblitz.com/edit/angular-lnjubx)!

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("@angular/router"),require("@angular/animations"),require("@angular/common"),require("@angular/flex-layout"),require("@angular/material/button"),require("@angular/material/form-field"),require("@angular/material/icon"),require("@angular/platform-browser"),require("@angular/material/badge"),require("@angular/material/expansion"),require("@angular/material/select"),require("@angular/forms")):"function"==typeof define&&define.amd?define("ngx-mat-menu",["exports","@angular/core","rxjs","@angular/router","@angular/animations","@angular/common","@angular/flex-layout","@angular/material/button","@angular/material/form-field","@angular/material/icon","@angular/platform-browser","@angular/material/badge","@angular/material/expansion","@angular/material/select","@angular/forms"],t):t((e=e||self)["ngx-mat-menu"]={},e.ng.core,e.rxjs,e.ng.router,e.ng.animations,e.ng.common,e.ng["flex-layout"],e.ng.material.button,e.ng.material["form-field"],e.ng.material.icon,e.ng.platformBrowser,e.ng.material.badge,e.ng.material.expansion,e.ng.material.select,e.ng.forms)}(this,(function(e,t,n,o,r,i,a,s,l,d,u,p,c,h,g){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function m(e,t,n,o){var r,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(i<3?r(a):i>3?r(t,n,a):r(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var f=function(){function e(){this.changeMenuSelect=new n.Subject,this.changeShowMenu=new n.Subject}return e.prototype.selectMenu=function(e){this.selectedMenu=e,this.changeMenuSelect.next(this.selectedMenu)},e.prototype.getSelectedMenu=function(){return this.selectedMenu},e.prototype.changeMenu=function(e){this.showMenu=e,this.changeShowMenu.next(this.showMenu)},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=m([t.Injectable({providedIn:"root"})],e)}(),y=function(){function e(e,n){var o=this;this.menuService=e,this.router=n,this.showMenu=!1,this.widthSidebar="0px",this.posSidebar="relative",this.showHeader=!0,this.hover=!1,this.themeSidebarHeader={background:"white",color:""},this.openNotif=new t.EventEmitter,this.logoutEvent=new t.EventEmitter,this.profileClick=new t.EventEmitter,this.selectItem=new t.EventEmitter,this.activeMenu=this.menuService.getSelectedMenu(),this.menuService.changeMenuSelect.subscribe((function(e){o.activeMenu=e})),this.menuService.changeShowMenu.subscribe((function(e){o.show=e}))}return e.prototype.ngOnInit=function(){this.checkSidebarPos()},e.prototype.ngOnChanges=function(){switch(console.log(this.lang),this.lang){case"en":this.textLogout="Logout";break;case"hu":this.textLogout="Kijelentkezés";break;default:this.textLogout="Logout"}},e.prototype.onResize=function(){this.checkSidebarPos()},e.prototype.checkSidebarPos=function(){var e=document.getElementById("cont").offsetWidth;this.posSidebar=e<=700?"absolute":"relative"},e.prototype.setMenu=function(e){var t=this;void 0!==e?!0===e?(this.widthSidebar=this.defaultWidth?this.defaultWidth:"200px",this.showMenu=!this.showMenu):(setTimeout((function(){t.showMenu=!t.showMenu}),200),this.widthSidebar="0px"):this.showMenu?(this.widthSidebar="0px",setTimeout((function(){t.showMenu=!t.showMenu}),200)):(this.widthSidebar=this.defaultWidth?this.defaultWidth:"200px",setTimeout((function(){t.showMenu=!t.showMenu}),200))},e.prototype.expandMenu=function(e){console.log(document.getElementById(e.toString()).offsetHeight),0===document.getElementById(e.toString()).offsetHeight?(document.getElementById(e.toString()).style.height="auto",document.getElementById(e.toString()).style.display="block"):(document.getElementById(e.toString()).style.height="0px",document.getElementById(e.toString()).style.display="none")},e.prototype.msSelect_SelectionChange=function(e){this.selectItem.emit(e)},e.prototype.showNotif=function(e){this.openNotif.emit(e)},e.prototype.selectMenu=function(e,t){console.log(t),t&&(this.menuService.selectMenu(e),this.router.navigate([""+t]))},e.prototype.profile_Click=function(e){this.profileClick.emit(e)},e.prototype.logout=function(){this.setMenu(!1),this.logoutEvent.next()},e.prototype.hovered=function(){if(1==this.hover)return this.badgeColor},e.ctorParameters=function(){return[{type:f},{type:o.Router}]},m([t.Input()],e.prototype,"themeSidebar",void 0),m([t.Input()],e.prototype,"themeHeader",void 0),m([t.Input()],e.prototype,"themeSidebarHeader",void 0),m([t.Input()],e.prototype,"arrMenuOptions",void 0),m([t.Input()],e.prototype,"logoutIcon",void 0),m([t.Input()],e.prototype,"badgeColor",void 0),m([t.Input()],e.prototype,"srcLogo",void 0),m([t.Input()],e.prototype,"heightLogo",void 0),m([t.Input()],e.prototype,"widthLogo",void 0),m([t.Input()],e.prototype,"lang",void 0),m([t.Input()],e.prototype,"visibleNotif",void 0),m([t.Input()],e.prototype,"badge",void 0),m([t.Input()],e.prototype,"defaultWidth",void 0),m([t.Input()],e.prototype,"borderHeader",void 0),m([t.Input()],e.prototype,"borderSidebar",void 0),m([t.Input()],e.prototype,"borderSidebarHeader",void 0),m([t.Input()],e.prototype,"borderSidebarFooter",void 0),m([t.Input()],e.prototype,"borderMenuItems",void 0),m([t.Input()],e.prototype,"headerPicture",void 0),m([t.Input()],e.prototype,"headerTitle",void 0),m([t.Input()],e.prototype,"headerTitleColor",void 0),m([t.Input()],e.prototype,"headerSubtitle",void 0),m([t.Input()],e.prototype,"headerSubtitleColor",void 0),m([t.Input()],e.prototype,"selectPlaceholder",void 0),m([t.Input()],e.prototype,"arrSelectItems",void 0),m([t.Input()],e.prototype,"defaultSelectValue",void 0),m([t.Input()],e.prototype,"showSelectValue",void 0),m([t.Output()],e.prototype,"openNotif",void 0),m([t.Output()],e.prototype,"logoutEvent",void 0),m([t.Output()],e.prototype,"profileClick",void 0),m([t.Output()],e.prototype,"selectItem",void 0),m([t.HostListener("window:resize",[""])],e.prototype,"onResize",null),e=m([t.Component({selector:"ngx-mat-menu",template:'<div id="cont" style="height: 100%;width: 100%;" fxLayout="row" fxLayoutAlign="space-between stretch">\r\n    \x3c!-- SIDEBAR --\x3e\r\n    <div style="overflow-x: hidden; max-width: 90vw; box-shadow: 0px 0px 10px #777777;" [style.width]="widthSidebar"\r\n        [style.position]="posSidebar" [ngStyle]="themeSidebar" fxLayout="column" fxLayoutAlign="start start"\r\n        class="app-sidebar" *ngIf="show" [style.border]="borderSidebar">\r\n\r\n        \x3c!-- SIDEBAR HEADER --\x3e\r\n        <div class="app-sidebar-header" [style.border-bottom]="borderSidebarHeader" [ngStyle]="themeSidebarHeader">\r\n            \x3c!-- \r\n            <div fxLayout="row" fxLayoutAlign="center center">\r\n                <mat-icon style="margin-right: 10px;" *ngIf="headerIcon">{{headerIcon}}</mat-icon> {{headerText}}\r\n            </div>\r\n            --\x3e\r\n            <div fxLayout="column" fxLayoutAlign="start stretch" style="height: 100%;">\r\n                <div fxFlex *ngIf="headerPicture" fxLayout="row" fxLayoutAlign="start center">\r\n                    <div [ngStyle]="{ \'background-image\': \'url(\' + headerPicture + \')\'}" class="app-header-picture"\r\n                        (click)="profile_Click($event)">\r\n                    </div>\r\n                </div>\r\n                <div fxFlex fxLayout="column" fxLayoutAlign="center start">\r\n                    <span class="app-header-title" [style.color]="headerTitleColor">{{headerTitle}}</span>\r\n                    <span class="app-header-subtitle" [style.color]="headerSubtitleColor">{{headerSubtitle}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n\r\n        <div *ngIf="arrSelectItems" fxLayout="column" fxLayoutAlign="start start" style="width: 100%; background: white; height: 70px;">\r\n            <mat-form-field style="height: 45px;\r\n            width: calc(100% - 40px);\r\n            margin-left: 15px; \r\n            margin-right: 15px;" >\r\n                <mat-select \r\n                (selectionChange)="msSelect_SelectionChange($event.value)"\r\n            [placeholder]="selectPlaceholder" [(ngModel)]="defaultSelectValue" name="item">\r\n                <mat-option *ngFor="let item of arrSelectItems" [value]="item.value">\r\n                    {{item.title}} <span *ngIf="showSelectValue"> - {{item.value}}</span>\r\n                </mat-option>\r\n            </mat-select>\r\n            </mat-form-field>\r\n            \r\n        </div>\r\n\r\n\r\n        \x3c!-- SIDEBAR LIST --\x3e\r\n        <div fxFlex fxLayout="column" fxLayoutAlign="start start"\r\n        class="app-sidebar-body"\r\n            >\r\n\r\n            <div *ngFor="let item of arrMenuOptions" [style.border-top]="borderMenuItems" style="width: 100%;"\r\n                fxLayout="column" fxLayoutAlign="start stretch">\r\n\r\n\r\n                \x3c!-- EXPENDABLE ITEM --\x3e\r\n                <mat-expansion-panel #meph *ngIf="item.children && !item.divider" [ngStyle]="themeSidebar"\r\n                    class="expandable-item" hideToggle="true" style="width: 100%;padding: 0px">\r\n\r\n                    \x3c!-- BASE ITEM --\x3e\r\n                    <mat-expansion-panel-header class="app-sidebar-item" style="padding-left: 0px;"\r\n                        (click)="selectMenu(item.id,item.route)" libColor>\r\n                        <div style="width: 100%; height: 45px;" fxLayout="row" fxLayoutAlign="space-between center"\r\n                            [ngClass]="{\'material-selected-menu\': activeMenu === item.id}">\r\n                            <div fxLayout="row" fxLayoutAlign="start center">\r\n                                <div style="width: 50px;" fxLayout="row" fxLayoutAlign="center center"\r\n                                    *ngIf="item.icon">\r\n                                    <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>\r\n                                </div>\r\n                                <div fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-left: 10px;">\r\n                                    {{item.title}}\r\n                                </div>\r\n                            </div>\r\n                            <div>\r\n                                <mat-icon style="margin: 10px;" *ngIf="meph.expanded">expand_less</mat-icon>\r\n                                <mat-icon style="margin: 10px;" *ngIf="!meph.expanded">expand_more</mat-icon>\r\n\r\n                            </div>\r\n                        </div>\r\n\r\n                    </mat-expansion-panel-header>\r\n\r\n\r\n\r\n\r\n                    \x3c!-- SUB ITEMS --\x3e\r\n                    <div fxFlex style="width: 100%;" [id]="item.id" class="sub-item-list">\r\n\r\n                        <div class="app-sidebar-item" *ngFor="let sub of item.children" style="width: 100%;"\r\n                            fxLayout="column" fxLayoutAlign="start stretch"\r\n                            [ngClass]="{\'material-selected-menu\': activeMenu === sub.id}"\r\n                            (click)="selectMenu(sub.id,sub.route)" libColor>\r\n\r\n                            \x3c!-- DIVIDER IF NEEDED .. TODO: HEIGHT!\r\n                            <div *ngIf="sub.divider" style="width: 100%;\r\n                                border-bottom: 0.5px solid lightgray;">\r\n                            </div> --\x3e\r\n\r\n                            <div class="app-sidebar-item" fxLayout="row" fxLayoutAlign="start stretch"\r\n                                style="width: 100%;">\r\n                                <div style="width: 50px;" fxLayout="row" fxLayoutAlign="center center" *ngIf="sub.icon">\r\n                                    <mat-icon *ngIf="sub.icon">{{sub.icon}}</mat-icon>\r\n                                </div>\r\n                                <div fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-left: 10px;">\r\n                                    {{sub.title}}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </mat-expansion-panel>\r\n\r\n                \x3c!-- DIVIDER IF NEEDED .. TODO: SET COLOR --\x3e\r\n                <div *ngIf="item.divider" style="width: 100%;\r\n                border-bottom: 0.5px solid lightgray;">\r\n\r\n                </div>\r\n\r\n\r\n\r\n\r\n                \x3c!-- SIMPLE MENU ITEMS --\x3e\r\n                <div class="app-sidebar-item" *ngIf="!item.children && !item.divider" fxLayout="row"\r\n                    fxLayoutAlign="start stretch" [ngClass]="{\'material-selected-menu\': activeMenu === item.id}"\r\n                    (click)="selectMenu(item.id,item.route)" libColor>\r\n                    <div style="width: 50px;" fxLayout="row" fxLayoutAlign="center center" *ngIf="item.icon">\r\n                        <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>\r\n                    </div>\r\n                    <div fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-left: 10px;">\r\n                        {{item.title}}\r\n                    </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n        \x3c!-- SIDEBAR FOOTER --\x3e\r\n        <div class="app-sidebar-footer" style="overflow-x: hidden;" [style.border-top]="borderSidebarFooter"\r\n            fxLayout="row" fxLayoutAlign="center center">\r\n            <button mat-button (click)="logout()">\r\n                <mat-icon style="margin-right: 10px;" *ngIf="logoutIcon">{{logoutIcon}}</mat-icon>{{textLogout}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    \x3c!-- HEADER --\x3e\r\n    <div style="height: 100%;width:100%; min-width: 0px !important;" fxLayout="column"\r\n        fxLayoutAlign="space-between stretch">\r\n        <div *ngIf="show" class="app-header">\r\n            <ngx-mat-menu-header [theme]="themeHeader" [visibleNotif]="visibleNotif" [srcLogo]="srcLogo"\r\n                [widthLogo]="widthLogo" [heightLogo]="heightLogo" (showMenu)="setMenu($event)"\r\n                (showNotif)="showNotif($event)" [badge]="badge" [borderHeader]="borderHeader"></ngx-mat-menu-header>\r\n        </div>\r\n        <div fxFlex (swipeleft)="showMenu ? setMenu(false) : \'\'" (swiperight)="show === true ? setMenu(true) : null"\r\n            style="height: 100%; width: 100%;">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n\r\n    <div class="app-small-blur" style="height: 100%;width: 100%; position: absolute;"\r\n        *ngIf="showMenu && showHeader && posSidebar === \'absolute\'" (click)="setMenu(false)"\r\n        (swipeleft)="setMenu(false)">\r\n    </div>\r\n</div>',animations:[r.trigger("enterAnimation",[r.transition(":enter",[r.style({transform:"translateX(100%)",opacity:0}),r.animate("250ms",r.style({transform:"translateX(0)",opacity:1}))]),r.transition(":leave",[r.style({transform:"translateX(0)",opacity:1}),r.animate("250ms",r.style({transform:"translateX(100%)",opacity:0}))])])],styles:[".app-sidebar{-webkit-transition:.4s;transition:.4s;overflow:auto;margin:0!important;height:100%;background:#fff;z-index:900}.app-sidebar-header{height:150px;width:100%;white-space:nowrap;display:block;overflow:hidden;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}.app-sidebar-body{white-space:nowrap;display:block;overflow:hidden;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;width:100%}.app-sidebar-footer{height:60px;width:100%}.app-sidebar-item{height:45px;width:calc(100% - 10px);margin:5px;cursor:pointer}.app-sidebar-item:hover{font-weight:500}.app-small-blur{z-index:800;background-color:#000;opacity:.4}.app-header{-webkit-transition:.5s;transition:.5s;height:60px;background:#fff}.material-selected-menu{border-radius:5px;background-color:rgba(138,138,138,.4)}.app-header-picture{width:50px;height:50px;border-radius:100%;background-size:cover;margin-left:15px;cursor:pointer}.app-header-title{margin-left:15px;font-size:large;font-weight:500}.app-header-subtitle{margin-left:15px;margin-top:5px;font-size:medium}.expandable-item{border:0 solid transparent;background:0 0;box-shadow:none;border-radius:0!important}.sub-item-list{-webkit-transition:.4s;transition:.4s}.mat-expansion-panel-header{padding:0!important;height:60px}"]})],e)}(),x=function(){function e(){this.showMenu=new t.EventEmitter,this.showNotif=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.ngOnChanges=function(){this.heightLogo=this.heightLogo?this.heightLogo:"auto",this.widthLogo=this.widthLogo?this.widthLogo:"auto"},e.prototype.btnShowMenu_Click=function(){this.showMenu.emit()},e.prototype.btnShowNotif_Click=function(){this.showNotif.emit()},m([t.Input()],e.prototype,"theme",void 0),m([t.Input()],e.prototype,"visibleNotif",void 0),m([t.Input()],e.prototype,"srcLogo",void 0),m([t.Input()],e.prototype,"heightLogo",void 0),m([t.Input()],e.prototype,"widthLogo",void 0),m([t.Input()],e.prototype,"badge",void 0),m([t.Input()],e.prototype,"borderHeader",void 0),m([t.Output()],e.prototype,"showMenu",void 0),m([t.Output()],e.prototype,"showNotif",void 0),e=m([t.Component({selector:"ngx-mat-menu-header",template:'<div \r\nstyle="height: 100%;"  \r\n[ngStyle]="theme"\r\n[style.border]="borderHeader"\r\nfxLayout="row" fxLayoutAlign="space-between center">\r\n    <div>\r\n        <button mat-icon-button (click)="btnShowMenu_Click()">\r\n            <mat-icon>menu</mat-icon>\r\n        </button>\r\n    </div>\r\n    <div>\r\n        <img [src]="srcLogo" [ngStyle]="{\'height\': heightLogo, \'width\': widthLogo}"  style="height: 60px; ">\r\n    </div>\r\n    <div>\r\n        <button mat-icon-button *ngIf="visibleNotif">\r\n            <mat-icon (click)="btnShowNotif_Click()" [matBadge]="badge" matBadgeColor="warn" matBadgePosition="before" [matBadgeHidden]="badge == 0">notifications_none</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>',styles:[""]})],e)}(),v=function(){function e(e,t){this.elementRef=e,this.menucomp=t}return e.prototype.onMouseEnter=function(){this.highlight(this.menucomp.badgeColor)},e.prototype.onMouseLeave=function(){this.highlight(null)},e.prototype.highlight=function(e){this.elementRef.nativeElement.style.color=e},e.ctorParameters=function(){return[{type:t.ElementRef},{type:y}]},m([t.HostListener("mouseenter")],e.prototype,"onMouseEnter",null),m([t.HostListener("mouseleave")],e.prototype,"onMouseLeave",null),e=m([t.Directive({selector:"[libColor]"})],e)}(),b=function(){function e(){}return e=m([t.NgModule({declarations:[y,x,v],imports:[a.FlexLayoutModule,s.MatButtonModule,d.MatIconModule,l.MatFormFieldModule,i.CommonModule,u.BrowserModule,p.MatBadgeModule,c.MatExpansionModule,h.MatSelectModule,g.FormsModule],exports:[y]})],e)}();e.NgxMatMenuComponent=y,e.NgxMatMenuModule=b,e.NgxMatMenuService=f,e.ɵa=x,e.ɵb=v,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-mat-menu.umd.min.js.map