toolbar.es5.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { __extends } from 'tslib';
  9. import { Platform } from '@angular/cdk/platform';
  10. import { DOCUMENT } from '@angular/common';
  11. import { ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, Inject, isDevMode, ViewEncapsulation, NgModule } from '@angular/core';
  12. import { mixinColor, MatCommonModule } from '@angular/material/core';
  13. /**
  14. * @fileoverview added by tsickle
  15. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  16. */
  17. // Boilerplate for applying mixins to MatToolbar.
  18. /**
  19. * \@docs-private
  20. */
  21. var
  22. // Boilerplate for applying mixins to MatToolbar.
  23. /**
  24. * \@docs-private
  25. */
  26. MatToolbarBase = /** @class */ (function () {
  27. function MatToolbarBase(_elementRef) {
  28. this._elementRef = _elementRef;
  29. }
  30. return MatToolbarBase;
  31. }());
  32. /** @type {?} */
  33. var _MatToolbarMixinBase = mixinColor(MatToolbarBase);
  34. var MatToolbarRow = /** @class */ (function () {
  35. function MatToolbarRow() {
  36. }
  37. MatToolbarRow.decorators = [
  38. { type: Directive, args: [{
  39. selector: 'mat-toolbar-row',
  40. exportAs: 'matToolbarRow',
  41. host: { 'class': 'mat-toolbar-row' },
  42. },] },
  43. ];
  44. return MatToolbarRow;
  45. }());
  46. var MatToolbar = /** @class */ (function (_super) {
  47. __extends(MatToolbar, _super);
  48. function MatToolbar(elementRef, _platform, document) {
  49. var _this = _super.call(this, elementRef) || this;
  50. _this._platform = _platform;
  51. // TODO: make the document a required param when doing breaking changes.
  52. _this._document = document;
  53. return _this;
  54. }
  55. /**
  56. * @return {?}
  57. */
  58. MatToolbar.prototype.ngAfterViewInit = /**
  59. * @return {?}
  60. */
  61. function () {
  62. var _this = this;
  63. if (!isDevMode() || !this._platform.isBrowser) {
  64. return;
  65. }
  66. this._checkToolbarMixedModes();
  67. this._toolbarRows.changes.subscribe((/**
  68. * @return {?}
  69. */
  70. function () { return _this._checkToolbarMixedModes(); }));
  71. };
  72. /**
  73. * Throws an exception when developers are attempting to combine the different toolbar row modes.
  74. */
  75. /**
  76. * Throws an exception when developers are attempting to combine the different toolbar row modes.
  77. * @private
  78. * @return {?}
  79. */
  80. MatToolbar.prototype._checkToolbarMixedModes = /**
  81. * Throws an exception when developers are attempting to combine the different toolbar row modes.
  82. * @private
  83. * @return {?}
  84. */
  85. function () {
  86. var _this = this;
  87. if (!this._toolbarRows.length) {
  88. return;
  89. }
  90. // Check if there are any other DOM nodes that can display content but aren't inside of
  91. // a <mat-toolbar-row> element.
  92. /** @type {?} */
  93. var isCombinedUsage = Array.from(this._elementRef.nativeElement.childNodes)
  94. .filter((/**
  95. * @param {?} node
  96. * @return {?}
  97. */
  98. function (node) { return !(node.classList && node.classList.contains('mat-toolbar-row')); }))
  99. .filter((/**
  100. * @param {?} node
  101. * @return {?}
  102. */
  103. function (node) { return node.nodeType !== (_this._document ? _this._document.COMMENT_NODE : 8); }))
  104. .some((/**
  105. * @param {?} node
  106. * @return {?}
  107. */
  108. function (node) { return !!(node.textContent && node.textContent.trim()); }));
  109. if (isCombinedUsage) {
  110. throwToolbarMixedModesError();
  111. }
  112. };
  113. MatToolbar.decorators = [
  114. { type: Component, args: [{selector: 'mat-toolbar',
  115. exportAs: 'matToolbar',
  116. template: "<ng-content></ng-content><ng-content select=\"mat-toolbar-row\"></ng-content>",
  117. 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}}"],
  118. inputs: ['color'],
  119. host: {
  120. 'class': 'mat-toolbar',
  121. '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
  122. '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',
  123. },
  124. changeDetection: ChangeDetectionStrategy.OnPush,
  125. encapsulation: ViewEncapsulation.None,
  126. },] },
  127. ];
  128. /** @nocollapse */
  129. MatToolbar.ctorParameters = function () { return [
  130. { type: ElementRef },
  131. { type: Platform },
  132. { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
  133. ]; };
  134. MatToolbar.propDecorators = {
  135. _toolbarRows: [{ type: ContentChildren, args: [MatToolbarRow,] }]
  136. };
  137. return MatToolbar;
  138. }(_MatToolbarMixinBase));
  139. /**
  140. * Throws an exception when attempting to combine the different toolbar row modes.
  141. * \@docs-private
  142. * @return {?}
  143. */
  144. function throwToolbarMixedModesError() {
  145. throw Error('MatToolbar: Attempting to combine different toolbar modes. ' +
  146. 'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +
  147. 'inside of a `<mat-toolbar>` for a single row.');
  148. }
  149. /**
  150. * @fileoverview added by tsickle
  151. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  152. */
  153. var MatToolbarModule = /** @class */ (function () {
  154. function MatToolbarModule() {
  155. }
  156. MatToolbarModule.decorators = [
  157. { type: NgModule, args: [{
  158. imports: [MatCommonModule],
  159. exports: [MatToolbar, MatToolbarRow, MatCommonModule],
  160. declarations: [MatToolbar, MatToolbarRow],
  161. },] },
  162. ];
  163. return MatToolbarModule;
  164. }());
  165. /**
  166. * @fileoverview added by tsickle
  167. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  168. */
  169. /**
  170. * @fileoverview added by tsickle
  171. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  172. */
  173. export { MatToolbarModule, throwToolbarMixedModesError, MatToolbarRow, MatToolbar };
  174. //# sourceMappingURL=toolbar.es5.js.map