| 49 | }, |
| 50 | }) |
| 51 | export class Tab implements HasElement, OnInit, OnDestroy { |
| 52 | /** A reference to the host element. */ |
| 53 | private readonly _elementRef = inject(ElementRef); |
| 54 | |
| 55 | /** A reference to the host element. */ |
| 56 | readonly element = this._elementRef.nativeElement as HTMLElement; |
| 57 | |
| 58 | /** The parent TabList. */ |
| 59 | private readonly _tabList = inject(TAB_LIST); |
| 60 | |
| 61 | /** A unique identifier for the widget. */ |
| 62 | readonly id = input(inject(_IdGenerator).getId('ng-tab-', true)); |
| 63 | |
| 64 | /** The TabPanel UIPattern associated with the tab */ |
| 65 | private readonly _tabpanelPattern = computed(() => { |
| 66 | return this._tabList._tabsParent._panelMap().get(this.value()); |
| 67 | }); |
| 68 | |
| 69 | /** Whether a tab is disabled. */ |
| 70 | readonly disabled = input(false, {transform: booleanAttribute}); |
| 71 | |
| 72 | /** The remote tabpanel unique identifier. */ |
| 73 | readonly value = input.required<string>(); |
| 74 | |
| 75 | /** Whether the tab is active. */ |
| 76 | readonly active = computed(() => this._pattern.active()); |
| 77 | |
| 78 | /** Whether the tab is selected. */ |
| 79 | readonly selected = computed(() => this._pattern.selected()); |
| 80 | |
| 81 | /** The Tab UIPattern. */ |
| 82 | readonly _pattern: TabPattern = new TabPattern({ |
| 83 | ...this, |
| 84 | element: () => this.element, |
| 85 | tabList: () => this._tabList._pattern, |
| 86 | tabPanel: this._tabpanelPattern, |
| 87 | }); |
| 88 | |
| 89 | /** Opens this tab panel. */ |
| 90 | open() { |
| 91 | this._pattern.open(); |
| 92 | } |
| 93 | |
| 94 | constructor() { |
| 95 | // Automatically prevent form submission. |
| 96 | if (this.element.tagName === 'BUTTON' && !this.element.hasAttribute('type')) { |
| 97 | this.element.setAttribute('type', 'button'); |
| 98 | } |
| 99 | |
| 100 | if (typeof ngDevMode === 'undefined' || ngDevMode) { |
| 101 | afterRenderEffect({ |
| 102 | read: () => { |
| 103 | const violations: string[] = []; |
| 104 | if (this._tabList && this._tabList._tabsParent) { |
| 105 | if (!this._tabList._tabsParent._panelMap().has(this.value())) { |
| 106 | violations.push( |
| 107 | `ngTab with value '${this.value()}' does not have a corresponding ngTabPanel.`, |
| 108 | ); |