From 3219c555e35a5dbfcdd940f138520cf8416d28af Mon Sep 17 00:00:00 2001
From: Oleg Pimenov <pimenov.o@gmail.com>
Date: Thu, 9 Jul 2020 20:19:21 +0300
Subject: [PATCH] fix(list): checkbox selection #UIM-462 (#484)

---
 packages/mosaic-dev/list/module.ts            |  2 +
 packages/mosaic-dev/list/template.html        | 46 ++++++++++++++++---
 .../mosaic/list/list-selection.component.ts   | 13 ++++--
 3 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/packages/mosaic-dev/list/module.ts b/packages/mosaic-dev/list/module.ts
index 08e53a09b..2eb32227a 100644
--- a/packages/mosaic-dev/list/module.ts
+++ b/packages/mosaic-dev/list/module.ts
@@ -15,6 +15,8 @@ import { McListModule, McListSelectionChange } from '@ptsecurity/mosaic/list';
 export class DemoComponent {
     typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
     multipleSelected = ['Boots', 'Clogs'];
+    multipleSelectedCheckbox = [];
+    singleSelected = [];
 
     folders = [
         {
diff --git a/packages/mosaic-dev/list/template.html b/packages/mosaic-dev/list/template.html
index b0e7f84f8..9222b53d0 100644
--- a/packages/mosaic-dev/list/template.html
+++ b/packages/mosaic-dev/list/template.html
@@ -12,21 +12,55 @@
 
 <!--<br><br><br>-->
 
-<h5>multiple selection</h5>
+<h2>Multiple selection: Keyboard</h2>
 <mc-list-selection
     multiple="keyboard"
+    autoSelect
     [(ngModel)]="multipleSelected"
     (selectionChange)="onSelectionChange($event)">
     <mc-list-option value="Normal">Normal</mc-list-option>
-    <mc-list-option value="Hovered" class="mc-hovered">Hovered</mc-list-option>
-    <mc-list-option value="Focused" class="mc-focused">Focused</mc-list-option>
-    <mc-list-option value="Disabled" disabled>Disabled</mc-list-option>
-    <mc-list-option value="Selected" class="mc-selected">Selected</mc-list-option>
+    <mc-list-option value="Hovered">Hovered</mc-list-option>
+    <mc-list-option value="Focused">Focused</mc-list-option>
+    <mc-list-option value="Disabled">Disabled</mc-list-option>
+    <mc-list-option value="Selected">Selected</mc-list-option>
 </mc-list-selection>
 <br>
 <div>multipleSelected: {{ multipleSelected }}</div>
 
-<!--<br><br><br>-->
+<br><br><br>
+
+<h2>Multiple selection: Checkbox</h2>
+<mc-list-selection
+    multiple="checkbox"
+    autoSelect
+    [(ngModel)]="multipleSelectedCheckbox"
+    (selectionChange)="onSelectionChange($event)">
+    <mc-list-option value="Normal">Normal</mc-list-option>
+    <mc-list-option value="Hovered">Hovered</mc-list-option>
+    <mc-list-option value="Focused">Focused</mc-list-option>
+    <mc-list-option value="Disabled">Disabled</mc-list-option>
+    <mc-list-option value="Selected">Selected</mc-list-option>
+</mc-list-selection>
+<br>
+<div>multipleSelectedCheckbox: {{ multipleSelectedCheckbox }}</div>
+
+<br><br><br>
+
+<h2>Single selection</h2>
+<mc-list-selection
+    autoSelect
+    [(ngModel)]="singleSelected"
+    (selectionChange)="onSelectionChange($event)">
+    <mc-list-option value="Normal">Normal</mc-list-option>
+    <mc-list-option value="Hovered">Hovered</mc-list-option>
+    <mc-list-option value="Focused">Focused</mc-list-option>
+    <mc-list-option value="Disabled">Disabled</mc-list-option>
+    <mc-list-option value="Selected">Selected</mc-list-option>
+</mc-list-selection>
+<br>
+<div>singleSelected: {{ singleSelected }}</div>
+
+<br><br><br>
 
 <!--<h5>vertical scroll</h5>-->
 <!--<mc-list-selection style="height: 160px; overflow-y: scroll">-->
diff --git a/packages/mosaic/list/list-selection.component.ts b/packages/mosaic/list/list-selection.component.ts
index 5658883a5..faa868aff 100644
--- a/packages/mosaic/list/list-selection.component.ts
+++ b/packages/mosaic/list/list-selection.component.ts
@@ -489,8 +489,14 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa
             this.selectionModel.toggle(option);
         } else {
             if (this.autoSelect) {
-                this.options.forEach((item) => item.setSelected(false));
-                option.setSelected(true);
+                if (this.multipleMode !== MultipleMode.KEYBOARD) {
+                    this.selectionModel.toggle(option);
+                }
+
+                if (this.multipleMode === MultipleMode.KEYBOARD || !this.multiple) {
+                    this.options.forEach((item) => item.setSelected(false));
+                    option.setSelected(true);
+                }
             }
         }
 
@@ -504,7 +510,8 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa
         } else if (ctrlKey) {
             if (!this.canDeselectLast(option)) { return; }
         } else {
-            if (this.autoSelect) {
+
+            if (this.multipleMode === MultipleMode.KEYBOARD || !this.multiple) {
                 this.options.forEach((item) => item.setSelected(false));
                 option.setSelected(true);
             }