modalicious
Version:
A modal service for Angular
116 lines • 11.8 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, HostBinding, HostListener, Input, ViewChild } from '@angular/core';
import { ModalHostDirective } from '../modal-host/modal-host.directive';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ModalInstanceService } from "../services/modal-instance.service";
var ModalContainerComponent = /** @class */ (function () {
function ModalContainerComponent(modalInstanceService) {
this.modalInstanceService = modalInstanceService;
this.useFixedPosition = false;
this.showContent = false;
this.showBackdrop = true;
}
Object.defineProperty(ModalContainerComponent.prototype, "backdrop", {
get: function () {
return this.showBackdrop ? 'active' : 'inactive';
},
enumerable: true,
configurable: true
});
Object.defineProperty(ModalContainerComponent.prototype, "content", {
get: function () {
return this.showContent ? 'visible' : 'hidden';
},
enumerable: true,
configurable: true
});
ModalContainerComponent.prototype.onKeyDown = function (event) {
if (event.key === 'Escape') {
this.modalInstanceService.cancel('Escape key hit');
event.preventDefault();
}
};
Object.defineProperty(ModalContainerComponent.prototype, "positionStyle", {
get: function () {
return this.useFixedPosition ? 'fixed' : 'absolute';
},
enumerable: true,
configurable: true
});
ModalContainerComponent.prototype.ngAfterViewInit = function () {
var _this = this;
setTimeout(function () {
_this.showContent = true;
}, 50);
};
ModalContainerComponent.prototype.hide = function () {
var _this = this;
return new Promise(function (resolve) {
_this.showBackdrop = false;
setTimeout(function () {
resolve();
}, 200);
});
};
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], ModalContainerComponent.prototype, "useFixedPosition", void 0);
tslib_1.__decorate([
ViewChild(ModalHostDirective, { static: true }),
tslib_1.__metadata("design:type", ModalHostDirective)
], ModalContainerComponent.prototype, "modalHost", void 0);
tslib_1.__decorate([
HostListener('keydown', ['$event']),
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [KeyboardEvent]),
tslib_1.__metadata("design:returntype", void 0)
], ModalContainerComponent.prototype, "onKeyDown", null);
tslib_1.__decorate([
HostBinding('style.position'),
tslib_1.__metadata("design:type", Object),
tslib_1.__metadata("design:paramtypes", [])
], ModalContainerComponent.prototype, "positionStyle", null);
ModalContainerComponent = tslib_1.__decorate([
Component({
selector: 'mod-modal-container',
template: "<div class=\"mod-modal-table\" [@backdrop]=\"backdrop\">\r\n <div class=\"mod-modal-table-cell\">\r\n <div class=\"mod-modal-content\" [@content]=\"content\">\r\n <ng-template mod-modal-host></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n",
animations: [
trigger('backdrop', [
state('inactive', style({
opacity: 0
})),
state('active', style({
backgroundColor: 'rgba(0, 0, 0, .85)',
opacity: 1
})),
transition('void => active', [
style({ backgroundColor: 'rgba(0,0,0,0)' }),
animate('50ms ease-in')
]),
transition('active => inactive', [
animate('150ms ease-out')
])
]),
trigger('content', [
state('hidden', style({
opacity: 0,
transform: 'translateY(50px)'
})),
state('visible', style({
opacity: 1,
transform: 'translateY(0)'
})),
transition('hidden => visible', [
animate('150ms ease-in')
])
])
],
styles: [":host{overflow-x:hidden;overflow-y:auto;left:0;top:0;right:0;bottom:0;display:block;background-color:rgba(0,0,0,0)}:host .mod-modal-table-cell{display:table-cell;vertical-align:middle;text-align:center;padding:0}:host .mod-modal-table{width:100%;height:100%;display:table}:host .mod-modal-content{display:inline-block;width:100%}"]
}),
tslib_1.__metadata("design:paramtypes", [ModalInstanceService])
], ModalContainerComponent);
return ModalContainerComponent;
}());
export { ModalContainerComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vZGFsaWNpb3VzLyIsInNvdXJjZXMiOlsibW9kYWwtY29udGFpbmVyL21vZGFsLWNvbnRhaW5lci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN4RSxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ2hGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBdUMxRTtJQThCRSxpQ0FBb0Isb0JBQTBDO1FBQTFDLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBc0I7UUE1QnJELHFCQUFnQixHQUFZLEtBQUssQ0FBQztRQVEzQyxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixpQkFBWSxHQUFZLElBQUksQ0FBQztJQW9CN0IsQ0FBQztJQXpCRCxzQkFBSSw2Q0FBUTthQUFaO1lBQ0UsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQztRQUNuRCxDQUFDOzs7T0FBQTtJQUtELHNCQUFJLDRDQUFPO2FBQVg7WUFDRSxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO1FBQ2pELENBQUM7OztPQUFBO0lBR0QsMkNBQVMsR0FBVCxVQUFVLEtBQW9CO1FBQzVCLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxRQUFRLEVBQUU7WUFDMUIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1lBQ25ELEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztTQUN4QjtJQUNILENBQUM7SUFHRCxzQkFBVyxrREFBYTthQUF4QjtZQUNFLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQztRQUN0RCxDQUFDOzs7T0FBQTtJQUtELGlEQUFlLEdBQWY7UUFBQSxpQkFJQztRQUhDLFVBQVUsQ0FBQztZQUNULEtBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1FBQzFCLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNULENBQUM7SUFFRCxzQ0FBSSxHQUFKO1FBQUEsaUJBT0M7UUFOQyxPQUFPLElBQUksT0FBTyxDQUFDLFVBQUEsT0FBTztZQUN4QixLQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztZQUMxQixVQUFVLENBQUM7Z0JBQ1QsT0FBTyxFQUFFLENBQUM7WUFDWixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDVixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUE1Q1E7UUFBUixLQUFLLEVBQUU7O3FFQUFtQztJQUVNO1FBQWhELFNBQVMsQ0FBQyxrQkFBa0IsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQzswQ0FBbUIsa0JBQWtCOzhEQUFDO0lBY3RGO1FBREMsWUFBWSxDQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDOztpREFDbkIsYUFBYTs7NERBSzdCO0lBR0Q7UUFEQyxXQUFXLENBQUMsZ0JBQWdCLENBQUM7OztnRUFHN0I7SUE1QlUsdUJBQXVCO1FBckNuQyxTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUscUJBQXFCO1lBQy9CLDBRQUErQztZQUUvQyxVQUFVLEVBQUU7Z0JBQ1YsT0FBTyxDQUFDLFVBQVUsRUFBRTtvQkFDbEIsS0FBSyxDQUFDLFVBQVUsRUFBRSxLQUFLLENBQUM7d0JBQ3RCLE9BQU8sRUFBRSxDQUFDO3FCQUNYLENBQUMsQ0FBQztvQkFDSCxLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQzt3QkFDcEIsZUFBZSxFQUFFLG9CQUFvQjt3QkFDckMsT0FBTyxFQUFFLENBQUM7cUJBQ1gsQ0FBQyxDQUFDO29CQUNILFVBQVUsQ0FBQyxnQkFBZ0IsRUFBRTt3QkFDM0IsS0FBSyxDQUFDLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxDQUFDO3dCQUMzQyxPQUFPLENBQUMsY0FBYyxDQUFDO3FCQUN4QixDQUFDO29CQUNGLFVBQVUsQ0FBQyxvQkFBb0IsRUFBRTt3QkFDL0IsT0FBTyxDQUFDLGdCQUFnQixDQUFDO3FCQUMxQixDQUFDO2lCQUNILENBQUM7Z0JBQ0YsT0FBTyxDQUFDLFNBQVMsRUFBRTtvQkFDakIsS0FBSyxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUM7d0JBQ3BCLE9BQU8sRUFBRSxDQUFDO3dCQUNWLFNBQVMsRUFBRSxrQkFBa0I7cUJBQzlCLENBQUMsQ0FBQztvQkFDSCxLQUFLLENBQUMsU0FBUyxFQUFFLEtBQUssQ0FBQzt3QkFDckIsT0FBTyxFQUFFLENBQUM7d0JBQ1YsU0FBUyxFQUFFLGVBQWU7cUJBQzNCLENBQUMsQ0FBQztvQkFDSCxVQUFVLENBQUMsbUJBQW1CLEVBQUU7d0JBQzlCLE9BQU8sQ0FBQyxlQUFlLENBQUM7cUJBQ3pCLENBQUM7aUJBQ0gsQ0FBQzthQUNIOztTQUNGLENBQUM7aURBZ0MwQyxvQkFBb0I7T0E5Qm5ELHVCQUF1QixDQStDbkM7SUFBRCw4QkFBQztDQUFBLEFBL0NELElBK0NDO1NBL0NZLHVCQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNb2RhbEhvc3REaXJlY3RpdmUgfSBmcm9tICcuLi9tb2RhbC1ob3N0L21vZGFsLWhvc3QuZGlyZWN0aXZlJztcbmltcG9ydCB7IGFuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnXG5pbXBvcnQgeyBNb2RhbEluc3RhbmNlU2VydmljZSB9IGZyb20gXCIuLi9zZXJ2aWNlcy9tb2RhbC1pbnN0YW5jZS5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21vZC1tb2RhbC1jb250YWluZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9kYWwtY29udGFpbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbW9kYWwtY29udGFpbmVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdiYWNrZHJvcCcsIFtcbiAgICAgIHN0YXRlKCdpbmFjdGl2ZScsIHN0eWxlKHtcbiAgICAgICAgb3BhY2l0eTogMFxuICAgICAgfSkpLFxuICAgICAgc3RhdGUoJ2FjdGl2ZScsIHN0eWxlKHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAncmdiYSgwLCAwLCAwLCAuODUpJyxcbiAgICAgICAgb3BhY2l0eTogMVxuICAgICAgfSkpLFxuICAgICAgdHJhbnNpdGlvbigndm9pZCA9PiBhY3RpdmUnLCBbXG4gICAgICAgIHN0eWxlKHsgYmFja2dyb3VuZENvbG9yOiAncmdiYSgwLDAsMCwwKScgfSksXG4gICAgICAgIGFuaW1hdGUoJzUwbXMgZWFzZS1pbicpXG4gICAgICBdKSxcbiAgICAgIHRyYW5zaXRpb24oJ2FjdGl2ZSA9PiBpbmFjdGl2ZScsIFtcbiAgICAgICAgYW5pbWF0ZSgnMTUwbXMgZWFzZS1vdXQnKVxuICAgICAgXSlcbiAgICBdKSxcbiAgICB0cmlnZ2VyKCdjb250ZW50JywgW1xuICAgICAgc3RhdGUoJ2hpZGRlbicsIHN0eWxlKHtcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSg1MHB4KSdcbiAgICAgIH0pKSxcbiAgICAgIHN0YXRlKCd2aXNpYmxlJywgc3R5bGUoe1xuICAgICAgICBvcGFjaXR5OiAxLFxuICAgICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKDApJ1xuICAgICAgfSkpLFxuICAgICAgdHJhbnNpdGlvbignaGlkZGVuID0+IHZpc2libGUnLCBbXG4gICAgICAgIGFuaW1hdGUoJzE1MG1zIGVhc2UtaW4nKVxuICAgICAgXSlcbiAgICBdKVxuICBdXG59KVxuXG5leHBvcnQgY2xhc3MgTW9kYWxDb250YWluZXJDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcblxuICBASW5wdXQoKSB1c2VGaXhlZFBvc2l0aW9uOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQFZpZXdDaGlsZChNb2RhbEhvc3REaXJlY3RpdmUsIHsgc3RhdGljOiB0cnVlIH0pIHB1YmxpYyBtb2RhbEhvc3Q6IE1vZGFsSG9zdERpcmVjdGl2ZTtcblxuICBnZXQgYmFja2Ryb3AoKSB7XG4gICAgcmV0dXJuIHRoaXMuc2hvd0JhY2tkcm9wID8gJ2FjdGl2ZScgOiAnaW5hY3RpdmUnO1xuICB9XG5cbiAgc2hvd0NvbnRlbnQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgc2hvd0JhY2tkcm9wOiBib29sZWFuID0gdHJ1ZTtcblxuICBnZXQgY29udGVudCgpIHtcbiAgICByZXR1cm4gdGhpcy5zaG93Q29udGVudCA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bicsIFsnJGV2ZW50J10pXG4gIG9uS2V5RG93bihldmVudDogS2V5Ym9hcmRFdmVudCkge1xuICAgIGlmIChldmVudC5rZXkgPT09ICdFc2NhcGUnKSB7XG4gICAgICB0aGlzLm1vZGFsSW5zdGFuY2VTZXJ2aWNlLmNhbmNlbCgnRXNjYXBlIGtleSBoaXQnKTtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5wb3NpdGlvbicpXG4gIHB1YmxpYyBnZXQgcG9zaXRpb25TdHlsZSgpIHtcbiAgICByZXR1cm4gdGhpcy51c2VGaXhlZFBvc2l0aW9uID8gJ2ZpeGVkJyA6ICdhYnNvbHV0ZSc7XG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG1vZGFsSW5zdGFuY2VTZXJ2aWNlOiBNb2RhbEluc3RhbmNlU2VydmljZSkge1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5zaG93Q29udGVudCA9IHRydWU7XG4gICAgfSwgNTApO1xuICB9XG5cbiAgaGlkZSgpOiBQcm9taXNlPHZvaWQ+IHtcbiAgICByZXR1cm4gbmV3IFByb21pc2UocmVzb2x2ZSA9PiB7XG4gICAgICB0aGlzLnNob3dCYWNrZHJvcCA9IGZhbHNlO1xuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHJlc29sdmUoKTtcbiAgICAgIH0sIDIwMCk7XG4gICAgfSk7XG4gIH1cbn1cbiJdfQ==