primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [
{"version":3,"file":"primeng-tabmenu.mjs","sources":["../../src/app/components/tabmenu/tabmenu.ts","../../src/app/components/tabmenu/primeng-tabmenu.ts"],"sourcesContent":["import {NgModule,Component,Input,ContentChildren,QueryList,AfterContentInit,AfterViewInit,AfterViewChecked,TemplateRef,ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MenuItem} from 'primeng/api';\nimport {RippleModule} from 'primeng/ripple';\nimport {PrimeTemplate, SharedModule} from 'primeng/api';\nimport {ActivatedRoute, Router, RouterModule} from '@angular/router';\nimport {DomHandler} from 'primeng/dom';\nimport {TooltipModule} from 'primeng/tooltip';\n\n@Component({\n selector: 'p-tabMenu',\n template: `\n <div [ngClass]=\"{'p-tabmenu p-component': true, 'p-tabmenu-scrollable': scrollable}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"p-tabmenu-nav-container\">\n <button *ngIf=\"scrollable && !backwardIsDisabled\" #prevBtn class=\"p-tabmenu-nav-prev p-tabmenu-nav-btn p-link\" (click)=\"navBackward()\" type=\"button\" pRipple>\n <span class=\"pi pi-chevron-left\"></span>\n </button>\n <div #content class=\"p-tabmenu-nav-content\" (scroll)=\"onScroll($event)\">\n <ul #navbar class=\"p-tabmenu-nav p-reset\" role=\"tablist\">\n <li *ngFor=\"let item of model; let i = index\" role=\"tab\" [ngStyle]=\"item.style\" [class]=\"item.styleClass\" [attr.aria-selected]=\"isActive(item)\" [attr.aria-expanded]=\"isActive(item)\"\n [ngClass]=\"{'p-tabmenuitem':true,'p-disabled':item.disabled,'p-highlight':isActive(item),'p-hidden': item.visible === false}\" pTooltip [tooltipOptions]=\"item.tooltipOptions\">\n <a *ngIf=\"!item.routerLink\" [attr.href]=\"item.url\" class=\"p-menuitem-link\" role=\"presentation\" (click)=\"itemClick($event,item)\" (keydown.enter)=\"itemClick($event,item)\" [attr.tabindex]=\"item.disabled ? null : '0'\"\n [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\" pRipple>\n <ng-container *ngIf=\"!itemTemplate\">\n <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"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 </ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </a>\n <a *ngIf=\"item.routerLink\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" [routerLinkActive]=\"'p-menuitem-link-active'\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\"\n role=\"presentation\" class=\"p-menuitem-link\" (click)=\"itemClick($event,item)\" (keydown.enter)=\"itemClick($event,item)\" [attr.tabindex]=\"item.disabled ? null : '0'\"\n [attr.target]=\"item.target\" [attr.title]=\"item.title\" [attr.id]=\"item.id\"\n [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\" [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\" pRipple>\n <ng-container *ngIf=\"!itemTemplate\">\n <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\" *ngIf=\"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 </ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </a>\n </li>\n <li #inkbar class=\"p-tabmenu-ink-bar\"></li>\n </ul>\n </div>\n <button *ngIf=\"scrollable && !forwardIsDisabled\" #nextBtn class=\"p-tabmenu-nav-next p-tabmenu-nav-btn p-link\" (click)=\"navForward()\" type=\"button\" pRipple>\n <span class=\"pi pi-chevron-right\"></span>\n </button>\n </div>\n </div>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./tabmenu.css'],\n host: {\n 'class': 'p-element'\n }\n})\nexport class TabMenu implements AfterContentInit,AfterViewInit,AfterViewChecked {\n\n @Input() model: MenuItem[];\n\n @Input() activeItem: MenuItem;\n\n @Input() scrollable: boolean;\n\n @Input() popup: boolean;\n\n @Input() style: any;\n\n @Input() styleClass: string;\n\n @ViewChild('content') content: ElementRef;\n\n @ViewChild('navbar') navbar: ElementRef;\n\n @ViewChild('inkbar') inkbar: ElementRef;\n\n @ViewChild('prevBtn') prevBtn: ElementRef;\n\n @ViewChild('nextBtn') nextBtn: ElementRef;\n\n @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n itemTemplate: TemplateRef<any>;\n\n tabChanged: boolean;\n\n backwardIsDisabled: boolean = true;\n\n forwardIsDisabled: boolean = false;\n\n constructor(private router: Router, private route:ActivatedRoute, private cd: ChangeDetectorRef) { }\n\n ngAfterContentInit() {\n this.templates.forEach((item) => {\n switch(item.getType()) {\n case 'item':\n this.itemTemplate = item.template;\n break;\n\n default:\n this.itemTemplate = item.template;\n break;\n }\n });\n }\n\n ngAfterViewInit() {\n this.updateInkBar();\n }\n\n ngAfterViewChecked() {\n if (this.tabChanged) {\n this.updateInkBar();\n this.tabChanged = false;\n }\n }\n\n isActive(item: MenuItem) {\n if (item.routerLink){\n let routerLink = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];\n\n return this.router.isActive(this.router.createUrlTree(routerLink, {relativeTo: this.route}).toString(), false);\n }\n \n return item === this.activeItem;\n }\n\n itemClick(event: Event, item: MenuItem) {\n if (item.disabled) {\n event.preventDefault();\n return;\n }\n\n if (!item.url && !item.routerLink) {\n event.preventDefault();\n }\n\n if (item.command) {\n item.command({\n originalEvent: event,\n item: item\n });\n }\n\n this.activeItem = item;\n this.tabChanged = true;\n }\n\n updateInkBar() {\n let tabHeader = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');\n if (tabHeader) {\n this.inkbar.nativeElement.style.width = DomHandler.getWidth(tabHeader) + 'px';\n this.inkbar.nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';\n }\n }\n\n getVisibleButtonWidths() {\n return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0);\n }\n\n updateButtonState() {\n const content = this.content.nativeElement;\n const { scrollLeft, scrollWidth } = content;\n const width = DomHandler.getWidth(content);\n\n this.backwardIsDisabled = scrollLeft === 0;\n this.forwardIsDisabled = parseInt(scrollLeft) === scrollWidth - width;\n }\n\n\n updateScrollBar(index) {\n let tabHeader = this.navbar.nativeElement.children[index];\n tabHeader.scrollIntoView({ block: 'nearest' })\n }\n\n onScroll(event) {\n this.scrollable && this.updateButtonState();\n\n event.preventDefault();\n }\n\n navBackward() {\n const content = this.content.nativeElement;\n const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();\n const pos = content.scrollLeft - width;\n content.scrollLeft = pos <= 0 ? 0 : pos;\n }\n\n navForward() {\n const content = this.content.nativeElement;\n const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();\n const pos = content.scrollLeft + width;\n const lastPos = content.scrollWidth - width;\n content.scrollLeft = pos >= lastPos ? lastPos : pos;\n }\n}\n\n@NgModule({\n imports: [CommonModule,RouterModule,SharedModule,RippleModule,TooltipModule],\n exports: [TabMenu,RouterModule,SharedModule,TooltipModule],\n declarations: [TabMenu]\n})\nexport class TabMenuModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}