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

package/mdc-dialog/index.d.ts

@@ -118,7 +118,7 @@ export declare class MatDialogClose implements OnInit, OnChanges {
     dialogRef: MatDialogRef<any>;
     private _elementRef;
     private _dialog;
-    /** Screenreader label for the button. */
+    /** Screen-reader label for the button. */
     ariaLabel: string;
     /** Default to "button" to prevents accidental form submits. */
     type: 'submit' | 'button' | 'reset';

package/mdc-form-field/_form-field-density.scss

@@ -88,7 +88,8 @@
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
   .mdc-floating-label--float-above {
     --mat-mdc-form-field-label-transform: translateY(
-            -#{mdc-textfield.get-outlined-label-position-y($height)}) scale(0.75);
+            -#{mdc-textfield.get-outlined-label-position-y($height)})
+            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
     transform: var(--mat-mdc-form-field-label-transform);
   }
 

package/mdc-form-field/_form-field-theme.scss

@@ -58,6 +58,29 @@
       .mat-mdc-form-field.mat-warn {
         @include _color-styles(error);
       }
+
+      // This fixes an issue where the notch appears to be thicker than the rest of the outline when
+      // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
+      // that arises from a combination of the fact that the notch contains text, while the leading
+      // and trailing outline do not, combined with the fact that the border is semi-transparent.
+      // Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
+      // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
+      // (hover, focus, etc.)
+      // TODO(mmalerba): port this fix into MDC
+      .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
+        &.mat-mdc-form-field .mdc-notched-outline__notch {
+          border-left: 1px solid transparent;
+        }
+      }
+
+      [dir='rtl'] {
+        .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
+          &.mat-mdc-form-field .mdc-notched-outline__notch {
+            border-left: none;
+            border-right: 1px solid transparent;
+          }
+        }
+      }
     }
   }
 }
@@ -90,7 +113,8 @@
       // For the non-upgraded notch label (i.e. when rendered on the server), also
       // use the correct `body1` typography level.
       .mdc-floating-label--float-above {
-        font-size: mdc-typography.get-size(body1) * 0.75;
+        font-size: calc(#{
+            mdc-typography.get-size(body1)} * var(--mat-mdc-form-field-floating-label-scale, 0.75));
       }
       .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
         font-size: mdc-typography.get-size(body1);

package/mdc-form-field/index.d.ts

@@ -192,8 +192,8 @@ export declare class MatFormField implements AfterContentInit, AfterContentCheck
     readonly _hintLabelId: string;
     /** State of the mat-hint and mat-error animations. */
     _subscriptAnimationState: string;
-    /** Width of the outline notch. */
-    _outlineNotchWidth: number;
+    /** Width of the label element (at scale=1). */
+    _labelWidth: number;
     /** Gets the current form field control */
     get _control(): MatFormFieldControl<any>;
     set _control(value: MatFormFieldControl<any>);
@@ -380,15 +380,15 @@ export declare class MatFormFieldModule {
 declare class MatFormFieldNotchedOutline implements AfterViewInit {
     private _elementRef;
     private _ngZone;
-    /** Width of the notch. */
-    width: number;
+    /** Width of the label (original scale) */
+    labelWidth: number;
     /** Whether the notch should be opened. */
     open: boolean;
     constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
     ngAfterViewInit(): void;
     _getNotchWidth(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldNotchedOutline, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormFieldNotchedOutline, "div[matFormFieldNotchedOutline]", never, { "width": "matFormFieldNotchedOutlineWidth"; "open": "matFormFieldNotchedOutlineOpen"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatFormFieldNotchedOutline, "div[matFormFieldNotchedOutline]", never, { "labelWidth": "matFormFieldNotchedOutlineLabelWidth"; "open": "matFormFieldNotchedOutlineOpen"; }, {}, never, ["*"], false>;
 }
 
 /** Hint text to be shown underneath the form field control. */

package/mdc-list/index.d.ts

@@ -364,7 +364,7 @@ export declare class MatListOption extends MatListItemBase implements ListOption
      * list changed.
      */
     _markForCheck(): void;
-    /** Toggles the option's value based on a user interacion. */
+    /** Toggles the option's value based on a user interaction. */
     _toggleOnInteraction(): void;
     /** Sets the tabindex of the list option. */
     _setTabindex(value: number): void;

package/mdc-paginator/_paginator-theme.scss

@@ -1,7 +1,9 @@
+@use 'sass:map';
+@use 'sass:meta';
 @use '@angular/material' as mat;
 @use '@material/density' as mdc-density;
 @use '@material/typography' as mdc-typography;
-@use 'sass:map';
+@use '../mdc-form-field/form-field-theme';
 
 @use '../mdc-core/mdc-helpers/mdc-helpers';
 @use './paginator-variables';
@@ -67,6 +69,18 @@
   $height: mdc-density.prop-value(
       paginator-variables.$density-config, $density-scale, height);
 
+  .mat-mdc-paginator {
+    // We need the form field to be narrower in order to fit into the paginator,
+    // so we set its density to be -4 or denser.
+    @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
+         $density-scale == maximum) {
+      @include form-field-theme.density(-4);
+    }
+    @else {
+      @include form-field-theme.density($density-scale);
+    }
+  }
+
   .mat-mdc-paginator-container {
     min-height: $height;
   }

package/mdc-paginator/index.d.ts

@@ -36,7 +36,7 @@ export { MAT_PAGINATOR_INTL_PROVIDER_FACTORY }
 export declare class MatPaginator extends _MatPaginatorBase<MatPaginatorDefaultOptions> {
     /** If set, styles the "page size" form field with the designated style. */
     _formFieldAppearance?: MatFormFieldAppearance;
-    /** ID for the DOM node containing the pagiators's items per page label. */
+    /** ID for the DOM node containing the paginator's items per page label. */
     readonly _pageSizeLabelId: string;
     constructor(intl: MatPaginatorIntl, changeDetectorRef: ChangeDetectorRef, defaults?: MatPaginatorDefaultOptions);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPaginator, [null, null, { optional: true; }]>;

package/mdc-radio/_radio-theme.scss

@@ -22,6 +22,7 @@
   $primary: mat.get-color-from-palette(map.get($config, primary));
   $accent: mat.get-color-from-palette(map.get($config, accent));
   $warn: mat.get-color-from-palette(map.get($config, warn));
+  $foreground: map.get($config, foreground);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
@@ -47,6 +48,11 @@
 
       --mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
 
+      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
+      .mdc-radio--disabled + label {
+        color: mat.get-color-from-palette($foreground, disabled-text);
+      }
+
       &.mat-primary {
         @include _color-palette($primary);
       }
@@ -77,7 +83,7 @@
     @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 
-  @if ($density-scale == -2 or $density-scale == 'minimum') {
+  @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
     .mat-mdc-radio-touch-target {
       display: none;
     }

package/mdc-slide-toggle/_slide-toggle-theme.scss

@@ -74,6 +74,7 @@
   $accent: mat.get-color-from-palette(map.get($config, accent));
   $warn: mat.get-color-from-palette(map.get($config, warn));
   $is-dark: map.get($config, is-dark);
+  $foreground: map.get($config, foreground);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     // MDC's switch doesn't support a `color` property. We add support
@@ -82,6 +83,11 @@
       @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
       @include mdc-switch-theme.theme(_get-theme-base-map($is-dark));
 
+      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
+      .mdc-switch--disabled + label {
+        color: mat.get-color-from-palette($foreground, disabled-text);
+      }
+
       &.mat-primary {
         @include mdc-switch-theme.theme(_get-theme-color-map($primary));
       }

package/mdc-slider/index.d.ts

@@ -138,6 +138,8 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     private _resizeObserver;
     /** Timeout used to debounce resize listeners. */
     private _resizeTimer;
+    /** Cached dimensions of the host element. */
+    private _cachedHostRect;
     constructor(_ngZone: NgZone, _cdr: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _platform: Platform, _globalChangeAndInputListener: GlobalChangeAndInputListener<'input' | 'change'>, document: any, _dir: Directionality, _globalRippleOptions?: RippleGlobalOptions | undefined, animationMode?: string);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -203,6 +205,8 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _getTickMarkClass(tickMark: TickMark): string;
     /** Whether the slider thumb ripples should be disabled. */
     _isRippleDisabled(): boolean;
+    /** Gets the dimensions of the host element. */
+    _getHostDimensions(): DOMRect;
     /** Starts observing and updating the slider if the host changes its size. */
     private _observeHostResize;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;

package/mdc-tabs/_tabs-common.scss

@@ -162,8 +162,11 @@ $mat-tab-animation-duration: 500ms !default;
 
   // The `span` is in the selector in order to increase the specificity, ensuring
   // that it's always higher than the selector that declares the transition.
-  ._mat-animation-noopable span.mdc-tab-indicator__content {
-    transition: none;
+  ._mat-animation-noopable {
+    span.mdc-tab-indicator__content,
+    span.mdc-tab__text-label {
+      transition: none;
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "14.1.0-next.2",
+  "version": "14.1.0",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -426,12 +426,12 @@
   },
   "peerDependencies": {
     "@angular/animations": "^14.0.0 || ^15.0.0",
-    "@angular/cdk": "14.1.0-next.2",
+    "@angular/cdk": "14.1.0",
     "@angular/core": "^14.0.0 || ^15.0.0",
     "@angular/common": "^14.0.0 || ^15.0.0",
     "@angular/forms": "^14.0.0 || ^15.0.0",
     "@angular/platform-browser": "^14.0.0 || ^15.0.0",
-    "@angular/material": "14.1.0-next.2"
+    "@angular/material": "14.1.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",