feat(expansion): allow expansion toggle indivicator positioning

Author: josephperrott

src/dev-app/expansion/expansion-demo.html

@@ -50,6 +50,12 @@ <h1>matAccordion</h1>
     <mat-radio-button value="default">Default</mat-radio-button>
     <mat-radio-button value="flat">Flat</mat-radio-button>
   </mat-radio-group>
+
+  <p>Toggle Position</p>
+  <mat-radio-group [(ngModel)]="togglePosition">
+    <mat-radio-button value="before">Before</mat-radio-button>
+    <mat-radio-button value="after">After</mat-radio-button>
+  </mat-radio-group>
   <p>Accordion Actions <sup>('Multi Expansion' mode only)</sup></p>
   <div>
     <button mat-button (click)="accordion.openAll()" [disabled]="!multi">Expand All</button>
@@ -63,7 +69,7 @@ <h1>matAccordion</h1>
 </div>
 <br>
 <mat-accordion [displayMode]="displayMode" [multi]="multi" [hideToggle]="hideToggle"
-               class="demo-expansion-width">
+               [togglePosition]="togglePosition" class="demo-expansion-width">
   <mat-expansion-panel #panel1>
     <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
     <p>This is the content text that makes sense here.</p>

src/dev-app/expansion/expansion-demo.ts

@@ -24,6 +24,7 @@ export class ExpansionDemo {
   hideToggle = false;
   disabled = false;
   showPanel3 = true;
+  togglePosition = 'after';
   expandedHeight: string;
   collapsedHeight: string;
   events: string[] = [];

src/material/expansion/accordion-base.ts

@@ -12,17 +12,23 @@ import {CdkAccordion} from '@angular/cdk/accordion';
 /** MatAccordion's display modes. */
 export type MatAccordionDisplayMode = 'default' | 'flat';
 
+/** MatAccordion's toggle positions. */
+export type MatAccordionTogglePosition = 'before' | 'after';
+
 /**
  * Base interface for a `MatAccordion`.
  * @docs-private
  */
 export interface MatAccordionBase extends CdkAccordion {
   /** Whether the expansion indicator should be hidden. */
   hideToggle: boolean;
-
+  
   /** Display mode used for all expansion panels in the accordion. */
   displayMode: MatAccordionDisplayMode;
 
+  /** The position of the expansion indicator. */
+  togglePosition: MatAccordionTogglePosition;
+
   /** Handles keyboard events coming in from the panel headers. */
   _handleHeaderKeydown: (event: KeyboardEvent) => void;
 

src/material/expansion/accordion.spec.ts

@@ -24,6 +24,7 @@ describe('MatAccordion', () => {
       ],
       declarations: [
         AccordionWithHideToggle,
+        AccordionWithTogglePosition,
         NestedPanel,
         SetOfItems,
       ],
@@ -136,6 +137,22 @@ describe('MatAccordion', () => {
     expect(panel.nativeElement.querySelector('.mat-expansion-indicator'))
       .toBeFalsy('Expected the expansion indicator to be removed.');
   });
+  
+  fit('should update the expansion panel if togglePosition changed', () => {
+    const fixture = TestBed.createComponent(AccordionWithTogglePosition);
+    const panel = fixture.debugElement.query(By.directive(MatExpansionPanel));
+
+    fixture.detectChanges();
+
+    expect(panel.nativeElement.querySelector('.mat-expansion-toggle-indicator-after'))
+      .toBeTruthy('Expected the expansion indicator to be positioned after.');
+
+    fixture.componentInstance.togglePosition = 'before';
+    fixture.detectChanges();
+
+    expect(panel.nativeElement.querySelector('.mat-expansion-toggle-indicator-before'))
+      .toBeTruthy('Expected the expansion indicator to be positioned before.');
+  });
 
   it('should move focus to the next header when pressing the down arrow', () => {
     const fixture = TestBed.createComponent(SetOfItems);
@@ -307,3 +324,16 @@ class NestedPanel {
 class AccordionWithHideToggle {
   hideToggle = false;
 }
+
+
+@Component({template: `
+  <mat-accordion [togglePosition]="togglePosition">
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>Header</mat-expansion-panel-header>
+      <p>Content</p>
+    </mat-expansion-panel>
+  </mat-accordion>`
+})
+class AccordionWithTogglePosition {
+  togglePosition = 'after';
+}

src/material/expansion/accordion.ts

@@ -11,7 +11,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {CdkAccordion} from '@angular/cdk/accordion';
 import {FocusKeyManager} from '@angular/cdk/a11y';
 import {HOME, END, hasModifierKey} from '@angular/cdk/keycodes';
-import {MAT_ACCORDION, MatAccordionBase, MatAccordionDisplayMode} from './accordion-base';
+import {MAT_ACCORDION, MatAccordionBase, MatAccordionDisplayMode, MatAccordionTogglePosition} from './accordion-base';
 import {MatExpansionPanelHeader} from './expansion-panel-header';
 
 /**
@@ -51,6 +51,9 @@ export class MatAccordion extends CdkAccordion implements MatAccordionBase, Afte
    */
   @Input() displayMode: MatAccordionDisplayMode = 'default';
 
+  /** The position of the expansion indicator. */
+  @Input() togglePosition: MatAccordionTogglePosition = 'after';
+
   ngAfterContentInit() {
     this._keyManager = new FocusKeyManager(this._headers).withWrap();
   }

src/material/expansion/expansion-panel-header.scss

@@ -18,6 +18,14 @@
   &:not([aria-disabled='true']) {
     cursor: pointer;
   }
+
+  &.mat-expansion-toggle-indicator-before {
+    flex-direction: row-reverse;
+
+    .mat-expansion-indicator {
+      padding: 0 16px 0 0;
+    }
+  }
 }
 
 .mat-content {
@@ -47,12 +55,16 @@
  * Creates the expansion indicator arrow. Done using ::after rather than having
  * additional nodes in the template.
  */
-.mat-expansion-indicator::after {
-  border-style: solid;
-  border-width: 0 2px 2px 0;
-  content: '';
-  display: inline-block;
-  padding: 3px;
-  transform: rotate(45deg);
-  vertical-align: middle;
-}
+.mat-expansion-indicator {
+  padding: 0 0 0 16px;
+
+  &::after {
+    border-style: solid;
+    border-width: 0 2px 2px 0;
+    content: '';
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+    vertical-align: middle;
+  }
+}

src/material/expansion/expansion-panel-header.ts

@@ -29,6 +29,7 @@ import {
   MatExpansionPanelDefaultOptions,
   MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
 } from './expansion-panel';
+import {MatAccordionTogglePosition} from './accordion-base';
 
 
 /**
@@ -56,6 +57,8 @@ import {
     '[attr.aria-expanded]': '_isExpanded()',
     '[attr.aria-disabled]': 'panel.disabled',
     '[class.mat-expanded]': '_isExpanded()',
+    '[class.mat-expansion-toggle-indicator-after]': `_getTogglePosition() === 'after'`,
+    '[class.mat-expansion-toggle-indicator-before]': `_getTogglePosition() === 'before'`,
     '(click)': '_toggle()',
     '(keydown)': '_keydown($event)',
     '[@expansionHeight]': `{
@@ -79,7 +82,7 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
           defaultOptions?: MatExpansionPanelDefaultOptions) {
     const accordionHideToggleChange = panel.accordion ?
         panel.accordion._stateChanges.pipe(
-            filter(changes => !!changes['hideToggle'])) :
+            filter(changes => !!(changes['hideToggle'] || changes['togglePosition']))) :
         EMPTY;
 
     // Since the toggle state depends on an @Input on the panel, we
@@ -88,7 +91,7 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
         merge(
             panel.opened, panel.closed, accordionHideToggleChange,
             panel._inputChanges.pipe(filter(
-                changes => !!(changes['hideToggle'] || changes['disabled']))))
+                changes => !!(changes['hideToggle'] || changes['disabled'] || changes['togglePosition']))))
     .subscribe(() => this._changeDetectorRef.markForCheck());
 
     // Avoids focus being lost if the panel contained the focused element and was closed.
@@ -142,6 +145,11 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
     return this.panel.id;
   }
 
+  /** Gets the toggle position for the header. */
+  _getTogglePosition(): MatAccordionTogglePosition {
+    return this.panel.togglePosition;
+  }
+
   /** Gets whether the expand indicator should be shown. */
   _showToggle(): boolean {
     return !this.panel.hideToggle && !this.panel.disabled;

src/material/expansion/expansion-panel.ts

@@ -39,7 +39,7 @@ import {Subject} from 'rxjs';
 import {filter, startWith, take, distinctUntilChanged} from 'rxjs/operators';
 import {matExpansionAnimations} from './expansion-animations';
 import {MatExpansionPanelContent} from './expansion-panel-content';
-import {MAT_ACCORDION, MatAccordionBase} from './accordion-base';
+import {MAT_ACCORDION, MatAccordionBase, MatAccordionTogglePosition} from './accordion-base';
 
 /** MatExpansionPanel's states. */
 export type MatExpansionPanelState = 'expanded' | 'collapsed';
@@ -100,8 +100,9 @@ export const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS =
 })
 export class MatExpansionPanel extends CdkAccordionItem implements AfterContentInit, OnChanges,
   OnDestroy {
-
   private _document: Document;
+  private _hideToggle = false;
+  private _togglePosition: MatAccordionTogglePosition;
 
   /** Whether the toggle indicator should be hidden. */
   @Input()
@@ -111,7 +112,15 @@ export class MatExpansionPanel extends CdkAccordionItem implements AfterContentI
   set hideToggle(value: boolean) {
     this._hideToggle = coerceBooleanProperty(value);
   }
-  private _hideToggle = false;
+
+  /** Whether the toggle indicator should be hidden. */
+  @Input()
+  get togglePosition(): MatAccordionTogglePosition {
+    return this._togglePosition || (this.accordion && this.accordion.togglePosition);
+  }
+  set togglePosition(value: MatAccordionTogglePosition) {
+    this._togglePosition = value;
+  }
 
   /** An event emitted after the body's expansion animation happens. */
   @Output() afterExpand = new EventEmitter<void>();