Skip to content

Commit 6179d7a

Browse files
adolgachevadolgachev
committed
refactor(aria/tabs): Support direct TabPanel reference for tab
1 parent fd159fc commit 6179d7a

20 files changed

+134
-140
lines changed

‎src/aria/tabs/tab-panel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export class TabPanel implements OnInit, OnDestroy {
7878
readonly _tabPattern: WritableSignal<TabPattern | undefined> = signal(undefined);
7979

8080
/** A local unique identifier for the tabpanel. */
81-
readonly value = input.required<string>();
81+
readonly value = input<string>();
8282

8383
/** Whether the tab panel is visible. */
8484
readonly visible = computed(() => !this._pattern.hidden());

‎src/aria/tabs/tab.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
} from '@angular/core';
2020
import {TabPattern, HasElement} from '../private';
2121
import {TABS, TAB_LIST} from './tab-tokens';
22+
import {TabPanel} from './tab-panel';
2223

2324
/**
2425
* A selectable tab in a TabList.
@@ -65,14 +66,17 @@ export class Tab implements HasElement, OnInit, OnDestroy {
6566
/** A unique identifier for the widget. */
6667
readonly id = input(inject(_IdGenerator).getId('ng-tab-', true));
6768

69+
/** Direct reference to panel associated with this tab. */
70+
readonly panelRef = input<TabPanel>(undefined, {alias: 'panel'});
71+
6872
/** The panel associated with this tab. */
69-
readonly panel = computed(() => this._tabsWrapper.findTabPanel(this.value()));
73+
readonly panel = computed(() => this.panelRef() ?? this._tabsWrapper.findTabPanel(this.value()));
7074

7175
/** Whether a tab is disabled. */
7276
readonly disabled = input(false, {transform: booleanAttribute});
7377

7478
/** The remote tabpanel unique identifier. */
75-
readonly value = input.required<string>();
79+
readonly value = input<string>();
7680

7781
/** Whether the tab is active. */
7882
readonly active = computed(() => this._pattern.active());

‎src/components-examples/aria/tabs/active-descendant/tabs-active-descendant-example.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
<div ngTabs>
2-
<div ngTabList focusMode="activedescendant" selectedTab="tab-1">
3-
<div ngTab value="tab-1">Tab 1</div>
4-
<div ngTab value="tab-2">Tab 2</div>
5-
<div ngTab value="tab-3">Tab 3</div>
6-
<div ngTab value="tab-4">Tab 4</div>
7-
<div ngTab value="tab-5">Tab 5</div>
2+
<div ngTabList focusMode="activedescendant">
3+
<div ngTab [panel]="panel1">Tab 1</div>
4+
<div ngTab [panel]="panel2">Tab 2</div>
5+
<div ngTab [panel]="panel3">Tab 3</div>
6+
<div ngTab [panel]="panel4">Tab 4</div>
7+
<div ngTab [panel]="panel5">Tab 5</div>
88
</div>
99

10-
<div ngTabPanel value="tab-1">
10+
<div ngTabPanel #panel1="ngTabPanel">
1111
<ng-template ngTabContent>Panel 1</ng-template>
1212
</div>
1313

14-
<div ngTabPanel value="tab-2">
14+
<div ngTabPanel #panel2="ngTabPanel">
1515
<ng-template ngTabContent>Panel 2</ng-template>
1616
</div>
1717

18-
<div ngTabPanel value="tab-3">
18+
<div ngTabPanel #panel3="ngTabPanel">
1919
<ng-template ngTabContent>Panel 3</ng-template>
2020
</div>
2121

22-
<div ngTabPanel value="tab-4">
22+
<div ngTabPanel #panel4="ngTabPanel">
2323
<ng-template ngTabContent>Panel 4</ng-template>
2424
</div>
2525

26-
<div ngTabPanel value="tab-5">
26+
<div ngTabPanel #panel5="ngTabPanel">
2727
<ng-template ngTabContent>Panel 5</ng-template>
2828
</div>
2929
</div>

‎src/components-examples/aria/tabs/active-descendant/tabs-active-descendant-example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {afterRenderEffect, Component, viewChildren} from '@angular/core';
2-
import {Tab, Tabs, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
2+
import {Tabs, Tab, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
33

44
/** @title Active Descendant */
55
@Component({
66
selector: 'tabs-active-descendant-example',
77
templateUrl: 'tabs-active-descendant-example.html',
88
styleUrls: ['../tabs-common.css'],
9-
imports: [TabList, Tab, Tabs, TabPanel, TabContent],
9+
imports: [Tabs, TabList, Tab, TabPanel, TabContent],
1010
})
1111
export class TabsActiveDescendantExample {
1212
tabs = viewChildren(Tab);

‎src/components-examples/aria/tabs/disabled-focusable/tabs-disabled-focusable-example.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
<div ngTabs>
2-
<div ngTabList selectedTab="tab-1" softDisabled>
3-
<div ngTab value="tab-1">Tab 1</div>
4-
<div ngTab value="tab-2">Tab 2</div>
5-
<div ngTab value="tab-3" disabled>Tab 3</div>
6-
<div ngTab value="tab-4" disabled>Tab 4</div>
7-
<div ngTab value="tab-5" disabled>Tab 5</div>
2+
<div ngTabList softDisabled>
3+
<div ngTab [panel]="panel1">Tab 1</div>
4+
<div ngTab [panel]="panel2">Tab 2</div>
5+
<div ngTab [panel]="panel3" disabled>Tab 3</div>
6+
<div ngTab [panel]="panel4" disabled>Tab 4</div>
7+
<div ngTab [panel]="panel5" disabled>Tab 5</div>
88
</div>
99

10-
<div ngTabPanel value="tab-1">
10+
<div ngTabPanel #panel1="ngTabPanel">
1111
<ng-template ngTabContent>Panel 1</ng-template>
1212
</div>
1313

14-
<div ngTabPanel value="tab-2">
14+
<div ngTabPanel #panel2="ngTabPanel">
1515
<ng-template ngTabContent>Panel 2</ng-template>
1616
</div>
1717

18-
<div ngTabPanel value="tab-3">
18+
<div ngTabPanel #panel3="ngTabPanel">
1919
<ng-template ngTabContent>Panel 3</ng-template>
2020
</div>
2121

22-
<div ngTabPanel value="tab-4">
22+
<div ngTabPanel #panel4="ngTabPanel">
2323
<ng-template ngTabContent>Panel 4</ng-template>
2424
</div>
2525

26-
<div ngTabPanel value="tab-5">
26+
<div ngTabPanel #panel5="ngTabPanel">
2727
<ng-template ngTabContent>Panel 5</ng-template>
2828
</div>
2929
</div>

‎src/components-examples/aria/tabs/disabled-focusable/tabs-disabled-focusable-example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {afterRenderEffect, Component, viewChildren} from '@angular/core';
2-
import {Tab, Tabs, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
2+
import {Tabs, Tab, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
33

44
/** @title Disabled Tabs are Focusable */
55
@Component({
66
selector: 'tabs-disabled-focusable-example',
77
templateUrl: 'tabs-disabled-focusable-example.html',
88
styleUrls: ['../tabs-common.css'],
9-
imports: [TabList, Tab, Tabs, TabPanel, TabContent],
9+
imports: [Tabs, TabList, Tab, TabPanel, TabContent],
1010
})
1111
export class TabsDisabledFocusableExample {
1212
tabs = viewChildren(Tab);

‎src/components-examples/aria/tabs/disabled-skipped/tabs-disabled-skipped-example.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
<div ngTabs>
2-
<div ngTabList [softDisabled]="false" selectedTab="tab-1">
3-
<div ngTab value="tab-1">Tab 1</div>
4-
<div ngTab value="tab-2" disabled>Tab 2</div>
5-
<div ngTab value="tab-3" disabled>Tab 3</div>
6-
<div ngTab value="tab-4">Tab 4</div>
7-
<div ngTab value="tab-5" disabled>Tab 5</div>
2+
<div ngTabList [softDisabled]="false">
3+
<div ngTab [panel]="panel1">Tab 1</div>
4+
<div ngTab [panel]="panel2" disabled>Tab 2</div>
5+
<div ngTab [panel]="panel3" disabled>Tab 3</div>
6+
<div ngTab [panel]="panel4">Tab 4</div>
7+
<div ngTab [panel]="panel5" disabled>Tab 5</div>
88
</div>
99

10-
<div ngTabPanel value="tab-1">
10+
<div ngTabPanel #panel1="ngTabPanel">
1111
<ng-template ngTabContent>Panel 1</ng-template>
1212
</div>
1313

14-
<div ngTabPanel value="tab-2">
14+
<div ngTabPanel #panel2="ngTabPanel">
1515
<ng-template ngTabContent>Panel 2</ng-template>
1616
</div>
1717

18-
<div ngTabPanel value="tab-3">
18+
<div ngTabPanel #panel3="ngTabPanel">
1919
<ng-template ngTabContent>Panel 3</ng-template>
2020
</div>
2121

22-
<div ngTabPanel value="tab-4">
22+
<div ngTabPanel #panel4="ngTabPanel">
2323
<ng-template ngTabContent>Panel 4</ng-template>
2424
</div>
2525

26-
<div ngTabPanel value="tab-5">
26+
<div ngTabPanel #panel5="ngTabPanel">
2727
<ng-template ngTabContent>Panel 5</ng-template>
2828
</div>
2929
</div>

‎src/components-examples/aria/tabs/disabled-skipped/tabs-disabled-skipped-example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {afterRenderEffect, Component, viewChildren} from '@angular/core';
2-
import {Tab, Tabs, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
2+
import {Tabs, Tab, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
33

44
/** @title Disabled Tabs are Skipped */
55
@Component({
66
selector: 'tabs-disabled-skipped-example',
77
templateUrl: 'tabs-disabled-skipped-example.html',
88
styleUrls: ['../tabs-common.css'],
9-
imports: [TabList, Tab, Tabs, TabPanel, TabContent],
9+
imports: [Tabs, TabList, Tab, TabPanel, TabContent],
1010
})
1111
export class TabsDisabledSkippedExample {
1212
tabs = viewChildren(Tab);

‎src/components-examples/aria/tabs/disabled/tabs-disabled-example.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
<div ngTabs>
2-
<div ngTabList selectedTab="tab-1" disabled>
3-
<div ngTab value="tab-1">Tab 1</div>
4-
<div ngTab value="tab-2">Tab 2</div>
5-
<div ngTab value="tab-3">Tab 3</div>
6-
<div ngTab value="tab-4">Tab 4</div>
7-
<div ngTab value="tab-5">Tab 5</div>
2+
<div ngTabList disabled>
3+
<div ngTab [panel]="panel1">Tab 1</div>
4+
<div ngTab [panel]="panel2">Tab 2</div>
5+
<div ngTab [panel]="panel3">Tab 3</div>
6+
<div ngTab [panel]="panel4">Tab 4</div>
7+
<div ngTab [panel]="panel5">Tab 5</div>
88
</div>
99

10-
<div ngTabPanel value="tab-1">
10+
<div ngTabPanel #panel1="ngTabPanel">
1111
<ng-template ngTabContent>Panel 1</ng-template>
1212
</div>
1313

14-
<div ngTabPanel value="tab-2">
14+
<div ngTabPanel #panel2="ngTabPanel">
1515
<ng-template ngTabContent>Panel 2</ng-template>
1616
</div>
1717

18-
<div ngTabPanel value="tab-3">
18+
<div ngTabPanel #panel3="ngTabPanel">
1919
<ng-template ngTabContent>Panel 3</ng-template>
2020
</div>
2121

22-
<div ngTabPanel value="tab-4">
22+
<div ngTabPanel #panel4="ngTabPanel">
2323
<ng-template ngTabContent>Panel 4</ng-template>
2424
</div>
2525

26-
<div ngTabPanel value="tab-5">
26+
<div ngTabPanel #panel5="ngTabPanel">
2727
<ng-template ngTabContent>Panel 5</ng-template>
2828
</div>
2929
</div>

‎src/components-examples/aria/tabs/disabled/tabs-disabled-example.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {afterRenderEffect, Component, viewChildren} from '@angular/core';
2-
import {Tab, Tabs, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
2+
import {Tabs, Tab, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
33

44
/** @title Disabled */
55
@Component({
66
selector: 'tabs-disabled-example',
77
templateUrl: 'tabs-disabled-example.html',
88
styleUrls: ['../tabs-common.css'],
9-
imports: [TabList, Tab, Tabs, TabPanel, TabContent],
9+
imports: [Tabs, TabList, Tab, TabPanel, TabContent],
1010
})
1111
export class TabsDisabledExample {
1212
tabs = viewChildren(Tab);

0 commit comments

Comments
 (0)