From 9942a3a4bbe58aac758055fabefb3d1ccbd54da7 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 26 Apr 2018 01:03:06 -0400
Subject: [PATCH] chore(tree): invert arrow direction in demo app and examples
 (#11005)

Inverts the direction of the expand arrows in RTL for the tree examples and in the demo app.

Fixes #10993.
---
 .../checklist-tree-demo/checklist-nested-tree-demo.html   | 2 +-
 .../tree/checklist-tree-demo/checklist-tree-demo.html     | 2 +-
 .../tree/dynamic-tree-demo/dynamic-tree-demo.html         | 2 +-
 .../tree/loadmore-tree-demo/loadmore-tree-demo.html       | 2 +-
 src/demo-app/tree/tree-demo.html                          | 8 ++++----
 .../cdk-tree-flat/cdk-tree-flat-example.html              | 4 +++-
 .../cdk-tree-nested/cdk-tree-nested-example.html          | 4 +++-
 .../tree-checklist/tree-checklist-example.html            | 2 +-
 .../tree-dynamic/tree-dynamic-example.html                | 2 +-
 .../tree-flat-overview/tree-flat-overview-example.html    | 2 +-
 .../tree-loadmore/tree-loadmore-example.html              | 2 +-
 .../tree-nested-overview-example.html                     | 2 +-
 12 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html b/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html
index 71f419bfcb5..6bd5dbb3da6 100644
--- a/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html
+++ b/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html
@@ -4,7 +4,7 @@
       <button mat-icon-button matTreeNodeToggle
               [attr.aria-label]="'toggle ' + node.item"
               [disabled]="!node.children.value.length">
-        <mat-icon *ngIf="node.children.value.length">
+        <mat-icon class="mat-icon-rtl-mirror" *ngIf="node.children.value.length">
           {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
       </button>
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html b/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html
index f52f90c2545..04e46f4b96a 100644
--- a/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html
+++ b/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html
@@ -4,7 +4,7 @@
       <button mat-icon-button matTreeNodeToggle
               [attr.aria-label]="'toggle ' + node.filename"
               [disabled]="!node.children.value.length">
-        <mat-icon *ngIf="node.children.value.length">
+        <mat-icon class="mat-icon-rtl-mirror" *ngIf="node.children.value.length">
           {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
       </button>
diff --git a/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html b/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html
index 8302c0c4383..66c5394db90 100644
--- a/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html
+++ b/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html
@@ -6,7 +6,7 @@
   <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <button mat-icon-button
             [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
diff --git a/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html b/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html
index a725d27b92a..fe062c671e1 100644
--- a/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html
+++ b/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html
@@ -11,7 +11,7 @@
             [attr.aria-label]="'toggle ' + node.filename"
             (click)="loadChildren(node)"
             matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
diff --git a/src/demo-app/tree/tree-demo.html b/src/demo-app/tree/tree-demo.html
index b702e91d893..6e36ea81886 100644
--- a/src/demo-app/tree/tree-demo.html
+++ b/src/demo-app/tree/tree-demo.html
@@ -10,7 +10,7 @@
       <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
         <button mat-icon-button matTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.filename">
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
@@ -33,7 +33,7 @@
           <div class="mat-tree-node">
             <button mat-icon-button matTreeNodeToggle
                     [attr.aria-label]="'toggle ' + node.filename">
-              <mat-icon>
+              <mat-icon class="mat-icon-rtl-mirror">
                 {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
               </mat-icon>
             </button>
@@ -58,7 +58,7 @@
                      class="demo-tree-node">
         <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
                 cdkTreeNodeToggle>
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
@@ -77,7 +77,7 @@
       <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="demo-tree-node">
         <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
                 cdkTreeNodeToggle>
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
diff --git a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
index efab0bfec51..f6389208bab 100644
--- a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
+++ b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
@@ -5,7 +5,9 @@
   </cdk-tree-node>
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="demo-tree-node">
     <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
-      <mat-icon>{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
     </button>
     {{node.filename}}:  {{node.type}}
   </cdk-tree-node>
diff --git a/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.html b/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.html
index 9a26d39b083..1c59e42630c 100644
--- a/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.html
+++ b/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.html
@@ -5,7 +5,9 @@
   </cdk-nested-tree-node>
   <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="example-tree-node">
     <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
-      <mat-icon>{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
     </button>
     {{node.filename}}:  {{node.type}}
     <div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
diff --git a/src/material-examples/tree-checklist/tree-checklist-example.html b/src/material-examples/tree-checklist/tree-checklist-example.html
index aa65e779dd6..a92475a65a5 100644
--- a/src/material-examples/tree-checklist/tree-checklist-example.html
+++ b/src/material-examples/tree-checklist/tree-checklist-example.html
@@ -17,7 +17,7 @@
   <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'toggle ' + node.filename">
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
diff --git a/src/material-examples/tree-dynamic/tree-dynamic-example.html b/src/material-examples/tree-dynamic/tree-dynamic-example.html
index b56cccacdf1..5fd93a96f65 100644
--- a/src/material-examples/tree-dynamic/tree-dynamic-example.html
+++ b/src/material-examples/tree-dynamic/tree-dynamic-example.html
@@ -6,7 +6,7 @@
   <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <button mat-icon-button
             [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
diff --git a/src/material-examples/tree-flat-overview/tree-flat-overview-example.html b/src/material-examples/tree-flat-overview/tree-flat-overview-example.html
index a9165cedb2e..a4729f13806 100644
--- a/src/material-examples/tree-flat-overview/tree-flat-overview-example.html
+++ b/src/material-examples/tree-flat-overview/tree-flat-overview-example.html
@@ -7,7 +7,7 @@
   <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'toggle ' + node.filename">
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
diff --git a/src/material-examples/tree-loadmore/tree-loadmore-example.html b/src/material-examples/tree-loadmore/tree-loadmore-example.html
index a725d27b92a..fe062c671e1 100644
--- a/src/material-examples/tree-loadmore/tree-loadmore-example.html
+++ b/src/material-examples/tree-loadmore/tree-loadmore-example.html
@@ -11,7 +11,7 @@
             [attr.aria-label]="'toggle ' + node.filename"
             (click)="loadChildren(node)"
             matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
diff --git a/src/material-examples/tree-nested-overview/tree-nested-overview-example.html b/src/material-examples/tree-nested-overview/tree-nested-overview-example.html
index 0cf05268053..646b426877c 100644
--- a/src/material-examples/tree-nested-overview/tree-nested-overview-example.html
+++ b/src/material-examples/tree-nested-overview/tree-nested-overview-example.html
@@ -11,7 +11,7 @@
       <div class="mat-tree-node">
         <button mat-icon-button matTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.filename">
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>