Convert selection functions on cards to toggling, let service handle setting selected

Also because we need to capture mouseevents

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -1,11 +1,11 @@
 <div class="col p-2 h-100">
   <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
     <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
-      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="setSelected(!selected)">
+      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="toggleSelected.emit($event)">
 
       <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
         <div class="custom-control custom-checkbox">
-          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="toggleSelected.emit($event)">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -14,14 +14,9 @@ export class DocumentCardSmallComponent implements OnInit {
 
   @Input()
   selected = false
-
-  setSelected(value: boolean) {
-    this.selected = value
-    this.selectedChange.emit(value)
-  }
-
+  
   @Output()
-  selectedChange = new EventEmitter<boolean>()
+  toggleSelected = new EventEmitter()
 
   @Input()
   document: PaperlessDocument