ngx-materialize
Version:
An Angular wrap around Materialize library
1,726 lines (1,664 loc) • 431 kB
JavaScript
import { Component, Input, NgModule, ApplicationRef, ComponentFactoryResolver, Injectable, Injector, ElementRef, Inject, Directive, Renderer, HostBinding, ChangeDetectorRef, ViewChild, EventEmitter, forwardRef, NgZone, Output, ContentChildren, Renderer2, Optional, PLATFORM_ID, HostListener, ViewContainerRef, ViewEncapsulation, ContentChild } from '@angular/core';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
import { interval, fromEvent, Observable } from 'rxjs';
import { first, skipWhile, map, publishReplay, refCount, startWith } from 'rxjs/operators';
import { animate, style, transition, trigger } from '@angular/animations';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzBadgeComponent {
}
MzBadgeComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-badge',
template: `<span #badge
class="badge {{ badgeClass }}"
[class.new]="new || !!badgeClass"
[attr.data-badge-caption]="caption">
{{ value }}
</span>
`,
styles: [``],
},] },
];
/** @nocollapse */
MzBadgeComponent.propDecorators = {
"badgeClass": [{ type: Input },],
"caption": [{ type: Input },],
"new": [{ type: Input },],
"value": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzBadgeModule {
}
MzBadgeModule.decorators = [
{ type: NgModule, args: [{
declarations: [MzBadgeComponent],
exports: [MzBadgeComponent],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
*/
class Handlers {
}
class HandlePropChanges {
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.handlers) {
this.executePropHandlers(changes);
}
}
/**
* @param {?=} props
* @return {?}
*/
executePropHandlers(props = this.handlers) {
Object.keys(props).forEach(prop => {
if (this.handlers[prop]) {
const /** @type {?} */ previousValue = (/** @type {?} */ (props[prop])).previousValue;
this.handlers[prop](previousValue);
}
});
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzInjectionService {
/**
* @param {?} applicationRef
* @param {?} componentFactoryResolver
* @param {?} injector
*/
constructor(applicationRef, componentFactoryResolver, injector) {
this.applicationRef = applicationRef;
this.componentFactoryResolver = componentFactoryResolver;
this.injector = injector;
}
/**
* Appends a component to an adjacent location.
* @template T
* @param {?} componentClass
* @param {?=} options
* @param {?=} location
* @return {?}
*/
appendComponent(componentClass, options = {}, location = this.getContainerElement()) {
// instantiate component to load
const /** @type {?} */ componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
const /** @type {?} */ componentRef = componentFactory.create(this.injector);
// project the options passed to the component instance
this.projectComponentInputs(componentRef, options);
// attach view for dirty checking
this.applicationRef.attachView(componentRef.hostView);
// detach view when component is destroyed
componentRef.onDestroy(() => {
this.applicationRef.detachView(componentRef.hostView);
});
// append component to location in the DOM where we want it to be rendered
const /** @type {?} */ componentRootNode = this.getComponentRootNode(componentRef);
location.appendChild(componentRootNode);
return componentRef;
}
/**
* Overrides the default container element.
* @param {?} container
* @return {?}
*/
setRootViewContainer(container) {
this.container = container;
}
/**
* Gets the html element for a component ref.
* @param {?} componentRef
* @return {?}
*/
getComponentRootNode(componentRef) {
return /** @type {?} */ ((/** @type {?} */ (componentRef.hostView)).rootNodes[0]);
}
/**
* Gets the container element.
* @return {?}
*/
getContainerElement() {
return this.container || document.body;
}
/**
* Projects the inputs onto the component.
* @template T
* @param {?} component
* @param {?} options
* @return {?}
*/
projectComponentInputs(component, options) {
if (options) {
const /** @type {?} */ props = Object.getOwnPropertyNames(options);
for (const /** @type {?} */ prop of props) {
component.instance[prop] = options[prop];
}
}
return component;
}
}
MzInjectionService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
MzInjectionService.ctorParameters = () => [
{ type: ApplicationRef, },
{ type: ComponentFactoryResolver, },
{ type: Injector, },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzInjectionModule {
}
MzInjectionModule.decorators = [
{ type: NgModule, args: [{
providers: [MzInjectionService],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
*/
class MzRemoveComponentHost {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.childrenElement = [];
}
/**
* @return {?}
*/
ngAfterViewInit() {
const /** @type {?} */ hostElement = this.elementRef.nativeElement;
this.parentElement = hostElement.parentElement;
// move child out of the host element
while (hostElement.firstChild) {
this.childrenElement.push(this.parentElement.insertBefore(hostElement.firstChild, hostElement));
}
}
/**
* @return {?}
*/
ngOnDestroy() {
// remove moved out element
this.childrenElement.forEach(childElement => this.parentElement.removeChild(childElement));
}
}
/** @nocollapse */
MzRemoveComponentHost.ctorParameters = () => [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] },] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzButtonDirective extends HandlePropChanges {
/**
* @param {?} elementRef
* @param {?} renderer
*/
constructor(elementRef, renderer) {
super();
this.elementRef = elementRef;
this.renderer = renderer;
}
/**
* @return {?}
*/
ngOnInit() {
this.initHandlers();
this.initMaterialize();
super.executePropHandlers();
}
/**
* @return {?}
*/
initHandlers() {
this.handlers = {
disabled: () => this.handleDisabled(),
flat: () => this.handleFlat(),
float: () => this.handleFloat(),
large: () => this.handleLarge(),
noWaves: () => this.handleNoWaves(),
};
}
/**
* @return {?}
*/
initMaterialize() {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn', true);
}
/**
* @return {?}
*/
handleDisabled() {
this.renderer.setElementClass(this.elementRef.nativeElement, 'disabled', this.disabled);
}
/**
* @return {?}
*/
handleFlat() {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn', !this.flat);
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn-flat', this.flat);
}
/**
* @return {?}
*/
handleFloat() {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn-floating', this.float);
}
/**
* @return {?}
*/
handleLarge() {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn-large', this.large);
}
/**
* @return {?}
*/
handleNoWaves() {
this.renderer.setElementClass(this.elementRef.nativeElement, 'waves-effect', !this.noWaves);
if (!this.flat) {
this.renderer.setElementClass(this.elementRef.nativeElement, 'waves-light', !this.noWaves);
}
}
}
MzButtonDirective.decorators = [
{ type: Directive, args: [{
selector: `
a[mz-button],
a[mzButton],
button[mz-button],
button[mzButton]`,
},] },
];
/** @nocollapse */
MzButtonDirective.ctorParameters = () => [
{ type: ElementRef, },
{ type: Renderer, },
];
MzButtonDirective.propDecorators = {
"disabled": [{ type: Input },],
"flat": [{ type: Input },],
"float": [{ type: Input },],
"large": [{ type: Input },],
"noWaves": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzButtonModule {
}
MzButtonModule.decorators = [
{ type: NgModule, args: [{
declarations: [MzButtonDirective],
exports: [MzButtonDirective],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzHalfwayFabDirective {
}
MzHalfwayFabDirective.decorators = [
{ type: Directive, args: [{
selector: `
a[mz-halfway-fab],
a[mzHalfwayFab],
button[mz-halfway-fab],
button[mzHalfwayFab]`,
},] },
];
/** @nocollapse */
MzHalfwayFabDirective.propDecorators = {
"true": [{ type: HostBinding, args: ['class.halfway-fab',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzHalfwayFabModule {
}
MzHalfwayFabModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [
MzHalfwayFabDirective,
],
exports: [
MzHalfwayFabDirective,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCardComponent {
/**
* @param {?} changeDetectorRef
*/
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.hasCardAction = true;
this.hasCardImage = true;
this.hasCardImageTitle = true;
this.hasCardTitle = true;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.hasCardTitle = this.hasTitleTagAndNotEmpty();
this.hasCardAction = this.hasActionTagAndNotEmpty();
this.hasCardImage = this.hasImageTagAndNotEmpty();
this.hasCardImageTitle = this.hasImageTitleTagAndNotEmpty();
this.changeDetectorRef.detectChanges();
}
/**
* @return {?}
*/
hasActionTagAndNotEmpty() {
const /** @type {?} */ cardActionElement = this.cardAction.nativeElement.querySelector('mz-card-action');
return this.isElementDisplayed(cardActionElement);
}
/**
* @return {?}
*/
hasImageTagAndNotEmpty() {
const /** @type {?} */ cardImagelement = this.cardImage.nativeElement.querySelector('mz-card-image');
return this.isElementDisplayed(cardImagelement);
}
/**
* @return {?}
*/
hasImageTitleTagAndNotEmpty() {
const /** @type {?} */ cardImageTitleElement = this.cardImage.nativeElement.querySelector('mz-card-image-title');
return this.isElementDisplayed(cardImageTitleElement);
}
/**
* @return {?}
*/
hasTitleTagAndNotEmpty() {
const /** @type {?} */ cardTitleElement = this.cardTitle ? this.cardTitle.nativeElement.querySelector('mz-card-title') : null;
return this.isElementDisplayed(cardTitleElement);
}
/**
* @param {?} element
* @return {?}
*/
isElementDisplayed(element) {
return element && element.innerHTML.trim() !== '';
}
}
MzCardComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-card',
template: `<div #cardImage class="card-image" *ngIf="hasCardImage">
<ng-content select="mz-card-image"></ng-content>
<div class="card-title" *ngIf="hasCardImageTitle">
<ng-content select="mz-card-image-title"></ng-content>
</div>
</div>
<div [class.card-stacked]="horizontal">
<div class="card-content">
<div #cardTitle class="card-title" *ngIf="hasCardTitle">
<ng-content select="mz-card-title"></ng-content>
</div>
<ng-content select="mz-card-content"></ng-content>
</div>
<div #cardAction class="card-action" *ngIf="hasCardAction">
<ng-content select="mz-card-action"></ng-content>
</div>
</div>`,
styles: [`:host{display:block}`],
},] },
];
/** @nocollapse */
MzCardComponent.ctorParameters = () => [
{ type: ChangeDetectorRef, },
];
MzCardComponent.propDecorators = {
"true": [{ type: HostBinding, args: ['class.card',] },],
"horizontal": [{ type: HostBinding, args: ['class.horizontal',] }, { type: Input },],
"hoverable": [{ type: HostBinding, args: ['class.hoverable',] }, { type: Input },],
"cardAction": [{ type: ViewChild, args: ['cardAction',] },],
"cardImage": [{ type: ViewChild, args: ['cardImage',] },],
"cardTitle": [{ type: ViewChild, args: ['cardTitle',] },],
};
class MzCardImageDirective {
}
MzCardImageDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-image' },] },
];
class MzCardImageTitleDirective {
}
MzCardImageTitleDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-image-title' },] },
];
class MzCardTitleDirective {
}
MzCardTitleDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-title' },] },
];
class MzCardContentDirective {
}
MzCardContentDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-content' },] },
];
class MzCardActionDirective {
}
MzCardActionDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-action' },] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCardModule {
}
MzCardModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MzHalfwayFabModule,
],
declarations: [
MzCardActionDirective,
MzCardComponent,
MzCardContentDirective,
MzCardImageDirective,
MzCardImageTitleDirective,
MzCardTitleDirective,
],
exports: [
MzCardActionDirective,
MzCardComponent,
MzCardContentDirective,
MzCardImageDirective,
MzCardImageTitleDirective,
MzCardTitleDirective,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCheckboxContainerComponent {
}
MzCheckboxContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-checkbox-container',
template: `<p class="checkbox-field">
<ng-content></ng-content>
</p>`,
styles: [``],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCheckboxDirective extends HandlePropChanges {
/**
* @param {?} elementRef
* @param {?} renderer
*/
constructor(elementRef, renderer) {
super();
this.elementRef = elementRef;
this.renderer = renderer;
}
/**
* @return {?}
*/
ngOnInit() {
this.initHandlers();
this.initElements();
this.handleProperties();
}
/**
* @return {?}
*/
initHandlers() {
this.handlers = {
filledIn: () => this.handleFilledIn(),
label: () => this.handleLabel(),
};
}
/**
* @return {?}
*/
initElements() {
this.checkboxElement = $(this.elementRef.nativeElement);
this.checkboxContainerElement = $(this.elementRef.nativeElement).parent('.checkbox-field');
this.labelElement = this.createLabelElement();
}
/**
* @return {?}
*/
createLabelElement() {
const /** @type {?} */ labelElement = document.createElement('label');
labelElement.setAttribute('for', this.id);
this.renderer.invokeElementMethod(this.checkboxElement, 'after', [labelElement]);
return $(labelElement);
}
/**
* @return {?}
*/
handleProperties() {
if (this.checkboxContainerElement.length === 0) {
console.error('Input with mz-checkbox directive must be placed inside a [mz-checkbox-container] tag', this.checkboxElement);
return;
}
super.executePropHandlers();
}
/**
* @return {?}
*/
handleLabel() {
this.renderer.invokeElementMethod(this.labelElement, 'text', [this.label]);
}
/**
* @return {?}
*/
handleFilledIn() {
this.renderer.setElementClass(this.checkboxElement[0], 'filled-in', this.filledIn);
}
}
MzCheckboxDirective.decorators = [
{ type: Directive, args: [{
selector: 'input[mzCheckbox], input[mz-checkbox]',
},] },
];
/** @nocollapse */
MzCheckboxDirective.ctorParameters = () => [
{ type: ElementRef, },
{ type: Renderer, },
];
MzCheckboxDirective.propDecorators = {
"id": [{ type: HostBinding }, { type: Input },],
"filledIn": [{ type: Input },],
"label": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCheckboxModule {
}
MzCheckboxModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzCheckboxDirective,
MzCheckboxContainerComponent,
],
exports: [
MzCheckboxDirective,
MzCheckboxContainerComponent,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzChipInputComponent {
/**
* @param {?} elementRef
* @param {?} zone
*/
constructor(elementRef, zone) {
this.elementRef = elementRef;
this.zone = zone;
this.add = new EventEmitter();
this.delete = new EventEmitter();
this.select = new EventEmitter();
this.onChangeCallback = (data) => { };
}
/**
* @return {?}
*/
get value() {
return /** @type {?} */ (this.chipInputElement.material_chip('data'));
}
/**
* @return {?}
*/
ngOnInit() {
this.initElements();
this.initMaterializeChip();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.chipInputElement.off('chip.add');
this.chipInputElement.off('chip.delete');
this.chipInputElement.off('chip.select');
}
/**
* @return {?}
*/
initElements() {
this.chipInputElement = $(this.elementRef.nativeElement);
}
/**
* @param {?=} value
* @return {?}
*/
initMaterializeChip(value) {
// fix issue autocomplete is not a function
// https://github.com/Dogfalo/materialize/issues/4401
this.zone.runOutsideAngular(() => {
setTimeout(() => {
this.chipInputElement.material_chip({
autocompleteOptions: this.autocompleteOptions,
data: value || this.value,
placeholder: this.placeholder,
secondaryPlaceholder: this.secondaryPlaceholder,
});
});
});
this.chipInputElement.on('chip.add', (event, chip) => {
this.onChangeCallback(this.value);
this.add.emit(chip);
});
this.chipInputElement.on('chip.delete', (event, chip) => {
this.onChangeCallback(this.value);
this.delete.emit(chip);
});
this.chipInputElement.on('chip.select', (event, chip) => {
this.select.emit(chip);
});
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
/**
* @param {?} isDisabled
* @return {?}
*/
setDisabledState(isDisabled) { }
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value && value !== this.value) {
this.initMaterializeChip(value);
}
}
}
MzChipInputComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-chip-input',
template: ``,
styles: [`:host{display:block}`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MzChipInputComponent),
multi: true,
},
],
},] },
];
/** @nocollapse */
MzChipInputComponent.ctorParameters = () => [
{ type: ElementRef, },
{ type: NgZone, },
];
MzChipInputComponent.propDecorators = {
"autocompleteOptions": [{ type: Input },],
"placeholder": [{ type: Input },],
"secondaryPlaceholder": [{ type: Input },],
"add": [{ type: Output },],
"delete": [{ type: Output },],
"select": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzChipComponent {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.chipClass = true;
this.close = false;
this.delete = new EventEmitter();
}
/**
* @return {?}
*/
get chipElement() {
return /** @type {?} */ (this.elementRef.nativeElement);
}
/**
* @return {?}
*/
onDelete() {
let /** @type {?} */ value = '';
for (let /** @type {?} */ i = 0; i < this.chipElement.childNodes.length; i++) {
if (this.chipElement.childNodes.item(i).nodeType === Node.TEXT_NODE) {
value += this.chipElement.childNodes.item(i).nodeValue;
}
}
this.delete.emit(value.trim());
}
}
MzChipComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-chip',
template: `<ng-content></ng-content>
<i class="close material-icons" (click)="onDelete()" *ngIf="close">close</i>`,
styles: [``],
},] },
];
/** @nocollapse */
MzChipComponent.ctorParameters = () => [
{ type: ElementRef, },
];
MzChipComponent.propDecorators = {
"chipClass": [{ type: HostBinding, args: ['class.chip',] },],
"close": [{ type: Input },],
"delete": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzChipModule {
}
MzChipModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [
MzChipComponent,
MzChipInputComponent,
],
exports: [
MzChipComponent,
MzChipInputComponent,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollapsibleItemComponent extends MzRemoveComponentHost {
}
MzCollapsibleItemComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collapsible-item',
template: `<li>
<div class="collapsible-header"
[class.active]="active"
>
<ng-content select="mz-collapsible-item-header"></ng-content>
</div>
<div class="collapsible-body">
<ng-content select="mz-collapsible-item-body"></ng-content>
</div>
</li>`,
styles: [``],
},] },
];
/** @nocollapse */
MzCollapsibleItemComponent.propDecorators = {
"active": [{ type: Input },],
};
class MzCollapsibleItemBodyDirective {
}
MzCollapsibleItemBodyDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-collapsible-item-body' },] },
];
class MzCollapsibleItemHeaderDirective {
}
MzCollapsibleItemHeaderDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-collapsible-item-header' },] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollapsibleComponent {
/**
* @param {?} renderer
*/
constructor(renderer) {
this.renderer = renderer;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.handleDataCollapsible();
this.initCollapsible();
}
/**
* @return {?}
*/
ngOnDestroy() {
$(this.collapsible.nativeElement).collapsible('destroy');
}
/**
* @param {?} collapsibleItemIndex
* @return {?}
*/
close(collapsibleItemIndex) {
$(this.collapsible.nativeElement).collapsible('close', collapsibleItemIndex);
}
/**
* @return {?}
*/
initCollapsible() {
const /** @type {?} */ options = {
accordion: false,
onClose: this.onClose,
onOpen: this.onOpen,
};
$(this.collapsible.nativeElement).collapsible(options);
}
/**
* @return {?}
*/
handleDataCollapsible() {
if (this.mode) {
this.renderer.setElementAttribute(this.collapsible.nativeElement, 'data-collapsible', this.mode);
}
}
/**
* @param {?} collapsibleItemIndex
* @return {?}
*/
open(collapsibleItemIndex) {
$(this.collapsible.nativeElement).collapsible('open', collapsibleItemIndex);
}
}
MzCollapsibleComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collapsible',
template: `<ul #collapsible
class="collapsible"
[class.popout]="popout"
[hidden]="items.length === 0"
>
<ng-content></ng-content>
</ul>`,
styles: [`/deep/ .collapsible-header{clear:both}/deep/ .collapsible-body{clear:both}`],
},] },
];
/** @nocollapse */
MzCollapsibleComponent.ctorParameters = () => [
{ type: Renderer, },
];
MzCollapsibleComponent.propDecorators = {
"mode": [{ type: Input },],
"onClose": [{ type: Input },],
"onOpen": [{ type: Input },],
"popout": [{ type: Input },],
"collapsible": [{ type: ViewChild, args: ['collapsible',] },],
"items": [{ type: ContentChildren, args: [MzCollapsibleItemComponent,] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollapsibleModule {
}
MzCollapsibleModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzCollapsibleComponent,
MzCollapsibleItemBodyDirective,
MzCollapsibleItemComponent,
MzCollapsibleItemHeaderDirective,
],
exports: [
MzCollapsibleComponent,
MzCollapsibleItemBodyDirective,
MzCollapsibleItemComponent,
MzCollapsibleItemHeaderDirective,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzAvatarDirective {
}
MzAvatarDirective.decorators = [
{ type: Directive, args: [{
selector: '[mzAvatar], [mz-avatar]',
},] },
];
/** @nocollapse */
MzAvatarDirective.propDecorators = {
"true": [{ type: HostBinding, args: ['class.circle',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollectionHeaderComponent {
}
MzCollectionHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collection-header',
template: `<div class="collection-header">
<ng-content></ng-content>
</div>`,
styles: [``],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollectionItemComponent {
}
MzCollectionItemComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collection-item',
template: `<ng-content></ng-content>`,
styles: [`:host{display:block}`],
},] },
];
/** @nocollapse */
MzCollectionItemComponent.propDecorators = {
"true": [{ type: HostBinding, args: ['class.collection-item',] },],
"avatar": [{ type: HostBinding, args: ['class.avatar',] }, { type: Input },],
"dismissable": [{ type: HostBinding, args: ['class.dismissable',] }, { type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollectionLinkDirective {
}
MzCollectionLinkDirective.decorators = [
{ type: Directive, args: [{
selector: '[mzCollectionLink], [mz-collection-link]',
},] },
];
/** @nocollapse */
MzCollectionLinkDirective.propDecorators = {
"active": [{ type: HostBinding, args: ['class.active',] }, { type: Input },],
"true": [{ type: HostBinding, args: ['class.collection-item',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollectionComponent {
/**
* @param {?} elementRef
* @param {?} renderer
*/
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
}
/**
* @return {?}
*/
ngOnInit() {
this.initElements();
this.initCollectionHeader();
}
/**
* @return {?}
*/
initElements() {
this.collectionElement = $(this.elementRef.nativeElement).find('.collection');
this.collectionHeaderElement = $(this.elementRef.nativeElement).find('.collection-header');
}
/**
* @return {?}
*/
initCollectionHeader() {
if (this.collectionHeaderElement.length > 0) {
this.renderer.addClass(this.collectionElement[0], 'with-header');
}
}
}
MzCollectionComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collection',
template: `<div class="collection">
<ng-content></ng-content>
</div>`,
styles: [``],
},] },
];
/** @nocollapse */
MzCollectionComponent.ctorParameters = () => [
{ type: ElementRef, },
{ type: Renderer2, },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzSecondaryContentDirective {
}
MzSecondaryContentDirective.decorators = [
{ type: Directive, args: [{
selector: '[mzSecondaryContent], [mz-secondary-content]',
},] },
];
/** @nocollapse */
MzSecondaryContentDirective.propDecorators = {
"true": [{ type: HostBinding, args: ['class.secondary-content',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzCollectionModule {
}
MzCollectionModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzAvatarDirective,
MzCollectionComponent,
MzCollectionItemComponent,
MzCollectionLinkDirective,
MzCollectionHeaderComponent,
MzSecondaryContentDirective,
],
exports: [
MzAvatarDirective,
MzCollectionComponent,
MzCollectionItemComponent,
MzCollectionLinkDirective,
MzCollectionHeaderComponent,
MzSecondaryContentDirective,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzDatepickerContainerComponent {
}
MzDatepickerContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-datepicker-container',
template: `<div
class="input-field"
[class.inline]="inline"
>
<ng-content></ng-content>
</div>`,
styles: [``],
},] },
];
/** @nocollapse */
MzDatepickerContainerComponent.propDecorators = {
"inline": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzDatepickerDirective extends HandlePropChanges {
/**
* @param {?} ngControl
* @param {?} changeDetectorRef
* @param {?} elementRef
* @param {?} renderer
*/
constructor(ngControl, changeDetectorRef, elementRef, renderer) {
super();
this.ngControl = ngControl;
this.changeDetectorRef = changeDetectorRef;
this.elementRef = elementRef;
this.renderer = renderer;
// materialize uses pickadate.js to create the datepicker
// complete list of options is available at the following address
// http://amsul.ca/pickadate.js/date/#options
this.options = {};
this.isInitRound = true;
this.stopChangePropagation = false;
}
/**
* @return {?}
*/
get format() {
return this.options.format || this.options.formatSubmit || null;
}
/**
* @return {?}
*/
get formatSubmit() {
return this.options.formatSubmit || this.options.format || null;
}
/**
* @return {?}
*/
get ngControlValue() {
return this.ngControl.value === '' ? null : this.ngControl.value;
}
/**
* @return {?}
*/
get picker() {
return this.inputElement.pickadate('picker');
}
/**
* @return {?}
*/
ngOnInit() {
this.initHandlers();
this.initElements();
this.initDatepicker();
this.initInputSubscription();
this.handleProperties();
this.isInitRound = false;
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.inputValueSubscription) {
this.inputValueSubscription.unsubscribe();
}
}
/**
* @return {?}
*/
initHandlers() {
this.handlers = {
label: () => this.handleLabel(),
options: () => this.handleOptions(),
placeholder: () => this.handlePlaceholder(),
};
}
/**
* @return {?}
*/
initElements() {
this.inputContainerElement = $(this.elementRef.nativeElement).parent('.input-field');
this.inputElement = $(this.elementRef.nativeElement);
this.labelElement = this.createLabelElement();
}
/**
* @return {?}
*/
initDatepicker() {
// set default format/formatSubmit options
if (this.format) {
this.options.format = this.format;
}
if (this.formatSubmit) {
this.options.formatSubmit = this.formatSubmit;
}
// extends onClose function to fix datepicker focus issue
// https://github.com/Dogfalo/materialize/issues/2067#issuecomment-142107599
const /** @type {?} */ onCloseFn = this.options && this.options.onClose || (() => { });
this.options = Object.assign({}, this.options, {
onClose: (event) => {
onCloseFn(event);
this.renderer.invokeElementMethod(document.activeElement, 'blur');
},
});
this.renderer.invokeElementMethod(this.inputElement, 'pickadate', [this.options]);
if (this.ngControl) {
// set datepicker initial value according to ngControl
this.picker.set('select', this.ngControlValue, { format: this.formatSubmit });
// set ngControl value according to selected date in datepicker
this.picker.on('set', () => {
// handle stop propagation
if (this.stopChangePropagation) {
this.stopChangePropagation = false;
return;
}
else {
this.stopChangePropagation = true;
}
// apply options.formatSubmit to ngControl value
const /** @type {?} */ submitValue = this.formatSubmit
? this.picker.get('select', this.formatSubmit)
: this.picker.get('value');
this.ngControl.control.setValue(submitValue);
// apply options.format to input text
const /** @type {?} */ formatValue = this.format
? this.picker.get('select', this.format)
: this.picker.get('value');
this.inputElement.val(formatValue);
// set label active status
this.setLabelActive();
// mark for change detection
// fix form validation with ChangeDetectionStrategy.OnPush
this.changeDetectorRef.markForCheck();
});
}
}
/**
* @return {?}
*/
initInputSubscription() {
if (this.ngControl) {
this.inputValueSubscription = this.ngControl.valueChanges.subscribe(() => {
// handle stop propagation
if (this.stopChangePropagation) {
this.stopChangePropagation = false;
return;
}
else {
this.stopChangePropagation = true;
}
// set selected date in datepicker according to ngControl value
this.picker.set('select', this.ngControlValue, { format: this.formatSubmit });
// set label active status
this.setLabelActive();
});
}
}
/**
* @return {?}
*/
createLabelElement() {
const /** @type {?} */ labelElement = document.createElement('label');
labelElement.setAttribute('for', this.id);
this.renderer.invokeElementMethod(this.inputElement, 'after', [labelElement]);
return $(labelElement);
}
/**
* @return {?}
*/
handleProperties() {
if (this.inputContainerElement.length === 0) {
console.error('Input with mz-datepicker directive must be placed inside an [mz-datepicker-container] tag', this.inputElement);
return;
}
super.executePropHandlers();
}
/**
* @return {?}
*/
handleLabel() {
this.renderer.invokeElementMethod(this.labelElement, 'text', [this.label]);
}
/**
* @return {?}
*/
handleOptions() {
if (!this.isInitRound) {
this.picker.set(this.options);
}
}
/**
* @return {?}
*/
handlePlaceholder() {
const /** @type {?} */ placeholder = !!this.placeholder ? this.placeholder : null;
this.renderer.setElementAttribute(this.inputElement[0], 'placeholder', placeholder);
// fix issue in IE where having a placeholder on input make control dirty and trigger validation
// on page load... note that it still trigger validation on focus and would need a better fix
// issue : https://github.com/angular/angular/issues/15299
// workaround : https://stackoverflow.com/a/44967245/5583283
if (this.ngControl) {
setTimeout(() => this.ngControl.control.markAsPristine());
}
this.setLabelActive();
}
/**
* @return {?}
*/
setLabelActive() {
// need setTimeout otherwise it wont make label float in some circonstances (forcing validation for example)
setTimeout(() => {
const /** @type {?} */ inputValue = (/** @type {?} */ (this.inputElement[0])).value;
const /** @type {?} */ isActive = !!this.placeholder || !!inputValue;
this.renderer.setElementClass(this.labelElement[0], 'active', isActive);
});
}
}
MzDatepickerDirective.decorators = [
{ type: Directive, args: [{
selector: 'input[mzDatepicker], input[mz-datepicker]',
},] },
];
/** @nocollapse */
MzDatepickerDirective.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional },] },
{ type: ChangeDetectorRef, },
{ type: ElementRef, },
{ type: Renderer, },
];
MzDatepickerDirective.propDecorators = {
"true": [{ type: HostBinding, args: ['class.datepicker',] },],
"id": [{ type: Input },],
"placeholder": [{ type: Input },],
"label": [{ type: Input },],
"options": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzDatepickerModule {
}
MzDatepickerModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzDatepickerDirective,
MzDatepickerContainerComponent,
],
exports: [
MzDatepickerDirective,
MzDatepickerContainerComponent,
],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzDropdownDividerComponent {
}
MzDropdownDividerComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-dropdown-divider',
template: `<li class="divider"></li>`,
styles: [``],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzDropdownItemComponent {
}
MzDropdownItemComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-dropdown-item',
template: `<li>
<ng-content></ng-content>
</li>`,
styles: [``],
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzDropdownComponent extends HandlePropChanges {
/**
* @param {?} elementRef
* @param {?} renderer
*/
constructor(elementRef, renderer) {
super();
this.elementRef = elementRef;
this.renderer = renderer;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.initHandlers();
this.initDropdownButtonElement();
this.handleProperties();
}
/**
* @return {?}
*/
close() {
setTimeout(() => this.renderer.invokeElementMethod(this.dropdownButtonElement, 'dropdown', ['close']));
}
/**
* @return {?}
*/
initDropdownButtonElement() {
this.dropdownButtonElement = $(`#${this.dropdownButtonId}`);
}
/**
* @return {?}
*/
initHandlers() {
this.handlers = {
align: () => this.handleDropdown(),
belowOrigin: () => this.handleDropdown(),
constrainWidth: () => this.handleDropdown(),
dropdownButtonId: () => this.handleDataActivates(),
gutter: () => this.handleDropdown(),
hover: () => this.handleDropdown(),
id: () => this.handleDropdown(),
inDuration: () => this.handleDropdown(),
outDuration: () => this.handleDropdown(),
stopPropagation: () => this.handleDropdown(),
};
}
/**
* @return {?}
*/
handleDataActivates() {
this.renderer.setElementAttribute(this.dropdownButtonElement[0], 'data-activates', this.id);
}
/**
* @return {?}
*/
handleDropdown() {
this.validateProperties();
const /** @type {?} */ options = {
alignment: this.align,
belowOrigin: this.belowOrigin,
constrainWidth: this.constrainWidth,
gutter: this.gutter,
hover: this.hover,
inDuration: this.inDuration,
outDuration: this.outDuration,
stopPropagation: this.stopPropagation,
};
// Initialize dropdown button for dropdown
this.renderer.invokeElementMethod(this.dropdownButtonElement, 'dropdown', [options]);
}
/**
* @return {?}
*/
handleProperties() {
this.handleDataActivates();
this.handleDropdown();
}
/**
* @return {?}
*/
open() {
setTimeout(() => this.renderer.invokeElementMethod(this.dropdownButtonElement, 'dropdown', ['open']));
}
/**
* @return {?}
*/
validateProperties() {
if (!this.id) {
throw new Error('Attribute [id] from mz-dropdown is required. ' + this.elementRef.nativeElement);
}
if (this.dropdownButtonElement.length === 0) {
throw new Error('Attribute [dropdownButtonId] from mz-dropdown is required and should be an existing element. ' +
this.elementRef.nativeElement);
}
}
}
MzDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-dropdown',
template: `<ul
class="dropdown-content"
[attr.id]="id"
>
<ng-content></ng-content>
</ul>`,
styles: [``],
},] },
];
/** @nocollapse */
MzDropdownComponent.ctorParameters = () => [
{ type: ElementRef, },
{ type: Renderer, },
];
MzDropdownComponent.propDecorators = {
"align": [{ type: Input },],
"belowOrigin": [{ type: Input },],
"constrainWidth": [{ type: Input },],
"dropdownButtonId": [{ type: Input },],
"gutter": [{ type: Input },],
"hover": [{ type: Input },],
"id": [{ type: Input },],
"inDuration": [{ type: Input },],
"outDuration": [{ type: Input },],
"stopPropagation": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MzDropdownModule {
}
MzDropdownModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzDropdownComponent,
MzDropdownDividerComponent,
MzDropdownItemComponent,
],
exports: [