feat(admin-ui): Create SelectToggleComponent

admin-ui/src/app/shared/components/select-toggle/select-toggle.component.html

@@ -0,0 +1,8 @@
+<div class="toggle"
+     tabindex="0"
+     [class.selected]="selected"
+     (keydown.enter)="selectedChange.emit(!selected)"
+     (keydown.space)="$event.preventDefault(); selectedChange.emit(!selected)"
+     (click)="selectedChange.emit(!selected)">
+    <clr-icon shape="check" size="32"></clr-icon>
+</div>

admin-ui/src/app/shared/components/select-toggle/select-toggle.component.scss

@@ -0,0 +1,40 @@
+@import "variables";
+@import "mixins";
+
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle {
+    @include no-select();
+    cursor: pointer;
+    background-color: $color-grey-1;
+    border: 2px solid $color-grey-4;
+    padding: 0 6px;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $color-grey-3;
+    transition: background-color 0.2s, border 0.2s;
+
+    &:hover {
+        border-color: $color-success;
+        background-color: transparentize($color-success, 0.9);
+    }
+
+    &.selected {
+        background-color: $color-success;
+        border-color: darken($color-success, 5%);
+        color: white;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 2px 2px #6bc1e3
+    }
+}

admin-ui/src/app/shared/components/select-toggle/select-toggle.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+/**
+ * A simple, stateless toggle button for indicating selection.
+ */
+@Component({
+    selector: 'vdr-select-toggle',
+    templateUrl: './select-toggle.component.html',
+    styleUrls: ['./select-toggle.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectToggleComponent {
+    @Input() selected = false;
+    @Output() selectedChange = new EventEmitter<boolean>();
+}

admin-ui/src/app/shared/shared.module.ts

@@ -21,6 +21,7 @@ import { DialogComponentOutletComponent } from './components/modal-dialog/dialog
 import { DialogTitleDirective } from './components/modal-dialog/dialog-title.directive';
 import { ModalDialogComponent } from './components/modal-dialog/modal-dialog.component';
 import { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
+import { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
 import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
 import { ModalService } from './providers/modal/modal.service';
 
@@ -49,6 +50,7 @@ const DECLARATIONS = [
     DialogComponentOutletComponent,
     DialogButtonsDirective,
     DialogTitleDirective,
+    SelectToggleComponent,
 ];
 
 @NgModule({

admin-ui/src/styles/_mixins.scss

@@ -0,0 +1,8 @@
+@mixin no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}