toolbar.mjs 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import * as i0 from '@angular/core';
  2. import { Directive, inject, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, NgModule } from '@angular/core';
  3. import { Platform } from '@angular/cdk/platform';
  4. import { DOCUMENT } from '@angular/common';
  5. import { M as MatCommonModule } from './common-module-WayjW0Pb.mjs';
  6. import '@angular/cdk/a11y';
  7. import '@angular/cdk/bidi';
  8. class MatToolbarRow {
  9. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatToolbarRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  10. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatToolbarRow, isStandalone: true, selector: "mat-toolbar-row", host: { classAttribute: "mat-toolbar-row" }, exportAs: ["matToolbarRow"], ngImport: i0 });
  11. }
  12. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatToolbarRow, decorators: [{
  13. type: Directive,
  14. args: [{
  15. selector: 'mat-toolbar-row',
  16. exportAs: 'matToolbarRow',
  17. host: { 'class': 'mat-toolbar-row' },
  18. }]
  19. }] });
  20. class MatToolbar {
  21. _elementRef = inject(ElementRef);
  22. _platform = inject(Platform);
  23. _document = inject(DOCUMENT);
  24. // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
  25. /**
  26. * Theme color of the toolbar. This API is supported in M2 themes only, it has
  27. * no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/toolbar/styling.
  28. *
  29. * For information on applying color variants in M3, see
  30. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  31. */
  32. color;
  33. /** Reference to all toolbar row elements that have been projected. */
  34. _toolbarRows;
  35. constructor() { }
  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. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
  59. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatToolbar, isStandalone: true, selector: "mat-toolbar", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "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"], 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, var(--mat-sys-surface));color:var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface))}.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, var(--mat-sys-title-large-font));font-size:var(--mat-toolbar-title-text-size, var(--mat-sys-title-large-size));line-height:var(--mat-toolbar-title-text-line-height, var(--mat-sys-title-large-line-height));font-weight:var(--mat-toolbar-title-text-weight, var(--mat-sys-title-large-weight));letter-spacing:var(--mat-toolbar-title-text-tracking, var(--mat-sys-title-large-tracking));margin:0}@media(forced-colors: 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-mdc-button-base.mat-unthemed{--mdc-text-button-label-text-color:var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));--mdc-outlined-button-label-text-color:var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface))}.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, 64px)}@media(max-width: 599px){.mat-toolbar-row,.mat-toolbar-single-row{height:var(--mat-toolbar-mobile-height, 56px)}}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%;min-height:var(--mat-toolbar-standard-height, 64px)}@media(max-width: 599px){.mat-toolbar-multiple-rows{min-height:var(--mat-toolbar-mobile-height, 56px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  60. }
  61. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatToolbar, decorators: [{
  62. type: Component,
  63. args: [{ selector: 'mat-toolbar', exportAs: 'matToolbar', host: {
  64. 'class': 'mat-toolbar',
  65. '[class]': 'color ? "mat-" + color : ""',
  66. '[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
  67. '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',
  68. }, 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, var(--mat-sys-surface));color:var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface))}.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, var(--mat-sys-title-large-font));font-size:var(--mat-toolbar-title-text-size, var(--mat-sys-title-large-size));line-height:var(--mat-toolbar-title-text-line-height, var(--mat-sys-title-large-line-height));font-weight:var(--mat-toolbar-title-text-weight, var(--mat-sys-title-large-weight));letter-spacing:var(--mat-toolbar-title-text-tracking, var(--mat-sys-title-large-tracking));margin:0}@media(forced-colors: 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-mdc-button-base.mat-unthemed{--mdc-text-button-label-text-color:var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));--mdc-outlined-button-label-text-color:var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface))}.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, 64px)}@media(max-width: 599px){.mat-toolbar-row,.mat-toolbar-single-row{height:var(--mat-toolbar-mobile-height, 56px)}}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%;min-height:var(--mat-toolbar-standard-height, 64px)}@media(max-width: 599px){.mat-toolbar-multiple-rows{min-height:var(--mat-toolbar-mobile-height, 56px)}}\n"] }]
  69. }], ctorParameters: () => [], propDecorators: { color: [{
  70. type: Input
  71. }], _toolbarRows: [{
  72. type: ContentChildren,
  73. args: [MatToolbarRow, { descendants: true }]
  74. }] } });
  75. /**
  76. * Throws an exception when attempting to combine the different toolbar row modes.
  77. * @docs-private
  78. */
  79. function throwToolbarMixedModesError() {
  80. throw Error('MatToolbar: Attempting to combine different toolbar modes. ' +
  81. 'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +
  82. 'inside of a `<mat-toolbar>` for a single row.');
  83. }
  84. class MatToolbarModule {
  85. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  86. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatToolbarModule, imports: [MatCommonModule, MatToolbar, MatToolbarRow], exports: [MatToolbar, MatToolbarRow, MatCommonModule] });
  87. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatToolbarModule, imports: [MatCommonModule, MatCommonModule] });
  88. }
  89. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatToolbarModule, decorators: [{
  90. type: NgModule,
  91. args: [{
  92. imports: [MatCommonModule, MatToolbar, MatToolbarRow],
  93. exports: [MatToolbar, MatToolbarRow, MatCommonModule],
  94. }]
  95. }] });
  96. export { MatToolbar, MatToolbarModule, MatToolbarRow, throwToolbarMixedModesError };
  97. //# sourceMappingURL=toolbar.mjs.map