@angular/material 16.2.0-next.4 → 16.2.0-rc.0

package/fesm2022/toolbar.mjs

@@ -53,7 +53,7 @@ class MatToolbar extends _MatToolbarBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatToolbar, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatToolbar, selector: "mat-toolbar", inputs: { color: "color" }, host: { properties: { "class.mat-toolbar-multiple-rows": "_toolbarRows.length > 0", "class.mat-toolbar-single-row": "_toolbarRows.length === 0" }, classAttribute: "mat-toolbar" }, queries: [{ propertyName: "_toolbarRows", predicate: MatToolbarRow, descendants: true }], exportAs: ["matToolbar"], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n", styles: [".cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar .mat-mdc-button-base.mat-unthemed{--mdc-text-button-label-text-color: inherit;--mdc-outlined-button-label-text-color: inherit}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: MatToolbar, selector: "mat-toolbar", inputs: { color: "color" }, host: { properties: { "class.mat-toolbar-multiple-rows": "_toolbarRows.length > 0", "class.mat-toolbar-single-row": "_toolbarRows.length === 0" }, classAttribute: "mat-toolbar" }, queries: [{ propertyName: "_toolbarRows", predicate: MatToolbarRow, descendants: true }], exportAs: ["matToolbar"], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n", styles: [".mat-toolbar{background:var(--mat-toolbar-container-background-color);color:var(--mat-toolbar-container-text-color)}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font-family:var(--mat-toolbar-title-text-font);font-size:var(--mat-toolbar-title-text-size);line-height:var(--mat-toolbar-title-text-line-height);font-weight:var(--mat-toolbar-title-text-weight);letter-spacing:var(--mat-toolbar-title-text-tracking);margin:0}.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar .mat-form-field-underline,.mat-toolbar .mat-form-field-ripple,.mat-toolbar .mat-focused .mat-form-field-ripple{background-color:currentColor}.mat-toolbar .mat-form-field-label,.mat-toolbar .mat-focused .mat-form-field-label,.mat-toolbar .mat-select-value,.mat-toolbar .mat-select-arrow,.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow{color:inherit}.mat-toolbar .mat-input-element{caret-color:currentColor}.mat-toolbar .mat-mdc-button-base.mat-unthemed{--mdc-text-button-label-text-color: inherit;--mdc-outlined-button-label-text-color: inherit}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap;height:var(--mat-toolbar-standard-height)}@media(max-width: 599px){.mat-toolbar-row,.mat-toolbar-single-row{height:var(--mat-toolbar-mobile-height)}}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%;min-height:var(--mat-toolbar-standard-height)}@media(max-width: 599px){.mat-toolbar-multiple-rows{min-height:var(--mat-toolbar-mobile-height)}}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatToolbar, decorators: [{
             type: Component,
@@ -61,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
                         'class': 'mat-toolbar',
                         '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
                         '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n", styles: [".cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar .mat-mdc-button-base.mat-unthemed{--mdc-text-button-label-text-color: inherit;--mdc-outlined-button-label-text-color: inherit}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n", styles: [".mat-toolbar{background:var(--mat-toolbar-container-background-color);color:var(--mat-toolbar-container-text-color)}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font-family:var(--mat-toolbar-title-text-font);font-size:var(--mat-toolbar-title-text-size);line-height:var(--mat-toolbar-title-text-line-height);font-weight:var(--mat-toolbar-title-text-weight);letter-spacing:var(--mat-toolbar-title-text-tracking);margin:0}.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar .mat-form-field-underline,.mat-toolbar .mat-form-field-ripple,.mat-toolbar .mat-focused .mat-form-field-ripple{background-color:currentColor}.mat-toolbar .mat-form-field-label,.mat-toolbar .mat-focused .mat-form-field-label,.mat-toolbar .mat-select-value,.mat-toolbar .mat-select-arrow,.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow{color:inherit}.mat-toolbar .mat-input-element{caret-color:currentColor}.mat-toolbar .mat-mdc-button-base.mat-unthemed{--mdc-text-button-label-text-color: inherit;--mdc-outlined-button-label-text-color: inherit}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap;height:var(--mat-toolbar-standard-height)}@media(max-width: 599px){.mat-toolbar-row,.mat-toolbar-single-row{height:var(--mat-toolbar-mobile-height)}}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%;min-height:var(--mat-toolbar-standard-height)}@media(max-width: 599px){.mat-toolbar-multiple-rows{min-height:var(--mat-toolbar-mobile-height)}}"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

package/fesm2022/toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.mjs","sources":["../../../../../../src/material/toolbar/toolbar.ts","../../../../../../src/material/toolbar/toolbar.html","../../../../../../src/material/toolbar/toolbar-module.ts","../../../../../../src/material/toolbar/toolbar_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Platform} from '@angular/cdk/platform';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  Directive,\n  ElementRef,\n  Inject,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {CanColor, mixinColor} from '@angular/material/core';\n\n// Boilerplate for applying mixins to MatToolbar.\n/** @docs-private */\nconst _MatToolbarBase = mixinColor(\n  class {\n    constructor(public _elementRef: ElementRef) {}\n  },\n);\n\n@Directive({\n  selector: 'mat-toolbar-row',\n  exportAs: 'matToolbarRow',\n  host: {'class': 'mat-toolbar-row'},\n})\nexport class MatToolbarRow {}\n\n@Component({\n  selector: 'mat-toolbar',\n  exportAs: 'matToolbar',\n  templateUrl: 'toolbar.html',\n  styleUrls: ['toolbar.css'],\n  inputs: ['color'],\n  host: {\n    'class': 'mat-toolbar',\n    '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',\n    '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class MatToolbar extends _MatToolbarBase implements CanColor, AfterViewInit {\n  private _document: Document;\n\n  /** Reference to all toolbar row elements that have been projected. */\n  @ContentChildren(MatToolbarRow, {descendants: true}) _toolbarRows: QueryList<MatToolbarRow>;\n\n  constructor(\n    elementRef: ElementRef,\n    private _platform: Platform,\n    @Inject(DOCUMENT) document?: any,\n  ) {\n    super(elementRef);\n\n    // TODO: make the document a required param when doing breaking changes.\n    this._document = document;\n  }\n\n  ngAfterViewInit() {\n    if (this._platform.isBrowser) {\n      this._checkToolbarMixedModes();\n      this._toolbarRows.changes.subscribe(() => this._checkToolbarMixedModes());\n    }\n  }\n\n  /**\n   * Throws an exception when developers are attempting to combine the different toolbar row modes.\n   */\n  private _checkToolbarMixedModes() {\n    if (this._toolbarRows.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      // Check if there are any other DOM nodes that can display content but aren't inside of\n      // a <mat-toolbar-row> element.\n      const isCombinedUsage = Array.from<HTMLElement>(this._elementRef.nativeElement.childNodes)\n        .filter(node => !(node.classList && node.classList.contains('mat-toolbar-row')))\n        .filter(node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8))\n        .some(node => !!(node.textContent && node.textContent.trim()));\n\n      if (isCombinedUsage) {\n        throwToolbarMixedModesError();\n      }\n    }\n  }\n}\n\n/**\n * Throws an exception when attempting to combine the different toolbar row modes.\n * @docs-private\n */\nexport function throwToolbarMixedModesError() {\n  throw Error(\n    'MatToolbar: Attempting to combine different toolbar modes. ' +\n      'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +\n      'inside of a `<mat-toolbar>` for a single row.',\n  );\n}\n","<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {NgModule} from '@angular/core';\nimport {MatCommonModule} from '@angular/material/core';\nimport {MatToolbar, MatToolbarRow} from './toolbar';\n\n@NgModule({\n  imports: [MatCommonModule],\n  exports: [MatToolbar, MatToolbarRow, MatCommonModule],\n  declarations: [MatToolbar, MatToolbarRow],\n})\nexport class MatToolbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAuBA;AACA;AACA,MAAM,eAAe,GAAG,UAAU,CAChC,MAAA;AACE,IAAA,WAAA,CAAmB,WAAuB,EAAA;QAAvB,IAAW,CAAA,WAAA,GAAX,WAAW,CAAY;KAAI;AAC/C,CAAA,CACF,CAAC;MAOW,aAAa,CAAA;8GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAb,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,IAAI,EAAE,EAAC,OAAO,EAAE,iBAAiB,EAAC;AACnC,iBAAA,CAAA;;AAiBK,MAAO,UAAW,SAAQ,eAAe,CAAA;AAM7C,IAAA,WAAA,CACE,UAAsB,EACd,SAAmB,EACT,QAAc,EAAA;QAEhC,KAAK,CAAC,UAAU,CAAC,CAAC;QAHV,IAAS,CAAA,SAAA,GAAT,SAAS,CAAU;;AAM3B,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC3B;IAED,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE;YAC5B,IAAI,CAAC,uBAAuB,EAAE,CAAC;AAC/B,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC;AAC3E,SAAA;KACF;AAED;;AAEG;IACK,uBAAuB,GAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,CAAC,EAAE;;;AAG/E,YAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAc,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC;iBACvF,MAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;iBAC/E,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,MAAM,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;iBACpF,IAAI,CAAC,IAAI,IAAI,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AAEjE,YAAA,IAAI,eAAe,EAAE;AACnB,gBAAA,2BAA2B,EAAE,CAAC;AAC/B,aAAA;AACF,SAAA;KACF;AAxCU,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,oEASX,QAAQ,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGATP,UAAU,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iCAAA,EAAA,yBAAA,EAAA,8BAAA,EAAA,2BAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAIJ,aAAa,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxDhC,mFAEA,EAAA,MAAA,EAAA,CAAA,ocAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FDkDa,UAAU,EAAA,UAAA,EAAA,CAAA;kBAdtB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,YACb,YAAY,EAAA,MAAA,EAGd,CAAC,OAAO,CAAC,EACX,IAAA,EAAA;AACJ,wBAAA,OAAO,EAAE,aAAa;AACtB,wBAAA,mCAAmC,EAAE,yBAAyB;AAC9D,wBAAA,gCAAgC,EAAE,2BAA2B;AAC9D,qBAAA,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,ocAAA,CAAA,EAAA,CAAA;;0BAWlC,MAAM;2BAAC,QAAQ,CAAA;4CALmC,YAAY,EAAA,CAAA;sBAAhE,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,aAAa,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAA;;AAuCrD;;;AAGG;SACa,2BAA2B,GAAA;IACzC,MAAM,KAAK,CACT,6DAA6D;QAC3D,wFAAwF;AACxF,QAAA,+CAA+C,CAClD,CAAC;AACJ;;MExFa,gBAAgB,CAAA;8GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAAhB,gBAAgB,EAAA,YAAA,EAAA,CAFZ,UAAU,EAAE,aAAa,CAAA,EAAA,OAAA,EAAA,CAF9B,eAAe,CAAA,EAAA,OAAA,EAAA,CACf,UAAU,EAAE,aAAa,EAAE,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA;+GAGzC,gBAAgB,EAAA,OAAA,EAAA,CAJjB,eAAe,EACY,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAGzC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,eAAe,CAAC;AAC1B,oBAAA,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,eAAe,CAAC;AACrD,oBAAA,YAAY,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC;AAC1C,iBAAA,CAAA;;;AChBD;;AAEG;;;;"}
+{"version":3,"file":"toolbar.mjs","sources":["../../../../../../src/material/toolbar/toolbar.ts","../../../../../../src/material/toolbar/toolbar.html","../../../../../../src/material/toolbar/toolbar-module.ts","../../../../../../src/material/toolbar/toolbar_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Platform} from '@angular/cdk/platform';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  Directive,\n  ElementRef,\n  Inject,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {CanColor, mixinColor} from '@angular/material/core';\n\n// Boilerplate for applying mixins to MatToolbar.\n/** @docs-private */\nconst _MatToolbarBase = mixinColor(\n  class {\n    constructor(public _elementRef: ElementRef) {}\n  },\n);\n\n@Directive({\n  selector: 'mat-toolbar-row',\n  exportAs: 'matToolbarRow',\n  host: {'class': 'mat-toolbar-row'},\n})\nexport class MatToolbarRow {}\n\n@Component({\n  selector: 'mat-toolbar',\n  exportAs: 'matToolbar',\n  templateUrl: 'toolbar.html',\n  styleUrls: ['toolbar.css'],\n  inputs: ['color'],\n  host: {\n    'class': 'mat-toolbar',\n    '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',\n    '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class MatToolbar extends _MatToolbarBase implements CanColor, AfterViewInit {\n  private _document: Document;\n\n  /** Reference to all toolbar row elements that have been projected. */\n  @ContentChildren(MatToolbarRow, {descendants: true}) _toolbarRows: QueryList<MatToolbarRow>;\n\n  constructor(\n    elementRef: ElementRef,\n    private _platform: Platform,\n    @Inject(DOCUMENT) document?: any,\n  ) {\n    super(elementRef);\n\n    // TODO: make the document a required param when doing breaking changes.\n    this._document = document;\n  }\n\n  ngAfterViewInit() {\n    if (this._platform.isBrowser) {\n      this._checkToolbarMixedModes();\n      this._toolbarRows.changes.subscribe(() => this._checkToolbarMixedModes());\n    }\n  }\n\n  /**\n   * Throws an exception when developers are attempting to combine the different toolbar row modes.\n   */\n  private _checkToolbarMixedModes() {\n    if (this._toolbarRows.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      // Check if there are any other DOM nodes that can display content but aren't inside of\n      // a <mat-toolbar-row> element.\n      const isCombinedUsage = Array.from<HTMLElement>(this._elementRef.nativeElement.childNodes)\n        .filter(node => !(node.classList && node.classList.contains('mat-toolbar-row')))\n        .filter(node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8))\n        .some(node => !!(node.textContent && node.textContent.trim()));\n\n      if (isCombinedUsage) {\n        throwToolbarMixedModesError();\n      }\n    }\n  }\n}\n\n/**\n * Throws an exception when attempting to combine the different toolbar row modes.\n * @docs-private\n */\nexport function throwToolbarMixedModesError() {\n  throw Error(\n    'MatToolbar: Attempting to combine different toolbar modes. ' +\n      'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +\n      'inside of a `<mat-toolbar>` for a single row.',\n  );\n}\n","<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {NgModule} from '@angular/core';\nimport {MatCommonModule} from '@angular/material/core';\nimport {MatToolbar, MatToolbarRow} from './toolbar';\n\n@NgModule({\n  imports: [MatCommonModule],\n  exports: [MatToolbar, MatToolbarRow, MatCommonModule],\n  declarations: [MatToolbar, MatToolbarRow],\n})\nexport class MatToolbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/form-field/_form-field-theme.scss

@@ -1,63 +1,51 @@
-@use '@material/textfield' as mdc-textfield;
-@use '@material/floating-label' as mdc-floating-label;
-@use '@material/notched-outline' as mdc-notched-outline;
-@use '@material/line-ripple' as mdc-line-ripple;
-@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/textfield/filled-text-field-theme' as mdc-filled-text-field-theme;
+@use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
 @use '@material/typography/typography' as mdc-typography;
 
+@use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field;
+@use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
+@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
 @use './form-field-density';
 @use './form-field-subscript';
 @use './form-field-focus-overlay';
 @use './form-field-native-select';
 @use './mdc-text-field-theme-variable-refresh';
 
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
 
-// Mixin that overwrites the default MDC text-field color styles to be based on
-// the given theme palette. The MDC text-field is styled using `primary` by default.
-@mixin _color-styles($palette-name,
-  $query: mdc-helpers.$mdc-theme-styles-query) {
-  $orig-focused-label-color: mdc-textfield.$focused-label-color;
-  mdc-textfield.$focused-label-color: rgba(mdc-theme-color.prop-value($palette-name), 0.87);
-
-  @include mdc-textfield.caret-color($palette-name, $query);
-  @include mdc-textfield.line-ripple-color($palette-name, $query);
-
-  .mdc-text-field--focused {
-    @include mdc-textfield.focused_($query);
-  }
-
-  .mdc-text-field--invalid {
-    @include mdc-textfield.invalid_($query);
-  }
-
-  .mdc-text-field--outlined {
-    @include mdc-textfield.focused-outline-color($palette-name, $query);
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-filled-text-field-theme.theme(
+      tokens-mdc-filled-text-field.get-color-tokens($config));
+    @include mdc-outlined-text-field-theme.theme(
+      tokens-mdc-outlined-text-field.get-color-tokens($config));
+    @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
+      tokens-mat-form-field.get-color-tokens($config));
   }
 
-  mdc-textfield.$focused-label-color: $orig-focused-label-color;
-}
-
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.using-mdc-theme($config) {
     @include mdc-text-field-theme-variable-refresh.private-text-field-refresh-theme-variables() {
-      @include mdc-textfield.without-ripple($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-floating-label.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-notched-outline.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-line-ripple.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
       @include form-field-subscript.private-form-field-subscript-color();
       @include form-field-focus-overlay.private-form-field-focus-overlay-color();
       @include form-field-native-select.private-form-field-native-select-color($config);
 
       .mat-mdc-form-field.mat-accent {
-        @include _color-styles(secondary);
+        @include mdc-filled-text-field-theme.theme(
+          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, accent));
+        @include mdc-outlined-text-field-theme.theme(
+          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, accent));
       }
 
       .mat-mdc-form-field.mat-warn {
-        @include _color-styles(error);
+        @include mdc-filled-text-field-theme.theme(
+          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($config, warn));
+        @include mdc-outlined-text-field-theme.theme(
+          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($config, warn));
       }
 
       // This fixes an issue where the notch appears to be thicker than the rest of the outline when
@@ -68,15 +56,16 @@
       // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
       // (hover, focus, etc.)
       // TODO(mmalerba): port this fix into MDC
+      // TODO(crisbeto): move this into the structural styles
       .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-        &.mat-mdc-form-field .mdc-notched-outline__notch {
+        &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
           border-left: 1px solid transparent;
         }
       }
 
       [dir='rtl'] {
         .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-          &.mat-mdc-form-field .mdc-notched-outline__notch {
+          &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
             border-left: none;
             border-right: 1px solid transparent;
           }
@@ -89,21 +78,25 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
+
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-filled-text-field-theme.theme(
+      tokens-mdc-filled-text-field.get-typography-tokens($config));
+    @include mdc-outlined-text-field-theme.theme(
+      tokens-mdc-outlined-text-field.get-typography-tokens($config));
+  }
+
   @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-textfield.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-floating-label.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-notched-outline.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-line-ripple.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
     @include form-field-subscript.private-form-field-subscript-typography($config);
 
     // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
     // shows `body1` for text fields though, so we manually override the typography.
     // Note: Form controls inherit the typography from the parent form field.
-    .mat-mdc-form-field,
-    .mat-mdc-floating-label {
+    .mat-mdc-form-field {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mdc-typography-styles-query);
     }
 
+    // TODO(crisbeto): we may be able to set this style with the `label-text-populated-size` token.
     // Above, we updated the floating label to use the `body1` typography level. The MDC notched
     // outline overrides this accidentally (only when the label floats) to a `rem`-based value.
     // This results in different label widths when floated/docked and ultimately breaks the notch

package/form-field/_mdc-text-field-structure-overrides.scss

@@ -1,4 +1,8 @@
 @use '@material/textfield/variables' as mdc-textfield-variables;
+@use '@material/typography/typography' as mdc-typography;
+@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
+@use '../core/tokens/token-utils';
+@use '../core/style/vendor-prefixes';
 
 // Mixin that can be included to override the default MDC text-field
 // styles to fit our needs. See individual comments for context on why
@@ -13,6 +17,7 @@
   // Note: We increase specificity here because the MDC textfield seems to override this,
   // depending on the CSS order, with an affix selector joint with the input.
   .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
+    @include mdc-typography.smooth-font();
     font: inherit;
     letter-spacing: inherit;
     text-decoration: inherit;
@@ -21,6 +26,8 @@
   }
 
   .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
+    @include mdc-typography.smooth-font();
+
     // In order to ensure proper alignment of the floating label, we reset its line-height.
     // The line-height is not important as the element is absolutely positioned and only has one
     // line of text.
@@ -86,6 +93,17 @@
     }
   }
 
+  // Before the switch to the tokens MDC was setting a specific placeholder color when the input
+  // is disabled, but now there's no token for it so we need to implement it ourselves.
+  .mat-form-field-disabled .mdc-text-field__input {
+    @include vendor-prefixes.input-placeholder {
+      @include token-utils.use-tokens(
+        tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
+        @include token-utils.create-token-slot(color, disabled-input-text-placeholder-color);
+      }
+    }
+  }
+
   // The default MDC text-field implementation does not support labels which always float.
   // MDC only renders the placeholder if the input is focused. We extend this to show the
   // placeholder if the form-field label is set to always float.

package/grid-list/_grid-list-theme.scss

@@ -1,7 +1,8 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-@use '../core/style/list-common';
+@use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list;
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
 
 
 // Include this empty mixin for consistency with the other components.
@@ -10,10 +11,10 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-grid-tile-header,
-  .mat-grid-tile-footer {
-    @include list-common.base(typography-utils.font-size($config, caption));
-    font-size: typography-utils.font-size($config, body-1);
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-grid-list.$prefix,
+      tokens-mat-grid-list.get-typography-tokens($config));
   }
 }
 

package/icon/_icon-theme.scss

@@ -1,25 +1,35 @@
 @use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/tokens/m2/mat/icon' as tokens-mat-icon;
+@use '../core/tokens/token-utils';
+@use '../core/style/sass-utils';
+
+@mixin _palette-colors($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+  $color: theming.get-color-from-palette($palette, text);
+  $tokens: tokens-mat-icon.private-get-icon-color-tokens($color);
+  @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens);
+}
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-icon.$prefix,
+      tokens-mat-icon.get-color-tokens($config));
+  }
 
   .mat-icon {
     &.mat-primary {
-      color: theming.get-color-from-palette($primary, text);
+      @include _palette-colors($config, primary);
     }
 
     &.mat-accent {
-      color: theming.get-color-from-palette($accent, text);
+      @include _palette-colors($config, accent);
     }
 
     &.mat-warn {
-      color: theming.get-color-from-palette($warn, text);
+      @include _palette-colors($config, warn);
     }
   }
 }