modalicious
Version:
A modal service for Angular
101 lines • 10.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";
let ModalContainerComponent = class ModalContainerComponent {
constructor(modalInstanceService) {
this.modalInstanceService = modalInstanceService;
this.useFixedPosition = false;
this.showContent = false;
this.showBackdrop = true;
}
get backdrop() {
return this.showBackdrop ? 'active' : 'inactive';
}
get content() {
return this.showContent ? 'visible' : 'hidden';
}
onKeyDown(event) {
if (event.key === 'Escape') {
this.modalInstanceService.cancel('Escape key hit');
event.preventDefault();
}
}
get positionStyle() {
return this.useFixedPosition ? 'fixed' : 'absolute';
}
ngAfterViewInit() {
setTimeout(() => {
this.showContent = true;
}, 50);
}
hide() {
return new Promise(resolve => {
this.showBackdrop = false;
setTimeout(() => {
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);
export { ModalContainerComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL21vZGFsaWNpb3VzLyIsInNvdXJjZXMiOlsibW9kYWwtY29udGFpbmVyL21vZGFsLWNvbnRhaW5lci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN4RSxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ2hGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBdUMxRSxJQUFhLHVCQUF1QixHQUFwQyxNQUFhLHVCQUF1QjtJQThCbEMsWUFBb0Isb0JBQTBDO1FBQTFDLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBc0I7UUE1QnJELHFCQUFnQixHQUFZLEtBQUssQ0FBQztRQVEzQyxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixpQkFBWSxHQUFZLElBQUksQ0FBQztJQW9CN0IsQ0FBQztJQXpCRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDO0lBQ25ELENBQUM7SUFLRCxJQUFJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO0lBQ2pELENBQUM7SUFHRCxTQUFTLENBQUMsS0FBb0I7UUFDNUIsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFFBQVEsRUFBRTtZQUMxQixJQUFJLENBQUMsb0JBQW9CLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7WUFDbkQsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQztJQUdELElBQVcsYUFBYTtRQUN0QixPQUFPLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUM7SUFDdEQsQ0FBQztJQUtELGVBQWU7UUFDYixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7UUFDMUIsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ1QsQ0FBQztJQUVELElBQUk7UUFDRixPQUFPLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQzNCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1lBQzFCLFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2QsT0FBTyxFQUFFLENBQUM7WUFDWixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDVixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7Q0FDRixDQUFBO0FBN0NVO0lBQVIsS0FBSyxFQUFFOztpRUFBbUM7QUFFTTtJQUFoRCxTQUFTLENBQUMsa0JBQWtCLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUM7c0NBQW1CLGtCQUFrQjswREFBQztBQWN0RjtJQURDLFlBQVksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQzs7NkNBQ25CLGFBQWE7O3dEQUs3QjtBQUdEO0lBREMsV0FBVyxDQUFDLGdCQUFnQixDQUFDOzs7NERBRzdCO0FBNUJVLHVCQUF1QjtJQXJDbkMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLHFCQUFxQjtRQUMvQiwwUUFBK0M7UUFFL0MsVUFBVSxFQUFFO1lBQ1YsT0FBTyxDQUFDLFVBQVUsRUFBRTtnQkFDbEIsS0FBSyxDQUFDLFVBQVUsRUFBRSxLQUFLLENBQUM7b0JBQ3RCLE9BQU8sRUFBRSxDQUFDO2lCQUNYLENBQUMsQ0FBQztnQkFDSCxLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQztvQkFDcEIsZUFBZSxFQUFFLG9CQUFvQjtvQkFDckMsT0FBTyxFQUFFLENBQUM7aUJBQ1gsQ0FBQyxDQUFDO2dCQUNILFVBQVUsQ0FBQyxnQkFBZ0IsRUFBRTtvQkFDM0IsS0FBSyxDQUFDLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxDQUFDO29CQUMzQyxPQUFPLENBQUMsY0FBYyxDQUFDO2lCQUN4QixDQUFDO2dCQUNGLFVBQVUsQ0FBQyxvQkFBb0IsRUFBRTtvQkFDL0IsT0FBTyxDQUFDLGdCQUFnQixDQUFDO2lCQUMxQixDQUFDO2FBQ0gsQ0FBQztZQUNGLE9BQU8sQ0FBQyxTQUFTLEVBQUU7Z0JBQ2pCLEtBQUssQ0FBQyxRQUFRLEVBQUUsS0FBSyxDQUFDO29CQUNwQixPQUFPLEVBQUUsQ0FBQztvQkFDVixTQUFTLEVBQUUsa0JBQWtCO2lCQUM5QixDQUFDLENBQUM7Z0JBQ0gsS0FBSyxDQUFDLFNBQVMsRUFBRSxLQUFLLENBQUM7b0JBQ3JCLE9BQU8sRUFBRSxDQUFDO29CQUNWLFNBQVMsRUFBRSxlQUFlO2lCQUMzQixDQUFDLENBQUM7Z0JBQ0gsVUFBVSxDQUFDLG1CQUFtQixFQUFFO29CQUM5QixPQUFPLENBQUMsZUFBZSxDQUFDO2lCQUN6QixDQUFDO2FBQ0gsQ0FBQztTQUNIOztLQUNGLENBQUM7NkNBZ0MwQyxvQkFBb0I7R0E5Qm5ELHVCQUF1QixDQStDbkM7U0EvQ1ksdUJBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1vZGFsSG9zdERpcmVjdGl2ZSB9IGZyb20gJy4uL21vZGFsLWhvc3QvbW9kYWwtaG9zdC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgYW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucydcbmltcG9ydCB7IE1vZGFsSW5zdGFuY2VTZXJ2aWNlIH0gZnJvbSBcIi4uL3NlcnZpY2VzL21vZGFsLWluc3RhbmNlLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbW9kLW1vZGFsLWNvbnRhaW5lcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC1jb250YWluZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tb2RhbC1jb250YWluZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2JhY2tkcm9wJywgW1xuICAgICAgc3RhdGUoJ2luYWN0aXZlJywgc3R5bGUoe1xuICAgICAgICBvcGFjaXR5OiAwXG4gICAgICB9KSksXG4gICAgICBzdGF0ZSgnYWN0aXZlJywgc3R5bGUoe1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICdyZ2JhKDAsIDAsIDAsIC44NSknLFxuICAgICAgICBvcGFjaXR5OiAxXG4gICAgICB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IGFjdGl2ZScsIFtcbiAgICAgICAgc3R5bGUoeyBiYWNrZ3JvdW5kQ29sb3I6ICdyZ2JhKDAsMCwwLDApJyB9KSxcbiAgICAgICAgYW5pbWF0ZSgnNTBtcyBlYXNlLWluJylcbiAgICAgIF0pLFxuICAgICAgdHJhbnNpdGlvbignYWN0aXZlID0+IGluYWN0aXZlJywgW1xuICAgICAgICBhbmltYXRlKCcxNTBtcyBlYXNlLW91dCcpXG4gICAgICBdKVxuICAgIF0pLFxuICAgIHRyaWdnZXIoJ2NvbnRlbnQnLCBbXG4gICAgICBzdGF0ZSgnaGlkZGVuJywgc3R5bGUoe1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKDUwcHgpJ1xuICAgICAgfSkpLFxuICAgICAgc3RhdGUoJ3Zpc2libGUnLCBzdHlsZSh7XG4gICAgICAgIG9wYWNpdHk6IDEsXG4gICAgICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoMCknXG4gICAgICB9KSksXG4gICAgICB0cmFuc2l0aW9uKCdoaWRkZW4gPT4gdmlzaWJsZScsIFtcbiAgICAgICAgYW5pbWF0ZSgnMTUwbXMgZWFzZS1pbicpXG4gICAgICBdKVxuICAgIF0pXG4gIF1cbn0pXG5cbmV4cG9ydCBjbGFzcyBNb2RhbENvbnRhaW5lckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuXG4gIEBJbnB1dCgpIHVzZUZpeGVkUG9zaXRpb246IGJvb2xlYW4gPSBmYWxzZTtcblxuICBAVmlld0NoaWxkKE1vZGFsSG9zdERpcmVjdGl2ZSwgeyBzdGF0aWM6IHRydWUgfSkgcHVibGljIG1vZGFsSG9zdDogTW9kYWxIb3N0RGlyZWN0aXZlO1xuXG4gIGdldCBiYWNrZHJvcCgpIHtcbiAgICByZXR1cm4gdGhpcy5zaG93QmFja2Ryb3AgPyAnYWN0aXZlJyA6ICdpbmFjdGl2ZSc7XG4gIH1cblxuICBzaG93Q29udGVudDogYm9vbGVhbiA9IGZhbHNlO1xuICBzaG93QmFja2Ryb3A6IGJvb2xlYW4gPSB0cnVlO1xuXG4gIGdldCBjb250ZW50KCkge1xuICAgIHJldHVybiB0aGlzLnNob3dDb250ZW50ID8gJ3Zpc2libGUnIDogJ2hpZGRlbic7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duJywgWyckZXZlbnQnXSlcbiAgb25LZXlEb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VzY2FwZScpIHtcbiAgICAgIHRoaXMubW9kYWxJbnN0YW5jZVNlcnZpY2UuY2FuY2VsKCdFc2NhcGUga2V5IGhpdCcpO1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICB9XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLnBvc2l0aW9uJylcbiAgcHVibGljIGdldCBwb3NpdGlvblN0eWxlKCkge1xuICAgIHJldHVybiB0aGlzLnVzZUZpeGVkUG9zaXRpb24gPyAnZml4ZWQnIDogJ2Fic29sdXRlJztcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbW9kYWxJbnN0YW5jZVNlcnZpY2U6IE1vZGFsSW5zdGFuY2VTZXJ2aWNlKSB7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLnNob3dDb250ZW50ID0gdHJ1ZTtcbiAgICB9LCA1MCk7XG4gIH1cblxuICBoaWRlKCk6IFByb21pc2U8dm9pZD4ge1xuICAgIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0+IHtcbiAgICAgIHRoaXMuc2hvd0JhY2tkcm9wID0gZmFsc2U7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgcmVzb2x2ZSgpO1xuICAgICAgfSwgMjAwKTtcbiAgICB9KTtcbiAgfVxufVxuIl19