feat(selection-list): Selection-list initial version all code(without demo)

src/lib/core/theming/_palette.scss

@@ -660,6 +660,7 @@ $mat-light-theme-background: (
   selected-disabled-button: map_get($mat-grey, 400),
   disabled-button-toggle: map_get($mat-grey, 200),
   unselected-chip: map_get($mat-grey, 300),
+  disabled-list-option: map_get($mat-grey, 200),
 );
 
 // Background palette for dark themes.
@@ -677,6 +678,7 @@ $mat-dark-theme-background: (
   selected-disabled-button: map_get($mat-grey, 800),
   disabled-button-toggle: map_get($mat-grey, 1000),
   unselected-chip: map_get($mat-grey, 700),
+  disabled-list-option: map_get($mat-grey, 1000),
 );
 
 // Foreground palette for light themes.

src/lib/list/_list-theme.scss

@@ -8,16 +8,24 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .mat-list, .mat-nav-list {
+  .mat-list, .mat-nav-list, .mat-selection-list {
     .mat-list-item {
       color: mat-color($foreground, text);
     }
 
+    .mat-list-option {
+      color: mat-color($foreground, text);
+    }
+
     .mat-subheader {
       color: mat-color($foreground, secondary-text);
     }
   }
 
+  .mat-list-item-disabled {
+    background-color: mat-color($background, disabled-list-option);
+  }
+
   .mat-divider {
     border-top-color: mat-color($foreground, divider);
   }
@@ -29,6 +37,14 @@
       background: mat-color($background, 'hover');
     }
   }
+
+  .mat-list-option {
+    outline: none;
+
+    &:hover, &.mat-list-item-focus {
+      background: mat-color($background, 'hover');
+    }
+  }
 }
 
 @mixin mat-list-typography($config) {
@@ -38,13 +54,22 @@
     font-family: $font-family;
   }
 
+  .mat-list-option {
+    font-family: $font-family;
+  }
+
   // Default list
-  .mat-list, .mat-nav-list {
+  .mat-list, .mat-nav-list, .mat-selection-list {
     .mat-list-item {
       font-size: mat-font-size($config, subheading-2);
       @include mat-line-base(mat-font-size($config, body-1));
     }
 
+    .mat-list-option {
+      font-size: mat-font-size($config, subheading-2);
+      @include mat-line-base(mat-font-size($config, body-1));
+    }
+
     .mat-subheader {
       font-family: mat-font-family($config, body-2);
       font-size: mat-font-size($config, body-2);
@@ -53,12 +78,17 @@
   }
 
   // Dense list
-  .mat-list[dense], .mat-nav-list[dense] {
+  .mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {
     .mat-list-item {
       font-size: mat-font-size($config, caption);
       @include mat-line-base(mat-font-size($config, caption));
     }
 
+    .mat-list-option {
+      font-size: mat-font-size($config, caption);
+      @include mat-line-base(mat-font-size($config, caption));
+    }
+
     .mat-subheader {
       font-family: $font-family;
       font-size: mat-font-size($config, caption);

src/lib/list/index.ts

@@ -7,7 +7,8 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MdLineModule, MdRippleModule, MdCommonModule} from '../core';
+import {MdLineModule, MdRippleModule, MdCommonModule, MdSelectionModule} from '../core';
+import {CommonModule} from '@angular/common';
 import {
   MdList,
   MdListItem,
@@ -17,12 +18,14 @@ import {
   MdListCssMatStyler,
   MdNavListCssMatStyler,
   MdDividerCssMatStyler,
-  MdListSubheaderCssMatStyler,
+  MdListSubheaderCssMatStyler
 } from './list';
+import {MdSelectionList} from './selection-list';
+import {MdListOption} from './list-option';
 
 
 @NgModule({
-  imports: [MdLineModule, MdRippleModule, MdCommonModule],
+  imports: [MdLineModule, MdRippleModule, MdCommonModule, MdSelectionModule, CommonModule],
   exports: [
     MdList,
     MdListItem,
@@ -35,6 +38,9 @@ import {
     MdNavListCssMatStyler,
     MdDividerCssMatStyler,
     MdListSubheaderCssMatStyler,
+    MdSelectionModule,
+    MdSelectionList,
+    MdListOption
   ],
   declarations: [
     MdList,
@@ -46,9 +52,13 @@ import {
     MdNavListCssMatStyler,
     MdDividerCssMatStyler,
     MdListSubheaderCssMatStyler,
+    MdSelectionList,
+    MdListOption
   ],
 })
 export class MdListModule {}
 
 
 export * from './list';
+export * from './selection-list';
+export * from './list-option';

src/lib/list/list-option.html

@@ -0,0 +1,10 @@
+<div class="mat-list-item-content"  [class.mat-list-item-content-reverse]="checkboxPosition == 'after'" [class.mat-list-item-disabled]="disabled">
+  <div class="mat-list-item-ripple" md-ripple
+       [mdRippleTrigger]="_getHostElement()"
+       [mdRippleDisabled]="!isRippleEnabled()">
+  </div>
+
+  <md-pseudo-checkbox [state]="selected ? 'checked' : 'unchecked'" #autocheckbox [disabled]="disabled"></md-pseudo-checkbox>
+  <div class="mat-list-text"><ng-content></ng-content></div>
+
+</div>

src/lib/list/list-option.ts

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  ElementRef,
+  Input,
+  Optional,
+  QueryList,
+  Renderer2,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  OnDestroy,
+  EventEmitter,
+  Output,
+  HostBinding,
+  ChangeDetectorRef
+} from '@angular/core';
+import {coerceBooleanProperty, MdLine, MdLineSetter} from '../core';
+import {FocusableOption} from '../core/a11y/focus-key-manager';
+import {MdSelectionList} from './selection-list';
+
+export interface MdSelectionListOptionEvent {
+  option: MdListOption;
+}
+
+const FOCUSED_STYLE: string = 'mat-list-item-focus';
+
+/**
+ * Component for list-options of selection-list. Each list-option can automatically
+ * generate a checkbox and can put current item into the selectionModel of selection-list
+ * if the current item is checked.
+ */
+@Component({
+  moduleId: module.id,
+  selector: 'md-list-option, mat-list-option',
+  host: {
+    'role': 'option',
+    'class': 'mat-list-item mat-list-option',
+    '(focus)': '_handleFocus()',
+    '(blur)': '_handleBlur()',
+    '(click)': '_handleClick()',
+    'tabindex': '-1',
+    '[attr.aria-selected]': 'selected.toString()',
+    '[attr.aria-disabled]': 'disabled.toString()',
+  },
+  templateUrl: 'list-option.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MdListOption implements AfterContentInit, OnDestroy, FocusableOption {
+  private _lineSetter: MdLineSetter;
+  private _disableRipple: boolean = false;
+  private _selected: boolean = false;
+  /** Whether the checkbox is disabled. */
+  private _disabled: boolean = false;
+  private _value: any;
+
+  /** Whether the option has focus. */
+  _hasFocus: boolean = false;
+
+  /**
+   * Whether the ripple effect on click should be disabled. This applies only to list items that are
+   * part of a selection list. The value of `disableRipple` on the `md-selection-list` overrides
+   * this flag
+   */
+  @Input()
+  get disableRipple() { return this._disableRipple; }
+  set disableRipple(value: boolean) { this._disableRipple = coerceBooleanProperty(value); }
+
+  @ContentChildren(MdLine) _lines: QueryList<MdLine>;
+
+  /** Whether the label should appear before or after the checkbox. Defaults to 'after' */
+  @Input() checkboxPosition: 'before' | 'after' = 'after';
+
+  /** Whether the option is disabled. */
+  @Input()
+  get disabled() { return (this.selectionList && this.selectionList.disabled) || this._disabled; }
+  set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }
+
+  @Input()
+  get value() { return this._value; }
+  set value( val: any) { this._value = coerceBooleanProperty(val); }
+
+  @Input()
+  get selected() { return this._selected; }
+  set selected( val: boolean) { this._selected = coerceBooleanProperty(val); }
+
+  /** Emitted when the option is focused. */
+  onFocus = new EventEmitter<MdSelectionListOptionEvent>();
+
+  /** Emitted when the option is selected. */
+  @Output() selectChange = new EventEmitter<MdSelectionListOptionEvent>();
+
+  /** Emitted when the option is deselected. */
+  @Output() deselected = new EventEmitter<MdSelectionListOptionEvent>();
+
+  /** Emitted when the option is destroyed. */
+  @Output() destroyed = new EventEmitter<MdSelectionListOptionEvent>();
+
+  constructor(private _renderer: Renderer2,
+              private _element: ElementRef,
+              private _changeDetector: ChangeDetectorRef,
+              @Optional() public selectionList: MdSelectionList) { }
+
+
+  ngAfterContentInit() {
+    this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element);
+
+    if (this.selectionList.disabled) {
+      this.disabled(true);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed.emit({option: this});
+  }
+
+  toggle(): void {
+    this.selected = !this.selected;
+    this.selectionList.selectedOptions.toggle(this);
+    this._changeDetector.markForCheck();
+  }
+
+  /** Allows for programmatic focusing of the option. */
+  focus(): void {
+    this._element.nativeElement.focus();
+    this.onFocus.emit({option: this});
+  }
+
+  /** Whether this list item should show a ripple effect when clicked.  */
+  isRippleEnabled() {
+    return !this.disableRipple && !this.selectionList.disableRipple;
+  }
+
+  _handleClick() {
+    if (!this.disabled) {
+      this.toggle();
+    }
+  }
+
+  _handleFocus() {
+    this._hasFocus = true;
+    this._renderer.addClass(this._element.nativeElement, FOCUSED_STYLE);
+  }
+
+  _handleBlur() {
+    this._renderer.removeClass(this._element.nativeElement, FOCUSED_STYLE);
+  }
+
+  /** Retrieves the DOM element of the component host. */
+  _getHostElement(): HTMLElement {
+    return this._element.nativeElement;
+  }
+}

src/lib/list/list.scss

@@ -43,6 +43,14 @@ $mat-dense-list-icon-size: 20px;
     position: relative;
   }
 
+  .mat-list-item-content-reverse {
+    display: flex;
+    align-items: center;
+    padding: 0 $mat-list-side-padding;
+    flex-direction: row-reverse;
+    justify-content: space-around;
+  }
+
   .mat-list-item-ripple {
     position: absolute;
     left: 0;
@@ -128,7 +136,7 @@ $mat-dense-list-icon-size: 20px;
   }
 }
 
-.mat-list, .mat-nav-list {
+.mat-list, .mat-nav-list, .mat-selection-list {
   padding-top: $mat-list-top-padding;
   display: block;
 
@@ -145,10 +153,21 @@ $mat-dense-list-icon-size: 20px;
       $mat-list-icon-size
     );
   }
+
+  .mat-list-option {
+    @include mat-list-item-base(
+      $mat-list-base-height,
+      $mat-list-avatar-height,
+      $mat-list-two-line-height,
+      $mat-list-three-line-height,
+      $mat-list-icon-size
+    );
+  }
 }
 
 
-.mat-list[dense], .mat-nav-list[dense] {
+.mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {
+
   padding-top: $mat-dense-top-padding;
   display: block;
 
@@ -165,6 +184,16 @@ $mat-dense-list-icon-size: 20px;
       $mat-dense-list-icon-size
     );
   }
+
+  .mat-list-option {
+    @include mat-list-item-base(
+      $mat-dense-base-height,
+      $mat-dense-avatar-height,
+      $mat-dense-two-line-height,
+      $mat-dense-three-line-height,
+      $mat-dense-list-icon-size
+    );
+  }
 }
 
 .mat-divider {

src/lib/list/list.ts

@@ -32,6 +32,7 @@ export const _MdListMixinBase = mixinDisableRipple(MdListBase);
 export class MdListItemBase {}
 export const _MdListItemMixinBase = mixinDisableRipple(MdListItemBase);
 
+
 @Directive({
   selector: 'md-divider, mat-divider',
   host: {