@angular/material 17.0.0-next.2 → 17.0.0-next.4

package/autocomplete/index.d.ts

@@ -285,8 +285,8 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _outsideClickSubscription;
     /** Old value of the native input. Used to work around issues with the `input` event on IE. */
     private _previousValue;
-    /** Value of the input element when the panel was opened. */
-    private _valueOnOpen;
+    /** Value of the input element when the panel was attached (even if there are no options). */
+    private _valueOnAttach;
     /** Strategy that is used to position the panel. */
     private _positionStrategy;
     /** Whether or not the label state is being overridden. */
@@ -400,6 +400,8 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
      * the state of the trigger right before the opening sequence was finished.
      */
     private _emitOpened;
+    /** Intended to be called when the panel is attached. Captures the current value of the input. */
+    private _captureValueOnAttach;
     /** Destroys the autocomplete suggestion panel. */
     private _destroyPanel;
     private _assignOptionValue;

package/button/_button-theme.scss

@@ -11,6 +11,12 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
+@use '../core/tokens/m2/mdc/button-filled' as tokens-mdc-button-filled;
+
+@function on-color($theme, $palette) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
+}
 
 @mixin _button-variant($color) {
   @include mdc-button-text-theme.theme((
@@ -18,13 +24,6 @@
   ));
 }
 
-@mixin _unelevated-button-variant($foreground, $background) {
-  @include mdc-button-filled-theme.theme((
-    container-color: $background,
-    label-text-color: $foreground,
-  ));
-}
-
 @mixin _raised-button-variant($foreground, $background) {
   @include mdc-button-protected-theme.theme((
     container-color: $background,
@@ -79,35 +78,6 @@
       }
     }
 
-    .mat-mdc-unelevated-button {
-      &.mat-unthemed {
-        @include _unelevated-button-variant($on-surface, $surface);
-      }
-
-      &.mat-primary {
-        @include _unelevated-button-variant($on-primary, $primary);
-      }
-
-      &.mat-accent {
-        @include _unelevated-button-variant($on-secondary, $secondary);
-      }
-
-      &.mat-warn {
-        @include _unelevated-button-variant($on-error, $error);
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-filled-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          disabled-container-color: $disabled-container-color,
-          disabled-label-text-color: $disabled-ink-color,
-          container-color: $disabled-container-color,
-          label-text-color: $disabled-ink-color,
-        ));
-      }
-    }
-
     .mat-mdc-raised-button {
       &.mat-unthemed {
         @include _raised-button-variant($on-surface, $surface);
@@ -180,6 +150,52 @@
       @include button-theme-private.ripple-theme-styles($theme, true);
     }
   }
+
+  .mat-mdc-unelevated-button {
+    $surface: inspection.get-theme-color($theme, background, card);
+    $primary: inspection.get-theme-color($theme, primary);
+    $accent: inspection.get-theme-color($theme, accent);
+    $error: inspection.get-theme-color($theme, warn);
+
+    $on-surface: on-color($theme, $surface);
+    $on-primary: on-color($theme, $primary);
+    $on-accent: on-color($theme, $accent);
+    $on-error: on-color($theme, $error);
+
+    $default-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $surface, $on-surface);
+    $primary-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $primary, $on-primary);
+    $accent-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $accent, $on-accent);
+    $warn-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $error, $on-error);
+
+    &.mat-unthemed {
+      @include mdc-button-filled-theme.theme($default-color-tokens);
+    }
+
+    &.mat-primary {
+      @include mdc-button-filled-theme.theme($primary-color-tokens);
+    }
+
+    &.mat-accent {
+      @include mdc-button-filled-theme.theme($accent-color-tokens);
+    }
+
+    &.mat-warn {
+      @include mdc-button-filled-theme.theme($warn-color-tokens);
+    }
+
+    @include button-theme-private.apply-disabled-style() {
+      $is-dark: inspection.get-theme-type($theme) == dark;
+      $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
+      $disabled-container-color: rgba($on-surface, 0.12);
+
+      @include mdc-button-filled-theme.theme((
+        disabled-container-color: $disabled-container-color,
+        disabled-label-text-color: $disabled-ink-color,
+        container-color: $disabled-container-color,
+        label-text-color: $disabled-ink-color,
+      ));
+    }
+  }
 }
 
 @mixin typography($theme) {

package/core/tokens/m2/mdc/_button-filled.scss

@@ -0,0 +1,92 @@
+@use '../../token-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../../style/sass-utils';
+@use '../../../theming/inspection';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, button-filled);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    container-elevation: 0,
+    container-height: 36px,
+    container-shape: 4px,
+    disabled-container-elevation: 0,
+    focus-container-elevation: 0,
+    hover-container-elevation: 0,
+    keep-touch-target: false,
+    pressed-container-elevation: 0,
+
+    focus-state-layer-opacity: null,
+    hover-state-layer-opacity: null,
+    pressed-state-layer-opacity: null,
+    container-shadow-color: null,
+    focus-label-text-color: null,
+    hover-label-text-color: null,
+    label-text-font: null,
+    label-text-size: null,
+    label-text-tracking: null,
+    label-text-transform: null,
+    label-text-weight: null,
+    pressed-label-text-color: null,
+    with-icon-disabled-icon-color: null,
+    with-icon-focus-icon-color: null,
+    with-icon-hover-icon-color: null,
+    with-icon-icon-color: null,
+    with-icon-icon-size: null,
+    with-icon-pressed-icon-color: null
+  );
+}
+
+@function on-color($theme, $palette) {
+  @if ($palette) {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
+  }
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme, $color: null, $on-color: null) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $primary: inspection.get-theme-color($theme, primary);
+  $surface: inspection.get-theme-color($theme, background, card);
+  $on-primary: on-color($theme, $primary);
+  $on-surface: on-color($theme, $surface);
+
+  @return (
+    container-color: if($color, $color, transparent),
+    disabled-container-color: rgba($on-surface, 0.12),
+    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    focus-state-layer-color: $on-primary,
+    hover-state-layer-color: $on-primary,
+    label-text-color: if($on-color, $on-color, inherit),
+    pressed-state-layer-color: $on-primary
+  );
+}
+
+// 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/_icon-button.scss

@@ -39,6 +39,8 @@ $prefix: (mdc, icon-button);
     pressed-icon-color: null,
     pressed-state-layer-color: null,
     pressed-state-layer-opacity: null,
+    focus-ring-color: null,
+    focus-ring-offset: null,
   );
 }
 

package/esm2022/autocomplete/autocomplete-origin.mjs

@@ -17,14 +17,14 @@ export class MatAutocompleteOrigin {
     elementRef) {
         this.elementRef = elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.4", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
                     exportAs: 'matAutocompleteOrigin',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBS0gsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDOzhHQUpPLHFCQUFxQjtrR0FBckIscUJBQXFCOzsyRkFBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7aUJBQ2xDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IEdvb2dsZSBMTEMgQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgYXBwbGllZCB0byBhbiBlbGVtZW50IHRvIG1ha2UgaXQgdXNhYmxlXG4gKiBhcyBhIGNvbm5lY3Rpb24gcG9pbnQgZm9yIGFuIGF1dG9jb21wbGV0ZSBwYW5lbC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW21hdEF1dG9jb21wbGV0ZU9yaWdpbl0nLFxuICBleHBvcnRBczogJ21hdEF1dG9jb21wbGV0ZU9yaWdpbicsXG59KVxuZXhwb3J0IGNsYXNzIE1hdEF1dG9jb21wbGV0ZU9yaWdpbiB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIC8qKiBSZWZlcmVuY2UgdG8gdGhlIGVsZW1lbnQgb24gd2hpY2ggdGhlIGRpcmVjdGl2ZSBpcyBhcHBsaWVkLiAqL1xuICAgIHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKSB7fVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBS0gsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO3FIQUpPLHFCQUFxQjt5R0FBckIscUJBQXFCOztrR0FBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7aUJBQ2xDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IEdvb2dsZSBMTEMgQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgYXBwbGllZCB0byBhbiBlbGVtZW50IHRvIG1ha2UgaXQgdXNhYmxlXG4gKiBhcyBhIGNvbm5lY3Rpb24gcG9pbnQgZm9yIGFuIGF1dG9jb21wbGV0ZSBwYW5lbC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW21hdEF1dG9jb21wbGV0ZU9yaWdpbl0nLFxuICBleHBvcnRBczogJ21hdEF1dG9jb21wbGV0ZU9yaWdpbicsXG59KVxuZXhwb3J0IGNsYXNzIE1hdEF1dG9jb21wbGV0ZU9yaWdpbiB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIC8qKiBSZWZlcmVuY2UgdG8gdGhlIGVsZW1lbnQgb24gd2hpY2ggdGhlIGRpcmVjdGl2ZSBpcyBhcHBsaWVkLiAqL1xuICAgIHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKSB7fVxufVxuIl19