ng2-materialize
Version:
An Angular 2+ wrap around Materialize library
154 lines (153 loc) • 7.01 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var handle_prop_changes_1 = require("../shared/handle-prop-changes");
var MzTimepickerDirective = (function (_super) {
__extends(MzTimepickerDirective, _super);
function MzTimepickerDirective(ngControl, changeDetectorRef, elementRef, renderer, zone) {
var _this = _super.call(this) || this;
_this.ngControl = ngControl;
_this.changeDetectorRef = changeDetectorRef;
_this.elementRef = elementRef;
_this.renderer = renderer;
_this.zone = zone;
// materialize uses ClockPicker to create the timepicker
// complete list of options is available at the following address
// https://github.com/weareoutman/clockpicker#options
_this.options = {};
_this.stopChangePropagation = false;
return _this;
}
Object.defineProperty(MzTimepickerDirective.prototype, "clockpicker", {
get: function () {
return $('.clockpicker');
},
enumerable: true,
configurable: true
});
MzTimepickerDirective.prototype.ngOnInit = function () {
this.initHandlers();
this.initElements();
this.initTimepicker();
this.handleProperties();
};
MzTimepickerDirective.prototype.ngOnDestroy = function () {
// remove event handlers
this.inputElement.off();
// remove clockpicker added to body by default
this.clockpicker.remove();
};
MzTimepickerDirective.prototype.initHandlers = function () {
var _this = this;
this.handlers = {
label: function () { return _this.handleLabel(); },
placeholder: function () { return _this.handlePlaceholder(); },
};
};
MzTimepickerDirective.prototype.initElements = function () {
this.inputContainerElement = $(this.elementRef.nativeElement).parent('.input-field');
this.inputElement = $(this.elementRef.nativeElement);
this.labelElement = this.createLabelElement();
};
MzTimepickerDirective.prototype.initTimepicker = function () {
var _this = this;
// append clockpicker to body by default
if (!this.options.container) {
this.options.container = 'body';
}
// extend afterHide callback to set label active
var afterHide = this.options && this.options.afterHide || (function () { });
this.options = Object.assign({}, this.options, {
afterHide: function () {
afterHide();
_this.setLabelActive();
},
});
this.renderer.invokeElementMethod(this.inputElement, 'pickatime', [this.options]);
if (this.ngControl) {
// set ngControl value according to selected time in timepicker
this.inputElement.on('change', function (event) {
_this.ngControl.control.setValue(event.target.value);
// mark for change detection
// fix form validation with ChangeDetectionStrategy.OnPush
_this.changeDetectorRef.markForCheck();
});
}
};
MzTimepickerDirective.prototype.createLabelElement = function () {
var labelElement = document.createElement('label');
labelElement.setAttribute('for', this.id);
this.renderer.invokeElementMethod(this.inputElement, 'after', [labelElement]);
return $(labelElement);
};
MzTimepickerDirective.prototype.handleProperties = function () {
if (this.inputContainerElement.length === 0) {
console.error('Input with mz-timepicker directive must be placed inside an [mz-timepicker-container] tag', this.inputElement);
return;
}
_super.prototype.executePropHandlers.call(this);
};
MzTimepickerDirective.prototype.handleLabel = function () {
this.renderer.invokeElementMethod(this.labelElement, 'text', [this.label]);
};
MzTimepickerDirective.prototype.handlePlaceholder = function () {
var _this = this;
var 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) {
this.zone.runOutsideAngular(function () {
setTimeout(function () { return _this.ngControl.control.markAsPristine(); });
});
}
this.setLabelActive();
};
MzTimepickerDirective.prototype.setLabelActive = function () {
var _this = this;
// need wait for zone to be stable otherwise it wont make label
// float in some circonstances (clearing value programmatically for example)
this.zone.onStable
.first()
.subscribe(function () {
var inputValue = _this.inputElement[0].value;
var isActive = !!_this.placeholder || !!inputValue;
_this.renderer.setElementClass(_this.labelElement[0], 'active', isActive);
});
};
return MzTimepickerDirective;
}(handle_prop_changes_1.HandlePropChanges));
MzTimepickerDirective.decorators = [
{ type: core_1.Directive, args: [{
selector: 'input[mzTimepicker], input[mz-timepicker]',
},] },
];
/** @nocollapse */
MzTimepickerDirective.ctorParameters = function () { return [
{ type: forms_1.NgControl, decorators: [{ type: core_1.Optional },] },
{ type: core_1.ChangeDetectorRef, },
{ type: core_1.ElementRef, },
{ type: core_1.Renderer, },
{ type: core_1.NgZone, },
]; };
MzTimepickerDirective.propDecorators = {
'true': [{ type: core_1.HostBinding, args: ['class.timepicker',] },],
'id': [{ type: core_1.Input },],
'placeholder': [{ type: core_1.Input },],
'label': [{ type: core_1.Input },],
'options': [{ type: core_1.Input },],
};
exports.MzTimepickerDirective = MzTimepickerDirective;