@angular-mdl/core
Version:
Angular components, directives and styles based on material design lite https://getmdl.io.
147 lines • 13.4 kB
JavaScript
import { Component, ElementRef, HostBinding, HostListener, QueryList, ViewEncapsulation, } from "@angular/core";
import { MdlLayoutMediatorService } from "./mdl-layout-mediator.service";
import * as i0 from "@angular/core";
import * as i1 from "./mdl-layout-mediator.service";
import * as i2 from "../common/append-view-container-ref-directive";
import * as i3 from "../ripple/mdl-ripple.directive";
import * as i4 from "@angular/common";
export class MdlLayoutHeaderComponent {
constructor(elementRef, layoutMediatorService) {
this.elementRef = elementRef;
this.layoutMediatorService = layoutMediatorService;
this.isSeamed = false;
this.isLayoutHeader = true;
this.isCompact = false;
this.isAnimating = false;
this.isRipple = true;
// will be set from mdllayoutcomponent
this.tabs = new QueryList();
this.el = elementRef.nativeElement;
}
get isWaterfall() {
return this.mode === "waterfall";
}
get isCastingShadow() {
return this.mode === "standard" || this.isCompact;
}
get isHeaderScroll() {
return this.mode === "scroll";
}
onTransitionEnd() {
this.isAnimating = false;
}
onClick() {
if (this.isCompact) {
this.isCompact = false;
this.isAnimating = true;
}
}
onTabMouseover(tab) {
this.layoutMediatorService.tabMouseover(tab);
}
onTabMouseout(tab) {
this.layoutMediatorService.tabMouseout(tab);
}
tabSelected(tab) {
this.layoutMediatorService.tabSelected(tab);
}
}
MdlLayoutHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i1.MdlLayoutMediatorService }], target: i0.ɵɵFactoryTarget.Component });
MdlLayoutHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlLayoutHeaderComponent, selector: "mdl-layout-header", host: { listeners: { "transitionend": "onTransitionEnd()", "click": "onClick()" }, properties: { "class.mdl-layout__header--seamed": "this.isSeamed", "class.mdl-layout__header": "this.isLayoutHeader", "class.is-compact": "this.isCompact", "class.mdl-layout__header--waterfall": "this.isWaterfall", "class.is-casting-shadow": "this.isCastingShadow", "class.mdl-layout__header--scroll": "this.isHeaderScroll" } }, ngImport: i0, template: `
<ng-content></ng-content>
<div
*ngIf="tabs?.toArray() && tabs.toArray().length > 0"
class="mdl-layout__tab-bar-container"
>
<div class="mdl-layout__tab-bar is-casting-shadow">
<div
*ngFor="let tab of tabs.toArray()"
class="mdl-layout__tab"
[ngClass]="{ 'is-active': tab.isActive }"
(mouseover)="onTabMouseover(tab)"
(mouseout)="onTabMouseout(tab)"
>
<div
*ngIf="tab.titleComponent"
(click)="tabSelected(tab)"
[mdl-ripple]="isRipple"
[append-view-container-ref]="tab.titleComponent.vcRef"
></div>
<a
*ngIf="!tab.titleComponent"
href="javascript:void(0)"
(click)="tabSelected(tab)"
class="mdl-layout__tab"
[ngClass]="{ 'is-active': tab.isActive }"
[mdl-ripple]="isRipple"
>{{ tab.title }}</a
>
</div>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.AppendViewContainerRefDirective, selector: "[append-view-container-ref]", inputs: ["append-view-container-ref"] }, { kind: "directive", type: i3.MdlAnchorRippleDirective, selector: "a[mdl-ripple],div[mdl-ripple]", inputs: ["mdl-ripple"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutHeaderComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-layout-header",
template: `
<ng-content></ng-content>
<div
*ngIf="tabs?.toArray() && tabs.toArray().length > 0"
class="mdl-layout__tab-bar-container"
>
<div class="mdl-layout__tab-bar is-casting-shadow">
<div
*ngFor="let tab of tabs.toArray()"
class="mdl-layout__tab"
[ngClass]="{ 'is-active': tab.isActive }"
(mouseover)="onTabMouseover(tab)"
(mouseout)="onTabMouseout(tab)"
>
<div
*ngIf="tab.titleComponent"
(click)="tabSelected(tab)"
[mdl-ripple]="isRipple"
[append-view-container-ref]="tab.titleComponent.vcRef"
></div>
<a
*ngIf="!tab.titleComponent"
href="javascript:void(0)"
(click)="tabSelected(tab)"
class="mdl-layout__tab"
[ngClass]="{ 'is-active': tab.isActive }"
[mdl-ripple]="isRipple"
>{{ tab.title }}</a
>
</div>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.MdlLayoutMediatorService }]; }, propDecorators: { isSeamed: [{
type: HostBinding,
args: ["class.mdl-layout__header--seamed"]
}], isLayoutHeader: [{
type: HostBinding,
args: ["class.mdl-layout__header"]
}], isCompact: [{
type: HostBinding,
args: ["class.is-compact"]
}], isWaterfall: [{
type: HostBinding,
args: ["class.mdl-layout__header--waterfall"]
}], isCastingShadow: [{
type: HostBinding,
args: ["class.is-casting-shadow"]
}], isHeaderScroll: [{
type: HostBinding,
args: ["class.mdl-layout__header--scroll"]
}], onTransitionEnd: [{
type: HostListener,
args: ["transitionend"]
}], onClick: [{
type: HostListener,
args: ["click"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWRsLWxheW91dC1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZS9zcmMvbGliL2xheW91dC9tZGwtbGF5b3V0LWhlYWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUNYLFlBQVksRUFDWixTQUFTLEVBQ1QsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7Ozs7QUF1Q3pFLE1BQU0sT0FBTyx3QkFBd0I7SUFtQm5DLFlBQ1UsVUFBc0IsRUFDdEIscUJBQStDO1FBRC9DLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDdEIsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUEwQjtRQW5CekQsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUV0QixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRXBCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFLaEIsc0NBQXNDO1FBQ3RDLFNBQUksR0FDRixJQUFJLFNBQVMsRUFBOEIsQ0FBQztRQU01QyxJQUFJLENBQUMsRUFBRSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUM7SUFDckMsQ0FBQztJQUVELElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxXQUFXLENBQUM7SUFDbkMsQ0FBQztJQUVELElBQTRDLGVBQWU7UUFDekQsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLFVBQVUsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3BELENBQUM7SUFFRCxJQUNJLGNBQWM7UUFDaEIsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQztJQUNoQyxDQUFDO0lBR0QsZUFBZTtRQUNiLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO0lBQzNCLENBQUM7SUFHRCxPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQztJQUVELGNBQWMsQ0FBQyxHQUErQjtRQUM1QyxJQUFJLENBQUMscUJBQXFCLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFRCxhQUFhLENBQUMsR0FBK0I7UUFDM0MsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQStCO1FBQ3pDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDOUMsQ0FBQzs7cUhBL0RVLHdCQUF3Qjt5R0FBeEIsd0JBQXdCLHFkQW5DekI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0NUOzJGQUdVLHdCQUF3QjtrQkFyQ3BDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWdDVDtvQkFDRCxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtpQkFDdEM7d0lBR0MsUUFBUTtzQkFEUCxXQUFXO3VCQUFDLGtDQUFrQztnQkFHL0MsY0FBYztzQkFEYixXQUFXO3VCQUFDLDBCQUEwQjtnQkFHdkMsU0FBUztzQkFEUixXQUFXO3VCQUFDLGtCQUFrQjtnQkFzQjNCLFdBQVc7c0JBRGQsV0FBVzt1QkFBQyxxQ0FBcUM7Z0JBS04sZUFBZTtzQkFBMUQsV0FBVzt1QkFBQyx5QkFBeUI7Z0JBS2xDLGNBQWM7c0JBRGpCLFdBQVc7dUJBQUMsa0NBQWtDO2dCQU0vQyxlQUFlO3NCQURkLFlBQVk7dUJBQUMsZUFBZTtnQkFNN0IsT0FBTztzQkFETixZQUFZO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBIb3N0TGlzdGVuZXIsXG4gIFF1ZXJ5TGlzdCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBNZGxMYXlvdXRUYWJQYW5lbENvbXBvbmVudCB9IGZyb20gXCIuL21kbC1sYXlvdXQtdGFiLXBhbmVsLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgTWRsTGF5b3V0TWVkaWF0b3JTZXJ2aWNlIH0gZnJvbSBcIi4vbWRsLWxheW91dC1tZWRpYXRvci5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJtZGwtbGF5b3V0LWhlYWRlclwiLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8ZGl2XG4gICAgICAqbmdJZj1cInRhYnM/LnRvQXJyYXkoKSAmJiB0YWJzLnRvQXJyYXkoKS5sZW5ndGggPiAwXCJcbiAgICAgIGNsYXNzPVwibWRsLWxheW91dF9fdGFiLWJhci1jb250YWluZXJcIlxuICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJtZGwtbGF5b3V0X190YWItYmFyIGlzLWNhc3Rpbmctc2hhZG93XCI+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYnMudG9BcnJheSgpXCJcbiAgICAgICAgICBjbGFzcz1cIm1kbC1sYXlvdXRfX3RhYlwiXG4gICAgICAgICAgW25nQ2xhc3NdPVwieyAnaXMtYWN0aXZlJzogdGFiLmlzQWN0aXZlIH1cIlxuICAgICAgICAgIChtb3VzZW92ZXIpPVwib25UYWJNb3VzZW92ZXIodGFiKVwiXG4gICAgICAgICAgKG1vdXNlb3V0KT1cIm9uVGFiTW91c2VvdXQodGFiKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAqbmdJZj1cInRhYi50aXRsZUNvbXBvbmVudFwiXG4gICAgICAgICAgICAoY2xpY2spPVwidGFiU2VsZWN0ZWQodGFiKVwiXG4gICAgICAgICAgICBbbWRsLXJpcHBsZV09XCJpc1JpcHBsZVwiXG4gICAgICAgICAgICBbYXBwZW5kLXZpZXctY29udGFpbmVyLXJlZl09XCJ0YWIudGl0bGVDb21wb25lbnQudmNSZWZcIlxuICAgICAgICAgID48L2Rpdj5cbiAgICAgICAgICA8YVxuICAgICAgICAgICAgKm5nSWY9XCIhdGFiLnRpdGxlQ29tcG9uZW50XCJcbiAgICAgICAgICAgIGhyZWY9XCJqYXZhc2NyaXB0OnZvaWQoMClcIlxuICAgICAgICAgICAgKGNsaWNrKT1cInRhYlNlbGVjdGVkKHRhYilcIlxuICAgICAgICAgICAgY2xhc3M9XCJtZGwtbGF5b3V0X190YWJcIlxuICAgICAgICAgICAgW25nQ2xhc3NdPVwieyAnaXMtYWN0aXZlJzogdGFiLmlzQWN0aXZlIH1cIlxuICAgICAgICAgICAgW21kbC1yaXBwbGVdPVwiaXNSaXBwbGVcIlxuICAgICAgICAgICAgPnt7IHRhYi50aXRsZSB9fTwvYVxuICAgICAgICAgID5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgTWRsTGF5b3V0SGVhZGVyQ29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MubWRsLWxheW91dF9faGVhZGVyLS1zZWFtZWRcIilcbiAgaXNTZWFtZWQgPSBmYWxzZTtcbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MubWRsLWxheW91dF9faGVhZGVyXCIpXG4gIGlzTGF5b3V0SGVhZGVyID0gdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MuaXMtY29tcGFjdFwiKVxuICBpc0NvbXBhY3QgPSBmYWxzZTtcblxuICBpc0FuaW1hdGluZyA9IGZhbHNlO1xuXG4gIGlzUmlwcGxlID0gdHJ1ZTtcbiAgLy8gc2V0IGZyb20gTWRsTGF5b3V0Q29tcG9uZW50XG4gIG1vZGU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgZWw6IEhUTUxFbGVtZW50O1xuXG4gIC8vIHdpbGwgYmUgc2V0IGZyb20gbWRsbGF5b3V0Y29tcG9uZW50XG4gIHRhYnM6IFF1ZXJ5TGlzdDxNZGxMYXlvdXRUYWJQYW5lbENvbXBvbmVudD4gPVxuICAgIG5ldyBRdWVyeUxpc3Q8TWRsTGF5b3V0VGFiUGFuZWxDb21wb25lbnQ+KCk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgbGF5b3V0TWVkaWF0b3JTZXJ2aWNlOiBNZGxMYXlvdXRNZWRpYXRvclNlcnZpY2VcbiAgKSB7XG4gICAgdGhpcy5lbCA9IGVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgfVxuXG4gIEBIb3N0QmluZGluZyhcImNsYXNzLm1kbC1sYXlvdXRfX2hlYWRlci0td2F0ZXJmYWxsXCIpXG4gIGdldCBpc1dhdGVyZmFsbCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5tb2RlID09PSBcIndhdGVyZmFsbFwiO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MuaXMtY2FzdGluZy1zaGFkb3dcIikgZ2V0IGlzQ2FzdGluZ1NoYWRvdygpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5tb2RlID09PSBcInN0YW5kYXJkXCIgfHwgdGhpcy5pc0NvbXBhY3Q7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoXCJjbGFzcy5tZGwtbGF5b3V0X19oZWFkZXItLXNjcm9sbFwiKVxuICBnZXQgaXNIZWFkZXJTY3JvbGwoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMubW9kZSA9PT0gXCJzY3JvbGxcIjtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoXCJ0cmFuc2l0aW9uZW5kXCIpXG4gIG9uVHJhbnNpdGlvbkVuZCgpOiB2b2lkIHtcbiAgICB0aGlzLmlzQW5pbWF0aW5nID0gZmFsc2U7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKFwiY2xpY2tcIilcbiAgb25DbGljaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pc0NvbXBhY3QpIHtcbiAgICAgIHRoaXMuaXNDb21wYWN0ID0gZmFsc2U7XG4gICAgICB0aGlzLmlzQW5pbWF0aW5nID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBvblRhYk1vdXNlb3Zlcih0YWI6IE1kbExheW91dFRhYlBhbmVsQ29tcG9uZW50KTogdm9pZCB7XG4gICAgdGhpcy5sYXlvdXRNZWRpYXRvclNlcnZpY2UudGFiTW91c2VvdmVyKHRhYik7XG4gIH1cblxuICBvblRhYk1vdXNlb3V0KHRhYjogTWRsTGF5b3V0VGFiUGFuZWxDb21wb25lbnQpOiB2b2lkIHtcbiAgICB0aGlzLmxheW91dE1lZGlhdG9yU2VydmljZS50YWJNb3VzZW91dCh0YWIpO1xuICB9XG5cbiAgdGFiU2VsZWN0ZWQodGFiOiBNZGxMYXlvdXRUYWJQYW5lbENvbXBvbmVudCk6IHZvaWQge1xuICAgIHRoaXMubGF5b3V0TWVkaWF0b3JTZXJ2aWNlLnRhYlNlbGVjdGVkKHRhYik7XG4gIH1cbn1cbiJdfQ==