ng-materialgrammi
Version:
An Angular framework which follows
49 lines • 6.55 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 OffcanvasComponent {
constructor(service) {
this.service = service;
this.active = false;
this.id = this.service.makeid(10, this.service.makeid(10, "offcanvas"));
this.widgetID = "";
}
handleKeyboardEvent(event) {
this.close();
}
ngOnInit() {
this.service.registerOffCanvas(this.id, this.active);
this.watch();
}
mainClasses() {
let results = "";
results += this.active ? " active" : "";
return results;
}
open() {
this.service.openCanvas(this.id);
}
close() {
this.service.closeCanvas(this.id);
}
watch() {
this.service.watchCanvas(this.id).subscribe((data) => {
this.active = data;
});
}
}
OffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: OffcanvasComponent, deps: [{ token: i1.MaterialgrammiService }], target: i0.ɵɵFactoryTarget.Component });
OffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: OffcanvasComponent, selector: "mg-offcanvas", inputs: { active: "active", id: "id" }, host: { listeners: { "document:keydown.escape": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"offcanvas\" [ngClass]=\"mainClasses()\">\n <div class=\"sidebar-wrapper\">\n <ng-content select=\"[mg-data=sidebar]\"></ng-content>\n </div>\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </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: OffcanvasComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-offcanvas', template: "<div class=\"offcanvas\" [ngClass]=\"mainClasses()\">\n <div class=\"sidebar-wrapper\">\n <ng-content select=\"[mg-data=sidebar]\"></ng-content>\n </div>\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return [{ type: i1.MaterialgrammiService }]; }, propDecorators: { active: [{
type: Input
}], id: [{
type: Input
}], handleKeyboardEvent: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2ZmY2FudmFzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9vZmZjYW52YXMvb2ZmY2FudmFzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9vZmZjYW52YXMvb2ZmY2FudmFzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7OztBQVF2RSxNQUFNLE9BQU8sa0JBQWtCO0lBWTdCLFlBQXFCLE9BQThCO1FBQTlCLFlBQU8sR0FBUCxPQUFPLENBQXVCO1FBWDFDLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFDZixPQUFFLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLEVBQUUsRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDO1FBRTVFLGFBQVEsR0FBRyxFQUFFLENBQUM7SUFRMEMsQ0FBQztJQUp6RCxtQkFBbUIsQ0FBQyxLQUFvQjtRQUN0QyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDZixDQUFDO0lBSUQsUUFBUTtRQUNOLElBQUksQ0FBQyxPQUFPLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDckQsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2YsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFDakIsT0FBTyxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ3hDLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ25DLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQVksRUFBRSxFQUFFO1lBQzNELElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7K0dBckNVLGtCQUFrQjttR0FBbEIsa0JBQWtCLCtLQ1IvQixzUEFRQTsyRkRBYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsY0FBYzs0R0FLZixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQU1OLG1CQUFtQjtzQkFEbEIsWUFBWTt1QkFBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRlcmlhbGdyYW1taVNlcnZpY2UgfSBmcm9tICcuLi8uLi9tYXRlcmlhbGdyYW1taS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWctb2ZmY2FudmFzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL29mZmNhbnZhcy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL29mZmNhbnZhcy5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgT2ZmY2FudmFzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgYWN0aXZlID0gZmFsc2U7XG4gIEBJbnB1dCgpIGlkID0gdGhpcy5zZXJ2aWNlLm1ha2VpZCgxMCwgdGhpcy5zZXJ2aWNlLm1ha2VpZCgxMCwgXCJvZmZjYW52YXNcIikpO1xuXG4gIHdpZGdldElEID0gXCJcIjtcblxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleWRvd24uZXNjYXBlJywgWyckZXZlbnQnXSlcbiAgaGFuZGxlS2V5Ym9hcmRFdmVudChldmVudDogS2V5Ym9hcmRFdmVudCkge1xuICAgIHRoaXMuY2xvc2UoKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCBwcml2YXRlIHNlcnZpY2U6IE1hdGVyaWFsZ3JhbW1pU2VydmljZSApIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2VydmljZS5yZWdpc3Rlck9mZkNhbnZhcyh0aGlzLmlkLCB0aGlzLmFjdGl2ZSk7XG4gICAgdGhpcy53YXRjaCgpO1xuICB9XG5cbiAgbWFpbkNsYXNzZXMoKXtcbiAgICBsZXQgcmVzdWx0cyA9IFwiXCI7XG4gICAgcmVzdWx0cyArPSB0aGlzLmFjdGl2ZSA/IFwiIGFjdGl2ZVwiIDogXCJcIjtcbiAgICByZXR1cm4gcmVzdWx0cztcbiAgfVxuXG4gIG9wZW4oKXtcbiAgICB0aGlzLnNlcnZpY2Uub3BlbkNhbnZhcyh0aGlzLmlkKTtcbiAgfVxuXG4gIGNsb3NlKCkge1xuICAgIHRoaXMuc2VydmljZS5jbG9zZUNhbnZhcyh0aGlzLmlkKTtcbiAgfVxuXG4gIHdhdGNoKCl7XG4gICAgdGhpcy5zZXJ2aWNlLndhdGNoQ2FudmFzKHRoaXMuaWQpLnN1YnNjcmliZSgoZGF0YTpib29sZWFuKSA9PiB7XG4gICAgICB0aGlzLmFjdGl2ZSA9IGRhdGE7XG4gICAgfSk7XG4gIH1cblxuXG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJvZmZjYW52YXNcIiBbbmdDbGFzc109XCJtYWluQ2xhc3NlcygpXCI+XG4gIDxkaXYgY2xhc3M9XCJzaWRlYmFyLXdyYXBwZXJcIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbbWctZGF0YT1zaWRlYmFyXVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJjb250ZW50LXdyYXBwZXJcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=