wip: cdk selection

src/cdk-experimental/selection/BUILD.bazel

@@ -0,0 +1,49 @@
+package(default_visibility=["//visibility:public"])
+load("@angular//:index.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
+
+
+ng_module(
+  name = "selection",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  module_name = "@angular/cdk-experimental/selection",
+  assets = [] + glob(["**/*.html"]),
+  deps = [
+    "//src/cdk/coercion",
+    "//src/cdk/collections",
+    "@rxjs",
+  ],
+  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+)
+
+
+ts_library(
+  name = "selection_test_sources",
+  testonly = 1,
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    ":selection",
+    "//src/cdk/collections",
+    "//src/cdk/testing",
+    "@rxjs",
+  ],
+  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+)
+
+ts_web_test(
+  name = "unit_tests",
+  bootstrap = [
+    "//:web_test_bootstrap_scripts",
+  ],
+  tags = ["manual"],
+
+  # Do not sort
+  deps = [
+    "//:tslib_bundle",
+    "//:angular_bundles",
+    "//:angular_test_bundles",
+    "//test:angular_test_init",
+    ":selection_test_sources",
+  ],
+)

src/cdk-experimental/selection/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { NgModule } from '@angular/core';
+import { CdkSelection } from './selection';
+import { CdkSelectionToggle } from './selection-toggle';
+
+
+@NgModule({
+  declarations: [CdkSelection, CdkSelectionToggle],
+  exports: [CdkSelection, CdkSelectionToggle]
+})
+export class CdkSelectionModule {}

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

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, Input, OnInit, OnDestroy, ElementRef, ChangeDetectorRef} from '@angular/core';
+import {CdkSelection} from './selection';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+
+@Directive({
+  selector: '[cdkSelectionToggle]',
+  host: {
+    'class': 'cdk-selection-toggle',
+    'role': 'option',
+    'tabindex': '-1',
+    '[attr.aria-selected]': 'selected',
+    '[class.cdk-selection-selected]': 'selected',
+    '(mousedown)': '_onMouseDown($event)',
+    '(click)': '_onToggle()',
+    '(contextmenu)': '_onToggle()',
+    '(keydown.enter)': '_onToggle()',
+  }
+})
+export class CdkSelectionToggle<T> implements OnInit, OnDestroy {
+
+  /** Model of the item to toggle selection. */
+  @Input('cdkSelectionToggle') model: T | T[];
+
+  /** Whether the selection is disabled or not. */
+  @Input() disabled: boolean;
+
+  /** Whether the toggle is selected or not. */
+  selected: boolean;
+
+  /** The modifier that was invoked. */
+  modifier: 'shift' | 'meta' | null;
+
+  private _destroy = new Subject();
+
+  constructor(
+    public elementRef: ElementRef,
+    private _selection: CdkSelection<T>,
+    private _cd: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    this._selection.selectionChange
+      .pipe(takeUntil(this._destroy))
+      .subscribe(() => this._checkSelected());
+
+    this._checkSelected();
+    this._selection.register(this);
+  }
+
+  ngOnDestroy() {
+    this._destroy.next();
+    this._destroy.complete();
+
+    this._selection.deregister(this);
+  }
+
+  /** Mousedown even to capture modifiers. */
+  _onMouseDown(event: MouseEvent) {
+    this._setModifiers(event);
+  }
+
+  /** Invoke toggle on the parent selection directive. */
+  _onToggle() {
+    if (!this.disabled) {
+      this._selection.toggle(this);
+    }
+  }
+
+  /** Set the modifiers for the mouse event. */
+  _setModifiers(event) {
+    if (event.metaKey || event.ctrlKey) {
+      this.modifier = 'meta';
+    } else if (event.shiftKey) {
+      this.modifier = 'shift';
+    }
+
+    // Clear the modifier if we don't use it
+    setTimeout(() => this.modifier = null, 200);
+  }
+
+  /** Check whether the toggle's model(s) are selected and set state. */
+  _checkSelected() {
+    if (Array.isArray(this.model)) {
+      let has = true;
+      for (const model of this.model) {
+        if (!this._selection._selectionModel.isSelected(model)) {
+          has = false;
+          break;
+        }
+      }
+      this.selected = has;
+    } else {
+      this.selected = this._selection._selectionModel.isSelected(this.model);
+    }
+
+    this._cd.markForCheck();
+  }
+
+}

src/cdk-experimental/selection/selection.md

@@ -0,0 +1,59 @@
+The `selection` package handles managing selection state on components
+with support for single and multi select with keyboard modifiers.
+
+Components such as buttons, checkboxes, etc can all be decorated with
+the `cdkSelectionToggle` directive. Once decorated, the directive
+will listen for mouse and keyboard events and coordinate the
+selection options with the parent `cdkSelection` directive.
+
+In the example below, the div container of the buttons is decorated with `cdkSelection`. To populate 
+default selections pass an array of the selections to this option like:
+`[cdkSelection]="['yellow']"`. Nested beneath the selection directive is a button decorated
+with the `cdkSelectionToggle` directive with an argument of the item's value property.
+
+```html
+<ul cdkSelection cdkSelectionStrategy="single">
+  <li *ngFor="let item of items">
+    <button  [cdkSelectionToggle]="item.value">
+      {{item.label}}
+    </button>
+  </li>
+</ul>
+```
+
+### Strategies
+The selection directive has 3 different strategies 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.
+
+### Clearable
+The ability to clear a selection that has been made can be prevented using the `cdkSelectionClearable`.
+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.
+
+### Tracking
+When using complex objects with the selection toggle, custom tracking strategies
+can ensure correct identification of the values. The `cdkSelectionTrackBy` accepts
+a function that will be invoked with the values of the toggle. This can be used to
+return a identifying attribute for the object.
+
+```TS
+@Component({
+  template: `
+    <ul cdkSelection cdkSelectionStrategy="multiple" [cdkSelectionTrackBy]=""trackBy>
+      <li *ngFor="let item of items">
+        <button [cdkSelectionToggle]="item">
+          {{item.label}}
+        </button>
+      </li>
+    </ul>
+  `
+})
+export class MyComponent {
+  trackBy(model) {
+    return model.value;
+  }
+}
+```