| 57 | ], |
| 58 | }) |
| 59 | export class TabPanel implements OnInit, OnDestroy { |
| 60 | /** A reference to the host element. */ |
| 61 | private readonly _elementRef = inject(ElementRef); |
| 62 | |
| 63 | /** A reference to the host element. */ |
| 64 | readonly element = this._elementRef.nativeElement as HTMLElement; |
| 65 | |
| 66 | /** The DeferredContentAware host directive. */ |
| 67 | private readonly _deferredContentAware = inject(DeferredContentAware); |
| 68 | |
| 69 | /** The parent Tabs. */ |
| 70 | private readonly _tabs = inject(TABS); |
| 71 | |
| 72 | /** A global unique identifier for the tab. */ |
| 73 | readonly id = input(inject(_IdGenerator).getId('ng-tabpanel-', true)); |
| 74 | |
| 75 | /** The Tab UIPattern associated with the tabpanel */ |
| 76 | private readonly _tabPattern = computed(() => { |
| 77 | return this._tabs._tabMap().get(this.value()); |
| 78 | }); |
| 79 | |
| 80 | /** A local unique identifier for the tabpanel. */ |
| 81 | readonly value = input.required<string>(); |
| 82 | |
| 83 | /** Whether the tab panel is visible. */ |
| 84 | readonly visible = computed(() => !this._pattern.hidden()); |
| 85 | |
| 86 | /** The TabPanel UIPattern. */ |
| 87 | readonly _pattern: TabPanelPattern = new TabPanelPattern({ |
| 88 | ...this, |
| 89 | tab: this._tabPattern, |
| 90 | }); |
| 91 | |
| 92 | private readonly _tabContent = contentChild(TabContent); |
| 93 | |
| 94 | constructor() { |
| 95 | // Connect the panel's hidden state to the DeferredContentAware's visibility. |
| 96 | afterRenderEffect({ |
| 97 | write: () => { |
| 98 | this._deferredContentAware.contentVisible.set(this.visible()); |
| 99 | }, |
| 100 | }); |
| 101 | |
| 102 | // Check for any violations after the DOM has been updated. |
| 103 | if (typeof ngDevMode === 'undefined' || ngDevMode) { |
| 104 | afterRenderEffect({ |
| 105 | read: () => { |
| 106 | const violations: string[] = []; |
| 107 | |
| 108 | if (!this._tabContent()) { |
| 109 | violations.push('ngTabPanel must have an ngTabContent structural directive to render.'); |
| 110 | } |
| 111 | if (!this._tabs._tabMap().has(this.value())) { |
| 112 | violations.push( |
| 113 | `ngTabPanel with value '${this.value()}' does not have a corresponding ngTab.`, |
| 114 | ); |
| 115 | } |
| 116 | |