@angular/material-experimental 14.0.3 → 14.1.0-next.2

package/mdc-button/index.d.ts

@@ -61,7 +61,7 @@ export declare function MAT_FAB_DEFAULT_OPTIONS_FACTORY(): MatFabDefaultOptions;
 export declare class MatAnchor extends MatAnchorBase {
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchor, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAnchor, "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAnchor, "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 /**
@@ -89,7 +89,7 @@ declare class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
 export declare class MatButton extends MatButtonBase {
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButton, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatButton, "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 /** Base class for all buttons.  */
@@ -141,7 +141,7 @@ export declare class MatFabAnchor extends MatAnchor {
     private _extended;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFabAnchor, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabAnchor, "a[mat-fab]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "extended": "extended"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabAnchor, "a[mat-fab]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "extended": "extended"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 /**
@@ -159,7 +159,7 @@ export declare class MatFabButton extends MatButtonBase {
     private _extended;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFabButton, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "extended": "extended"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "extended": "extended"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 /** Default FAB options that can be overridden. */
@@ -176,7 +176,7 @@ export declare class MatIconAnchor extends MatAnchorBase {
     _isIconButton: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconAnchor, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconAnchor, "a[mat-icon-button]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconAnchor, "a[mat-icon-button]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 /**
@@ -188,7 +188,7 @@ export declare class MatIconButton extends MatButtonBase {
     _isIconButton: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconButton, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 /**
@@ -201,7 +201,7 @@ export declare class MatMiniFabAnchor extends MatAnchor {
     _isFab: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabAnchor, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabAnchor, "a[mat-mini-fab]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabAnchor, "a[mat-mini-fab]", ["matButton", "matAnchor"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 /**
@@ -214,7 +214,7 @@ export declare class MatMiniFabButton extends MatButtonBase {
     _isFab: boolean;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string, _options?: MatFabDefaultOptions | undefined);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMiniFabButton, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMiniFabButton, "button[mat-mini-fab]", ["matButton"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]"], false>;
 }
 
 export { }

package/mdc-checkbox/index.d.ts

@@ -48,6 +48,14 @@ export declare class MatCheckbox extends _MatCheckboxBase<MatCheckboxChange> imp
     protected _createChangeEvent(isChecked: boolean): MatCheckboxChange;
     protected _getAnimationTargetElement(): HTMLInputElement;
     _onInputClick(): void;
+    /**
+     *  Prevent click events that come from the `<label/>` element from bubbling. This prevents the
+     *  click handler on the host from triggering twice when clicking on the `<label/>` element. After
+     *  the click event on the `<label/>` propagates, the browsers dispatches click on the associated
+     *  `<input/>`. By preventing clicks on the label by bubbling, we ensure only one click event
+     *  bubbles when the label is clicked.
+     */
+    _preventBubblingFromLabel(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false>;
 }

package/mdc-core/mdc-helpers/_focus-indicators-theme.scss

@@ -2,28 +2,30 @@
 @use 'sass:map';
 @use 'sass:meta';
 
-@mixin _border-color($color) {
-  .mat-mdc-focus-indicator::before {
-    border-color: $color;
-  }
-}
+$_prefix: 'mat-mdc';
 
 // stylelint-disable-next-line material/theme-mixin-api
 @mixin color($config-or-theme-or-color) {
   @if meta.type-of($config-or-theme-or-color) == 'color' {
-    @include _border-color($config-or-theme-or-color);
+    @include mat.private-strong-focus-indicators-customize-focus-indicators((
+      border-color: $config-or-theme-or-color
+    ), $_prefix);
   }
   @else {
     $config: mat.get-color-config($config-or-theme-or-color);
     $border-color: mat.get-color-from-palette(map.get($config, primary));
-    @include _border-color($border-color);
+    @include mat.private-strong-focus-indicators-customize-focus-indicators((
+      border-color: $border-color
+    ), $_prefix);
   }
 }
 
 // stylelint-disable-next-line material/theme-mixin-api
 @mixin theme($theme-or-color-config-or-color) {
   @if meta.type-of($theme-or-color-config-or-color) == 'color' {
-    @include _border-color($theme-or-color-config-or-color);
+    @include mat.private-strong-focus-indicators-customize-focus-indicators((
+      border-color: $theme-or-color-config-or-color
+    ), $_prefix);
   }
   @else {
     $theme: mat.private-legacy-get-theme($theme-or-color-config-or-color);

package/mdc-core/mdc-helpers/_focus-indicators.scss

@@ -1,104 +1,15 @@
-@use '@angular/material' as mat;
 @use 'sass:map';
+@use '@angular/material' as mat;
 
-/// Mixin that turns on strong focus indicators.
-///
-/// @example
-///   .my-app {
-///     @include mat-mdc-strong-focus-indicators($config);
-///   }
 @mixin strong-focus-indicators($config: ()) {
   // Default focus indicator config.
   $default-config: (
-    border-style: solid,
-    border-width: 3px,
-    border-radius: 4px,
+    border-color: black,
+    display: block,
   );
 
   // Merge default config with user config.
   $config: map.merge($default-config, $config);
-  $border-style: map.get($config, border-style);
-  $border-width: map.get($config, border-width);
-  $border-radius: map.get($config, border-radius);
-
-  // Base styles for focus indicators.
-  .mat-mdc-focus-indicator::before {
-    @include mat.private-fill();
-    box-sizing: border-box;
-    pointer-events: none;
-    border: $border-width $border-style transparent;
-    border-radius: $border-radius;
-
-    .cdk-high-contrast-active & {
-      display: none;
-    }
-  }
-
-  // By default, all focus indicators are flush with the bounding box of their
-  // host element. For particular elements (listed below), default inset/offset
-  // values are necessary to ensure that the focus indicator is sufficiently
-  // contrastive and renders appropriately.
-
-  .mat-mdc-unelevated-button .mat-mdc-focus-indicator::before,
-  .mat-mdc-raised-button .mat-mdc-focus-indicator::before,
-  .mdc-fab .mat-mdc-focus-indicator::before,
-  .mat-mdc-chip-action-label .mat-mdc-focus-indicator::before {
-    margin: -($border-width + 2px);
-  }
-
-  .mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
-    margin: -($border-width + 3px);
-  }
-
-  .mat-mdc-focus-indicator.mat-mdc-chip-remove::before {
-    margin: -$border-width;
-  }
-
-  // MDC sets a padding a on the button which stretches out the focus indicator.
-  .mat-mdc-focus-indicator.mat-mdc-chip-remove::before {
-    left: 8px;
-    right: 8px;
-  }
-
-  .mat-mdc-focus-indicator.mat-mdc-tab::before,
-  .mat-mdc-focus-indicator.mat-mdc-tab-link::before {
-    margin: 5px;
-  }
-
-  // These components have to set `border-radius: 50%` in order to support density scaling
-  // which will clip a square focus indicator so we have to turn it into a circle.
-  .mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before,
-  .mat-radio-ripple.mat-mdc-focus-indicator::before,
-  .mat-mdc-slider .mat-mdc-focus-indicator::before,
-  .mat-mdc-slide-toggle .mat-mdc-focus-indicator::before {
-    border-radius: 50%;
-  }
-
-  // Render the focus indicator on focus. Defining a pseudo element's
-  // content will cause it to render.
-
-  // For checkboxes, radios and slide toggles, render the focus indicator when we know
-  // the hidden input is focused (slightly different for each control).
-  .mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
-  .mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
-  .mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
-
-  // In the chips the individual actions have focus so we target a different element.
-  .mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before,
-
-  // For buttons and list items, render the focus indicator when the parent
-  // button or list item is focused.
-  .mat-mdc-button-base:focus .mat-mdc-focus-indicator::before,
-  .mat-mdc-list-item:focus > .mat-mdc-focus-indicator::before,
-
-  // For options, render the focus indicator when the class .mat-mdc-option-active is present.
-  .mat-mdc-focus-indicator.mat-mdc-option-active::before,
-
-  // In the MDC slider the focus indicator is inside the thumb.
-  .mdc-slider__thumb--focused .mat-mdc-focus-indicator::before,
 
-    // For all other components, render the focus indicator on focus.
-  .mat-mdc-focus-indicator:focus::before {
-    content: '';
-  }
+  @include mat.private-strong-focus-indicators-customize-focus-indicators($config, 'mat-mdc');
 }