From b42847af083a5738d328e5ac265c7733e29754b7 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 7 Aug 2024 15:39:57 +0200
Subject: [PATCH] feat(material/button-toggle): allow disabled buttons to be
 interactive

Adds the `disabledInteractive` input to the button toggle that allows users to opt into supporting focus on disabled button toggles.
---
 .../button-toggle/button-toggle-demo.html     | 46 ++++++++++++++++---
 .../button-toggle/button-toggle-demo.ts       |  1 +
 src/material/button-toggle/button-toggle.html |  5 +-
 src/material/button-toggle/button-toggle.scss | 15 ++++--
 .../button-toggle/button-toggle.spec.ts       | 28 +++++++++--
 src/material/button-toggle/button-toggle.ts   | 33 +++++++++++++
 .../testing/button-toggle-harness.spec.ts     | 10 ++++
 .../testing/button-toggle-harness.ts          |  4 +-
 .../material/button-toggle.md                 | 13 +++++-
 9 files changed, 134 insertions(+), 21 deletions(-)

diff --git a/src/dev-app/button-toggle/button-toggle-demo.html b/src/dev-app/button-toggle/button-toggle-demo.html
index f0619ad7895a..3b183d3df0c6 100644
--- a/src/dev-app/button-toggle/button-toggle-demo.html
+++ b/src/dev-app/button-toggle/button-toggle-demo.html
@@ -6,6 +6,10 @@
   <mat-checkbox (change)="isDisabled = $event.checked">Disable Button Toggle Items</mat-checkbox>
 </p>
 
+<p>
+  <mat-checkbox (change)="disabledInteractive = $event.checked">Allow Interaction with Disabled Button Toggles</mat-checkbox>
+</p>
+
 <p>
   <mat-checkbox (change)="hideSingleSelectionIndicator = $event.checked">Hide Single Selection Indicator</mat-checkbox>
 </p>
@@ -17,7 +21,11 @@
 <h1>Exclusive Selection</h1>
 
 <section>
-  <mat-button-toggle-group name="alignment" [vertical]="isVertical" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator">
+  <mat-button-toggle-group
+    name="alignment"
+    [vertical]="isVertical"
+    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
+    [disabledInteractive]="disabledInteractive">
     <mat-button-toggle value="left" [disabled]="isDisabled">
       <mat-icon>format_align_left</mat-icon>
     </mat-button-toggle>
@@ -34,7 +42,12 @@ <h1>Exclusive Selection</h1>
 </section>
 
 <section>
-  <mat-button-toggle-group appearance="legacy" name="alignment" [vertical]="isVertical" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator">
+  <mat-button-toggle-group
+    appearance="legacy"
+    name="alignment"
+    [vertical]="isVertical"
+    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
+    [disabledInteractive]="disabledInteractive">
     <mat-button-toggle value="left" [disabled]="isDisabled">
       <mat-icon>format_align_left</mat-icon>
     </mat-button-toggle>
@@ -53,7 +66,12 @@ <h1>Exclusive Selection</h1>
 <h1>Disabled Group</h1>
 
 <section>
-  <mat-button-toggle-group name="checkbox" [vertical]="isVertical" [disabled]="isDisabled" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator">
+  <mat-button-toggle-group
+    name="checkbox"
+    [vertical]="isVertical"
+    [disabled]="isDisabled"
+    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
+    [disabledInteractive]="disabledInteractive">
     <mat-button-toggle value="bold">
       <mat-icon>format_bold</mat-icon>
     </mat-button-toggle>
@@ -61,14 +79,18 @@ <h1>Disabled Group</h1>
       <mat-icon>format_italic</mat-icon>
     </mat-button-toggle>
     <mat-button-toggle value="underline">
-      <mat-icon>format_underline</mat-icon>
+      <mat-icon>format_underlined</mat-icon>
     </mat-button-toggle>
   </mat-button-toggle-group>
 </section>
 
 <h1>Multiple Selection</h1>
 <section>
-  <mat-button-toggle-group multiple [vertical]="isVertical" [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator">
+  <mat-button-toggle-group
+    multiple
+    [vertical]="isVertical"
+    [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator"
+    [disabledInteractive]="disabledInteractive">
     <mat-button-toggle>Flour</mat-button-toggle>
     <mat-button-toggle>Eggs</mat-button-toggle>
     <mat-button-toggle>Sugar</mat-button-toggle>
@@ -76,7 +98,12 @@ <h1>Multiple Selection</h1>
   </mat-button-toggle-group>
 </section>
 <section>
-  <mat-button-toggle-group appearance="legacy" multiple [vertical]="isVertical" [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator">
+  <mat-button-toggle-group
+    appearance="legacy"
+    multiple
+    [vertical]="isVertical"
+    [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator"
+    [disabledInteractive]="disabledInteractive">
     <mat-button-toggle>Flour</mat-button-toggle>
     <mat-button-toggle>Eggs</mat-button-toggle>
     <mat-button-toggle>Sugar</mat-button-toggle>
@@ -90,7 +117,12 @@ <h1>Single Toggle</h1>
 
 <h1>Dynamic Exclusive Selection</h1>
 <section>
-  <mat-button-toggle-group name="pies" [(ngModel)]="favoritePie" [vertical]="isVertical" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator">
+  <mat-button-toggle-group
+    name="pies"
+    [(ngModel)]="favoritePie"
+    [vertical]="isVertical"
+    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator"
+    [disabledInteractive]="disabledInteractive">
     @for (pie of pieOptions; track pie) {
       <mat-button-toggle [value]="pie">{{pie}}</mat-button-toggle>
     }
diff --git a/src/dev-app/button-toggle/button-toggle-demo.ts b/src/dev-app/button-toggle/button-toggle-demo.ts
index 4e4c9568c56d..a2e4f1fbd05c 100644
--- a/src/dev-app/button-toggle/button-toggle-demo.ts
+++ b/src/dev-app/button-toggle/button-toggle-demo.ts
@@ -24,6 +24,7 @@ import {MatIconModule} from '@angular/material/icon';
 export class ButtonToggleDemo {
   isVertical = false;
   isDisabled = false;
+  disabledInteractive = false;
   hideSingleSelectionIndicator = false;
   hideMultipleSelectionIndicator = false;
   favoritePie = 'Apple';
diff --git a/src/material/button-toggle/button-toggle.html b/src/material/button-toggle/button-toggle.html
index dc70074e886c..9452213fa907 100644
--- a/src/material/button-toggle/button-toggle.html
+++ b/src/material/button-toggle/button-toggle.html
@@ -2,13 +2,14 @@
         type="button"
         [id]="buttonId"
         [attr.role]="isSingleSelector() ? 'radio' : 'button'"
-        [attr.tabindex]="disabled ? -1 : tabIndex"
+        [attr.tabindex]="disabled && !disabledInteractive ? -1 : tabIndex"
         [attr.aria-pressed]="!isSingleSelector() ? checked : null"
         [attr.aria-checked]="isSingleSelector() ? checked : null"
-        [disabled]="disabled || null"
+        [disabled]="(disabled && !disabledInteractive) || null"
         [attr.name]="_getButtonName()"
         [attr.aria-label]="ariaLabel"
         [attr.aria-labelledby]="ariaLabelledby"
+        [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
         (click)="_onButtonClick()">
   <span class="mat-button-toggle-label-content">
     <!-- Render checkmark at the beginning for single-selection. -->
diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss
index 3b19d6c77dd9..1c98b53f7c4b 100644
--- a/src/material/button-toggle/button-toggle.scss
+++ b/src/material/button-toggle/button-toggle.scss
@@ -121,6 +121,8 @@ $_standard-tokens: (
 }
 
 .mat-button-toggle-disabled {
+  pointer-events: none;
+
   @include token-utils.use-tokens($_legacy-tokens...) {
     @include token-utils.create-token-slot(color, disabled-state-text-color);
     @include token-utils.create-token-slot(background-color, disabled-state-background-color);
@@ -134,6 +136,10 @@ $_standard-tokens: (
   }
 }
 
+.mat-button-toggle-disabled-interactive {
+  pointer-events: auto;
+}
+
 .mat-button-toggle-appearance-standard {
   @include token-utils.use-tokens($_standard-tokens...) {
     $divider-color: token-utils.get-token-variable(divider-color);
@@ -185,16 +191,15 @@ $_standard-tokens: (
       @include token-utils.create-token-slot(background-color, state-layer-color);
     }
 
-    &:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
+    &:hover .mat-button-toggle-focus-overlay {
       @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
     }
 
     // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
     // overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be
-    // always treated as programmatic focus. Note that it needs the extra `:not` in order to have
-    // more specificity than the `:hover` above.
+    // always treated as programmatic focus.
     // TODO(paul): support `program` as well. See https://github.com/angular/components/issues/9889
-    &.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay {
+    &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
       @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
     }
   }
@@ -204,7 +209,7 @@ $_standard-tokens: (
   // because we still want to preserve the keyboard focus state for hybrid devices that have
   // a keyboard and a touchscreen.
   @media (hover: none) {
-    &:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
+    &:hover .mat-button-toggle-focus-overlay {
       display: none;
     }
   }
diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts
index 7501b549c8ce..e30088d97a6a 100644
--- a/src/material/button-toggle/button-toggle.spec.ts
+++ b/src/material/button-toggle/button-toggle.spec.ts
@@ -434,6 +434,25 @@ describe('MatButtonToggle without forms', () => {
       expect(buttons.every(input => input.disabled)).toBe(true);
     });
 
+    it('should be able to keep the button interactive while disabled', () => {
+      const button = buttonToggleNativeElements[0].querySelector('button')!;
+      testComponent.isGroupDisabled = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(button.hasAttribute('disabled')).toBe(true);
+      expect(button.hasAttribute('aria-disabled')).toBe(false);
+      expect(button.getAttribute('tabindex')).toBe('-1');
+
+      testComponent.disabledIntearctive = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(button.hasAttribute('disabled')).toBe(false);
+      expect(button.getAttribute('aria-disabled')).toBe('true');
+      expect(button.getAttribute('tabindex')).toBe('0');
+    });
+
     it('should update the group value when one of the toggles changes', () => {
       expect(groupInstance.value).toBeFalsy();
       buttonToggleLabelElements[0].click();
@@ -1052,9 +1071,11 @@ describe('MatButtonToggle without forms', () => {
 
 @Component({
   template: `
-  <mat-button-toggle-group [disabled]="isGroupDisabled"
-                           [vertical]="isVertical"
-                           [(value)]="groupValue">
+  <mat-button-toggle-group
+    [disabled]="isGroupDisabled"
+    [disabledInteractive]="disabledIntearctive"
+    [vertical]="isVertical"
+    [(value)]="groupValue">
     @if (renderFirstToggle) {
       <mat-button-toggle value="test1">Test1</mat-button-toggle>
     }
@@ -1067,6 +1088,7 @@ describe('MatButtonToggle without forms', () => {
 })
 class ButtonTogglesInsideButtonToggleGroup {
   isGroupDisabled: boolean = false;
+  disabledIntearctive = false;
   isVertical: boolean = false;
   groupValue: string;
   renderFirstToggle = true;
diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts
index c6290fbe2770..f6ef55cd08f0 100644
--- a/src/material/button-toggle/button-toggle.ts
+++ b/src/material/button-toggle/button-toggle.ts
@@ -60,6 +60,8 @@ export interface MatButtonToggleDefaultOptions {
   hideSingleSelectionIndicator?: boolean;
   /** Whether icon indicators should be hidden for multiple-selection button toggle groups. */
   hideMultipleSelectionIndicator?: boolean;
+  /** Whether disabled toggle buttons should be interactive. */
+  disabledInteractive?: boolean;
 }
 
 /**
@@ -78,6 +80,7 @@ export function MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY(): MatButtonTogg
   return {
     hideSingleSelectionIndicator: false,
     hideMultipleSelectionIndicator: false,
+    disabledInteractive: false,
   };
 }
 
@@ -136,6 +139,7 @@ export class MatButtonToggleChange {
 export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, AfterContentInit {
   private _multiple = false;
   private _disabled = false;
+  private _disabledInteractive = false;
   private _selectionModel: SelectionModel<MatButtonToggle>;
 
   /**
@@ -229,6 +233,16 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
     this._markButtonsForCheck();
   }
 
+  /** Whether buttons in the group should be interactive while they're disabled. */
+  @Input({transform: booleanAttribute})
+  get disabledInteractive(): boolean {
+    return this._disabledInteractive;
+  }
+  set disabledInteractive(value: boolean) {
+    this._disabledInteractive = value;
+    this._markButtonsForCheck();
+  }
+
   /** The layout direction of the toggle button group. */
   get dir(): Direction {
     return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
@@ -529,6 +543,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
     '[class.mat-button-toggle-standalone]': '!buttonToggleGroup',
     '[class.mat-button-toggle-checked]': 'checked',
     '[class.mat-button-toggle-disabled]': 'disabled',
+    '[class.mat-button-toggle-disabled-interactive]': 'disabledInteractive',
     '[class.mat-button-toggle-appearance-standard]': 'appearance === "standard"',
     'class': 'mat-button-toggle',
     '[attr.aria-label]': 'null',
@@ -626,6 +641,19 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
   }
   private _disabled: boolean = false;
 
+  /** Whether the button should remain interactive when it is disabled. */
+  @Input({transform: booleanAttribute})
+  get disabledInteractive(): boolean {
+    return (
+      this._disabledInteractive ||
+      (this.buttonToggleGroup !== null && this.buttonToggleGroup.disabledInteractive)
+    );
+  }
+  set disabledInteractive(value: boolean) {
+    this._disabledInteractive = value;
+  }
+  private _disabledInteractive: boolean;
+
   /** Event emitted when the group value changes. */
   @Output() readonly change: EventEmitter<MatButtonToggleChange> =
     new EventEmitter<MatButtonToggleChange>();
@@ -645,6 +673,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     this.buttonToggleGroup = toggleGroup;
     this.appearance =
       defaultOptions && defaultOptions.appearance ? defaultOptions.appearance : 'standard';
+    this.disabledInteractive = defaultOptions?.disabledInteractive ?? false;
   }
 
   ngOnInit() {
@@ -687,6 +716,10 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
 
   /** Checks the button toggle due to an interaction with the underlying native button. */
   _onButtonClick() {
+    if (this.disabled) {
+      return;
+    }
+
     const newChecked = this.isSingleSelector() ? true : !this._checked;
 
     if (newChecked !== this._checked) {
diff --git a/src/material/button-toggle/testing/button-toggle-harness.spec.ts b/src/material/button-toggle/testing/button-toggle-harness.spec.ts
index f5e2316732b9..c7fc5f6cdd8f 100644
--- a/src/material/button-toggle/testing/button-toggle-harness.spec.ts
+++ b/src/material/button-toggle/testing/button-toggle-harness.spec.ts
@@ -59,6 +59,14 @@ describe('MatButtonToggleHarness', () => {
     expect(await disabledToggle.isDisabled()).toBe(true);
   });
 
+  it('should get the disabled state for an interactive disabled button', async () => {
+    fixture.componentInstance.disabledInteractive = true;
+    fixture.changeDetectorRef.markForCheck();
+
+    const disabledToggle = (await loader.getAllHarnesses(MatButtonToggleHarness))[1];
+    expect(await disabledToggle.isDisabled()).toBe(true);
+  });
+
   it('should get the toggle name', async () => {
     const toggle = await loader.getHarness(MatButtonToggleHarness.with({text: 'First'}));
     expect(await toggle.getName()).toBe('first-name');
@@ -141,6 +149,7 @@ describe('MatButtonToggleHarness', () => {
         checked>First</mat-button-toggle>
       <mat-button-toggle
         [disabled]="disabled"
+        [disabledInteractive]="disabledInteractive"
         aria-labelledby="second-label"
         appearance="legacy">Second</mat-button-toggle>
       <span id="second-label">Second toggle</span>
@@ -150,4 +159,5 @@ describe('MatButtonToggleHarness', () => {
 })
 class ButtonToggleHarnessTest {
   disabled = true;
+  disabledInteractive = false;
 }
diff --git a/src/material/button-toggle/testing/button-toggle-harness.ts b/src/material/button-toggle/testing/button-toggle-harness.ts
index 2063446b4304..9c6423b67394 100644
--- a/src/material/button-toggle/testing/button-toggle-harness.ts
+++ b/src/material/button-toggle/testing/button-toggle-harness.ts
@@ -55,8 +55,8 @@ export class MatButtonToggleHarness extends ComponentHarness {
 
   /** Gets a boolean promise indicating if the button toggle is disabled. */
   async isDisabled(): Promise<boolean> {
-    const disabled = (await this._button()).getAttribute('disabled');
-    return coerceBooleanProperty(await disabled);
+    const host = await this.host();
+    return host.hasClass('mat-button-toggle-disabled');
   }
 
   /** Gets a promise for the button toggle's name. */
diff --git a/tools/public_api_guard/material/button-toggle.md b/tools/public_api_guard/material/button-toggle.md
index 19e7c23ccba0..90c7615e5090 100644
--- a/tools/public_api_guard/material/button-toggle.md
+++ b/tools/public_api_guard/material/button-toggle.md
@@ -47,6 +47,8 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     set checked(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
+    get disabledInteractive(): boolean;
+    set disabledInteractive(value: boolean);
     disableRipple: boolean;
     focus(options?: FocusOptions): void;
     _getButtonName(): string | null;
@@ -59,6 +61,8 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_disabledInteractive: unknown;
+    // (undocumented)
     static ngAcceptInputType_disableRipple: unknown;
     // (undocumented)
     ngAfterViewInit(): void;
@@ -71,7 +75,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     set tabIndex(value: number | null);
     value: any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggle, [{ optional: true; }, null, null, null, { attribute: "tabindex"; }, { optional: true; }]>;
 }
@@ -91,6 +95,7 @@ export class MatButtonToggleChange {
 // @public
 export interface MatButtonToggleDefaultOptions {
     appearance?: MatButtonToggleAppearance;
+    disabledInteractive?: boolean;
     hideMultipleSelectionIndicator?: boolean;
     hideSingleSelectionIndicator?: boolean;
 }
@@ -105,6 +110,8 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
     get dir(): Direction;
     get disabled(): boolean;
     set disabled(value: boolean);
+    get disabledInteractive(): boolean;
+    set disabledInteractive(value: boolean);
     _emitChangeEvent(toggle: MatButtonToggle): void;
     get hideMultipleSelectionIndicator(): boolean;
     set hideMultipleSelectionIndicator(value: boolean);
@@ -120,6 +127,8 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_disabledInteractive: unknown;
+    // (undocumented)
     static ngAcceptInputType_hideMultipleSelectionIndicator: unknown;
     // (undocumented)
     static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
@@ -146,7 +155,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
     vertical: boolean;
     writeValue(value: any): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "hideMultipleSelectionIndicator": { "alias": "hideMultipleSelectionIndicator"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "hideMultipleSelectionIndicator": { "alias": "hideMultipleSelectionIndicator"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggleGroup, [null, { optional: true; }, { optional: true; }]>;
 }