toolbar.mjs 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import * as i0 from '@angular/core';
  2. import { Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, ContentChildren, NgModule } from '@angular/core';
  3. import { mixinColor, MatCommonModule } from '@angular/material/core';
  4. import * as i1 from '@angular/cdk/platform';
  5. import { DOCUMENT } from '@angular/common';
  6. // Boilerplate for applying mixins to MatToolbar.
  7. /** @docs-private */
  8. const _MatToolbarBase = mixinColor(class {
  9. constructor(_elementRef) {
  10. this._elementRef = _elementRef;
  11. }
  12. });
  13. class MatToolbarRow {
  14. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatToolbarRow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
  15. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatToolbarRow, selector: "mat-toolbar-row", host: { classAttribute: "mat-toolbar-row" }, exportAs: ["matToolbarRow"], ngImport: i0 }); }
  16. }
  17. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatToolbarRow, decorators: [{
  18. type: Directive,
  19. args: [{
  20. selector: 'mat-toolbar-row',
  21. exportAs: 'matToolbarRow',
  22. host: { 'class': 'mat-toolbar-row' },
  23. }]
  24. }] });
  25. class MatToolbar extends _MatToolbarBase {
  26. constructor(elementRef, _platform, document) {
  27. super(elementRef);
  28. this._platform = _platform;
  29. // TODO: make the document a required param when doing breaking changes.
  30. this._document = document;
  31. }
  32. ngAfterViewInit() {
  33. if (this._platform.isBrowser) {
  34. this._checkToolbarMixedModes();
  35. this._toolbarRows.changes.subscribe(() => this._checkToolbarMixedModes());
  36. }
  37. }
  38. /**
  39. * Throws an exception when developers are attempting to combine the different toolbar row modes.
  40. */
  41. _checkToolbarMixedModes() {
  42. if (this._toolbarRows.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {
  43. // Check if there are any other DOM nodes that can display content but aren't inside of
  44. // a <mat-toolbar-row> element.
  45. const isCombinedUsage = Array.from(this._elementRef.nativeElement.childNodes)
  46. .filter(node => !(node.classList && node.classList.contains('mat-toolbar-row')))
  47. .filter(node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8))
  48. .some(node => !!(node.textContent && node.textContent.trim()));
  49. if (isCombinedUsage) {
  50. throwToolbarMixedModesError();
  51. }
  52. }
  53. }
  54. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatToolbar, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
  55. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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 }); }
  56. }
  57. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatToolbar, decorators: [{
  58. type: Component,
  59. args: [{ selector: 'mat-toolbar', exportAs: 'matToolbar', inputs: ['color'], host: {
  60. 'class': 'mat-toolbar',
  61. '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
  62. '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',
  63. }, 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%}"] }]
  64. }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
  65. type: Inject,
  66. args: [DOCUMENT]
  67. }] }]; }, propDecorators: { _toolbarRows: [{
  68. type: ContentChildren,
  69. args: [MatToolbarRow, { descendants: true }]
  70. }] } });
  71. /**
  72. * Throws an exception when attempting to combine the different toolbar row modes.
  73. * @docs-private
  74. */
  75. function throwToolbarMixedModesError() {
  76. throw Error('MatToolbar: Attempting to combine different toolbar modes. ' +
  77. 'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +
  78. 'inside of a `<mat-toolbar>` for a single row.');
  79. }
  80. class MatToolbarModule {
  81. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
  82. static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: MatToolbarModule, declarations: [MatToolbar, MatToolbarRow], imports: [MatCommonModule], exports: [MatToolbar, MatToolbarRow, MatCommonModule] }); }
  83. static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatToolbarModule, imports: [MatCommonModule, MatCommonModule] }); }
  84. }
  85. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatToolbarModule, decorators: [{
  86. type: NgModule,
  87. args: [{
  88. imports: [MatCommonModule],
  89. exports: [MatToolbar, MatToolbarRow, MatCommonModule],
  90. declarations: [MatToolbar, MatToolbarRow],
  91. }]
  92. }] });
  93. /**
  94. * Generated bundle index. Do not edit.
  95. */
  96. export { MatToolbar, MatToolbarModule, MatToolbarRow, throwToolbarMixedModesError };
  97. //# sourceMappingURL=toolbar.mjs.map