chore: api feedback

Author: amcdnl

.github/CODEOWNERS

@@ -87,6 +87,7 @@
 /src/cdk-experimental/**                           @jelbourn
 /src/cdk-experimental/dialog/**                    @jelbourn @josephperrott @crisbeto
 /src/cdk-experimental/scrolling/**                 @mmalerba
+/src/cdk-experimental/selection/**                 @amcdnl
 
 # Docs examples & guides
 /guides/**                                         @amcdnl @jelbourn

src/cdk-experimental/selection/selection-toggle.ts

@@ -24,6 +24,8 @@ import {takeUntil} from 'rxjs/operators';
     '(click)': '_onToggle()',
     '(contextmenu)': '_onToggle()',
     '(keydown.enter)': '_onToggle()',
+    '(keydown.shift)': '_onShift()',
+    '(blur)': '_onBlur()',
   }
 })
 export class CdkSelectionToggle<T> implements OnInit, OnDestroy {
@@ -106,4 +108,14 @@ export class CdkSelectionToggle<T> implements OnInit, OnDestroy {
     this._cd.markForCheck();
   }
 
+  /** Shift key was captured to set user selection. */
+  _onShift() {
+    this._selection.setTextSelection('none');
+  }
+
+  /** Element was blurred, lets reset user selection. */
+  _onBlur() {
+    setTimeout(() => this._selection.setTextSelection('initial'), 200);
+  }
+
 }

src/cdk-experimental/selection/selection.md

@@ -12,7 +12,7 @@ default selections pass an array of the selections to this option like:
 with the `cdkSelectionToggle` directive with an argument of the item's value property.
 
 ```html
-<ul cdkSelection cdkSelectionStrategy="single">
+<ul cdkSelection cdkSelectionMode="single">
   <li *ngFor="let item of items">
     <button  [cdkSelectionToggle]="item.value">
       {{item.label}}
@@ -21,15 +21,19 @@ with the `cdkSelectionToggle` directive with an argument of the item's value pro
 </ul>
 ```
 
-### Strategies
-The selection directive has 3 different strategies for selection:
+### Modes
+The selection directive has 2 different modes for selection:
 
 - Single: Only one item can be selected at a time.
-- Multiple: Multiple items can be selected by clicking
-- Modifier Multiple: Multiple items can be select using keyboard modifiers such as shift or ctrl.
+- Multiple: Multiple items can be selected.
 
-### Clearable
-The ability to clear a selection that has been made can be prevented using the `cdkSelectionClearable`.
+### Key Modifier
+When multi-selection mode is enabled anytime a user clicks a toggle element it will be selected.
+The `requireModifier` property will only allow multi-selection when using key modifiers. For example,
+CTRL/Command + Click would select multiples and SHIFT + Click would select a range.
+
+### Deselectable
+The ability to deselect a selection that has been made can be prevented using the `cdkSelectionDeselectable`.
 This means that after a selection (or many selections) have been made users can deselect
 all but one of the selections. This concept can be related to radio buttons selection strategy.
 
@@ -42,7 +46,7 @@ return a identifying attribute for the object.
 ```TS
 @Component({
   template: `
-    <ul cdkSelection cdkSelectionStrategy="multiple" [cdkSelectionTrackBy]=""trackBy>
+    <ul cdkSelection cdkSelectionMode="multiple" [cdkSelectionTrackBy]=""trackBy>
       <li *ngFor="let item of items">
         <button [cdkSelectionToggle]="item">
           {{item.label}}

src/cdk-experimental/selection/selection.spec.ts

@@ -32,7 +32,7 @@ describe('CdkSelection', () => {
   });
 
   it('should select multiple', () => {
-    testComponent.strategy = 'multiple';
+    testComponent.mode = 'multiple';
     fixture.detectChanges();
 
     testComponent.clickITem('item-1');
@@ -45,7 +45,8 @@ describe('CdkSelection', () => {
   });
 
   it('should select one with modifier multipler', () => {
-    testComponent.strategy = 'modifierMultiple';
+    testComponent.mode = 'multiple';
+    testComponent.modifier = true;
     fixture.detectChanges();
 
     testComponent.clickITem('item-1');
@@ -58,7 +59,8 @@ describe('CdkSelection', () => {
   });
 
   it('should select multiple with modifier multipler', () => {
-    testComponent.strategy = 'modifierMultiple';
+    testComponent.mode = 'multiple';
+    testComponent.modifier = true;
     fixture.detectChanges();
 
     testComponent.clickITem('item-1');
@@ -71,7 +73,8 @@ describe('CdkSelection', () => {
   });
 
   it('should select multiple range with modifier multipler', () => {
-    testComponent.strategy = 'modifierMultiple';
+    testComponent.mode = 'multiple';
+    testComponent.modifier = true;
     fixture.detectChanges();
 
     testComponent.clickITem('item-0');
@@ -84,7 +87,7 @@ describe('CdkSelection', () => {
   });
 
   it('should not clear single after selection', () => {
-    testComponent.clearable = false;
+    testComponent.deselectable = false;
     fixture.detectChanges();
 
     testComponent.clickITem('item-1');
@@ -97,8 +100,8 @@ describe('CdkSelection', () => {
   });
 
   it('should not clear multiple after selection', () => {
-    testComponent.clearable = false;
-    testComponent.strategy = 'multiple';
+    testComponent.deselectable = false;
+    testComponent.mode = 'multiple';
     fixture.detectChanges();
 
     testComponent.clickITem('item-1');
@@ -111,8 +114,9 @@ describe('CdkSelection', () => {
   });
 
   it('should not clear modifier multiple after selection', () => {
-    testComponent.clearable = false;
-    testComponent.strategy = 'modifierMultiple';
+    testComponent.deselectable = false;
+    testComponent.mode = 'multiple';
+    testComponent.modifier = true;
     fixture.detectChanges();
 
     testComponent.clickITem('item-1');
@@ -126,7 +130,7 @@ describe('CdkSelection', () => {
 
   it('should not select more than max allow', () => {
     testComponent.max = 2;
-    testComponent.strategy = 'multiple';
+    testComponent.mode = 'multiple';
     fixture.detectChanges();
 
     testComponent.clickITem('item-0');
@@ -162,9 +166,10 @@ describe('CdkSelection', () => {
   template: `
     <ul
       [cdkSelection]="selections"
-      [cdkSelectionStrategy]="strategy"
+      [cdkSelectionMode]="mode"
+      [cdkSelectRequireModifier]="modifier"
       [cdkSelectionMaxSelections]="max"
-      [cdkSelectionClearable]="clearable">
+      [cdkSelectionDeselectable]="deselectable">
       <li *ngFor="let item of items; let i = index;">
         <button [cdkSelectionToggle]="item.value" [id]="'item-' + i" [disabled]="i === 3">
           {{item.label}}
@@ -185,8 +190,9 @@ class Selection {
   ];
 
   selections: string[] = [];
-  clearable = true;
-  strategy = 'single';
+  deselectable = true;
+  modifier = false;
+  mode = 'single';
   max: number;
 
   constructor(public elementRef: ElementRef) {}

src/cdk-experimental/selection/selection.ts

@@ -25,16 +25,19 @@ export class CdkSelection<T> implements OnInit {
    * - Multiple: Multiple items can be selected.
    * - Modifier Multiple: Multiple items can be selected using modifier keys such as ctrl or shift.
    */
-  @Input('cdkSelectionStrategy') strategy: 'single' | 'multiple' | 'modifierMultiple' = 'single';
+  @Input('cdkSelectionMode') mode: 'single' | 'multiple' = 'single';
+
+  /** When multi select is enabled, require a key modifier to select multiples. */
+  @Input('cdkSelectRequireModifier') requireModifier: boolean = false;
 
   /** Track by used for selection matching. */
   @Input('cdkSelectionTrackBy') trackBy: (model: T) => any;
 
   /** Whether the selections can be cleared after selection. */
-  @Input('cdkSelectionClearable')
-  get clearable(): boolean { return this._clearable; }
-  set clearable(val) { this._clearable = coerceBooleanProperty(val); }
-  private _clearable: boolean = true;
+  @Input('cdkSelectionDeselectable')
+  get deselectable(): boolean { return this._deselectable; }
+  set deselectable(val) { this._deselectable = coerceBooleanProperty(val); }
+  private _deselectable: boolean = true;
 
   /** The max number of selections that can be selected */
   @Input('cdkSelectionMaxSelections')
@@ -68,7 +71,7 @@ export class CdkSelection<T> implements OnInit {
 
   ngOnInit() {
     this. _selectionModel = new SelectionModel<T>(
-      this.getIsMultiple(),
+      this.mode === 'multiple',
       this.selections,
       true,
       this.trackBy
@@ -95,19 +98,14 @@ export class CdkSelection<T> implements OnInit {
     }
   }
 
-  /** Returns whether the control is multi select or not. */
-  getIsMultiple() {
-    return this.strategy === 'multiple' || this.strategy === 'modifierMultiple';
-  }
-
   /** Toggle the selection of a item. */
   toggle(ctrl: any) {
     if (this.disabled) {
       return;
     }
 
     if (Array.isArray(ctrl.model)) {
-      if (this.getIsMultiple() &&
+      if (this.mode === 'multiple' &&
           (this.maxSelections === undefined ||
           (ctrl.model.length + this._selectionModel.selected.length) < this.maxSelections)) {
         this._selectionModel.clear();
@@ -119,38 +117,46 @@ export class CdkSelection<T> implements OnInit {
     }
   }
 
+  /** Set the user selection for the element. */
+  setTextSelection(type: string) {
+    const elm = this._elementRef.nativeElement;
+    elm.style.userSelect = type;
+    elm.style.webkitUserSelect = type;
+    elm.style.MozUserSelect = type;
+  }
+
   /** Update the selections given the arguments. */
   private _setSelections(ctrl: any) {
     const ctrls = this._getSortedSet();
     const index = this._getIndex(ctrls, ctrl);
     const { modifier, model } = ctrl;
     const selections = this._selectionModel.selected;
 
-    if (this.getIsMultiple() && modifier === 'shift') {
+    if (this.mode === 'multiple' && modifier === 'shift') {
       if (index > -1) {
         this._selectRange(ctrls, this._previousSelectedIndex, index);
       }
-    } else if (this.getIsMultiple()) {
+    } else if (this.mode === 'multiple') {
       const isSelected = this._selectionModel.isSelected(model);
-      if (this.strategy === 'modifierMultiple' && modifier !== 'meta') {
+      if (this.requireModifier && modifier !== 'meta') {
         this._selectionModel.clear();
-        if (!isSelected || !this.clearable) {
+        if (!isSelected || !this.deselectable) {
           this._selectionModel.select(model);
         }
       } else {
         if (!isSelected) {
           if (this.maxSelections === undefined || selections.length < this.maxSelections) {
             this._selectionModel.select(model);
           }
-        } else if (this.clearable || (!this.clearable && selections.length > 1)) {
+        } else if (this.deselectable || (!this.deselectable && selections.length > 1)) {
           this._selectionModel.deselect(model);
         }
       }
     } else {
       const isSelected = this._selectionModel.isSelected(model);
       if (!isSelected) {
         this._selectionModel.select(model);
-      } else if(this.clearable) {
+      } else if(this.deselectable) {
         this._selectionModel.deselect(model);
       }
     }