UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

2 lines 8.14 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("primeng/ripple"),require("primeng/dom"),require("primeng/api")):"function"==typeof define&&define.amd?define("primeng/sidebar",["exports","@angular/core","@angular/animations","@angular/common","primeng/ripple","primeng/dom","primeng/api"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.sidebar={}),e.ng.core,e.ng.animations,e.ng.common,e.primeng.ripple,e.primeng.dom,e.primeng.api)}(this,(function(e,t,i,n,s,a,o){"use strict";var r=function(){function e(e,i,n){this.el=e,this.renderer=i,this.cd=n,this.position="left",this.blockScroll=!1,this.autoZIndex=!0,this.baseZIndex=0,this.modal=!0,this.dismissible=!0,this.showCloseIcon=!0,this.closeOnEscape=!0,this.onShow=new t.EventEmitter,this.onHide=new t.EventEmitter,this.visibleChange=new t.EventEmitter}return e.prototype.ngAfterViewInit=function(){this.initialized=!0,this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.containerViewChild.nativeElement):a.DomHandler.appendChild(this.containerViewChild.nativeElement,this.appendTo)),this.visible&&this.show()},e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"content":default:e.contentTemplate=t.template}}))},Object.defineProperty(e.prototype,"visible",{get:function(){return this._visible},set:function(e){this._visible=e,this.initialized&&this.containerViewChild&&this.containerViewChild.nativeElement&&(this._visible?this.show():this.preventVisibleChangePropagation?this.preventVisibleChangePropagation=!1:this.hide())},enumerable:!1,configurable:!0}),e.prototype.ngAfterViewChecked=function(){this.executePostDisplayActions&&(this.onShow.emit({}),this.executePostDisplayActions=!1)},e.prototype.show=function(){this.executePostDisplayActions=!0,this.autoZIndex&&(this.containerViewChild.nativeElement.style.zIndex=String(this.baseZIndex+ ++a.DomHandler.zindex)),this.modal&&this.enableModality()},e.prototype.hide=function(){this.onHide.emit({}),this.modal&&this.disableModality()},e.prototype.close=function(e){this.preventVisibleChangePropagation=!0,this.hide(),this.visibleChange.emit(!1),e.preventDefault()},e.prototype.enableModality=function(){var e=this;this.mask||(this.mask=document.createElement("div"),this.mask.style.zIndex=String(parseInt(this.containerViewChild.nativeElement.style.zIndex)-1),a.DomHandler.addMultipleClasses(this.mask,"p-component-overlay p-sidebar-mask"),this.dismissible&&(this.maskClickListener=this.renderer.listen(this.mask,"click",(function(t){e.dismissible&&e.close(t)}))),document.body.appendChild(this.mask),this.blockScroll&&a.DomHandler.addClass(document.body,"p-overflow-hidden"))},e.prototype.disableModality=function(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),this.blockScroll&&a.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},e.prototype.onAnimationStart=function(e){switch(e.toState){case"visible":this.closeOnEscape&&this.bindDocumentEscapeListener();break;case"hidden":this.unbindGlobalListeners()}},e.prototype.bindDocumentEscapeListener=function(){var e=this,t=this.el?this.el.nativeElement.ownerDocument:"document";this.documentEscapeListener=this.renderer.listen(t,"keydown",(function(t){27==t.which&&parseInt(e.containerViewChild.nativeElement.style.zIndex)===a.DomHandler.zindex+e.baseZIndex&&e.close(t)}))},e.prototype.unbindDocumentEscapeListener=function(){this.documentEscapeListener&&(this.documentEscapeListener(),this.documentEscapeListener=null)},e.prototype.unbindMaskClickListener=function(){this.maskClickListener&&(this.maskClickListener(),this.maskClickListener=null)},e.prototype.unbindGlobalListeners=function(){this.unbindMaskClickListener(),this.unbindDocumentEscapeListener()},e.prototype.ngOnDestroy=function(){this.initialized=!1,this.visible&&this.hide(),this.appendTo&&this.el.nativeElement.appendChild(this.containerViewChild.nativeElement),this.unbindGlobalListeners()},e}();r.decorators=[{type:t.Component,args:[{selector:"p-sidebar",template:'\n <div #container [ngClass]="{\'p-sidebar\':true, \'p-sidebar-active\': visible,\n \'p-sidebar-left\': (position === \'left\'), \'p-sidebar-right\': (position === \'right\'),\n \'p-sidebar-top\': (position === \'top\'), \'p-sidebar-bottom\': (position === \'bottom\'),\n \'p-sidebar-full\': fullScreen}"\n [@panelState]="visible ? \'visible\' : \'hidden\'" (@panelState.start)="onAnimationStart($event)" [ngStyle]="style" [class]="styleClass" role="complementary" [attr.aria-modal]="modal">\n <div class="p-sidebar-content">\n <button type="button" class="p-sidebar-close p-link" *ngIf="showCloseIcon" (click)="close($event)" (keydown.enter)="close($event)" [attr.aria-label]="ariaCloseLabel" pRipple>\n <span class="p-sidebar-close-icon pi pi-times"></span>\n </button>\n <ng-content></ng-content>\n <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>\n </div>\n </div>\n ',animations:[i.trigger("panelState",[i.state("hidden",i.style({opacity:0})),i.state("visible",i.style({opacity:1})),i.transition("visible => hidden",i.animate("300ms ease-in")),i.transition("hidden => visible",i.animate("300ms ease-out"))])],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-sidebar{position:fixed;transition:transform .3s}.p-sidebar-content{position:relative}.p-sidebar-close{align-items:center;display:flex;justify-content:center;overflow:hidden;position:absolute;right:0;top:0}.p-sidebar-mask{transition-property:background-color}.p-sidebar-mask,.p-sidebar-mask-leave.p-component-overlay{background-color:transparent}.p-sidebar-left{height:100%;left:0;top:0;transform:translateX(-100%);width:20rem}.p-sidebar-left.p-sidebar-active{transform:translateX(0)}.p-sidebar-right{height:100%;right:0;top:0;transform:translateX(100%);width:20rem}.p-sidebar-right.p-sidebar-active{transform:translateX(0)}.p-sidebar-top{height:10rem;left:0;top:0;transform:translateY(-100%);width:100%}.p-sidebar-top.p-sidebar-active{transform:translateY(0)}.p-sidebar-bottom{bottom:0;height:10rem;left:0;transform:translateY(100%);width:100%}.p-sidebar-bottom.p-sidebar-active{transform:translateY(0)}.p-sidebar-full{height:100%;left:0;top:0;transition:none;width:100%}.p-sidebar-left.p-sidebar-sm,.p-sidebar-right.p-sidebar-sm{width:20rem}.p-sidebar-left.p-sidebar-md,.p-sidebar-right.p-sidebar-md{width:40rem}.p-sidebar-left.p-sidebar-lg,.p-sidebar-right.p-sidebar-lg{width:60rem}.p-sidebar-bottom.p-sidebar-sm,.p-sidebar-top.p-sidebar-sm{height:10rem}.p-sidebar-bottom.p-sidebar-md,.p-sidebar-top.p-sidebar-md{height:20rem}.p-sidebar-bottom.p-sidebar-lg,.p-sidebar-top.p-sidebar-lg{height:30rem}@media screen and (max-width:64em){.p-sidebar-left.p-sidebar-lg,.p-sidebar-left.p-sidebar-md,.p-sidebar-right.p-sidebar-lg,.p-sidebar-right.p-sidebar-md{width:20rem}}"]}]}],r.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:t.ChangeDetectorRef}]},r.propDecorators={position:[{type:t.Input}],fullScreen:[{type:t.Input}],appendTo:[{type:t.Input}],blockScroll:[{type:t.Input}],style:[{type:t.Input}],styleClass:[{type:t.Input}],ariaCloseLabel:[{type:t.Input}],autoZIndex:[{type:t.Input}],baseZIndex:[{type:t.Input}],modal:[{type:t.Input}],dismissible:[{type:t.Input}],showCloseIcon:[{type:t.Input}],closeOnEscape:[{type:t.Input}],containerViewChild:[{type:t.ViewChild,args:["container"]}],templates:[{type:t.ContentChildren,args:[o.PrimeTemplate]}],onShow:[{type:t.Output}],onHide:[{type:t.Output}],visibleChange:[{type:t.Output}],visible:[{type:t.Input}]};var p=function(){};p.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,s.RippleModule],exports:[r],declarations:[r]}]}],e.Sidebar=r,e.SidebarModule=p,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=primeng-sidebar.umd.min.js.map