import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, Input, ViewChild, ContentChildren, Output, NgModule } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { RippleModule } from 'primeng/ripple'; import { DomHandler } from 'primeng/dom'; import { PrimeTemplate } from 'primeng/api'; class Sidebar { constructor(el, renderer, cd) { this.el = el; this.renderer = renderer; this.cd = cd; this.position = 'left'; this.blockScroll = false; this.autoZIndex = true; this.baseZIndex = 0; this.modal = true; this.dismissible = true; this.showCloseIcon = true; this.closeOnEscape = true; this.onShow = new EventEmitter(); this.onHide = new EventEmitter(); this.visibleChange = new EventEmitter(); } ngAfterViewInit() { this.initialized = true; if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.containerViewChild.nativeElement); else DomHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo); } if (this.visible) { this.show(); } } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'content': this.contentTemplate = item.template; break; default: this.contentTemplate = item.template; break; } }); } get visible() { return this._visible; } set visible(val) { this._visible = val; if (this.initialized && this.containerViewChild && this.containerViewChild.nativeElement) { if (this._visible) this.show(); else { if (this.preventVisibleChangePropagation) this.preventVisibleChangePropagation = false; else this.hide(); } } } ngAfterViewChecked() { if (this.executePostDisplayActions) { this.onShow.emit({}); this.executePostDisplayActions = false; } } show() { this.executePostDisplayActions = true; if (this.autoZIndex) { this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex)); } if (this.modal) { this.enableModality(); } } hide() { this.onHide.emit({}); if (this.modal) { this.disableModality(); } } close(event) { this.preventVisibleChangePropagation = true; this.hide(); this.visibleChange.emit(false); event.preventDefault(); } enableModality() { if (!this.mask) { this.mask = document.createElement('div'); this.mask.style.zIndex = String(parseInt(this.containerViewChild.nativeElement.style.zIndex) - 1); DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-sidebar-mask'); if (this.dismissible) { this.maskClickListener = this.renderer.listen(this.mask, 'click', (event) => { if (this.dismissible) { this.close(event); } }); } document.body.appendChild(this.mask); if (this.blockScroll) { DomHandler.addClass(document.body, 'p-overflow-hidden'); } } } disableModality() { if (this.mask) { this.unbindMaskClickListener(); document.body.removeChild(this.mask); if (this.blockScroll) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); } this.mask = null; } } onAnimationStart(event) { switch (event.toState) { case 'visible': if (this.closeOnEscape) { this.bindDocumentEscapeListener(); } break; case 'hidden': this.unbindGlobalListeners(); break; } } bindDocumentEscapeListener() { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => { if (event.which == 27) { if (parseInt(this.containerViewChild.nativeElement.style.zIndex) === (DomHandler.zindex + this.baseZIndex)) { this.close(event); } } }); } unbindDocumentEscapeListener() { if (this.documentEscapeListener) { this.documentEscapeListener(); this.documentEscapeListener = null; } } unbindMaskClickListener() { if (this.maskClickListener) { this.maskClickListener(); this.maskClickListener = null; } } unbindGlobalListeners() { this.unbindMaskClickListener(); this.unbindDocumentEscapeListener(); } ngOnDestroy() { this.initialized = false; if (this.visible) { this.hide(); } if (this.appendTo) { this.el.nativeElement.appendChild(this.containerViewChild.nativeElement); } this.unbindGlobalListeners(); } } Sidebar.decorators = [ { type: Component, args: [{ selector: 'p-sidebar', template: `