{"version":3,"sources":["../../src/app/components/megamenu/megamenu.ts"],"names":["MegaMenu","el","renderer","cd","this","orientation","autoZIndex","baseZIndex","prototype","ngAfterContentInit","_this","templates","forEach","item","getType","startTemplate","template","endTemplate","onCategoryMouseEnter","event","menuitem","disabled","preventDefault","activeItem","onCategoryClick","url","command","originalEvent","items","unbindDocumentClickListener","bindDocumentClickListener","itemClick","getColumnClass","columnClass","length","documentClickListener","nativeElement","contains","target","markForCheck","document","addEventListener","removeEventListener","Component","args","selector","changeDetection","ChangeDetectionStrategy","OnPush","encapsulation","ViewEncapsulation","None","ElementRef","Renderer2","ChangeDetectorRef","Input","ContentChildren","PrimeTemplate","NgModule","imports","CommonModule","RouterModule","RippleModule","exports","declarations"],"mappings":"olBA+GI,SAAAA,EAAmBC,EAAuBC,EAA4BC,GAAnDC,KAAAH,GAAAA,EAAuBG,KAAAF,SAAAA,EAA4BE,KAAAD,GAAAA,EAhB7DC,KAAAC,YAAsB,aAEtBD,KAAAE,YAAsB,EAEtBF,KAAAG,WAAqB,SAc9BP,EAAAQ,UAAAC,mBAAA,WAAA,IAAAC,EAAAN,KACIA,KAAKO,UAAUC,SAAQ,SAACC,GACpB,OAAOA,EAAKC,WACR,IAAK,QACDJ,EAAKK,cAAgBF,EAAKG,SAC9B,MAEA,IAAK,MACDN,EAAKO,YAAcJ,EAAKG,cAMxChB,EAAAQ,UAAAU,qBAAA,SAAqBC,EAAOC,GACpBA,EAASC,SACTF,EAAMG,iBAINlB,KAAKmB,aACLnB,KAAKmB,WAAaH,IAI1BpB,EAAAQ,UAAAgB,gBAAA,SAAgBL,EAAON,GACfA,EAAKQ,SACLF,EAAMG,kBAILT,EAAKY,KACNN,EAAMG,iBAGNT,EAAKa,SACLb,EAAKa,QAAQ,CACTC,cAAeR,EACfN,KAAMA,IAIVA,EAAKe,QACDxB,KAAKmB,YAAcnB,KAAKmB,aAAeV,GACvCT,KAAKmB,WAAa,KAClBnB,KAAKyB,gCAGLzB,KAAKmB,WAAaV,EAClBT,KAAK0B,gCAKjB9B,EAAAQ,UAAAuB,UAAA,SAAUZ,EAAON,GACTA,EAAKQ,SACLF,EAAMG,kBAILT,EAAKY,KACNN,EAAMG,iBAGNT,EAAKa,SACLb,EAAKa,QAAQ,CACTC,cAAeR,EACfN,KAAMA,IAIdT,KAAKmB,WAAa,OAGtBvB,EAAAQ,UAAAwB,eAAA,SAAeZ,GACX,IACIa,EACJ,OAFab,EAASQ,MAAQR,EAASQ,MAAMM,OAAQ,GAGjD,KAAK,EACDD,EAAa,mBACjB,MAEA,KAAK,EACDA,EAAa,mBACjB,MAEA,KAAK,EACDA,EAAa,mBACjB,MAEA,KAAK,EACDA,EAAa,mBACjB,MAEA,QACIA,EAAa,oBAIrB,OAAOA,GAGXjC,EAAAQ,UAAAsB,0BAAA,WAAA,IAAApB,EAAAN,KACSA,KAAK+B,wBACN/B,KAAK+B,sBAAwB,SAAChB,GACtBT,EAAKT,KAAOS,EAAKT,GAAGmC,cAAcC,SAASlB,EAAMmB,UACjD5B,EAAKa,WAAa,KAClBb,EAAKmB,8BACLnB,EAAKP,GAAGoC,iBAIhBC,SAASC,iBAAiB,QAASrC,KAAK+B,yBAIhDnC,EAAAQ,UAAAqB,4BAAA,WACQzB,KAAK+B,wBACLK,SAASE,oBAAoB,QAAStC,KAAK+B,uBAC3C/B,KAAK+B,sBAAwB,gCAlOxCQ,EAAAA,UAASC,KAAA,CAAC,CACPC,SAAU,aACV7B,SAAU,k2PA2EV8B,gBAAiBC,EAAAA,wBAAwBC,OACzCC,cAAeC,EAAAA,kBAAkBC,krCApFVC,EAAAA,kBAAiBC,EAAAA,iBAAsDC,EAAAA,oDAyF7FC,EAAAA,qBAEAA,EAAAA,0BAEAA,EAAAA,2BAEAA,EAAAA,0BAEAA,EAAAA,0BAEAA,EAAAA,yBAEAC,EAAAA,gBAAeZ,KAAA,CAACa,EAAAA,wBA6IrB,iCALCC,EAAAA,SAAQd,KAAA,CAAC,CACNe,QAAS,CAACC,EAAAA,aAAaC,EAAAA,aAAaC,EAAAA,cACpCC,QAAS,CAAC/D,EAAS6D,EAAAA,cACnBG,aAAc,CAAChE","sourcesContent":["import {NgModule,Component,ElementRef,Input,Renderer2,ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, AfterContentInit, ContentChildren, QueryList, TemplateRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MegaMenuItem,MenuItem, PrimeTemplate} from 'primeng/api';\nimport {RouterModule} from '@angular/router';\nimport {RippleModule} from 'primeng/ripple';  \n\n@Component({\n    selector: 'p-megaMenu',\n    template: `\n        <div [class]=\"styleClass\" [ngStyle]=\"style\"\n            [ngClass]=\"{'p-megamenu p-component':true,'p-megamenu-horizontal': orientation == 'horizontal','p-megamenu-vertical': orientation == 'vertical'}\">\n            <div class=\"p-megamenu-start\" *ngIf=\"startTemplate\">\n                <ng-container *ngTemplateOutlet=\"startTemplate\"></ng-container>\n            </div>\n            <ul class=\"p-megamenu-root-list\" role=\"menubar\">\n                <ng-template ngFor let-category [ngForOf]=\"model\">\n                    <li *ngIf=\"category.separator\" class=\"p-menu-separator\" [ngClass]=\"{'p-hidden': category.visible === false}\">\n                    <li *ngIf=\"!category.separator\" [ngClass]=\"{'p-menuitem':true,'p-menuitem-active':category==activeItem, 'p-hidden': category.visible === false}\"\n                        (mouseenter)=\"onCategoryMouseEnter($event, category)\">\n                        <a *ngIf=\"!category.routerLink\" [href]=\"category.url||'#'\" [attr.target]=\"category.target\" [attr.title]=\"category.title\" [attr.id]=\"category.id\" (click)=\"onCategoryClick($event, category)\" [attr.tabindex]=\"category.tabindex ? category.tabindex : '0'\"\n                            [ngClass]=\"{'p-menuitem-link':true,'p-disabled':category.disabled}\" [ngStyle]=\"category.style\" [class]=\"category.styleClass\" pRipple>\n                            <span class=\"p-menuitem-icon\" *ngIf=\"category.icon\" [ngClass]=\"category.icon\"></span>\n                            <span class=\"p-menuitem-text\" *ngIf=\"category.escape !== false; else categoryHtmlLabel\">{{category.label}}</span>\n                            <ng-template #categoryHtmlLabel><span class=\"p-menuitem-text\" [innerHTML]=\"category.label\"></span></ng-template>\n                            <span *ngIf=\"category.items\" class=\"p-submenu-icon pi\" [ngClass]=\"{'pi-angle-down':orientation=='horizontal','pi-angle-right':orientation=='vertical'}\"></span>\n                        </a>\n                        <a *ngIf=\"category.routerLink\" [routerLink]=\"category.routerLink\" [queryParams]=\"category.queryParams\" [routerLinkActive]=\"'p-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)=\"onCategoryClick($event, category)\" [ngClass]=\"{'p-menuitem-link':true,'p-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\" pRipple>\n                            <span class=\"p-menuitem-icon\" *ngIf=\"category.icon\" [ngClass]=\"category.icon\"></span>\n                            <span class=\"p-menuitem-text\" *ngIf=\"category.escape !== false; else categoryHtmlRouteLabel\">{{category.label}}</span>\n                            <ng-template #categoryHtmlRouteLabel><span class=\"p-menuitem-text\" [innerHTML]=\"category.label\"></span></ng-template>\n                        </a>\n                        <div class=\"p-megamenu-panel\" *ngIf=\"category.items\">\n                            <div class=\"p-megamenu-grid\">\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=\"p-megamenu-submenu\" role=\"menu\">\n                                                <li class=\"p-megamenu-submenu-header\">\n                                                    <span *ngIf=\"submenu.escape !== false; else submenuHtmlLabel\">{{submenu.label}}</span>\n                                                    <ng-template #submenuHtmlLabel><span [innerHTML]=\"submenu.label\"></span></ng-template>\n                                                </li>\n                                                <ng-template ngFor let-item [ngForOf]=\"submenu.items\">\n                                                    <li *ngIf=\"item.separator\" class=\"p-menu-separator\" [ngClass]=\"{'p-hidden': item.visible === false}\" role=\"separator\">\n                                                    <li *ngIf=\"!item.separator\" class=\"p-menuitem\" [ngClass]=\"{'p-hidden': item.visible === false}\" role=\"none\">\n                                                        <a *ngIf=\"!item.routerLink\" role=\"menuitem\" [href]=\"item.url||'#'\" class=\"p-menuitem-link\" [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\" [attr.tabindex]=\"item.tabindex ? item.tabindex : '0'\"\n                                                            [ngClass]=\"{'p-disabled':item.disabled}\" (click)=\"itemClick($event, item)\" pRipple>\n                                                            <span class=\"p-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n                                                            <span class=\"p-menuitem-text\" *ngIf=\"item.escape !== false; else htmlLabel\">{{item.label}}</span>\n                                                            <ng-template #htmlLabel><span class=\"p-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\n                                                        </a>\n                                                        <a *ngIf=\"item.routerLink\" role=\"menuitem\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'p-menuitem-link-active'\" [attr.tabindex]=\"item.tabindex ? item.tabindex : '0'\"\n                                                            [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\" class=\"p-menuitem-link\" \n                                                             [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\"\n                                                            [ngClass]=\"{'p-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\" pRipple>\n                                                            <span class=\"p-menuitem-icon\" *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></span>\n                                                            <span class=\"p-menuitem-text\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{item.label}}</span>\n                                                            <ng-template #htmlRouteLabel><span class=\"p-menuitem-text\" [innerHTML]=\"item.label\"></span></ng-template>\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                <div class=\"p-megamenu-end\" *ngIf=\"endTemplate; else legacy\">\n                    <ng-container *ngTemplateOutlet=\"endTemplate\"></ng-container>\n                </div>\n                <ng-template #legacy>\n                    <div class=\"p-megamenu-end\">\n                        <ng-content></ng-content>\n                    </div>\n                </ng-template>\n            </ul>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./megamenu.css']\n})\nexport class MegaMenu implements AfterContentInit {\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    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n    \n    activeItem: any;\n\n    documentClickListener: any;\n\n    startTemplate: TemplateRef<any>;\n\n    endTemplate: TemplateRef<any>;\n                \n    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef) {}\n    \n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch(item.getType()) {\n                case 'start':\n                    this.startTemplate = item.template;\n                break;\n\n                case 'end':\n                    this.endTemplate = item.template;\n                break;\n            }\n        });\n    }\n\n    onCategoryMouseEnter(event, menuitem: MegaMenuItem) {\n        if (menuitem.disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (this.activeItem) {\n            this.activeItem = menuitem;\n        }\n    }\n\n    onCategoryClick(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        if (item.items) {\n            if (this.activeItem && this.activeItem === item) {\n                this.activeItem = null;\n                this.unbindDocumentClickListener();\n            }\n            else {\n                this.activeItem = item;\n                this.bindDocumentClickListener();\n            }\n        }\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= 'p-megamenu-col-6';\n            break;\n            \n            case 3:\n                columnClass= 'p-megamenu-col-4';\n            break;\n            \n            case 4:\n                columnClass= 'p-megamenu-col-3';\n            break;\n            \n            case 6:\n                columnClass= 'p-megamenu-col-2';\n            break;\n                        \n            default:\n                columnClass= 'p-megamenu-col-12';\n            break;\n        }\n        \n        return columnClass;\n    }\n\n    bindDocumentClickListener() {\n        if (!this.documentClickListener) {\n            this.documentClickListener = (event) => {\n                if (this.el && !this.el.nativeElement.contains(event.target)) {\n                    this.activeItem = null;\n                    this.unbindDocumentClickListener();\n                    this.cd.markForCheck();\n                }\n            };\n\n            document.addEventListener('click', this.documentClickListener);\n        }\n    }\n\n    unbindDocumentClickListener() {\n        if (this.documentClickListener) {\n            document.removeEventListener('click', this.documentClickListener);\n            this.documentClickListener = null;\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule,RouterModule,RippleModule],\n    exports: [MegaMenu,RouterModule],\n    declarations: [MegaMenu]\n})\nexport class MegaMenuModule { }"]}