import * as i0 from '@angular/core'; import { forwardRef, Component, ViewEncapsulation, Inject, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, NgModule } from '@angular/core'; import { trigger, transition, style, animate } from '@angular/animations'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom'; import * as i3 from '@angular/router'; import { RouterModule } from '@angular/router'; import { ZIndexUtils } from 'primeng/utils'; import * as i2 from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip'; import * as i4 from 'primeng/api'; class SlideMenuSub { constructor(slideMenu) { this.backLabel = 'Back'; this.easing = 'ease-out'; this.slideMenu = slideMenu; } itemClick(event, item, listitem) { if (item.disabled) { event.preventDefault(); return; } if (!item.url) { event.preventDefault(); } if (item.command) { item.command({ originalEvent: event, item: item }); } if (item.items && !this.slideMenu.animating) { this.slideMenu.left -= this.slideMenu.menuWidth; this.activeItem = listitem; this.slideMenu.animating = true; setTimeout(() => this.slideMenu.animating = false, this.effectDuration); } if (!item.items && this.slideMenu.popup) { this.slideMenu.hide(); } } focusNextList(listitem) { if (!this.slideMenu.animating) { let focusableElements = DomHandler.getFocusableElements(listitem); if (focusableElements && focusableElements.length > 0) { focusableElements[0].focus(); } this.unbindTransitionEndListener(); } } onItemKeyDown(event) { let listItem = event.currentTarget.parentElement; switch (event.code) { case 'Space': case 'Enter': if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) { listItem.children[0].click(); this.transitionEndListener = this.focusNextList.bind(this, listItem); this.sublistViewChild.nativeElement.addEventListener('transitionend', this.transitionEndListener); } event.preventDefault(); break; default: break; } } unbindTransitionEndListener() { if (this.transitionEndListener && this.sublistViewChild) { this.sublistViewChild.nativeElement.removeEventListener('transitionend', this.transitionEndListener); this.transitionEndListener = null; } } ngOnDestroy() { this.activeItem = null; this.unbindTransitionEndListener(); } get isActive() { return -this.slideMenu.left == (this.index * this.menuWidth); } } SlideMenuSub.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenuSub, deps: [{ token: forwardRef(() => SlideMenu) }], target: i0.ɵɵFactoryTarget.Component }); SlideMenuSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SlideMenuSub, selector: "p-slideMenuSub", inputs: { item: "item", root: "root", backLabel: "backLabel", menuWidth: "menuWidth", effectDuration: "effectDuration", easing: "easing", index: "index" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true }], ngImport: i0, template: ` `, isInline: true, components: [{ type: SlideMenuSub, selector: "p-slideMenuSub", inputs: ["item", "root", "backLabel", "menuWidth", "effectDuration", "easing", "index"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenuSub, decorators: [{ type: Component, args: [{ selector: 'p-slideMenuSub', template: ` `, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' } }] }], ctorParameters: function () { return [{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => SlideMenu)] }] }]; }, propDecorators: { item: [{ type: Input }], root: [{ type: Input }], backLabel: [{ type: Input }], menuWidth: [{ type: Input }], effectDuration: [{ type: Input }], easing: [{ type: Input }], index: [{ type: Input }], sublistViewChild: [{ type: ViewChild, args: ['sublist'] }] } }); class SlideMenu { constructor(el, renderer, cd, config, overlayService) { this.el = el; this.renderer = renderer; this.cd = cd; this.config = config; this.overlayService = overlayService; this.menuWidth = 190; this.viewportHeight = 180; this.effectDuration = 250; this.easing = 'ease-out'; this.backLabel = 'Back'; this.autoZIndex = true; this.baseZIndex = 0; this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)'; this.hideTransitionOptions = '.1s linear'; this.onShow = new EventEmitter(); this.onHide = new EventEmitter(); this.left = 0; this.animating = false; } ngAfterViewChecked() { if (!this.viewportUpdated && !this.popup && this.containerViewChild) { this.updateViewPort(); this.viewportUpdated = true; } } set container(element) { this.containerViewChild = element; } set backward(element) { this.backwardViewChild = element; } set slideMenuContent(element) { this.slideMenuContentViewChild = element; } updateViewPort() { this.slideMenuContentViewChild.nativeElement.style.height = this.viewportHeight - DomHandler.getHiddenElementOuterHeight(this.backwardViewChild.nativeElement) + 'px'; } toggle(event) { if (this.visible) this.hide(); else this.show(event); this.preventDocumentDefault = true; } show(event) { this.target = event.currentTarget; this.visible = true; this.preventDocumentDefault = true; this.cd.markForCheck(); } onOverlayClick(event) { if (this.popup) { this.overlayService.add({ originalEvent: event, target: this.el.nativeElement }); } this.preventDocumentDefault = true; } onOverlayAnimationStart(event) { switch (event.toState) { case 'visible': if (this.popup) { this.updateViewPort(); this.moveOnTop(); this.onShow.emit({}); this.appendOverlay(); DomHandler.absolutePosition(this.containerViewChild.nativeElement, this.target); this.bindDocumentClickListener(); this.bindDocumentResizeListener(); this.bindScrollListener(); } break; case 'void': this.onOverlayHide(); this.onHide.emit({}); break; } } onOverlayAnimationEnd(event) { switch (event.toState) { case 'void': ZIndexUtils.clear(event.element); break; } } appendOverlay() { if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.containerViewChild.nativeElement); else DomHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo); } } restoreOverlayAppend() { if (this.container && this.appendTo) { this.el.nativeElement.appendChild(this.containerViewChild.nativeElement); } } moveOnTop() { if (this.autoZIndex) { ZIndexUtils.set('menu', this.containerViewChild.nativeElement, this.baseZIndex + this.config.zIndex.menu); } } hide() { this.visible = false; this.cd.markForCheck(); } onWindowResize() { this.hide(); } goBack() { this.left += this.menuWidth; } onBackwardKeydown(event) { this.goBack(); if (!this.left) { setTimeout(() => { let focusableElements = DomHandler.getFocusableElements(this.el.nativeElement); if (focusableElements && focusableElements.length > 0) { focusableElements[0].focus(); } }, 1); } event.preventDefault(); } bindDocumentClickListener() { if (!this.documentClickListener) { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => { if (!this.preventDocumentDefault) { this.hide(); this.cd.detectChanges(); } this.preventDocumentDefault = false; }); } } unbindDocumentClickListener() { if (this.documentClickListener) { this.documentClickListener(); this.documentClickListener = null; } } bindDocumentResizeListener() { this.documentResizeListener = this.onWindowResize.bind(this); window.addEventListener('resize', this.documentResizeListener); } unbindDocumentResizeListener() { if (this.documentResizeListener) { window.removeEventListener('resize', this.documentResizeListener); this.documentResizeListener = null; } } bindScrollListener() { if (!this.scrollHandler) { this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => { if (this.visible) { this.hide(); } }); } this.scrollHandler.bindScrollListener(); } unbindScrollListener() { if (this.scrollHandler) { this.scrollHandler.unbindScrollListener(); } } onOverlayHide() { this.unbindDocumentClickListener(); this.unbindDocumentResizeListener(); this.unbindScrollListener(); this.preventDocumentDefault = false; this.target = null; this.left = 0; } ngOnDestroy() { if (this.popup) { if (this.scrollHandler) { this.scrollHandler.destroy(); this.scrollHandler = null; } this.restoreOverlayAppend(); this.onOverlayHide(); } } } SlideMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenu, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i4.PrimeNGConfig }, { token: i4.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); SlideMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SlideMenu, selector: "p-slideMenu", inputs: { model: "model", popup: "popup", style: "style", styleClass: "styleClass", menuWidth: "menuWidth", viewportHeight: "viewportHeight", effectDuration: "effectDuration", easing: "easing", backLabel: "backLabel", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "backward", first: true, predicate: ["backward"], descendants: true }, { propertyName: "slideMenuContent", first: true, predicate: ["slideMenuContent"], descendants: true }], ngImport: i0, template: `
{{backLabel}}
`, isInline: true, styles: [".p-slidemenu{width:12.5rem}.p-slidemenu.p-slidemenu-overlay{position:absolute;top:0;left:0}.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{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden}.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{position:absolute;bottom:0;width:100%;cursor:pointer;display:none}.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 ul:not(.p-active-submenu)>.p-menuitem:not(.p-menuitem-active),.p-slidemenu .p-active-submenu>.p-menuitem-active>.p-submenu>.p-submenu-list{display:none}.p-slidemenu .p-active-submenu>.p-menuitem-active~.p-menuitem{display:block}\n"], components: [{ type: SlideMenuSub, selector: "p-slideMenuSub", inputs: ["item", "root", "backLabel", "menuWidth", "effectDuration", "easing", "index"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenu, decorators: [{ type: Component, args: [{ selector: 'p-slideMenu', template: `
{{backLabel}}
`, animations: [ trigger('overlayAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}') ]), transition(':leave', [ animate('{{hideTransitionParams}}', style({ opacity: 0 })) ]) ]) ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-slidemenu{width:12.5rem}.p-slidemenu.p-slidemenu-overlay{position:absolute;top:0;left:0}.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{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden}.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{position:absolute;bottom:0;width:100%;cursor:pointer;display:none}.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 ul:not(.p-active-submenu)>.p-menuitem:not(.p-menuitem-active),.p-slidemenu .p-active-submenu>.p-menuitem-active>.p-submenu>.p-submenu-list{display:none}.p-slidemenu .p-active-submenu>.p-menuitem-active~.p-menuitem{display:block}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i4.PrimeNGConfig }, { type: i4.OverlayService }]; }, propDecorators: { model: [{ type: Input }], popup: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], menuWidth: [{ type: Input }], viewportHeight: [{ type: Input }], effectDuration: [{ type: Input }], easing: [{ type: Input }], backLabel: [{ type: Input }], appendTo: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], onShow: [{ type: Output }], onHide: [{ type: Output }], container: [{ type: ViewChild, args: ['container'] }], backward: [{ type: ViewChild, args: ['backward'] }], slideMenuContent: [{ type: ViewChild, args: ['slideMenuContent'] }] } }); class SlideMenuModule { } SlideMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); SlideMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenuModule, declarations: [SlideMenu, SlideMenuSub], imports: [CommonModule, RouterModule, TooltipModule], exports: [SlideMenu, RouterModule, TooltipModule] }); SlideMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenuModule, imports: [[CommonModule, RouterModule, TooltipModule], RouterModule, TooltipModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SlideMenuModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, RouterModule, TooltipModule], exports: [SlideMenu, RouterModule, TooltipModule], declarations: [SlideMenu, SlideMenuSub] }] }] }); /** * Generated bundle index. Do not edit. */ export { SlideMenu, SlideMenuModule, SlideMenuSub };