ngx-materialize
Version:
An Angular wrap around Materialize library
1,581 lines (1,530 loc) • 481 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 { __extends, __values } from 'tslib';
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
*/
var MzBadgeComponent = /** @class */ (function () {
function MzBadgeComponent() {
}
MzBadgeComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-badge',
template: "<span #badge\n class=\"badge {{ badgeClass }}\"\n [class.new]=\"new || !!badgeClass\"\n [attr.data-badge-caption]=\"caption\">\n {{ value }}\n</span>\n",
styles: [""],
},] },
];
/** @nocollapse */
MzBadgeComponent.propDecorators = {
"badgeClass": [{ type: Input },],
"caption": [{ type: Input },],
"new": [{ type: Input },],
"value": [{ type: Input },],
};
return MzBadgeComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzBadgeModule = /** @class */ (function () {
function MzBadgeModule() {
}
MzBadgeModule.decorators = [
{ type: NgModule, args: [{
declarations: [MzBadgeComponent],
exports: [MzBadgeComponent],
},] },
];
return MzBadgeModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
*/
var /**
* @abstract
*/
Handlers = /** @class */ (function () {
function Handlers() {
}
return Handlers;
}());
var HandlePropChanges = /** @class */ (function () {
function HandlePropChanges() {
}
/**
* @param {?} changes
* @return {?}
*/
HandlePropChanges.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (this.handlers) {
this.executePropHandlers(changes);
}
};
/**
* @param {?=} props
* @return {?}
*/
HandlePropChanges.prototype.executePropHandlers = /**
* @param {?=} props
* @return {?}
*/
function (props) {
var _this = this;
if (props === void 0) { props = this.handlers; }
Object.keys(props).forEach(function (prop) {
if (_this.handlers[prop]) {
var /** @type {?} */ previousValue = (/** @type {?} */ (props[prop])).previousValue;
_this.handlers[prop](previousValue);
}
});
};
return HandlePropChanges;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzInjectionService = /** @class */ (function () {
function MzInjectionService(applicationRef, componentFactoryResolver, injector) {
this.applicationRef = applicationRef;
this.componentFactoryResolver = componentFactoryResolver;
this.injector = injector;
}
/**
* Appends a component to an adjacent location.
*/
/**
* Appends a component to an adjacent location.
* @template T
* @param {?} componentClass
* @param {?=} options
* @param {?=} location
* @return {?}
*/
MzInjectionService.prototype.appendComponent = /**
* Appends a component to an adjacent location.
* @template T
* @param {?} componentClass
* @param {?=} options
* @param {?=} location
* @return {?}
*/
function (componentClass, options, location) {
var _this = this;
if (options === void 0) { options = {}; }
if (location === void 0) { location = this.getContainerElement(); }
// instantiate component to load
var /** @type {?} */ componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
var /** @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(function () {
_this.applicationRef.detachView(componentRef.hostView);
});
// append component to location in the DOM where we want it to be rendered
var /** @type {?} */ componentRootNode = this.getComponentRootNode(componentRef);
location.appendChild(componentRootNode);
return componentRef;
};
/**
* Overrides the default container element.
*/
/**
* Overrides the default container element.
* @param {?} container
* @return {?}
*/
MzInjectionService.prototype.setRootViewContainer = /**
* Overrides the default container element.
* @param {?} container
* @return {?}
*/
function (container) {
this.container = container;
};
/**
* Gets the html element for a component ref.
* @param {?} componentRef
* @return {?}
*/
MzInjectionService.prototype.getComponentRootNode = /**
* Gets the html element for a component ref.
* @param {?} componentRef
* @return {?}
*/
function (componentRef) {
return /** @type {?} */ ((/** @type {?} */ (componentRef.hostView)).rootNodes[0]);
};
/**
* Gets the container element.
* @return {?}
*/
MzInjectionService.prototype.getContainerElement = /**
* Gets the container element.
* @return {?}
*/
function () {
return this.container || document.body;
};
/**
* Projects the inputs onto the component.
* @template T
* @param {?} component
* @param {?} options
* @return {?}
*/
MzInjectionService.prototype.projectComponentInputs = /**
* Projects the inputs onto the component.
* @template T
* @param {?} component
* @param {?} options
* @return {?}
*/
function (component, options) {
if (options) {
var /** @type {?} */ props = Object.getOwnPropertyNames(options);
try {
for (var props_1 = __values(props), props_1_1 = props_1.next(); !props_1_1.done; props_1_1 = props_1.next()) {
var prop = props_1_1.value;
component.instance[prop] = options[prop];
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (props_1_1 && !props_1_1.done && (_a = props_1.return)) _a.call(props_1);
}
finally { if (e_1) throw e_1.error; }
}
}
return component;
var e_1, _a;
};
MzInjectionService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
MzInjectionService.ctorParameters = function () { return [
{ type: ApplicationRef, },
{ type: ComponentFactoryResolver, },
{ type: Injector, },
]; };
return MzInjectionService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzInjectionModule = /** @class */ (function () {
function MzInjectionModule() {
}
MzInjectionModule.decorators = [
{ type: NgModule, args: [{
providers: [MzInjectionService],
},] },
];
return MzInjectionModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
*/
var MzRemoveComponentHost = /** @class */ (function () {
function MzRemoveComponentHost(elementRef) {
this.elementRef = elementRef;
this.childrenElement = [];
}
/**
* @return {?}
*/
MzRemoveComponentHost.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var /** @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 {?}
*/
MzRemoveComponentHost.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
// remove moved out element
this.childrenElement.forEach(function (childElement) { return _this.parentElement.removeChild(childElement); });
};
/** @nocollapse */
MzRemoveComponentHost.ctorParameters = function () { return [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] },] },
]; };
return MzRemoveComponentHost;
}());
/**
* @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
*/
var MzButtonDirective = /** @class */ (function (_super) {
__extends(MzButtonDirective, _super);
function MzButtonDirective(elementRef, renderer) {
var _this = _super.call(this) || this;
_this.elementRef = elementRef;
_this.renderer = renderer;
return _this;
}
/**
* @return {?}
*/
MzButtonDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initHandlers();
this.initMaterialize();
_super.prototype.executePropHandlers.call(this);
};
/**
* @return {?}
*/
MzButtonDirective.prototype.initHandlers = /**
* @return {?}
*/
function () {
var _this = this;
this.handlers = {
disabled: function () { return _this.handleDisabled(); },
flat: function () { return _this.handleFlat(); },
float: function () { return _this.handleFloat(); },
large: function () { return _this.handleLarge(); },
noWaves: function () { return _this.handleNoWaves(); },
};
};
/**
* @return {?}
*/
MzButtonDirective.prototype.initMaterialize = /**
* @return {?}
*/
function () {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn', true);
};
/**
* @return {?}
*/
MzButtonDirective.prototype.handleDisabled = /**
* @return {?}
*/
function () {
this.renderer.setElementClass(this.elementRef.nativeElement, 'disabled', this.disabled);
};
/**
* @return {?}
*/
MzButtonDirective.prototype.handleFlat = /**
* @return {?}
*/
function () {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn', !this.flat);
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn-flat', this.flat);
};
/**
* @return {?}
*/
MzButtonDirective.prototype.handleFloat = /**
* @return {?}
*/
function () {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn-floating', this.float);
};
/**
* @return {?}
*/
MzButtonDirective.prototype.handleLarge = /**
* @return {?}
*/
function () {
this.renderer.setElementClass(this.elementRef.nativeElement, 'btn-large', this.large);
};
/**
* @return {?}
*/
MzButtonDirective.prototype.handleNoWaves = /**
* @return {?}
*/
function () {
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: "\n a[mz-button],\n a[mzButton],\n button[mz-button],\n button[mzButton]",
},] },
];
/** @nocollapse */
MzButtonDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer, },
]; };
MzButtonDirective.propDecorators = {
"disabled": [{ type: Input },],
"flat": [{ type: Input },],
"float": [{ type: Input },],
"large": [{ type: Input },],
"noWaves": [{ type: Input },],
};
return MzButtonDirective;
}(HandlePropChanges));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzButtonModule = /** @class */ (function () {
function MzButtonModule() {
}
MzButtonModule.decorators = [
{ type: NgModule, args: [{
declarations: [MzButtonDirective],
exports: [MzButtonDirective],
},] },
];
return MzButtonModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzHalfwayFabDirective = /** @class */ (function () {
function MzHalfwayFabDirective() {
}
MzHalfwayFabDirective.decorators = [
{ type: Directive, args: [{
selector: "\n a[mz-halfway-fab],\n a[mzHalfwayFab],\n button[mz-halfway-fab],\n button[mzHalfwayFab]",
},] },
];
/** @nocollapse */
MzHalfwayFabDirective.propDecorators = {
"true": [{ type: HostBinding, args: ['class.halfway-fab',] },],
};
return MzHalfwayFabDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzHalfwayFabModule = /** @class */ (function () {
function MzHalfwayFabModule() {
}
MzHalfwayFabModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [
MzHalfwayFabDirective,
],
exports: [
MzHalfwayFabDirective,
],
},] },
];
return MzHalfwayFabModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCardComponent = /** @class */ (function () {
function MzCardComponent(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.hasCardAction = true;
this.hasCardImage = true;
this.hasCardImageTitle = true;
this.hasCardTitle = true;
}
/**
* @return {?}
*/
MzCardComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.hasCardTitle = this.hasTitleTagAndNotEmpty();
this.hasCardAction = this.hasActionTagAndNotEmpty();
this.hasCardImage = this.hasImageTagAndNotEmpty();
this.hasCardImageTitle = this.hasImageTitleTagAndNotEmpty();
this.changeDetectorRef.detectChanges();
};
/**
* @return {?}
*/
MzCardComponent.prototype.hasActionTagAndNotEmpty = /**
* @return {?}
*/
function () {
var /** @type {?} */ cardActionElement = this.cardAction.nativeElement.querySelector('mz-card-action');
return this.isElementDisplayed(cardActionElement);
};
/**
* @return {?}
*/
MzCardComponent.prototype.hasImageTagAndNotEmpty = /**
* @return {?}
*/
function () {
var /** @type {?} */ cardImagelement = this.cardImage.nativeElement.querySelector('mz-card-image');
return this.isElementDisplayed(cardImagelement);
};
/**
* @return {?}
*/
MzCardComponent.prototype.hasImageTitleTagAndNotEmpty = /**
* @return {?}
*/
function () {
var /** @type {?} */ cardImageTitleElement = this.cardImage.nativeElement.querySelector('mz-card-image-title');
return this.isElementDisplayed(cardImageTitleElement);
};
/**
* @return {?}
*/
MzCardComponent.prototype.hasTitleTagAndNotEmpty = /**
* @return {?}
*/
function () {
var /** @type {?} */ cardTitleElement = this.cardTitle ? this.cardTitle.nativeElement.querySelector('mz-card-title') : null;
return this.isElementDisplayed(cardTitleElement);
};
/**
* @param {?} element
* @return {?}
*/
MzCardComponent.prototype.isElementDisplayed = /**
* @param {?} element
* @return {?}
*/
function (element) {
return element && element.innerHTML.trim() !== '';
};
MzCardComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-card',
template: "<div #cardImage class=\"card-image\" *ngIf=\"hasCardImage\">\n <ng-content select=\"mz-card-image\"></ng-content>\n <div class=\"card-title\" *ngIf=\"hasCardImageTitle\">\n <ng-content select=\"mz-card-image-title\"></ng-content>\n </div>\n</div>\n\n<div [class.card-stacked]=\"horizontal\">\n <div class=\"card-content\">\n <div #cardTitle class=\"card-title\" *ngIf=\"hasCardTitle\">\n <ng-content select=\"mz-card-title\"></ng-content>\n </div>\n\n <ng-content select=\"mz-card-content\"></ng-content>\n </div>\n\n <div #cardAction class=\"card-action\" *ngIf=\"hasCardAction\">\n <ng-content select=\"mz-card-action\"></ng-content>\n </div>\n</div>",
styles: [":host{display:block}"],
},] },
];
/** @nocollapse */
MzCardComponent.ctorParameters = function () { return [
{ 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',] },],
};
return MzCardComponent;
}());
var MzCardImageDirective = /** @class */ (function () {
function MzCardImageDirective() {
}
MzCardImageDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-image' },] },
];
return MzCardImageDirective;
}());
var MzCardImageTitleDirective = /** @class */ (function () {
function MzCardImageTitleDirective() {
}
MzCardImageTitleDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-image-title' },] },
];
return MzCardImageTitleDirective;
}());
var MzCardTitleDirective = /** @class */ (function () {
function MzCardTitleDirective() {
}
MzCardTitleDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-title' },] },
];
return MzCardTitleDirective;
}());
var MzCardContentDirective = /** @class */ (function () {
function MzCardContentDirective() {
}
MzCardContentDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-content' },] },
];
return MzCardContentDirective;
}());
var MzCardActionDirective = /** @class */ (function () {
function MzCardActionDirective() {
}
MzCardActionDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-card-action' },] },
];
return MzCardActionDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCardModule = /** @class */ (function () {
function MzCardModule() {
}
MzCardModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MzHalfwayFabModule,
],
declarations: [
MzCardActionDirective,
MzCardComponent,
MzCardContentDirective,
MzCardImageDirective,
MzCardImageTitleDirective,
MzCardTitleDirective,
],
exports: [
MzCardActionDirective,
MzCardComponent,
MzCardContentDirective,
MzCardImageDirective,
MzCardImageTitleDirective,
MzCardTitleDirective,
],
},] },
];
return MzCardModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCheckboxContainerComponent = /** @class */ (function () {
function MzCheckboxContainerComponent() {
}
MzCheckboxContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-checkbox-container',
template: "<p class=\"checkbox-field\">\n <ng-content></ng-content>\n</p>",
styles: [""],
},] },
];
return MzCheckboxContainerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCheckboxDirective = /** @class */ (function (_super) {
__extends(MzCheckboxDirective, _super);
function MzCheckboxDirective(elementRef, renderer) {
var _this = _super.call(this) || this;
_this.elementRef = elementRef;
_this.renderer = renderer;
return _this;
}
/**
* @return {?}
*/
MzCheckboxDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initHandlers();
this.initElements();
this.handleProperties();
};
/**
* @return {?}
*/
MzCheckboxDirective.prototype.initHandlers = /**
* @return {?}
*/
function () {
var _this = this;
this.handlers = {
filledIn: function () { return _this.handleFilledIn(); },
label: function () { return _this.handleLabel(); },
};
};
/**
* @return {?}
*/
MzCheckboxDirective.prototype.initElements = /**
* @return {?}
*/
function () {
this.checkboxElement = $(this.elementRef.nativeElement);
this.checkboxContainerElement = $(this.elementRef.nativeElement).parent('.checkbox-field');
this.labelElement = this.createLabelElement();
};
/**
* @return {?}
*/
MzCheckboxDirective.prototype.createLabelElement = /**
* @return {?}
*/
function () {
var /** @type {?} */ labelElement = document.createElement('label');
labelElement.setAttribute('for', this.id);
this.renderer.invokeElementMethod(this.checkboxElement, 'after', [labelElement]);
return $(labelElement);
};
/**
* @return {?}
*/
MzCheckboxDirective.prototype.handleProperties = /**
* @return {?}
*/
function () {
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.prototype.executePropHandlers.call(this);
};
/**
* @return {?}
*/
MzCheckboxDirective.prototype.handleLabel = /**
* @return {?}
*/
function () {
this.renderer.invokeElementMethod(this.labelElement, 'text', [this.label]);
};
/**
* @return {?}
*/
MzCheckboxDirective.prototype.handleFilledIn = /**
* @return {?}
*/
function () {
this.renderer.setElementClass(this.checkboxElement[0], 'filled-in', this.filledIn);
};
MzCheckboxDirective.decorators = [
{ type: Directive, args: [{
selector: 'input[mzCheckbox], input[mz-checkbox]',
},] },
];
/** @nocollapse */
MzCheckboxDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer, },
]; };
MzCheckboxDirective.propDecorators = {
"id": [{ type: HostBinding }, { type: Input },],
"filledIn": [{ type: Input },],
"label": [{ type: Input },],
};
return MzCheckboxDirective;
}(HandlePropChanges));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCheckboxModule = /** @class */ (function () {
function MzCheckboxModule() {
}
MzCheckboxModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzCheckboxDirective,
MzCheckboxContainerComponent,
],
exports: [
MzCheckboxDirective,
MzCheckboxContainerComponent,
],
},] },
];
return MzCheckboxModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzChipInputComponent = /** @class */ (function () {
function MzChipInputComponent(elementRef, zone) {
this.elementRef = elementRef;
this.zone = zone;
this.add = new EventEmitter();
this.delete = new EventEmitter();
this.select = new EventEmitter();
this.onChangeCallback = function (data) { };
}
Object.defineProperty(MzChipInputComponent.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return /** @type {?} */ (this.chipInputElement.material_chip('data'));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MzChipInputComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initElements();
this.initMaterializeChip();
};
/**
* @return {?}
*/
MzChipInputComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.chipInputElement.off('chip.add');
this.chipInputElement.off('chip.delete');
this.chipInputElement.off('chip.select');
};
/**
* @return {?}
*/
MzChipInputComponent.prototype.initElements = /**
* @return {?}
*/
function () {
this.chipInputElement = $(this.elementRef.nativeElement);
};
/**
* @param {?=} value
* @return {?}
*/
MzChipInputComponent.prototype.initMaterializeChip = /**
* @param {?=} value
* @return {?}
*/
function (value) {
var _this = this;
// fix issue autocomplete is not a function
// https://github.com/Dogfalo/materialize/issues/4401
this.zone.runOutsideAngular(function () {
setTimeout(function () {
_this.chipInputElement.material_chip({
autocompleteOptions: _this.autocompleteOptions,
data: value || _this.value,
placeholder: _this.placeholder,
secondaryPlaceholder: _this.secondaryPlaceholder,
});
});
});
this.chipInputElement.on('chip.add', function (event, chip) {
_this.onChangeCallback(_this.value);
_this.add.emit(chip);
});
this.chipInputElement.on('chip.delete', function (event, chip) {
_this.onChangeCallback(_this.value);
_this.delete.emit(chip);
});
this.chipInputElement.on('chip.select', function (event, chip) {
_this.select.emit(chip);
});
};
//#region ControlValueAccessor
/**
* @param {?} fn
* @return {?}
*/
MzChipInputComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeCallback = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MzChipInputComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) { };
/**
* @param {?} isDisabled
* @return {?}
*/
MzChipInputComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) { };
/**
* @param {?} value
* @return {?}
*/
MzChipInputComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (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(function () { return MzChipInputComponent; }),
multi: true,
},
],
},] },
];
/** @nocollapse */
MzChipInputComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: NgZone, },
]; };
MzChipInputComponent.propDecorators = {
"autocompleteOptions": [{ type: Input },],
"placeholder": [{ type: Input },],
"secondaryPlaceholder": [{ type: Input },],
"add": [{ type: Output },],
"delete": [{ type: Output },],
"select": [{ type: Output },],
};
return MzChipInputComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzChipComponent = /** @class */ (function () {
function MzChipComponent(elementRef) {
this.elementRef = elementRef;
this.chipClass = true;
this.close = false;
this.delete = new EventEmitter();
}
Object.defineProperty(MzChipComponent.prototype, "chipElement", {
get: /**
* @return {?}
*/
function () {
return /** @type {?} */ (this.elementRef.nativeElement);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MzChipComponent.prototype.onDelete = /**
* @return {?}
*/
function () {
var /** @type {?} */ value = '';
for (var /** @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>\n<i class=\"close material-icons\" (click)=\"onDelete()\" *ngIf=\"close\">close</i>",
styles: [""],
},] },
];
/** @nocollapse */
MzChipComponent.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
MzChipComponent.propDecorators = {
"chipClass": [{ type: HostBinding, args: ['class.chip',] },],
"close": [{ type: Input },],
"delete": [{ type: Output },],
};
return MzChipComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzChipModule = /** @class */ (function () {
function MzChipModule() {
}
MzChipModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [
MzChipComponent,
MzChipInputComponent,
],
exports: [
MzChipComponent,
MzChipInputComponent,
],
},] },
];
return MzChipModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollapsibleItemComponent = /** @class */ (function (_super) {
__extends(MzCollapsibleItemComponent, _super);
function MzCollapsibleItemComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
MzCollapsibleItemComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collapsible-item',
template: "<li>\n <div class=\"collapsible-header\"\n [class.active]=\"active\"\n >\n <ng-content select=\"mz-collapsible-item-header\"></ng-content>\n </div>\n <div class=\"collapsible-body\">\n <ng-content select=\"mz-collapsible-item-body\"></ng-content>\n </div>\n</li>",
styles: [""],
},] },
];
/** @nocollapse */
MzCollapsibleItemComponent.propDecorators = {
"active": [{ type: Input },],
};
return MzCollapsibleItemComponent;
}(MzRemoveComponentHost));
var MzCollapsibleItemBodyDirective = /** @class */ (function () {
function MzCollapsibleItemBodyDirective() {
}
MzCollapsibleItemBodyDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-collapsible-item-body' },] },
];
return MzCollapsibleItemBodyDirective;
}());
var MzCollapsibleItemHeaderDirective = /** @class */ (function () {
function MzCollapsibleItemHeaderDirective() {
}
MzCollapsibleItemHeaderDirective.decorators = [
{ type: Directive, args: [{ selector: 'mz-collapsible-item-header' },] },
];
return MzCollapsibleItemHeaderDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollapsibleComponent = /** @class */ (function () {
function MzCollapsibleComponent(renderer) {
this.renderer = renderer;
}
/**
* @return {?}
*/
MzCollapsibleComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.handleDataCollapsible();
this.initCollapsible();
};
/**
* @return {?}
*/
MzCollapsibleComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
$(this.collapsible.nativeElement).collapsible('destroy');
};
/**
* @param {?} collapsibleItemIndex
* @return {?}
*/
MzCollapsibleComponent.prototype.close = /**
* @param {?} collapsibleItemIndex
* @return {?}
*/
function (collapsibleItemIndex) {
$(this.collapsible.nativeElement).collapsible('close', collapsibleItemIndex);
};
/**
* @return {?}
*/
MzCollapsibleComponent.prototype.initCollapsible = /**
* @return {?}
*/
function () {
var /** @type {?} */ options = {
accordion: false,
onClose: this.onClose,
onOpen: this.onOpen,
};
$(this.collapsible.nativeElement).collapsible(options);
};
/**
* @return {?}
*/
MzCollapsibleComponent.prototype.handleDataCollapsible = /**
* @return {?}
*/
function () {
if (this.mode) {
this.renderer.setElementAttribute(this.collapsible.nativeElement, 'data-collapsible', this.mode);
}
};
/**
* @param {?} collapsibleItemIndex
* @return {?}
*/
MzCollapsibleComponent.prototype.open = /**
* @param {?} collapsibleItemIndex
* @return {?}
*/
function (collapsibleItemIndex) {
$(this.collapsible.nativeElement).collapsible('open', collapsibleItemIndex);
};
MzCollapsibleComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collapsible',
template: "<ul #collapsible\n class=\"collapsible\"\n [class.popout]=\"popout\"\n [hidden]=\"items.length === 0\"\n>\n <ng-content></ng-content>\n</ul>",
styles: ["/deep/ .collapsible-header{clear:both}/deep/ .collapsible-body{clear:both}"],
},] },
];
/** @nocollapse */
MzCollapsibleComponent.ctorParameters = function () { return [
{ 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,] },],
};
return MzCollapsibleComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollapsibleModule = /** @class */ (function () {
function MzCollapsibleModule() {
}
MzCollapsibleModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzCollapsibleComponent,
MzCollapsibleItemBodyDirective,
MzCollapsibleItemComponent,
MzCollapsibleItemHeaderDirective,
],
exports: [
MzCollapsibleComponent,
MzCollapsibleItemBodyDirective,
MzCollapsibleItemComponent,
MzCollapsibleItemHeaderDirective,
],
},] },
];
return MzCollapsibleModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzAvatarDirective = /** @class */ (function () {
function MzAvatarDirective() {
}
MzAvatarDirective.decorators = [
{ type: Directive, args: [{
selector: '[mzAvatar], [mz-avatar]',
},] },
];
/** @nocollapse */
MzAvatarDirective.propDecorators = {
"true": [{ type: HostBinding, args: ['class.circle',] },],
};
return MzAvatarDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollectionHeaderComponent = /** @class */ (function () {
function MzCollectionHeaderComponent() {
}
MzCollectionHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-collection-header',
template: "<div class=\"collection-header\">\n <ng-content></ng-content>\n</div>",
styles: [""],
},] },
];
return MzCollectionHeaderComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollectionItemComponent = /** @class */ (function () {
function 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 },],
};
return MzCollectionItemComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollectionLinkDirective = /** @class */ (function () {
function 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',] },],
};
return MzCollectionLinkDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollectionComponent = /** @class */ (function () {
function MzCollectionComponent(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
}
/**
* @return {?}
*/
MzCollectionComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initElements();
this.initCollectionHeader();
};
/**
* @return {?}
*/
MzCollectionComponent.prototype.initElements = /**
* @return {?}
*/
function () {
this.collectionElement = $(this.elementRef.nativeElement).find('.collection');
this.collectionHeaderElement = $(this.elementRef.nativeElement).find('.collection-header');
};
/**
* @return {?}
*/
MzCollectionComponent.prototype.initCollectionHeader = /**
* @return {?}
*/
function () {
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\">\n <ng-content></ng-content>\n</div>",
styles: [""],
},] },
];
/** @nocollapse */
MzCollectionComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer2, },
]; };
return MzCollectionComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzSecondaryContentDirective = /** @class */ (function () {
function MzSecondaryContentDirective() {
}
MzSecondaryContentDirective.decorators = [
{ type: Directive, args: [{
selector: '[mzSecondaryContent], [mz-secondary-content]',
},] },
];
/** @nocollapse */
MzSecondaryContentDirective.propDecorators = {
"true": [{ type: HostBinding, args: ['class.secondary-content',] },],
};
return MzSecondaryContentDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzCollectionModule = /** @class */ (function () {
function MzCollectionModule() {
}
MzCollectionModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MzAvatarDirective,
MzCollectionComponent,
MzCollectionItemComponent,
MzCollectionLinkDirective,
MzCollectionHeaderComponent,
MzSecondaryContentDirective,
],
exports: [
MzAvatarDirective,
MzCollectionComponent,
MzCollectionItemComponent,
MzCollectionLinkDirective,
MzCollectionHeaderComponent,
MzSecondaryContentDirective,
],
},] },
];
return MzCollectionModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzDatepickerContainerComponent = /** @class */ (function () {
function MzDatepickerContainerComponent() {
}
MzDatepickerContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'mz-datepicker-container',
template: "<div\n class=\"input-field\"\n [class.inline]=\"inline\"\n>\n <ng-content></ng-content>\n</div>",
styles: [""],
},] },
];
/** @nocollapse */
MzDatepickerContainerComponent.propDecorators = {
"inline": [{ type: Input },],
};
return MzDatepickerContainerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MzDatepickerDirective = /** @class */ (function (_super) {
__extends(MzDatepickerDirective, _super);
function MzDatepickerDirective(ngControl, changeDetectorRef, elementRef, renderer) {
var _this = _super.call(this) || this;
_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 _this;
}
Object.defineProperty(MzDatepickerDirective.prototype, "format", {
get: /**
* @return {?}
*/
function () {
return this.options.format || this.options.formatSubmit || null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MzDatepickerDirective.prototype, "formatSubmit", {
get: /**
* @return {?}
*/
function () {
return this.options.formatSubmit || this.options.format || null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MzDatepickerDirective.prototype, "ngControlValue", {
get: /**
* @return {?}
*/
function () {
return this.ngControl.value === '' ? null : this.ngControl.value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MzDatepickerDirective.prototype, "picker", {
get: /**
* @return {?}
*/
function () {
return this.inputElement.pickadate('picker');
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MzDatepickerDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initHandlers();
this.initElements();
this.initDatepicker();
this.initInputSubscription();
this.handleProperties();
this.isInitRound = false;
};
/**
* @return {?}
*/
MzDatepickerDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.inputValueSubscription) {
this.inputValueSubscription.unsubscribe();
}
};
/**
* @return {?}
*/
MzDatepickerDirective.prototype.initHandlers = /**