feat(md-collection-selector): add list-selection functionality

src/collection/collection.js

@@ -1,4 +1,16 @@
 import { customElement } from 'aurelia-templating';
+import { inject } from 'aurelia-dependency-injection';
 
 @customElement('md-collection')
-export class MdCollection {}
+@inject(Element)
+export class MdCollection {
+  constructor(element) {
+    this.element = element;
+  }
+
+  getSelected() {
+    let items = [].slice.call(this.element.querySelectorAll('md-collection-selector'));
+    return items.filter(i => i.au['md-collection-selector'].viewModel.isSelected)
+      .map(i => i.au['md-collection-selector'].viewModel.item);
+  }
+}

src/collection/md-collection-selector.css

@@ -0,0 +1,36 @@
+md-collection-selector .md-collection-selector__hover {
+  display: inline-block;
+}
+md-collection-selector:hover .md-collection-selector__hover, md-collection-item.selected md-collection-selector .md-collection-selector__hover {
+  display: none !important;
+}
+md-collection-selector .md-collection-selector__checkbox div {
+  margin-left: 5px;
+  display: inline-block;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  margin-right: 11px;
+  height: 42px;
+  width: 42px;
+  line-height: 42px;
+  text-align: center;
+}
+md-collection-selector .md-collection-selector__checkbox .md-collection-selector__hover ~ div {
+  display: none;
+}
+
+md-collection-selector:hover .md-collection-selector__checkbox .md-collection-selector__hover ~ div, md-collection-item.selected md-collection-selector .md-collection-selector__checkbox .md-collection-selector__hover ~ div {
+  display: inline-block;
+}
+
+md-collection-item.selected {
+  background-color: #eee;
+}
+
+md-collection-selector md-checkbox {
+  display: inline-block;
+}
+md-collection-selector md-collection md-checkbox .md-checkbox.is-upgraded {
+  padding-left: 16px;
+}

src/collection/md-collection-selector.html

@@ -0,0 +1,8 @@
+<template>
+  <require from="./md-collection-selector.css"></require>
+  <div class="md-collection-selector__checkbox">
+    <content select=".md-collection-selector__hover"></content>
+    <div>
+      <md-checkbox md-checked.two-way="isSelected"></mdl-checkbox>
+    </div>
+</template>

src/collection/md-collection-selector.js

@@ -0,0 +1,19 @@
+import { bindable, customElement } from 'aurelia-templating';
+import { inject } from 'aurelia-dependency-injection';
+import { observable } from 'aurelia-binding';
+import { fireMaterializeEvent } from '../common/events';
+
+@customElement('md-collection-selector')
+@inject(Element)
+export class MdlListSelector {
+  @bindable() item;
+  @observable() isSelected = false;
+
+  constructor(element) {
+    this.element = element;
+  }
+
+  isSelectedChanged(newValue) {
+    fireMaterializeEvent(this.element, 'selection-changed', { item: this.item, isSelected: this.isSelected });
+  }
+}

src/config-builder.js

@@ -110,6 +110,7 @@ export class ConfigBuilder {
     this.globalResources.push('./collection/collection');
     this.globalResources.push('./collection/collection-item');
     this.globalResources.push('./collection/md-collection-item-secondary.html');
+    this.globalResources.push('./collection/md-collection-selector');
     return this;
   }