primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [, 'p-sidebar-right': (position === 'right' && !fullScreen),\n 'p-sidebar-top': (position === 'top' && !fullScreen), 'p-sidebar-bottom': (position === 'bottom' && !fullScreen),\n 'p-sidebar-full': fullScreen}\" *ngIf=\"visible\" [@panelState]=\"{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}\" (@panelState.start)=\"onAnimationStart($event)\" [ngStyle]=\"style\" [class]=\"styleClass\" role=\"complementary\" [attr.aria-modal]=\"modal\">\n <div class=\"p-sidebar-header\">\n <button type=\"button\" class=\"p-sidebar-close p-sidebar-icon 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 </div>\n <div class=\"p-sidebar-content\">\n <ng-content></ng-content>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </div>\n </div>\n ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":35,"character":8},"arguments":["panelState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":36,"character":12},"arguments":["void => visible",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"useAnimation","line":37,"character":16},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animation","line":7,"character":22},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":8,"character":4},"arguments":[{"transform":"{{transform}}","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":9,"character":4},"arguments":["{{transition}}"]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":39,"character":12},"arguments":["visible => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"useAnimation","line":40,"character":16},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animation","line":12,"character":22},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":13,"character":4},"arguments":["{{transition}}",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":13,"character":30},"arguments":[{"transform":"{{transform}}","opacity":0}]}]}]]}]}]]}]]}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":44,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":45,"character":19},"member":"None"},"styles":[".p-sidebar{display:flex;flex-direction:column;position:fixed;transition:transform .3s}.p-sidebar-content{overflow-y:auto;position:relative}.p-sidebar-header{align-items:center;display:flex;justify-content:flex-end}.p-sidebar-icon{align-items:center;display:flex;justify-content:center}.p-sidebar-mask{transition-property:background-color}.p-sidebar-mask,.p-sidebar-mask.p-sidebar-mask-leave.p-component-overlay{background-color:transparent}.p-sidebar-left{height:100%;left:0;top:0;width:20rem}.p-sidebar-right{height:100%;right:0;top:0;width:20rem}.p-sidebar-top{height:10rem;left:0;top:0;width:100%}.p-sidebar-bottom{bottom:0;height:10rem;left:0;width:100%}.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}}"]}]}],"members":{"appendTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"blockScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"ariaCloseLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"autoZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"baseZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"dismissible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"showCloseIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"transitionOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":74,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"PrimeTemplate","line":74,"character":21}]}]}],"onShow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":5}}]}],"onHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":5}}]}],"visibleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":102,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":102,"character":56},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":102,"character":78}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"fullScreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"enableModality":[{"__symbolic":"method"}],"disableModality":[{"__symbolic":"method"}],"onAnimationStart":[{"__symbolic":"method"}],"appendContainer":[{"__symbolic":"method"}],"bindDocumentEscapeListener":[{"__symbolic":"method"}],"unbindDocumentEscapeListener":[{"__symbolic":"method"}],"unbindMaskClickListener":[{"__symbolic":"method"}],"unbindGlobalListeners":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SidebarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":296,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":297,"character":14},{"__symbolic":"reference","module":"primeng/ripple","name":"RippleModule","line":297,"character":27}],"exports":[{"__symbolic":"reference","name":"Sidebar"}],"declarations":[{"__symbolic":"reference","name":"Sidebar"}]}]}],"members":{}}},"origins":{"Sidebar":"./sidebar","SidebarModule":"./sidebar"},"importAs":"primeng/sidebar"}