Add Dropdown Element

lib/common/components/DropDown/dropdown.js

@@ -0,0 +1,37 @@
+'use strict';
+
+import {Component, EventEmitter, ElementRef} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
+import DropKick from 'Robdel12/DropKick';
+import 'Robdel12/DropKick/build/css/dropkick.css!css';
+
+@Component({
+  selector: 'dropdown',
+  events: ['change'],
+  template: `
+    <select (change)=onChange($event.target.value)>
+      <ng-content></ng-content>
+    </select>
+  `,
+  directives: [CORE_DIRECTIVES],
+  styleUrls: ['./lib/common/components/DropDown/dropdown.css']
+})
+@Reflect.metadata('parameters', [[ElementRef]])
+export class DropDown {
+  constructor(elem) {
+    this.change = new EventEmitter();
+    this.elem = elem.nativeElement;
+  }
+
+  ngAfterContentInit() {
+    this.inst = new DropKick(this.elem.firstElementChild, {autoWidth: true});
+  }
+
+  onChange(value) {
+    this.change.next(value);
+  }
+
+  destroy() {
+    this.inst.dispose();
+  }
+}

lib/common/components/DropDown/dropdown.scss

@@ -0,0 +1,70 @@
+@import '../../styles/variables';
+
+$silver: #666D71;
+$background-silver: #EEEFEF;
+$border: darken($background-silver, 2%);
+
+:host {
+  .dk-select {
+    max-width: 100%;
+    font-family: $headers-font;
+  }
+
+  .dk-selected:after {
+    display: none;
+  }
+
+  // button
+
+  .dk-selected {
+    color: $silver;
+    border-color: $silver;
+    padding: 0.4em 0.9em 0.4em 0.4em;
+    border-radius: 0.4rem;
+  }
+
+  .dk-select-open-down .dk-selected {
+    border-radius: 0.4rem;
+  }
+
+  .dk-select-open-down .dk-selected, .dk-selected:focus, .dk-selected:hover {
+    border-color: $primary-color;
+    color: $primary-color;
+  }
+
+  // tick
+  .dk-selected:before {
+    border-top-color: $silver;
+    border-width: .35em .35em 0;
+  }
+
+  .dk-select-open-down .dk-selected:before,
+  .dk-select-open-up .dk-selected:before {
+    border-bottom-color: $primary-color;
+    border-width: 0 .35em .35em;
+  }
+
+  // items
+  .dk-select-multi:focus .dk-select-options,
+  .dk-select-open-down .dk-select-options,
+  .dk-select-open-up .dk-select-options {
+    border-color: $silver;
+  }
+
+  .dk-select-options {
+    margin-top: 0.2em;
+    border-radius: 0.4em;
+  }
+
+  .dk-option {
+    color: $black;
+    padding: 0.4em 0.4em;
+    &:hover {
+      background-color: $background-silver;
+    }
+  }
+
+  .dk-option-selected {
+    background-color: $background-silver;
+  }
+}

package.json

@@ -33,6 +33,7 @@
   "jspm": {
     "configFile": "system.config.js",
     "dependencies": {
+      "Robdel12/DropKick": "github:Robdel12/DropKick@^2.1.7",
       "angular2": "npm:angular2@^2.0.0-beta.12",
       "es6-shim": "github:es-shims/es6-shim@^0.33.6",
       "hint.css": "npm:hint.css@^2.2.1",
@@ -53,6 +54,11 @@
       "core-js": "npm:core-js@^1.2.6",
       "css": "github:systemjs/plugin-css@^0.1.18",
       "systemjs/plugin-json": "github:systemjs/plugin-json@^0.1.0"
+    },
+    "overrides": {
+      "github:Robdel12/DropKick@2.1.7": {
+        "format": "global"
+      }
     }
   },
   "devDependencies": {

system.config.js

@@ -37,6 +37,7 @@ System.config({
   },
 
   map: {
+    "Robdel12/DropKick": "github:Robdel12/DropKick@2.1.7",
     "angular2": "npm:angular2@2.0.0-beta.12",
     "babel": "npm:babel-core@5.8.34",
     "babel-runtime": "npm:babel-runtime@5.8.34",