ng-modals
Version:
Make a modal in angular extremely easily with ng-modals. Installation to have a modal pop up is quick and easy.
213 lines (206 loc) • 7.74 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewChild, ComponentFactoryResolver, Directive, ViewContainerRef, HostListener, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
/**
* @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: Directive, args: [{
selector: '[ngmodals]'
},] }
];
/** @nocollapse */
NgModalsDirective.ctorParameters = function () { return [
{ type: ViewContainerRef }
]; };
return NgModalsDirective;
}());
var NgModalsComponent = /** @class */ (function () {
function NgModalsComponent(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
this.close = new 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: 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: ComponentFactoryResolver }
]; };
NgModalsComponent.propDecorators = {
options: [{ type: Input, args: ['options',] }],
condition: [{ type: Input, args: ['status',] }],
close: [{ type: Output, args: ['close',] }],
modalDirective: [{ type: ViewChild, args: [NgModalsDirective,] }],
container: [{ type: ViewChild, args: ['container',] }],
onclick: [{ type: 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: NgModule, args: [{
declarations: [
NgModalsComponent,
NgModalsDirective
],
imports: [
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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgModalsDirective, NgModalsComponent, NgModalsModule };
//# sourceMappingURL=ng-modals.js.map