refactor(cdk-experimental/tabs): add use case examples

src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.html

@@ -0,0 +1,29 @@
+<div cdkTabs class="example-tabs">
+  <ul cdkTabList class="example-tablist" focusMode="activedescendant" tab="tab-1">
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab">tab 3</li>
+    <li cdkTab value="tab-4" class="example-tab">tab 4</li>
+    <li cdkTab value="tab-5" class="example-tab">tab 5</li>
+  </ul>
+
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-4" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 4</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-5" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 5</ng-template>
+  </div>
+</div>

src/components-examples/cdk-experimental/tabs/cdk-active-descendant/cdk-tabs-active-descendant-example.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {
+  CdkTab,
+  CdkTabs,
+  CdkTabList,
+  CdkTabPanel,
+  CdkTabContent,
+} from '@angular/cdk-experimental/tabs';
+
+/** @title Active Descendant */
+@Component({
+  selector: 'cdk-tabs-active-descendant-example',
+  exportAs: 'cdkTabsActiveDescendantExample',
+  templateUrl: 'cdk-tabs-active-descendant-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
+  imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
+})
+export class CdkTabsActiveDescendantExample {}

src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.html

@@ -0,0 +1,29 @@
+<div cdkTabs class="example-tabs">
+  <ul cdkTabList class="example-tablist" [skipDisabled]="false" tab="tab-1">
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab" disabled>tab 3</li>
+    <li cdkTab value="tab-4" class="example-tab" disabled>tab 4</li>
+    <li cdkTab value="tab-5" class="example-tab">tab 5</li>
+  </ul>
+
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-4" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 4</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-5" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 5</ng-template>
+  </div>
+</div>

src/components-examples/cdk-experimental/tabs/cdk-disabled-focusable/cdk-tabs-disabled-focusable-example.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {
+  CdkTab,
+  CdkTabs,
+  CdkTabList,
+  CdkTabPanel,
+  CdkTabContent,
+} from '@angular/cdk-experimental/tabs';
+
+/** @title Disabled Tabs are Focusable */
+@Component({
+  selector: 'cdk-tabs-disabled-focusable-example',
+  exportAs: 'cdkTabsDisabledFocusableExample',
+  templateUrl: 'cdk-tabs-disabled-focusable-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
+  imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
+})
+export class CdkTabsDisabledFocusableExample {}

src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.html

@@ -0,0 +1,29 @@
+<div cdkTabs class="example-tabs">
+  <ul cdkTabList class="example-tablist" [skipDisabled]="true" tab="tab-1">
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab" disabled>tab 3</li>
+    <li cdkTab value="tab-4" class="example-tab" disabled>tab 4</li>
+    <li cdkTab value="tab-5" class="example-tab">tab 5</li>
+  </ul>
+
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-4" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 4</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-5" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 5</ng-template>
+  </div>
+</div>

src/components-examples/cdk-experimental/tabs/cdk-disabled-skipped/cdk-tabs-disabled-skipped-example.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {
+  CdkTab,
+  CdkTabs,
+  CdkTabList,
+  CdkTabPanel,
+  CdkTabContent,
+} from '@angular/cdk-experimental/tabs';
+
+/** @title Disabled Tabs are Skipped */
+@Component({
+  selector: 'cdk-tabs-disabled-skipped-example',
+  exportAs: 'cdkTabsDisabledSkippedExample',
+  templateUrl: 'cdk-tabs-disabled-skipped-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
+  imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
+})
+export class CdkTabsDisabledSkippedExample {}

src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.html

@@ -0,0 +1,29 @@
+<div cdkTabs class="example-tabs">
+  <ul cdkTabList class="example-tablist" tab="tab-1" disabled>
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab">tab 3</li>
+    <li cdkTab value="tab-4" class="example-tab">tab 4</li>
+    <li cdkTab value="tab-5" class="example-tab">tab 5</li>
+  </ul>
+
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-4" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 4</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-5" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 5</ng-template>
+  </div>
+</div>

src/components-examples/cdk-experimental/tabs/cdk-disabled/cdk-tabs-disabled-example.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {
+  CdkTab,
+  CdkTabs,
+  CdkTabList,
+  CdkTabPanel,
+  CdkTabContent,
+} from '@angular/cdk-experimental/tabs';
+
+/** @title Disabled */
+@Component({
+  selector: 'cdk-tabs-disabled-example',
+  exportAs: 'cdkTabsDisabledExample',
+  templateUrl: 'cdk-tabs-disabled-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
+  imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
+})
+export class CdkTabsDisabledExample {}

src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.html

@@ -0,0 +1,29 @@
+<div cdkTabs class="example-tabs">
+  <ul cdkTabList class="example-tablist" selectionMode="explicit" tab="tab-1">
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab">tab 3</li>
+    <li cdkTab value="tab-4" class="example-tab">tab 4</li>
+    <li cdkTab value="tab-5" class="example-tab">tab 5</li>
+  </ul>
+
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-4" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 4</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-5" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 5</ng-template>
+  </div>
+</div>

src/components-examples/cdk-experimental/tabs/cdk-explicit-selection/cdk-tabs-explicit-selection-example.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {
+  CdkTab,
+  CdkTabs,
+  CdkTabList,
+  CdkTabPanel,
+  CdkTabContent,
+} from '@angular/cdk-experimental/tabs';
+
+/** @title Explicit selection */
+@Component({
+  selector: 'cdk-tabs-explicit-selection-example',
+  exportAs: 'cdkTabsExplicitSelectionExample',
+  templateUrl: 'cdk-tabs-explicit-selection-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
+  imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
+})
+export class CdkTabsExplicitSelectionExample {}

src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.html

@@ -0,0 +1,29 @@
+<div cdkTabs class="example-tabs">
+  <ul cdkTabList class="example-tablist" orientation="vertical" tab="tab-1">
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab">tab 3</li>
+    <li cdkTab value="tab-4" class="example-tab">tab 4</li>
+    <li cdkTab value="tab-5" class="example-tab">tab 5</li>
+  </ul>
+
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-4" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 4</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-5" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 5</ng-template>
+  </div>
+</div>

src/components-examples/cdk-experimental/tabs/cdk-rtl-vertical/cdk-tabs-rtl-vertical-example.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+import {
+  CdkTab,
+  CdkTabs,
+  CdkTabList,
+  CdkTabPanel,
+  CdkTabContent,
+} from '@angular/cdk-experimental/tabs';
+
+/** * @title RTL & Vertical */
+@Component({
+  selector: 'cdk-tabs-rtl-vertical-example',
+  exportAs: 'cdkTabsRtlVerticalExample',
+  templateUrl: 'cdk-tabs-rtl-vertical-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
+  imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
+})
+export class CdkTabsRtlVerticalExample {
+  selectedIndex = 0;
+}

src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.html

@@ -0,0 +1,29 @@
+<div cdkTabs class="example-tabs">
+  <ul cdkTabList class="example-tablist" selectionMode="follow" tab="tab-1">
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab">tab 3</li>
+    <li cdkTab value="tab-4" class="example-tab">tab 4</li>
+    <li cdkTab value="tab-5" class="example-tab">tab 5</li>
+  </ul>
+
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-4" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 4</ng-template>
+  </div>
+
+  <div cdkTabPanel value="tab-5" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 5</ng-template>
+  </div>
+</div>

src/components-examples/cdk-experimental/tabs/cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {
+  CdkTab,
+  CdkTabs,
+  CdkTabList,
+  CdkTabPanel,
+  CdkTabContent,
+} from '@angular/cdk-experimental/tabs';
+
+/** @title Selection Follows Focus */
+@Component({
+  selector: 'cdk-tabs-selection-follows-focus-example',
+  exportAs: 'cdkTabsSelectionFollowsFocusExample',
+  templateUrl: 'cdk-tabs-selection-follows-focus-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
+  imports: [CdkTabList, CdkTab, CdkTabs, CdkTabPanel, CdkTabContent],
+})
+export class CdkTabsSelectionFollowsFocusExample {}

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.ts → src/components-examples/cdk-experimental/tabs/cdk-tabs-configurable/cdk-tabs-configurable-example.ts

@@ -11,12 +11,13 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 
-/** @title Tabs using UI Patterns. */
+/** @title Configurable Tabs. */
 @Component({
-  selector: 'cdk-tabs-example',
-  exportAs: 'cdkTabsExample',
-  templateUrl: 'cdk-tabs-example.html',
-  styleUrl: 'cdk-tabs-example.css',
+  selector: 'cdk-tabs-configurable-example',
+  exportAs: 'cdkTabsConfigurableExample',
+  templateUrl: 'cdk-tabs-configurable-example.html',
+  styleUrls: ['../cdk-tabs-common.css'],
+  standalone: true,
   imports: [
     CdkTabs,
     CdkTabList,
@@ -29,7 +30,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
     ReactiveFormsModule,
   ],
 })
-export class CdkTabsExample {
+export class CdkTabsConfigurableExample {
   orientation: 'vertical' | 'horizontal' = 'horizontal';
   focusMode: 'roving' | 'activedescendant' = 'roving';
   selectionMode: 'explicit' | 'follow' = 'follow';