@@ -28,6 +28,8 @@ import {
2828 QueryList ,
2929 ViewChild ,
3030 ViewEncapsulation ,
31+ InjectionToken ,
32+ Inject ,
3133} from '@angular/core' ;
3234import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ;
3335import {
@@ -40,6 +42,26 @@ import {
4042/** Acceptable types for a button toggle. */
4143export type ToggleType = 'checkbox' | 'radio' ;
4244
45+ /** Possible appearance styles for the button toggle. */
46+ export type MatButtonToggleAppearance = 'legacy' | 'standard' ;
47+
48+ /**
49+ * Represents the default options for the button toggle that can be configured
50+ * using the `MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS` injection token.
51+ */
52+ export interface MatButtonToggleDefaultOptions {
53+ appearance ?: MatButtonToggleAppearance ;
54+ }
55+
56+ /**
57+ * Injection token that can be used to configure the
58+ * default options for all button toggles within an app.
59+ */
60+ export const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS =
61+ new InjectionToken < MatButtonToggleDefaultOptions > ( 'MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS' ) ;
62+
63+
64+
4365/**
4466 * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor.
4567 * This allows it to support [(ngModel)].
@@ -80,12 +102,13 @@ export class MatButtonToggleChange {
80102 'role' : 'group' ,
81103 'class' : 'mat-button-toggle-group' ,
82104 '[attr.aria-disabled]' : 'disabled' ,
83- '[class.mat-button-toggle-vertical]' : 'vertical'
105+ '[class.mat-button-toggle-vertical]' : 'vertical' ,
106+ '[class.mat-button-toggle-group-appearance-standard]' : 'appearance === "standard"' ,
107+ '[class.mat-button-toggle-group-appearance-legacy]' : 'appearance === "legacy"' ,
84108 } ,
85109 exportAs : 'matButtonToggleGroup' ,
86110} )
87111export class MatButtonToggleGroup implements ControlValueAccessor , OnInit , AfterContentInit {
88-
89112 private _vertical = false ;
90113 private _multiple = false ;
91114 private _disabled = false ;
@@ -111,6 +134,9 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
111134 /** Child button toggle buttons. */
112135 @ContentChildren ( forwardRef ( ( ) => MatButtonToggle ) ) _buttonToggles : QueryList < MatButtonToggle > ;
113136
137+ /** The appearance for all the buttons in the group. */
138+ @Input ( ) appearance : MatButtonToggleAppearance ;
139+
114140 /** `name` attribute for the underlying `input` element. */
115141 @Input ( )
116142 get name ( ) : string { return this . _name ; }
@@ -181,7 +207,14 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
181207 @Output ( ) readonly change : EventEmitter < MatButtonToggleChange > =
182208 new EventEmitter < MatButtonToggleChange > ( ) ;
183209
184- constructor ( private _changeDetector : ChangeDetectorRef ) { }
210+ constructor (
211+ private _changeDetector : ChangeDetectorRef ,
212+ @Optional ( ) @Inject ( MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS )
213+ defaultOptions ?: MatButtonToggleDefaultOptions ) {
214+
215+ this . appearance =
216+ defaultOptions && defaultOptions . appearance ? defaultOptions . appearance : 'standard' ;
217+ }
185218
186219 ngOnInit ( ) {
187220 this . _selectionModel = new SelectionModel < MatButtonToggle > ( this . multiple , undefined , false ) ;
@@ -331,6 +364,8 @@ export const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonT
331364 '[class.mat-button-toggle-standalone]' : '!buttonToggleGroup' ,
332365 '[class.mat-button-toggle-checked]' : 'checked' ,
333366 '[class.mat-button-toggle-disabled]' : 'disabled' ,
367+ '[class.mat-button-toggle-appearance-standard]' : 'appearance === "standard"' ,
368+ '[class.mat-button-toggle-appearance-legacy]' : 'appearance === "legacy"' ,
334369 'class' : 'mat-button-toggle' ,
335370 // Clear out the native tabindex here since we forward it to the underlying button
336371 '[attr.tabindex]' : 'null' ,
@@ -377,6 +412,16 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
377412 /** Tabindex for the toggle. */
378413 @Input ( ) tabIndex : number | null ;
379414
415+ /** The appearance style of the button. */
416+ @Input ( )
417+ get appearance ( ) : MatButtonToggleAppearance {
418+ return this . buttonToggleGroup ? this . buttonToggleGroup . appearance : this . _appearance ;
419+ }
420+ set appearance ( value : MatButtonToggleAppearance ) {
421+ this . _appearance = value ;
422+ }
423+ private _appearance : MatButtonToggleAppearance ;
424+
380425 /** Whether the button is checked. */
381426 @Input ( )
382427 get checked ( ) : boolean {
@@ -413,12 +458,16 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
413458 private _elementRef : ElementRef < HTMLElement > ,
414459 private _focusMonitor : FocusMonitor ,
415460 // @breaking -change 8.0.0 `defaultTabIndex` to be made a required parameter.
416- @Attribute ( 'tabindex' ) defaultTabIndex : string ) {
461+ @Attribute ( 'tabindex' ) defaultTabIndex : string ,
462+ @Optional ( ) @Inject ( MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS )
463+ defaultOptions ?: MatButtonToggleDefaultOptions ) {
417464 super ( ) ;
418465
419466 const parsedTabIndex = Number ( defaultTabIndex ) ;
420467 this . tabIndex = ( parsedTabIndex || parsedTabIndex === 0 ) ? parsedTabIndex : null ;
421468 this . buttonToggleGroup = toggleGroup ;
469+ this . appearance =
470+ defaultOptions && defaultOptions . appearance ? defaultOptions . appearance : 'standard' ;
422471 }
423472
424473 ngOnInit ( ) {
0 commit comments