ng2-materialize
Version:
An Angular 2+ wrap around Materialize library
121 lines (120 loc) • 5.44 kB
JavaScript
;
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 handle_prop_changes_1 = require("../shared/handle-prop-changes");
var MzModalComponent = (function (_super) {
__extends(MzModalComponent, _super);
function MzModalComponent(renderer) {
var _this = _super.call(this) || this;
_this.renderer = renderer;
_this.onClose = new core_1.EventEmitter();
return _this;
}
MzModalComponent.prototype.ngOnInit = function () {
this.initHandlers();
this.initElements();
this.handleProperties();
};
MzModalComponent.prototype.ngAfterViewInit = function () {
this.initModal();
};
MzModalComponent.prototype.initElements = function () {
this.modalElement = $(this.modalElementRef.nativeElement);
};
MzModalComponent.prototype.initHandlers = function () {
var _this = this;
this.handlers = {
options: function () { return _this.handleOptions(); },
};
};
MzModalComponent.prototype.initModal = function () {
this.renderer.invokeElementMethod(this.modalElement, 'modal', [this.options]);
};
MzModalComponent.prototype.handleProperties = function () {
_super.prototype.executePropHandlers.call(this);
};
MzModalComponent.prototype.handleOptions = function () {
var _this = this;
// extend complete function to emit onClose on callback return
var originalCompleteFn = this.options && this.options.complete || (function () { });
this.options = Object.assign({}, this.options, {
complete: function () {
originalCompleteFn();
_this.onClose.emit();
},
});
};
MzModalComponent.prototype.open = function () {
this.renderer.invokeElementMethod(this.modalElement, 'modal', ['open']);
};
MzModalComponent.prototype.close = function () {
this.renderer.invokeElementMethod(this.modalElement, 'modal', ['close']);
};
return MzModalComponent;
}(handle_prop_changes_1.HandlePropChanges));
MzModalComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'mz-modal',
template: "<div #modal class=\"modal\" [class.modal-fixed-footer]=\"fixedFooter\" [class.bottom-sheet]=\"bottomSheet\" [class.modal-fullscreen]=\"fullscreen\"><div class=\"modal-content\"><ng-content select=\"mz-modal-header\"></ng-content><p><ng-content select=\"mz-modal-content\"></ng-content></p></div><div class=\"modal-footer\"><ng-content select=\"mz-modal-footer\"></ng-content></div></div>",
styles: [".modal:not(.bottom-sheet).modal-fullscreen{top:12px!important;margin:0 auto;width:calc(100% - 24px);height:calc(100% - 24px);max-height:none}.modal.bottom-sheet.modal-fullscreen{height:100%;max-height:none}/deep/ mz-modal-header h5,/deep/ mz-modal-header h6{margin-top:0}"],
},] },
];
/** @nocollapse */
MzModalComponent.ctorParameters = function () { return [
{ type: core_1.Renderer, },
]; };
MzModalComponent.propDecorators = {
'bottomSheet': [{ type: core_1.Input },],
'fixedFooter': [{ type: core_1.Input },],
'fullscreen': [{ type: core_1.Input },],
'options': [{ type: core_1.Input },],
'onClose': [{ type: core_1.Output },],
'modalElementRef': [{ type: core_1.ViewChild, args: ['modal',] },],
};
exports.MzModalComponent = MzModalComponent;
// Declare the tags to avoid error: '<mz-modal-x>' is not a known element
// https://github.com/angular/angular/issues/11251
// tslint:disable: directive-selector
var MzModalHeaderDirective = (function () {
function MzModalHeaderDirective() {
}
return MzModalHeaderDirective;
}());
MzModalHeaderDirective.decorators = [
{ type: core_1.Directive, args: [{ selector: 'mz-modal-header' },] },
];
/** @nocollapse */
MzModalHeaderDirective.ctorParameters = function () { return []; };
exports.MzModalHeaderDirective = MzModalHeaderDirective;
var MzModalContentDirective = (function () {
function MzModalContentDirective() {
}
return MzModalContentDirective;
}());
MzModalContentDirective.decorators = [
{ type: core_1.Directive, args: [{ selector: 'mz-modal-content' },] },
];
/** @nocollapse */
MzModalContentDirective.ctorParameters = function () { return []; };
exports.MzModalContentDirective = MzModalContentDirective;
var MzModalFooterDirective = (function () {
function MzModalFooterDirective() {
}
return MzModalFooterDirective;
}());
MzModalFooterDirective.decorators = [
{ type: core_1.Directive, args: [{ selector: 'mz-modal-footer' },] },
];
/** @nocollapse */
MzModalFooterDirective.ctorParameters = function () { return []; };
exports.MzModalFooterDirective = MzModalFooterDirective;