feat(md-collection): add headers

src/collection/collection-header.css

@@ -0,0 +1,3 @@
+md-collection-header {
+  display: block;
+}

src/collection/collection-header.html

@@ -0,0 +1,4 @@
+<template class="collection-header">
+  <require from="./collection-header.css"></require>
+  <content></content>
+</template>

src/collection/collection-header.js

@@ -0,0 +1,10 @@
+import { customElement } from 'aurelia-templating';
+import { inject } from 'aurelia-dependency-injection';
+
+@customElement('md-collection-header')
+@inject(Element)
+export class MdCollectionHeader {
+  constructor(element) {
+    this.element = element;
+  }
+}

src/collection/collection.html

@@ -1,5 +1,6 @@
 <template>
-  <div class="collection">
+  <div class="collection" ref="anchor">
+    <content select="md-collection-header"></content>
     <content select="md-collection-item"></content>
   </div>
 </template>

src/collection/collection.js

@@ -8,6 +8,13 @@ export class MdCollection {
     this.element = element;
   }
 
+  attached() {
+    let header = this.element.querySelector('md-collection-header');
+    if (header) {
+      this.anchor.classList.add('with-header');
+    }
+  }
+
   getSelected() {
     let items = [].slice.call(this.element.querySelectorAll('md-collection-selector'));
     return items.filter(i => i.au['md-collection-selector'].viewModel.isSelected)

src/config-builder.js

@@ -109,6 +109,7 @@ export class ConfigBuilder {
   useCollection() : ConfigBuilder {
     this.globalResources.push('./collection/collection');
     this.globalResources.push('./collection/collection-item');
+    this.globalResources.push('./collection/collection-header');
     this.globalResources.push('./collection/md-collection-selector');
     return this;
   }