@angular/material 17.3.0-rc.0 → 18.0.0-next.0

package/chips/index.d.ts

@@ -226,6 +226,7 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
      * Used to improve initial load time of large applications.
      */
     _rippleLoader: MatRippleLoader;
+    private _injector;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/core/index.d.ts

@@ -1040,6 +1040,10 @@ export declare interface RippleGlobalOptions {
      * default, ripples will wait for the enter animation to complete and for mouse or touch release.
      */
     terminateOnPointerUp?: boolean;
+    /**
+     * A namespace to use for ripple loader to allow multiple instances to exist on the same page.
+     */
+    namespace?: string;
 }
 
 /**

package/core/theming/_theming.scss

@@ -432,9 +432,10 @@ $_internals: _mat-theming-internals-do-not-access;
 // Checks for duplicate styles in a `theme-version: 0` style theme.
 @mixin _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
   $theme: private-legacy-get-theme($theme-or-color-config);
-  $color-config: get-color-config($theme);
-  $density-config: get-density-config($theme);
-  $typography-config: get-typography-config($theme);
+  $color-config: map.get($theme, $_internals, m2-config, color) or get-color-config($theme);
+  $density-config: map.get($theme, $_internals, m2-config, density) or get-density-config($theme);
+  $typography-config:
+    map.get($theme, $_internals, m2-config, typography) or get-typography-config($theme);
   // Lists of previous `color`, `density` and `typography` configurations.
   $previous-color: map.get($_emitted-color, $id) or ();
   $previous-typography: map.get($_emitted-typography, $id) or ();

package/core/tokens/m2/mat/_fab-small.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -63,8 +64,9 @@ $prefix: (mat, fab-small);
   $foreground-color: null;
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

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

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -63,8 +64,9 @@ $prefix: (mat, fab);
   $foreground-color: null;
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

package/core/tokens/m2/mat/_filled-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -58,10 +59,11 @@ $prefix: (mat, filled-button);
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

package/core/tokens/m2/mat/_icon-button.scss

@@ -47,10 +47,14 @@ $prefix: (mat, icon-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

package/core/tokens/m2/mat/_outlined-button.scss

@@ -57,10 +57,14 @@ $prefix: (mat, outlined-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

package/core/tokens/m2/mat/_protected-button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
 @use '../../../theming/theming';
@@ -58,10 +59,11 @@ $prefix: (mat, protected-button);
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $state-layer-color: null;
   $ripple-color: null;
+  $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (token-utils.$private-is-internal-build) {
+  @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
     $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);

package/core/tokens/m2/mat/_text-button.scss

@@ -60,10 +60,14 @@ $prefix: (mat, text-button);
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $color: inspection.get-theme-color($theme, $palette-name);
+  $ripple-opacity: 0.1;
 
   @return (
     state-layer-color: $color,
-    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color),
+    ripple-color: if(
+      meta.type-of($color) == color,
+      rgba($color, $ripple-opacity),
+      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
   );
 }
 

package/datepicker/index.d.ts

@@ -455,6 +455,7 @@ export declare class MatCalendarBody<D = any> implements OnChanges, OnDestroy, A
     /** Width of an individual cell. */
     _cellWidth: string;
     private _didDragSinceMouseDown;
+    private _injector;
     constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
     /** Called when a cell is clicked. */
     _cellClicked(cell: MatCalendarCell, event: MouseEvent): void;
@@ -673,7 +674,6 @@ export declare class MatDatepickerApply {
 /** Base class for a datepicker. */
 declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> implements MatDatepickerPanel<C, S, D>, OnDestroy, OnChanges {
     private _overlay;
-    private _ngZone;
     private _viewContainerRef;
     private _dateAdapter;
     private _dir;
@@ -764,7 +764,13 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     datepickerInput: C;
     /** Emits when the datepicker's state changes. */
     readonly stateChanges: Subject<void>;
-    constructor(_overlay: Overlay, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dateAdapter: DateAdapter<D>, _dir: Directionality, _model: MatDateSelectionModel<S, D>);
+    private _injector;
+    constructor(_overlay: Overlay, 
+    /**
+     * @deprecated parameter is unused and will be removed
+     * @breaking-change 19.0.0
+     */
+    _unusedNgZone: NgZone, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dateAdapter: DateAdapter<D>, _dir: Directionality, _model: MatDateSelectionModel<S, D>);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /** Selects the given date */

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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.0+sha-37d1f71", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.0+sha-37d1f71", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.0+sha-37d1f71", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
@@ -28,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                     standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBTUgsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDOzhHQUpPLHFCQUFxQjtrR0FBckIscUJBQXFCOzsyRkFBckIscUJBQXFCO2tCQUxqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIGFwcGxpZWQgdG8gYW4gZWxlbWVudCB0byBtYWtlIGl0IHVzYWJsZVxuICogYXMgYSBjb25uZWN0aW9uIHBvaW50IGZvciBhbiBhdXRvY29tcGxldGUgcGFuZWwuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRBdXRvY29tcGxldGVPcmlnaW5dJyxcbiAgZXhwb3J0QXM6ICdtYXRBdXRvY29tcGxldGVPcmlnaW4nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRBdXRvY29tcGxldGVPcmlnaW4ge1xuICBjb25zdHJ1Y3RvcihcbiAgICAvKiogUmVmZXJlbmNlIHRvIHRoZSBlbGVtZW50IG9uIHdoaWNoIHRoZSBkaXJlY3RpdmUgaXMgYXBwbGllZC4gKi9cbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICkge31cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBTUgsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO2lJQUpPLHFCQUFxQjtxSEFBckIscUJBQXFCOzs4R0FBckIscUJBQXFCO2tCQUxqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIGFwcGxpZWQgdG8gYW4gZWxlbWVudCB0byBtYWtlIGl0IHVzYWJsZVxuICogYXMgYSBjb25uZWN0aW9uIHBvaW50IGZvciBhbiBhdXRvY29tcGxldGUgcGFuZWwuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRBdXRvY29tcGxldGVPcmlnaW5dJyxcbiAgZXhwb3J0QXM6ICdtYXRBdXRvY29tcGxldGVPcmlnaW4nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRBdXRvY29tcGxldGVPcmlnaW4ge1xuICBjb25zdHJ1Y3RvcihcbiAgICAvKiogUmVmZXJlbmNlIHRvIHRoZSBlbGVtZW50IG9uIHdoaWNoIHRoZSBkaXJlY3RpdmUgaXMgYXBwbGllZC4gKi9cbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICkge31cbn1cbiJdfQ==