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

… demo) (#5562)

* # This is a combination of 4 commits.
# This is the 1st commit message:

add lib files for sticky-header

add chose parent

add support to 'optional 'cdkStickyRegion' input '

add app-demo for sticky-header

fix bugs and deleted unused tag id in HTML files

modify

fix some code according to PR review comments

change some format to pass TSlint check

add '_' before private elements

delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable

refine code

encapsulate 'set style for element'

change @input()

Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')'

add const STICK_START_CLASS and STICK_END_CLASS

Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'.

change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule';

encapsulate reset css style operation for sticky header.

delete unnecessary gloable variables

sticky-header-rebased

add one test &&

fixed bug 'sticky-header not working on iPhone', and bug 'reshape too obviously when being sticked'. &&

made some change according to the design doc('md-stick --> cdkSticky')

make the sticky element being scrolled up smoothly when being unsticked

Add code to support  optional parentRegion input

add

add unit test for sticky-header

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

encapsulate reset css style operation for sticky header.

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

delete unused files

encapsulate reset css style operation for sticky header.

sticky-header-rebased

Add code to support  optional parentRegion input

add unit test for sticky-header

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

encapsulate reset css style operation for sticky header.

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

clean unused files

delete sticky-header

delete styicky-heade demo

delete sticky-header lib

revert public_api

delete sticky-header e2e files

delete.firebasesrc

revert

revert

revert

revert

add css styles for selection-list

add selection-list structures in list.ts

initial version of selection-list all src/lib code

fix tslint error

fix tslint error

applied '[class.mat-list-item-content-reverse]="checkboxPosition == 'after'"', deleted comments in code

Deleted 'MdSelectionListCssMatStyler' class

Added doc for 'md-selection-option'

Added binding expression for 'attr.aria-selected' and 'attr.aria-disabled'

Added a value and a disabled @input() property

Changed 'isSelected' to 'selected'. And added '@input(selected)' for it.(Using 'coerceBooleanProperty')

changed '_slist' to 'selectionList' and deleted 'MdSelectionListCheckboxer' class

Deleted navList in selection-list-option

changed 'onchange()' to toggle(). And added doc for it

checkedItems -> selectedOptions

deleted 'pCheckbox' and store 'this' instead of HTMLelement in 'optionlist'

optimized toggle() with 'this._selected = !this._selected'

Added 'Tab' moves focus on selection-list, 'UP_ARROW' and 'DOWN_ARROW' moves focus within selection-list. And use 'SPACE' to select checkbox

Added another empty line at the end of each file

remove comment line in CSS file

Deleted 'webkit-justify-content' in CSS file

Deleted 'mat-list-item-content-reverse' to these existing styles; the 'mat-list-item-content-reverse' class should only have the extra styles you need to reverse the display

Deleted 'mat-list-item-content' and 'mat-list-item-content-reverse' and '<a>' styles in '.mat-selection-list'

Deleted unused 'mat-checkbox' class

add ".mat-list-option" class in css file

added 'mat-list-option' class

fix toggle() disabled

Deleted empty class

Deleted unused import

Removed 'if (this.selectable)' check

moved styles in '.mat-selection-list .mat-list-item' to '.mat-list-option'.

Deleted position, box-sizing, and height in '.mat-list-item-content-reverse' in list.scss file

put md-selection-list and md-list-option in separate files(selection-list.ts and list-option.ts)

# This is the commit message #2:

nit
# This is the commit message #3:

correct imports in index.ts


# This is the commit message #4:

use ' @ContentChildren(MdListOption) options;' instead of QueryList

* add lib files for sticky-header

add chose parent

add support to 'optional 'cdkStickyRegion' input '

add app-demo for sticky-header

fix bugs and deleted unused tag id in HTML files

modify

fix some code according to PR review comments

change some format to pass TSlint check

add '_' before private elements

delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable

refine code

encapsulate 'set style for element'

change @input()

Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')'

add const STICK_START_CLASS and STICK_END_CLASS

Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'.

change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule';

encapsulate reset css style operation for sticky header.

delete unnecessary gloable variables

sticky-header-rebased

add one test &&

fixed bug 'sticky-header not working on iPhone', and bug 'reshape too obviously when being sticked'. &&

made some change according to the design doc('md-stick --> cdkSticky')

make the sticky element being scrolled up smoothly when being unsticked

Add code to support  optional parentRegion input

add

add unit test for sticky-header

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

encapsulate reset css style operation for sticky header.

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

delete unused files

encapsulate reset css style operation for sticky header.

sticky-header-rebased

Add code to support  optional parentRegion input

add unit test for sticky-header

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

encapsulate reset css style operation for sticky header.

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

master

sticky-header-rebased

Add code to support  optional parentRegion input

add e2e/sticky-header files

e2e test

clear code

fix

clean unused files

delete sticky-header

delete styicky-heade demo

delete sticky-header lib

revert public_api

delete sticky-header e2e files

delete.firebasesrc

revert

revert

revert

revert

add css styles for selection-list

add selection-list structures in list.ts

initial version of selection-list all src/lib code

fix tslint error

fix tslint error

applied '[class.mat-list-item-content-reverse]="checkboxPosition == 'after'"', deleted comments in code

Deleted 'MdSelectionListCssMatStyler' class

Added doc for 'md-selection-option'

Added binding expression for 'attr.aria-selected' and 'attr.aria-disabled'

Added a value and a disabled @input() property

Changed 'isSelected' to 'selected'. And added '@input(selected)' for it.(Using 'coerceBooleanProperty')

changed '_slist' to 'selectionList' and deleted 'MdSelectionListCheckboxer' class

Deleted navList in selection-list-option

changed 'onchange()' to toggle(). And added doc for it

checkedItems -> selectedOptions

deleted 'pCheckbox' and store 'this' instead of HTMLelement in 'optionlist'

optimized toggle() with 'this._selected = !this._selected'

Added 'Tab' moves focus on selection-list, 'UP_ARROW' and 'DOWN_ARROW' moves focus within selection-list. And use 'SPACE' to select checkbox

Added another empty line at the end of each file

remove comment line in CSS file

Deleted 'webkit-justify-content' in CSS file

Deleted 'mat-list-item-content-reverse' to these existing styles; the 'mat-list-item-content-reverse' class should only have the extra styles you need to reverse the display

Deleted 'mat-list-item-content' and 'mat-list-item-content-reverse' and '<a>' styles in '.mat-selection-list'

Deleted unused 'mat-checkbox' class

add ".mat-list-option" class in css file

added 'mat-list-option' class

fix toggle() disabled

Deleted empty class

Deleted unused import

Removed 'if (this.selectable)' check

moved styles in '.mat-selection-list .mat-list-item' to '.mat-list-option'.

Deleted position, box-sizing, and height in '.mat-list-item-content-reverse' in list.scss file

put md-selection-list and md-list-option in separate files(selection-list.ts and list-option.ts)

nit

correct imports in index.ts

use ' @ContentChildren(MdListOption) options;' instead of QueryList

change to check 'focusedIndex != null'.

Set The tabindex of list option as -1 when the selection-list is disabled

change ['class': 'mat-list-item, mat-list-option',] to ['class': 'mat-list-item mat-list-option',];
Don't want a comma between class names.

fix typo in comments

fix

Binded 'aria-disabled' for selection-list.ts

rename to '_optionsChangeSubscription'

typo

Instead of defining the disabled getter/setter yourself, you can include it via mixin.

Removed ' selectable' property

Deleted unnecessary 'this._isValidIndex(optionIndex)' check

import switchMap

Added SwitchMerge

nit

revert
revert
revert2

revert3
r4
r5
r2
r3
r4
r5

revert

fix rxjs import

Changed to use 'RxChain' instead of directly importing 'observer/add/'

delete unusd import

Added exports for selectionlist

fix tslint check

fix tslint check

fix tslint check

Add tests for selection-list and list-option

fix typo in test

Added new test on native element's focus & blur

Added check expect(selectList.selected.length).toBe(0);before the toggle

nit

Added test on desecting an option

fix tslink check

fix typo in doc

refine docs

fix 'What happens if the selection list is disabled later? Would the list option become disabled?'

Changed all the test name to the format of 'should ...'

rename

Deleted unused '_tabOutSubscription'

return RxChain.from(this.options.changes)...

fix tsLint check

fix tslint

fix tslint error

test can not pass on travel CI

fix travelCI check

try to fix nativeElement focus test

revert

fix test

fix travis CI error

fixing travis
fixed~!
update fix

fix

fix
fix2
fix

added test check on 'aria-selected'

Added test checkou on 'aria-disabled'

reformat structure

changed to 'if (!fixture.componentInstance.isIE) { ... }'

Change 'platform.SAFARI || platform.EDGE || platform.FIREFOX' to '!platform.IS_TRIDENT'

fix travis check

Added aris-disabled test

fix travis test

put disabled style in theme.scss

use background color for disabled items

deselect --> deselected

destory -> destoryed

optimize

changed to "if (!this.disabled) {   ... }"

restructured test cases

change function to private

_keydown

protected -> private

indent

change 'select' to 'selectChange'

Better to delete if (this.selectionList.disabled) {...} part

Use this.disabled to consider the case when parent selectionList is disabled?

Deleted emty lines

It would be better not to mutate the option disabled state based on the parent state; this can be error prone, as it's easy to miss updating one when the other changes. It's better to rely on the disabled getter for the option to account for the parent state.

* fix after rebase

* fix

* change 'grey, 1000' to 'black'

* remove unused import

* fix test

* put selection-list.ts and list-option.ts into one file~ and fix the test

* fix google3

* fix

* Add imports

* fix

* Deleted unused import

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.
@@ -675,8 +676,9 @@ $mat-dark-theme-background: (
   focused-button: $white-6-opacity,
   selected-button: map_get($mat-grey, 900),
   selected-disabled-button: map_get($mat-grey, 800),
-  disabled-button-toggle: map_get($mat-grey, 1000),
+  disabled-button-toggle: black,
   unselected-chip: map_get($mat-grey, 700),
+  disabled-list-option: black,
 );
 
 // 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,13 @@ import {
   MdListCssMatStyler,
   MdNavListCssMatStyler,
   MdDividerCssMatStyler,
-  MdListSubheaderCssMatStyler,
+  MdListSubheaderCssMatStyler
 } from './list';
+import {MdSelectionList, MdListOption} from './selection-list';
 
 
 @NgModule({
-  imports: [MdLineModule, MdRippleModule, MdCommonModule],
+  imports: [MdLineModule, MdRippleModule, MdCommonModule, MdSelectionModule, CommonModule],
   exports: [
     MdList,
     MdListItem,
@@ -35,6 +37,9 @@ import {
     MdNavListCssMatStyler,
     MdDividerCssMatStyler,
     MdListSubheaderCssMatStyler,
+    MdSelectionModule,
+    MdSelectionList,
+    MdListOption
   ],
   declarations: [
     MdList,
@@ -46,9 +51,12 @@ import {
     MdNavListCssMatStyler,
     MdDividerCssMatStyler,
     MdListSubheaderCssMatStyler,
+    MdSelectionList,
+    MdListOption
   ],
 })
 export class MdListModule {}
 
 
 export * from './list';
+export * from './selection-list';

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.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: {