From 433af9ba5c615322c3bca01a6a759f9c9848102c Mon Sep 17 00:00:00 2001
From: Frank R <renfeng.cn@gmail.com>
Date: Tue, 4 Apr 2017 15:58:03 +0800
Subject: [PATCH 01/20] required by polymer 2.0

---
 paper-tags.html | 78 ++++++++++++++++++++++++-------------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/paper-tags.html b/paper-tags.html
index 017a79c..6c32140 100644
--- a/paper-tags.html
+++ b/paper-tags.html
@@ -39,46 +39,46 @@
 @demo demo/index.html
 -->
 <dom-module id="paper-tags">
-  <style>
-  [hidden] {
-    display: none !important;
-  }
-
-  :host {
-    display: block;
-    @apply(--paper-font-common-base);
-    @apply(--paper-tags);
-  }
-  
-  div.paper-tag-item {
-    margin-bottom: var(--paper-tag-margin, 3px);
-    border: 1px solid var(--paper-tag-focus-color, --default-primary-color);
-    font-size: 13px;
-    color: var(--paper-tag-text-color, --secondary-text-color);
-    border-radius: 4px;
-    @apply(--paper-tag-item);
-  }
-  
-  .paper-tag-item:last-of-type {
-    margin-right: var(--paper-tag-margin, 3px);
-  }
-  
-  paper-icon-button {
-    color: var(--paper-tag-focus-color, --default-primary-color);
-    width: 20px;
-    height: 20px;
-    padding: 0;
-  }
-  
-  .paper-tag-item-label {
-    padding: var(--paper-tag-margin, 3px);
-  }
-  
-  .paper-tag-item {
-    display: inline-block;
-  }
-  </style>
   <template>
+    <style>
+    [hidden] {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+      @apply(--paper-font-common-base);
+      @apply(--paper-tags);
+    }
+
+    div.paper-tag-item {
+      margin-bottom: var(--paper-tag-margin, 3px);
+      border: 1px solid var(--paper-tag-focus-color, --default-primary-color);
+      font-size: 13px;
+      color: var(--paper-tag-text-color, --secondary-text-color);
+      border-radius: 4px;
+      @apply(--paper-tag-item);
+    }
+
+    .paper-tag-item:last-of-type {
+      margin-right: var(--paper-tag-margin, 3px);
+    }
+
+    paper-icon-button {
+      color: var(--paper-tag-focus-color, --default-primary-color);
+      width: 20px;
+      height: 20px;
+      padding: 0;
+    }
+
+    .paper-tag-item-label {
+      padding: var(--paper-tag-margin, 3px);
+    }
+
+    .paper-tag-item {
+      display: inline-block;
+    }
+    </style>
     <template is="dom-repeat" id="tagRepeat" items="[[items]]">
       <div class$="paper-tag-item [[_computeClass(item, classAccessor)]]">
         <span class="paper-tag-item-label">[[_computeLabel(item, labelAccessor)]]</span>

From c8ee222735da1dfa3cd2ea42e40add1a78ecbe7e Mon Sep 17 00:00:00 2001
From: Frank R <frank.ren@oracle.com>
Date: Fri, 4 Aug 2017 19:59:27 +0800
Subject: [PATCH 02/20] polymer test

---
 bower.json            |  1 +
 paper-tags-input.html |  2 +-
 test/basic-test.html  | 59 ++++++++++++++++++++++++++++---------------
 3 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/bower.json b/bower.json
index f01c909..a27df02 100644
--- a/bower.json
+++ b/bower.json
@@ -41,6 +41,7 @@
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   }
diff --git a/paper-tags-input.html b/paper-tags-input.html
index d9a8d9c..24ffe31 100644
--- a/paper-tags-input.html
+++ b/paper-tags-input.html
@@ -182,7 +182,7 @@
   },
 
   _keyDown: function(event) {
-    var keyVal = event.which;
+    var keyVal = event.keyCode;
     if (keyVal === 13 && this.allowAdd) {
       var tags = event.target.value.split(this.delimiter);
       for (var tag of tags) {
diff --git a/test/basic-test.html b/test/basic-test.html
index 2e6bdb3..407d3c7 100644
--- a/test/basic-test.html
+++ b/test/basic-test.html
@@ -15,40 +15,59 @@
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../iron-test-helpers/mock-interactions.js"></script>
 
     <!-- Step 1: import the element to test -->
-    <link rel="import" href="../seed-element.html">
+    <link rel="import" href="../paper-tags-input.html">
+
   </head>
   <body>
 
-    <!-- You can use the document as a place to set up your fixtures. -->
-    <seed-element></seed-element>
-
+  <dom-module id="paper-tags-tester">
+    <template>
+      <paper-tags-input id="tags" items='{{tags}}'></paper-tags-input>
+    </template>
     <script>
-      var myEl = document.querySelector('seed-element');
+    Polymer({
+      is: 'paper-tags-tester',
+      properties: {
+        tags: {
+          type: Array,
+          notify: true,
+          value: function() {
+            return [];
+          }
+        }
+      },
+    });
+    </script>
+  </dom-module>
 
-      suite('<seed-element>', function() {
+  <test-fixture id="tester">
+      <template>
+        <paper-tags-tester></paper-tags-tester>
+      </template>
+    </test-fixture>
 
-        test('defines the "author" property', function() {
-          assert.equal(myEl.author.name, 'Dimitri Glazkov');
-          assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
+    <script>
+      suite('<paper-tags-input>', function() {
+        var tester;
+        setup(function() {
+          tester = fixture('tester')
         });
 
-        test('says hello', function() {
-          assert.equal(myEl.sayHello(), 'seed-element says, Hello World!');
+        test('adding tag sets the items value', function(done) {
 
-          var greetings = myEl.sayHello('greetings Earthlings');
-          assert.equal(greetings, 'seed-element says, greetings Earthlings');
-        });
+          tester.$.tags.$.tagInput.value = 'foobar';
+          MockInteractions.pressEnter(tags.$.tagInput);
 
-        test('fires lasers', function(done) {
-          myEl.addEventListener('seed-element-lasers', function(event) {
-            assert.equal(event.detail.sound, 'Pew pew!');
+          // Mutation observer is async, so wait one tick.
+          Polymer.Base.async(function() {
+            assert.equal(tester.tags.length, 1, 'unexpected number of tags');
+            assert.equal(tester.tags[0], 'foobar', 'unexpected tag value');
             done();
-          });
-          myEl.fireLasers();
+          }, 1);
         });
-
       });
     </script>
 

From 398ffb1ec9bcbbed83d843afde235765b231a3b2 Mon Sep 17 00:00:00 2001
From: Frank R <frank.ren@oracle.com>
Date: Tue, 8 Aug 2017 15:10:13 +0800
Subject: [PATCH 03/20] test two way data binding on adding a tag

---
 bower.json           |  2 +-
 test/basic-test.html | 48 ++++++++++++++++++++------------------------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/bower.json b/bower.json
index c323bfa..1395378 100644
--- a/bower.json
+++ b/bower.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.4.1",
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   }
diff --git a/test/basic-test.html b/test/basic-test.html
index 407d3c7..a5f0b66 100644
--- a/test/basic-test.html
+++ b/test/basic-test.html
@@ -23,27 +23,27 @@
   </head>
   <body>
 
-  <dom-module id="paper-tags-tester">
-    <template>
-      <paper-tags-input id="tags" items='{{tags}}'></paper-tags-input>
-    </template>
-    <script>
-    Polymer({
-      is: 'paper-tags-tester',
-      properties: {
-        tags: {
-          type: Array,
-          notify: true,
-          value: function() {
-            return [];
+    <dom-module id="paper-tags-tester">
+      <template>
+        <paper-tags-input id="tags" items='{{tags}}'></paper-tags-input>
+      </template>
+      <script>
+      Polymer({
+        is: 'paper-tags-tester',
+        properties: {
+          tags: {
+            type: Array,
+            notify: true,
+            value: function() {
+              return [];
+            }
           }
-        }
-      },
-    });
-    </script>
-  </dom-module>
+        },
+      });
+      </script>
+    </dom-module>
 
-  <test-fixture id="tester">
+    <test-fixture id="tester">
       <template>
         <paper-tags-tester></paper-tags-tester>
       </template>
@@ -56,17 +56,13 @@
           tester = fixture('tester')
         });
 
-        test('adding tag sets the items value', function(done) {
+        test('adding tag sets the items value', function() {
 
           tester.$.tags.$.tagInput.value = 'foobar';
           MockInteractions.pressEnter(tags.$.tagInput);
 
-          // Mutation observer is async, so wait one tick.
-          Polymer.Base.async(function() {
-            assert.equal(tester.tags.length, 1, 'unexpected number of tags');
-            assert.equal(tester.tags[0], 'foobar', 'unexpected tag value');
-            done();
-          }, 1);
+          assert.equal(1, tester.tags.length, 'unexpected number of tags');
+          assert.equal('foobar', tester.tags[0], 'unexpected tag value');
         });
       });
     </script>

From c5d1b1fdfd1dcc25a162f6286e9ffba3f0456b0b Mon Sep 17 00:00:00 2001
From: Frank R <frank.ren@oracle.com>
Date: Tue, 8 Aug 2017 15:12:06 +0800
Subject: [PATCH 04/20] moved <style> inside <template> as required by polymer
 2

---
 paper-tags.html | 78 ++++++++++++++++++++++++-------------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/paper-tags.html b/paper-tags.html
index 947bcd5..d6402aa 100644
--- a/paper-tags.html
+++ b/paper-tags.html
@@ -39,46 +39,46 @@
 @demo demo/index.html
 -->
 <dom-module id="paper-tags">
-  <template>
-    <style>
-    [hidden] {
-      display: none !important;
-    }
-
-    :host {
-      display: block;
-      @apply(--paper-font-common-base);
-      @apply(--paper-tags);
-    }
-
-    div.paper-tag-item {
-      margin-bottom: var(--paper-tag-margin, 3px);
-      border: 1px solid var(--paper-tag-focus-color, --default-primary-color);
-      font-size: 13px;
-      color: var(--paper-tag-text-color, --secondary-text-color);
-      border-radius: 4px;
-      @apply(--paper-tag-item);
-    }
-
-    .paper-tag-item:last-of-type {
-      margin-right: var(--paper-tag-margin, 3px);
-    }
-
-    paper-icon-button {
-      color: var(--paper-tag-focus-color, --default-primary-color);
-      width: 20px;
-      height: 20px;
-      padding: 0;
-    }
-
-    .paper-tag-item-label {
-      padding: var(--paper-tag-margin, 3px);
-    }
+  <style>
+  [hidden] {
+    display: none !important;
+  }
 
-    .paper-tag-item {
-      display: inline-block;
-    }
-    </style>
+  :host {
+    display: block;
+    @apply(--paper-font-common-base);
+    @apply(--paper-tags);
+  }
+  
+  div.paper-tag-item {
+    margin-bottom: var(--paper-tag-margin, 3px);
+    border: 1px solid var(--paper-tag-focus-color, --default-primary-color);
+    font-size: 13px;
+    color: var(--paper-tag-text-color, --secondary-text-color);
+    border-radius: 4px;
+    @apply(--paper-tag-item);
+  }
+  
+  .paper-tag-item:last-of-type {
+    margin-right: var(--paper-tag-margin, 3px);
+  }
+  
+  paper-icon-button {
+    color: var(--paper-tag-focus-color, --default-primary-color);
+    width: 20px;
+    height: 20px;
+    padding: 0;
+  }
+  
+  .paper-tag-item-label {
+    padding: var(--paper-tag-margin, 3px);
+  }
+  
+  .paper-tag-item {
+    display: inline-block;
+  }
+  </style>
+  <template>
     <template is="dom-repeat" id="tagRepeat" items="[[items]]">
       <div class$="paper-tag-item [[_computeClass(item, classAccessor)]]">
         <span class="paper-tag-item-label">[[_computeLabel(item, labelPath)]]</span>

From 909f8f7c030cf26c1b148057ac76999e16c51c38 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Sun, 4 Mar 2018 22:55:59 +0100
Subject: [PATCH 05/20] fixed removing last item does not fire tag-remove

---
 paper-tags-input.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/paper-tags-input.html b/paper-tags-input.html
index ab9c4a1..33acadf 100644
--- a/paper-tags-input.html
+++ b/paper-tags-input.html
@@ -168,9 +168,7 @@
   },
 
   _removeLast: function() {
-    var last = this.items.pop();
-    this.items = this.items.slice();
-    // this.fire('tag-removed', last);
+    this.splice('items', this.items.length - 1);
   },
 
   findTag: function(tag) {

From fc46e7ca48a506d26938e2bf6ccf583d1c634324 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Mon, 19 Mar 2018 13:16:56 +0100
Subject: [PATCH 06/20] fix remove tags

---
 paper-tags-input.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/paper-tags-input.html b/paper-tags-input.html
index 33acadf..9a977f7 100644
--- a/paper-tags-input.html
+++ b/paper-tags-input.html
@@ -171,10 +171,18 @@
     this.splice('items', this.items.length - 1);
   },
 
+  removeTag: function(tag) {
+    var position = this.items.indexOf(tag);
+    if(position > -1) {
+      this.splice('items', position, 1 );
+    }
+  },
+
   findTag: function(tag) {
     return this.items.includes(tag);
   },
 
+
   _addTag: function(tag) {
     if (this.tagTpl) {
       var id = tag;

From f0480c3857325c1f855d79aa386b4024d8acc84e Mon Sep 17 00:00:00 2001
From: Frank R <renfeng.cn@gmail.com>
Date: Wed, 30 May 2018 10:15:24 +0800
Subject: [PATCH 07/20] Fixed "Published on webcomponents.org" badge link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 84907fb..deb4a5e 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/polymerEl/paper-tags)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/polymerEl/paper-tags)
 
 # \<paper-tags\>
 

From e52de94a88d0b9f3c92761f2c83ff0c04ab6a6c5 Mon Sep 17 00:00:00 2001
From: robin-dev <robin.pochet@gmail.com>
Date: Fri, 2 Feb 2018 14:06:39 +0100
Subject: [PATCH 08/20] Update bower.json

---
 bower.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/bower.json b/bower.json
index 1395378..76347c5 100644
--- a/bower.json
+++ b/bower.json
@@ -23,6 +23,10 @@
     "/test/",
     "/demo/"
   ],
+  "repository": {
+	  "type": "git",
+	  "url": "https://github.com/Weaverize/paper-tags.git"
+  },
   "dependencies": {
     "polymer": "Polymer/polymer#^1.4.0",
     "paper-input": "PolymerElements/paper-input#^1.1.14",

From e857fb2782ebbeec2f6172ff7cf87c323329c19f Mon Sep 17 00:00:00 2001
From: Robin Pochet <robin.pochet@gmail.com>
Date: Fri, 2 Feb 2018 14:19:01 +0100
Subject: [PATCH 09/20] =?UTF-8?q?changement=20des=20d=C3=A9pendances?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bower.json | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/bower.json b/bower.json
index 76347c5..bae07a3 100644
--- a/bower.json
+++ b/bower.json
@@ -28,25 +28,24 @@
 	  "url": "https://github.com/Weaverize/paper-tags.git"
   },
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.4.0",
-    "paper-input": "PolymerElements/paper-input#^1.1.14",
-    "paper-badge": "PolymerElements/paper-badge#^1.1.1",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.7",
-    "iron-icons": "PolymerElements/iron-icons#^1.1.3",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.8",
-    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.4",
-    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.13",
-    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5",
-    "paper-item": "PolymerElements/paper-item#^1.2.1",
-    "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
-    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.2.1",
-    "paper-menu": "PolymerElements/paper-menu#^1.2.2"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.0",
+    "paper-badge": "PolymerElements/paper-badge#^2.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
+    "iron-icons": "PolymerElements/iron-icons#^2.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^2.0.0",
+    "iron-behaviors": "PolymerElements/iron-behaviors#^2.0.0",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^2.0.0",
+    "paper-item": "PolymerElements/paper-item#^2.0.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
+    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^2.0.0",
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.4.1",
+    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
     "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^2.0.0"
   }
 }

From 63a49a458017777b87aa9e1ead8f1f234043efa4 Mon Sep 17 00:00:00 2001
From: Robin Pochet <robin.pochet@gmail.com>
Date: Fri, 2 Feb 2018 14:19:49 +0100
Subject: [PATCH 10/20] Changing bower.json dependancies to Polymer 2.0

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index bae07a3..08cdc18 100644
--- a/bower.json
+++ b/bower.json
@@ -40,7 +40,7 @@
     "paper-item": "PolymerElements/paper-item#^2.0.0",
     "paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
-    "paper-menu": "PolymerElements/paper-menu#^2.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^2.0.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",

From c13dc03eb5912855db3f0c762b371b603ea5f2f7 Mon Sep 17 00:00:00 2001
From: Robin Pochet <robin.pochet@gmail.com>
Date: Fri, 2 Feb 2018 14:21:48 +0100
Subject: [PATCH 11/20] change to webcomponentsjs dependancies in bower.json

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 08cdc18..61ad3ea 100644
--- a/bower.json
+++ b/bower.json
@@ -46,6 +46,6 @@
     "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
     "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^2.0.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   }
 }

From b09e13c01a955895ff4f4d895afcd4f87531e5b0 Mon Sep 17 00:00:00 2001
From: robin-dev <robin.pochet@gmail.com>
Date: Fri, 2 Feb 2018 14:49:33 +0100
Subject: [PATCH 12/20] Update bower.json

Deleting reference to paper-menu in bower.json
---
 bower.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index 61ad3ea..f1a4362 100644
--- a/bower.json
+++ b/bower.json
@@ -39,8 +39,7 @@
     "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^2.0.0",
     "paper-item": "PolymerElements/paper-item#^2.0.0",
     "paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
-    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
-    "paper-menu": "PolymerElements/paper-menu#^2.0.0"
+    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",

From 43aa69cfbf4cd6b01ca63a3bcb8aa18ae80fc01d Mon Sep 17 00:00:00 2001
From: Robin Pochet <robin.pochet@gmail.com>
Date: Fri, 2 Feb 2018 14:51:58 +0100
Subject: [PATCH 13/20] adding paper-listbox to bower.json

---
 bower.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index f1a4362..81c2255 100644
--- a/bower.json
+++ b/bower.json
@@ -39,7 +39,8 @@
     "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^2.0.0",
     "paper-item": "PolymerElements/paper-item#^2.0.0",
     "paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
-    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0"
+    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^2.0.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",

From ad251b002a9d045143912c36e0cc25c1694befbb Mon Sep 17 00:00:00 2001
From: Robin Pochet <robin.pochet@gmail.com>
Date: Fri, 2 Feb 2018 15:58:50 +0100
Subject: [PATCH 14/20] Converted everything to Polymer 2.0

paper-tags-dropdown is still WIP
---
 paper-tags-behavior.html           |  74 ---
 paper-tags-dropdown.html           | 784 +++++++++++++++--------------
 paper-tags-input.html              | 303 ++++++-----
 paper-tags-mixin.html              |  69 +++
 paper-tags.html                    | 131 ++---
 value-array-firebase-behavior.html | 133 -----
 value-array-firebase-mixin.html    | 135 +++++
 7 files changed, 817 insertions(+), 812 deletions(-)
 delete mode 100644 paper-tags-behavior.html
 create mode 100644 paper-tags-mixin.html
 delete mode 100644 value-array-firebase-behavior.html
 create mode 100644 value-array-firebase-mixin.html

diff --git a/paper-tags-behavior.html b/paper-tags-behavior.html
deleted file mode 100644
index 3b975a7..0000000
--- a/paper-tags-behavior.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="value-array-firebase-behavior.html">
-<script>
-/**
- * `Polymer.PaperTagsBehavior` defines recurent properties in paper-tags family (paper-tags, paper-tags-input, paper-tags-dropdown)
- *
- * @demo demo/index.html
- * @polymerBehavior Polymer.PaperTagsBehavior
- */
-
-Polymer.PaperTagsBehaviorImpl = {
-
-  properties: {
-
-    /**
-     * `itemClass` the class applied to tag items.  If `classAccessor` is defined, `classAccessor` will have precedence
-     */
-    itemClass: String,
-
-    /**
-     * `icon` icon to be applied to the tag item when it is not removable. If `iconAccessor` is defined, `iconAccessor` will have precedence
-     */
-    icon: String,
-
-    /**
-     * `keyPath` key for retrieving the `id` from item data object
-     */
-    keyPath: {
-      type: String,
-      value: 'id'
-    },
-    
-    /**
-     * `labelPath` key for retrieving the `label` from item data object
-     */
-    labelPath: {
-      type: String,
-      value: 'label'
-    },
-    
-    /**
-     * `classAccessor` key for retrieving the `class` from item data object
-     */
-    classAccessor: String,
-    
-    /**
-     * `iconAccessor` key for retrieving the `icon` from item data object
-     */
-    iconAccessor: String,
-
-    /**
-     * `preventRemoveTag` hide the `close` icon and prevent removing a tag when true. 
-     */
-    preventRemoveTag: {
-      type: Boolean,
-      value: false
-    }
-  }
-};
-
-Polymer.PaperTagsBehavior = [
-  Polymer.PaperTagsBehaviorImpl,
-  Polymer.ValueArrayFirebaseBehavior
-];
-</script>
diff --git a/paper-tags-dropdown.html b/paper-tags-dropdown.html
index 38b990f..650d5cc 100644
--- a/paper-tags-dropdown.html
+++ b/paper-tags-dropdown.html
@@ -17,7 +17,7 @@
 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../paper-menu/paper-menu.html">
+<link rel="import" href="../paper-listbox/paper-listbox.html">
 <link rel="import" href="../paper-item/paper-item.html">
 <link rel="import" href="../paper-ripple/paper-ripple.html">
 <link rel="import" href="../paper-styles/default-theme.html">
@@ -46,7 +46,7 @@
 `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
 
 
-<paper-menu> can be styled by --paper-tags-dropdown-menu mixin
+<paper-listbox> can be styled by --paper-tags-dropdown-menu mixin
 
 Custom property | Description | Default
 --paper-menu | A mixin that is applied to the internal paper-menu | `{}`
@@ -66,9 +66,9 @@
       padding: 2px 8;
     }
 
-    paper-menu {
+    paper-listbox {
       min-width: 150px;
-      @apply(--paper-menu);
+      @apply(--paper-listbox);
     }
     </style>
     <!-- this div fulfills an a11y requirement for combobox, do not remove -->
@@ -82,257 +82,260 @@
           <iron-icon icon="paper-dropdown-menu:arrow-drop-down" suffix></iron-icon>
         </paper-tags-input>
       </div>
-      <paper-menu class="dropdown-content" disabled="[[disabled]]" selected-values="{{valueArray}}" attr-for-selected="name" multi>
+      <paper-listbox class="dropdown-content" disabled="[[disabled]]" selected-values="{{valueArray}}" attr-for-selected="name" multi>
         <div id="filterCt" hidden$="[[!searchString]]">
           <span>filter:  {{searchString}}</span>
         </div>
         <template is="dom-repeat" items="[[items]]" filter="{{_computeFilter(searchString)}}">
           <paper-item name="[[_computeItemValue(item, keyPath)]]">[[_computeItemLabel(item, labelPath)]]</paper-item>
         </template>
-      </paper-menu>
+      </paper-listbox>
       <content id="content" select=".dropdown-content"></content>
     </paper-menu-button>
   </template>
   <script>
-  (function() {
-    'use strict';
-
-    Polymer({
-      is: 'paper-tags-dropdown',
-
-      behaviors: [
-        Polymer.IronButtonState,
-        Polymer.IronControlState,
-        Polymer.IronFormElementBehavior,
-        Polymer.IronValidatableBehavior
-      ],
-
-      properties: {
-
-        /**
-         * `valueObject` store value as object keys `{"value1": true, "value2": true}`
-         */
-        valueObject: {
-          type: Object,
-          notify: true,
-		  observer: '_observeValueArray'
-        },
-
-        /**
-         * `valueArray` store value as array `["value1", "value2"]`
-         */
-        valueArray: {
-          type: Array,
-          notify: true,
-        },
-
-        keyPath: {
-          type: String,
-          value: 'id'
-        },
-
-        labelPath: {
-          type: String,
-          value: 'label'
-        },
-
-
-        searchString: {
-          type: String,
-          value: ''
-        },
-
-        items: {
-          type: Array,
-          value: function() {
-            return [];
-          }
-        },
-
-        tagItems: {
-          type: Array
-        },
-
-        /**
-         * When true, `showCounter` display a counter counting the number of tags
-         */
-        showCounter: {
-          type: String
-        },
-
-        /*
-         * `maxTags` the maximum allowed number of tags
-         */
-        maxTags: {
-          type: Number
-        },
-
-        /*
-         * `minTags` the minimum allowed number of tags
-         */
-        minTags: {
-          type: Number
-        },
-
-        /*
-         * `readonly` - reflects to `disabled` when set to true.
-         */
-        readonly: {
-          type: Boolean,
-          observer: '_observeReadonly'
-        },
-
-        /**
-         * `tagTpl` a template Object used when creating new tags (e.g. '{"id":null, "label":"hello"}'). If not defuned, new tags will jus be Strings
-         */
-        tagTpl: {
-          type: Object
-        },
-
-        keyTarget: {
-          type: Object,
-          value: function() {
-            return this.$.tagInput;
-          }
-        },
-
-        /**
-         * The derived "label" of the currently selected item. This value
-         * is the `label` property on the selected item if set, or else the
-         * trimmed text content of the selected item.
-         */
-        selectedItemLabel: {
-          type: String,
-          notify: true,
-          readOnly: true
-        },
-
-        /**
-         * The label for the dropdown.
-         */
-        label: {
-          type: String
-        },
-
-        /**
-         * The placeholder for the dropdown.
-         */
-        placeholder: {
-          type: String
-        },
-
-        /**
-         * The error message to display when invalid.
-         */
-        errorMessage: {
-          type: String
-        },
-
-        /**
-         * True if the dropdown is open. Otherwise, false.
-         */
-        opened: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          observer: '_openedChanged'
-        },
-
-        /**
-         * Set to true to disable the floating label. Bind this to the
-         * `<paper-input-container>`'s `noLabelFloat` property.
-         */
-        noLabelFloat: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true
-        },
-
-        /**
-         * Set to true to always float the label. Bind this to the
-         * `<paper-input-container>`'s `alwaysFloatLabel` property.
-         */
-        alwaysFloatLabel: {
-          type: Boolean,
-          value: false
-        },
-
-        /**
-         * Set to true to disable animations when opening and closing the
-         * dropdown.
-         */
-        noAnimations: {
-          type: Boolean,
-          value: false
-        },
-
-        /**
-         * The orientation against which to align the menu dropdown
-         * horizontally relative to the dropdown trigger.
-         */
-        horizontalAlign: {
-          type: String,
-          value: 'right'
-        },
-
-        /**
-         * The orientation against which to align the menu dropdown
-         * vertically relative to the dropdown trigger.
-         */
-        verticalAlign: {
-          type: String,
-          value: 'top'
-        }
-      },
-
-      listeners: {
-        'tap': '_onTap'
-      },
-
-      keyBindings: {
-        'up down': 'open',
-        'esc': 'close'
-      },
-
-      hostAttributes: {
-        role: 'combobox',
-        'aria-autocomplete': 'none',
-        'aria-haspopup': 'true'
-      },
-
-      observers: [
-        '_observeItems(items)',
-        '_observeValueArray(valueArray.splices)',
-      ],
-
-      _observeReadonly: function(readonly, old) {
-        if (readonly) {
-          this.disabled = true;
-          // remember that disabled property depends on readonly for run-time changes
-          this._disabledFromReadonly = true;
-          return;
-        }
-        if (old && readonly === false && this._disabledFromReadonly) {
-          this.disabled = false;
-        }
-      },
-
-      _observeItems: function(items) {
-        // run every time item is set ore reset
-        if (items) {
-          this._isInitiatingItems = true;
-          this.set('tagItems', this._filterValueItems(this.valueArray));
-
-          delete this._isInitiatingItems;
-        }
-      },
-
-      _observeValueArray: function(splices) {
+  class PaperTagsDropdown extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior,Polymer.IronFormElementBehavior, Polymer.IronButtonState,Polymer.IronControlState],Polymer.Element) {
+	static get is() {
+	    return 'paper-tags-dropdown'
+	}
+
+	static get properties() {
+	    return {
+	        /**
+	         * `valueObject` store value as object keys `{"value1": true, "value2": true}`
+	         */
+	        valueObject: {
+	          type: Object,
+	          notify: true,
+			  observer: '_observeValueArray'
+	        },
+	
+	        /**
+	         * `valueArray` store value as array `["value1", "value2"]`
+	         */
+	        valueArray: {
+	          type: Array,
+	          notify: true,
+	        },
+	
+	        keyPath: {
+	          type: String,
+	          value: 'id'
+	        },
+	
+	        labelPath: {
+	          type: String,
+	          value: 'label'
+	        },
+	
+	
+	        searchString: {
+	          type: String,
+	          value: ''
+	        },
+	
+	        items: {
+	          type: Array,
+	          value: function() {
+	            return [];
+	          }
+	        },
+	
+	        tagItems: {
+	          type: Array
+	        },
+	
+	        /**
+	         * When true, `showCounter` display a counter counting the number of tags
+	         */
+	        showCounter: {
+	          type: String
+	        },
+	
+	        /*
+	         * `maxTags` the maximum allowed number of tags
+	         */
+	        maxTags: {
+	          type: Number
+	        },
+	
+	        /*
+	         * `minTags` the minimum allowed number of tags
+	         */
+	        minTags: {
+	          type: Number
+	        },
+	
+	        /*
+	         * `readonly` - reflects to `disabled` when set to true.
+	         */
+	        readonly: {
+	          type: Boolean,
+	          observer: '_observeReadonly'
+	        },
+	
+	        /**
+	         * `tagTpl` a template Object used when creating new tags (e.g. '{"id":null, "label":"hello"}'). If not defuned, new tags will jus be Strings
+	         */
+	        tagTpl: {
+	          type: Object
+	        },
+	
+	        keyTarget: {
+	          type: Object,
+	          value: function() {
+	            return this.$.tagInput;
+	          }
+	        },
+	
+	        /**
+	         * The derived "label" of the currently selected item. This value
+	         * is the `label` property on the selected item if set, or else the
+	         * trimmed text content of the selected item.
+	         */
+	        selectedItemLabel: {
+	          type: String,
+	          notify: true,
+	          readOnly: true
+	        },
+	
+	        /**
+	         * The label for the dropdown.
+	         */
+	        label: {
+	          type: String
+	        },
+	
+	        /**
+	         * The placeholder for the dropdown.
+	         */
+	        placeholder: {
+	          type: String
+	        },
+	
+	        /**
+	         * The error message to display when invalid.
+	         */
+	        errorMessage: {
+	          type: String
+	        },
+	
+	        /**
+	         * True if the dropdown is open. Otherwise, false.
+	         */
+	        opened: {
+	          type: Boolean,
+	          notify: true,
+	          value: false,
+	          observer: '_openedChanged'
+	        },
+	
+	        /**
+	         * Set to true to disable the floating label. Bind this to the
+	         * `<paper-input-container>`'s `noLabelFloat` property.
+	         */
+	        noLabelFloat: {
+	          type: Boolean,
+	          value: false,
+	          reflectToAttribute: true
+	        },
+	
+	        /**
+	         * Set to true to always float the label. Bind this to the
+	         * `<paper-input-container>`'s `alwaysFloatLabel` property.
+	         */
+	        alwaysFloatLabel: {
+	          type: Boolean,
+	          value: false
+	        },
+	
+	        /**
+	         * Set to true to disable animations when opening and closing the
+	         * dropdown.
+	         */
+	        noAnimations: {
+	          type: Boolean,
+	          value: false
+	        },
+	
+	        /**
+	         * The orientation against which to align the menu dropdown
+	         * horizontally relative to the dropdown trigger.
+	         */
+	        horizontalAlign: {
+	          type: String,
+	          value: 'right'
+	        },
+	
+	        /**
+	         * The orientation against which to align the menu dropdown
+	         * vertically relative to the dropdown trigger.
+	         */
+	        verticalAlign: {
+	          type: String,
+	          value: 'top'
+	        }
+		}
+	}
+	
+	
+	static get listeners() {
+	     return {
+		 'tap': '_onTap'
+	     }
+	}
+	static get keyBindings() {
+	     return{
+		 'up down': 'open',
+		  'esc': 'close'
+		 
+		}
+	}
+	static get hostAttributes() {
+	     return {
+			role: 'combobox',
+		  'aria-autocomplete': 'none',
+		  'aria-haspopup': 'true'
+		}	
+	}
+	
+	
+	
+	static get observers() {
+	     return [
+		 '_observeItems(items)',
+		  '_observeValueArray(valueArray.splices)',
+		]
+	}
+
+	_observeReadonly(readonly, old) {
+	  if (readonly) {
+	    this.disabled = true;
+	    // remember that disabled property depends on readonly for run-time changes
+	    this._disabledFromReadonly = true;
+	    return;
+	  }
+	  if (old && readonly === false && this._disabledFromReadonly) {
+	    this.disabled = false;
+	  }
+	}
+
+	_observeItems(items) {
+	  // run every time item is set ore reset
+	  if (items) {
+	    this._isInitiatingItems = true;
+	    this.set('tagItems', this._filterValueItems(this.valueArray));
+	
+	    delete this._isInitiatingItems;
+	  }
+	}
+
+	_observeValueArray(splices) {
 		// run on any change to the valueArray
-        this.set('tagItems', this._filterValueItems(this.valueArray));
-      },
+      	this.set('tagItems', this._filterValueItems(this.valueArray));
+    }
 
-	  _filterValueItems: function(valueArray) {
+	_filterValueItems(valueArray) {
 		var filteredVals = [];
 		if (valueArray && this.items && this.items.length > 0) {
 		  filteredVals = this.items.filter(function(item) {
@@ -345,164 +348,171 @@
 		  }, this);
 		}
 		return filteredVals;
-	  },
+	}
 
-      ready: function() {
-        this.$.menuButton.ignoreSelect = true;
-        this.$.tagInput.allowAdd = false;
-        if (this.valueObject && !this.valueArray) {
-          this.set('valueArray', Object.keys(this.valueObject));
-        }
-      },
-
-      attached: function() {
-        // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
-        // child will cause an `iron-select` event to fire while the element is
-        // still in a `DocumentFragment`. This has the effect of causing
-        // handlers not to fire. So, we double check this value on attached:
-        var contentElement = this.contentElement;
-        if (contentElement && contentElement.selectedItem) {
-          this._setSelectedItem(contentElement.selectedItem);
-        }
-      },
-
-
-      /**
-       * The content element that is contained by the dropdown menu, if any.
-       */
-      get contentElement() {
-        return Polymer.dom(this.$.content).getDistributedNodes()[0];
-      },
-
-      /**
-       * Show the dropdown content.
-       */
-      open: function() {
-        this.$.menuButton.open();
-      },
-
-      /**
-       * Hide the dropdown content.
-       */
-      close: function() {
-        this.$.menuButton.close();
-      },
-
-      _computeItemValue: function(item, keyPath) {
-        return (item[keyPath] || item) + '';
-      },
-
-      _computeItemLabel: function(item, labelPath) {
-        var parts = Polymer.Base._getPathParts(labelPath);
-        if (parts.length === 1) {
-          return item[labelPath] || item;
+	ready() {
+		if(super.ready){
+		    super.ready();
+		}
+	    this.$.menuButton.ignoreSelect = true;
+	    this.$.tagInput.allowAdd = false;
+	    if (this.valueObject && !this.valueArray) {
+	      this.set('valueArray', Object.keys(this.valueObject));
+	    }
+	}
+
+	connectedCallback() {
+		if(super.connectedCallback){
+			super.connectedCallback();
+		}
+		// NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
+		// child will cause an `iron-select` event to fire while the element is
+		// still in a `DocumentFragment`. This has the effect of causing
+		// handlers not to fire. So, we double check this value on attached:
+		var contentElement = this.contentElement;
+		if (contentElement && contentElement.selectedItem) {
+		  this._setSelectedItem(contentElement.selectedItem);
+		}
+	}
+
+
+    /**
+     * The content element that is contained by the dropdown menu, if any.
+     */
+    get contentElement() {
+      return Polymer.dom(this.$.content).getDistributedNodes()[0];
+    }
+
+    /**
+     * Show the dropdown content.
+     */
+    open() {
+      this.$.menuButton.open();
+    }
+
+    /**
+     * Hide the dropdown content.
+     */
+    close() {
+      this.$.menuButton.close();
+    }
+
+    _computeItemValue(item, keyPath) {
+      return (item[keyPath] || item) + '';
+    }
+
+    _computeItemLabel(item, labelPath) {
+      var parts = Polymer.Base._getPathParts(labelPath);
+      if (parts.length === 1) {
+        return item[labelPath] || item;
+      }
+      var label = item;
+      parts.forEach(function(p) {
+        if (label) {
+          label = label[p];
         }
+      });
+      return label;
+
+    }
+
+    _computeKeys() {
+      var s = ' ';
+      for (var i = 48; i <= 126; i++) {
+        s += String.fromCharCode(i) + ' ';
+      }
+      //adding backspace
+      s += 'backspace' + ' ';
+      return s;
+    }
+
+    _computeFilter(string) {
+      // return a filter function for the current search string
+      if (!string) {
+        return null;
+      }
+      string = string.toLowerCase();
+
+      var me = this;
+      var labelPath = this.labelPath;
+      var parts = Polymer.Base._getPathParts(labelPath);
+      if (parts.length === 1) {
+        return function(item) {
+          return item[labelPath] && item[labelPath].toLowerCase().indexOf(string) > -1;
+        };
+      }
+      return function(item) {
         var label = item;
         parts.forEach(function(p) {
           if (label) {
             label = label[p];
           }
         });
-        return label;
+        return label && label.toLowerCase().indexOf(string) > -1;
+      };
 
-      },
+    }
 
-      _computeKeys: function() {
-        var s = ' ';
-        for (var i = 48; i <= 126; i++) {
-          s += String.fromCharCode(i) + ' ';
-        }
-        //adding backspace
-        s += 'backspace' + ' ';
-        return s;
-      },
-
-      _computeFilter: function(string) {
-        // return a filter function for the current search string
-        if (!string) {
-          return null;
-        }
-        string = string.toLowerCase();
-
-        var me = this;
-        var labelPath = this.labelPath;
-        var parts = Polymer.Base._getPathParts(labelPath);
-        if (parts.length === 1) {
-          return function(item) {
-            return item[labelPath] && item[labelPath].toLowerCase().indexOf(string) > -1;
-          };
-        }
-        return function(item) {
-          var label = item;
-          parts.forEach(function(p) {
-            if (label) {
-              label = label[p];
-            }
-          });
-          return label && label.toLowerCase().indexOf(string) > -1;
-        };
+    /**
+     * A handler that is called when the dropdown is tapped.
+     *
+     * @param {CustomEvent} event A tap event.
+     */
+    _onTap(event) {
+      if (Polymer.Gestures.findOriginalTarget(event) === this) {
+        this.open();
+      }
+    }
 
-      },
+    _onTagTap(e) {
+      if (e.detail.isRemoved || (e.srcElement.localName === 'input')) {
+        e.stopPropagation();
+      }
+    }
 
-      /**
-       * A handler that is called when the dropdown is tapped.
-       *
-       * @param {CustomEvent} event A tap event.
-       */
-      _onTap: function(event) {
-        if (Polymer.Gestures.findOriginalTarget(event) === this) {
-          this.open();
-        }
-      },
+    _onAscii(event) {
+      this.open();
+      this.async(function() {
+        this.set('searchString', this.$.tagInput.value)
+      }, 30);
 
-      _onTagTap: function(e) {
-        if (e.detail.isRemoved || (e.srcElement.localName === 'input')) {
-          e.stopPropagation();
-        }
-      },
+    }
 
-      _onAscii: function(event) {
-        this.open();
-        this.async(function() {
-          this.set('searchString', this.$.tagInput.value)
-        }, 30);
-
-      },
-
-      /**
-       * Compute the vertical offset of the menu based on the value of
-       * `noLabelFloat`.
-       *
-       * @param {boolean} noLabelFloat True if the label should not float
-       * above the input, otherwise false.
-       */
-      _computeMenuVerticalOffset: function(noLabelFloat) {
-        // NOTE(cdata): These numbers are somewhat magical because they are
-        // derived from the metrics of elements internal to `paper-input`'s
-        // template. The metrics will change depending on whether or not the
-        // input has a floating label.
-        return noLabelFloat ? -4 : 8;
-      },
-
-      /**
-       * Returns false if the element is required and does not have a selection,
-       * and true otherwise.
-       * @param {*=} _value Ignored.
-       * @return {boolean} true if `required` is false, or if `required` is true
-       * and the element has a valid selection.
-       */
-      _getValidity: function(_value) {
-        return this.disabled || !this.required || (this.required && !!this.value);
-      },
-
-      _openedChanged: function() {
-        var openState = this.opened ? 'true' : 'false';
-        var e = this.contentElement;
-        if (e) {
-          e.setAttribute('aria-expanded', openState);
-        }
+    /**
+     * Compute the vertical offset of the menu based on the value of
+     * `noLabelFloat`.
+     *
+     * @param {boolean} noLabelFloat True if the label should not float
+     * above the input, otherwise false.
+     */
+    _computeMenuVerticalOffset(noLabelFloat) {
+      // NOTE(cdata): These numbers are somewhat magical because they are
+      // derived from the metrics of elements internal to `paper-input`'s
+      // template. The metrics will change depending on whether or not the
+      // input has a floating label.
+      return noLabelFloat ? -4 : 8;
+    }
+
+    /**
+     * Returns false if the element is required and does not have a selection,
+     * and true otherwise.
+     * @param {*=} _value Ignored.
+     * @return {boolean} true if `required` is false, or if `required` is true
+     * and the element has a valid selection.
+     */
+    _getValidity(_value) {
+      return this.disabled || !this.required || (this.required && !!this.value);
+    }
+     
+    _openedChanged() {
+      var openState = this.opened ? 'true' : 'false';
+      var e = this.contentElement;
+      if (e) {
+        e.setAttribute('aria-expanded', openState);
       }
-    });
-  })();
+    }
+};
+
+customElements.define(PaperTagsDropdown.is, PaperTagsDropdown);
   </script>
 </dom-module>
diff --git a/paper-tags-input.html b/paper-tags-input.html
index 5489d82..ca7425a 100644
--- a/paper-tags-input.html
+++ b/paper-tags-input.html
@@ -10,7 +10,7 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="paper-tags.html">
-<link rel="import" href="paper-tags-behavior.html">
+<link rel="import" href="paper-tags-mixin.html">
 <!--
 An element for settings tags tags, based on paper-input
 
@@ -44,7 +44,6 @@
     }
 
     paper-tags {
-      max-width: 80%;
     }
 
     paper-tags[readonly] {
@@ -61,9 +60,9 @@
     }
     </style>
     <paper-input id="tagInput" always-float-label on-keydown="_keyDown" readonly$="[[readonly]]" placeholder$="[[placeholder]]" disabled$="[[disabled]]" invalid="[[invalid]]" label="[[label]]" value="{{value}}" maxlength$="[[maxlength]]" error-message="[[errorMessage]]" minlength$="[[minlength]]" invalid="{{invalid}}">
-      <content select="[prefix]" prefix></content>
-      <paper-tags id="paperTags" readonly$="[[readonly]]" items="{{items}}" icon="[[icon]]" item-class="[[itemClass]]" class-accessor="[[classAccessor]]" label-path="[[labelPath]]" icon-accessor="[[iconAccessor]]" prevent-remove-tag="[[preventRemoveTag]]" prefix></paper-tags>
-      <content select="[suffix]" suffix></content>
+      <slot name="[prefix]" slot="prefix"></slot>
+      <paper-tags id="paperTags" readonly$="[[readonly]]" items="{{items}}" icon="[[icon]]" item-class="[[itemClass]]" class-accessor="[[classAccessor]]" label-path="[[labelPath]]" icon-accessor="[[iconAccessor]]" prevent-remove-tag="[[preventRemoveTag]]" slot="prefix"></paper-tags>
+      <slot  name="[suffix]" slot="suffix"></slot>
     </paper-input>
     <template is="dom-if" if="{{showCounter}}">
       <div class="paper-tags-counter">
@@ -73,153 +72,149 @@
   </template>
 </dom-module>
 <script>
-Polymer({
-  is: 'paper-tags-input',
-
-  behaviors: [
-    Polymer.PaperTagsBehavior
-  ],
-
-  properties: {
-    /**
-     * `preventRemoveTag` hide the `close` icon and prevent removing a tag when true.
-     */
-    preventRemoveTag: {
-      type: Boolean,
-      value: false
-    },
-
-    /**
-     * `items` the Array of tags
-     */
-    items: {
-      type: Array,
-      notify: true
-    },
-    /**
-     * `delimiter` defaults to comma (,)
-     */
-    delimiter: {
-      type: String,
-      value: ','
-    },
-    /**
-     * `showCounter` display a paper-badge with `showCounter` as textContent
-     */
-    showCounter: String,
-
-    /**
-     * `maxTags` The maximum allowed number of tags (yet to be implemented)
-     */
-    maxTags: Number,
-
-    /**
-     * `minTags` The minimum allowed number of tags (yet to be implemented)
-     */
-    minTags: Number,
-
-    /**
-     * `tagTpl` a template Object used when creating new tags. If not defuned, new tags will jus be Strings
-     */
-    tagTpl: Object,
-
-    /**
-     * `value` the underlying paper-input value
-     */
-    value: {
-      type: String,
-      notify: true
-    },
-
-    /**
-     * `allowAdd` determines if new tags are allowed on pressing `Enter` or not.
-     */
-    allowAdd: {
-      type: Boolean,
-      value: true
-    }
-  },
-  observers: [
-    '_observeTagItemsInit(items)',
-    '_observeTagItems(items.splices)'
-  ],
-
-  _observeTagItemsInit: function(items) {
-    if(items && !this.valueArray) {
-      this._observeTagItems(items)
-
-    }
-
-  },
-  _observeTagItems: function(splices) {
-    if(!splices) {
-      return
-    }
-    var keys = [];
-    this._isUpdatingingItems = true;
-    this.items.forEach(function(item) {
-      var id = item[this.keyPath] || item;
-      keys.push(id + '');
-    }, this);
-
-    this.syncValueArrayWithKeys(keys)
-
-    delete this._isUpdatingingItems;
-  },
-
-  _removeLast: function() {
-    this.splice('items', this.items.length - 1);
-  },
-
-  removeTag: function(tag) {
-    var position = this.items.indexOf(tag);
-    if(position > -1) {
-      this.splice('items', position, 1 );
-    }
-  },
-
-  findTag: function(tag) {
-    return this.items.includes(tag);
-  },
-
-
-  _addTag: function(tag) {
-    if (this.tagTpl) {
-      var id = tag;
-      tag = JSON.parse(JSON.stringify(this.tagTpl));
-      tag[this.keyPath] = id + '';
-      if (this.labelPath) {
-        tag[this.labelPath] = id;
-      }
-    }
-    this.push('items', tag);
-    this.items = this.items.slice();
-    // this.fire('tag-added', tag);
-  },
-
-  _keyDown: function(event) {
-    var keyVal = event.keyCode;
-    if (keyVal === 13 && this.allowAdd) {
-      var tags = event.target.value.split(this.delimiter);
-      var me = this; 
-      
-      tags.forEach(function(tag) {
-       if (!me.findTag(tag)) {
-          me._addTag(tag);
-          event.target.value = '';
-        }
-      });
-      
-    } else if (keyVal === 8 && event.target.value === '') {
-      this._removeLast();
-    }
-  },
-  /**
-   * Returns a reference to the focusable element.
-   */
-  get _focusableElement() {
-    return this.$.tagInput.inputElement;
-  },
-
-});
+class PaperTagsInput extends PaperTagsMixin(Polymer.Element) {
+	static get is() {
+	    return 'paper-tags-input'
+	}
+	static get properties() {
+	    return {
+		    /**
+		     * `preventRemoveTag` hide the `close` icon and prevent removing a tag when true.
+		     */
+		    preventRemoveTag: {
+		      type: Boolean,
+		      value: false
+		    },
+
+		    /**
+		     * `items` the Array of tags
+		     */
+		    items: {
+		      type: Array,
+		      notify: true
+		    },
+		    /**
+		     * `delimiter` defaults to comma (,)
+		     */
+		    delimiter: {
+		      type: String,
+		      value: ','
+		    },
+		    /**
+		     * `showCounter` display a paper-badge with `showCounter` as textContent
+		     */
+		    showCounter: String,
+
+		    /**
+		     * `maxTags` The maximum allowed number of tags (yet to be implemented)
+		     */
+		    maxTags: Number,
+
+		    /**
+		     * `minTags` The minimum allowed number of tags (yet to be implemented)
+		     */
+		    minTags: Number,
+
+		    /**
+		     * `tagTpl` a template Object used when creating new tags. If not defuned, new tags will jus be Strings
+		     */
+		    tagTpl: Object,
+
+		    /**
+		     * `value` the underlying paper-input value
+		     */
+		    value: {
+		      type: String,
+		      notify: true
+		    },
+
+		    /**
+		     * `allowAdd` determines if new tags are allowed on pressing `Enter` or not.
+		     */
+		    allowAdd: {
+		      type: Boolean,
+		      value: true
+		    }
+	  }
+	}
+	static get observers() {
+	     return [
+		 '_observeTagItemsInit(items)',
+		  '_observeTagItems(items.splices)'
+		]
+	}
+
+	_observeTagItemsInit(items) {
+	  if(items && !this.valueArray) {
+	    this._observeTagItems(items)
+
+	  }
+
+	}
+	_observeTagItems(splices) {
+	  if(!splices) {
+	    return
+	  }
+	  var keys = [];
+	  this._isUpdatingingItems = true;
+	  this.items.forEach(function(item) {
+	    var id = item[this.keyPath] || item;
+	    keys.push(id + '');
+	  }, this);
+
+	  this.syncValueArrayWithKeys(keys)
+
+	  delete this._isUpdatingingItems;
+	}
+
+	_removeLast() {
+	  var last = this.items.pop();
+	  this.items = this.items.slice();
+	  // this.fire('tag-removed', last);
+	}
+
+	findTag(tag) {
+	  return this.items.includes(tag);
+	}
+
+	_addTag(tag) {
+	  if (this.tagTpl) {
+	    var id = tag;
+	    tag = JSON.parse(JSON.stringify(this.tagTpl));
+	    tag[this.keyPath] = id + '';
+	    if (this.labelPath) {
+	      tag[this.labelPath] = id;
+	    }
+	  }
+	  this.push('items', tag);
+	  this.items = this.items.slice();
+	  // this.fire('tag-added', tag);
+	}
+
+	_keyDown(event) {
+	  var keyVal = event.which;
+	  if (keyVal === 13 && this.allowAdd) {
+	    var tags = event.target.value.split(this.delimiter);
+	    var me = this;
+
+	    tags.forEach(function(tag) {
+	     if (!me.findTag(tag)) {
+	        me._addTag(tag);
+	        event.target.value = '';
+	      }
+	    });
+
+	  } else if (keyVal === 8 && event.target.value === '') {
+	    this._removeLast();
+	  }
+	}
+	/**
+	 * Returns a reference to the focusable element.
+	 */
+	get _focusableElement() {
+	  return this.$.tagInput.inputElement;
+	}
+
+};
+customElements.define(PaperTagsInput.is, PaperTagsInput);
 </script>
diff --git a/paper-tags-mixin.html b/paper-tags-mixin.html
new file mode 100644
index 0000000..8db2421
--- /dev/null
+++ b/paper-tags-mixin.html
@@ -0,0 +1,69 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="value-array-firebase-mixin.html">
+<script>
+/**
+ * `Polymer.PaperTagsMixin` defines recurent properties in paper-tags family (paper-tags, paper-tags-input, paper-tags-dropdown)
+ *
+ * @demo demo/index.html
+ */
+PaperTagsMixin = function(superClass) {
+	return class extends ValueArrayFirebaseMixin(superClass) {
+	    static get properties() {
+			return  {
+			    /**
+			     * `itemClass` the class applied to tag items.  If `classAccessor` is defined, `classAccessor` will have precedence
+			     */
+			    itemClass: String,
+			
+			    /**
+			     * `icon` icon to be applied to the tag item when it is not removable. If `iconAccessor` is defined, `iconAccessor` will have precedence
+			     */
+			    icon: String,
+			
+			    /**
+			     * `keyPath` key for retrieving the `id` from item data object
+			     */
+			    keyPath: {
+			      type: String,
+			      value: 'id'
+			    },
+			    
+			    /**
+			     * `labelPath` key for retrieving the `label` from item data object
+			     */
+			    labelPath: {
+			      type: String,
+			      value: 'label'
+			    },
+			    
+			    /**
+			     * `classAccessor` key for retrieving the `class` from item data object
+			     */
+			    classAccessor: String,
+			    
+			    /**
+			     * `iconAccessor` key for retrieving the `icon` from item data object
+			     */
+			    iconAccessor: String,
+			
+			    /**
+			     * `preventRemoveTag` hide the `close` icon and prevent removing a tag when true. 
+			     */
+			    preventRemoveTag: {
+			      type: Boolean,
+			      value: false
+			    }
+			  }
+		}
+	}
+}
+</script>
diff --git a/paper-tags.html b/paper-tags.html
index d6402aa..f10b114 100644
--- a/paper-tags.html
+++ b/paper-tags.html
@@ -13,7 +13,7 @@
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../iron-icon/iron-icon.html">
-<link rel="import" href="paper-tags-behavior.html">
+<link rel="import" href="paper-tags-mixin.html">
 <!-- 
 An element for setting  displaying a single tag
 
@@ -39,6 +39,8 @@
 @demo demo/index.html
 -->
 <dom-module id="paper-tags">
+
+  <template>
   <style>
   [hidden] {
     display: none !important;
@@ -46,17 +48,17 @@
 
   :host {
     display: block;
-    @apply(--paper-font-common-base);
-    @apply(--paper-tags);
+    @apply --paper-font-common-base;
+    @apply --paper-tags;
   }
   
   div.paper-tag-item {
     margin-bottom: var(--paper-tag-margin, 3px);
-    border: 1px solid var(--paper-tag-focus-color, --default-primary-color);
+    border: 1px solid var(--paper-tag-focus-color, var(--default-primary-color));
     font-size: 13px;
-    color: var(--paper-tag-text-color, --secondary-text-color);
+    color: var(--paper-tag-text-color, var(--secondary-text-color));
     border-radius: 4px;
-    @apply(--paper-tag-item);
+    @apply --paper-tag-item;
   }
   
   .paper-tag-item:last-of-type {
@@ -64,7 +66,7 @@
   }
   
   paper-icon-button {
-    color: var(--paper-tag-focus-color, --default-primary-color);
+    color: var(--paper-tag-focus-color,var(--default-primary-color));
     width: 20px;
     height: 20px;
     padding: 0;
@@ -78,7 +80,6 @@
     display: inline-block;
   }
   </style>
-  <template>
     <template is="dom-repeat" id="tagRepeat" items="[[items]]">
       <div class$="paper-tag-item [[_computeClass(item, classAccessor)]]">
         <span class="paper-tag-item-label">[[_computeLabel(item, labelPath)]]</span>
@@ -89,61 +90,63 @@
   </template>
 </dom-module>
 <script>
-Polymer({
-
-  is: 'paper-tags',
+class PaperTags extends PaperTagsMixin(Polymer.Element) {
+	static get is() {
+	    return 'paper-tags'
+	}
+	static get properties() {
+	    return {
+		    /**
+		     * `readonly`prevents tags to be removed
+		     */
+		    readonly: Boolean,
+		    
+		    /**
+		     * `items` the Array of tags
+		     */
+		    items: {
+		      type: Array,
+		      notify: true,
+		      value: function() {
+		        return [];
+		      }
+		    }
+  		}
+	}
+	
+	_computeIcon(item, iconAccessor) {
+	  return item[iconAccessor] || this.icon;
+	}
+	
+	_computeClass(item, classAccessor) {
+	  return item[classAccessor] || this.itemClass;
+	}
+	
+	_computeLabel(item, labelPath) {
+	  return item[labelPath] || item;
+	}
+	
+	_removeTag(event) {
+	  if (this.readonly) {
+	    return;
+	  }
+	  event.detail.isRemoved = true;
+	  var model = event.model,
+	    index = this.items.indexOf(model.item);
+	
+	  if (index > -1) {
+	    event.stopPropagation();
+	    var remove_func = function() {
+		      this.splice('items', index, 1);
+	    };
+	    this._paper_tag_remove_item = Polymer.Debouncer.debounce(
+	       this._paper_tag_remove_item, // initially undefined
+	       Polymer.Async.timeOut.after(10),remove_func);
+	    // this.items = this.items.slice();
+	    // this.fire('tag-removed', model.item);
+	  }
+	}
+};
+customElements.define(PaperTags.is, PaperTags);
 
-  behaviors: [
-    Polymer.PaperTagsBehavior
-  ],
-
-  properties: {
-    
-    /**
-     * `readonly`prevents tags to be removed
-     */
-    readonly: Boolean,
-    
-    /**
-     * `items` the Array of tags
-     */
-    items: {
-      type: Array,
-      notify: true,
-      value: function() {
-        return [];
-      }
-    }
-  },
-
-  _computeIcon: function(item, iconAccessor) {
-    return item[iconAccessor] || this.icon;
-  },
-
-  _computeClass: function(item, classAccessor) {
-    return item[classAccessor] || this.itemClass;
-  },
-
-  _computeLabel: function(item, labelPath) {
-    return item[labelPath] || item;
-  },
-
-  _removeTag: function(event) {
-    if (this.readonly) {
-      return;
-    }
-    event.detail.isRemoved = true;
-    var model = event.model,
-      index = this.items.indexOf(model.item);
-
-    if (index > -1) {
-      event.stopPropagation();
-      this.debounce('paper-tag-remove-item', function() {
-        this.splice('items', index, 1);
-      }, 10);
-      // this.items = this.items.slice();
-      // this.fire('tag-removed', model.item);
-    }
-  }
-});
 </script>
diff --git a/value-array-firebase-behavior.html b/value-array-firebase-behavior.html
deleted file mode 100644
index 71c2334..0000000
--- a/value-array-firebase-behavior.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<link rel="import" href="../polymer/polymer.html">
-<script>
-/**
- * `Polymer.ValueArrayFirebaseBehavior` ensures the binding between array values and firebase objects.
- *
- * @demo demo/index.html
- * @polymerBehavior Polymer.ValueArrayFirebaseBehavior
- */
-
-Polymer.ValueArrayFirebaseBehavior = {
-
-  properties: {
-    /**
-     * `valueObject` store value as object keys `{"value1": true, "value2": true}`
-     */
-    valueObject: {
-      type: Object,
-      notify: true
-    },
-
-    /**
-     * `valueArray` store value as array `["value1", "value2"]`
-     */
-    valueArray: {
-      type: Array,
-      notify: true
-    },
-
-    /**
-     * `valueJoin` joins values in a string
-     */
-    valueJoin: {
-      type: String,
-      notify: true,
-      readOnly: true,
-    }
-  },
-  observers: [
-    '_observeValueObject(valueObject.*)',
-    '_observeValueArrayInit(valueArray)',
-    '_observeValueArray(valueArray.splices)',
-  ],
-
-  //called when we set/reset valueArray 
-  _observeValueArrayInit: function(valueArray) {
-    this._isInitiatingValueArray = true;
-    if (valueArray && !this._isUpdatingValueObject) {
-      var o = {};
-      this.valueArray.forEach(function(item) {
-        o[item] = true;
-      });
-      this.set('valueObject', o);
-      this._setValueJoin(this.valueArray.join(', '));
-    }
-    delete this._isInitiatingValueArray;
-  },
-
-  /**
-   * `_observeValueArray` ensures valueArray and valueObject are in sync
-   */
-  _observeValueArray: function(splices) {
-    if (!splices) {
-      return;
-    }
-    this._isUpdatingValueArray = true;
-    // console.log('ARRAY SPLICE', splices);
-    if (!this._isUpdatingValueObject) {
-      splices.indexSplices.forEach(function(splice) {
-        splice.removed.forEach(function(removed) {
-          this.set('valueObject.' + removed, null); // so that it is deleted at firebase level
-          this.fire('tag-removed', removed);
-        }, this);
-        if (splice.addedCount) {
-          for (var i = 0; i < splice.addedCount; i++) {
-            var index = splice.index + i;
-            var newValue = splice.object[index];
-            this.set('valueObject.' + newValue, true);
-            this.fire('tag-added', newValue);
-          }
-        }
-      }, this);
-
-      this._setValueJoin((this.valueArray || []).join(', '));
-    }
-    delete this._isUpdatingValueArray;
-  },
-
-  /**
-   * `_observeValueObject` ensures valueArray and valueObject are in sync
-   */
-  _observeValueObject: function(obj) {
-    this._isUpdatingValueObject = true;
-    if (!this._isUpdatingValueArray && !this._isInitiatingValueArray) {
-      var keys = Object.keys(this.valueObject).filter(function(item) {
-        return !!item;
-      });
-      this.syncValueArrayWithKeys(keys);
-
-      this._setValueJoin(this.valueArray.join(', '));
-    }
-    delete this._isUpdatingValueObject;
-  },
-  
-  syncValueArrayWithKeys: function(keys) {
-    if (!this.valueArray) {
-      this.valueArray = [];
-    }
-    // removed values not present in keys
-    var tmpArray = [].concat(this.valueArray);
-    tmpArray.forEach(function(v) {
-      if (keys.indexOf(v) < 0) {
-        this.splice('valueArray', this.valueArray.indexOf(v), 1);
-      }
-    }, this);
-    // add all missing keys
-    keys.forEach(function(k) {
-      if (this.valueArray.indexOf(k) < 0) {
-        this.push('valueArray', k);
-      }
-    }, this);
-  }
-
-};
-</script>
diff --git a/value-array-firebase-mixin.html b/value-array-firebase-mixin.html
new file mode 100644
index 0000000..3ef0b1f
--- /dev/null
+++ b/value-array-firebase-mixin.html
@@ -0,0 +1,135 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../polymer/polymer.html">
+<script>
+/**
+ * `Polymer.ValueArrayFirebaseMixin` ensures the binding between array values and firebase objects.
+ *
+ * @demo demo/index.html
+ */
+
+ValueArrayFirebaseMixin = function(superClass) {
+	return class extends superClass {
+	    static get properties() {
+			return  {
+			    /**
+			     * `valueObject` store value as object keys `{"value1": true, "value2": true}`
+			     */
+			    valueObject: {
+			      type: Object,
+			      notify: true
+			    },
+			
+			    /**
+			     * `valueArray` store value as array `["value1", "value2"]`
+			     */
+			    valueArray: {
+			      type: Array,
+			      notify: true
+			    },
+			
+			    /**
+			     * `valueJoin` joins values in a string
+			     */
+			    valueJoin: {
+			      type: String,
+			      notify: true,
+			      readOnly: true,
+			    }
+			  }
+	    }
+	    static get observers() {
+		     return [
+			  '_observeValueObject(valueObject.*)',
+			  '_observeValueArrayInit(valueArray)',
+			  '_observeValueArray(valueArray.splices)',
+			]
+		}
+		//called when we set/reset valueArray 
+		_observeValueArrayInit(valueArray) {
+		  this._isInitiatingValueArray = true;
+		  if (valueArray && !this._isUpdatingValueObject) {
+		    var o = {};
+		    this.valueArray.forEach(function(item) {
+		      o[item] = true;
+		    });
+		    this.set('valueObject', o);
+		    this._setValueJoin(this.valueArray.join(', '));
+		  }
+		  delete this._isInitiatingValueArray;
+		}
+
+		/**
+		 * `_observeValueArray` ensures valueArray and valueObject are in sync
+		 */
+		_observeValueArray(splices) {
+		  if (!splices) {
+		    return;
+		  }
+		  this._isUpdatingValueArray = true;
+		  // console.log('ARRAY SPLICE', splices);
+		  if (!this._isUpdatingValueObject) {
+		    splices.indexSplices.forEach(function(splice) {
+		      splice.removed.forEach(function(removed) {
+		        this.set('valueObject.' + removed, null); // so that it is deleted at firebase level
+		        this.dispatchEvent(new CustomEvent("tag-removed",{bubbles: true, composed: true,detail: removed}));
+		      }, this);
+		      if (splice.addedCount) {
+		        for (var i = 0; i < splice.addedCount; i++) {
+		          var index = splice.index + i;
+		          var newValue = splice.object[index];
+		          this.set('valueObject.' + newValue, true);
+		          this.dispatchEvent(new CustomEvent("tag-added",{bubbles: true, composed: true,detail: newValue}));
+		        }
+		      }
+		    }, this);
+		
+		    this._setValueJoin((this.valueArray || []).join(', '));
+		  }
+		  delete this._isUpdatingValueArray;
+		}
+		
+		/**
+		 * `_observeValueObject` ensures valueArray and valueObject are in sync
+		 */
+		_observeValueObject(obj) {
+		  this._isUpdatingValueObject = true;
+		  if (!this._isUpdatingValueArray && !this._isInitiatingValueArray) {
+		    var keys = Object.keys(this.valueObject).filter(function(item) {
+		      return !!item;
+		    });
+		    this.syncValueArrayWithKeys(keys);
+		
+		    this._setValueJoin(this.valueArray.join(', '));
+		  }
+		  delete this._isUpdatingValueObject;
+		}
+		
+		syncValueArrayWithKeys(keys) {
+		  if (!this.valueArray) {
+		    this.valueArray = [];
+		  }
+		  // removed values not present in keys
+		  var tmpArray = [].concat(this.valueArray);
+		  tmpArray.forEach(function(v) {
+		    if (keys.indexOf(v) < 0) {
+		      this.splice('valueArray', this.valueArray.indexOf(v), 1);
+		    }
+		  }, this);
+		  // add all missing keys
+		  keys.forEach(function(k) {
+		    if (this.valueArray.indexOf(k) < 0) {
+		      this.push('valueArray', k);
+		    }
+		  }, this);
+		}
+	}
+};
+</script>

From 0fb6ee3cf81add7a8601ca4324fbb56fa10c421d Mon Sep 17 00:00:00 2001
From: Alex <ayzhang@umd.edu>
Date: Wed, 30 May 2018 18:22:18 -0400
Subject: [PATCH 15/20] formatting

---
 demo/index.html          |  8 +----
 paper-tags-dropdown.html | 75 ++++++++++++++++++++++------------------
 paper-tags-input.html    | 21 +++++++----
 3 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 4a76ca9..08a1c44 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -19,7 +19,6 @@
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../../paper-dropdown-menu/paper-dropdown-menu.html">
   <link rel="import" href="../../paper-item/paper-item.html">
-  <link rel="import" href="../../paper-menu/paper-menu.html">
   <link rel="import" href="../paper-tags.html">
   <link rel="import" href="../paper-tags-input.html">
   <link rel="import" href="../paper-tags-dropdown.html">
@@ -59,9 +58,7 @@ <h4>paper-tags-dropdown</h4>
         <template  id="tagDropdown" is="dom-bind">
           <style is="custom-style">
           paper-tags-dropdown {
-            --paper-menu: {
-              width: 200px;
-            }
+
           }
           </style>
           <paper-tags-dropdown id="control" items="{{items}}" label-path="label" noink label="label dropdown" value-object='{"5": "true"}'></paper-tags-dropdown>
@@ -76,9 +73,6 @@ <h4>paper-tags-dropdown string array</h4>
 			<template id="stringArrayTagDropdown" is="dom-bind">
 				<style is="custom-style">
 					paper-tags-dropdown {
-						--paper-menu: {
-							width: 200px;
-						}
 					}
 				</style>
 				<paper-tags-dropdown
diff --git a/paper-tags-dropdown.html b/paper-tags-dropdown.html
index 650d5cc..d48380d 100644
--- a/paper-tags-dropdown.html
+++ b/paper-tags-dropdown.html
@@ -109,7 +109,7 @@
 	          notify: true,
 			  observer: '_observeValueArray'
 	        },
-	
+
 	        /**
 	         * `valueArray` store value as array `["value1", "value2"]`
 	         */
@@ -117,55 +117,55 @@
 	          type: Array,
 	          notify: true,
 	        },
-	
+
 	        keyPath: {
 	          type: String,
 	          value: 'id'
 	        },
-	
+
 	        labelPath: {
 	          type: String,
 	          value: 'label'
 	        },
-	
-	
+
+
 	        searchString: {
 	          type: String,
 	          value: ''
 	        },
-	
+
 	        items: {
 	          type: Array,
 	          value: function() {
 	            return [];
 	          }
 	        },
-	
+
 	        tagItems: {
 	          type: Array
 	        },
-	
+
 	        /**
 	         * When true, `showCounter` display a counter counting the number of tags
 	         */
 	        showCounter: {
 	          type: String
 	        },
-	
+
 	        /*
 	         * `maxTags` the maximum allowed number of tags
 	         */
 	        maxTags: {
 	          type: Number
 	        },
-	
+
 	        /*
 	         * `minTags` the minimum allowed number of tags
 	         */
 	        minTags: {
 	          type: Number
 	        },
-	
+
 	        /*
 	         * `readonly` - reflects to `disabled` when set to true.
 	         */
@@ -173,21 +173,21 @@
 	          type: Boolean,
 	          observer: '_observeReadonly'
 	        },
-	
+
 	        /**
 	         * `tagTpl` a template Object used when creating new tags (e.g. '{"id":null, "label":"hello"}'). If not defuned, new tags will jus be Strings
 	         */
 	        tagTpl: {
 	          type: Object
 	        },
-	
+
 	        keyTarget: {
 	          type: Object,
 	          value: function() {
 	            return this.$.tagInput;
 	          }
 	        },
-	
+
 	        /**
 	         * The derived "label" of the currently selected item. This value
 	         * is the `label` property on the selected item if set, or else the
@@ -198,28 +198,28 @@
 	          notify: true,
 	          readOnly: true
 	        },
-	
+
 	        /**
 	         * The label for the dropdown.
 	         */
 	        label: {
 	          type: String
 	        },
-	
+
 	        /**
 	         * The placeholder for the dropdown.
 	         */
 	        placeholder: {
 	          type: String
 	        },
-	
+
 	        /**
 	         * The error message to display when invalid.
 	         */
 	        errorMessage: {
 	          type: String
 	        },
-	
+
 	        /**
 	         * True if the dropdown is open. Otherwise, false.
 	         */
@@ -229,7 +229,7 @@
 	          value: false,
 	          observer: '_openedChanged'
 	        },
-	
+
 	        /**
 	         * Set to true to disable the floating label. Bind this to the
 	         * `<paper-input-container>`'s `noLabelFloat` property.
@@ -239,7 +239,7 @@
 	          value: false,
 	          reflectToAttribute: true
 	        },
-	
+
 	        /**
 	         * Set to true to always float the label. Bind this to the
 	         * `<paper-input-container>`'s `alwaysFloatLabel` property.
@@ -248,7 +248,7 @@
 	          type: Boolean,
 	          value: false
 	        },
-	
+
 	        /**
 	         * Set to true to disable animations when opening and closing the
 	         * dropdown.
@@ -257,7 +257,7 @@
 	          type: Boolean,
 	          value: false
 	        },
-	
+
 	        /**
 	         * The orientation against which to align the menu dropdown
 	         * horizontally relative to the dropdown trigger.
@@ -266,7 +266,7 @@
 	          type: String,
 	          value: 'right'
 	        },
-	
+
 	        /**
 	         * The orientation against which to align the menu dropdown
 	         * vertically relative to the dropdown trigger.
@@ -274,11 +274,20 @@
 	        verticalAlign: {
 	          type: String,
 	          value: 'top'
-	        }
+	        },
+
+          /**
+           * Vertical offset of the dropdown menu relative to the
+           * dropdown trigger.
+           */
+          verticalOffset: {
+            type: Number,
+            value: 0,
+          }
 		}
 	}
-	
-	
+
+
 	static get listeners() {
 	     return {
 		 'tap': '_onTap'
@@ -288,7 +297,7 @@
 	     return{
 		 'up down': 'open',
 		  'esc': 'close'
-		 
+
 		}
 	}
 	static get hostAttributes() {
@@ -296,11 +305,11 @@
 			role: 'combobox',
 		  'aria-autocomplete': 'none',
 		  'aria-haspopup': 'true'
-		}	
+		}
 	}
-	
-	
-	
+
+
+
 	static get observers() {
 	     return [
 		 '_observeItems(items)',
@@ -325,7 +334,7 @@
 	  if (items) {
 	    this._isInitiatingItems = true;
 	    this.set('tagItems', this._filterValueItems(this.valueArray));
-	
+
 	    delete this._isInitiatingItems;
 	  }
 	}
@@ -503,7 +512,7 @@
     _getValidity(_value) {
       return this.disabled || !this.required || (this.required && !!this.value);
     }
-     
+
     _openedChanged() {
       var openState = this.opened ? 'true' : 'false';
       var e = this.contentElement;
diff --git a/paper-tags-input.html b/paper-tags-input.html
index ca7425a..f6dac09 100644
--- a/paper-tags-input.html
+++ b/paper-tags-input.html
@@ -138,8 +138,8 @@
 	  }
 	}
 	static get observers() {
-	     return [
-		 '_observeTagItemsInit(items)',
+    	return [
+		  '_observeTagItemsInit(items)',
 		  '_observeTagItems(items.splices)'
 		]
 	}
@@ -168,11 +168,20 @@
 	}
 
 	_removeLast() {
-	  var last = this.items.pop();
-	  this.items = this.items.slice();
-	  // this.fire('tag-removed', last);
+    	this.splice('items', this.items.length - 1);
 	}
 
+  	removeAll () {
+    	this.splice("items", 0);
+  	}
+
+  	removeTag (tag) {
+    	var position = this.items.indexOf(tag);
+    	if(position > -1) {
+      		this.splice('items', position, 1 );
+    	}
+  	}
+
 	findTag(tag) {
 	  return this.items.includes(tag);
 	}
@@ -211,7 +220,7 @@
 	/**
 	 * Returns a reference to the focusable element.
 	 */
-	get _focusableElement() {
+	get_focusableElement() {
 	  return this.$.tagInput.inputElement;
 	}
 

From 0a037f91ba6ab3d212a5cc2cee24509be16f9488 Mon Sep 17 00:00:00 2001
From: Alex <ayzhang@umd.edu>
Date: Wed, 30 May 2018 18:27:41 -0400
Subject: [PATCH 16/20] bower update

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 81c2255..50e6e7d 100644
--- a/bower.json
+++ b/bower.json
@@ -25,7 +25,7 @@
   ],
   "repository": {
 	  "type": "git",
-	  "url": "https://github.com/Weaverize/paper-tags.git"
+	  "url": "https://github.com/AlexanderYZhang/paper-tags.git"
   },
   "dependencies": {
     "polymer": "Polymer/polymer#^2.0.0",

From b18754636051e7f6f6c0cd438f8ad45e7f6127c7 Mon Sep 17 00:00:00 2001
From: Alex <ayzhang@umd.edu>
Date: Thu, 31 May 2018 09:57:43 -0400
Subject: [PATCH 17/20] fixes for polymer 2.0

---
 paper-tags-dropdown.html | 2 +-
 paper-tags-input.html    | 2 +-
 paper-tags-mixin.html    | 2 +-
 paper-tags.html          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/paper-tags-dropdown.html b/paper-tags-dropdown.html
index d48380d..76f7ff8 100644
--- a/paper-tags-dropdown.html
+++ b/paper-tags-dropdown.html
@@ -7,7 +7,7 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="../iron-behaviors/iron-button-state.html">
diff --git a/paper-tags-input.html b/paper-tags-input.html
index f6dac09..63cbc7b 100644
--- a/paper-tags-input.html
+++ b/paper-tags-input.html
@@ -7,7 +7,7 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="paper-tags.html">
 <link rel="import" href="paper-tags-mixin.html">
diff --git a/paper-tags-mixin.html b/paper-tags-mixin.html
index 8db2421..77dfe9f 100644
--- a/paper-tags-mixin.html
+++ b/paper-tags-mixin.html
@@ -7,7 +7,7 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="value-array-firebase-mixin.html">
 <script>
 /**
diff --git a/paper-tags.html b/paper-tags.html
index f10b114..472e35b 100644
--- a/paper-tags.html
+++ b/paper-tags.html
@@ -7,7 +7,7 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-badge/paper-badge.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">

From 80ff81ddcb6fe89c5352778c3b7e26342163491c Mon Sep 17 00:00:00 2001
From: Alex <ayzhang@umd.edu>
Date: Thu, 31 May 2018 16:12:35 -0400
Subject: [PATCH 18/20] removed dependency on Polymer.Base._getpathparts,
 default labelPath is '' instead of 'label'

---
 paper-tags-dropdown.html | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/paper-tags-dropdown.html b/paper-tags-dropdown.html
index 76f7ff8..3e3f4d1 100644
--- a/paper-tags-dropdown.html
+++ b/paper-tags-dropdown.html
@@ -125,7 +125,7 @@
 
 	        labelPath: {
 	          type: String,
-	          value: 'label'
+	          value: ''
 	        },
 
 
@@ -183,9 +183,9 @@
 
 	        keyTarget: {
 	          type: Object,
-	          value: function() {
-	            return this.$.tagInput;
-	          }
+	          // value: function() {
+	          //   return this.$.tagInput;
+	          // }
 	        },
 
 	        /**
@@ -374,6 +374,7 @@
 		if(super.connectedCallback){
 			super.connectedCallback();
 		}
+		this.keyTarget = this.$.tagInput;
 		// NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
 		// child will cause an `iron-select` event to fire while the element is
 		// still in a `DocumentFragment`. This has the effect of causing
@@ -411,10 +412,11 @@
     }
 
     _computeItemLabel(item, labelPath) {
-      var parts = Polymer.Base._getPathParts(labelPath);
-      if (parts.length === 1) {
-        return item[labelPath] || item;
+      if (!labelPath) {
+      	return item;
       }
+
+      var parts = labelPath.split(".");
       var label = item;
       parts.forEach(function(p) {
         if (label) {
@@ -422,7 +424,6 @@
         }
       });
       return label;
-
     }
 
     _computeKeys() {
@@ -441,15 +442,16 @@
         return null;
       }
       string = string.toLowerCase();
-
-      var me = this;
       var labelPath = this.labelPath;
-      var parts = Polymer.Base._getPathParts(labelPath);
-      if (parts.length === 1) {
-        return function(item) {
-          return item[labelPath] && item[labelPath].toLowerCase().indexOf(string) > -1;
-        };
+
+      if (!labelPath) {
+      	return function(item) {
+      		return item && item.toLowerCase().indexOf(string) > -1;
+      	};
       }
+
+      var parts = labelPath.split('.');
+
       return function(item) {
         var label = item;
         parts.forEach(function(p) {

From 6fe4170d5be6b6dcfb77f5295253e92602d8731a Mon Sep 17 00:00:00 2001
From: Alex <ayzhang@umd.edu>
Date: Thu, 31 May 2018 16:28:42 -0400
Subject: [PATCH 19/20] polymer2 fixes

---
 paper-tags-dropdown.html | 10 +++++-----
 paper-tags.html          |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/paper-tags-dropdown.html b/paper-tags-dropdown.html
index 3e3f4d1..b49b989 100644
--- a/paper-tags-dropdown.html
+++ b/paper-tags-dropdown.html
@@ -73,8 +73,8 @@
     </style>
     <!-- this div fulfills an a11y requirement for combobox, do not remove -->
     <div role="button"></div>
-    <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" opened="{{opened}}">
-      <div class="dropdown-trigger">
+    <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat, verticalOffset)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" opened="{{opened}}">
+      <div slot="dropdown-trigger">
         <paper-ripple></paper-ripple>
         <!-- paper-input has type="text" for a11y, do not remove -->
         <iron-a11y-keys id="a11y" target="[[keyTarget]]" keys="[[_computeKeys()]]" on-keys-pressed="_onAscii"></iron-a11y-keys>
@@ -82,7 +82,7 @@
           <iron-icon icon="paper-dropdown-menu:arrow-drop-down" suffix></iron-icon>
         </paper-tags-input>
       </div>
-      <paper-listbox class="dropdown-content" disabled="[[disabled]]" selected-values="{{valueArray}}" attr-for-selected="name" multi>
+      <paper-listbox slot="dropdown-content" disabled="[[disabled]]" selected-values="{{valueArray}}" attr-for-selected="name" multi>
         <div id="filterCt" hidden$="[[!searchString]]">
           <span>filter:  {{searchString}}</span>
         </div>
@@ -90,11 +90,11 @@
           <paper-item name="[[_computeItemValue(item, keyPath)]]">[[_computeItemLabel(item, labelPath)]]</paper-item>
         </template>
       </paper-listbox>
-      <content id="content" select=".dropdown-content"></content>
+      <content id="content" slot="dropdown-content"></content>
     </paper-menu-button>
   </template>
   <script>
-  class PaperTagsDropdown extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior,Polymer.IronFormElementBehavior, Polymer.IronButtonState,Polymer.IronControlState],Polymer.Element) {
+  class PaperTagsDropdown extends Polymer.mixinBehaviors([Polymer.IronValidatableBehavior,Polymer.IronFormElementBehavior, Polymer.IronButtonState,Polymer.IronControlState],Polymer.Element) {
 	static get is() {
 	    return 'paper-tags-dropdown'
 	}
diff --git a/paper-tags.html b/paper-tags.html
index 472e35b..277a838 100644
--- a/paper-tags.html
+++ b/paper-tags.html
@@ -127,6 +127,7 @@
 	}
 	
 	_removeTag(event) {
+	  var self = this;
 	  if (this.readonly) {
 	    return;
 	  }
@@ -137,7 +138,7 @@
 	  if (index > -1) {
 	    event.stopPropagation();
 	    var remove_func = function() {
-		      this.splice('items', index, 1);
+		      self.splice('items', index, 1);
 	    };
 	    this._paper_tag_remove_item = Polymer.Debouncer.debounce(
 	       this._paper_tag_remove_item, // initially undefined

From c893dc30e9b9428bd1bb628b5f9211a043e51303 Mon Sep 17 00:00:00 2001
From: Alex <ayzhang@umd.edu>
Date: Mon, 25 Jun 2018 15:21:00 -0400
Subject: [PATCH 20/20] Changed demo for Polymer2, needs dom-bind wrapped
 around template

---
 demo/index.html | 97 ++++++++++++++++++++++++++++---------------------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 08a1c44..e7cd8b8 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -41,28 +41,34 @@ <h4>paper-tags</h4>
     <h4>paper-tags-input</h4>
     <demo-snippet class="centered-demo">
       <template>
-        <template  is="dom-bind">
-          <paper-tags-input id="control" label="input label" show-counter="tags" items='["hello", "new"]' value="{{value}}" value-join="{{valueJoin}}" maxLength="10"></paper-tags-input>
-          <div>
-            <div>value: {{valueJoin}}</div>
-            <div>input value: {{value}}</div>
-          </div>
-        </template>
+        <dom-bind>
+          <template>
+            <paper-tags-input id="control" label="input label" show-counter="tags" items='["hello", "new"]' value="{{value}}" value-join="{{valueJoin}}" maxLength="10"></paper-tags-input>
+            <div>
+              <div>value: {{valueJoin}}</div>
+              <div>input value: {{value}}</div>
+            </div>
+          </template>
+        </dom-bind>
       </template>
     </demo-snippet>
   </div>
   <div class="vertical-section-container centered">
     <h4>paper-tags-dropdown</h4>
     <demo-snippet class="centered-demo">
-      <template>
-        <template  id="tagDropdown" is="dom-bind">
-          <style is="custom-style">
-          paper-tags-dropdown {
-
-          }
-          </style>
-          <paper-tags-dropdown id="control" items="{{items}}" label-path="label" noink label="label dropdown" value-object='{"5": "true"}'></paper-tags-dropdown>
-        </template>
+        <template>
+          <dom-bind>
+            <template  class="tagContainer">
+              <style is="custom-style">
+              paper-tags-dropdown {
+                --paper-menu: {
+                  width: 200px;
+                }
+              }
+              </style>
+              <paper-tags-dropdown id="control" items="{{items}}" label-path="label" noink label="label dropdown" value-object='{"5": "true"}'></paper-tags-dropdown>
+            </template>
+          </dom-bind>
       </template>
     </demo-snippet>
   </div>
@@ -70,27 +76,32 @@ <h4>paper-tags-dropdown</h4>
 	<h4>paper-tags-dropdown string array</h4>
 	<demo-snippet class="centered-demo">
 		<template>
-			<template id="stringArrayTagDropdown" is="dom-bind">
-				<style is="custom-style">
-					paper-tags-dropdown {
-					}
-				</style>
-				<paper-tags-dropdown
-					id="stringControl"
-					items='["Doe", "Rae", "Mee", "Faa", "So", "Laa", "Tee", "Daa"]'
-					label-path="label"
-					noink
-					label="label dropdown"
-					value-array='["Rae"]'>
-				</paper-tags-dropdown>
-			</template>
+      <dom-bind>
+  			<template class="tagContainer">
+  				<style is="custom-style">
+  					paper-tags-dropdown {
+              --paper-menu: {
+                width: 200px;
+              }
+  					}
+  				</style>
+  				<paper-tags-dropdown
+  					id="control"
+  					items='["Doe", "Rae", "Mee", "Faa", "So", "Laa", "Tee", "Daa"]'
+  					label-path="label"
+  					noink
+  					label="label dropdown"
+  					value-array='["Rae"]'>
+  				</paper-tags-dropdown>
+  			</template>
+      </dom-bind>
 		</template>
 	</demo-snippet>
   </div>
   <script>
   window.addEventListener('WebComponentsReady', function() {
 
-    tagDropdown = document.querySelector('#tagDropdown');
+    var paperDropdowns = document.querySelectorAll("paper-tags-dropdown");
     // app.listenSelect = function(e) {
     //   console.info('Listed', e);
     // }
@@ -112,18 +123,22 @@ <h4>paper-tags-dropdown string array</h4>
       desc: 'description 4',
       label: 'Bar'
     }];
-    setTimeout(function() {
-      tagDropdown.$.control.set('items', data)
-    }, 100);
 
-    tagDropdown.$.control.addEventListener('tag-removed', function(e, d) {
-      console.log("tag-removed", e.detail);
-    }.bind(this));
+    paperDropdowns.forEach(function(item) {
+      setTimeout(function() {
+        item.set('items', data)
+      }, 100);
+
+      item.addEventListener('tag-removed', function(e, d) {
+        console.log("tag-removed", e.detail);
+      }.bind(this));
+
+      item.addEventListener('tag-added', function(e, d) {
+        console.log("tag-added", e.detail);
+      }.bind(this));
 
-    tagDropdown.$.control.addEventListener('tag-added', function(e, d) {
-      console.log("tag-added", e.detail);
-    }.bind(this));
-  });
+      });
+    });
   </script>
 </body>