@angular-mdl/core
Version:
Angular components, directives and styles based on material design lite https://getmdl.io.
1,094 lines (1,076 loc) • 298 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, NgModule, Injectable, QueryList, Component, ViewEncapsulation, HostBinding, HostListener, ContentChild, ContentChildren, InjectionToken, Optional, Inject, EventEmitter, Output, forwardRef, ChangeDetectionStrategy, ViewChildren, ViewContainerRef, ViewChild, Injector, TemplateRef } from '@angular/core';
import { Subject, BehaviorSubject } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@angular/platform-browser';
import * as i1$2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { take, filter } from 'rxjs/operators';
class AppendViewContainerRefDirective {
constructor(viewRef, renderer) {
this.viewRef = viewRef;
this.renderer = renderer;
}
ngAfterViewInit() {
var _a;
this.renderer.appendChild(this.viewRef.element.nativeElement, (_a = this.viewContainerRefToAppend) === null || _a === void 0 ? void 0 : _a.element.nativeElement);
}
}
AppendViewContainerRefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AppendViewContainerRefDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
AppendViewContainerRefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: AppendViewContainerRefDirective, selector: "[append-view-container-ref]", inputs: { viewContainerRefToAppend: ["append-view-container-ref", "viewContainerRefToAppend"] }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AppendViewContainerRefDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "[append-view-container-ref]",
}]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { viewContainerRefToAppend: [{
type: Input,
args: ["append-view-container-ref"]
}] } });
class NativeWebAnimationPlayer {
constructor(element, keyframes, duration, easing) {
this.element = element;
this.keyframes = keyframes;
this.duration = duration;
this.easing = easing;
this.onDoneCallback = [];
}
onDone(fn) {
this.onDoneCallback.push(fn);
}
play() {
const animation = this.element.animate(this.keyframes, {
duration: this.duration,
easing: this.easing,
fill: "forwards",
});
animation.addEventListener("finish", () => this.onDoneCallback.forEach((fn) => fn()));
}
}
class NoopAnimationPlayer {
constructor() {
this.onDoneCallback = [];
}
onDone(fn) {
this.onDoneCallback.push(fn);
}
play() {
this.onDoneCallback.forEach((fn) => fn());
}
}
class Animations {
}
class NativeWebAnimations {
animate(element, keyframes, duration, easing) {
return new NativeWebAnimationPlayer(element, keyframes, duration, easing);
}
}
class NoopWebAnimations {
animate() {
return new NoopAnimationPlayer();
}
}
const toBoolean = (value) => value != null && `${value}` !== "false";
/**
* Wrapper for mdl error messages.
*/
class MdlError extends Error {
constructor(value) {
/* istanbul ignore next */
super(value);
}
}
class MdlStructureError extends MdlError {
constructor(child, requiredParent) {
/* istanbul ignore next */
super(`"${child}" requires "${requiredParent}" as a parent.`);
}
}
const callNative = (el, method, arg = null // eslint-disable-line @typescript-eslint/no-explicit-any
) => {
/* istanbul ignore next */ // if this code runs in browser this is allways true!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (el[method]) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
el[method](arg);
}
};
/* istanbul ignore next */
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => { };
const toNumber = (value) => {
if (typeof value === "undefined") {
return null;
}
else if (typeof value === "string") {
return parseInt(value, 10);
}
return value;
};
// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
function isWebAnimationsSupported() {
return (typeof Element !== "undefined" &&
typeof Element.prototype.animate === "function");
}
// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
function instantiateSupportedAnimationDriver() {
/* istanbul ignore next */
if (isWebAnimationsSupported()) {
return new NativeWebAnimations();
}
/* istanbul ignore next */
return new NoopWebAnimations();
}
class MdlCommonsModule {
}
MdlCommonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlCommonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MdlCommonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: MdlCommonsModule, declarations: [AppendViewContainerRefDirective], exports: [AppendViewContainerRefDirective] });
MdlCommonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlCommonsModule, providers: [
{ provide: Animations, useFactory: instantiateSupportedAnimationDriver },
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlCommonsModule, decorators: [{
type: NgModule,
args: [{
imports: [],
exports: [AppendViewContainerRefDirective],
declarations: [AppendViewContainerRefDirective],
providers: [
{ provide: Animations, useFactory: instantiateSupportedAnimationDriver },
],
}]
}] });
class MdlLayoutMediatorService {
constructor() {
this.tabMouseoverSubject = new Subject();
this.tabMouseoutSubject = new Subject();
this.tabSelectedSubject = new Subject();
}
onTabMouseover() {
return this.tabMouseoverSubject.asObservable();
}
tabMouseover(tab) {
this.tabMouseoverSubject.next(tab);
}
onTabMouseOut() {
return this.tabMouseoutSubject.asObservable();
}
tabMouseout(tab) {
this.tabMouseoutSubject.next(tab);
}
onTabSelected() {
return this.tabSelectedSubject.asObservable();
}
tabSelected(tab) {
this.tabSelectedSubject.next(tab);
}
}
MdlLayoutMediatorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutMediatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
MdlLayoutMediatorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutMediatorService, providedIn: "root" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutMediatorService, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}] });
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* eslint-disable */
/* istanbul ignore file */
// @ts-nocheck
"use strict";
/**
* Class constructor for Ripple MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
*/
function MaterialRipple(renderer, element) {
this.renderer_ = renderer;
this.element_ = element;
// Initialize instance.
this.init();
}
/**
* Store constants in one place so they can be updated easily.
*/
MaterialRipple.prototype.Constant_ = {
INITIAL_SCALE: "scale(0.0001, 0.0001)",
INITIAL_SIZE: "1px",
INITIAL_OPACITY: "0.4",
FINAL_OPACITY: "0",
FINAL_SCALE: "",
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*/
MaterialRipple.prototype.CssClasses_ = {
RIPPLE_CENTER: "mdl-ripple--center",
RIPPLE_EFFECT_IGNORE_EVENTS: "mdl-js-ripple-effect--ignore-events",
RIPPLE: "mdl-ripple",
IS_ANIMATING: "is-animating",
IS_VISIBLE: "is-visible",
};
/**
* Handle mouse / finger down on element.
*
*/
// eslint-disable-next-line
MaterialRipple.prototype.downHandler_ = function (event) {
if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) {
const rect = this.element_.getBoundingClientRect();
this.boundHeight = rect.height;
this.boundWidth = rect.width;
this.rippleSize_ =
Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 2 + 2;
this.rippleElement_.style.width = this.rippleSize_ + "px";
this.rippleElement_.style.height = this.rippleSize_ + "px";
}
this.renderer_.addClass(this.rippleElement_, this.CssClasses_.IS_VISIBLE);
if (event.type === "mousedown" && this.ignoringMouseDown_) {
this.ignoringMouseDown_ = false;
}
else {
if (event.type === "touchstart") {
this.ignoringMouseDown_ = true;
}
const frameCount = this.getFrameCount();
if (frameCount > 0) {
return;
}
this.setFrameCount(1);
const bound = event.currentTarget.getBoundingClientRect();
let x;
let y;
// Check if we are handling a keyboard click.
if (event.clientX === 0 && event.clientY === 0) {
x = Math.round(bound.width / 2);
y = Math.round(bound.height / 2);
}
else {
const clientX = event.clientX !== undefined ? event.clientX : event.touches[0].clientX;
const clientY = event.clientY !== undefined ? event.clientY : event.touches[0].clientY;
x = Math.round(clientX - bound.left);
y = Math.round(clientY - bound.top);
}
this.setRippleXY(x, y);
this.setRippleStyles(true);
window.requestAnimationFrame(this.animFrameHandler.bind(this));
}
};
/**
* Handle mouse / finger up on element.
*
*/
// eslint-disable-next-line
MaterialRipple.prototype.upHandler_ = function (event) {
// Don't fire for the artificial "mouseup" generated by a double-click.
if (event && event.detail !== 2) {
// Allow a repaint to occur before removing this class, so the animation
// shows for tap events, which seem to trigger a mouseup too soon after
// mousedown.
// eslint-disable-next-line
setTimeout(function () {
this.renderer_.removeClass(this.rippleElement_, this.CssClasses_.IS_VISIBLE);
}.bind(this), 0);
}
};
/**
* Initialize element.
*/
// eslint-disable-next-line
MaterialRipple.prototype.init = function () {
if (this.element_) {
const recentering = this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER);
if (!this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)) {
this.rippleElement_ = this.element_.querySelector("." + this.CssClasses_.RIPPLE);
this.frameCount_ = 0;
this.rippleSize_ = 0;
this.x_ = 0;
this.y_ = 0;
// Touch start produces a compat mouse down event, which would cause a
// second ripples. To avoid that, we use this property to ignore the first
// mouse down after a touch start.
this.ignoringMouseDown_ = false;
this.boundDownHandler = this.downHandler_.bind(this);
this.element_.addEventListener("mousedown", this.boundDownHandler);
this.element_.addEventListener("touchstart", this.boundDownHandler);
this.boundUpHandler = this.upHandler_.bind(this);
this.element_.addEventListener("mouseup", this.boundUpHandler);
this.element_.addEventListener("mouseleave", this.boundUpHandler);
this.element_.addEventListener("touchend", this.boundUpHandler);
this.element_.addEventListener("blur", this.boundUpHandler);
// eslint-disable-next-line
this.getFrameCount = function () {
return this.frameCount_;
};
// eslint-disable-next-line
this.setFrameCount = function (fC) {
this.frameCount_ = fC;
};
// eslint-disable-next-line
this.getRippleElement = function () {
return this.rippleElement_;
};
// eslint-disable-next-line
this.setRippleXY = function (newX, newY) {
this.x_ = newX;
this.y_ = newY;
};
// eslint-disable-next-line
this.setRippleStyles = function (start) {
if (this.rippleElement_ !== null) {
let transformString;
let scale;
let size;
let offset = "translate(" + this.x_ + "px, " + this.y_ + "px)";
if (start) {
scale = this.Constant_.INITIAL_SCALE;
size = this.Constant_.INITIAL_SIZE;
}
else {
scale = this.Constant_.FINAL_SCALE;
size = this.rippleSize_ + "px";
if (recentering) {
offset =
"translate(" +
this.boundWidth / 2 +
"px, " +
this.boundHeight / 2 +
"px)";
}
}
transformString = "translate(-50%, -50%) " + offset + scale;
this.rippleElement_.style.webkitTransform = transformString;
this.rippleElement_.style.msTransform = transformString;
this.rippleElement_.style.transform = transformString;
if (start) {
this.renderer_.removeClass(this.rippleElement_, this.CssClasses_.IS_ANIMATING);
}
else {
this.renderer_.addClass(this.rippleElement_, this.CssClasses_.IS_ANIMATING);
}
}
};
/**
* Handles an animation frame.
*/
// eslint-disable-next-line
this.animFrameHandler = function () {
if (this.frameCount_-- > 0) {
window.requestAnimationFrame(this.animFrameHandler.bind(this));
}
else {
this.setRippleStyles(false);
}
};
}
}
};
const RIPPLE = "mdl-ripple";
// known bugs: https://github.com/google/material-design-lite/issues/4215
class MdlRippleDirective {
constructor(elementRef, renderer, cssContainerClasses) {
this.elementRef = elementRef;
this.renderer = renderer;
this.cssContainerClasses = cssContainerClasses;
this.rippleActive = true;
this.el = elementRef.nativeElement;
}
ngOnChanges() {
var _a;
// remove any existing ripple container
if (this.rippleContainer) {
this.el.removeChild(this.rippleContainer);
delete this.rippleContainer;
delete this.ripple;
}
// if used as mdl-ripple without property binding it is an empty string
// otherwise (e.g. [mdl-ripple] it is a boolean - may be with the default value true.
if (this.rippleActive === "" || this.rippleActive) {
this.rippleContainer = this.renderer.createElement("span");
this.cssContainerClasses.forEach((cssClass) => {
this.renderer.addClass(this.rippleContainer, cssClass);
});
const rippleElement = this.renderer.createElement("span");
this.renderer.addClass(rippleElement, RIPPLE);
(_a = this.rippleContainer) === null || _a === void 0 ? void 0 : _a.appendChild(rippleElement);
if (this.rippleContainer) {
this.el.appendChild(this.rippleContainer);
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this.ripple = new MaterialRipple(this.renderer, this.el);
}
}
}
MdlRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlRippleDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
MdlRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlRippleDirective, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlRippleDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined }]; } });
class MdlButtonRippleDirective extends MdlRippleDirective {
constructor(elementRef, renderer) {
super(elementRef, renderer, ["mdl-button__ripple-container"]);
// eslint-disable-next-line
this.rippleActive = true;
}
}
MdlButtonRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlButtonRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
MdlButtonRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlButtonRippleDirective, selector: "mdl-button[mdl-ripple], button[mdl-ripple]", inputs: { rippleActive: ["mdl-ripple", "rippleActive"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlButtonRippleDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "mdl-button[mdl-ripple], button[mdl-ripple]",
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rippleActive: [{
type: Input,
args: ["mdl-ripple"]
}] } });
class MdlCheckboxRippleDirective extends MdlRippleDirective {
constructor(elementRef, renderer) {
super(elementRef, renderer, [
"mdl-checkbox__ripple-container",
"mdl-ripple--center",
]);
// eslint-disable-next-line
this.rippleActive = true;
}
}
MdlCheckboxRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlCheckboxRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
MdlCheckboxRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlCheckboxRippleDirective, selector: "mdl-checkbox[mdl-ripple]", inputs: { rippleActive: ["mdl-ripple", "rippleActive"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlCheckboxRippleDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "mdl-checkbox[mdl-ripple]",
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rippleActive: [{
type: Input,
args: ["mdl-ripple"]
}] } });
class MdlRadioRippleDirective extends MdlRippleDirective {
constructor(elementRef, renderer) {
super(elementRef, renderer, [
"mdl-radio__ripple-container",
"mdl-ripple--center",
]);
// eslint-disable-next-line
this.rippleActive = true;
}
}
MdlRadioRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlRadioRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
MdlRadioRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlRadioRippleDirective, selector: "mdl-radio[mdl-ripple]", inputs: { rippleActive: ["mdl-ripple", "rippleActive"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlRadioRippleDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "mdl-radio[mdl-ripple]",
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rippleActive: [{
type: Input,
args: ["mdl-ripple"]
}] } });
class MdlIconToggleRippleDirective extends MdlRippleDirective {
constructor(elementRef, renderer) {
super(elementRef, renderer, [
"mdl-icon-toggle__ripple-container",
"mdl-ripple--center",
]);
// eslint-disable-next-line
this.rippleActive = true;
}
}
MdlIconToggleRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlIconToggleRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
MdlIconToggleRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlIconToggleRippleDirective, selector: "mdl-icon-toggle[mdl-ripple]", inputs: { rippleActive: ["mdl-ripple", "rippleActive"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlIconToggleRippleDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "mdl-icon-toggle[mdl-ripple]",
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rippleActive: [{
type: Input,
args: ["mdl-ripple"]
}] } });
class MdlSwitchRippleDirective extends MdlRippleDirective {
constructor(elementRef, renderer) {
super(elementRef, renderer, [
"mdl-switch__ripple-container",
"mdl-ripple--center",
]);
// eslint-disable-next-line
this.rippleActive = true;
}
}
MdlSwitchRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlSwitchRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
MdlSwitchRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlSwitchRippleDirective, selector: "mdl-switch[mdl-ripple]", inputs: { rippleActive: ["mdl-ripple", "rippleActive"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlSwitchRippleDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "mdl-switch[mdl-ripple]",
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rippleActive: [{
type: Input,
args: ["mdl-ripple"]
}] } });
class MdlMenuItemRippleDirective extends MdlRippleDirective {
constructor(elementRef, renderer) {
super(elementRef, renderer, ["mdl-menu__item--ripple-container"]);
// eslint-disable-next-line
this.rippleActive = true;
}
}
MdlMenuItemRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlMenuItemRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
MdlMenuItemRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlMenuItemRippleDirective, selector: "mdl-menu-item[mdl-ripple]", inputs: { rippleActive: ["mdl-ripple", "rippleActive"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlMenuItemRippleDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "mdl-menu-item[mdl-ripple]",
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rippleActive: [{
type: Input,
args: ["mdl-ripple"]
}] } });
class MdlAnchorRippleDirective extends MdlRippleDirective {
constructor(elementRef, renderer) {
super(elementRef, renderer, [
"mdl-tabs__ripple-container",
"mdl-layout__tab-ripple-container",
]);
// eslint-disable-next-line
this.rippleActive = true;
}
}
MdlAnchorRippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlAnchorRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
MdlAnchorRippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MdlAnchorRippleDirective, selector: "a[mdl-ripple],div[mdl-ripple]", inputs: { rippleActive: ["mdl-ripple", "rippleActive"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlAnchorRippleDirective, decorators: [{
type: Directive,
args: [{
// eslint-disable-next-line
selector: "a[mdl-ripple],div[mdl-ripple]",
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rippleActive: [{
type: Input,
args: ["mdl-ripple"]
}] } });
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: 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: AppendViewContainerRefDirective, selector: "[append-view-container-ref]", inputs: ["append-view-container-ref"] }, { kind: "directive", type: MdlAnchorRippleDirective, selector: "a[mdl-ripple],div[mdl-ripple]", inputs: ["mdl-ripple"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: 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"]
}] } });
class MdlLayoutDrawerComponent {
constructor() {
this.isDrawer = true;
this.isDrawerVisible = false;
}
}
MdlLayoutDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MdlLayoutDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlLayoutDrawerComponent, selector: "mdl-layout-drawer", host: { properties: { "class.mdl-layout__drawer": "this.isDrawer", "class.is-visible": "this.isDrawerVisible" } }, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutDrawerComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-layout-drawer",
template: ` <ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
}]
}], propDecorators: { isDrawer: [{
type: HostBinding,
args: ["class.mdl-layout__drawer"]
}], isDrawerVisible: [{
type: HostBinding,
args: ["class.is-visible"]
}] } });
class MdlTabPanelTitleComponent {
constructor(vcRef) {
this.vcRef = vcRef;
}
}
MdlTabPanelTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlTabPanelTitleComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
MdlTabPanelTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlTabPanelTitleComponent, selector: "mdl-tab-panel-title", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlTabPanelTitleComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-tab-panel-title",
template: ` <ng-content></ng-content> `,
encapsulation: ViewEncapsulation.None,
}]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
class MdlLayoutTabPanelComponent {
constructor() {
this.isLayoutTabPanel = true;
this.isActive = false;
}
}
MdlLayoutTabPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MdlLayoutTabPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlLayoutTabPanelComponent, selector: "mdl-layout-tab-panel", inputs: { title: ["mdl-layout-tab-panel-title", "title"] }, host: { properties: { "class.mdl-layout__tab-panel": "this.isLayoutTabPanel", "class.is-active": "this.isActive" } }, queries: [{ propertyName: "titleComponent", first: true, predicate: MdlTabPanelTitleComponent, descendants: true, static: true }], ngImport: i0, template: `
<ng-content
*ngIf="titleComponent"
select="mdl-tab-panel-content"
></ng-content>
<ng-content *ngIf="!titleComponent"></ng-content>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutTabPanelComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-layout-tab-panel",
template: `
<ng-content
*ngIf="titleComponent"
select="mdl-tab-panel-content"
></ng-content>
<ng-content *ngIf="!titleComponent"></ng-content>
`,
encapsulation: ViewEncapsulation.None,
}]
}], propDecorators: { titleComponent: [{
type: ContentChild,
args: [MdlTabPanelTitleComponent, { static: true }]
}], title: [{
type: Input,
args: ["mdl-layout-tab-panel-title"]
}], isLayoutTabPanel: [{
type: HostBinding,
args: ["class.mdl-layout__tab-panel"]
}], isActive: [{
type: HostBinding,
args: ["class.is-active"]
}] } });
class MdlLayoutContentComponent {
constructor(elRef) {
this.elRef = elRef;
this.isContent = true;
this.tabs = new QueryList();
this.el = elRef.nativeElement;
}
}
MdlLayoutContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
MdlLayoutContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlLayoutContentComponent, selector: "mdl-layout-content", host: { properties: { "class.mdl-layout__content": "this.isContent" } }, queries: [{ propertyName: "tabs", predicate: MdlLayoutTabPanelComponent }], ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlLayoutContentComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-layout-content",
template: ` <ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isContent: [{
type: HostBinding,
args: ["class.mdl-layout__content"]
}], tabs: [{
type: ContentChildren,
args: [MdlLayoutTabPanelComponent]
}] } });
class MdlIconComponent {
constructor() {
this.isMatIcon = true;
}
}
MdlIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MdlIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlIconComponent, selector: "mdl-icon", host: { properties: { "class.material-icons": "this.isMatIcon" } }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlIconComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-icon",
template: "<ng-content></ng-content>",
encapsulation: ViewEncapsulation.None,
}]
}], propDecorators: { isMatIcon: [{
type: HostBinding,
args: ["class.material-icons"]
}] } });
const ESCAPE = 27;
const STANDARD = "standard";
const WATERFALL = "waterfall";
const SCROLL = "scroll";
/**
* The LAYOUT_SCREEN_SIZE_THRESHOLD can be changed at the root module. Just provide a value for this InjectionToken:
*
* providers: [
* {provide:LAYOUT_SCREEN_SIZE_THRESHOLD, useValue: 768 }
* ]
*
* you also need to change the scss variable to the same value: $layout-screen-size-threshold: 768px.
*
* It should be clear that this can only be used if you are using the scss and not the pre compiled css from getmdl.io.
*
*/
const LAYOUT_SCREEN_SIZE_THRESHOLD = new InjectionToken("layoutScreenSizeThreshold");
class MdLUnsupportedLayoutTypeError extends MdlError {
constructor(type) {
/* istanbul ignore next */
super(`Layout type "${type}" isn't supported by mdl-layout (allowed: standard, waterfall, scroll).`);
}
}
class MdlScreenSizeService {
constructor(ngZone, layoutScreenSizeThreshold) {
this.layoutScreenSizeThreshold = layoutScreenSizeThreshold;
this.sizesSubject = new BehaviorSubject(false);
this.windowMediaQueryListener = null;
// if no value is injected the default size wil be used. same as $layout-screen-size-threshold in scss
if (!this.layoutScreenSizeThreshold) {
this.layoutScreenSizeThreshold = 1024;
}
// do not try to access the window object if rendered on the server
if (typeof window === "object" && "matchMedia" in window) {
const query = window.matchMedia(`(max-width: ${this.layoutScreenSizeThreshold}px)`);
const queryListener = () => {
ngZone.run(() => {
this.sizesSubject.next(query.matches);
});
};
// - addEventListener not working in Safari
// eslint-disable-next-line
query.addListener(queryListener);
this.windowMediaQueryListener = () => {
// eslint-disable-next-line
query.removeListener(queryListener);
};
// set the initial state
this.sizesSubject.next(query.matches);
}
}
isSmallScreen() {
return this.sizesSubject.value;
}
sizes() {
return this.sizesSubject.asObservable();
}
destroy() {
if (this.windowMediaQueryListener) {
this.windowMediaQueryListener();
this.windowMediaQueryListener = null;
}
}
}
MdlScreenSizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlScreenSizeService, deps: [{ token: i0.NgZone }, { token: LAYOUT_SCREEN_SIZE_THRESHOLD, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
MdlScreenSizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlScreenSizeService, providedIn: "root" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlScreenSizeService, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}], ctorParameters: function () {
return [{ type: i0.NgZone }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [LAYOUT_SCREEN_SIZE_THRESHOLD]
}] }];
} });
class MdlLayoutComponent {
constructor(renderer, evm, el, screenSizeService, layoutMediatorService) {
this.renderer = renderer;
this.evm = evm;
this.el = el;
this.screenSizeService = screenSizeService;
this.layoutMediatorService = layoutMediatorService;
// will be set to undefined, if not a direct child or not present in 2.0.0 i
// n 2.0.1 it is now the grand child drawer again :(
this.drawers = new QueryList();
// eslint-disable-next-line
this.mode = STANDARD;
// eslint-disable-next-line
this.selectedTabEmitter = new EventEmitter();
// eslint-disable-next-line
this.mouseoverTabEmitter = new EventEmitter();
// eslint-disable-next-line
this.mouseoutTabEmitter = new EventEmitter();
// eslint-disable-next-line
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
this.onOpen = new EventEmitter();
// eslint-disable-next-line
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
this.onClose = new EventEmitter();
this.isDrawerVisible = false;
this.isSmallScreen = false;
this.isFixedDrawerIntern = false;
this.isFixedHeaderIntern = false;
this.isSeamedIntern = false;
this.selectedIndexIntern = 0;
this.isNoDrawerIntern = false;
this.subscriptions = [];
}
get isFixedDrawer() {
return this.isFixedDrawerIntern;
}
set isFixedDrawer(value) {
this.isFixedDrawerIntern = toBoolean(value);
}
get isFixedHeader() {
return this.isFixedHeaderIntern;
}
set isFixedHeader(value) {
this.isFixedHeaderIntern = toBoolean(value);
}
get isSeamed() {
return this.isSeamedIntern;
}
set isSeamed(value) {
this.isSeamedIntern = toBoolean(value);
}
get selectedIndex() {
return this.selectedIndexIntern ? this.selectedIndexIntern : 0;
}
set selectedIndex(value) {
this.selectedIndexIntern = toNumber(value);
}
get isNoDrawer() {
return this.isNoDrawerIntern;
}
set isNoDrawer(value) {
this.isNoDrawerIntern = toBoolean(value);
}
ngAfterContentInit() {
this.validateMode();
if (this.header && this.content && this.content.tabs) {
this.header.tabs = this.content.tabs;
this.updateSelectedTabIndex();
}
if (this.header && this.header.tabs) {
this.subscriptions.push(this.layoutMediatorService
.onTabMouseOut()
.subscribe((tab) => {
this.onTabMouseout(tab);
}));
this.subscriptions.push(this.layoutMediatorService
.onTabMouseover()
.subscribe((tab) => {
this.onTabMouseover(tab);
}));
this.subscriptions.push(this.layoutMediatorService
.onTabSelected()
.subscribe((tab) => {
this.tabSelected(tab);
}));
}
}
ngOnChanges(changes) {
if (changes["selectedIndex"]) {
this.updateSelectedTabIndex();
}
}
toggleDrawer() {
this.isDrawerVisible = !this.isDrawerVisible;
if (this.drawers && this.drawers.length > 0) {
this.setDrawerVisible(this.isDrawerVisible);
}
}
closeDrawer() {
this.isDrawerVisible = false;
if (this.drawers && this.drawers.length > 0) {
this.setDrawerVisible(false);
}
}
openDrawer() {
this.isDrawerVisible = true;
if (this.drawers && this.drawers.length > 0) {
this.setDrawerVisible(true);
}
}
obfuscatorKeyDown($event) {
if ($event.keyCode === ESCAPE) {
this.toggleDrawer();
}
}
ngOnDestroy() {
if (this.scrollListener) {
this.scrollListener();
this.scrollListener = undefined;
}
this.subscriptions.forEach((sub) => sub.unsubscribe());
}
closeDrawerOnSmallScreens() {
if (this.isSmallScreen && this.isDrawerVisible) {
this.closeDrawer();
}
}
openDrawerOnSmallScreens() {
if (this.isSmallScreen && !this.isDrawerVisible) {
this.openDrawer();
}
}
hasDrawer() {
return !!(this.drawers && this.drawers.length > 0);
}
tabSelected(tab) {
var _a;
const index = (_a = this.header) === null || _a === void 0 ? void 0 : _a.tabs.toArray().indexOf(tab);
if (index !== this.selectedIndex) {
this.selectedIndex = index;
this.updateSelectedTabIndex();
this.selectedTabEmitter.emit({ index: this.selectedIndex });
}
}
onTabMouseover(tab) {
var _a;
const index = (_a = this.header) === null || _a === void 0 ? void 0 : _a.tabs.toArray().indexOf(tab);
this.mouseoverTabEmitter.emit({ index });
}
onTabMouseout(tab) {
var _a;
const index = (_a = this.header) === null || _a === void 0 ? void 0 : _a.tabs.toArray().indexOf(tab);
this.mouseoutTabEmitter.emit({ index });
}
updateSelectedTabIndex() {
if (this.header && this.header.tabs) {
this.header.tabs.forEach((tab) => (tab.isActive = false));
if (this.header.tabs.toArray().length > 0 &&
this.selectedIndex < this.header.tabs.toArray().length &&
this.selectedIndex !== -1) {
this.header.tabs.toArray()[this.selectedIndex].isActiv