primeng/bundles/primeng-slidemenu.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("primeng/dom"),require("@angular/router")):"function"==typeof define&&define.amd?define("primeng/slidemenu",["exports","@angular/core","@angular/animations","@angular/common","primeng/dom","@angular/router"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.slidemenu={}),e.ng.core,e.ng.animations,e.ng.common,e.primeng.dom,e.ng.router)}(this,(function(e,t,i,n,s,o){"use strict";var l=function(){function e(e){this.backLabel="Back",this.easing="ease-out",this.slideMenu=e}return e.prototype.itemClick=function(e,t,i){var n=this;t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),t.items&&!this.slideMenu.animating&&(this.slideMenu.left-=this.slideMenu.menuWidth,this.activeItem=i,this.slideMenu.animating=!0,setTimeout((function(){return n.slideMenu.animating=!1}),this.effectDuration)),!t.items&&this.slideMenu.popup&&this.slideMenu.hide())},e.prototype.ngOnDestroy=function(){this.activeItem=null},e}();l.decorators=[{type:t.Component,args:[{selector:"p-slideMenuSub",template:'\n        <ul [ngClass]="{\'p-slidemenu-rootlist\':root, \'p-submenu-list\':!root, \'p-active-submenu\': (-slideMenu.left == (index * menuWidth))}"\n            [style.width.px]="menuWidth" [style.left.px]="root ? slideMenu.left : slideMenu.menuWidth"\n            [style.transitionProperty]="root ? \'left\' : \'none\'" [style.transitionDuration]="effectDuration + \'ms\'" [style.transitionTimingFunction]="easing">\n            <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">\n                <li *ngIf="child.separator" class="p-menu-separator" [ngClass]="{\'p-hidden\': child.visible === false}">\n                <li *ngIf="!child.separator" #listitem [ngClass]="{\'p-menuitem\':true,\'p-menuitem-active\':listitem==activeItem,\'p-hidden\': child.visible === false}"\n                    [class]="child.styleClass" [ngStyle]="child.style">\n                    <a *ngIf="!child.routerLink" [attr.href]="child.url" class="p-menuitem-link" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id"\n                        [ngClass]="{\'p-disabled\':child.disabled}" [attr.tabindex]="child.disabled ? null : \'0\'"\n                        (click)="itemClick($event, child, listitem)">\n                        <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>\n                        <span class="p-menuitem-text">{{child.label}}</span>\n                        <span class="p-submenu-icon pi pi-fw pi-angle-right" *ngIf="child.items"></span>\n                    </a>\n                    <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="\'p-menuitem-link-active\'"\n                        [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" [href]="child.url" class="p-menuitem-link"\n                        [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" [attr.tabindex]="child.disabled ? null : \'0\'"\n                        [ngClass]="{\'p-disabled\':child.disabled}"\n                        (click)="itemClick($event, child, listitem)"\n                        [fragment]="child.fragment" [queryParamsHandling]="child.queryParamsHandling" [preserveFragment]="child.preserveFragment" [skipLocationChange]="child.skipLocationChange" [replaceUrl]="child.replaceUrl" [state]="child.state">\n                        <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>\n                        <span class="p-menuitem-text">{{child.label}}</span>\n                        <span class="p-submenu-icon pi pi-fw pi-caret-right" *ngIf="child.items"></span>\n                    </a>\n                    <p-slideMenuSub class="p-submenu" [item]="child" [index]="index + 1" [menuWidth]="menuWidth" *ngIf="child.items"></p-slideMenuSub>\n                </li>\n            </ng-template>\n        </ul>\n    ',encapsulation:t.ViewEncapsulation.None}]}],l.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[t.forwardRef((function(){return a}))]}]}]},l.propDecorators={item:[{type:t.Input}],root:[{type:t.Input}],backLabel:[{type:t.Input}],menuWidth:[{type:t.Input}],effectDuration:[{type:t.Input}],easing:[{type:t.Input}],index:[{type:t.Input}]};var a=function(){function e(e,i,n){this.el=e,this.renderer=i,this.cd=n,this.menuWidth=190,this.viewportHeight=180,this.effectDuration=250,this.easing="ease-out",this.backLabel="Back",this.autoZIndex=!0,this.baseZIndex=0,this.showTransitionOptions=".12s cubic-bezier(0, 0, 0.2, 1)",this.hideTransitionOptions=".1s linear",this.onShow=new t.EventEmitter,this.onHide=new t.EventEmitter,this.left=0,this.animating=!1}return e.prototype.ngAfterViewChecked=function(){this.viewportUpdated||this.popup||!this.containerViewChild||(this.updateViewPort(),this.viewportUpdated=!0)},Object.defineProperty(e.prototype,"container",{set:function(e){this.containerViewChild=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"backward",{set:function(e){this.backwardViewChild=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"slideMenuContent",{set:function(e){this.slideMenuContentViewChild=e},enumerable:!1,configurable:!0}),e.prototype.updateViewPort=function(){this.slideMenuContentViewChild.nativeElement.style.height=this.viewportHeight-s.DomHandler.getHiddenElementOuterHeight(this.backwardViewChild.nativeElement)+"px"},e.prototype.toggle=function(e){this.visible?this.hide():this.show(e),this.preventDocumentDefault=!0},e.prototype.show=function(e){this.target=e.currentTarget,this.visible=!0,this.preventDocumentDefault=!0,this.cd.markForCheck()},e.prototype.onOverlayAnimationStart=function(e){switch(e.toState){case"visible":this.popup&&(this.updateViewPort(),this.moveOnTop(),this.onShow.emit({}),this.appendOverlay(),s.DomHandler.absolutePosition(this.containerViewChild.nativeElement,this.target),this.bindDocumentClickListener(),this.bindDocumentResizeListener(),this.bindScrollListener());break;case"void":this.onOverlayHide(),this.onHide.emit({})}},e.prototype.appendOverlay=function(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.containerViewChild.nativeElement):s.DomHandler.appendChild(this.containerViewChild.nativeElement,this.appendTo))},e.prototype.restoreOverlayAppend=function(){this.container&&this.appendTo&&this.el.nativeElement.appendChild(this.containerViewChild.nativeElement)},e.prototype.moveOnTop=function(){this.autoZIndex&&(this.containerViewChild.nativeElement.style.zIndex=String(this.baseZIndex+ ++s.DomHandler.zindex))},e.prototype.hide=function(){this.visible=!1,this.cd.markForCheck()},e.prototype.onWindowResize=function(){this.hide()},e.prototype.onClick=function(e){this.preventDocumentDefault=!0},e.prototype.goBack=function(){this.left+=this.menuWidth},e.prototype.bindDocumentClickListener=function(){var e=this;if(!this.documentClickListener){var t=this.el?this.el.nativeElement.ownerDocument:"document";this.documentClickListener=this.renderer.listen(t,"click",(function(){e.preventDocumentDefault||(e.hide(),e.cd.detectChanges()),e.preventDocumentDefault=!1}))}},e.prototype.unbindDocumentClickListener=function(){this.documentClickListener&&(this.documentClickListener(),this.documentClickListener=null)},e.prototype.bindDocumentResizeListener=function(){this.documentResizeListener=this.onWindowResize.bind(this),window.addEventListener("resize",this.documentResizeListener)},e.prototype.unbindDocumentResizeListener=function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},e.prototype.bindScrollListener=function(){var e=this;this.scrollHandler||(this.scrollHandler=new s.ConnectedOverlayScrollHandler(this.target,(function(){e.visible&&e.hide()}))),this.scrollHandler.bindScrollListener()},e.prototype.unbindScrollListener=function(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},e.prototype.onOverlayHide=function(){this.unbindDocumentClickListener(),this.unbindDocumentResizeListener(),this.unbindScrollListener(),this.preventDocumentDefault=!1,this.target=null,this.left=0},e.prototype.ngOnDestroy=function(){this.popup&&(this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.restoreOverlayAppend(),this.onOverlayHide())},e}();a.decorators=[{type:t.Component,args:[{selector:"p-slideMenu",template:'\n        <div #container [ngClass]="{\'p-slidemenu p-component\':true, \'p-slidemenu-overlay\':popup}"\n            [class]="styleClass" [ngStyle]="style" (click)="onClick($event)"\n            [@overlayAnimation]="{value: \'visible\', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)" *ngIf="!popup || visible">\n            <div class="p-slidemenu-wrapper" [style.height]="left ? viewportHeight + \'px\' : \'auto\'">\n                <div #slideMenuContent class="p-slidemenu-content">\n                    <p-slideMenuSub [item]="model" root="root" [index]="0" [menuWidth]="menuWidth" [effectDuration]="effectDuration" [easing]="easing"></p-slideMenuSub>\n                </div>\n                <div #backward class="p-slidemenu-backward" [style.display]="left ? \'block\' : \'none\'" (click)="goBack()">\n                    <span class="p-slidemenu-backward-icon pi pi-fw pi-caret-left"></span><span>{{backLabel}}</span>\n                </div>\n            </div>\n        </div>\n    ',animations:[i.trigger("overlayAnimation",[i.transition(":enter",[i.style({opacity:0,transform:"scaleY(0.8)"}),i.animate("{{showTransitionParams}}")]),i.transition(":leave",[i.animate("{{hideTransitionParams}}",i.style({opacity:0}))])])],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-slidemenu{width:12.5rem}.p-slidemenu.p-slidemenu-overlay{position:absolute}.p-slidemenu ul{list-style:none;margin:0;padding:0}.p-slidemenu .p-slidemenu-rootlist{position:absolute;top:0}.p-slidemenu .p-submenu-list{display:none;position:absolute;top:0;width:12.5rem}.p-slidemenu .p-menuitem-link{align-items:center;cursor:pointer;display:flex;overflow:hidden;text-decoration:none}.p-slidemenu .p-menuitem-icon,.p-slidemenu .p-menuitem-text{vertical-align:middle}.p-slidemenu .p-menuitem{position:relative}.p-slidemenu .p-menuitem-link .p-submenu-icon{margin-left:auto}.p-slidemenu .p-slidemenu-wrapper{position:relative}.p-slidemenu .p-slidemenu-content{overflow-x:hidden;overflow-y:auto;position:relative}.p-slidemenu-backward{bottom:0;cursor:pointer;display:none;position:absolute;width:100%}.p-slidemenu-backward .p-slidemenu-backward-icon,.p-slidemenu-backward span{vertical-align:middle}.p-slidemenu .p-menuitem-active{position:static}.p-slidemenu .p-menuitem-active>.p-submenu>.p-submenu-list{display:block}.p-slidemenu .p-active-submenu>.p-menuitem-active>.p-submenu>.p-submenu-list,.p-slidemenu ul:not(.p-active-submenu)>.p-menuitem:not(.p-menuitem-active){display:none}.p-slidemenu .p-active-submenu>.p-menuitem-active~.p-menuitem{display:block}"]}]}],a.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:t.ChangeDetectorRef}]},a.propDecorators={model:[{type:t.Input}],popup:[{type:t.Input}],style:[{type:t.Input}],styleClass:[{type:t.Input}],menuWidth:[{type:t.Input}],viewportHeight:[{type:t.Input}],effectDuration:[{type:t.Input}],easing:[{type:t.Input}],backLabel:[{type:t.Input}],appendTo:[{type:t.Input}],autoZIndex:[{type:t.Input}],baseZIndex:[{type:t.Input}],showTransitionOptions:[{type:t.Input}],hideTransitionOptions:[{type:t.Input}],onShow:[{type:t.Output}],onHide:[{type:t.Output}],container:[{type:t.ViewChild,args:["container"]}],backward:[{type:t.ViewChild,args:["backward"]}],slideMenuContent:[{type:t.ViewChild,args:["slideMenuContent"]}]};var r=function(){};r.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.RouterModule],exports:[a,o.RouterModule],declarations:[a,l]}]}],e.SlideMenu=a,e.SlideMenuModule=r,e.SlideMenuSub=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-slidemenu.umd.min.js.map