@angular/material 22.0.0-next.7 → 22.0.0-rc.0

package/fesm2022/sidenav.mjs

@@ -5,7 +5,7 @@ import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import { Platform } from '@angular/cdk/platform';
 import { CdkScrollable, ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, NgZone, Renderer2, DOCUMENT, signal, EventEmitter, Injector, ChangeDetectorRef, afterNextRender, QueryList, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewChild, Output, Input, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, NgZone, Renderer2, DOCUMENT, signal, EventEmitter, Injector, ChangeDetectorRef, afterNextRender, QueryList, ViewEncapsulation, Component, ViewChild, Output, Input, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { Subject, merge } from 'rxjs';
 import { filter, map, mapTo, takeUntil, take, startWith, debounceTime } from 'rxjs/operators';
 import { _animationsDisabled } from './_animation-chunk.mjs';
@@ -22,11 +22,23 @@ const MAT_DRAWER_CONTAINER = new InjectionToken('MAT_DRAWER_CONTAINER');
 class MatDrawerContent extends CdkScrollable {
   _platform = inject(Platform);
   _changeDetectorRef = inject(ChangeDetectorRef);
+  _element = inject(ElementRef);
+  _isInert = false;
   _container = inject(MatDrawerContainer);
   ngAfterContentInit() {
-    this._container._contentMarginChanges.subscribe(() => {
-      this._changeDetectorRef.markForCheck();
-    });
+    this._container._contentMarginChanges.subscribe(() => this._changeDetectorRef.markForCheck());
+  }
+  _updateInert() {
+    const newValue = this._container._isShowingBackdrop();
+    if (newValue !== this._isInert) {
+      const element = this._element.nativeElement;
+      this._isInert = newValue;
+      if (newValue) {
+        element.setAttribute('inert', 'true');
+      } else {
+        element.removeAttribute('inert');
+      }
+    }
   }
   _shouldBeHidden() {
     if (this._platform.isBrowser) {
@@ -40,7 +52,7 @@ class MatDrawerContent extends CdkScrollable {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDrawerContent,
     deps: null,
@@ -48,7 +60,7 @@ class MatDrawerContent extends CdkScrollable {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDrawerContent,
     isStandalone: true,
     selector: "mat-drawer-content",
@@ -68,13 +80,12 @@ class MatDrawerContent extends CdkScrollable {
     ngImport: i0,
     template: '<ng-content></ng-content>',
     isInline: true,
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDrawerContent,
   decorators: [{
@@ -88,7 +99,6 @@ i0.ɵɵngDeclareClassMetadata({
         '[style.margin-right.px]': '_container._contentMargins.right',
         '[class.mat-drawer-content-hidden]': '_shouldBeHidden()'
       },
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       providers: [{
         provide: CdkScrollable,
@@ -211,7 +221,11 @@ class MatDrawer {
       this.openedChange.emit(this.opened);
     });
   }
-  _forceFocus(element, options) {
+  _focusByCssSelector(selector, options) {
+    const element = this._elementRef.nativeElement.querySelector(selector);
+    if (!element) {
+      return;
+    }
     if (!this._interactivityChecker.isFocusable(element)) {
       element.tabIndex = -1;
       this._ngZone.runOutsideAngular(() => {
@@ -226,12 +240,6 @@ class MatDrawer {
     }
     element.focus(options);
   }
-  _focusByCssSelector(selector, options) {
-    let elementToFocus = this._elementRef.nativeElement.querySelector(selector);
-    if (elementToFocus) {
-      this._forceFocus(elementToFocus, options);
-    }
-  }
   _takeFocus() {
     if (!this._focusTrap) {
       return;
@@ -248,19 +256,26 @@ class MatDrawer {
           if (!hasMovedFocus && typeof element.focus === 'function') {
             element.focus();
           }
+          this._notifyContentFocus();
         }, {
           injector: this._injector
         });
         break;
       case 'first-heading':
         this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
+        this._notifyContentFocus();
         break;
       default:
         this._focusByCssSelector(this.autoFocus);
+        this._notifyContentFocus();
         break;
     }
   }
+  _notifyContentFocus() {
+    (this._container?._content || this._container?._userContent)?._updateInert();
+  }
   _restoreFocus(focusOrigin) {
+    this._notifyContentFocus();
     if (this.autoFocus === 'dialog') {
       return;
     }
@@ -379,7 +394,7 @@ class MatDrawer {
   };
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDrawer,
     deps: [],
@@ -387,7 +402,7 @@ class MatDrawer {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDrawer,
     isStandalone: true,
     selector: "mat-drawer",
@@ -432,13 +447,12 @@ class MatDrawer {
       type: CdkScrollable,
       selector: "[cdk-scrollable], [cdkScrollable]"
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDrawer,
   decorators: [{
@@ -456,7 +470,6 @@ i0.ɵɵngDeclareClassMetadata({
         '[style.visibility]': '(!_container && !opened) ? "hidden" : null',
         '[attr.tabIndex]': '(mode !== "side") ? "-1" : null'
       },
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       imports: [CdkScrollable],
       template: "<div class=\"mat-drawer-inner-container\" cdkScrollable #content>\r\n  <ng-content></ng-content>\r\n</div>\r\n"
@@ -723,7 +736,7 @@ class MatDrawerContainer {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatDrawerContainer,
     deps: [],
@@ -731,7 +744,7 @@ class MatDrawerContainer {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatDrawerContainer,
     isStandalone: true,
     selector: "mat-drawer-container",
@@ -777,13 +790,12 @@ class MatDrawerContainer {
       type: MatDrawerContent,
       selector: "mat-drawer-content"
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatDrawerContainer,
   decorators: [{
@@ -795,7 +807,6 @@ i0.ɵɵngDeclareClassMetadata({
         'class': 'mat-drawer-container',
         '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride'
       },
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       providers: [{
         provide: MAT_DRAWER_CONTAINER,
@@ -837,7 +848,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatSidenavContent extends MatDrawerContent {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSidenavContent,
     deps: null,
@@ -845,7 +856,7 @@ class MatSidenavContent extends MatDrawerContent {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatSidenavContent,
     isStandalone: true,
     selector: "mat-sidenav-content",
@@ -855,18 +866,20 @@ class MatSidenavContent extends MatDrawerContent {
     providers: [{
       provide: CdkScrollable,
       useExisting: MatSidenavContent
+    }, {
+      provide: MatDrawerContent,
+      useExisting: MatSidenavContent
     }],
     usesInheritance: true,
     ngImport: i0,
     template: '<ng-content></ng-content>',
     isInline: true,
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatSidenavContent,
   decorators: [{
@@ -877,11 +890,13 @@ i0.ɵɵngDeclareClassMetadata({
       host: {
         'class': 'mat-drawer-content mat-sidenav-content'
       },
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       providers: [{
         provide: CdkScrollable,
         useExisting: MatSidenavContent
+      }, {
+        provide: MatDrawerContent,
+        useExisting: MatSidenavContent
       }]
     }]
   }]
@@ -910,7 +925,7 @@ class MatSidenav extends MatDrawer {
   _fixedBottomGap = 0;
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSidenav,
     deps: null,
@@ -918,7 +933,7 @@ class MatSidenav extends MatDrawer {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatSidenav,
     isStandalone: true,
     selector: "mat-sidenav",
@@ -954,13 +969,12 @@ class MatSidenav extends MatDrawer {
       type: CdkScrollable,
       selector: "[cdk-scrollable], [cdkScrollable]"
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatSidenav,
   decorators: [{
@@ -980,7 +994,6 @@ i0.ɵɵngDeclareClassMetadata({
         '[style.top.px]': 'fixedInViewport ? fixedTopGap : null',
         '[style.bottom.px]': 'fixedInViewport ? fixedBottomGap : null'
       },
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       imports: [CdkScrollable],
       providers: [{
@@ -1007,7 +1020,7 @@ class MatSidenavContainer extends MatDrawerContainer {
   _content = undefined;
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSidenavContainer,
     deps: null,
@@ -1015,7 +1028,7 @@ class MatSidenavContainer extends MatDrawerContainer {
   });
   static ɵcmp = i0.ɵɵngDeclareComponent({
     minVersion: "17.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     type: MatSidenavContainer,
     isStandalone: true,
     selector: "mat-sidenav-container",
@@ -1052,13 +1065,12 @@ class MatSidenavContainer extends MatDrawerContainer {
       type: MatSidenavContent,
       selector: "mat-sidenav-content"
     }],
-    changeDetection: i0.ChangeDetectionStrategy.OnPush,
     encapsulation: i0.ViewEncapsulation.None
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatSidenavContainer,
   decorators: [{
@@ -1070,7 +1082,6 @@ i0.ɵɵngDeclareClassMetadata({
         'class': 'mat-drawer-container mat-sidenav-container',
         '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride'
       },
-      changeDetection: ChangeDetectionStrategy.OnPush,
       encapsulation: ViewEncapsulation.None,
       providers: [{
         provide: MAT_DRAWER_CONTAINER,
@@ -1101,7 +1112,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MatSidenavModule {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSidenavModule,
     deps: [],
@@ -1109,7 +1120,7 @@ class MatSidenavModule {
   });
   static ɵmod = i0.ɵɵngDeclareNgModule({
     minVersion: "14.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSidenavModule,
     imports: [CdkScrollableModule, MatDrawer, MatDrawerContainer, MatDrawerContent, MatSidenav, MatSidenavContainer, MatSidenavContent],
@@ -1117,7 +1128,7 @@ class MatSidenavModule {
   });
   static ɵinj = i0.ɵɵngDeclareInjector({
     minVersion: "12.0.0",
-    version: "22.0.0-next.9",
+    version: "22.0.0-next.12",
     ngImport: i0,
     type: MatSidenavModule,
     imports: [CdkScrollableModule, BidiModule, CdkScrollableModule]
@@ -1125,7 +1136,7 @@ class MatSidenavModule {
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.9",
+  version: "22.0.0-next.12",
   ngImport: i0,
   type: MatSidenavModule,
   decorators: [{