Archive commit

src/ts/components/shared/custom-checkbox/custom-checkbox.pug

@@ -0,0 +1,11 @@
+.custom-control.custom-checkbox.mb-2([class.disabled]="disabled")
+	label
+		input.custom-control-input(
+			type="checkbox"
+			[disabled]="disabled"
+			[(ngModel)]="checked"
+			(ngModelChange)="checkedChange.emit(checked)"
+			[attr.aria-describedby]="help ? helpId : undefined")
+		.custom-control-label
+			ng-content
+	small.form-text.text-muted.mt-0(*ngIf="help" [id]="helpId") {{help}}

src/ts/components/shared/custom-checkbox/custom-checkbox.scss

@@ -0,0 +1,8 @@
+.disabled {
+	opacity: 0.6;
+}
+
+label {
+	line-height: 1.4rem;
+	margin-bottom: 0;
+}

src/ts/components/shared/custom-checkbox/custom-checkbox.ts

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy, Output, Input, EventEmitter } from '@angular/core';
+import { uniqueId } from 'lodash';
+
+@Component({
+	selector: 'custom-checkbox',
+	templateUrl: 'custom-checkbox.pug',
+	styleUrls: ['custom-checkbox.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomCheckbox {
+	@Input() disabled = false;
+	@Input() help = '';
+	@Input() checked = false;
+	@Output() checkedChange = new EventEmitter<boolean>();
+	helpId = uniqueId('custom-checkbox-help-');
+}