@angular/material
Version:
Angular Material
159 lines (153 loc) • 5.83 kB
JavaScript
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { Platform } from '@angular/cdk/platform';
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, Inject, isDevMode, ViewEncapsulation, NgModule } from '@angular/core';
import { mixinColor, MatCommonModule } from '@angular/material/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// Boilerplate for applying mixins to MatToolbar.
/**
* \@docs-private
*/
class MatToolbarBase {
/**
* @param {?} _elementRef
*/
constructor(_elementRef) {
this._elementRef = _elementRef;
}
}
/** @type {?} */
const _MatToolbarMixinBase = mixinColor(MatToolbarBase);
class MatToolbarRow {
}
MatToolbarRow.decorators = [
{ type: Directive, args: [{
selector: 'mat-toolbar-row',
exportAs: 'matToolbarRow',
host: { 'class': 'mat-toolbar-row' },
},] },
];
class MatToolbar extends _MatToolbarMixinBase {
/**
* @param {?} elementRef
* @param {?} _platform
* @param {?=} document
*/
constructor(elementRef, _platform, document) {
super(elementRef);
this._platform = _platform;
// TODO: make the document a required param when doing breaking changes.
this._document = document;
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (!isDevMode() || !this._platform.isBrowser) {
return;
}
this._checkToolbarMixedModes();
this._toolbarRows.changes.subscribe((/**
* @return {?}
*/
() => this._checkToolbarMixedModes()));
}
/**
* Throws an exception when developers are attempting to combine the different toolbar row modes.
* @private
* @return {?}
*/
_checkToolbarMixedModes() {
if (!this._toolbarRows.length) {
return;
}
// Check if there are any other DOM nodes that can display content but aren't inside of
// a <mat-toolbar-row> element.
/** @type {?} */
const isCombinedUsage = Array.from(this._elementRef.nativeElement.childNodes)
.filter((/**
* @param {?} node
* @return {?}
*/
node => !(node.classList && node.classList.contains('mat-toolbar-row'))))
.filter((/**
* @param {?} node
* @return {?}
*/
node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8)))
.some((/**
* @param {?} node
* @return {?}
*/
node => !!(node.textContent && node.textContent.trim())));
if (isCombinedUsage) {
throwToolbarMixedModesError();
}
}
}
MatToolbar.decorators = [
{ type: Component, args: [{selector: 'mat-toolbar',
exportAs: 'matToolbar',
template: "<ng-content></ng-content><ng-content select=\"mat-toolbar-row\"></ng-content>",
styles: ["@media (-ms-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%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media (max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}"],
inputs: ['color'],
host: {
'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,
},] },
];
/** @nocollapse */
MatToolbar.ctorParameters = () => [
{ type: ElementRef },
{ type: Platform },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
MatToolbar.propDecorators = {
_toolbarRows: [{ type: ContentChildren, args: [MatToolbarRow,] }]
};
/**
* Throws an exception when attempting to combine the different toolbar row modes.
* \@docs-private
* @return {?}
*/
function throwToolbarMixedModesError() {
throw Error('MatToolbar: Attempting to combine different toolbar modes. ' +
'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +
'inside of a `<mat-toolbar>` for a single row.');
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MatToolbarModule {
}
MatToolbarModule.decorators = [
{ type: NgModule, args: [{
imports: [MatCommonModule],
exports: [MatToolbar, MatToolbarRow, MatCommonModule],
declarations: [MatToolbar, MatToolbarRow],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { MatToolbarModule, throwToolbarMixedModesError, MatToolbarRow, MatToolbar };
//# sourceMappingURL=toolbar.js.map