Archive commit

src/ts/components/shared/check-box/check-box.pug

@@ -0,0 +1,8 @@
+button.check-box(
+	role="checkbox"
+	(click)="toggle()"
+	[class.disabled]="disabled"
+	[attr.aria-disabled]="disabled"
+	[attr.aria-label]="label || ''"
+	[attr.aria-checked]="checked")
+	fa-icon(*ngIf="checked" [icon]="icon" [fixedWidth]="true")

src/ts/components/shared/check-box/check-box.scss

@@ -0,0 +1,30 @@
+@import '../../../../styles/partials/variables';
+
+.check-box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	height: $input-height;
+	width: $input-height;
+	margin: 0;
+	color: $input-color;
+	background-color: $input-bg;
+	border: 1px solid $border-color;
+	border-radius: $input-border-radius;
+	appearance: none;
+
+	&:focus {
+		outline: none;
+  	box-shadow: 0 0 0 $btn-focus-width rgba($focus-color, .5);
+	}
+
+	&.disabled {
+		background: $input-disabled-bg;
+		color: $input-disabled-color;
+	}
+	
+	> fa-icon {
+		font-size: 17px;
+	}
+}

src/ts/components/shared/check-box/check-box.ts

@@ -0,0 +1,22 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { faCheck } from '../../../client/icons';
+
+@Component({
+	selector: 'check-box',
+	templateUrl: 'check-box.pug',
+	styleUrls: ['check-box.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckBox {
+	@Input() icon = faCheck;
+	@Input() label?: string;
+	@Input() disabled = false;
+	@Input() checked = false;
+	@Output() checkedChange = new EventEmitter<boolean>();
+	toggle() {
+		if (!this.disabled) {
+			this.checked = !this.checked;
+			this.checkedChange.emit(this.checked);
+		}
+	}
+}