@angular/material 16.0.0 → 16.1.0-next.0

package/autocomplete/index.d.ts

@@ -452,6 +452,34 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _scrollToOption;
     /** Handles keyboard events coming from the overlay panel. */
     private _handleOverlayEvents;
+    /**
+     * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
+     * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
+     * panel. Track the modal we have changed so we can undo the changes on destroy.
+     */
+    private _trackedModal;
+    /**
+     * If the autocomplete trigger is inside of an `aria-modal` element, connect
+     * that modal to the options panel with `aria-owns`.
+     *
+     * For some browser + screen reader combinations, when navigation is inside
+     * of an `aria-modal` element, the screen reader treats everything outside
+     * of that modal as hidden or invisible.
+     *
+     * This causes a problem when the combobox trigger is _inside_ of a modal, because the
+     * options panel is rendered _outside_ of that modal, preventing screen reader navigation
+     * from reaching the panel.
+     *
+     * We can work around this issue by applying `aria-owns` to the modal with the `id` of
+     * the options panel. This effectively communicates to assistive technology that the
+     * options panel is part of the same interaction as the modal.
+     *
+     * At time of this writing, this issue is present in VoiceOver.
+     * See https://github.com/angular/components/issues/20694
+     */
+    private _applyModalPanelOwnership;
+    /** Clears the references to the listbox overlay element from the modal it was added to. */
+    private _clearFromModal;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteTriggerBase, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteTriggerBase, never, never, { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/autocomplete/testing/index.d.ts

@@ -29,6 +29,8 @@ export declare class MatAutocompleteHarness extends _MatAutocompleteHarnessBase<
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatAutocompleteHarness>(this: ComponentHarnessConstructor<T>, options?: AutocompleteHarnessFilters): HarnessPredicate<T>;
+    /** Gets the selector that can be used to find the autocomplete trigger's panel. */
+    protected _getPanelSelector(): Promise<string>;
 }
 
 export declare abstract class _MatAutocompleteHarnessBase<OptionType extends ComponentHarnessConstructor<Option> & {
@@ -67,7 +69,7 @@ export declare abstract class _MatAutocompleteHarnessBase<OptionType extends Com
     /** Gets the panel associated with this autocomplete trigger. */
     private _getPanel;
     /** Gets the selector that can be used to find the autocomplete trigger's panel. */
-    private _getPanelSelector;
+    protected _getPanelSelector(): Promise<string>;
 }
 
 export { }

package/badge/index.d.ts

@@ -59,8 +59,13 @@ export declare class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy
     _id: number;
     /** Visible badge element. */
     private _badgeElement;
+    /** Inline badge description. Used when the badge is applied to non-interactive host elements. */
+    private _inlineBadgeDescription;
     /** Whether the OnInit lifecycle hook has run yet */
     private _isInitialized;
+    /** InteractivityChecker to determine if the badge host is focusable. */
+    private _interactivityChecker;
+    private _document;
     constructor(_ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _ariaDescriber: AriaDescriber, _renderer: Renderer2, _animationMode?: string | undefined);
     /** Whether the badge is above the host or not */
     isAbove(): boolean;
@@ -73,12 +78,16 @@ export declare class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy
     getBadgeElement(): HTMLElement | undefined;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /** Gets whether the badge's host element is interactive. */
+    private _isHostInteractive;
     /** Creates the badge element */
     private _createBadgeElement;
     /** Update the text content of the badge element in the DOM, creating the element if necessary. */
     private _updateRenderedContent;
     /** Updates the host element's aria description via AriaDescriber. */
-    private _updateHostAriaDescription;
+    private _updateDescription;
+    private _updateInlineDescription;
+    private _removeInlineDescription;
     /** Adds css theme class given the color to the component host */
     private _setColor;
     /** Clears any existing badges that might be left over from server-side rendering. */

package/core/style/_elevation.scss

@@ -43,15 +43,20 @@ $prefix: 'mat-elevation-z';
   @else {
     // Copied from @material/elevation/_elevation-theme.scss#_box-shadow
     // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC.
-    $shadow-color:
-      if(meta.type-of($color) == color and $opacity != null, rgba($color, $opacity), $color);
     $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue);
     $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue);
     $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue);
+
+    $color-opacity: if($opacity != null, $opacity, 1);
+    $umbra-color: _compute-color-opacity($color, mdc-elevation.$umbra-opacity * $color-opacity);
+    $penumbra-color:
+      _compute-color-opacity($color, mdc-elevation.$penumbra-opacity * $color-opacity);
+    $ambient-color: _compute-color-opacity($color, mdc-elevation.$ambient-opacity * $color-opacity);
+
     $box-shadow: (
-      #{'#{$umbra-z-value} #{$shadow-color}'},
-      #{'#{$penumbra-z-value} #{$shadow-color}'},
-      #{$ambient-z-value} $shadow-color
+      #{'#{$umbra-z-value} #{$umbra-color}'},
+      #{'#{$penumbra-z-value} #{$penumbra-color}'},
+      #{$ambient-z-value} $ambient-color
     );
     @include mdc-elevation.shadow($box-shadow);
   }
@@ -59,9 +64,9 @@ $prefix: 'mat-elevation-z';
 
 // Applies the elevation to an element in a manner that allows
 // consumers to override it via the Material elevation classes.
-@mixin overridable-elevation($zValue, $color: $color) {
+@mixin overridable-elevation($zValue, $color: $color, $opacity: null) {
   &:not([class*='#{$prefix}']) {
-    @include elevation($zValue, $color);
+    @include elevation($zValue, $color, $opacity);
   }
 }
 
@@ -89,3 +94,12 @@ $prefix: 'mat-elevation-z';
     $easing: $transition-timing-function) {
   transition: private-transition-property-value($duration, $easing);
 }
+
+@function _compute-color-opacity($color, $opacity) {
+  @if meta.type-of($color) == color and $opacity != null {
+    @return rgba($color, $opacity);
+  }
+  @else {
+    @return $color;
+  }
+}

package/core/tokens/m2/mdc/_linear-progress.scss

@@ -17,9 +17,11 @@ $prefix: (mdc, linear-progress);
   $height: 4px;
 
   @return (
-    // The height of the progress bar track. MDC has two tokens with the goal of having
-    // `track-height` apply only to the track. In our case both are always the same.
-    // Specify both while the transition is in progress.
+    // The height of the progress bar. MDC has three tokens with the goal
+    // of having `track-height` apply only to the track. In our case, all three
+    // are always the same. Specify all three while the transition is in
+    // progress.
+    active-indicator-height: $height,
     bar-and-track-height: $height,
     track-height: $height,
   );

package/core/tokens/m2/mdc/_plain-tooltip.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, plain-tooltip);
+
+// 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 (
+    // Border radius for the tooltip container.
+    container-shape: 4px,
+    // Line height of the tooltip text.
+    supporting-text-line-height: 16px,
+    // MDC does not seem to use these token.
+    supporting-text-type: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $background: map.get($config, background);
+
+  @return (
+    // Color of the tooltip container.
+    container-color: theming.get-color-from-palette($background, tooltip),
+    // Color of the tooltip text.
+    supporting-text-color: #fff,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(amysorto): The earlier implementation of the tooltip used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    // Font for the tooltip text.
+    supporting-text-font: typography-utils.font-family($config, caption)
+    or typography-utils.font-family($config),
+    // Font size for the the tooltip text.
+    supporting-text-size: typography-utils.font-size($config, caption),
+    // Font weight of the the tooltip text.
+    supporting-text-weight: typography-utils.font-weight($config, caption),
+    // Tracking (space between letters) of the tooltip text.
+    supporting-text-tracking: typography-utils.letter-spacing($config, caption),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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 map.merge(
+          get-unthemable-tokens(),
+          map.merge(
+                  get-color-tokens(token-utils.$placeholder-color-config),
+                  map.merge(
+                          get-typography-tokens(token-utils.$placeholder-typography-config),
+                          get-density-tokens(token-utils.$placeholder-density-config)
+                  )
+          )
+  );
+}

package/esm2022/autocomplete/autocomplete-origin.mjs

@@ -14,11 +14,11 @@ class _MatAutocompleteOriginBase {
     elementRef) {
         this.elementRef = elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-rc.2", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-rc.2", type: _MatAutocompleteOriginBase, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: _MatAutocompleteOriginBase, ngImport: i0 }); }
 }
 export { _MatAutocompleteOriginBase };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-rc.2", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 /**
@@ -26,15 +26,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-rc.2", ng
  * as a connection point for an autocomplete panel.
  */
 class MatAutocompleteOrigin extends _MatAutocompleteOriginBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-rc.2", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-rc.2", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 }); }
 }
 export { MatAutocompleteOrigin };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-rc.2", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
                     exportAs: 'matAutocompleteOrigin',
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQsa0ZBQWtGO0FBQ2xGLE1BQ3NCLDBCQUEwQjtJQUM5QztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO21IQUpnQiwwQkFBMEI7dUdBQTFCLDBCQUEwQjs7U0FBMUIsMEJBQTBCO2dHQUExQiwwQkFBMEI7a0JBRC9DLFNBQVM7O0FBUVY7OztHQUdHO0FBQ0gsTUFJYSxxQkFBc0IsU0FBUSwwQkFBMEI7bUhBQXhELHFCQUFxQjt1R0FBckIscUJBQXFCOztTQUFyQixxQkFBcUI7Z0dBQXJCLHFCQUFxQjtrQkFKakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUseUJBQXlCO29CQUNuQyxRQUFRLEVBQUUsdUJBQXVCO2lCQUNsQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKiBCYXNlIGNsYXNzIGNvbnRhaW5pbmcgYWxsIG9mIHRoZSBmdW5jdGlvbmFsaXR5IGZvciBgTWF0QXV0b2NvbXBsZXRlT3JpZ2luYC4gKi9cbkBEaXJlY3RpdmUoKVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIF9NYXRBdXRvY29tcGxldGVPcmlnaW5CYXNlIHtcbiAgY29uc3RydWN0b3IoXG4gICAgLyoqIFJlZmVyZW5jZSB0byB0aGUgZWxlbWVudCBvbiB3aGljaCB0aGUgZGlyZWN0aXZlIGlzIGFwcGxpZWQuICovXG4gICAgcHVibGljIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICApIHt9XG59XG5cbi8qKlxuICogRGlyZWN0aXZlIGFwcGxpZWQgdG8gYW4gZWxlbWVudCB0byBtYWtlIGl0IHVzYWJsZVxuICogYXMgYSBjb25uZWN0aW9uIHBvaW50IGZvciBhbiBhdXRvY29tcGxldGUgcGFuZWwuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRBdXRvY29tcGxldGVPcmlnaW5dJyxcbiAgZXhwb3J0QXM6ICdtYXRBdXRvY29tcGxldGVPcmlnaW4nLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRBdXRvY29tcGxldGVPcmlnaW4gZXh0ZW5kcyBfTWF0QXV0b2NvbXBsZXRlT3JpZ2luQmFzZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQsa0ZBQWtGO0FBQ2xGLE1BQ3NCLDBCQUEwQjtJQUM5QztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDOzhHQUpnQiwwQkFBMEI7a0dBQTFCLDBCQUEwQjs7U0FBMUIsMEJBQTBCOzJGQUExQiwwQkFBMEI7a0JBRC9DLFNBQVM7O0FBUVY7OztHQUdHO0FBQ0gsTUFJYSxxQkFBc0IsU0FBUSwwQkFBMEI7OEdBQXhELHFCQUFxQjtrR0FBckIscUJBQXFCOztTQUFyQixxQkFBcUI7MkZBQXJCLHFCQUFxQjtrQkFKakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUseUJBQXlCO29CQUNuQyxRQUFRLEVBQUUsdUJBQXVCO2lCQUNsQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKiBCYXNlIGNsYXNzIGNvbnRhaW5pbmcgYWxsIG9mIHRoZSBmdW5jdGlvbmFsaXR5IGZvciBgTWF0QXV0b2NvbXBsZXRlT3JpZ2luYC4gKi9cbkBEaXJlY3RpdmUoKVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIF9NYXRBdXRvY29tcGxldGVPcmlnaW5CYXNlIHtcbiAgY29uc3RydWN0b3IoXG4gICAgLyoqIFJlZmVyZW5jZSB0byB0aGUgZWxlbWVudCBvbiB3aGljaCB0aGUgZGlyZWN0aXZlIGlzIGFwcGxpZWQuICovXG4gICAgcHVibGljIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICApIHt9XG59XG5cbi8qKlxuICogRGlyZWN0aXZlIGFwcGxpZWQgdG8gYW4gZWxlbWVudCB0byBtYWtlIGl0IHVzYWJsZVxuICogYXMgYSBjb25uZWN0aW9uIHBvaW50IGZvciBhbiBhdXRvY29tcGxldGUgcGFuZWwuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRBdXRvY29tcGxldGVPcmlnaW5dJyxcbiAgZXhwb3J0QXM6ICdtYXRBdXRvY29tcGxldGVPcmlnaW4nLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRBdXRvY29tcGxldGVPcmlnaW4gZXh0ZW5kcyBfTWF0QXV0b2NvbXBsZXRlT3JpZ2luQmFzZSB7fVxuIl19