1.x

.eslintrc.json

@@ -2,13 +2,16 @@
   "extends": "vaadin",
   "env": {
     "browser": true,
+    "es6": true,
     "node": true
   },
   "plugins": [
     "html"
   ],
   "globals": {
+    // TODO: remove when moving to ES6 vaadin -> Vaadin
     "vaadin": false,
+    "Vaadin": false,
     "Polymer": false,
     "CustomElements": false
   }

.gitignore

@@ -1,3 +1,3 @@
-bower_components
+bower_components*
 node_modules
-test/angular2/typings
+bower-*.json

.travis.yml

@@ -11,7 +11,13 @@ addons:
   firefox: latest
   google-chrome: latest
 
-script:
+install:
+  - npm install
+  - polymer install
+
+before_script:
   - gulp lint
-  - travis_retry xvfb-run -s '-screen 0 1024x768x24' wct -l chrome -l firefox
-  - travis_retry xvfb-run -s '-screen 0 1024x768x24' wct -l chrome -l firefox --dom=shadow
+  - ([ "$TRAVIS_EVENT_TYPE" = "pull_request" ] || TRAVIS_BRANCH=quick/${TRAVIS_BUILD_ID} xvfb-run -s '-screen 0 1024x768x24' polymer test)
+
+script:
+  - xvfb-run -s '-screen 0 1024x768x24' wct

README.md

@@ -1,6 +1,6 @@
-![Bower version](https://img.shields.io/bower/v/vaadin-combo-box.svg) 
+![Bower version](https://img.shields.io/bower/v/vaadin-combo-box.svg)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-combo-box)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-combo-box.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-combo-box) 
+[![Build Status](https://travis-ci.org/vaadin/vaadin-combo-box.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-combo-box)
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/vaadin-core-elements?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
 # <vaadin-combo-box>
@@ -14,19 +14,44 @@
 <custom-element-demo height="300">
   <template>
     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../iron-ajax/iron-ajax.html">
+    <link rel="import" href="../paper-item/all-imports.html">
     <link rel="import" href="vaadin-combo-box.html">
     <next-code-block></next-code-block>
   </template>
 </custom-element-demo>
 ```
 -->
 ```html
-<vaadin-combo-box label="Element"
-    items='["Cadmium","Caesium","Calcium","Californium","Carbon","Scandium"]'>
-</vaadin-combo-box>
+<div>
+  <style is="custom-style">
+    paper-icon-item {
+      margin: -13px -16px;
+    }
+    paper-icon-item img {
+      border-radius: 50%;
+    }
+  </style>
+  <template is="dom-bind">
+    <iron-ajax url="https://randomuser.me/api?results=100&inc=name,email,picture" last-response="{{response}}" auto></iron-ajax>
+
+    <vaadin-combo-box items="[[response.results]]" item-value-path="email" item-label-path="email">
+      <template>
+        <paper-icon-item>
+          <img src="[[item.picture.thumbnail]]" item-icon>
+          <paper-item-body two-line>
+            <div>[[item.name.first]] [[item.name.last]]</div>
+            <div secondary>[[item.email]]</div>
+          </paper-item-body>
+        </paper-icon-item>
+      </template>
+    </vaadin-combo-box>
+  </template>
+</div>
+
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-combo-box/master/docs/img/vaadin-combo-box-overview.png" width="387" alt="Screenshot of vaadin-combo-box" />](https://vaadin.com/elements/-/element/vaadin-combo-box)
+[<img src="https://raw.githubusercontent.com/vaadin/vaadin-combo-box/master/docs/img/vaadin-combo-box-item-template-material.png" width="311" alt="Screenshot of vaadin-combo-box" />](https://vaadin.com/elements/-/element/vaadin-combo-box)
 
 
 ## Contributing

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "vaadin-combo-box",
-  "description": "Vaadin Combo Box",
+  "description": "Polymer element for displaying a list of items with filtering",
   "authors": [
     "Vaadin Ltd"
   ],
@@ -18,30 +18,67 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.3",
-    "iron-form": "polymerelements/iron-form#^1.0.10",
-    "iron-form-element-behavior": "polymerelements/iron-form-element-behavior#^1.0.4",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.4",
-    "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.9",
-    "iron-input": "polymerelements/iron-input#^1.0.5",
-    "iron-list": "polymerelements/iron-list#^1.0.0",
-    "iron-validatable-behavior": "polymerelements/iron-validatable-behavior#^1.0.5",
-    "paper-button": "polymerelements/paper-button#^1.0.6",
-    "paper-input": "PolymerElements/paper-input#^1.1.3",
-    "polymer": "Polymer/polymer#^1.2.0",
-    "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.7",
-    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.2",
-    "paper-styles": "polymerelements/paper-styles#^1.1.2",
-    "iron-a11y-announcer": "polymerelements/iron-a11y-announcer#^1.0.4",
-    "paper-icon-button": "polymerelements/paper-icon-button#^1.0.5"
+    "polymer": "^1.7.0",
+    "iron-flex-layout": "^1.0.0",
+    "iron-form": "^1.0.0",
+    "iron-form-element-behavior": "^1.0.0",
+    "iron-icon": "^1.0.0",
+    "iron-iconset-svg": "^1.0.0",
+    "iron-input": "^1.0.0",
+    "iron-list": "^1.0.0",
+    "iron-validatable-behavior": "^1.0.0",
+    "paper-button": "^1.0.0",
+    "paper-input": "^1.0.0",
+    "iron-a11y-keys-behavior": "^1.0.0",
+    "iron-resizable-behavior": "^1.0.0",
+    "paper-styles": "^1.0.0",
+    "iron-a11y-announcer": "^1.0.0",
+    "paper-icon-button": "^1.0.0"
   },
   "devDependencies": {
+    "elements-demo-resources": "vaadin/elements-demo-resources#master",
+    "iron-ajax": "^1.0.0",
+    "iron-component-page": "^1.0.0",
+    "iron-demo-helpers": "^1.0.0",
+    "iron-form": "^1.0.0",
+    "iron-icons": "^1.0.0",
+    "iron-test-helpers": "^1.0.0",
+    "paper-item": "^1.0.0",
     "web-component-tester": "^5.0.0",
-    "test-fixture": "polymerelements/test-fixture#^1.0.0",
-    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
-    "iron-component-page": "polymerelements/iron-component-page#^1.1.0",
-    "iron-icons": "PolymerElements/iron-icons#^1.0.3",
-    "iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
-    "elements-demo-resources": "vaadin/elements-demo-resources#master"
+    "webcomponentsjs": "^0.7.23"
+  },
+  "variants": {
+    "polymer2": {
+      "dependencies": {
+        "polymer": "^2.0.0-rc.2",
+        "iron-flex-layout": "#2.0-preview",
+        "iron-form": "#2.0-preview",
+        "iron-form-element-behavior": "#2.0-preview",
+        "iron-icon": "#2.0-preview",
+        "iron-iconset-svg": "#2.0-preview",
+        "iron-input": "#2.0-preview",
+        "iron-list": "#2.0-preview",
+        "iron-validatable-behavior": "#2.0-preview",
+        "paper-button": "#2.0-preview",
+        "paper-input": "#2.0-preview",
+        "iron-a11y-keys-behavior": "#2.0-preview",
+        "iron-resizable-behavior": "#2.0-preview",
+        "paper-styles": "#2.0-preview",
+        "iron-a11y-announcer": "#2.0-preview",
+        "paper-icon-button": "#2.0-preview"
+      },
+      "devDependencies": {
+        "elements-demo-resources": "vaadin/elements-demo-resources#2.0-preview",
+        "iron-ajax": "#2.0-preview",
+        "iron-component-page": "#2.0-preview",
+        "iron-demo-helpers": "#2.0-preview",
+        "iron-form": "#2.0-preview",
+        "iron-icons": "#2.0-preview",
+        "iron-test-helpers": "#2.0-preview",
+        "paper-item": "#2.0-preview",
+        "web-component-tester": "6.0.0-prerelease.7",
+        "webcomponentsjs": "#v1"
+      }
+    }
   }
 }

demo/.eslintrc.json

@@ -4,7 +4,8 @@
   },
   "globals": {
     "elements": false,
-    "elementsJson": false
+    "users": false,
+    "elementsJson": false,
+    "HTMLImports": false
   }
 }
-

demo/advanced.html

@@ -23,14 +23,7 @@
 
 <body unresolved>
   <div class="vertical-section-container centered">
-    <nav class="vertical-section">
-      <ul class="layout horizontal wrap">
-        <li><a href="index.html">Basic Examples</a></li>
-        <li><a href="objects.html">Object Items</a></li>
-        <li><b>Advanced Usage</b></li>
-        <li><a href="external-filtering.html">Remote and Custom Filtering</a></li>
-      </ul>
-    </nav>
+    <demo-navigation></demo-navigation>
 
     <h3>Typing Custom Values</h3>