ng-materialgrammi
Version:
An Angular framework which follows
71 lines • 8.3 kB
JavaScript
import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../materialgrammi.service";
import * as i2 from "@angular/common";
export class OverlayComponent {
constructor(service) {
this.service = service;
this.bgClass = "grey1";
this.overlayClass = "bg-b-3";
this.offSize = "1";
this.canvasPosition = "top";
this.id = "1";
this.active = false;
this.isClosed = new EventEmitter();
}
handleKeyboardEvent(event) {
this.close();
}
ngOnInit() {
this.service.registerOverlay(this.id, this.active);
this.subscribe();
}
activator() {
return this.active ? "active" : "";
}
subscribe() {
this.service.watchOverlay(this.id).subscribe((data) => {
this.active = data;
});
}
mainClasses() {
let classes = "";
classes += ` ${this.activator()}`;
classes += ` ${this.bgClass}`;
return classes;
}
overlayClasses() {
let classes = "";
classes += this.active ? 'active' : '';
classes += ` ${this.overlayClass}`;
return classes;
}
close() {
this.service.closeOverlay(this.id);
this.isClosed.emit(true);
}
}
OverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: OverlayComponent, deps: [{ token: i1.MaterialgrammiService }], target: i0.ɵɵFactoryTarget.Component });
OverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: OverlayComponent, selector: "mg-overlay", inputs: { bgClass: "bgClass", overlayClass: "overlayClass", offSize: "offSize", canvasPosition: "canvasPosition", id: "id", active: "active" }, outputs: { isClosed: "isClosed" }, host: { listeners: { "document:keydown.escape": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"overlay {{canvasPosition}} size-{{offSize}}\" [ngClass]=\"mainClasses()\">\n <ng-content></ng-content>\n</div>\n<div (click)=\"close()\" class=\"off-overlay blur\" [ngClass]=\"overlayClasses()\"></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: OverlayComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-overlay', template: "<div class=\"overlay {{canvasPosition}} size-{{offSize}}\" [ngClass]=\"mainClasses()\">\n <ng-content></ng-content>\n</div>\n<div (click)=\"close()\" class=\"off-overlay blur\" [ngClass]=\"overlayClasses()\"></div>\n", styles: [""] }]
}], ctorParameters: function () { return [{ type: i1.MaterialgrammiService }]; }, propDecorators: { bgClass: [{
type: Input
}], overlayClass: [{
type: Input
}], offSize: [{
type: Input
}], canvasPosition: [{
type: Input
}], id: [{
type: Input
}], active: [{
type: Input
}], isClosed: [{
type: Output
}], handleKeyboardEvent: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmxheS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbGdyYW1taS9zcmMvbGliL2NvbXBvbmVudHMvb3ZlcmxheS9vdmVybGF5LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9vdmVybGF5L292ZXJsYXkuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRN0YsTUFBTSxPQUFPLGdCQUFnQjtJQWUzQixZQUFvQixPQUE4QjtRQUE5QixZQUFPLEdBQVAsT0FBTyxDQUF1QjtRQWR6QyxZQUFPLEdBQUcsT0FBTyxDQUFDO1FBQ2xCLGlCQUFZLEdBQUcsUUFBUSxDQUFDO1FBQ3hCLFlBQU8sR0FBVyxHQUFHLENBQUM7UUFDdEIsbUJBQWMsR0FBVyxLQUFLLENBQUM7UUFDL0IsT0FBRSxHQUFHLEdBQUcsQ0FBQztRQUNULFdBQU0sR0FBRyxLQUFLLENBQUM7UUFFZCxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQU9jLENBQUM7SUFKdkQsbUJBQW1CLENBQUMsS0FBb0I7UUFDdEMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2YsQ0FBQztJQUlELFFBQVE7UUFDTixJQUFJLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUVELFNBQVM7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQ3JDLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQVEsRUFBRSxFQUFFO1lBQ3hELElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFFakIsT0FBTyxJQUFJLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFFLENBQUM7UUFFbEMsT0FBTyxJQUFJLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBRTlCLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxjQUFjO1FBQ1osSUFBSSxPQUFPLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLE9BQU8sSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUN2QyxPQUFPLElBQUksSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDbkMsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQzs7NkdBcERVLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLHdUQ1I3QiwyTkFJQTsyRkRJYSxnQkFBZ0I7a0JBTDVCLFNBQVM7K0JBQ0UsWUFBWTs0R0FLYixPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUVJLFFBQVE7c0JBQWpCLE1BQU07Z0JBR1AsbUJBQW1CO3NCQURsQixZQUFZO3VCQUFDLHlCQUF5QixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRlcmlhbGdyYW1taVNlcnZpY2UgfSBmcm9tICcuLi8uLi9tYXRlcmlhbGdyYW1taS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWctb3ZlcmxheScsXG4gIHRlbXBsYXRlVXJsOiAnLi9vdmVybGF5LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vb3ZlcmxheS5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgT3ZlcmxheUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGJnQ2xhc3MgPSBcImdyZXkxXCI7XG4gIEBJbnB1dCgpIG92ZXJsYXlDbGFzcyA9IFwiYmctYi0zXCI7XG4gIEBJbnB1dCgpIG9mZlNpemU6IHN0cmluZyA9IFwiMVwiO1xuICBASW5wdXQoKSBjYW52YXNQb3NpdGlvbjogc3RyaW5nID0gXCJ0b3BcIjtcbiAgQElucHV0KCkgaWQgPSBcIjFcIjtcbiAgQElucHV0KCkgYWN0aXZlID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIGlzQ2xvc2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleWRvd24uZXNjYXBlJywgWyckZXZlbnQnXSlcbiAgaGFuZGxlS2V5Ym9hcmRFdmVudChldmVudDogS2V5Ym9hcmRFdmVudCkge1xuICAgIHRoaXMuY2xvc2UoKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2VydmljZTogTWF0ZXJpYWxncmFtbWlTZXJ2aWNlKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNlcnZpY2UucmVnaXN0ZXJPdmVybGF5KHRoaXMuaWQsIHRoaXMuYWN0aXZlKTtcbiAgICB0aGlzLnN1YnNjcmliZSgpO1xuICB9XG5cbiAgYWN0aXZhdG9yKCkge1xuICAgIHJldHVybiB0aGlzLmFjdGl2ZSA/IFwiYWN0aXZlXCIgOiBcIlwiO1xuICB9XG5cbiAgc3Vic2NyaWJlKCkge1xuICAgIHRoaXMuc2VydmljZS53YXRjaE92ZXJsYXkodGhpcy5pZCkuc3Vic2NyaWJlKChkYXRhOmFueSkgPT4ge1xuICAgICAgdGhpcy5hY3RpdmUgPSBkYXRhO1xuICAgIH0pO1xuICB9XG5cbiAgbWFpbkNsYXNzZXMoKSB7XG4gICAgbGV0IGNsYXNzZXMgPSBcIlwiO1xuXG4gICAgY2xhc3NlcyArPSBgICR7dGhpcy5hY3RpdmF0b3IoKX1gO1xuXG4gICAgY2xhc3NlcyArPSBgICR7dGhpcy5iZ0NsYXNzfWA7XG5cbiAgICByZXR1cm4gY2xhc3NlcztcbiAgfVxuXG4gIG92ZXJsYXlDbGFzc2VzKCkge1xuICAgIGxldCBjbGFzc2VzID0gXCJcIjtcbiAgICBjbGFzc2VzICs9IHRoaXMuYWN0aXZlID8gJ2FjdGl2ZScgOiAnJztcbiAgICBjbGFzc2VzICs9IGAgJHt0aGlzLm92ZXJsYXlDbGFzc31gO1xuICAgIHJldHVybiBjbGFzc2VzO1xuICB9XG5cbiAgY2xvc2UoKSB7XG4gICAgdGhpcy5zZXJ2aWNlLmNsb3NlT3ZlcmxheSh0aGlzLmlkKTtcbiAgICB0aGlzLmlzQ2xvc2VkLmVtaXQodHJ1ZSk7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cIm92ZXJsYXkge3tjYW52YXNQb3NpdGlvbn19IHNpemUte3tvZmZTaXplfX1cIiBbbmdDbGFzc109XCJtYWluQ2xhc3NlcygpXCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuPGRpdiAoY2xpY2spPVwiY2xvc2UoKVwiIGNsYXNzPVwib2ZmLW92ZXJsYXkgYmx1clwiIFtuZ0NsYXNzXT1cIm92ZXJsYXlDbGFzc2VzKClcIj48L2Rpdj5cbiJdfQ==