@angular/material
Version:
Angular Material
183 lines (179 loc) • 9.99 kB
JavaScript
import { Platform } from '@angular/cdk/platform';
import * as i0 from '@angular/core';
import { inject, ElementRef, DOCUMENT, Directive, ContentChildren, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { BidiModule } from '@angular/cdk/bidi';
class MatToolbarRow {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbarRow,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatToolbarRow,
isStandalone: true,
selector: "mat-toolbar-row",
host: {
classAttribute: "mat-toolbar-row"
},
exportAs: ["matToolbarRow"],
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbarRow,
decorators: [{
type: Directive,
args: [{
selector: 'mat-toolbar-row',
exportAs: 'matToolbarRow',
host: {
'class': 'mat-toolbar-row'
}
}]
}]
});
class MatToolbar {
_elementRef = inject(ElementRef);
_platform = inject(Platform);
_document = inject(DOCUMENT);
color;
_toolbarRows;
constructor() {}
ngAfterViewInit() {
if (this._platform.isBrowser) {
this._checkToolbarMixedModes();
this._toolbarRows.changes.subscribe(() => this._checkToolbarMixedModes());
}
}
_checkToolbarMixedModes() {
if (this._toolbarRows.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {
const isCombinedUsage = Array.from(this._elementRef.nativeElement.childNodes).filter(node => !(node.classList && node.classList.contains('mat-toolbar-row'))).filter(node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8)).some(node => !!(node.textContent && node.textContent.trim()));
if (isCombinedUsage) {
throwToolbarMixedModesError();
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbar,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
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 {\n background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));\n color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));\n}\n.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 {\n font-family: var(--mat-toolbar-title-text-font, var(--mat-sys-title-large-font));\n font-size: var(--mat-toolbar-title-text-size, var(--mat-sys-title-large-size));\n line-height: var(--mat-toolbar-title-text-line-height, var(--mat-sys-title-large-line-height));\n font-weight: var(--mat-toolbar-title-text-weight, var(--mat-sys-title-large-weight));\n letter-spacing: var(--mat-toolbar-title-text-tracking, var(--mat-sys-title-large-tracking));\n margin: 0;\n}\n@media (forced-colors: active) {\n .mat-toolbar {\n outline: solid 1px;\n }\n}\n.mat-toolbar .mat-form-field-underline,\n.mat-toolbar .mat-form-field-ripple,\n.mat-toolbar .mat-focused .mat-form-field-ripple {\n background-color: currentColor;\n}\n.mat-toolbar .mat-form-field-label,\n.mat-toolbar .mat-focused .mat-form-field-label,\n.mat-toolbar .mat-select-value,\n.mat-toolbar .mat-select-arrow,\n.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow {\n color: inherit;\n}\n.mat-toolbar .mat-input-element {\n caret-color: currentColor;\n}\n.mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {\n --mat-button-text-label-text-color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));\n --mat-button-outlined-label-text-color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));\n}\n\n.mat-toolbar-row, .mat-toolbar-single-row {\n display: flex;\n box-sizing: border-box;\n padding: 0 16px;\n width: 100%;\n flex-direction: row;\n align-items: center;\n white-space: nowrap;\n height: var(--mat-toolbar-standard-height, 64px);\n}\n@media (max-width: 599px) {\n .mat-toolbar-row, .mat-toolbar-single-row {\n height: var(--mat-toolbar-mobile-height, 56px);\n }\n}\n\n.mat-toolbar-multiple-rows {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n width: 100%;\n min-height: var(--mat-toolbar-standard-height, 64px);\n}\n@media (max-width: 599px) {\n .mat-toolbar-multiple-rows {\n min-height: var(--mat-toolbar-mobile-height, 56px);\n }\n}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbar,
decorators: [{
type: Component,
args: [{
selector: 'mat-toolbar',
exportAs: 'matToolbar',
host: {
'class': 'mat-toolbar',
'[class]': 'color ? "mat-" + color : ""',
'[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
'[class.mat-toolbar-single-row]': '_toolbarRows.length === 0'
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "<ng-content></ng-content>\n<ng-content select=\"mat-toolbar-row\"></ng-content>\n",
styles: [".mat-toolbar {\n background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));\n color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));\n}\n.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 {\n font-family: var(--mat-toolbar-title-text-font, var(--mat-sys-title-large-font));\n font-size: var(--mat-toolbar-title-text-size, var(--mat-sys-title-large-size));\n line-height: var(--mat-toolbar-title-text-line-height, var(--mat-sys-title-large-line-height));\n font-weight: var(--mat-toolbar-title-text-weight, var(--mat-sys-title-large-weight));\n letter-spacing: var(--mat-toolbar-title-text-tracking, var(--mat-sys-title-large-tracking));\n margin: 0;\n}\n@media (forced-colors: active) {\n .mat-toolbar {\n outline: solid 1px;\n }\n}\n.mat-toolbar .mat-form-field-underline,\n.mat-toolbar .mat-form-field-ripple,\n.mat-toolbar .mat-focused .mat-form-field-ripple {\n background-color: currentColor;\n}\n.mat-toolbar .mat-form-field-label,\n.mat-toolbar .mat-focused .mat-form-field-label,\n.mat-toolbar .mat-select-value,\n.mat-toolbar .mat-select-arrow,\n.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow {\n color: inherit;\n}\n.mat-toolbar .mat-input-element {\n caret-color: currentColor;\n}\n.mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {\n --mat-button-text-label-text-color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));\n --mat-button-outlined-label-text-color: var(--mat-toolbar-container-text-color, var(--mat-sys-on-surface));\n}\n\n.mat-toolbar-row, .mat-toolbar-single-row {\n display: flex;\n box-sizing: border-box;\n padding: 0 16px;\n width: 100%;\n flex-direction: row;\n align-items: center;\n white-space: nowrap;\n height: var(--mat-toolbar-standard-height, 64px);\n}\n@media (max-width: 599px) {\n .mat-toolbar-row, .mat-toolbar-single-row {\n height: var(--mat-toolbar-mobile-height, 56px);\n }\n}\n\n.mat-toolbar-multiple-rows {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n width: 100%;\n min-height: var(--mat-toolbar-standard-height, 64px);\n}\n@media (max-width: 599px) {\n .mat-toolbar-multiple-rows {\n min-height: var(--mat-toolbar-mobile-height, 56px);\n }\n}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
color: [{
type: Input
}],
_toolbarRows: [{
type: ContentChildren,
args: [MatToolbarRow, {
descendants: true
}]
}]
}
});
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.');
}
class MatToolbarModule {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbarModule,
deps: [],
target: i0.ɵɵFactoryTarget.NgModule
});
static ɵmod = i0.ɵɵngDeclareNgModule({
minVersion: "14.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbarModule,
imports: [MatToolbar, MatToolbarRow],
exports: [MatToolbar, MatToolbarRow, BidiModule]
});
static ɵinj = i0.ɵɵngDeclareInjector({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbarModule,
imports: [BidiModule]
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatToolbarModule,
decorators: [{
type: NgModule,
args: [{
imports: [MatToolbar, MatToolbarRow],
exports: [MatToolbar, MatToolbarRow, BidiModule]
}]
}]
});
export { MatToolbar, MatToolbarModule, MatToolbarRow, throwToolbarMixedModesError };
//# sourceMappingURL=toolbar.mjs.map