fix(multiple): fix broken rtl examples (#31527)

* Add missing imports to the Dir directive
* Switch tabs rtl example to horizontal

Author: wagnermaciel

src/components-examples/cdk-experimental/listbox/cdk-listbox-rtl-horizontal/cdk-listbox-rtl-horizontal-example.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {Dir} from '@angular/cdk/bidi';
 import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
 import {MatPseudoCheckbox} from '@angular/material/core';
 
@@ -11,7 +12,7 @@ import {MatPseudoCheckbox} from '@angular/material/core';
   templateUrl: 'cdk-listbox-rtl-horizontal-example.html',
   styleUrl: '../cdk-listbox-configurable/cdk-listbox-configurable-example.css',
   standalone: true,
-  imports: [CdkListbox, CdkOption, MatPseudoCheckbox],
+  imports: [CdkListbox, CdkOption, Dir, MatPseudoCheckbox],
 })
 export class CdkListboxRtlHorizontalExample {
   fruits = [

src/components-examples/cdk-experimental/radio-group/cdk-radio-rtl-group-horizontal/cdk-radio-group-rtl-horizontal-example.html renamed to src/components-examples/cdk-experimental/radio-group/cdk-radio-group-rtl-horizontal/cdk-radio-group-rtl-horizontal-example.html

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {Dir} from '@angular/cdk/bidi';
 import {FormsModule} from '@angular/forms';
 import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio-group';
 
@@ -9,7 +10,7 @@ import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio-gro
   templateUrl: 'cdk-radio-group-rtl-horizontal-example.html',
   styleUrl: '../radio-common.css',
   standalone: true,
-  imports: [CdkRadioGroup, CdkRadioButton, FormsModule],
+  imports: [CdkRadioGroup, CdkRadioButton, Dir, FormsModule],
 })
 export class CdkRadioGroupRtlHorizontalExample {
   fruits = [

src/components-examples/cdk-experimental/radio-group/cdk-radio-rtl-group-horizontal/cdk-radio-group-rtl-horizontal-example.ts renamed to src/components-examples/cdk-experimental/radio-group/cdk-radio-group-rtl-horizontal/cdk-radio-group-rtl-horizontal-example.ts

@@ -1,6 +1,6 @@
 export {CdkRadioGroupStandardExample} from './cdk-radio-group-standard/cdk-radio-group-standard-example';
 export {CdkRadioGroupHorizontalExample} from './cdk-radio-group-horizontal/cdk-radio-group-horizontal-example';
-export {CdkRadioGroupRtlHorizontalExample} from './cdk-radio-rtl-group-horizontal/cdk-radio-group-rtl-horizontal-example';
+export {CdkRadioGroupRtlHorizontalExample} from './cdk-radio-group-rtl-horizontal/cdk-radio-group-rtl-horizontal-example';
 export {CdkRadioGroupActiveDescendantExample} from './cdk-radio-group-active-descendant/cdk-radio-group-active-descendant-example';
 export {CdkRadioGroupDisabledFocusableExample} from './cdk-radio-group-disabled-focusable/cdk-radio-group-disabled-focusable-example';
 export {CdkRadioGroupDisabledSkippedExample} from './cdk-radio-group-disabled-skipped/cdk-radio-group-disabled-skipped-example';

src/components-examples/cdk-experimental/radio-group/index.ts

@@ -0,0 +1,31 @@
+<div class="example-container" dir="rtl">
+  <div cdkTabs class="example-tabs">
+    <ul cdkTabList class="example-tablist" 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>
+</div>

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

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

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

@@ -2,7 +2,7 @@ export {CdkTabsConfigurableExample} from './cdk-tabs-configurable/cdk-tabs-confi
 export {CdkTabsExplicitSelectionExample} from './cdk-explicit-selection/cdk-tabs-explicit-selection-example';
 export {CdkTabsSelectionFollowsFocusExample} from './cdk-selection-follows-focus/cdk-tabs-selection-follows-focus-example';
 export {CdkTabsVerticalExample} from './cdk-vertical-orientation/cdk-tabs-vertical-example';
-export {CdkTabsRtlVerticalExample} from './cdk-rtl-vertical/cdk-tabs-rtl-vertical-example';
+export {CdkTabsRtlExample} from './cdk-rtl/cdk-tabs-rtl-example';
 export {CdkTabsActiveDescendantExample} from './cdk-active-descendant/cdk-tabs-active-descendant-example';
 export {CdkTabsDisabledFocusableExample} from './cdk-disabled-focusable/cdk-tabs-disabled-focusable-example';
 export {CdkTabsDisabledSkippedExample} from './cdk-disabled-skipped/cdk-tabs-disabled-skipped-example';

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

@@ -10,13 +10,13 @@ <h4>Selection Follows Focus</h4>
   </div>
 
   <div class="example-tabs-container">
-    <h4>Horizontal Orientation</h4>
+    <h4>Vertical Orientation</h4>
     <cdk-tabs-vertical-example></cdk-tabs-vertical-example>
   </div>
 
   <div class="example-tabs-container">
-    <h4>RTL & Horizontal Orientation</h4>
-    <cdk-tabs-rtl-vertical-example></cdk-tabs-rtl-vertical-example>
+    <h4>RTL</h4>
+    <cdk-tabs-rtl-example></cdk-tabs-rtl-example>
   </div>
 
   <div class="example-tabs-container">

src/components-examples/cdk-experimental/tabs/index.ts

@@ -12,7 +12,7 @@ import {
   CdkTabsExplicitSelectionExample,
   CdkTabsSelectionFollowsFocusExample,
   CdkTabsVerticalExample,
-  CdkTabsRtlVerticalExample,
+  CdkTabsRtlExample,
   CdkTabsActiveDescendantExample,
   CdkTabsDisabledFocusableExample,
   CdkTabsDisabledSkippedExample,
@@ -28,7 +28,7 @@ import {
     CdkTabsExplicitSelectionExample,
     CdkTabsSelectionFollowsFocusExample,
     CdkTabsVerticalExample,
-    CdkTabsRtlVerticalExample,
+    CdkTabsRtlExample,
     CdkTabsActiveDescendantExample,
     CdkTabsDisabledFocusableExample,
     CdkTabsDisabledSkippedExample,