Added required input in checkbox component (#77)

* Added support for required attribute in checkbox component

* reverted some accidental commits

* test coverage for reactive forms

* test coverage for required validity

* added comment

* label tweak

* required input property

* reverted some accidental commits

* added more coverage

* leveraging angulars checkboxvalidator to do the heavy-lifting

* removed fit from test

* reordered imports

* enforcing required css class

src/app/public/modules/checkbox/checkbox-required-validator.directive.ts

@@ -0,0 +1,32 @@
+import {
+  Directive,
+  forwardRef,
+  Provider
+} from '@angular/core';
+
+import {
+  CheckboxRequiredValidator,
+  NG_VALIDATORS
+} from '@angular/forms';
+
+// tslint:disable:no-forward-ref
+export const SKY_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => SkyCheckboxRequiredValidatorDirective),
+  multi: true
+};
+// tslint:enable
+
+/**
+ * Validator support for the `required` input on `sky-checkbox`.
+ * Angular's `CheckboxRequiredValidator` only works with `input type=checkbox`. This directive
+ * extends the angular validator to work with `sky-checkbox` tags.
+ * This is based on Angular Material's similar implementation:
+ * https://github.com/angular/components/blob/a415b52ead2ec202ba37edb7d7866b29dd790394/src/material/checkbox/checkbox-required-validator.ts
+ */
+@Directive({
+  selector: `sky-checkbox[required][formControlName],
+             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]`,
+  providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR]
+})
+export class SkyCheckboxRequiredValidatorDirective extends CheckboxRequiredValidator {}

src/app/public/modules/checkbox/checkbox.component.html

@@ -1,16 +1,22 @@
 <label
   class="sky-checkbox-wrapper sky-switch"
-  [ngClass]="{ 'sky-switch-disabled': disabled }">
+  [ngClass]="{
+    'sky-control-label-required': required,
+    'sky-switch-disabled': disabled
+  }"
+>
   <input
     class="sky-switch-input"
     type="checkbox"
     [id]="inputId"
     [checked]="checked"
     [disabled]="disabled"
     [name]="name"
+    [required]="required"
     [tabIndex]="tabindex"
     [attr.aria-label]="label"
     [attr.aria-labelledby]="labelledBy"
+    [attr.aria-required]="(required) ? true : null"
     (blur)="onInputBlur()"
     (change)="onInteractionEvent($event)"/>
   <span