| 1 | {"version":3,"sources":["ng://primeng/megamenu/megamenu.ts"],"names":["MegaMenu","el","renderer","this","orientation","autoZIndex","baseZIndex","prototype","onItemMouseEnter","event","item","menuitem","disabled","hideTimeout","clearTimeout","activeItem","items","submenu","children","nextElementSibling","style","zIndex","String","DomHandler","zindex","top","getOuterHeight","left","getOuterWidth","onItemMouseLeave","link","_this","setTimeout","itemClick","preventDefault","url","command","originalEvent","getColumnClass","columnClass","length","ElementRef","Renderer2","__decorate","Input","Component","selector","template","changeDetection","ChangeDetectionStrategy","Default","MegaMenuModule","NgModule","imports","CommonModule","RouterModule","exports","declarations"],"mappings":"4zBAAAA,EAAA,WA0FI,SAAAA,EAAmBC,EAAuBC,GAAvBC,KAAAF,GAAAA,EAAuBE,KAAAD,SAAAA,EAVjCC,KAAAC,YAAsB,aAEtBD,KAAAE,YAAsB,EAEtBF,KAAAG,WAAqB,EA4FlC,OApFIN,EAAAO,UAAAC,iBAAA,SAAiBC,EAAOC,EAAMC,GAC1B,IAAIA,EAASC,WAITT,KAAKU,cACLC,aAAaX,KAAKU,aAClBV,KAAKU,YAAc,MAGvBV,KAAKY,WAAaL,EAEdC,EAASK,OAAO,CAChB,IAAIC,EAAUP,EAAKQ,SAAS,GAAGC,mBAC3BF,IACId,KAAKE,aACLY,EAAQG,MAAMC,OAASC,OAAOnB,KAAKG,cAAgBiB,EAAAA,WAAWC,SAGzC,eAArBrB,KAAKC,aACLa,EAAQG,MAAMK,IAAMF,EAAAA,WAAWG,eAAehB,EAAKQ,SAAS,IAAM,KAClED,EAAQG,MAAMO,KAAO,OAEK,aAArBxB,KAAKC,cACVa,EAAQG,MAAMK,IAAM,MACpBR,EAAQG,MAAMO,KAAOJ,EAAAA,WAAWK,cAAclB,EAAKQ,SAAS,IAAM,SAMlFlB,EAAAO,UAAAsB,iBAAA,SAAiBpB,EAAOqB,GAAxB,IAAAC,EAAA5B,KACIA,KAAKU,YAAcmB,YAAW,WAC1BD,EAAKhB,WAAa,OACnB,MAGPf,EAAAO,UAAA0B,UAAA,SAAUxB,EAAOC,GACTA,EAAKE,SACLH,EAAMyB,kBAILxB,EAAKyB,KACN1B,EAAMyB,iBAGNxB,EAAK0B,SACL1B,EAAK0B,QAAQ,CACTC,cAAe5B,EACfC,KAAMA,IAIdP,KAAKY,WAAa,OAGtBf,EAAAO,UAAA+B,eAAA,SAAe3B,GACX,IACI4B,EACJ,OAFa5B,EAASK,MAAQL,EAASK,MAAMwB,OAAQ,GAGjD,KAAK,EACDD,EAAa,SACjB,MAEA,KAAK,EACDA,EAAa,SACjB,MAEA,KAAK,EACDA,EAAa,SACjB,MAEA,KAAK,EACDA,EAAa,SACjB,MAEA,QACIA,EAAa,UAIrB,OAAOA,4CApFYE,EAAAA,kBAA6BC,EAAAA,aAhB3CC,EAAA,CAARC,EAAAA,qCAEQD,EAAA,CAARC,EAAAA,qCAEQD,EAAA,CAARC,EAAAA,0CAEQD,EAAA,CAARC,EAAAA,2CAEQD,EAAA,CAARC,EAAAA,0CAEQD,EAAA,CAARC,EAAAA,0CAZQ5C,EAAQ2C,EAAA,CAlEpBE,EAAAA,UAAU,CACPC,SAAU,aACVC,SAAU,krNA8DVC,gBAAiBC,EAAAA,wBAAwBC,WAEhClD,GAxEb,gBAuLA,SAAAmD,KAA8B,OAAjBA,EAAcR,EAAA,CAL1BS,EAAAA,SAAS,CACNC,QAAS,CAACC,EAAAA,aAAaC,EAAAA,cACvBC,QAAS,CAACxD,EAASuD,EAAAA,cACnBE,aAAc,CAACzD,MAENmD","sourcesContent":["import {NgModule,Component,ElementRef,Input,Renderer2,ChangeDetectionStrategy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {DomHandler} from 'primeng/dom';\nimport {MegaMenuItem,MenuItem} from 'primeng/api';\nimport {RouterModule} from '@angular/router';\n\n@Component({\n selector: 'p-megaMenu',\n template: `\n <div [class]=\"styleClass\" [ngStyle]=\"style\"\n [ngClass]=\"{'ui-megamenu ui-widget ui-widget-content ui-corner-all':true,'ui-megamenu-horizontal': orientation == 'horizontal','ui-megamenu-vertical': orientation == 'vertical'}\">\n <ul class=\"ui-megamenu-root-list\" role=\"menubar\">\n <ng-template ngFor let-category [ngForOf]=\"model\">\n <li *ngIf=\"category.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': category.visible === false}\">\n <li *ngIf=\"!category.separator\" #item [ngClass]=\"{'ui-menuitem ui-corner-all':true,'ui-menuitem-active':item==activeItem, 'ui-helper-hidden': category.visible === false}\"\n (mouseenter)=\"onItemMouseEnter($event, item, category)\" (mouseleave)=\"onItemMouseLeave($event, item)\">\n \n <a *ngIf=\"!category.routerLink\" [href]=\"category.url||'#'\" [attr.target]=\"category.target\" [attr.title]=\"category.title\" [attr.id]=\"category.id\" (click)=\"itemClick($event, category)\" [attr.tabindex]=\"category.tabindex ? category.tabindex : '0'\"\n [ngClass]=\"{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':category.disabled}\" [ngStyle]=\"category.style\" [class]=\"category.styleClass\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"category.icon\" [ngClass]=\"category.icon\"></span>\n <span class=\"ui-menuitem-text\">{{category.label}}</span>\n <span *ngIf=\"category.items\" class=\"ui-submenu-icon pi pi-fw\" [ngClass]=\"{'pi-caret-down':orientation=='horizontal','pi-caret-right':orientation=='vertical'}\"></span>\n </a>\n <a *ngIf=\"category.routerLink\" [routerLink]=\"category.routerLink\" [queryParams]=\"category.queryParams\" [routerLinkActive]=\"'ui-menuitem-link-active'\" [routerLinkActiveOptions]=\"category.routerLinkActiveOptions||{exact:false}\" [attr.tabindex]=\"category.tabindex ? category.tabindex : '0'\" \n [attr.target]=\"category.target\" [attr.title]=\"category.title\" [attr.id]=\"category.id\"\n (click)=\"itemClick($event, category)\" [ngClass]=\"{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':category.disabled}\" [ngStyle]=\"category.style\" [class]=\"category.styleClass\"\n [fragment]=\"category.fragment\" [queryParamsHandling]=\"category.queryParamsHandling\" [preserveFragment]=\"category.preserveFragment\" [skipLocationChange]=\"category.skipLocationChange\" [replaceUrl]=\"category.replaceUrl\" [state]=\"category.state\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"category.icon\" [ngClass]=\"category.icon\"></span>\n <span class=\"ui-menuitem-text\">{{category.label}}</span>\n </a>\n\n <div class=\"ui-megamenu-panel ui-widget-content ui-corner-all ui-shadow\" *ngIf=\"category.items\">\n <div class=\"ui-g\">\n <ng-template ngFor let-column [ngForOf]=\"category.items\">\n <div [class]=\"getColumnClass(category)\">\n <ng-template ngFor let-submenu [ngForOf]=\"column\">\n <ul class=\"ui-megamenu-submenu\" role=\"menu\">\n <li class=\"ui-widget-header ui-megamenu-submenu-header ui-corner-all\">{{submenu.label}}</li>\n <ng-template ngFor let-item [ngForOf]=\"submenu.items\">\n <li *ngIf=\"item.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\" role=\"separator\">\n <li *ngIf=\"!item.separator\" class=\"ui-menuitem ui-corner-all\" [ngClass]=\"{'ui-helper-hidden': item.visible === false}\" role=\"none\">\n <a *ngIf=\"!item.routerLink\" role=\"menuitem\" [href]=\"item.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\" [attr.tabindex]=\"item.tabindex ? item.tabindex : '0'\"\n [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n <span class=\"ui-menuitem-text\">{{item.label}}</span>\n </a>\n <a *ngIf=\"item.routerLink\" role=\"menuitem\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'ui-menuitem-link-active'\" [attr.tabindex]=\"item.tabindex ? item.tabindex : '0'\"\n [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\" class=\"ui-menuitem-link ui-corner-all\" \n [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\"\n [ngClass]=\"{'ui-state-disabled':item.disabled}\" (click)=\"itemClick($event, item)\"\n [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\" [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n <span class=\"ui-menuitem-text\">{{item.label}}</span>\n </a>\n </li>\n </ng-template>\n </ul>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </li>\n </ng-template>\n <li class=\"ui-menuitem ui-menuitem-custom ui-corner-all\" *ngIf=\"orientation === 'horizontal'\">\n <ng-content></ng-content>\n </li>\n </ul>\n </div>\n `,\n changeDetection: ChangeDetectionStrategy.Default\n})\nexport class MegaMenu {\n\n @Input() model: MegaMenuItem[];\n\n @Input() style: any;\n\n @Input() styleClass: string;\n \n @Input() orientation: string = 'horizontal';\n\n @Input() autoZIndex: boolean = true;\n\n @Input() baseZIndex: number = 0;\n \n activeItem: any;\n\n hideTimeout: any;\n \n constructor(public el: ElementRef, public renderer: Renderer2) {}\n \n onItemMouseEnter(event, item, menuitem: MegaMenuItem) {\n if (menuitem.disabled) {\n return;\n }\n\n if (this.hideTimeout) {\n clearTimeout(this.hideTimeout);\n this.hideTimeout = null;\n }\n \n this.activeItem = item;\n\n if (menuitem.items) {\n let submenu = item.children[0].nextElementSibling;\n if (submenu) {\n if (this.autoZIndex) {\n submenu.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));\n }\n\n if (this.orientation === 'horizontal') {\n submenu.style.top = DomHandler.getOuterHeight(item.children[0]) + 'px';\n submenu.style.left = '0px';\n }\n else if (this.orientation === 'vertical') {\n submenu.style.top = '0px';\n submenu.style.left = DomHandler.getOuterWidth(item.children[0]) + 'px';\n }\n }\n }\n }\n \n onItemMouseLeave(event, link) {\n this.hideTimeout = setTimeout(() => {\n this.activeItem = null;\n }, 1000);\n }\n \n itemClick(event, item: MenuItem | MegaMenuItem)Â {\n if (item.disabled) {\n event.preventDefault();\n return;\n }\n \n if (!item.url) {\n event.preventDefault();\n }\n \n if (item.command) {\n item.command({\n originalEvent: event,\n item: item\n });\n }\n \n this.activeItem = null;\n }\n \n getColumnClass(menuitem: MegaMenuItem) {\n let length = menuitem.items ? menuitem.items.length: 0;\n let columnClass;\n switch(length) {\n case 2:\n columnClass= 'ui-g-6';\n break;\n \n case 3:\n columnClass= 'ui-g-4';\n break;\n \n case 4:\n columnClass= 'ui-g-3';\n break;\n \n case 6:\n columnClass= 'ui-g-2';\n break;\n \n default:\n columnClass= 'ui-g-12';\n break;\n }\n \n return columnClass;\n }\n}\n\n@NgModule({\n imports: [CommonModule,RouterModule],\n exports: [MegaMenu,RouterModule],\n declarations: [MegaMenu]\n})\nexport class MegaMenuModule { }"]} |