ng-modals
Version:
Make a modal in angular extremely easily with ng-modals. Installation to have a modal pop up is quick and easy.
218 lines (210 loc) • 9.19 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define('ng-modals', ['exports', '@angular/core', '@angular/platform-browser'], factory) :
(factory((global['ng-modals'] = {}),global.ng.core,global.ng.platformBrowser));
}(this, (function (exports,core,platformBrowser) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgModalsDirective = /** @class */ (function () {
function NgModalsDirective(containers) {
this.containers = containers;
}
NgModalsDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[ngmodals]'
},] }
];
/** @nocollapse */
NgModalsDirective.ctorParameters = function () {
return [
{ type: core.ViewContainerRef }
];
};
return NgModalsDirective;
}());
var NgModalsComponent = /** @class */ (function () {
function NgModalsComponent(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
this.close = new core.EventEmitter();
this.css = {};
this.viewIsInit = false;
this.initialClick = false;
}
/**
* @param {?} targetElement
* @return {?}
*/
NgModalsComponent.prototype.onclick = /**
* @param {?} targetElement
* @return {?}
*/
function (targetElement) {
if (this.initialClick) {
/** @type {?} */
var clickedInside = document.getElementById("modelContainer").contains(targetElement);
if (!clickedInside) {
this.closeModal();
}
}
};
/**
* @return {?}
*/
NgModalsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
NgModalsComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout(( /**
* @return {?}
*/function () {
_this.loadComponent();
}), 10);
};
/**
* @return {?}
*/
NgModalsComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.loadComponent();
this.viewIsInit = true;
};
/**
* @return {?}
*/
NgModalsComponent.prototype.loadComponent = /**
* @return {?}
*/
function () {
var _this = this;
if (this.condition) {
/** @type {?} */
var contain = document.getElementById('modelContainer');
if (this.options.ignore) {
if (this.options.width) {
contain.style.width = this.options.width + "vw";
contain.style.left = this.options.left + "vw";
}
if (this.options.height) {
contain.style.height = this.options.height + "vh";
contain.style.top = ((100 - (parseInt(this.options.height))) / 2) + "vh";
}
}
else {
if (this.options.width) {
contain.style.width = this.options.width + "vw";
contain.style.left = ((100 - (parseInt(this.options.width))) / 2) + "vw";
}
if (this.options.height) {
contain.style.height = this.options.height + "vh";
contain.style.top = ((100 - (parseInt(this.options.height))) / 2) + "vh";
}
}
if (this.options.background) {
contain.style.background = this.options.background;
contain.style.boxShadow = 'none';
}
/** @type {?} */
var factory = this.componentFactoryResolver.resolveComponentFactory(this.options.component);
/** @type {?} */
var container = this.modalDirective.containers;
container.clear();
/** @type {?} */
var component = container.createComponent(factory);
(( /** @type {?} */(component.instance))).data = this.options.data;
(( /** @type {?} */(component.instance))).toggleModal.subscribe(( /**
* @param {?} data
* @return {?}
*/function (data) {
_this.closeModal();
}));
document.getElementById("mainWrapper").style.opacity = "1";
this.initialClick = true;
}
};
/**
* @return {?}
*/
NgModalsComponent.prototype.closeModal = /**
* @return {?}
*/
function () {
var _this = this;
this.initialClick = false;
document.getElementById("mainWrapper").style.opacity = "0";
setTimeout(( /**
* @return {?}
*/function () {
_this.close.emit();
}), 200);
};
NgModalsComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-modals',
template: "\n <div class=\"mainWrapper\" *ngIf=\"condition\" id=\"mainWrapper\">\n <div class=\"modalContainer\" id=\"modelContainer\" #container>\n <ng-template ngmodals></ng-template>\n </div>\n </div>\n ",
styles: ["\n .mainWrapper{\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0,0,0,0.5);\n width: 100%;\n height: 100vh;\n opacity: 0;\n transition: opacity 0.2s ease-out;\n z-index: 1000;\n }\n .modalContainer{\n position: fixed;\n top: 15vh;\n left: 20vw;\n width: 60vw;\n height: 70vh;\n background: white;\n border-radius: 32px;\n box-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n overflow-y: auto;\n }\n "]
}] }
];
/** @nocollapse */
NgModalsComponent.ctorParameters = function () {
return [
{ type: core.ComponentFactoryResolver }
];
};
NgModalsComponent.propDecorators = {
options: [{ type: core.Input, args: ['options',] }],
condition: [{ type: core.Input, args: ['status',] }],
close: [{ type: core.Output, args: ['close',] }],
modalDirective: [{ type: core.ViewChild, args: [NgModalsDirective,] }],
container: [{ type: core.ViewChild, args: ['container',] }],
onclick: [{ type: core.HostListener, args: ['document:click', ['$event.target'],] }]
};
return NgModalsComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgModalsModule = /** @class */ (function () {
function NgModalsModule() {
}
NgModalsModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
NgModalsComponent,
NgModalsDirective
],
imports: [
platformBrowser.BrowserModule
],
exports: [NgModalsComponent]
},] }
];
return NgModalsModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.NgModalsDirective = NgModalsDirective;
exports.NgModalsComponent = NgModalsComponent;
exports.NgModalsModule = NgModalsModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-modals.umd.js.map