@angular/material 17.2.0-next.1 → 17.2.0

package/core/tokens/m2/mat/_list.scss

@@ -0,0 +1,44 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, list);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    // active indicator themable with M3
+    active-indicator-color: transparent,
+    active-indicator-shape: 0,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return (
+    list-item-leading-icon-start-space: 16px,
+    list-item-leading-icon-end-space: 32px,
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_menu.scss

@@ -10,6 +10,14 @@ $prefix: (mat, menu);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    divider-bottom-spacing: 0,
+    divider-top-spacing: 0,
+    item-spacing: 16px,
+    item-icon-size: 24px,
+    item-leading-spacing: 16px,
+    item-trailing-spacing: 16px,
+    item-with-icon-leading-spacing: 16px,
+    item-with-icon-trailing-spacing: 16px,
   );
 }
 
@@ -26,6 +34,7 @@ $prefix: (mat, menu);
     item-hover-state-layer-color: $active-state-layer-color,
     item-focus-state-layer-color: $active-state-layer-color,
     container-color: inspection.get-theme-color($theme, background, card),
+    divider-color: inspection.get-theme-color($theme, foreground, divider),
   );
 }
 

package/core/tokens/m2/mat/_paginator.scss

@@ -1,4 +1,7 @@
+@use 'sass:math';
 @use 'sass:map';
+@use '@material/textfield' as mdc-textfield;
+@use '@material/density' as mdc-density;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -39,16 +42,33 @@ $prefix: (mat, paginator);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
   $size-scale: (
     0: 56px,
     -1: 52px,
     -2: 48px,
     -3: 40px,
+    -4: 40px,
+    -5: 40px,
   );
+  $form-field-density-scale: if($density-scale > -4, -4, $density-scale);
+  $form-field-height: mdc-density.prop-value(
+    $density-config: mdc-textfield.$density-config,
+    $density-scale: $form-field-density-scale,
+    $property-name: height,
+  );
+  // We computed the desired height of the form-field using the density configuration. The
+  // spec only describes vertical spacing/alignment in non-dense mode. This means that we
+  // cannot update the spacing to explicit numbers based on the density scale. Instead, we
+  // determine the height reduction and equally subtract it from the default `top` and `bottom`
+  // padding that is provided by the Material Design specification.
+  $form-field-vertical-deduction: math.div(mdc-textfield.$height - $form-field-height, 2);
+  $form-field-vertical-padding: 16px - $form-field-vertical-deduction;
 
   @return (
-    container-size: map.get($size-scale, $density-scale)
+    container-size: map.get($size-scale, $density-scale),
+    form-field-container-height: $form-field-height,
+    form-field-container-vertical-padding: $form-field-vertical-padding,
   );
 }
 

package/core/tokens/m2/mat/_select.scss

@@ -1,6 +1,9 @@
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/inspection';
+@use '../../../theming/theming';
 @use '../../../style/sass-utils';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, select);
@@ -8,7 +11,9 @@ $prefix: (mat, select);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
@@ -43,7 +48,15 @@ $prefix: (mat, select);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
+
+  @return (
+    arrow-transform: map.get((
+      0: translateY(-8px),
+      -1: translateY(-8px),
+      -2: none,
+    ), $density-scale),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

package/core/tokens/m2/mat/_sidenav.scss

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use '../../token-utils';
@@ -14,6 +15,8 @@ $prefix: (mat, sidenav);
     // Currently zero, but it appears to be relevant for M3.
     // See: https://m3.material.io/components/navigation-drawer/overview
     container-shape: 0,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
+    container-width: auto,
   );
 }
 

package/core/tokens/m2/mat/_standard-button-toggle.scss

@@ -52,11 +52,11 @@ $prefix: (mat, standard-button-toggle);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
-    // letter spacing etc). The button toggle only has the font to match what it had in the
-    // old theming API and to reduce internal breakages. We should introduce more typography
-    // tokens at some point.
-    text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 

package/core/tokens/m2/mat/_switch.scss

@@ -0,0 +1,69 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, switch);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    disabled-selected-handle-opacity: 0.38,
+    disabled-unselected-handle-opacity: 0.38,
+
+    unselected-handle-size: 20px,
+    selected-handle-size: 20px,
+    pressed-handle-size: 20px,
+    with-icon-handle-size: 20px,
+
+    selected-handle-horizontal-margin: 0,
+    selected-with-icon-handle-horizontal-margin: 0,
+    selected-pressed-handle-horizontal-margin: 0,
+    unselected-handle-horizontal-margin: 0,
+    unselected-with-icon-handle-horizontal-margin: 0,
+    unselected-pressed-handle-horizontal-margin: 0,
+
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+
+    visible-track-opacity: 1,
+    hidden-track-opacity: 1,
+    visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
+    hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
+
+    track-outline-width: 1px,
+    track-outline-color: transparent,
+    disabled-unselected-track-outline-width: 1px,
+    disabled-unselected-track-outline-color: transparent,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_chip.scss

@@ -47,6 +47,18 @@ $prefix: (mdc, chip);
     disabled-outline-color: transparent,
     // The chip's border color when focused.
     focus-outline-color: transparent,
+    // The opacity of the chip's state overlay when hovered.
+    hover-state-layer-opacity: 0.04,
+    // The opacity of the chip's avatar when disabled.
+    with-avatar-disabled-avatar-opacity: 1,
+    // The chip's border width when selected.
+    flat-selected-outline-width: 0,
+    // The opacity of the chip's state overlay when selected and hovered.
+    selected-hover-state-layer-opacity: 0.04,
+    // The opacity of the chip's trailing icon when it is disabled.
+    with-trailing-icon-disabled-trailing-icon-opacity: 1,
+    // The opacity of the chip's leading icon when it is disabled.
+    with-icon-disabled-icon-opacity: 1,
     // Not used by MDC.
     disabled-label-text-opacity: null,
     // Not used by MDC.
@@ -60,20 +72,12 @@ $prefix: (mdc, chip);
     // Our chips do not have a border.
     flat-outline-width: null,
     // Our chips do not have a border.
-    flat-selected-outline-width: null,
-    // Our chips do not have a border.
     flat-unselected-outline-width: null,
     // Not used by MDC.
-    with-avatar-disabled-avatar-opacity: null,
-    // Not used by MDC.
-    with-icon-disabled-icon-opacity: null,
-    // Not used by MDC.
     with-leading-icon-disabled-leading-icon-opacity: null,
     // Not used by MDC.
     with-leading-icon-leading-icon-size: null,
     // Not used by MDC.
-    with-trailing-icon-disabled-trailing-icon-opacity: null,
-    // Not used by MDC.
     with-trailing-icon-trailing-icon-size: null,
     // Elevated chips not implemented.
     container-elevation: null,
@@ -94,8 +98,6 @@ $prefix: (mdc, chip);
     // Elevated chips not implemented.
     elevated-pressed-container-elevation: null,
     // Elevated chips not implemented.
-    elevated-selected-container-color: null,
-    // Elevated chips not implemented.
     elevated-selected-container-elevation: null,
     // Elevated chips not implemented.
     elevated-unselected-container-color: null,
@@ -103,8 +105,6 @@ $prefix: (mdc, chip);
     flat-container-elevation: null,
     // Our chips do not have a border.
     flat-disabled-outline-color: null,
-    // Not providing this uses
-    flat-disabled-selected-container-color: null,
     // Not used by MDC.
     flat-disabled-selected-container-opacity: null,
     // Unused.
@@ -142,10 +142,6 @@ $prefix: (mdc, chip);
     // Unused.
     hover-label-text-color: null,
     // Unused.
-    hover-state-layer-color: null,
-    // Unused.
-    hover-state-layer-opacity: null,
-    // Unused.
     pressed-label-text-color: null,
     // Unused.
     pressed-state-layer-color: null,
@@ -154,18 +150,8 @@ $prefix: (mdc, chip);
     // Unused.
     selected-focus-label-text-color: null,
     // Unused.
-    selected-focus-state-layer-color: null,
-    // Unused.
-    selected-focus-state-layer-opacity: null,
-    // Unused.
     selected-hover-label-text-color: null,
     // Unused.
-    selected-hover-state-layer-color: null,
-    // Unused.
-    selected-hover-state-layer-opacity: null,
-    // Unused.
-    selected-label-text-color: null,
-    // Unused.
     selected-pressed-label-text-color: null,
     // Unused.
     selected-pressed-state-layer-color: null,
@@ -265,14 +251,28 @@ $prefix: (mdc, chip);
     disabled-label-text-color: $foreground,
     // The background-color of the chip.
     elevated-container-color: $background,
+    // The background-color of the chip when selected.
+    elevated-selected-container-color: $background,
     // The background-color of a disabled chip.
     elevated-disabled-container-color: $background,
+    // The background color of the chip when disabled and selected.
+    flat-disabled-selected-container-color: $background,
     // The color of the focus state layer.
     focus-state-layer-color: $state-layer-color,
+    // The color of the hover state layer.
+    hover-state-layer-color: $state-layer-color,
+    // The color of the chip's state overlay when selected and hovered.
+    selected-hover-state-layer-color: $state-layer-color,
     // The opacity of the focus state layer.
     focus-state-layer-opacity: $state-layer-opacity,
+    // The color of the chip's state overlay when selected and focused.
+    selected-focus-state-layer-color: $state-layer-color,
+    // The opacity of the chip's state overlay when selected and focused.
+    selected-focus-state-layer-opacity: $state-layer-opacity,
     // The chip text color.
     label-text-color: $foreground,
+    // The chip text color when selected.
+    selected-label-text-color: $foreground,
     // The icon color of a chip.
     with-icon-icon-color: $foreground,
     // The color of the icon of a disabled chip.

package/core/tokens/m2/mdc/_switch.scss

@@ -18,7 +18,7 @@ $prefix: (mdc, switch);
 @function get-unthemable-tokens() {
   @return (
     // Opacity of handle when disabled.
-    disabled-handle-opacity: 0.38,
+    disabled-handle-opacity: null,
     // Opacity of icon when disabled and selected.
     disabled-selected-icon-opacity: 0.38,
     // Opacity of track when disabled.

package/core/typography/_all-typography.scss

@@ -51,7 +51,12 @@
   // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
   @include badge-theme.typography($theme);
-  @include typography.typography-hierarchy($theme);
+  // Historically the typography hierarchy styles were included as part of this. We maintain this
+  // behavior for M2, but from M3 forward this is not included and should be explicitly @included
+  // by the user if desired.
+  @if (inspection.get-theme-version($theme) < 1) {
+    @include typography.typography-hierarchy($theme);
+  }
   @include bottom-sheet-theme.typography($theme);
   @include button-toggle-theme.typography($theme);
   @include divider-theme.typography($theme);

package/core/typography/_typography.scss

@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
 @use 'typography-utils';
 @use '../theming/inspection';
 @use './versioning';
@@ -8,11 +11,133 @@
 @forward './definition';
 @forward './versioning';
 
+@mixin typography-hierarchy($theme, $selector: '.mat-typography', $back-compat: false) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _m3-typography-hierarchy($theme, $selector, $back-compat);
+  }
+  @else {
+    @include _m2-typography-hierarchy($theme, $selector);
+  }
+}
+
+@function _get-selector($selectors, $prefix) {
+  $result: ();
+  @each $selector in $selectors {
+    // Don't add "naked" tag selectors, and don't nest prefix selector.
+    @if string.index($selector, '.') == 1 {
+      $result: list.append($result, $selector, $separator: comma);
+    }
+    // Don't nest the prefix selector in itself.
+    @if $selector != $prefix {
+      $result: list.append($result, '#{$prefix} #{$selector}', $separator: comma);
+    }
+  }
+  @return $result;
+}
+
+@mixin _m3-typography-level($theme, $selector-prefix, $level, $selectors, $margin: null) {
+  #{_get-selector($selectors, $selector-prefix)} {
+    // TODO(mmalerba): When we expose system tokens as CSS vars, we should change this to emit token
+    //  slots.
+    font: inspection.get-theme-typography($theme, $level, font);
+    letter-spacing: inspection.get-theme-typography($theme, $level, letter-spacing);
+    @if $margin != null {
+      margin: 0 0 $margin;
+    }
+  }
+}
+
+@mixin _m3-typography-hierarchy($theme, $selector-prefix, $add-m2-selectors) {
+ $levels: (
+   display-large: (
+     selectors: ('.mat-display-large', 'h1'),
+     m2-selectors: ('.mat-h1', '.mat-headline-1'),
+     margin: 0.5em
+   ),
+   display-medium: (
+     selectors: ('.mat-display-medium', 'h2'),
+     m2-selectors: ('.mat-h2', '.mat-headline-2'),
+     margin: 0.5em
+   ),
+   display-small: (
+     selectors: ('.mat-display-small', 'h3'),
+     m2-selectors: ('.mat-h3', '.mat-headline-3'),
+     margin: 0.5em
+   ),
+   headline-large: (
+     selectors: ('.mat-headline-large', 'h4'),
+     m2-selectors: ('.mat-h4', '.mat-headline-4'),
+     margin: 0.5em
+   ),
+   headline-medium: (
+     selectors: ('.mat-headline-medium', 'h5'),
+     m2-selectors: ('.mat-h5', '.mat-headline-5'),
+     margin: 0.5em
+   ),
+   headline-small: (
+     selectors: ('.mat-headline-small', 'h6'),
+     m2-selectors: ('.mat-h6', '.mat-headline-6'),
+     margin: 0.5em
+   ),
+   title-large: (
+     selectors: ('.mat-title-large'),
+     m2-selectors: ('.mat-subtitle-1'),
+   ),
+   title-medium: (
+     selectors: ('.mat-title-medium'),
+     m2-selectors: ('.mat-subtitle-2'),
+   ),
+   title-small: (
+     selectors: ('.mat-title-small')
+   ),
+   body-large: (
+     selectors: ('.mat-body-large', $selector-prefix),
+     m2-selectors: ('.mat-body', '.mat-body-strong', '.mat-body-2'),
+   ),
+   body-medium: (
+     selectors: ('.mat-body-medium')
+   ),
+   body-small: (
+     selectors: ('.mat-body-small')
+   ),
+   label-large: (
+     selectors: ('.mat-label-large')
+   ),
+   label-medium: (
+     selectors: ('.mat-label-medium')
+   ),
+   label-small: (
+     selectors: ('.mat-label-small'),
+     m2-selectors: ('.mat-small', '.mat-caption')
+   ),
+ );
+
+  @each $level, $options in $levels {
+    @if $add-m2-selectors {
+      $options: map.set($options, selectors,
+          list.join(map.get($options, selectors), map.get($options, m2-selectors) or ()));
+    }
+    $options: map.remove($options, m2-selectors);
+
+    // Apply styles for the level.
+    @include _m3-typography-level($theme, $selector-prefix, $level, $options...);
+
+    // Also style <p> inside body-large.
+    @if $level == body-large {
+      #{_get-selector(map.get($options, selectors), $selector-prefix)} {
+        p {
+          margin: 0 0 0.75em;
+        }
+      }
+    }
+  }
+}
+
 /// Emits baseline typographic styles based on a given config.
 /// @param {Map} $config-or-theme A typography config for an entire theme.
 /// @param {String} $selector Ancestor selector under which native elements, such as h1, will
 ///     be styled.
-@mixin typography-hierarchy($theme, $selector: '.mat-typography') {
+@mixin _m2-typography-hierarchy($theme, $selector) {
   // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
   // necessary if we want to allow people to overwrite the tag selectors. This is due to
   // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.

package/datepicker/_datepicker-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
@@ -34,7 +35,12 @@ $calendar-weekday-table-font-size: 11px !default;
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-unthemable-tokens());
+    }
+  }
 }
 
 /// Outputs color theme styles for the mat-datepicker.
@@ -154,6 +160,8 @@ $calendar-weekday-table-font-size: 11px !default;
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-datepicker-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-datepicker.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);

package/dialog/_dialog-theme.scss

@@ -6,6 +6,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 
 @mixin base($theme) {
@@ -76,6 +77,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include mdc-dialog-theme.theme(map.get($tokens, tokens-mdc-dialog.$prefix));
     @include token-utils.create-token-values(

package/divider/_divider-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
 
@@ -64,6 +65,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-divider.$prefix, map.get($tokens, tokens-mat-divider.$prefix));

package/esm2022/autocomplete/autocomplete-origin.mjs

@@ -17,10 +17,10 @@ export class MatAutocompleteOrigin {
     elementRef) {
         this.elementRef = elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',

package/esm2022/autocomplete/autocomplete-trigger.mjs

@@ -779,10 +779,10 @@ export class MatAutocompleteTrigger {
             this._trackedModal = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatAutocompleteTrigger, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MAT_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: MAT_FORM_FIELD, host: true, optional: true }, { token: DOCUMENT, optional: true }, { token: i3.ViewportRuler }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.1", type: MatAutocompleteTrigger, isStandalone: true, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled", booleanAttribute] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: MatAutocompleteTrigger, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: MAT_AUTOCOMPLETE_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: MAT_FORM_FIELD, host: true, optional: true }, { token: DOCUMENT, optional: true }, { token: i3.ViewportRuler }, { token: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.0", type: MatAutocompleteTrigger, isStandalone: true, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled", booleanAttribute] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[matAutocomplete], textarea[matAutocomplete]`,