Revert "feat(tree-select): multiselect without checkbox + multiselect…

… with shift and ctrl (#UIM-156) (#400)"

This reverts commit 99835cb.

packages/cdk/keycodes/keycodes.ts

@@ -122,7 +122,7 @@ export const MAC_META = 224;
 
 type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';
 
-export function hasModifierKey(event: KeyboardEvent | MouseEvent, ...modifiers: ModifierKey[]): boolean {
+export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean {
     if (modifiers.length) {
         return modifiers.some((modifier) => event[modifier]);
     }

packages/mosaic-dev/list/template.html

@@ -14,13 +14,13 @@
 
 <h5>multiple selection</h5>
 <mc-list-selection
-    multiple="keyboard"
+    class="mc-no-select"
     [(ngModel)]="multipleSelected"
     (selectionChange)="onSelectionChange($event)">
+    <mc-list-option value="Disabled" disabled>Disabled</mc-list-option>
     <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-selection>
 <br>

packages/mosaic-dev/tree/module.ts

@@ -112,7 +112,7 @@ export class DemoComponent {
 
     filterValue: string = '';
 
-    modelValue: any = [];
+    modelValue: any = ['Chrome'];
     // modelValue: any[] = ['rootNode_1', 'Documents', 'Calendar', 'Chrome'];
 
     disableState: boolean = false;

packages/mosaic-moment-adapter/adapter/moment-date-adapter.ts

@@ -421,6 +421,7 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
     }
 
     openedRangeDateTime(startDate: Moment | null, endDate: Moment | null, template: IFormatterRangeTemplate) {
+        console.log('openedRangeDateTime: '); // tslint:disable-line:no-console
         if (!moment.isMoment(startDate) && !moment.isMoment(endDate)) {
             throw new Error(this.invalidDateErrorText);
         }

packages/mosaic/list/list-selection.component.ts

@@ -68,7 +68,7 @@ export interface McOptionEvent {
     host: {
         '[attr.tabindex]': 'tabIndex',
 
-        class: 'mc-list-option mc-no-select',
+        class: 'mc-list-option',
         '[class.mc-selected]': 'selected',
         '[class.mc-focused]': 'hasFocus',
         '[class.mc-disabled]': 'disabled',
@@ -212,9 +212,7 @@ export class McListOption implements OnDestroy, OnInit, IFocusableOption {
     handleClick($event) {
         if (this.disabled) { return; }
 
-        this.listSelection.setSelectedOptionsByClick(
-            this, hasModifierKey($event, 'shiftKey'), hasModifierKey($event, 'ctrlKey')
-        );
+        this.listSelection.setFocusedOption(this, $event);
     }
 
     focus() {
@@ -367,11 +365,6 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa
             this.multipleMode = MultipleMode.CHECKBOX;
         }
 
-        if (this.multipleMode === MultipleMode.CHECKBOX) {
-            this.autoSelect = false;
-            this.noUnselect = false;
-        }
-
         this._tabIndex = parseInt(tabIndex) || 0;
 
         this.selectionModel = new SelectionModel<McListOption>(this.multiple);
@@ -460,29 +453,31 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa
         this.keyManager.withScrollSize(Math.floor(this.getHeight() / this.options.first.getHeight()));
     }
 
-    setSelectedOptionsByClick(option: McListOption, shiftKey: boolean, ctrlKey: boolean): void {
-        if (shiftKey && this.multiple) {
-            this.setSelectedOptions(option);
-        } else if (ctrlKey) {
-            if (!this.canDeselectLast(option)) { return; }
+    // Sets the focused option of the selection-list.
+    setFocusedOption(option: McListOption, $event?: KeyboardEvent): void {
+        this.keyManager.setActiveItem(option);
 
-            this.selectionModel.toggle(option);
-        } else {
-            if (this.autoSelect) {
-                this.options.forEach((item) => item.setSelected(false));
-                option.setSelected(true);
-            }
-        }
+        const withShift = $event ? hasModifierKey($event, 'shiftKey') : false;
+        const withCtrl = $event ? hasModifierKey($event, 'ctrlKey') : false;
 
-        this.emitChangeEvent(option);
-        this.reportValueChange();
-    }
+        if (withShift && this.multiple) {
+            const previousIndex = this.keyManager.previousActiveItemIndex;
+            const activeIndex = this.keyManager.activeItemIndex;
+
+            if (previousIndex < activeIndex) {
+                this.options.forEach((item, index) => {
+                    if (index >= previousIndex && index <= activeIndex) { item.setSelected(true); }
+                });
+            } else {
+                this.options.forEach((item, index) => {
+                    if (index >= activeIndex && index <= previousIndex) { item.setSelected(true); }
+                });
+            }
+        } else if (withCtrl) {
 
-    setSelectedOptionsByKey(option: McListOption, shiftKey: boolean, ctrlKey: boolean): void {
-        if (shiftKey && this.multiple) {
-            this.setSelectedOptions(option);
-        } else if (ctrlKey) {
             if (!this.canDeselectLast(option)) { return; }
+
+            option.toggle();
         } else {
             if (this.autoSelect) {
                 this.options.forEach((item) => item.setSelected(false));
@@ -494,31 +489,6 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa
         this.reportValueChange();
     }
 
-    setSelectedOptions(option: McListOption): void {
-        const selectedOptionState = option.selected;
-
-        let fromIndex = this.keyManager.previousActiveItemIndex;
-        let toIndex = this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex;
-
-        if (toIndex === fromIndex) { return; }
-
-        if (fromIndex > toIndex) {
-            [fromIndex, toIndex] = [toIndex, fromIndex];
-        }
-
-        this.options
-            .toArray()
-            .slice(fromIndex, toIndex + 1)
-            .filter((item) => !item.disabled)
-            .forEach((renderedOption) => {
-                const isLastRenderedOption = renderedOption === this.keyManager.activeItem;
-
-                if (isLastRenderedOption && renderedOption.selected && this.noUnselect) { return; }
-
-                renderedOption.setSelected(!selectedOptionState);
-            });
-    }
-
     // Implemented as part of ControlValueAccessor.
     writeValue(values: string[]): void {
         if (this.options) {
@@ -637,11 +607,7 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa
 
         event.preventDefault();
 
-        this.setSelectedOptionsByKey(
-            this.keyManager.activeItem as McListOption,
-            hasModifierKey(event, 'shiftKey'),
-            hasModifierKey(event, 'ctrlKey')
-        );
+        this.setFocusedOption(this.keyManager.activeItem as McListOption, event);
     }
 
     // Reports a value change to the ControlValueAccessor

packages/mosaic/list/list.md

@@ -1,11 +1,14 @@
 #### With default parameters (autoselect="true", no-unselect="true")
 <!-- example(list-overview) -->
 
-### Single mode with groups
-<!-- example(list-groups) -->
 
 ### Multiple mode with checkboxes
 <!-- example(list-multiple-checkbox) -->
 
+
 ### Multiple mode without checkboxes
 <!-- example(list-multiple-keyboard) -->
+
+
+### Multiple mode without checkboxes
+<!-- example(list-groups) -->

packages/mosaic/tree-select/tree-select.component.spec.ts

@@ -649,7 +649,7 @@ class BasicSelectOnPushPreselected {
     template: `
         <mc-form-field>
             <mc-tree-select
-                [multiple]="true"
+                multiple
                 placeholder="Food"
                 [formControl]="control">
 
@@ -1063,7 +1063,7 @@ class BasicSelectWithoutFormsPreselected {
 @Component({
     template: `
         <mc-form-field>
-            <mc-tree-select placeholder="Food" [(ngModel)]="selectedFoods" [multiple]="true">
+            <mc-tree-select placeholder="Food" [(ngModel)]="selectedFoods" multiple>
                 <mc-tree-selection
                     [dataSource]="dataSource"
                     [treeControl]="treeControl">
@@ -4345,7 +4345,6 @@ describe('McTreeSelect', () => {
         it('should be able to select multiple values', fakeAsync(() => {
             trigger.click();
             fixture.detectChanges();
-            flush();
 
             const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-tree-option');
 
@@ -4439,7 +4438,6 @@ describe('McTreeSelect', () => {
         it('should not close the panel when clicking on options', fakeAsync(() => {
             trigger.click();
             fixture.detectChanges();
-            flush();
 
             expect(testInstance.select.panelOpen).toBe(true);
 

packages/mosaic/tree-select/tree-select.component.ts

@@ -54,10 +54,7 @@ import {
     RIGHT_ARROW,
     SPACE,
     UP_ARROW,
-    A,
-    PAGE_UP,
-    PAGE_DOWN,
-    hasModifierKey
+    A, PAGE_UP, PAGE_DOWN
 } from '@ptsecurity/cdk/keycodes';
 import { CdkTree } from '@ptsecurity/cdk/tree';
 import {
@@ -490,10 +487,7 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
 
         this.options = this.tree.renderedOptions;
         this.tree.autoSelect = this.autoSelect;
-
-        if (this.tree.multipleMode === null) {
-            this.tree.multipleMode = this.multiple ? MultipleMode.CHECKBOX : null;
-        }
+        this.tree.multipleMode = this.multiple ? MultipleMode.CHECKBOX : null;
 
         if (this.multiple) {
             this.tree.noUnselectLast = false;
@@ -524,7 +518,6 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
             .pipe(takeUntil(this.destroy))
             .subscribe((event) => {
                 if (event.added.length) {
-                    this.tree.keyManager.setFocusOrigin('program');
                     this.tree.keyManager.setActiveItem(
                         this.options.find((option) => option.data === event.added[0]) as any
                     );
@@ -932,7 +925,6 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
         } else {
             const previouslyFocusedIndex = this.tree.keyManager.activeItemIndex;
 
-            this.tree.keyManager.setFocusOrigin('keyboard');
             this.tree.keyManager.onKeydown(event);
 
             if (
@@ -943,9 +935,7 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
             }
 
             if (this.autoSelect && this.tree.keyManager.activeItem) {
-                this.tree.setSelectedOptionsByKey(
-                    this.tree.keyManager.activeItem, hasModifierKey(event, 'shiftKey'), hasModifierKey(event, 'ctrlKey')
-                );
+                this.tree.setSelectedOption(this.tree.keyManager.activeItem);
             }
         }
     }

packages/mosaic/tree/tree-option.component.ts

@@ -13,8 +13,6 @@ import {
     AfterContentInit,
     NgZone
 } from '@angular/core';
-import { FocusOrigin } from '@ptsecurity/cdk/a11y';
-import { hasModifierKey } from '@ptsecurity/cdk/keycodes';
 import { CdkTreeNode } from '@ptsecurity/cdk/tree';
 import { CanDisable } from '@ptsecurity/mosaic/core';
 import { Subject } from 'rxjs';
@@ -166,9 +164,7 @@ export class McTreeOption extends CdkTreeNode<McTreeOption> implements CanDisabl
         this.changeDetectorRef.markForCheck();
     }
 
-    focus(focusOrigin?: FocusOrigin) {
-        if (focusOrigin === 'program') { return; }
-
+    focus() {
         if (this.disabled || this.hasFocus) { return; }
 
         this.elementRef.nativeElement.focus();
@@ -231,10 +227,9 @@ export class McTreeOption extends CdkTreeNode<McTreeOption> implements CanDisabl
             this.changeDetectorRef.markForCheck();
             this.emitSelectionChangeEvent(true);
 
-            const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
-            const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey') : false;
-
-            this.tree.setSelectedOptionsByClick(this, shiftKey, ctrlKey);
+            if (this.tree.setSelectedOption) {
+                this.tree.setSelectedOption(this, $event);
+            }
         }
     }