{"version":3,"file":"primeng-tabmenu.mjs","sources":["../../src/tabmenu/style/tabmenustyle.ts","../../src/tabmenu/tabmenu.ts","../../src/tabmenu/primeng-tabmenu.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n\n/* For PrimeNG */\n.p-tabmenu.p-component {\n display: flex;\n flex-direction: column;\n}\n\n.p-tabmenu-nav-container {\n display: flex;\n position: relative;\n}\n\n.p-tabmenu.p-tabmenu-scrollable .p-tabmenu-nav-container {\n overflow: hidden;\n}\n\n.p-tabmenu-nav-content {\n flex-grow: 1;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-behavior: smooth;\n scrollbar-width: none;\n overscroll-behavior: contain auto;\n}\n\n.p-tabmenu-nav {\n padding: 0;\n margin: 0;\n list-style-type: none;\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n background: ${dt('tabs.tablist.background')};\n border-style: solid;\n border-color: ${dt('tabs.tablist.border.color')};\n border-width: ${dt('tabs.tablist.border.width')};\n}\n\n.p-tabmenuitem {\n display: flex;\n flex-shrink: 0;\n cursor: pointer;\n position: relative;\n border-style: solid;\n background: ${dt('tabs.tab.background')};\n border-width: ${dt('tabs.tab.border.width')};\n border-color: ${dt('tabs.tab.border.color')};\n padding: ${dt('tabs.tab.padding')};\n transition: background ${dt('tabs.transition.duration')}, border-color ${dt('tabs.transition.duration')}, color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};\n margin: ${dt('tabs.tab.margin')};\n outline-color: transparent;\n}\n\n.p-tabmenuitem > .p-menuitem-link {\n white-space: nowrap;\n user-select: none;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n gap: ${dt('tabs.tab.gap')};\n color: ${dt('tabs.tab.color')};\n font-weight: ${dt('tabs.tab.font.weight')};\n}\n\n.p-tabmenuitem.p-tabmenuitem-active .p-menuitem-link {\n color: ${dt('tabs.tab.active.color')};\n}\n\n.p-tabmenuitem:not(.p-disabled):focus-visible {\n z-index: 1;\n box-shadow: ${dt('tabs.tab.focus.ring.shadow')};\n outline: ${dt('tabs.tab.focus.ring.width')} ${dt('tabs.tab.focus.ring.style')} ${dt('tabs.tab.focus.ring.color')};\n outline-offset: ${dt('tabs.tab.focus.ring.offset')};\n}\n\n.p-tabmenuitem:not(.p-tabmenuitem-active):not(.p-disabled):hover {\n background: ${dt('tabs.tab.hover.background')};\n border-color: ${dt('tabs.tab.hover.border.color')};\n color: ${dt('tabs.tab.hover.color')};\n}\n\n.p-tabmenuitem-active {\n background: ${dt('tabs.tab.active.background')};\n border-color: ${dt('tabs.tab.active.border.color')};\n color: ${dt('tabs.tab.active.color')};\n}\n\n.p-tabmenuitem-active-bar {\n z-index: 1;\n display: block;\n position: absolute;\n bottom: ${dt('tabs.active.bar.bottom')};\n height: ${dt('tabs.active.bar.height')};\n background: ${dt('tabs.active.bar.background')};\n transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n\n.p-tabmenu-nav-button {\n all: unset;\n position: absolute !important;\n flex-shrink: 0;\n top: 0;\n z-index: 2;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ${dt('tabs.nav.button.background')};\n color: ${dt('tabs.nav.button.color')};\n width: ${dt('tabs.nav.button.width')};\n transition: color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};\n box-shadow: ${dt('tabs.nav.button.shadow')};\n outline-color: transparent;\n cursor: pointer;\n}\n\n.p-tabmenu-nav-button:focus-visible {\n z-index: 1;\n box-shadow: ${dt('tabs.nav.button.focus.ring.shadow')};\n outline: ${dt('tabs.nav.button.focus.ring.width')} ${dt('tabs.nav.button.focus.ring.style')} ${dt('tabs.nav.button.focus.ring.color')};\n outline-offset: ${dt('tabs.nav.button.focus.ring.offset')};\n}\n\n.p-tabmenu-nav-button:hover {\n color: ${dt('tabs.nav.button.hover.color')};\n}\n\n.p-tabmenu-nav-prev-button {\n left: 0;\n}\n\n.p-tabmenu-nav-next-button {\n right: 0;\n}`;\n\n@Injectable()\nexport class TabMenuStyle extends BaseStyle {\n name = 'tabs';\n\n theme = theme;\n}\n\n/**\n *\n * TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.\n *\n * [Live Demo](https://www.primeng.org/tabmenu/)\n *\n * @module tabmenustyle\n *\n */\nexport enum TabMenuClasses {\n /**\n * Class name of the root element\n */\n root = 'p-tabmenu',\n /**\n * Class name of the tablist element\n */\n tablist = 'p-tabmenu-tablist',\n /**\n * Class name of the item element\n */\n item = 'p-tabmenu-item',\n /**\n * Class name of the item link element\n */\n itemLink = 'p-tabmenu-item-link',\n /**\n * Class name of the item icon element\n */\n itemIcon = 'p-tabmenu-item-icon',\n /**\n * Class name of the item label element\n */\n itemLabel = 'p-tabmenu-item-label',\n /**\n * Class name of the inkbar element\n */\n inkbar = 'p-tabmenu-ink-bar'\n}\n\nexport interface TabMenuStyle extends BaseStyle {}\n","import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewChecked,\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ContentChildren,\n ElementRef,\n EventEmitter,\n inject,\n Input,\n NgModule,\n OnDestroy,\n Output,\n QueryList,\n signal,\n TemplateRef,\n ViewChild,\n ViewChildren,\n ViewEncapsulation\n} from '@angular/core';\nimport { ActivatedRoute, Router, RouterModule } from '@angular/router';\nimport { findSingle, focus, getAttribute, getOffset, getWidth, resolve } from '@primeuix/utils';\nimport { MenuItem, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BadgeModule } from 'primeng/badge';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'primeng/icons';\nimport { Ripple } from 'primeng/ripple';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { TabMenuStyle } from './style/tabmenustyle';\n\n/**\n * TabMenu is a navigation component that displays items as tab headers.\n * @group Components\n */\n@Component({\n selector: 'p-tabMenu, p-tabmenu',\n standalone: true,\n imports: [CommonModule, RouterModule, Ripple, TooltipModule, ChevronLeftIcon, ChevronRightIcon, BadgeModule, SharedModule],\n template: `\n \n \n
\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [TabMenuStyle]\n})\nexport class TabMenu extends BaseComponent implements AfterViewInit, AfterContentInit, AfterViewChecked, OnDestroy {\n /**\n * An array of menuitems.\n * @group Props\n */\n @Input() set model(value: MenuItem[] | undefined) {\n this._model = value;\n this._focusableItems = (this._model || []).reduce((result, item) => {\n result.push(item);\n\n return result;\n }, []);\n }\n get model(): MenuItem[] | undefined {\n return this._model;\n }\n /**\n * Defines the default active menuitem\n * @group Props\n */\n @Input() set activeItem(value: MenuItem | undefined) {\n this._activeItem = value;\n this.activeItemChange.emit(value);\n this.tabChanged = true;\n }\n\n get activeItem(): MenuItem | undefined {\n return this._activeItem;\n }\n /**\n * When enabled displays buttons at each side of the tab headers to scroll the tab list.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) scrollable: boolean | undefined;\n /**\n * Defines if popup mode enabled.\n */\n @Input({ transform: booleanAttribute }) popup: boolean | undefined;\n /**\n * Inline style of the element.\n * @group Props\n */\n @Input() style: { [klass: string]: any } | null | undefined;\n /**\n * Class of the element.\n * @group Props\n */\n @Input() styleClass: string | undefined;\n /**\n * Defines a string value that labels an interactive element.\n * @group Props\n */\n @Input() ariaLabel: string | undefined;\n /**\n * Identifier of the underlying input element.\n * @group Props\n */\n @Input() ariaLabelledBy: string | undefined;\n /**\n * Event fired when a tab is selected.\n * @param {MenuItem} item - Menu item.\n * @group Emits\n */\n @Output() activeItemChange: EventEmitter