@angular/material-experimental 17.0.2 → 17.1.0-next.1

package/popover-edit/index.d.ts

@@ -6,10 +6,10 @@ import { CdkPopoverEdit } from '@angular/cdk-experimental/popover-edit';
 import { CdkPopoverEditTabOut } from '@angular/cdk-experimental/popover-edit';
 import { CdkRowHoverContent } from '@angular/cdk-experimental/popover-edit';
 import * as i0 from '@angular/core';
-import * as i3 from '@angular/cdk-experimental/popover-edit';
-import * as i4 from '@angular/material/core';
+import * as i1 from '@angular/cdk-experimental/popover-edit';
+import * as i2 from '@angular/material/core';
 
-declare namespace i1 {
+declare namespace i3 {
     export {
         MatPopoverEdit,
         MatPopoverEditTabOut,
@@ -18,7 +18,7 @@ declare namespace i1 {
     }
 }
 
-declare namespace i2 {
+declare namespace i4 {
     export {
         MatEditLens,
         MatEditRevert,
@@ -29,7 +29,7 @@ declare namespace i2 {
 /** Closes the lens on click. */
 export declare class MatEditClose<FormValue> extends CdkEditClose<FormValue> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditClose<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditClose<any>, "[matEditClose]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditClose<any>, "[matEditClose]", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -40,7 +40,7 @@ export declare class MatEditClose<FormValue> extends CdkEditClose<FormValue> {
  */
 export declare class MatEditLens<FormValue> extends CdkEditControl<FormValue> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditLens<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditLens<any>, "form[matEditLens]", never, { "clickOutBehavior": { "alias": "matEditLensClickOutBehavior"; "required": false; }; "preservedFormValue": { "alias": "matEditLensPreservedFormValue"; "required": false; }; "ignoreSubmitUnlessValid": { "alias": "matEditLensIgnoreSubmitUnlessValid"; "required": false; }; }, { "preservedFormValueChange": "matEditLensPreservedFormValueChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditLens<any>, "form[matEditLens]", never, { "clickOutBehavior": { "alias": "matEditLensClickOutBehavior"; "required": false; }; "preservedFormValue": { "alias": "matEditLensPreservedFormValue"; "required": false; }; "ignoreSubmitUnlessValid": { "alias": "matEditLensIgnoreSubmitUnlessValid"; "required": false; }; }, { "preservedFormValueChange": "matEditLensPreservedFormValueChange"; }, never, never, true, never>;
 }
 
 /**
@@ -49,13 +49,13 @@ export declare class MatEditLens<FormValue> extends CdkEditControl<FormValue> {
  */
 export declare class MatEditOpen extends CdkEditOpen {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditOpen, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditOpen, "[matEditOpen]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditOpen, "[matEditOpen]", never, {}, {}, never, never, true, never>;
 }
 
 /** Reverts the form to its initial or previously submitted state on click. */
 export declare class MatEditRevert<FormValue> extends CdkEditRevert<FormValue> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatEditRevert<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditRevert<any>, "button[matEditRevert]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatEditRevert<any>, "button[matEditRevert]", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -66,12 +66,12 @@ export declare class MatEditRevert<FormValue> extends CdkEditRevert<FormValue> {
 export declare class MatPopoverEdit<C> extends CdkPopoverEdit<C> {
     protected panelClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPopoverEdit<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEdit<any>, "[matPopoverEdit]:not([matPopoverEditTabOut])", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEdit<any>, "[matPopoverEdit]:not([matPopoverEditTabOut])", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 export declare class MatPopoverEditModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPopoverEditModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatPopoverEditModule, [typeof i1.MatPopoverEdit, typeof i1.MatPopoverEditTabOut, typeof i1.MatRowHoverContent, typeof i2.MatEditLens, typeof i2.MatEditRevert, typeof i2.MatEditClose, typeof i1.MatEditOpen], [typeof i3.CdkPopoverEditModule, typeof i4.MatCommonModule], [typeof i1.MatPopoverEdit, typeof i1.MatPopoverEditTabOut, typeof i1.MatRowHoverContent, typeof i2.MatEditLens, typeof i2.MatEditRevert, typeof i2.MatEditClose, typeof i1.MatEditOpen, typeof i3.CdkEditable]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatPopoverEditModule, never, [typeof i1.CdkPopoverEditModule, typeof i2.MatCommonModule, typeof i3.MatPopoverEdit, typeof i3.MatPopoverEditTabOut, typeof i3.MatRowHoverContent, typeof i4.MatEditLens, typeof i4.MatEditRevert, typeof i4.MatEditClose, typeof i3.MatEditOpen], [typeof i3.MatPopoverEdit, typeof i3.MatPopoverEditTabOut, typeof i3.MatRowHoverContent, typeof i4.MatEditLens, typeof i4.MatEditRevert, typeof i4.MatEditClose, typeof i3.MatEditOpen, typeof i1.CdkEditable]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatPopoverEditModule>;
 }
 
@@ -83,7 +83,7 @@ export declare class MatPopoverEditModule {
 export declare class MatPopoverEditTabOut<C> extends CdkPopoverEditTabOut<C> {
     protected panelClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPopoverEditTabOut<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEditTabOut<any>, "[matPopoverEdit][matPopoverEditTabOut]", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPopoverEditTabOut<any>, "[matPopoverEdit][matPopoverEditTabOut]", never, { "template": { "alias": "matPopoverEdit"; "required": false; }; "context": { "alias": "matPopoverEditContext"; "required": false; }; "colspan": { "alias": "matPopoverEditColspan"; "required": false; }; "disabled": { "alias": "matPopoverEditDisabled"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -95,7 +95,7 @@ export declare class MatRowHoverContent extends CdkRowHoverContent {
     protected makeElementHiddenButFocusable(element: HTMLElement): void;
     protected makeElementVisible(element: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRowHoverContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowHoverContent, "[matRowHoverContent]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowHoverContent, "[matRowHoverContent]", never, {}, {}, never, never, true, never>;
 }
 
 export { }

package/selection/index.d.ts

@@ -4,40 +4,40 @@ import { CdkSelection } from '@angular/cdk-experimental/selection';
 import { CdkSelectionToggle } from '@angular/cdk-experimental/selection';
 import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
-import * as i6 from '@angular/common';
-import * as i7 from '@angular/material/table';
-import * as i8 from '@angular/material/checkbox';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/material/table';
+import * as i3 from '@angular/material/checkbox';
 import { MatTable } from '@angular/material/table';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { SelectionChange } from '@angular/cdk-experimental/selection';
 
-declare namespace i1 {
+declare namespace i4 {
     export {
         MatSelectAll
     }
 }
 
-declare namespace i2 {
+declare namespace i5 {
     export {
         MatSelection,
         SelectionChange
     }
 }
 
-declare namespace i3 {
+declare namespace i6 {
     export {
         MatSelectionToggle
     }
 }
 
-declare namespace i4 {
+declare namespace i7 {
     export {
         MatSelectionColumn
     }
 }
 
-declare namespace i5 {
+declare namespace i8 {
     export {
         MatRowSelection
     }
@@ -54,7 +54,7 @@ export declare class MatRowSelection<T> extends CdkRowSelection<T> {
     /** The value that is associated with the row */
     value: T;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRowSelection<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowSelection<any>, "[matRowSelection]", never, { "index": { "alias": "matRowSelectionIndex"; "required": false; }; "value": { "alias": "matRowSelectionValue"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowSelection<any>, "[matRowSelection]", never, { "index": { "alias": "matRowSelectionIndex"; "required": false; }; "value": { "alias": "matRowSelectionValue"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -69,7 +69,7 @@ export declare class MatRowSelection<T> extends CdkRowSelection<T> {
  */
 export declare class MatSelectAll<T> extends CdkSelectAll<T> {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectAll<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectAll<any>, "[matSelectAll]", ["matSelectAll"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectAll<any>, "[matSelectAll]", ["matSelectAll"], {}, {}, never, never, true, never>;
 }
 
 /**
@@ -85,7 +85,7 @@ export declare class MatSelection<T> extends CdkSelection<T> {
     /** Emits when selection changes. */
     readonly change: EventEmitter<SelectionChange<T>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelection<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelection<any>, "[matSelection]", ["matSelection"], { "multiple": { "alias": "matSelectionMultiple"; "required": false; }; }, { "change": "matSelectionChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelection<any>, "[matSelection]", ["matSelection"], { "multiple": { "alias": "matSelectionMultiple"; "required": false; }; }, { "change": "matSelectionChange"; }, never, never, true, never>;
 }
 
 /**
@@ -109,12 +109,12 @@ export declare class MatSelectionColumn<T> implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     private _syncColumnDefName;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionColumn<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelectionColumn<any>, "mat-selection-column", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelectionColumn<any>, "mat-selection-column", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 export declare class MatSelectionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSelectionModule, [typeof i1.MatSelectAll, typeof i2.MatSelection, typeof i3.MatSelectionToggle, typeof i4.MatSelectionColumn, typeof i5.MatRowSelection], [typeof i6.CommonModule, typeof i7.MatTableModule, typeof i8.MatCheckboxModule], [typeof i1.MatSelectAll, typeof i2.MatSelection, typeof i3.MatSelectionToggle, typeof i4.MatSelectionColumn, typeof i5.MatRowSelection]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSelectionModule, never, [typeof i1.CommonModule, typeof i2.MatTableModule, typeof i3.MatCheckboxModule, typeof i4.MatSelectAll, typeof i5.MatSelection, typeof i6.MatSelectionToggle, typeof i7.MatSelectionColumn, typeof i8.MatRowSelection], [typeof i4.MatSelectAll, typeof i5.MatSelection, typeof i6.MatSelectionToggle, typeof i7.MatSelectionColumn, typeof i8.MatRowSelection]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSelectionModule>;
 }
 
@@ -132,7 +132,7 @@ export declare class MatSelectionToggle<T> extends CdkSelectionToggle<T> {
     /** The value that is associated with the toggle */
     value: T;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectionToggle<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectionToggle<any>, "[matSelectionToggle]", ["matSelectionToggle"], { "index": { "alias": "matSelectionToggleIndex"; "required": false; }; "value": { "alias": "matSelectionToggleValue"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectionToggle<any>, "[matSelectionToggle]", ["matSelectionToggle"], { "index": { "alias": "matSelectionToggleIndex"; "required": false; }; "value": { "alias": "matSelectionToggleValue"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 export { SelectionChange }

package/theming/_custom-tokens.scss

@@ -237,6 +237,58 @@
   );
 }
 
+/// Generates custom tokens for the mat-expansion.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-expansion
+@function expansion($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, header-text, title-medium),
+    _generate-typography-tokens($systems, container-text, body-large),
+    (
+      container-shape: _hardcode(12px, $exclude-hardcoded),
+      container-background-color: map.get($systems, md-sys-color, surface),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      actions-divider-color: map.get($systems, md-sys-color, outline-variant),
+      header-hover-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      header-focus-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      header-disabled-state-text-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      header-text-color: map.get($systems, md-sys-color, on-surface),
+      header-description-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-indicator-color: map.get($systems, md-sys-color, on-surface-variant),
+    )
+  );
+}
+
+/// Generates custom tokens for the mat-fab.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-fab
+@function fab($systems, $exclude-hardcoded) {
+  @return (
+    foreground-color: map.get($systems, md-sys-color, on-primary-container),
+    state-layer-color: map.get($systems, md-sys-color, primary-container),
+    ripple-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-primary-container),
+      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+    ),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    disabled-state-container-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    disabled-state-foreground-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+  );
+}
+
 /// Generates custom tokens for the mat-form-field.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -287,6 +339,23 @@
   );
 }
 
+/// Generates custom tokens for the mat-icon-button.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-icon-button
+@function icon-button($systems, $exclude-hardcoded) {
+  @return (
+    state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface-variant),
+      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+    ),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+  );
+}
+
 /// Generates custom tokens for the mat-menu.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

package/theming/_m3-density.scss

@@ -25,7 +25,12 @@ $_density-tokens: (
   (mdc, circular-progress): (),
   (mdc, dialog): (),
   (mdc, elevated-card): (),
+  (mdc, extended-fab): (),
+  (mdc, fab): (),
   (mdc, filled-text-field): (),
+  (mdc, icon-button): (
+    state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
+  ),
   (mdc, linear-progress): (),
   (mdc, list): (
     list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
@@ -53,9 +58,15 @@ $_density-tokens: (
   (mat, card): (),
   (mat, datepicker): (),
   (mat, divider): (),
+  (mat, expansion): (
+    header-collapsed-state-height: (48px, 44px, 40px, 36px),
+    header-expanded-state-height: (64px, 60px, 56px, 48px),
+  ),
+  (mat, fab): (),
   (mat, form-fild): (),
   (mat, grid-list): (),
   (mat, icon): (),
+  (mat, icon-button): (),
   (mat, menu): (),
   (mat, optgroup): (),
   (mat, option): (),

package/theming/_m3-tokens.scss

@@ -197,11 +197,26 @@
       mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, fab),
+      mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, extended-fab),
+      mdc-tokens.md-comp-extended-fab-primary-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, filled-text-field),
       mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, icon-button),
+      mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, linear-progress),
       mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
@@ -290,11 +305,21 @@
       custom-tokens.divider($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, fab),
+      custom-tokens.fab($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, form-field),
       custom-tokens.form-field($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, expansion),
+      custom-tokens.expansion($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, grid-list),
       custom-tokens.grid-list($systems, $exclude-hardcoded),
@@ -305,6 +330,11 @@
       custom-tokens.icon($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, icon-button),
+      custom-tokens.icon-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, menu),
       custom-tokens.menu($systems, $exclude-hardcoded),