[6a3a178] | 1 | import { Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Inject, ContentChildren, NgModule } from '@angular/core';
|
---|
| 2 | import { mixinColor, MatCommonModule } from '@angular/material/core';
|
---|
| 3 | import { Platform } from '@angular/cdk/platform';
|
---|
| 4 | import { DOCUMENT } from '@angular/common';
|
---|
| 5 |
|
---|
| 6 | /**
|
---|
| 7 | * @license
|
---|
| 8 | * Copyright Google LLC All Rights Reserved.
|
---|
| 9 | *
|
---|
| 10 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 11 | * found in the LICENSE file at https://angular.io/license
|
---|
| 12 | */
|
---|
| 13 | // Boilerplate for applying mixins to MatToolbar.
|
---|
| 14 | /** @docs-private */
|
---|
| 15 | const _MatToolbarBase = mixinColor(class {
|
---|
| 16 | constructor(_elementRef) {
|
---|
| 17 | this._elementRef = _elementRef;
|
---|
| 18 | }
|
---|
| 19 | });
|
---|
| 20 | class MatToolbarRow {
|
---|
| 21 | }
|
---|
| 22 | MatToolbarRow.decorators = [
|
---|
| 23 | { type: Directive, args: [{
|
---|
| 24 | selector: 'mat-toolbar-row',
|
---|
| 25 | exportAs: 'matToolbarRow',
|
---|
| 26 | host: { 'class': 'mat-toolbar-row' },
|
---|
| 27 | },] }
|
---|
| 28 | ];
|
---|
| 29 | class MatToolbar extends _MatToolbarBase {
|
---|
| 30 | constructor(elementRef, _platform, document) {
|
---|
| 31 | super(elementRef);
|
---|
| 32 | this._platform = _platform;
|
---|
| 33 | // TODO: make the document a required param when doing breaking changes.
|
---|
| 34 | this._document = document;
|
---|
| 35 | }
|
---|
| 36 | ngAfterViewInit() {
|
---|
| 37 | if (this._platform.isBrowser) {
|
---|
| 38 | this._checkToolbarMixedModes();
|
---|
| 39 | this._toolbarRows.changes.subscribe(() => this._checkToolbarMixedModes());
|
---|
| 40 | }
|
---|
| 41 | }
|
---|
| 42 | /**
|
---|
| 43 | * Throws an exception when developers are attempting to combine the different toolbar row modes.
|
---|
| 44 | */
|
---|
| 45 | _checkToolbarMixedModes() {
|
---|
| 46 | if (this._toolbarRows.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
| 47 | // Check if there are any other DOM nodes that can display content but aren't inside of
|
---|
| 48 | // a <mat-toolbar-row> element.
|
---|
| 49 | const isCombinedUsage = Array.from(this._elementRef.nativeElement.childNodes)
|
---|
| 50 | .filter(node => !(node.classList && node.classList.contains('mat-toolbar-row')))
|
---|
| 51 | .filter(node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8))
|
---|
| 52 | .some(node => !!(node.textContent && node.textContent.trim()));
|
---|
| 53 | if (isCombinedUsage) {
|
---|
| 54 | throwToolbarMixedModesError();
|
---|
| 55 | }
|
---|
| 56 | }
|
---|
| 57 | }
|
---|
| 58 | }
|
---|
| 59 | MatToolbar.decorators = [
|
---|
| 60 | { type: Component, args: [{
|
---|
| 61 | selector: 'mat-toolbar',
|
---|
| 62 | exportAs: 'matToolbar',
|
---|
| 63 | template: "<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n",
|
---|
| 64 | inputs: ['color'],
|
---|
| 65 | host: {
|
---|
| 66 | 'class': 'mat-toolbar',
|
---|
| 67 | '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
|
---|
| 68 | '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',
|
---|
| 69 | },
|
---|
| 70 | changeDetection: ChangeDetectionStrategy.OnPush,
|
---|
| 71 | encapsulation: ViewEncapsulation.None,
|
---|
| 72 | styles: [".cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.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%}\n"]
|
---|
| 73 | },] }
|
---|
| 74 | ];
|
---|
| 75 | MatToolbar.ctorParameters = () => [
|
---|
| 76 | { type: ElementRef },
|
---|
| 77 | { type: Platform },
|
---|
| 78 | { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
|
---|
| 79 | ];
|
---|
| 80 | MatToolbar.propDecorators = {
|
---|
| 81 | _toolbarRows: [{ type: ContentChildren, args: [MatToolbarRow, { descendants: true },] }]
|
---|
| 82 | };
|
---|
| 83 | /**
|
---|
| 84 | * Throws an exception when attempting to combine the different toolbar row modes.
|
---|
| 85 | * @docs-private
|
---|
| 86 | */
|
---|
| 87 | function throwToolbarMixedModesError() {
|
---|
| 88 | throw Error('MatToolbar: Attempting to combine different toolbar modes. ' +
|
---|
| 89 | 'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +
|
---|
| 90 | 'inside of a `<mat-toolbar>` for a single row.');
|
---|
| 91 | }
|
---|
| 92 |
|
---|
| 93 | /**
|
---|
| 94 | * @license
|
---|
| 95 | * Copyright Google LLC All Rights Reserved.
|
---|
| 96 | *
|
---|
| 97 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 98 | * found in the LICENSE file at https://angular.io/license
|
---|
| 99 | */
|
---|
| 100 | class MatToolbarModule {
|
---|
| 101 | }
|
---|
| 102 | MatToolbarModule.decorators = [
|
---|
| 103 | { type: NgModule, args: [{
|
---|
| 104 | imports: [MatCommonModule],
|
---|
| 105 | exports: [MatToolbar, MatToolbarRow, MatCommonModule],
|
---|
| 106 | declarations: [MatToolbar, MatToolbarRow],
|
---|
| 107 | },] }
|
---|
| 108 | ];
|
---|
| 109 |
|
---|
| 110 | /**
|
---|
| 111 | * @license
|
---|
| 112 | * Copyright Google LLC All Rights Reserved.
|
---|
| 113 | *
|
---|
| 114 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 115 | * found in the LICENSE file at https://angular.io/license
|
---|
| 116 | */
|
---|
| 117 |
|
---|
| 118 | /**
|
---|
| 119 | * Generated bundle index. Do not edit.
|
---|
| 120 | */
|
---|
| 121 |
|
---|
| 122 | export { MatToolbar, MatToolbarModule, MatToolbarRow, throwToolbarMixedModesError };
|
---|
| 123 | //# sourceMappingURL=toolbar.js.map
|
---|