ngx-simple-modal
Version:
A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.
70 lines • 9.34 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, ComponentFactoryResolver, ElementRef, OnDestroy, ReflectiveInjector, Type, ViewChild, ViewContainerRef, ComponentRef, } from '@angular/core';
/**
* The modal backdrop wrapping wrapper to the modal
*/
var SimpleModalWrapperComponent = /** @class */ (function () {
/**
* Constructor
* @param {ComponentFactoryResolver} resolver
*/
function SimpleModalWrapperComponent(resolver) {
this.resolver = resolver;
/**
* Wrapper modal and fade classes
*/
this.modalClasses = 'modal fade-anim';
}
/**
* Adds content modal component to wrapper
* @param {Type<SimpleModalComponent>} component
* @return {SimpleModalComponent}
*/
SimpleModalWrapperComponent.prototype.addComponent = function (component) {
var factory = this.resolver.resolveComponentFactory(component);
var injector = ReflectiveInjector.fromResolvedProviders([], this.viewContainer.injector);
var componentRef = factory.create(injector);
this.viewContainer.insert(componentRef.hostView);
this.content = componentRef.instance;
this.content.wrapper = this.wrapper;
return { ref: componentRef, component: this.content };
};
/**
* Configures the function to call when you click on background of a modal but not the contents
* @param callback
*/
SimpleModalWrapperComponent.prototype.onClickOutsideModalContent = function (callback) {
var containerEl = this.wrapper.nativeElement;
this.clickOutsideCallback = function (event) {
if (event.target === containerEl) {
callback();
}
};
containerEl.addEventListener('click', this.clickOutsideCallback, false);
};
SimpleModalWrapperComponent.prototype.ngOnDestroy = function () {
if (this.clickOutsideCallback) {
var containerEl = this.wrapper.nativeElement;
containerEl.removeEventListener('click', this.clickOutsideCallback, false);
this.clickOutsideCallback = null;
}
};
SimpleModalWrapperComponent.ctorParameters = function () { return [
{ type: ComponentFactoryResolver }
]; };
tslib_1.__decorate([
ViewChild('viewContainer', { read: ViewContainerRef, static: true })
], SimpleModalWrapperComponent.prototype, "viewContainer", void 0);
tslib_1.__decorate([
ViewChild('wrapper', { read: ElementRef, static: true })
], SimpleModalWrapperComponent.prototype, "wrapper", void 0);
SimpleModalWrapperComponent = tslib_1.__decorate([
Component({
selector: 'simple-modal-wrapper',
template: "\n <div #wrapper [ngClass]=\"modalClasses\" [ngStyle]=\"{ display: 'block' }\" role=\"dialog\">\n <ng-template #viewContainer></ng-template>\n </div>\n "
})
], SimpleModalWrapperComponent);
return SimpleModalWrapperComponent;
}());
export { SimpleModalWrapperComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2ltcGxlLW1vZGFsLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXNpbXBsZS1tb2RhbC8iLCJzb3VyY2VzIjpbInNpbXBsZS1tb2RhbC9zaW1wbGUtbW9kYWwtd3JhcHBlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1Qsd0JBQXdCLEVBQ3hCLFVBQVUsRUFDVixTQUFTLEVBQ1Qsa0JBQWtCLEVBQ2xCLElBQUksRUFDSixTQUFTLEVBQ1QsZ0JBQWdCLEVBQUUsWUFBWSxHQUMvQixNQUFNLGVBQWUsQ0FBQztBQUd2Qjs7R0FFRztBQVNIO0lBNEJFOzs7T0FHRztJQUNILHFDQUFvQixRQUFrQztRQUFsQyxhQUFRLEdBQVIsUUFBUSxDQUEwQjtRQXBCdEQ7O1dBRUc7UUFDSCxpQkFBWSxHQUFHLGlCQUFpQixDQUFDO0lBaUJ3QixDQUFDO0lBRTFEOzs7O09BSUc7SUFDSCxrREFBWSxHQUFaLFVBQW9CLFNBQTRDO1FBQzlELElBQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsdUJBQXVCLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDakUsSUFBTSxRQUFRLEdBQUcsa0JBQWtCLENBQUMscUJBQXFCLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDM0YsSUFBTSxZQUFZLEdBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUM5QyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDakQsSUFBSSxDQUFDLE9BQU8sR0FBZ0MsWUFBWSxDQUFDLFFBQVEsQ0FBQztRQUNsRSxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBQ3BDLE9BQU8sRUFBQyxHQUFHLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFDLENBQUM7SUFDdEQsQ0FBQztJQUVEOzs7T0FHRztJQUNILGdFQUEwQixHQUExQixVQUEyQixRQUFvQjtRQUM3QyxJQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQztRQUUvQyxJQUFJLENBQUMsb0JBQW9CLEdBQUcsVUFBQyxLQUFpQjtZQUM1QyxJQUFJLEtBQUssQ0FBQyxNQUFNLEtBQUssV0FBVyxFQUFFO2dCQUNoQyxRQUFRLEVBQUUsQ0FBQzthQUNaO1FBQ0gsQ0FBQyxDQUFDO1FBRUYsV0FBVyxDQUFDLGdCQUFnQixDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsb0JBQW9CLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDMUUsQ0FBQztJQUVELGlEQUFXLEdBQVg7UUFDRSxJQUFJLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtZQUM3QixJQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQztZQUMvQyxXQUFXLENBQUMsbUJBQW1CLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxLQUFLLENBQUMsQ0FBQztZQUMzRSxJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQzs7Z0JBdkM2Qix3QkFBd0I7O0lBNUJnQjtRQUFyRSxTQUFTLENBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQztzRUFBZTtJQU1wRjtRQURDLFNBQVMsQ0FBQyxTQUFTLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQztnRUFDckM7SUFWVCwyQkFBMkI7UUFSdkMsU0FBUyxDQUFDO1lBQ1QsUUFBUSxFQUFFLHNCQUFzQjtZQUNoQyxRQUFRLEVBQUUsc0tBSVQ7U0FDRixDQUFDO09BQ1csMkJBQTJCLENBd0V2QztJQUFELGtDQUFDO0NBQUEsQUF4RUQsSUF3RUM7U0F4RVksMkJBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gIEVsZW1lbnRSZWYsXG4gIE9uRGVzdHJveSxcbiAgUmVmbGVjdGl2ZUluamVjdG9yLFxuICBUeXBlLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWYsIENvbXBvbmVudFJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTaW1wbGVNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vc2ltcGxlLW1vZGFsLmNvbXBvbmVudCc7XG5cbi8qKlxuICogVGhlIG1vZGFsIGJhY2tkcm9wIHdyYXBwaW5nIHdyYXBwZXIgdG8gdGhlIG1vZGFsXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NpbXBsZS1tb2RhbC13cmFwcGVyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2ICN3cmFwcGVyIFtuZ0NsYXNzXT1cIm1vZGFsQ2xhc3Nlc1wiIFtuZ1N0eWxlXT1cInsgZGlzcGxheTogJ2Jsb2NrJyB9XCIgcm9sZT1cImRpYWxvZ1wiPlxuICAgICAgPG5nLXRlbXBsYXRlICN2aWV3Q29udGFpbmVyPjwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIFNpbXBsZU1vZGFsV3JhcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBUYXJnZXQgdmlld0NvbnRhaW5lciB0byBpbnNlcnQgbW9kYWwgY29udGVudCBjb21wb25lbnRcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3ZpZXdDb250YWluZXInLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYsIHN0YXRpYzogdHJ1ZSB9KSB2aWV3Q29udGFpbmVyO1xuXG4gIC8qKlxuICAgKiBMaW5rIHdyYXBwZXIgRE9NIGVsZW1lbnRcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3dyYXBwZXInLCB7IHJlYWQ6IEVsZW1lbnRSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICB3cmFwcGVyOiBFbGVtZW50UmVmO1xuXG4gIC8qKlxuICAgKiBXcmFwcGVyIG1vZGFsIGFuZCBmYWRlIGNsYXNzZXNcbiAgICovXG4gIG1vZGFsQ2xhc3NlcyA9ICdtb2RhbCBmYWRlLWFuaW0nO1xuXG4gIC8qKlxuICAgKiBEaWFsb2cgY29udGVudCBjb21wb25ldFxuICAgKiBAdHlwZSB7U2ltcGxlTW9kYWxDb21wb25lbnR9XG4gICAqL1xuICBjb250ZW50OiBTaW1wbGVNb2RhbENvbXBvbmVudDxhbnksIGFueT47XG5cbiAgLyoqXG4gICAqIENsaWNrIG91dHNpZGUgY2FsbGJhY2tcbiAgICovXG4gIGNsaWNrT3V0c2lkZUNhbGxiYWNrOiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIENvbnN0cnVjdG9yXG4gICAqIEBwYXJhbSB7Q29tcG9uZW50RmFjdG9yeVJlc29sdmVyfSByZXNvbHZlclxuICAgKi9cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZXNvbHZlcjogQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyKSB7fVxuXG4gIC8qKlxuICAgKiBBZGRzIGNvbnRlbnQgbW9kYWwgY29tcG9uZW50IHRvIHdyYXBwZXJcbiAgICogQHBhcmFtIHtUeXBlPFNpbXBsZU1vZGFsQ29tcG9uZW50Pn0gY29tcG9uZW50XG4gICAqIEByZXR1cm4ge1NpbXBsZU1vZGFsQ29tcG9uZW50fVxuICAgKi9cbiAgYWRkQ29tcG9uZW50PFQsIFQxPihjb21wb25lbnQ6IFR5cGU8U2ltcGxlTW9kYWxDb21wb25lbnQ8VCwgVDE+Pik6IHtyZWY6IENvbXBvbmVudFJlZjxTaW1wbGVNb2RhbENvbXBvbmVudDxULCBUMT4+LCBjb21wb25lbnQ6IFNpbXBsZU1vZGFsQ29tcG9uZW50PFQsIFQxPn0ge1xuICAgIGNvbnN0IGZhY3RvcnkgPSB0aGlzLnJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KGNvbXBvbmVudCk7XG4gICAgY29uc3QgaW5qZWN0b3IgPSBSZWZsZWN0aXZlSW5qZWN0b3IuZnJvbVJlc29sdmVkUHJvdmlkZXJzKFtdLCB0aGlzLnZpZXdDb250YWluZXIuaW5qZWN0b3IpO1xuICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IGZhY3RvcnkuY3JlYXRlKGluamVjdG9yKTtcbiAgICB0aGlzLnZpZXdDb250YWluZXIuaW5zZXJ0KGNvbXBvbmVudFJlZi5ob3N0Vmlldyk7XG4gICAgdGhpcy5jb250ZW50ID0gPFNpbXBsZU1vZGFsQ29tcG9uZW50PFQsIFQxPj5jb21wb25lbnRSZWYuaW5zdGFuY2U7XG4gICAgdGhpcy5jb250ZW50LndyYXBwZXIgPSB0aGlzLndyYXBwZXI7XG4gICAgcmV0dXJuIHtyZWY6IGNvbXBvbmVudFJlZiwgY29tcG9uZW50OiB0aGlzLmNvbnRlbnR9O1xuICB9XG5cbiAgLyoqXG4gICAqIENvbmZpZ3VyZXMgdGhlIGZ1bmN0aW9uIHRvIGNhbGwgd2hlbiB5b3UgY2xpY2sgb24gYmFja2dyb3VuZCBvZiBhIG1vZGFsIGJ1dCBub3QgdGhlIGNvbnRlbnRzXG4gICAqIEBwYXJhbSBjYWxsYmFja1xuICAgKi9cbiAgb25DbGlja091dHNpZGVNb2RhbENvbnRlbnQoY2FsbGJhY2s6ICgpID0+IHZvaWQpIHtcbiAgICBjb25zdCBjb250YWluZXJFbCA9IHRoaXMud3JhcHBlci5uYXRpdmVFbGVtZW50O1xuXG4gICAgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjayA9IChldmVudDogTW91c2VFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LnRhcmdldCA9PT0gY29udGFpbmVyRWwpIHtcbiAgICAgICAgY2FsbGJhY2soKTtcbiAgICAgIH1cbiAgICB9O1xuXG4gICAgY29udGFpbmVyRWwuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrLCBmYWxzZSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5jbGlja091dHNpZGVDYWxsYmFjaykge1xuICAgICAgY29uc3QgY29udGFpbmVyRWwgPSB0aGlzLndyYXBwZXIubmF0aXZlRWxlbWVudDtcbiAgICAgIGNvbnRhaW5lckVsLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjaywgZmFsc2UpO1xuICAgICAgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjayA9IG51bGw7XG4gICAgfVxuICB9XG59XG4iXX0=