ng-materialgrammi
Version:
An Angular framework which follows
60 lines • 7.39 kB
JavaScript
import { Component, HostListener, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../materialgrammi.service";
import * as i2 from "@angular/common";
export class ModalComponent {
constructor(service) {
this.service = service;
this.show = false;
this.id = "0";
this.position = "top";
this.modalSize = "md";
this.overlayClass = "grey8";
}
handleKeyboardEvent(event) {
this.close();
}
ngOnInit() {
this.service.registerModal(this.id, this.show);
this.subscribeToModal();
}
subscribeToModal() {
this.service.watchModal(this.id).subscribe((val) => {
this.show = val;
});
}
close() {
this.service.closeModal(this.id);
}
mainModelClasses() {
let classes = "";
classes += `${this.show ? 'active' : ''}`;
return classes;
}
overlayClasses() {
let classes = "";
classes += `${this.show ? 'active' : ''}`;
classes += ` ${this.overlayClass}`;
return classes;
}
}
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ModalComponent, deps: [{ token: i1.MaterialgrammiService }], target: i0.ɵɵFactoryTarget.Component });
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ModalComponent, selector: "mg-modal", inputs: { show: "show", id: "id", position: "position", modalSize: "modalSize", overlayClass: "overlayClass" }, host: { listeners: { "document:keydown.escape": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"modal\" [ngClass]=\"mainModelClasses()\">\n <div class=\"content on-{{position}} {{modalSize}}\" [ngClass]=\"mainModelClasses()\">\n <ng-content></ng-content>\n </div>\n <div (click)=\"close()\" class=\"overlay blur\" [ngClass]=\"overlayClasses()\"></div>\n</div>\n", styles: [""], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-modal', template: "<div class=\"modal\" [ngClass]=\"mainModelClasses()\">\n <div class=\"content on-{{position}} {{modalSize}}\" [ngClass]=\"mainModelClasses()\">\n <ng-content></ng-content>\n </div>\n <div (click)=\"close()\" class=\"overlay blur\" [ngClass]=\"overlayClasses()\"></div>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return [{ type: i1.MaterialgrammiService }]; }, propDecorators: { show: [{
type: Input
}], id: [{
type: Input
}], position: [{
type: Input
}], modalSize: [{
type: Input
}], overlayClass: [{
type: Input
}], handleKeyboardEvent: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWF0ZXJpYWxncmFtbWkvc3JjL2xpYi9jb21wb25lbnRzL21vZGFsL21vZGFsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9tb2RhbC9tb2RhbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRdkUsTUFBTSxPQUFPLGNBQWM7SUFZekIsWUFBcUIsT0FBOEI7UUFBOUIsWUFBTyxHQUFQLE9BQU8sQ0FBdUI7UUFYMUMsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUNiLE9BQUUsR0FBRyxHQUFHLENBQUM7UUFDVCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFDakIsaUJBQVksR0FBRyxPQUFPLENBQUM7SUFPdUIsQ0FBQztJQUp4RCxtQkFBbUIsQ0FBQyxLQUFvQjtRQUN0QyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDZixDQUFDO0lBSUQsUUFBUTtRQUNOLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9DLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxJQUFJLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsR0FBTyxFQUFFLEVBQUU7WUFDckQsSUFBSSxDQUFDLElBQUksR0FBRyxHQUFHLENBQUM7UUFDbEIsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsSUFBSSxPQUFPLEdBQUcsRUFBRSxDQUFDO1FBRWpCLE9BQU8sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUM7UUFFMUMsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQztJQUVELGNBQWM7UUFFWixJQUFJLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFFakIsT0FBTyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUMxQyxPQUFPLElBQUksSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFFbkMsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQzs7MkdBN0NVLGNBQWM7K0ZBQWQsY0FBYyxtUENSM0IsOFJBTUE7MkZERWEsY0FBYztrQkFMMUIsU0FBUzsrQkFDRSxVQUFVOzRHQUtYLElBQUk7c0JBQVosS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBR04sbUJBQW1CO3NCQURsQixZQUFZO3VCQUFDLHlCQUF5QixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdGVyaWFsZ3JhbW1pU2VydmljZSB9IGZyb20gJy4uLy4uL21hdGVyaWFsZ3JhbW1pLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtZy1tb2RhbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21vZGFsLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBNb2RhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHNob3cgPSBmYWxzZTtcbiAgQElucHV0KCkgaWQgPSBcIjBcIjtcbiAgQElucHV0KCkgcG9zaXRpb24gPSBcInRvcFwiO1xuICBASW5wdXQoKSBtb2RhbFNpemUgPSBcIm1kXCI7XG4gIEBJbnB1dCgpIG92ZXJsYXlDbGFzcyA9IFwiZ3JleThcIjtcblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duLmVzY2FwZScsIFsnJGV2ZW50J10pXG4gIGhhbmRsZUtleWJvYXJkRXZlbnQoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICB0aGlzLmNsb3NlKCk7XG4gIH1cblxuICBjb25zdHJ1Y3RvciggcHJpdmF0ZSBzZXJ2aWNlOiBNYXRlcmlhbGdyYW1taVNlcnZpY2UpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2VydmljZS5yZWdpc3Rlck1vZGFsKHRoaXMuaWQsIHRoaXMuc2hvdyk7XG4gICAgdGhpcy5zdWJzY3JpYmVUb01vZGFsKCk7XG4gIH1cblxuICBzdWJzY3JpYmVUb01vZGFsKCkge1xuICAgIHRoaXMuc2VydmljZS53YXRjaE1vZGFsKHRoaXMuaWQpLnN1YnNjcmliZSgodmFsOmFueSkgPT4ge1xuICAgICAgdGhpcy5zaG93ID0gdmFsO1xuICAgIH0pXG4gIH1cblxuICBjbG9zZSgpIHtcbiAgICB0aGlzLnNlcnZpY2UuY2xvc2VNb2RhbCh0aGlzLmlkKTtcbiAgfVxuXG4gIG1haW5Nb2RlbENsYXNzZXMoKSB7XG4gICAgbGV0IGNsYXNzZXMgPSBcIlwiO1xuXG4gICAgY2xhc3NlcyArPSBgJHt0aGlzLnNob3cgPyAnYWN0aXZlJyA6ICcnfWA7XG5cbiAgICByZXR1cm4gY2xhc3NlcztcbiAgfVxuXG4gIG92ZXJsYXlDbGFzc2VzKCkge1xuXG4gICAgbGV0IGNsYXNzZXMgPSBcIlwiO1xuXG4gICAgY2xhc3NlcyArPSBgJHt0aGlzLnNob3cgPyAnYWN0aXZlJyA6ICcnfWA7XG4gICAgY2xhc3NlcyArPSBgICR7dGhpcy5vdmVybGF5Q2xhc3N9YDtcblxuICAgIHJldHVybiBjbGFzc2VzO1xuICB9XG5cblxufVxuIiwiPGRpdiBjbGFzcz1cIm1vZGFsXCIgW25nQ2xhc3NdPVwibWFpbk1vZGVsQ2xhc3NlcygpXCI+XG4gIDxkaXYgY2xhc3M9XCJjb250ZW50IG9uLXt7cG9zaXRpb259fSB7e21vZGFsU2l6ZX19XCIgW25nQ2xhc3NdPVwibWFpbk1vZGVsQ2xhc3NlcygpXCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbiAgPGRpdiAoY2xpY2spPVwiY2xvc2UoKVwiIGNsYXNzPVwib3ZlcmxheSBibHVyXCIgW25nQ2xhc3NdPVwib3ZlcmxheUNsYXNzZXMoKVwiPjwvZGl2PlxuPC9kaXY+XG4iXX0=