ng-materialgrammi
Version:
An Angular framework which follows
57 lines • 8.01 kB
JavaScript
import { Component, EventEmitter, 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 CheckboxComponent {
constructor(service) {
this.service = service;
this.size = "m";
this.theme = "primary";
this.onDark = false;
this.isSelected = false;
this.class = "";
this.isChecked = new EventEmitter();
this.id = "";
this.selected = this.isSelected;
}
ngOnInit() {
this.isChecked.emit(this.selected);
this.selected = this.isSelected;
this.id = "input-checkbox-" + this.service.makeid(10, "checkbox");
}
mainClasses() {
let results = "";
results += this.size == "s" ? "small" : this.size == "m" ? "medium" : "large";
results += " " + this.theme;
return results;
}
labelClass() {
let results = "";
results += this.onDark ? "lite" : "dark";
results += this.selected ? " active" : "";
return results;
}
toggleCheck() {
this.selected = !this.selected;
this.isChecked.emit(this.selected);
}
}
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.MaterialgrammiService }], target: i0.ɵɵFactoryTarget.Component });
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: CheckboxComponent, selector: "mg-checkbox", inputs: { size: "size", theme: "theme", onDark: "onDark", isSelected: "isSelected", class: "class" }, outputs: { isChecked: "isChecked" }, ngImport: i0, template: "<div class=\"checkbox\" [ngClass]=\"mainClasses() + ' ' + class\">\n <input [id]=\"id\" type=\"checkbox\" [checked]=\"isSelected\" style=\"opacity: 0; position: absolute;\"/>\n <label class=\"check\" [for]=\"id\" (click)=\"toggleCheck()\"></label>\n <label class=\"label\" [for]=\"id\" [ngClass]=\"labelClass()\"\n (click)=\"toggleCheck()\"><ng-content></ng-content></label>\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: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-checkbox', template: "<div class=\"checkbox\" [ngClass]=\"mainClasses() + ' ' + class\">\n <input [id]=\"id\" type=\"checkbox\" [checked]=\"isSelected\" style=\"opacity: 0; position: absolute;\"/>\n <label class=\"check\" [for]=\"id\" (click)=\"toggleCheck()\"></label>\n <label class=\"label\" [for]=\"id\" [ngClass]=\"labelClass()\"\n (click)=\"toggleCheck()\"><ng-content></ng-content></label>\n</div>\n", styles: [""] }]
}], ctorParameters: function () { return [{ type: i1.MaterialgrammiService }]; }, propDecorators: { size: [{
type: Input
}], theme: [{
type: Input
}], onDark: [{
type: Input
}], isSelected: [{
type: Input
}], class: [{
type: Input
}], isChecked: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWF0ZXJpYWxncmFtbWkvc3JjL2xpYi9jb21wb25lbnRzL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBUy9FLE1BQU0sT0FBTyxpQkFBaUI7SUFXNUIsWUFBb0IsT0FBOEI7UUFBOUIsWUFBTyxHQUFQLE9BQU8sQ0FBdUI7UUFWekMsU0FBSSxHQUFHLEdBQUcsQ0FBQztRQUNYLFVBQUssR0FBVSxTQUFTLENBQUM7UUFDekIsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUdWLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3pDLE9BQUUsR0FBRyxFQUFFLENBQUM7UUFDUixhQUFRLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUMyQixDQUFDO0lBRXZELFFBQVE7UUFDTixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDbkMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDO1FBQ2hDLElBQUksQ0FBQyxFQUFFLEdBQUcsaUJBQWlCLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLFVBQVUsQ0FBQyxDQUFDO0lBQ3BFLENBQUM7SUFDRCxXQUFXO1FBQ1QsSUFBSSxPQUFPLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLE9BQU8sSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLEdBQUcsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLEdBQUcsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUM7UUFDOUUsT0FBTyxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQzVCLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxPQUFPLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLE9BQU8sSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztRQUN6QyxPQUFPLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDMUMsT0FBTyxPQUFPLENBQUM7SUFDakIsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUMvQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDckMsQ0FBQzs7OEdBbkNVLGlCQUFpQjtrR0FBakIsaUJBQWlCLDhMQ1Q5Qix3WUFNQTsyRkRHYSxpQkFBaUI7a0JBTDdCLFNBQVM7K0JBQ0UsYUFBYTs0R0FLZCxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFHSSxTQUFTO3NCQUFsQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0ZXJpYWxncmFtbWlTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vbWF0ZXJpYWxncmFtbWkuc2VydmljZSc7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWctY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGVja2JveC5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2hlY2tib3hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBzaXplID0gXCJtXCI7XG4gIEBJbnB1dCgpIHRoZW1lOiBUaGVtZSA9IFwicHJpbWFyeVwiO1xuICBASW5wdXQoKSBvbkRhcmsgPSBmYWxzZTtcbiAgQElucHV0KCkgaXNTZWxlY3RlZCA9IGZhbHNlO1xuICBASW5wdXQoKSBjbGFzcyA9IFwiXCI7XG5cblxuICBAT3V0cHV0KCkgaXNDaGVja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBpZCA9IFwiXCI7XG4gIHNlbGVjdGVkID0gdGhpcy5pc1NlbGVjdGVkO1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHNlcnZpY2U6IE1hdGVyaWFsZ3JhbW1pU2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pc0NoZWNrZWQuZW1pdCh0aGlzLnNlbGVjdGVkKTtcbiAgICB0aGlzLnNlbGVjdGVkID0gdGhpcy5pc1NlbGVjdGVkO1xuICAgIHRoaXMuaWQgPSBcImlucHV0LWNoZWNrYm94LVwiICsgdGhpcy5zZXJ2aWNlLm1ha2VpZCgxMCwgXCJjaGVja2JveFwiKTtcbiAgfVxuICBtYWluQ2xhc3NlcygpIHtcbiAgICBsZXQgcmVzdWx0cyA9IFwiXCI7XG4gICAgcmVzdWx0cyArPSB0aGlzLnNpemUgPT0gXCJzXCIgPyBcInNtYWxsXCIgOiB0aGlzLnNpemUgPT0gXCJtXCIgPyBcIm1lZGl1bVwiIDogXCJsYXJnZVwiO1xuICAgIHJlc3VsdHMgKz0gXCIgXCIgKyB0aGlzLnRoZW1lO1xuICAgIHJldHVybiByZXN1bHRzO1xuICB9XG5cbiAgbGFiZWxDbGFzcygpIHtcbiAgICBsZXQgcmVzdWx0cyA9IFwiXCI7XG4gICAgcmVzdWx0cyArPSB0aGlzLm9uRGFyayA/IFwibGl0ZVwiIDogXCJkYXJrXCI7XG4gICAgcmVzdWx0cyArPSB0aGlzLnNlbGVjdGVkID8gXCIgYWN0aXZlXCIgOiBcIlwiO1xuICAgIHJldHVybiByZXN1bHRzO1xuICB9XG5cbiAgdG9nZ2xlQ2hlY2soKSB7XG4gICAgdGhpcy5zZWxlY3RlZCA9ICF0aGlzLnNlbGVjdGVkO1xuICAgIHRoaXMuaXNDaGVja2VkLmVtaXQodGhpcy5zZWxlY3RlZCk7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cImNoZWNrYm94XCIgW25nQ2xhc3NdPVwibWFpbkNsYXNzZXMoKSArICcgJyArIGNsYXNzXCI+XG4gIDxpbnB1dCBbaWRdPVwiaWRcIiB0eXBlPVwiY2hlY2tib3hcIiBbY2hlY2tlZF09XCJpc1NlbGVjdGVkXCIgc3R5bGU9XCJvcGFjaXR5OiAwOyBwb3NpdGlvbjogYWJzb2x1dGU7XCIvPlxuICA8bGFiZWwgY2xhc3M9XCJjaGVja1wiIFtmb3JdPVwiaWRcIiAoY2xpY2spPVwidG9nZ2xlQ2hlY2soKVwiPjwvbGFiZWw+XG4gIDxsYWJlbCBjbGFzcz1cImxhYmVsXCIgW2Zvcl09XCJpZFwiIFtuZ0NsYXNzXT1cImxhYmVsQ2xhc3MoKVwiXG4gICAgKGNsaWNrKT1cInRvZ2dsZUNoZWNrKClcIj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9sYWJlbD5cbjwvZGl2PlxuIl19