@crediblefinance/credible-ui
Version:
Credible's standard UI library
58 lines • 12.2 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
export class CfCheckboxComponent {
name = '';
id = '';
disabled = false;
checked = false;
readonly = false;
theme = 'dark';
changed = new EventEmitter();
formGroup;
control;
// HTML helpers
objectFn = Object;
constructor() {
if (!this.control && !this.formGroup) {
this.formGroup = new FormGroup({});
this.control = new FormControl('');
this.control.setValue(this.checked);
}
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes.checked)
this.control.setValue(this.checked);
}
changeHandler(event) {
this.changed.emit(event.currentTarget.checked);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfCheckboxComponent, selector: "cf-checkbox", inputs: { name: "name", id: "id", disabled: "disabled", checked: "checked", readonly: "readonly", theme: "theme", formGroup: "formGroup", control: "control" }, outputs: { changed: "changed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"\n control.invalid && control.touched ? 'cf-checkbox mb-0' : 'cf-checkbox'\n \">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col-md-12\" [formGroup]=\"formGroup\">\n <label class=\"cf-container\" [ngClass]=\"theme\">{{ name }}\n <input type=\"checkbox\" [checked]=\"checked ? 'checked' : null\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [id]=\"id\" (change)=\"changeHandler($event)\">\n <span class=\"checkmark\"></span>\n </label>\n </div>\n </div>\n <span class=\"text-danger\" *ngIf=\"control.errors && control.touched\">\n {{ control.errors[objectFn.keys(control.errors)[0]] }}\n </span>\n </div>\n</div>", styles: [".cf-checkbox{width:max-content;margin:auto;font-family:inherit}.cf-container{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-weight:400}.cf-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.cf-container .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;border-radius:2px}.cf-container.dark:hover input~.checkmark{background-color:#1d1e22}.cf-container.light:hover input~.checkmark{background-color:#fff}.cf-container.dark input:checked~.checkmark{color:#cf0}.cf-container.light input:checked~.checkmark{color:#cf0}.checkmark:after{content:\"\";position:absolute;display:none}.cf-container input:checked~.checkmark:after{display:block}.cf-container .checkmark:after{left:8px;top:3px;width:7px;height:13px;border-style:solid;border-width:0 3px 3px 0;transform:rotate(45deg)}.cf-container.dark .checkmark:after{border-color:#fff}.cf-container.light .checkmark:after{border-color:#000}.error ::ng-deep .mat-checkbox-layout .mat-checkbox-frame{border-color:#dc3545}.cf-container.dark{color:gray}.cf-container.dark .checkmark{border:.1px solid grey;background-color:transparent}.cf-container.light{color:#000}.cf-container.light .checkmark{border:.1px solid #f5f5f5;background-color:transparent}@media only screen and (max-width: 500px){.cf-checkbox{font-size:1rem!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'cf-checkbox', template: "<div [ngClass]=\"\n control.invalid && control.touched ? 'cf-checkbox mb-0' : 'cf-checkbox'\n \">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col-md-12\" [formGroup]=\"formGroup\">\n <label class=\"cf-container\" [ngClass]=\"theme\">{{ name }}\n <input type=\"checkbox\" [checked]=\"checked ? 'checked' : null\" [readonly]=\"readonly\"\n [disabled]=\"disabled\" [id]=\"id\" (change)=\"changeHandler($event)\">\n <span class=\"checkmark\"></span>\n </label>\n </div>\n </div>\n <span class=\"text-danger\" *ngIf=\"control.errors && control.touched\">\n {{ control.errors[objectFn.keys(control.errors)[0]] }}\n </span>\n </div>\n</div>", styles: [".cf-checkbox{width:max-content;margin:auto;font-family:inherit}.cf-container{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-weight:400}.cf-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.cf-container .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;border-radius:2px}.cf-container.dark:hover input~.checkmark{background-color:#1d1e22}.cf-container.light:hover input~.checkmark{background-color:#fff}.cf-container.dark input:checked~.checkmark{color:#cf0}.cf-container.light input:checked~.checkmark{color:#cf0}.checkmark:after{content:\"\";position:absolute;display:none}.cf-container input:checked~.checkmark:after{display:block}.cf-container .checkmark:after{left:8px;top:3px;width:7px;height:13px;border-style:solid;border-width:0 3px 3px 0;transform:rotate(45deg)}.cf-container.dark .checkmark:after{border-color:#fff}.cf-container.light .checkmark:after{border-color:#000}.error ::ng-deep .mat-checkbox-layout .mat-checkbox-frame{border-color:#dc3545}.cf-container.dark{color:gray}.cf-container.dark .checkmark{border:.1px solid grey;background-color:transparent}.cf-container.light{color:#000}.cf-container.light .checkmark{border:.1px solid #f5f5f5;background-color:transparent}@media only screen and (max-width: 500px){.cf-checkbox{font-size:1rem!important}}\n"] }]
}], ctorParameters: () => [], propDecorators: { name: [{
type: Input
}], id: [{
type: Input
}], disabled: [{
type: Input
}], checked: [{
type: Input
}], readonly: [{
type: Input
}], theme: [{
type: Input
}], changed: [{
type: Output
}], formGroup: [{
type: Input
}], control: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3JlZGlibGUtdWkvc3JjL2xpYi9jZi1jaGVja2JveC9jZi1jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLWNoZWNrYm94L2NmLWNoZWNrYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUM1RCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0gsV0FBVyxFQUFFLFNBQVMsRUFDekIsTUFBTSxnQkFBZ0IsQ0FBQzs7OztBQU94QixNQUFNLE9BQU8sbUJBQW1CO0lBQ25CLElBQUksR0FBVyxFQUFFLENBQUM7SUFDbEIsRUFBRSxHQUFXLEVBQUUsQ0FBQztJQUNoQixRQUFRLEdBQVksS0FBSyxDQUFDO0lBQzFCLE9BQU8sR0FBWSxLQUFLLENBQUM7SUFDekIsUUFBUSxHQUFZLEtBQUssQ0FBQztJQUMxQixLQUFLLEdBQVcsTUFBTSxDQUFDO0lBRXRCLE9BQU8sR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO0lBRXZDLFNBQVMsQ0FBYTtJQUN0QixPQUFPLENBQWU7SUFDL0IsZUFBZTtJQUNmLFFBQVEsR0FBRyxNQUFNLENBQUM7SUFFbEI7UUFDSSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLFNBQVMsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUNuQyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksV0FBVyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQ25DLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUN2QztJQUNMLENBQUM7SUFFRCxRQUFRLEtBQVcsQ0FBQztJQUVwQixXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsT0FBTztZQUNmLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQVU7UUFDcEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNuRCxDQUFDO3VHQWhDUSxtQkFBbUI7MkZBQW5CLG1CQUFtQix5UUNaaEMsOHpCQWlCTTs7MkZETE8sbUJBQW1CO2tCQUwvQixTQUFTOytCQUNJLGFBQWE7d0RBS2QsSUFBSTtzQkFBWixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFFSSxPQUFPO3NCQUFoQixNQUFNO2dCQUVFLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXNcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIEZvcm1Db250cm9sLCBGb3JtR3JvdXBcbn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2NmLWNoZWNrYm94JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vY2YtY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWyAnLi9jZi1jaGVja2JveC5jb21wb25lbnQuc2NzcycgXVxufSlcbmV4cG9ydCBjbGFzcyBDZkNoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICAgIEBJbnB1dCgpIG5hbWU6IHN0cmluZyA9ICcnO1xuICAgIEBJbnB1dCgpIGlkOiBzdHJpbmcgPSAnJztcbiAgICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIGNoZWNrZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBASW5wdXQoKSByZWFkb25seTogYm9vbGVhbiA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHRoZW1lOiBzdHJpbmcgPSAnZGFyayc7XG5cbiAgICBAT3V0cHV0KCkgY2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAgIEBJbnB1dCgpIGZvcm1Hcm91cCE6IEZvcm1Hcm91cDtcbiAgICBASW5wdXQoKSBjb250cm9sITogRm9ybUNvbnRyb2w7XG4gICAgLy8gSFRNTCBoZWxwZXJzXG4gICAgb2JqZWN0Rm4gPSBPYmplY3Q7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgaWYgKCF0aGlzLmNvbnRyb2wgJiYgIXRoaXMuZm9ybUdyb3VwKSB7XG4gICAgICAgICAgICB0aGlzLmZvcm1Hcm91cCA9IG5ldyBGb3JtR3JvdXAoe30pO1xuICAgICAgICAgICAgdGhpcy5jb250cm9sID0gbmV3IEZvcm1Db250cm9sKCcnKTtcbiAgICAgICAgICAgIHRoaXMuY29udHJvbC5zZXRWYWx1ZSh0aGlzLmNoZWNrZWQpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7IH1cblxuICAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAgICAgaWYgKGNoYW5nZXMuY2hlY2tlZClcbiAgICAgICAgICAgIHRoaXMuY29udHJvbC5zZXRWYWx1ZSh0aGlzLmNoZWNrZWQpO1xuICAgIH1cblxuICAgIGNoYW5nZUhhbmRsZXIoZXZlbnQ6IGFueSkge1xuICAgICAgICB0aGlzLmNoYW5nZWQuZW1pdChldmVudC5jdXJyZW50VGFyZ2V0LmNoZWNrZWQpO1xuICAgIH1cbn1cbiIsIjxkaXYgW25nQ2xhc3NdPVwiXG4gICAgICAgIGNvbnRyb2wuaW52YWxpZCAmJiBjb250cm9sLnRvdWNoZWQgPyAnY2YtY2hlY2tib3ggbWItMCcgOiAnY2YtY2hlY2tib3gnXG4gICAgXCI+XG4gICAgPGRpdiBjbGFzcz1cImNvbnRhaW5lci1mbHVpZFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicm93XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY29sLW1kLTEyXCIgW2Zvcm1Hcm91cF09XCJmb3JtR3JvdXBcIj5cbiAgICAgICAgICAgICAgICA8bGFiZWwgY2xhc3M9XCJjZi1jb250YWluZXJcIiBbbmdDbGFzc109XCJ0aGVtZVwiPnt7IG5hbWUgfX1cbiAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJjaGVja2JveFwiIFtjaGVja2VkXT1cImNoZWNrZWQgPyAnY2hlY2tlZCcgOiBudWxsXCIgW3JlYWRvbmx5XT1cInJlYWRvbmx5XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIFtpZF09XCJpZFwiIChjaGFuZ2UpPVwiY2hhbmdlSGFuZGxlcigkZXZlbnQpXCI+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2hlY2ttYXJrXCI+PC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvbGFiZWw+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC1kYW5nZXJcIiAqbmdJZj1cImNvbnRyb2wuZXJyb3JzICYmIGNvbnRyb2wudG91Y2hlZFwiPlxuICAgICAgICAgICAge3sgY29udHJvbC5lcnJvcnNbb2JqZWN0Rm4ua2V5cyhjb250cm9sLmVycm9ycylbMF1dIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==