@angular/material 15.0.2 → 15.1.0-next.1

package/legacy-tabs/testing/index.d.ts

@@ -22,6 +22,8 @@ export declare interface LegacyTabGroupHarnessFilters extends BaseHarnessFilters
 export declare interface LegacyTabHarnessFilters extends BaseHarnessFilters {
     /** Only find instances whose label matches the given value. */
     label?: string | RegExp;
+    /** Only find instances whose selected state matches the given value. */
+    selected?: boolean;
 }
 
 /**

package/list/_interactive-list-theme.scss

@@ -1,13 +1,11 @@
 @use 'sass:map';
 @use '@material/ripple' as mdc-ripple;
-@use '../core/theming/theming';
 
 // Mixin that provides colors for the various states of an interactive list-item. MDC
 // has integrated styles for these states but relies on their complex ripples for it.
 @mixin private-interactive-list-item-state-colors($config) {
   $is-dark-theme: map.get($config, is-dark);
   $active-base-color: if($is-dark-theme, white, black);
-  $selected-color: theming.get-color-from-palette(map.get($config, primary));
 
   .mat-mdc-list-item-interactive {
     &::before {
@@ -18,21 +16,6 @@
       opacity: mdc-ripple.states-opacity($active-base-color, hover);
     }
 
-    &.mdc-list-item--selected {
-      &::before {
-        background: $selected-color;
-        opacity: mdc-ripple.states-opacity($selected-color, selected);
-      }
-
-      &:not(:focus):not(.mdc-list-item--disabled):hover::before {
-        // The hover and selected opacities need to be combined to match with what the MDC
-        // ripple state would render. More details here:
-        // https://github.com/material-components/material-components-web/blob/348665978ce73694ad4518626dd70cdf5b984113/packages/mdc-ripple/_ripple-theme.scss#L450.
-        opacity: mdc-ripple.states-opacity($selected-color, hover) +
-                 mdc-ripple.states-opacity($selected-color, selected);
-      }
-    }
-
     &:focus::before {
       opacity: mdc-ripple.states-opacity($active-base-color, focus);
     }

package/list/_list-option-theme.scss

@@ -2,13 +2,16 @@
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../checkbox/checkbox-private';
 @use './list-option-trailing-avatar-compat';
+@use '../radio/radio-private';
 
-// Mixin that overrides the selected item and checkbox colors for list options. By
-// default, the MDC list uses the `primary` color for list items. The MDC checkbox
-// inside list options by default uses the `primary` color too.
+// Mixin that overrides the selected item and toggle indicator colors for list
+// options. By default, the MDC list uses the `primary` color for list items.
+// The MDC radio/checkbox inside list options by default uses the `primary`
+// color too.
 @mixin private-list-option-color-override($color-config, $color, $mdc-color) {
   & .mdc-list-item__start, & .mdc-list-item__end {
     @include checkbox-private.private-checkbox-styles-with-color($color-config, $color, $mdc-color);
+    @include radio-private.private-radio-color($color-config, $color);
   }
 }
 

package/list/index.d.ts

@@ -83,7 +83,7 @@ declare namespace i7 {
  * @docs-private
  */
 declare interface ListOption {
-    _getCheckboxPosition(): MatListOptionCheckboxPosition;
+    _getTogglePosition(): MatListOptionTogglePosition;
 }
 
 /**
@@ -256,9 +256,9 @@ declare abstract class MatListItemBase implements AfterViewInit, OnDestroy, Ripp
 /**
  * @docs-private
  *
- * MDC uses the very intuitively named classes `.mdc-list-item__start` and `.mat-list-item__end`
- * to position content such as icons or checkboxes that comes either before or after the text
- * content respectively. This directive detects the placement of the checkbox and applies the
+ * MDC uses the very intuitively named classes `.mdc-list-item__start` and `.mat-list-item__end` to
+ * position content such as icons or checkboxes/radios that comes either before or after the text
+ * content respectively. This directive detects the placement of the checkbox/radio and applies the
  * correct MDC class to position the icon/avatar on the opposite side.
  */
 export declare class _MatListItemGraphicBase {
@@ -334,9 +334,17 @@ export declare class MatListOption extends MatListItemBase implements ListOption
      * @docs-private
      */
     readonly selectedChange: EventEmitter<boolean>;
-    /** Whether the label should appear before or after the checkbox. Defaults to 'after' */
-    checkboxPosition: MatListOptionCheckboxPosition;
-    /** Theme color of the list option. This sets the color of the checkbox. */
+    /** Whether the label should appear before or after the checkbox/radio. Defaults to 'after' */
+    togglePosition: MatListOptionTogglePosition;
+    /**
+     * Whether the label should appear before or after the checkbox/radio. Defaults to 'after'
+     *
+     * @deprecated Use `togglePosition` instead.
+     * @breaking-change 17.0.0
+     */
+    get checkboxPosition(): MatListOptionTogglePosition;
+    set checkboxPosition(value: MatListOptionTogglePosition);
+    /** Theme color of the list option. This sets the color of the checkbox/radio. */
     get color(): ThemePalette;
     set color(newValue: ThemePalette);
     private _color;
@@ -363,14 +371,16 @@ export declare class MatListOption extends MatListItemBase implements ListOption
     /** Gets the text label of the list option. Used for the typeahead functionality in the list. */
     getLabel(): string;
     /** Whether a checkbox is shown at the given position. */
-    _hasCheckboxAt(position: MatListOptionCheckboxPosition): boolean;
+    _hasCheckboxAt(position: MatListOptionTogglePosition): boolean;
+    /** Where a radio indicator is shown at the given position. */
+    _hasRadioAt(position: MatListOptionTogglePosition): boolean;
     /** Whether icons or avatars are shown at the given position. */
     _hasIconsOrAvatarsAt(position: 'before' | 'after'): boolean;
     /** Gets whether the given type of element is projected at the specified position. */
     _hasProjected(type: 'icons' | 'avatars', position: 'before' | 'after'): boolean;
     _handleBlur(): void;
-    /** Gets the current position of the checkbox. */
-    _getCheckboxPosition(): MatListOptionCheckboxPosition;
+    /** Gets the current position of the checkbox/radio. */
+    _getTogglePosition(): MatListOptionTogglePosition;
     /**
      * Sets the selected state of the option.
      * @returns Whether the value has changed.
@@ -387,14 +397,16 @@ export declare class MatListOption extends MatListItemBase implements ListOption
     /** Sets the tabindex of the list option. */
     _setTabindex(value: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatListOption, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatListOption, "mat-list-option", ["matListOption"], { "checkboxPosition": "checkboxPosition"; "color": "color"; "value": "value"; "selected": "selected"; }, { "selectedChange": "selectedChange"; }, ["_lines", "_titles"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "mat-divider"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatListOption, "mat-list-option", ["matListOption"], { "togglePosition": "togglePosition"; "checkboxPosition": "checkboxPosition"; "color": "color"; "value": "value"; "selected": "selected"; }, { "selectedChange": "selectedChange"; }, ["_lines", "_titles"], ["[matListItemAvatar],[matListItemIcon]", "[matListItemTitle]", "[matListItemLine]", "*", "mat-divider"], false, never>;
 }
 
 /**
- * Type describing possible positions of a checkbox in a list option
+ * Type describing possible positions of a checkbox or radio in a list option
  * with respect to the list item's text.
  */
-export declare type MatListOptionCheckboxPosition = 'before' | 'after';
+declare type MatListOptionTogglePosition = 'before' | 'after';
+export { MatListOptionTogglePosition as MatListOptionCheckboxPosition }
+export { MatListOptionTogglePosition }
 
 /**
  * Directive whose purpose is to add the mat- CSS styling to this selector.

package/list/testing/index.d.ts

@@ -5,7 +5,7 @@ import { ContentContainerComponentHarness } from '@angular/cdk/testing';
 import { DividerHarnessFilters } from '@angular/material/divider/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 import { MatDividerHarness } from '@angular/material/divider/testing';
-import { MatListOptionCheckboxPosition } from '@angular/material/list';
+import { MatListOptionTogglePosition } from '@angular/material/list';
 
 export declare interface ActionListHarnessFilters extends BaseHarnessFilters {
 }
@@ -255,8 +255,11 @@ export declare class MatListOptionHarness extends MatListItemHarnessBase {
      */
     static with<T extends MatListOptionHarness>(this: ComponentHarnessConstructor<T>, options?: ListOptionHarnessFilters): HarnessPredicate<T>;
     private _beforeCheckbox;
+    private _beforeRadio;
     /** Gets the position of the checkbox relative to the list option content. */
-    getCheckboxPosition(): Promise<MatListOptionCheckboxPosition>;
+    getCheckboxPosition(): Promise<MatListOptionTogglePosition>;
+    /** Gets the position of the radio relative to the list option content. */
+    getRadioPosition(): Promise<MatListOptionTogglePosition>;
     /** Whether the list option is selected. */
     isSelected(): Promise<boolean>;
     /** Focuses the list option. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material",
-  "version": "15.0.2",
+  "version": "15.1.0-next.1",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -989,7 +989,7 @@
   },
   "peerDependencies": {
     "@angular/animations": "^15.0.0 || ^16.0.0",
-    "@angular/cdk": "15.0.2",
+    "@angular/cdk": "15.1.0-next.1",
     "@angular/core": "^15.0.0 || ^16.0.0",
     "@angular/common": "^15.0.0 || ^16.0.0",
     "@angular/forms": "^15.0.0 || ^16.0.0",