From 8e81d029d2ea2bbe6beb727bc646b723053d21c4 Mon Sep 17 00:00:00 2001
From: Puranjay Jain <puru1joy@gmail.com>
Date: Tue, 27 Jun 2017 19:28:07 +0530
Subject: [PATCH] fixed what gitkraken failed to fix

---
 CHANGELOG.md             |   82 +-
 LICENSE                  |   42 +-
 README.md                |  279 ++++--
 bower.json               |  122 ++-
 demo/index.html          |   95 +-
 demo/messages.json       |   34 +-
 demo/x-demo.html         |  330 +++----
 emojione-badge.html      |   92 +-
 emojione-chip-input.html |  224 ++---
 emojione-chip.html       |  302 +++---
 emojione-emoji.html      |   90 +-
 emojione-icons.html      |   98 +-
 emojione-selector.html   | 1960 +++++++++++++++++++-------------------
 fuse.min.js              |   16 +-
 index.html               |   43 +-
 lodash.custom.min.js     |   44 +
 polymer.json             |    7 +
 17 files changed, 2045 insertions(+), 1815 deletions(-)
 create mode 100644 lodash.custom.min.js
 create mode 100644 polymer.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9fb1025..e148a6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,42 +1,42 @@
-# v1.0.0
-
-* changed the recent emoji logic to only include an array with `:shortname:`
-
-* added `emoji-changed` event along with emoji value for event-based applications 
-
-# v1.0.1
-
-- Fixed merging issues
-- 
-- fixed hybrid `<paper-chip>`
-
-# v2.0.0
-
-* only supports pure v2.0 elements
-
-* change the title to the version string
-
-* adds breaking changes like emojione version to v3
-
-* removes fuse js external dependency instead adds the script since fuse js is no longer on bower :sobs:
-
-* dropped lodash dependency
-
-* converted to es6 component, polyfills maybe required to support older browsers and adapter for es5 converted components see 
-  [https://www.polymer-project.org/2.0/docs/es6](https://www.polymer-project.org/2.0/docs/es6)
-
-* performance improvement using event delegation in emoji list tap even
-
-* dropped `<iron-list>` in favor of `<dom-repeat>`
-
-* changed the recent emoji logic to only include an array with `code_points.base` also the `primary key` in **emoji.json** 
-
-* added `emoji-changed` event along with emoji value for event-based applications
-
-* added arrow key navigation in emoji list
-
-* dropped `<paper-autocomplete-input-chips>` in favor of `<paper-chip>`
-
-# v2.0.1
-
+# v1.0.0
+
+* changed the recent emoji logic to only include an array with `:shortname:`
+
+* added `emoji-changed` event along with emoji value for event-based applications 
+
+# v1.0.1
+
+- Fixed merging issues
+- 
+- fixed hybrid `<paper-chip>`
+
+# v2.0.0
+
+* only supports pure v2.0 elements
+
+* change the title to the version string
+
+* adds breaking changes like emojione version to v3
+
+* removes fuse js external dependency instead adds the script since fuse js is no longer on bower :sobs:
+
+* dropped lodash dependency
+
+* converted to es6 component, polyfills maybe required to support older browsers and adapter for es5 converted components see 
+  [https://www.polymer-project.org/2.0/docs/es6](https://www.polymer-project.org/2.0/docs/es6)
+
+* performance improvement using event delegation in emoji list tap even
+
+* dropped `<iron-list>` in favor of `<dom-repeat>`
+
+* changed the recent emoji logic to only include an array with `code_points.base` also the `primary key` in **emoji.json** 
+
+* added `emoji-changed` event along with emoji value for event-based applications
+
+* added arrow key navigation in emoji list
+
+* dropped `<paper-autocomplete-input-chips>` in favor of `<paper-chip>`
+
+# v2.0.1
+
 * Minor bug fixes
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
index d84f778..c4209cd 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2017 Puranjay Jain
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2017 Puranjay Jain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index b2f0e90..7584ff9 100644
--- a/README.md
+++ b/README.md
@@ -1,68 +1,211 @@
-# \<emojione-selector\> v2
-
-A polymer element that works best as a emoji picker and is powered by the [emojione](https://www.emojione.com/) library
-
-## demo
-
-https://puranjayjain.github.io/emojione-selector/
-
-### Key Features:
-
-- v1.x supports hybrid elements, v2.x supports es6 pure components
-- Supports unicode diversity update
-- Advanced search with multi keyword search
-- Features a real-life demo
-- Mobile first approach to a picker
-- Independent of any containers like a dialog or menu, user is free to use it in a container of their choosing
-- Built with a11y support
-
-### Keyboard shortcuts:
-
-- you can use `ctrl + (0-9)` to move through the various categories
-- you can move thought the emoji list using `tab` (forwards) or `shift + tab` (go back)
-- you can also use arrow keys to navigate through the emoji list
-
-## Install the Polymer-CLI
-
-First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
-
-## Viewing the Element
-
-```
-$ polymer serve
-```
-
-## Running Tests
-
-```
-$ polymer test
-```
-
-The application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
-
-## Live Demo
-
-Example:
-
-<!--
-```
-<custom-element-demo>
-  <template>
-    <script src="../webcomponentsjs/webcomponents-loader.js"></script>
-
-    <link rel="import" href="../iron-demo-helpers/demo-pages-shared-styles.html">
-    <link rel="import" href="../iron-demo-helpers/demo-snippet.html">
-
-    <link rel="import" href="emojione-selector.html">
-  </template>
-</custom-element-demo>
-```
--->
-```html
-  <emojione-selector opened="true"></emojione-selector>
-```
-
-## TODO 
-
-- Loads of Tests
-- v1.x with hybrid support
\ No newline at end of file
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/paper-button)
+
+## &lt;emojione-selector&gt;
+
+A polymer element that works best as a emoji picker and is powered by the emojione library
+
+## demo
+
+https://puranjayjain.github.io/emojione-selector/
+
+#### Key Features:
+* Supports unicode diversity update
+* Advanced search with multi keyword search
+* Features a real-life demo
+* Mobile first approach to a picker
+* Independent of any containers like a dialog or menu, user is free to use it in a container of their choosing  
+
+Example:
+
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../polymer/polymer.html">
+    <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+    <link rel="import" href="../iron-ajax/iron-ajax.html">
+    <link rel="import" href="../iron-icon/iron-icon.html">
+    <link rel="import" href="../iron-icons/iron-icons.html">
+    <link rel="import" href="../iron-icons/social-icons.html">
+    <link rel="import" href="../iron-list/iron-list.html">
+    <link rel="import" href="../iron-collapse/iron-collapse.html">
+    <link rel="import" href="../bower_components/paper-styles/color.html">
+    <link rel="import" href="../paper-icon-button/paper-icon-button.html">
+    <link rel="import" href="../paper-button/paper-button.html">
+    <link rel="import" href="../paper-input/paper-input.html">
+    <link rel="import" href="../paper-item/paper-icon-item.html">
+
+    <link rel="import" href="emojione-selector.html">
+    <template>
+      <style is="custom-style">
+        :host {
+          @apply(--layout-vertical);
+          @apply(--layout-fullbleed);
+        }
+
+        iron-list {
+          @apply(--layout-flex);
+          padding: 0 8px;
+          background-color: var(--paper-grey-100);
+        }
+
+        iron-list .message {
+          display: inline-block;
+          padding: 8px;
+          border-radius: 3px;
+          background-color: var(--paper-grey-300);
+          margin-top: 8px;
+        }
+
+        iron-list .message.right {
+          float: right;
+        }
+
+        iron-list .message img {
+          vertical-align: middle;
+          height: 24px;
+          width: 24px;
+        }
+
+        .demo-bottom {
+          @apply(--layout-horizontal);
+          @apply(--layout-end);
+          padding: 8px;
+        }
+
+        paper-input {
+          @apply(--layout-flex);
+          --paper-input-container-focus-color: var(--paper-blue-500);
+          margin: 0 8px;
+        }
+
+        paper-button {
+          background-color: var(--paper-blue-500);
+          color: #fff;
+          margin-bottom: 8px;
+        }
+
+        emojione-selector {
+          --emojione-selector-iron-list: {
+            background-color: var(--paper-grey-50);
+          }
+          --paper-input-container-focus-color: var(--paper-blue-500);
+          --paper-tabs-selection-bar-color: var(--paper-blue-500);
+        }
+
+      </style>
+      <iron-ajax url="messages.json" last-response="{{messages}}" auto></iron-ajax>
+
+      <iron-list id="messages" items="[[messages]]" as="item">
+        <template>
+          <div>
+            <div class$="message [[item.side]]">
+              <span inner-h-t-m-l="{{getMessage(item.message)}}"></span>
+            </div>
+          </div>
+        </template>
+      </iron-list>
+      <iron-collapse opened="{{opened}}">
+        <emojione-selector opened="{{opened}}" emoji="{{emoji}}"></emojione-selector>
+      </iron-collapse>
+      <div class="demo-bottom">
+        <paper-icon-button id="emojiButton" icon="{{computeIfChatIcon(opened)}}" src="{{computeIfChatImg(opened)}}" title="emoji"></paper-icon-button>
+        <paper-input label="Type something" value="{{message}}" no-label-float></paper-input>
+        <paper-button id="send" raised>Send</paper-button>
+      </div>
+    </template>
+    <script>
+      Polymer({
+        is: 'x-demo',
+
+        properties: {
+          opened: {
+            type: Object
+          },
+          message: {
+            type: String
+          },
+          emoji: {
+            type: String,
+            observer: 'onEmojiChange'
+          }
+        },
+
+        listeners: {
+          'emojiButton.tap': 'onEmojiButtonTap',
+          'send.tap': 'onSendButtonTap'
+        },
+
+        ready: function () {
+          // HACK force re-render of iron list
+          this.async(function () {
+            this.$.messages.notifyResize();
+          }, 600);
+        },
+
+        computeIfChatIcon: function (opened) {
+          if (opened) {
+            return '';
+          } else {
+            return 'social:mood';
+          }
+        },
+
+        computeIfChatImg: function (opened) {
+          if (opened) {
+            return 'https://cdn.jsdelivr.net/emojione/assets/png/263a.png?v=2.2.7';
+          } else {
+            return '';
+          }
+        },
+
+        getMessage: function (message) {
+          return emojione.toImage(message);
+        },
+
+        onEmojiChange: function () {
+          if (this.emoji) {
+            this.message = this.message + this.emoji;
+          }
+        },
+
+        onEmojiButtonTap: function () {
+          this.opened = !this.opened;
+        },
+
+        onSendButtonTap: function () {
+          if (this.message) {
+            this.push('messages', {
+              'side': 'right',
+              'message': this.message
+            });
+            this.message = '';
+          }
+        }
+      });
+    </script>
+</custom-element-demo>
+```
+-->
+```html
+<iron-ajax url="messages.json" last-response="{{messages}}" auto></iron-ajax>
+
+<iron-list id="messages" items="[[messages]]" as="item">
+  <template>
+    <div>
+      <div class$="message [[item.side]]">
+        <span inner-h-t-m-l="{{getMessage(item.message)}}"></span>
+      </div>
+    </div>
+  </template>
+</iron-list>
+<iron-collapse opened="{{opened}}">
+  <emojione-selector opened="{{opened}}" emoji="{{emoji}}"></emojione-selector>
+</iron-collapse>
+<div class="demo-bottom">
+  <paper-icon-button id="emojiButton" icon="{{computeIfChatIcon(opened)}}" src="{{computeIfChatImg(opened)}}" title="emoji"></paper-icon-button>
+  <paper-input label="Type something" value="{{message}}" no-label-float></paper-input>
+  <paper-button id="send" raised>Send</paper-button>
+</div>
+```
diff --git a/bower.json b/bower.json
index 48cb235..b4e7b36 100644
--- a/bower.json
+++ b/bower.json
@@ -1,68 +1,54 @@
-{
-  "name": "emojione-selector",
-  "description": "A polymer element that works best as a emoji picker and is powered by the emojione library",
-  "main": "emojione-selector.html",
-  "homepage": "https://github.com/puranjayjain/emojione-selector",
-  "authors": [
-    "Puranjay Jain <me+github@puranjayjain.com>"
-  ],
-  "keywords": [
-    "web-components",
-    "polymer",
-    "emoji",
-    "picker",
-    "emojione"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests",
-    "yarn.lock"
-  ],
-  "dependencies": {
-    "polymer": "Polymer/polymer#^2.0.0",
-    "iron-image": "PolymerElements/iron-image#^2.1.1",
-    "iron-ajax": "PolymerElements/iron-ajax#^2.0.2",
-    "iron-list": "PolymerElements/iron-list#^2.0.0",
-    "iron-localstorage": "PolymerElements/iron-localstorage#^2.0.0",
-    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
-    "paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
-    "paper-material": "PolymerElements/paper-material#^2.0.0",
-    "paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
-    "iron-selector": "PolymerElements/iron-selector#^2.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
-    "emojione": "ranks/emojione#^3.0.3",
-    "neon-animation": "PolymerElements/neon-animation#^2.0.0",
-    "web-animations-js": "web-animations/web-animations-js#^2.2.5",
-    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
-    "iron-collapse": "PolymerElements/iron-collapse#^2.0.0",
-    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^2.0.0",
-    "paper-chip": "ThomasCybulski/paper-chip#^2.0.3",
-    "iron-meta": "PolymerElements/iron-meta#^2.0.0",
-    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^2.0.0",
-    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0.0",
-    "lodash": "lodash/lodash#^4.17.4"
-  },
-  "devDependencies": {
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
-    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
-  },
-  "resolutions": {
-    "polymer": "^2.0.0",
-    "webcomponentsjs": "^v1.0.0",
-    "lodash": "^4.17.4",
-    "iron-flex-layout": "^2.0.0",
-    "iron-selector": "^2.0.0",
-    "paper-icon-button": "^2.0.0",
-    "paper-material": "^2.0.0",
-    "paper-styles": "^2.0.0",
-    "paper-ripple": "^2.0.0",
-    "iron-meta": "^2.0.0",
-    "iron-a11y-keys-behavior": "^2.0.0"
-  }
-}
+{
+  "name": "emojione-selector",
+  "homepage": "https://github.com/puranjayjain/emojione-selector",
+  "authors": [
+    "Puranjay Jain <me+github@puranjayjain.com>"
+  ],
+  "description": "A polymer element that works best as a emoji picker and is powered by the emojione library",
+  "main": "emojione-selector.html",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "emoji",
+    "picker",
+    "emojione"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "yarn.lock"
+  ],
+  "dependencies": {
+    "emojione": "ranks/emojione#^3.0.3",
+    "polymer": "Polymer/polymer#^1.9.1 || ^2.0.0",
+    "iron-image": "PolymerElements/iron-image#^2.1.1",
+    "iron-ajax": "PolymerElements/iron-ajax#^2.0.2",
+    "iron-list": "PolymerElements/iron-list#^2.0.0",
+    "iron-localstorage": "PolymerElements/iron-localstorage#^2.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
+    "paper-material": "PolymerElements/paper-material#^2.0.0",
+    "paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
+    "iron-selector": "PolymerElements/iron-selector#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
+    "neon-animation": "PolymerElements/neon-animation#^2.0.0",
+    "web-animations-js": "web-animations/web-animations-js#^2.2.5",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-collapse": "PolymerElements/iron-collapse#^2.0.0",
+    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^2.0.0",
+    "iron-meta": "PolymerElements/iron-meta#^2.0.0",
+    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^2.0.0",
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0.0",
+    "lodash": "lodash/lodash#^4.17.4"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
index 96d05ae..7266993 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,30 +1,67 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-
-    <title>emojione-selector demo</title>
-
-    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
-
-    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
-    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-    
-    <link rel="import" href="../emojione-selector.html">
-
-    <custom-style>
-      <style is="custom-style" include="demo-pages-shared-styles"></style>
-    </custom-style>
-  </head>
-  <body>
-    <div class="vertical-section-container centered">
-      <h3>Basic emojione-selector demo</h3>
-      <demo-snippet>
-        <template>
-          <emojione-selector opened="true"></emojione-selector>
-        </template>
-      </demo-snippet>
-    </div>
-  </body>
+<!doctype html>
+<!--
+@license
+Copyright (c) 2017 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
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>emojione-selector demo</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      body {
+        margin: 0;
+        -webkit-font-smoothing: antialiased;
+      }
+
+    </style>
+  </head>
+  <body>
+    <x-demo></x-demo>
+  </body>
+  <script type="text/javascript">
+    /**
+    * https://aerotwist.com/blog/polymer-for-the-performance-obsessed/
+    * Conditionally loads webcomponents polyfill if needed.
+    * Credit: Glen Maddern (geelen on GitHub)
+    */
+    var webComponentsSupported = ('registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template'));
+
+    if (!webComponentsSupported) {
+      var wcPoly = document.createElement('script');
+      wcPoly.src = '../../webcomponentsjs/webcomponents-lite.min.js';
+      wcPoly.onload = lazyLoadPolymerAndElements;
+      document.head.appendChild(wcPoly);
+    } else {
+      lazyLoadPolymerAndElements();
+    }
+
+    function lazyLoadPolymerAndElements() {
+      // Let's use Shadow DOM if we have it, because awesome.
+      window.Polymer = window.Polymer || {};
+      // Setup Polymer options
+      window.Polymer = {
+        dom: 'shadow',
+        lazyRegister: true
+      };
+
+      var elements = ['./x-demo.html'];
+
+      elements.forEach(function (elementURL) {
+
+        var elImport = document.createElement('link');
+        elImport.rel = 'import';
+        elImport.href = elementURL;
+
+        document.head.appendChild(elImport);
+      });
+    }
+  </script>
 </html>
\ No newline at end of file
diff --git a/demo/messages.json b/demo/messages.json
index 8fbfced..29f397e 100644
--- a/demo/messages.json
+++ b/demo/messages.json
@@ -1,18 +1,18 @@
-[
-  {
-    "side": "left",
-    "message": "yo"
-  },
-  {
-    "side": "left",
-    "message": "was up?"
-  },
-  {
-    "side": "right",
-    "message": "yo man"
-  },
-  {
-    "side": "left",
-    "message": "so we meeting today :grin:"
-  }
+[
+  {
+    "side": "left",
+    "message": "yo"
+  },
+  {
+    "side": "left",
+    "message": "was up?"
+  },
+  {
+    "side": "right",
+    "message": "yo man"
+  },
+  {
+    "side": "left",
+    "message": "so we meeting today :grin:"
+  }
 ]
\ No newline at end of file
diff --git a/demo/x-demo.html b/demo/x-demo.html
index c52af06..885de5b 100644
--- a/demo/x-demo.html
+++ b/demo/x-demo.html
@@ -1,166 +1,166 @@
-<link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../../iron-ajax/iron-ajax.html">
-<link rel="import" href="../../../iron-icon/iron-icon.html">
-<link rel="import" href="../../../iron-icons/iron-icons.html">
-<link rel="import" href="../../../iron-icons/social-icons.html">
-<link rel="import" href="../../../iron-list/iron-list.html">
-<link rel="import" href="../../../iron-collapse/iron-collapse.html">
-<link rel="import" href="../../../bower_components/paper-styles/color.html">
-<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../../paper-button/paper-button.html">
-<link rel="import" href="../../../paper-input/paper-input.html">
-<link rel="import" href="../../../paper-item/paper-icon-item.html">
-
-<link rel="import" href="../../emojione-selector.html">
-
-<dom-module id="x-demo">
-  <template>
-    <style is="custom-style">
-      :host {
-        @apply(--layout-vertical);
-        @apply(--layout-fullbleed);
-      }
-
-      iron-list {
-        @apply(--layout-flex);
-        padding: 0 8px;
-        background-color: var(--paper-grey-100);
-      }
-
-      iron-list .message {
-        display: inline-block;
-        padding: 8px;
-        border-radius: 3px;
-        background-color: var(--paper-grey-300);
-        margin-top: 8px;
-      }
-
-      iron-list .message.right {
-        float: right;
-      }
-
-      iron-list .message img {
-        vertical-align: middle;
-        height: 24px;
-        width: 24px;
-      }
-
-      .demo-bottom {
-        @apply(--layout-horizontal);
-        @apply(--layout-end);
-        padding: 8px;
-      }
-
-      paper-input {
-        @apply(--layout-flex);
-        --paper-input-container-focus-color: var(--paper-blue-500);
-        margin: 0 8px;
-      }
-
-      paper-button {
-        background-color: var(--paper-blue-500);
-        color: #fff;
-        margin-bottom: 8px;
-      }
-
-      emojione-selector {
-        --emojione-selector-iron-list: {
-          background-color: var(--paper-grey-50);
-        }
-        --paper-input-container-focus-color: var(--paper-blue-500);
-        --paper-tabs-selection-bar-color: var(--paper-blue-500);
-      }
-
-    </style>
-    <iron-ajax url="messages.json" last-response="{{messages}}" auto></iron-ajax>
-
-    <iron-list id="messages" items="[[messages]]" as="item">
-      <template>
-        <div>
-          <div class$="message [[item.side]]">
-            <span inner-h-t-m-l="{{getMessage(item.message)}}"></span>
-          </div>
-        </div>
-      </template>
-    </iron-list>
-    <iron-collapse opened="{{opened}}">
-      <emojione-selector opened="{{opened}}" emoji="{{emoji}}"></emojione-selector>
-    </iron-collapse>
-    <div class="demo-bottom">
-      <paper-icon-button id="emojiButton" icon="{{computeIfChatIcon(opened)}}" src="{{computeIfChatImg(opened)}}" title="emoji"></paper-icon-button>
-      <paper-input label="Type something" value="{{message}}" no-label-float></paper-input>
-      <paper-button id="send" raised>Send</paper-button>
-    </div>
-  </template>
-  <script>
-    Polymer({
-      is: 'x-demo',
-
-      properties: {
-        opened: {
-          type: Object
-        },
-        message: {
-          type: String
-        },
-        emoji: {
-          type: String,
-          observer: 'onEmojiChange'
-        }
-      },
-
-      listeners: {
-        'emojiButton.tap': 'onEmojiButtonTap',
-        'send.tap': 'onSendButtonTap'
-      },
-
-      ready: function () {
-        // HACK force re-render of iron list
-        this.async(function () {
-          this.$.messages.notifyResize();
-        }, 600);
-      },
-
-      computeIfChatIcon: function (opened) {
-        if (opened) {
-          return '';
-        } else {
-          return 'social:mood';
-        }
-      },
-
-      computeIfChatImg: function (opened) {
-        if (opened) {
-          return 'https://cdn.jsdelivr.net/emojione/assets/png/263a.png?v=2.2.7';
-        } else {
-          return '';
-        }
-      },
-
-      getMessage: function (message) {
-        return emojione.toImage(message);
-      },
-
-      onEmojiChange: function () {
-        if (this.emoji) {
-          this.message = this.message + this.emoji;
-        }
-      },
-
-      onEmojiButtonTap: function () {
-        this.opened = !this.opened;
-      },
-
-      onSendButtonTap: function () {
-        if (this.message) {
-          this.push('messages', {
-            'side': 'right',
-            'message': this.message
-          });
-          this.message = '';
-        }
-      }
-    });
-  </script>
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../iron-ajax/iron-ajax.html">
+<link rel="import" href="../../../iron-icon/iron-icon.html">
+<link rel="import" href="../../../iron-icons/iron-icons.html">
+<link rel="import" href="../../../iron-icons/social-icons.html">
+<link rel="import" href="../../../iron-list/iron-list.html">
+<link rel="import" href="../../../iron-collapse/iron-collapse.html">
+<link rel="import" href="../../../bower_components/paper-styles/color.html">
+<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../paper-button/paper-button.html">
+<link rel="import" href="../../../paper-input/paper-input.html">
+<link rel="import" href="../../../paper-item/paper-icon-item.html">
+
+<link rel="import" href="../../emojione-selector.html">
+
+<dom-module id="x-demo">
+  <template>
+    <style is="custom-style">
+      :host {
+        @apply(--layout-vertical);
+        @apply(--layout-fullbleed);
+      }
+
+      iron-list {
+        @apply(--layout-flex);
+        padding: 0 8px;
+        background-color: var(--paper-grey-100);
+      }
+
+      iron-list .message {
+        display: inline-block;
+        padding: 8px;
+        border-radius: 3px;
+        background-color: var(--paper-grey-300);
+        margin-top: 8px;
+      }
+
+      iron-list .message.right {
+        float: right;
+      }
+
+      iron-list .message img {
+        vertical-align: middle;
+        height: 24px;
+        width: 24px;
+      }
+
+      .demo-bottom {
+        @apply(--layout-horizontal);
+        @apply(--layout-end);
+        padding: 8px;
+      }
+
+      paper-input {
+        @apply(--layout-flex);
+        --paper-input-container-focus-color: var(--paper-blue-500);
+        margin: 0 8px;
+      }
+
+      paper-button {
+        background-color: var(--paper-blue-500);
+        color: #fff;
+        margin-bottom: 8px;
+      }
+
+      emojione-selector {
+        --emojione-selector-iron-list: {
+          background-color: var(--paper-grey-50);
+        }
+        --paper-input-container-focus-color: var(--paper-blue-500);
+        --paper-tabs-selection-bar-color: var(--paper-blue-500);
+      }
+
+    </style>
+    <iron-ajax url="messages.json" last-response="{{messages}}" auto></iron-ajax>
+
+    <iron-list id="messages" items="[[messages]]" as="item">
+      <template>
+        <div>
+          <div class$="message [[item.side]]">
+            <span inner-h-t-m-l="{{getMessage(item.message)}}"></span>
+          </div>
+        </div>
+      </template>
+    </iron-list>
+    <iron-collapse opened="{{opened}}">
+      <emojione-selector opened="{{opened}}" emoji="{{emoji}}"></emojione-selector>
+    </iron-collapse>
+    <div class="demo-bottom">
+      <paper-icon-button id="emojiButton" icon="{{computeIfChatIcon(opened)}}" src="{{computeIfChatImg(opened)}}" title="emoji"></paper-icon-button>
+      <paper-input label="Type something" value="{{message}}" no-label-float></paper-input>
+      <paper-button id="send" raised>Send</paper-button>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-demo',
+
+      properties: {
+        opened: {
+          type: Object
+        },
+        message: {
+          type: String
+        },
+        emoji: {
+          type: String,
+          observer: 'onEmojiChange'
+        }
+      },
+
+      listeners: {
+        'emojiButton.tap': 'onEmojiButtonTap',
+        'send.tap': 'onSendButtonTap'
+      },
+
+      ready: function () {
+        // HACK force re-render of iron list
+        this.async(function () {
+          this.$.messages.notifyResize();
+        }, 600);
+      },
+
+      computeIfChatIcon: function (opened) {
+        if (opened) {
+          return '';
+        } else {
+          return 'social:mood';
+        }
+      },
+
+      computeIfChatImg: function (opened) {
+        if (opened) {
+          return 'https://cdn.jsdelivr.net/emojione/assets/png/263a.png?v=2.2.7';
+        } else {
+          return '';
+        }
+      },
+
+      getMessage: function (message) {
+        return emojione.toImage(message);
+      },
+
+      onEmojiChange: function () {
+        if (this.emoji) {
+          this.message = this.message + this.emoji;
+        }
+      },
+
+      onEmojiButtonTap: function () {
+        this.opened = !this.opened;
+      },
+
+      onSendButtonTap: function () {
+        if (this.message) {
+          this.push('messages', {
+            'side': 'right',
+            'message': this.message
+          });
+          this.message = '';
+        }
+      }
+    });
+  </script>
 </dom-module>
\ No newline at end of file
diff --git a/emojione-badge.html b/emojione-badge.html
index 46166f2..41b1aa8 100644
--- a/emojione-badge.html
+++ b/emojione-badge.html
@@ -1,53 +1,41 @@
-<link rel="import" href="../iron-fit-behavior/iron-fit-behavior.html">
-
-<dom-module id="emojione-badge">
-  <template strip-whitespace>
-    <custom-style>
-      <style>
-        :host {
-          position: absolute;
-          pointer-events: none;
-          padding: 8px;
-          border-radius: 4px;
-          background-color: rgba(0, 0, 0, .8);
-          color: #fff;
-          text-align: center;
-          z-index: 1;
-        }
-
-      </style>
-    </custom-style>
-
-    <slot></slot>
-  </template>
-  <script>
-    class EmojioneBadge extends Polymer.Element {
-
-      static get is() {
-        return 'emojione-badge';
-      }
-
-      static get properties() {
-        return {
-          position: {
-            type: Object
-          }
-        };
-      }
-
-      static get observers() {
-        return ['onPositionChange(position)'];
-      }
-
-      onPositionChange(position) {
-        if (position) {
-          for (var i in position) {
-            this.style[i] = position[i] + 'px';
-          }
-        }
-      }
-    }
-
-    window.customElements.define(EmojioneBadge.is, EmojioneBadge);
-  </script>
+<dom-module id="emojione-badge">
+  <template strip-whitespace>
+    <style is="custom-style">
+      :host {
+        position: absolute;
+        pointer-events: none;
+        padding: 8px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, .8);
+        color: #fff;
+        text-align: center;
+        z-index: 1;
+      }
+
+    </style>
+
+    <slot></slot>
+  </template>
+  <script>
+    Polymer({
+
+      is: 'emojione-badge',
+
+      properties: {
+        position: {
+          type: Object
+        }
+      },
+      
+      observers: ['onPositionChange(position)'],
+
+      onPositionChange: function (position) {
+        if (position) {
+          for (var i in position) {
+            this.style[i] = position[i] + 'px';
+          }
+        }
+      }
+    });
+  </script>
 </dom-module>
\ No newline at end of file
diff --git a/emojione-chip-input.html b/emojione-chip-input.html
index cee455a..44783d5 100644
--- a/emojione-chip-input.html
+++ b/emojione-chip-input.html
@@ -1,113 +1,113 @@
-<link rel="import" href="../paper-input/paper-input.html">
-
-<link rel="import" href="emojione-chip.html">
-
-<!--
-
-Material design: [Chips](https://material.io/guidelines/components/chips.html)
-
-`emojione-chip-input`
-Paper-chip's represent complex entities in small blocks, such as a contact.
-
-@element paper-chip-input
-@demo demo/index.html
--->
-
-<dom-module id="emojione-chip-input">
-  <template>
-    <style></style>
-
-    <paper-input value="{{_value}}" label="[[label]]" on-keydown="_keydown" no-label-float="[[noLabelFloat]]">
-      <slot id="slot" name="input" slot="prefix"></slot>
-      <div id="slot2" name="input2" slot="prefix">
-        <template is="dom-repeat" items="[[items]]" as="item">
-          [[item.name]]
-          <emojione-chip id="paper-chip-[[item]]-[[index]]" label="[[item]]" closable$="[[closable]]" on-chip-removed="_removeChip"></emojione-chip>
-        </template>
-      </div>
-    </paper-input>
-
-  </template>
-
-  <script>
-
-    Polymer({
-      is: 'emojione-chip-input',
-
-      properties: {
-        noLabelFloat: {
-          type: Boolean
-        },
-        items: {
-          type: Array,
-          value: []
-        },
-        closable: {
-          type: Boolean,
-          value: false
-        },
-        label: {
-          type: String,
-          value: ''
-        },
-        _value: {
-          type: String
-        }
-      },
-
-      _keydown: function (event) {
-        var keyCode_backspace = '8';
-        var keyCode_enter = '13';
-        if (event.keyCode == keyCode_backspace && this.items.length != 0 && (this._value == '' || this._value == undefined)) {
-          this._removeLastItem();
-        } else if (event.keyCode == keyCode_backspace && Polymer.dom(this.$.slot).getEffectiveChildNodes().length > 0 && (this._value == '' || this._value == undefined)) {
-          var distributedNodes = Polymer.dom(this.$.slot).getDistributedNodes()
-          var lastPaperChipIndex = _getLastPaperChipPosition(Polymer.dom(this).childNodes);
-          this._throwChipRemovedEvent(Polymer.dom(this).childNodes[lastPaperChipIndex].label);
-          Polymer.dom(this).removeChild(Polymer.dom(this).childNodes[lastPaperChipIndex]);
-        }
-
-        if (event.keyCode == keyCode_enter && this._value != '' && this._value != undefined) {
-          this._saveTag(this._value);
-          this._value = '';
-        }
-
-        Polymer.dom.flush();
-      },
-
-      _saveTag: function (name) {
-        if (this.items.indexOf(name) == -1) {
-          this.push('items', name);
-        }
-      },
-
-      _removeChip: function (event) {
-        var index = this.items.indexOf(event.detail.chipLabel);
-        if (index != -1) {
-          this.splice('items', index, 1);
-        }
-      },
-
-      _removeLastItem: function () {
-        if (this.items.length != 0) {
-          this._throwChipRemovedEvent(this.items[this.items.length - 1]);
-          this.splice('items', -1, 1);
-        }
-      },
-
-      _getLastPaperChipPosition: function (childNodes) {
-        var lastPaperChipIndex = 0;
-        for (var i = 0; i < childNodes.length; i++) {
-          if (childNodes[i].tagName == 'EMOJIONE-CHIP') {
-            lastPaperChipIndex = i;
-          }
-        }
-        return lastPaperChipIndex;
-      },
-
-      _throwChipRemovedEvent: function (chipLabel) {
-        this.fire('chip-removed', {'chipLabel': chipLabel});
-      }
-    });
-  </script>
+<link rel="import" href="../paper-input/paper-input.html">
+
+<link rel="import" href="emojione-chip.html">
+
+<!--
+
+Material design: [Chips](https://material.io/guidelines/components/chips.html)
+
+`emojione-chip-input`
+Paper-chip's represent complex entities in small blocks, such as a contact.
+
+@element paper-chip-input
+@demo demo/index.html
+-->
+
+<dom-module id="emojione-chip-input">
+  <template>
+    <style></style>
+
+    <paper-input value="{{_value}}" label="[[label]]" on-keydown="_keydown" no-label-float="[[noLabelFloat]]">
+      <slot id="slot" name="input" slot="prefix"></slot>
+      <div id="slot2" name="input2" slot="prefix">
+        <template is="dom-repeat" items="[[items]]" as="item">
+          [[item.name]]
+          <emojione-chip id="paper-chip-[[item]]-[[index]]" label="[[item]]" closable$="[[closable]]" on-chip-removed="_removeChip"></emojione-chip>
+        </template>
+      </div>
+    </paper-input>
+
+  </template>
+
+  <script>
+
+    Polymer({
+      is: 'emojione-chip-input',
+
+      properties: {
+        noLabelFloat: {
+          type: Boolean
+        },
+        items: {
+          type: Array,
+          value: []
+        },
+        closable: {
+          type: Boolean,
+          value: false
+        },
+        label: {
+          type: String,
+          value: ''
+        },
+        _value: {
+          type: String
+        }
+      },
+
+      _keydown: function (event) {
+        var keyCode_backspace = '8';
+        var keyCode_enter = '13';
+        if (event.keyCode == keyCode_backspace && this.items.length != 0 && (this._value == '' || this._value == undefined)) {
+          this._removeLastItem();
+        } else if (event.keyCode == keyCode_backspace && Polymer.dom(this.$.slot).getEffectiveChildNodes().length > 0 && (this._value == '' || this._value == undefined)) {
+          var distributedNodes = Polymer.dom(this.$.slot).getDistributedNodes()
+          var lastPaperChipIndex = _getLastPaperChipPosition(Polymer.dom(this).childNodes);
+          this._throwChipRemovedEvent(Polymer.dom(this).childNodes[lastPaperChipIndex].label);
+          Polymer.dom(this).removeChild(Polymer.dom(this).childNodes[lastPaperChipIndex]);
+        }
+
+        if (event.keyCode == keyCode_enter && this._value != '' && this._value != undefined) {
+          this._saveTag(this._value);
+          this._value = '';
+        }
+
+        Polymer.dom.flush();
+      },
+
+      _saveTag: function (name) {
+        if (this.items.indexOf(name) == -1) {
+          this.push('items', name);
+        }
+      },
+
+      _removeChip: function (event) {
+        var index = this.items.indexOf(event.detail.chipLabel);
+        if (index != -1) {
+          this.splice('items', index, 1);
+        }
+      },
+
+      _removeLastItem: function () {
+        if (this.items.length != 0) {
+          this._throwChipRemovedEvent(this.items[this.items.length - 1]);
+          this.splice('items', -1, 1);
+        }
+      },
+
+      _getLastPaperChipPosition: function (childNodes) {
+        var lastPaperChipIndex = 0;
+        for (var i = 0; i < childNodes.length; i++) {
+          if (childNodes[i].tagName == 'EMOJIONE-CHIP') {
+            lastPaperChipIndex = i;
+          }
+        }
+        return lastPaperChipIndex;
+      },
+
+      _throwChipRemovedEvent: function (chipLabel) {
+        this.fire('chip-removed', {'chipLabel': chipLabel});
+      }
+    });
+  </script>
 </dom-module>
\ No newline at end of file
diff --git a/emojione-chip.html b/emojione-chip.html
index 7f21426..761150c 100644
--- a/emojione-chip.html
+++ b/emojione-chip.html
@@ -1,152 +1,152 @@
-<link rel="import" href="../paper-styles/paper-styles.html">
-
-<!--
-
-Material design: [Chips](https://material.io/guidelines/components/chips.html#chips-specs)
-
-`paper-chip`
-Paper-chip's represent complex entities in small blocks, such as a contact.
-
-### Styling
-The following custom properties and mixins are available for styling:
-
-Custom property | Description | Default
-----------------|-------------|----------
-`--paper-chip-label-color` | The paper-chip label-color | `rgba(0, 0, 0, 0.6)`
-`--paper-chip-background-color` | The paper-chip background-color | `#e4e4e4`
-`--paper-chip-avatar-background-color` | The paper-chip avatar background-color | `#757575`
-`--paper-chip-avatar-font-color` | The paper-chip avatar font and icon color | `#ffffff`
-`--paper-chip-close-color` | The paper-chip close icon color | `#a6a6a6`
-
-@element paper-chip
-@demo demo/index.html
--->
-
-<dom-module id="emojione-chip">
-  <template strip-whitespace>
-    <style>
-      .chip {
-        display: inline-block;
-        height: 32px;
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--paper-chip-label-color, rgba(0, 0, 0, 0.6));
-        line-height: 32px;
-        padding: 0 4px 0 12px;
-        border-radius: 16px;
-        background-color: var(--paper-chip-background-color, #E0E0E0);
-        margin-bottom: 5px;
-        margin-right: 5px;
-      }
-      .hoverEffect:hover {
-        @apply --shadow-elevation-2dp;
-        cursor: default;
-      }
-      .unselectable {
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-      .chip:active {
-        background: #d6d6d6;
-      }
-      .chip .closeIcon {
-        margin-left: 4px;
-        cursor: pointer;
-        float: right;
-        width: 12px;
-      }
-      .close {
-        top: -1px;
-      }
-      iron-icon {
-        --iron-icon-height: 16px;
-        --iron-icon-width: 16px;
-        position: relative;
-        right: 8px;
-        color: var(--paper-chip-background-color, #E0E0E0);
-        background-color: var(--paper-chip-close-color, #A6A6A6);
-        border-radius: 50%;
-      }
-      .label {
-        margin-right: 12px;
-      }
-      .chip .inline {
-        display: -webkit-inline-box;
-      }
-      slot[name='avatar']::slotted(.chip-image) {
-        float: left;
-        margin: 0 8px 0 -12px;
-        height: 32px;
-        width: 32px;
-        border-radius: 50%;
-      }
-      slot[name='avatar']::slotted(.chip-background) {
-        --iron-icon-height: 19px;
-        --iron-icon-width: 19px;
-        background: var(--paper-chip-avatar-background-color, #989898);
-        border-radius: 50%;
-        color: var(--paper-chip-avatar-font-color, #ffffff);
-        float: left;
-        font-weight: bold;
-        font-size: 16px;
-        height: 32px;
-        margin: 0 8px 0 -12px;
-        text-align: center;
-        width: 32px;
-      }
-      [hidden] {
-        display: none;
-      }
-
-    </style>
-
-    <div class$="[[_computePaperChipClass(noHover)]]">
-      <span class="label">[[label]]</span>
-      <slot name="avatar"></slot>
-      <div hidden$="[[!closable]]" class="closeIcon" on-tap="_remove">
-        <iron-icon class="close" icon="emojione-icons:cancel"></iron-icon>
-      </div>
-    </div>
-
-  </template>
-
-  <script>
-    Polymer({
-      is: 'emojione-chip',
-
-      properties: {
-        label: {
-          type: String,
-          value: 'Default Label'
-        },
-        closable: {
-          type: Boolean,
-          value: false
-        },
-        noHover: {
-          type: Boolean,
-          value: false
-        }
-      },
-
-      _computePaperChipClass: function (noHover) {
-        if (noHover == true) {
-          return 'chip unselectable';
-        } else {
-          return 'chip unselectable hoverEffect';
-        }
-      },
-
-      _remove: function (event) {
-        this.fire('chip-removed', {'chipLabel': this.label});
-        if (Polymer.dom(this).parentNode.id != 'slot2') {
-          Polymer.dom(this).parentNode.removeChild(Polymer.dom(this));
-        }
-      }
-    });
-  </script>
+<link rel="import" href="../paper-styles/paper-styles.html">
+
+<!--
+
+Material design: [Chips](https://material.io/guidelines/components/chips.html#chips-specs)
+
+`paper-chip`
+Paper-chip's represent complex entities in small blocks, such as a contact.
+
+### Styling
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-chip-label-color` | The paper-chip label-color | `rgba(0, 0, 0, 0.6)`
+`--paper-chip-background-color` | The paper-chip background-color | `#e4e4e4`
+`--paper-chip-avatar-background-color` | The paper-chip avatar background-color | `#757575`
+`--paper-chip-avatar-font-color` | The paper-chip avatar font and icon color | `#ffffff`
+`--paper-chip-close-color` | The paper-chip close icon color | `#a6a6a6`
+
+@element paper-chip
+@demo demo/index.html
+-->
+
+<dom-module id="emojione-chip">
+  <template strip-whitespace>
+    <style>
+      .chip {
+        display: inline-block;
+        height: 32px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--paper-chip-label-color, rgba(0, 0, 0, 0.6));
+        line-height: 32px;
+        padding: 0 4px 0 12px;
+        border-radius: 16px;
+        background-color: var(--paper-chip-background-color, #E0E0E0);
+        margin-bottom: 5px;
+        margin-right: 5px;
+      }
+      .hoverEffect:hover {
+        @apply --shadow-elevation-2dp;
+        cursor: default;
+      }
+      .unselectable {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+      .chip:active {
+        background: #d6d6d6;
+      }
+      .chip .closeIcon {
+        margin-left: 4px;
+        cursor: pointer;
+        float: right;
+        width: 12px;
+      }
+      .close {
+        top: -1px;
+      }
+      iron-icon {
+        --iron-icon-height: 16px;
+        --iron-icon-width: 16px;
+        position: relative;
+        right: 8px;
+        color: var(--paper-chip-background-color, #E0E0E0);
+        background-color: var(--paper-chip-close-color, #A6A6A6);
+        border-radius: 50%;
+      }
+      .label {
+        margin-right: 12px;
+      }
+      .chip .inline {
+        display: -webkit-inline-box;
+      }
+      slot[name='avatar']::slotted(.chip-image) {
+        float: left;
+        margin: 0 8px 0 -12px;
+        height: 32px;
+        width: 32px;
+        border-radius: 50%;
+      }
+      slot[name='avatar']::slotted(.chip-background) {
+        --iron-icon-height: 19px;
+        --iron-icon-width: 19px;
+        background: var(--paper-chip-avatar-background-color, #989898);
+        border-radius: 50%;
+        color: var(--paper-chip-avatar-font-color, #ffffff);
+        float: left;
+        font-weight: bold;
+        font-size: 16px;
+        height: 32px;
+        margin: 0 8px 0 -12px;
+        text-align: center;
+        width: 32px;
+      }
+      [hidden] {
+        display: none;
+      }
+
+    </style>
+
+    <div class$="[[_computePaperChipClass(noHover)]]">
+      <span class="label">[[label]]</span>
+      <slot name="avatar"></slot>
+      <div hidden$="[[!closable]]" class="closeIcon" on-tap="_remove">
+        <iron-icon class="close" icon="emojione-icons:cancel"></iron-icon>
+      </div>
+    </div>
+
+  </template>
+
+  <script>
+    Polymer({
+      is: 'emojione-chip',
+
+      properties: {
+        label: {
+          type: String,
+          value: 'Default Label'
+        },
+        closable: {
+          type: Boolean,
+          value: false
+        },
+        noHover: {
+          type: Boolean,
+          value: false
+        }
+      },
+
+      _computePaperChipClass: function (noHover) {
+        if (noHover == true) {
+          return 'chip unselectable';
+        } else {
+          return 'chip unselectable hoverEffect';
+        }
+      },
+
+      _remove: function (event) {
+        this.fire('chip-removed', {'chipLabel': this.label});
+        if (Polymer.dom(this).parentNode.id != 'slot2') {
+          Polymer.dom(this).parentNode.removeChild(Polymer.dom(this));
+        }
+      }
+    });
+  </script>
 </dom-module>
\ No newline at end of file
diff --git a/emojione-emoji.html b/emojione-emoji.html
index d97bb46..a7a56b3 100644
--- a/emojione-emoji.html
+++ b/emojione-emoji.html
@@ -1,48 +1,44 @@
-<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
-
-<dom-module id="emojione-emoji">
-  <template strip-whitespace>
-    <custom-style>
-      <style>
-        :host {
-          position: relative;
-          outline: none;
-          height: 48px;
-          width: 48px;
-          padding: 8px;
-          box-sizing: border-box;
-          border-radius: 3px;
-          cursor: pointer;
-          @apply --emojione-emoji-container;
-        }
-        paper-ripple {
-          color: var(--paper-grey-400);
-          @apply --emojione-emoji-ripple;
-        }
-
-      </style>
-    </custom-style>
-
-    <slot></slot>
-  </template>
-  <script>
-    class EmojioneEmoji extends Polymer.mixinBehaviors([Polymer.PaperInkyFocusBehavior], Polymer.Element) {
-
-      static get is() {
-        return 'emojione-emoji';
-      }
-
-      /**
-       * @override the createRipple function in paper ripple
-       * https://github.com/PolymerElements/paper-behaviors/blob/master/paper-inky-focus-behavior.html
-       */
-      _createRipple() {
-        const ripple = Polymer.PaperRippleBehavior._createRipple();
-        ripple.id = 'ink';
-        return ripple;
-      }
-    }
-
-    window.customElements.define(EmojioneEmoji.is, EmojioneEmoji);
-  </script>
+<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
+
+<dom-module id="emojione-emoji">
+  <template strip-whitespace>
+    <style is="custom-style">
+      :host {
+        position: relative;
+        outline: none;
+        height: 48px;
+        width: 48px;
+        padding: 8px;
+        box-sizing: border-box;
+        border-radius: 3px;
+        cursor: pointer;
+        @apply --emojione-emoji-container;
+      }
+      paper-ripple {
+        color: var(--paper-grey-400);
+        @apply --emojione-emoji-ripple;
+      }
+
+    </style>
+
+    <slot></slot>
+  </template>
+  <script>
+    Polymer({
+
+      is: 'emojione-emoji',
+
+      behaviors: [Polymer.PaperInkyFocusBehavior],
+
+      /**
+       * @override the createRipple function in paper ripple
+       * https://github.com/PolymerElements/paper-behaviors/blob/master/paper-inky-focus-behavior.html
+       */
+      _createRipple: function () {
+        const ripple = Polymer.PaperRippleBehavior._createRipple();
+        ripple.id = 'ink';
+        return ripple;
+      }
+    });
+  </script>
 </dom-module>
\ No newline at end of file
diff --git a/emojione-icons.html b/emojione-icons.html
index a97d985..cb3aa55 100644
--- a/emojione-icons.html
+++ b/emojione-icons.html
@@ -1,50 +1,50 @@
-<!--
-  @element iron-iconset-svg
--->
-<link rel="import" href="../iron-icon/iron-icon.html">
-<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
-
-<iron-iconset-svg name="emojione-icons" size="1024">
-  <svg>
-    <defs>
-      <g id="flag">
-        <path d="M614 256h240v426h-300l-16-84h-240v298h-84v-726h384z"></path>
-      </g>
-      <g id="font_download">
-        <path d="M680 790h90l-218-556h-80l-218 556h90l48-128h240zM854 86q34 0 59 25t25 59v684q0 34-25 59t-59 25h-684q-34 0-59-25t-25-59v-684q0-34 25-59t59-25h684zM424 576l88-236 88 236h-176z"></path>
-      </g>
-      <g id="insert_emoticon">
-        <path
-          d="M512 746q-74 0-133-41t-85-107h436q-26 66-85 107t-133 41zM362 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM662 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"></path>
-      </g>
-      <g id="nature">
-        <path d="M554 688v166h256v84h-596v-84h256v-168q-108-18-179-101t-71-193q0-124 88-212t212-88 211 88 87 212q0 114-76 198t-188 98z"></path>
-      </g>
-      <g id="local_attraction">
-        <path
-          d="M664 716l-46-174 140-116-180-10-66-168-66 168-182 10 142 116-46 174 152-98zM854 512q0 34 25 60t59 26v170q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-170q36 0 60-25t24-61q0-34-25-60t-59-26v-170q0-34 25-60t59-26h684q34 0 59 26t25 60v170q-34 0-59 26t-25 60z"></path>
-      </g>
-      <g id="local_florist">
-        <path
-          d="M512 234q-44 0-75 32t-31 76 31 75 75 31 75-31 31-75-31-76-75-32zM238 438q0-66 62-96-62-30-62-96 0-44 32-76t76-32q30 0 60 20v-8q0-44 31-76t75-32 75 32 31 76v8q30-20 60-20 44 0 76 32t32 76q0 66-62 96 62 30 62 96 0 44-32 75t-76 31q-34 0-60-18v8q0 44-31 75t-75 31-75-31-31-75v-8q-26 18-60 18-44 0-76-31t-32-75zM512 938q-160 0-272-113t-112-271q160 0 272 113t112 271zM512 938q0-158 112-271t272-113q0 158-112 271t-272 113z"></path>
-      </g>
-      <g id="cancel">
-        <path d="M726 666l-154-154 154-154-60-60-154 154-154-154-60 60 154 154-154 154 60 60 154-154 154 154zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"></path>
-      </g>
-      <g id="build">
-        <path d="M968 810q14 8 13 27t-17 33l-98 98q-30 30-60 0l-388-388q-72 30-153 13t-141-77q-64-64-80-152t24-164l188 184 128-128-184-184q76-36 164-22t152 78q60 60 77 141t-13 153z"></path>
-      </g>
-      <g id="extension">
-        <path
-          d="M874 470q44 0 76 31t32 75-32 75-76 31h-64v172q0 34-25 59t-59 25h-162v-64q0-48-34-81t-82-33-82 33-34 81v64h-162q-34 0-59-25t-25-59v-162h64q48 0 81-34t33-82-33-82-81-34h-64v-162q0-34 25-59t59-25h172v-64q0-44 31-76t75-32 75 32 31 76v64h172q34 0 59 25t25 59v172h64z"></path>
-      </g>
-      <g id="history">
-        <path d="M512 342h64v180l150 90-32 52-182-110v-212zM554 128q158 0 271 112t113 272-113 272-271 112-270-112l60-62q88 88 210 88 124 0 212-87t88-211-88-211-212-87-211 87-87 211h128l-172 172-4-6-166-166h128q0-160 113-272t271-112z"></path>
-      </g>
-      <g id="card_travel">
-        <path
-          d="M854 598v-256h-128v84h-86v-84h-256v84h-86v-84h-128v256h684zM854 810v-84h-684v84h684zM384 170v86h256v-86h-256zM854 256q36 0 60 25t24 61v468q0 36-24 61t-60 25h-684q-36 0-60-25t-24-61v-468q0-36 24-61t60-25h128v-86q0-36 25-60t61-24h256q36 0 61 24t25 60v86h128z"></path>
-      </g>
-    </defs>
-  </svg>
+<!--
+  @element iron-iconset-svg
+-->
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="emojione-icons" size="1024">
+  <svg>
+    <defs>
+      <g id="flag">
+        <path d="M614 256h240v426h-300l-16-84h-240v298h-84v-726h384z"></path>
+      </g>
+      <g id="font_download">
+        <path d="M680 790h90l-218-556h-80l-218 556h90l48-128h240zM854 86q34 0 59 25t25 59v684q0 34-25 59t-59 25h-684q-34 0-59-25t-25-59v-684q0-34 25-59t59-25h684zM424 576l88-236 88 236h-176z"></path>
+      </g>
+      <g id="insert_emoticon">
+        <path
+          d="M512 746q-74 0-133-41t-85-107h436q-26 66-85 107t-133 41zM362 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM662 470q-26 0-45-19t-19-45 19-45 45-19 45 19 19 45-19 45-45 19zM512 854q140 0 241-101t101-241-101-241-241-101-241 101-101 241 101 241 241 101zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"></path>
+      </g>
+      <g id="nature">
+        <path d="M554 688v166h256v84h-596v-84h256v-168q-108-18-179-101t-71-193q0-124 88-212t212-88 211 88 87 212q0 114-76 198t-188 98z"></path>
+      </g>
+      <g id="local_attraction">
+        <path
+          d="M664 716l-46-174 140-116-180-10-66-168-66 168-182 10 142 116-46 174 152-98zM854 512q0 34 25 60t59 26v170q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-170q36 0 60-25t24-61q0-34-25-60t-59-26v-170q0-34 25-60t59-26h684q34 0 59 26t25 60v170q-34 0-59 26t-25 60z"></path>
+      </g>
+      <g id="local_florist">
+        <path
+          d="M512 234q-44 0-75 32t-31 76 31 75 75 31 75-31 31-75-31-76-75-32zM238 438q0-66 62-96-62-30-62-96 0-44 32-76t76-32q30 0 60 20v-8q0-44 31-76t75-32 75 32 31 76v8q30-20 60-20 44 0 76 32t32 76q0 66-62 96 62 30 62 96 0 44-32 75t-76 31q-34 0-60-18v8q0 44-31 75t-75 31-75-31-31-75v-8q-26 18-60 18-44 0-76-31t-32-75zM512 938q-160 0-272-113t-112-271q160 0 272 113t112 271zM512 938q0-158 112-271t272-113q0 158-112 271t-272 113z"></path>
+      </g>
+      <g id="cancel">
+        <path d="M726 666l-154-154 154-154-60-60-154 154-154-154-60 60 154 154-154 154 60 60 154-154 154 154zM512 86q176 0 301 125t125 301-125 301-301 125-301-125-125-301 125-301 301-125z"></path>
+      </g>
+      <g id="build">
+        <path d="M968 810q14 8 13 27t-17 33l-98 98q-30 30-60 0l-388-388q-72 30-153 13t-141-77q-64-64-80-152t24-164l188 184 128-128-184-184q76-36 164-22t152 78q60 60 77 141t-13 153z"></path>
+      </g>
+      <g id="extension">
+        <path
+          d="M874 470q44 0 76 31t32 75-32 75-76 31h-64v172q0 34-25 59t-59 25h-162v-64q0-48-34-81t-82-33-82 33-34 81v64h-162q-34 0-59-25t-25-59v-162h64q48 0 81-34t33-82-33-82-81-34h-64v-162q0-34 25-59t59-25h172v-64q0-44 31-76t75-32 75 32 31 76v64h172q34 0 59 25t25 59v172h64z"></path>
+      </g>
+      <g id="history">
+        <path d="M512 342h64v180l150 90-32 52-182-110v-212zM554 128q158 0 271 112t113 272-113 272-271 112-270-112l60-62q88 88 210 88 124 0 212-87t88-211-88-211-212-87-211 87-87 211h128l-172 172-4-6-166-166h128q0-160 113-272t271-112z"></path>
+      </g>
+      <g id="card_travel">
+        <path
+          d="M854 598v-256h-128v84h-86v-84h-256v84h-86v-84h-128v256h684zM854 810v-84h-684v84h684zM384 170v86h256v-86h-256zM854 256q36 0 60 25t24 61v468q0 36-24 61t-60 25h-684q-36 0-60-25t-24-61v-468q0-36 24-61t60-25h128v-86q0-36 25-60t61-24h256q36 0 61 24t25 60v86h128z"></path>
+      </g>
+    </defs>
+  </svg>
 </iron-iconset-svg>
\ No newline at end of file
diff --git a/emojione-selector.html b/emojione-selector.html
index fa910e3..64d2e90 100644
--- a/emojione-selector.html
+++ b/emojione-selector.html
@@ -1,972 +1,990 @@
-<link rel="import" href="../polymer/polymer-element.html">
-
-<!-- import CSS mixins polyfill -->
-<link rel="import" href="../shadycss/apply-shim.html">
-
-<!-- gesture event support -->
-<link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
-
-<!-- debounce polymer -->
-<link rel="import" href="/bower_components/polymer/lib/utils/debounce.html">
-
-<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
-<link rel="import" href="../neon-animation/web-animations.html">
-
-<!-- import additional dependencies -->
-<link rel="import" href="../paper-styles/color.html">
-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../iron-ajax/iron-ajax.html">
-<link rel="import" href="../iron-image/iron-image.html">
-<link rel="import" href="../iron-icon/iron-icon.html">
-<link rel="import" href="../iron-localstorage/iron-localstorage.html">
-<link rel="import" href="../paper-tabs/paper-tabs.html">
-<link rel="import" href="../paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../paper-material/paper-material.html">
-<link rel="import" href="../paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../paper-chip/paper-chip-input-autocomplete.html">
-<link rel="import" href="../iron-selector/iron-selector.html">
-<link rel="import" href="../neon-animation/web-animations.html">
-<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
-<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
-
-<link rel="import" href="emojione-icons.html">
-<link rel="import" href="emojione-badge.html">
-<link rel="import" href="emojione-emoji.html">
-<link rel="import" href="emojione-chip-input.html">
-
-<!--
-`emojione-selector` works best as a emoji picker and is powered by the emojione library.
-
-It ships with the diversity update so you can swutch skin tones on the fly
-You can also use the advanced search feature to search with multiple search terms
-
-Example:
-
-    <emojione-selector></emojione-selector>
-
-### Styling
-
-The following custom properties and mixins are available for styling:
-
-Custom property | Description | Default
-----------------|-------------|----------
-`--emojione-selector` | Mixin applied to the picker | `{}`
-`--emojione-selector-paper-tabs` | Mixin applied to the paper-tabs | `{}`
-`--emojione-selector-paper-tab` | Mixin applied to the paper-tab | `{}`
-`--emojione-selector-paper-tab-icon` | Mixin applied to the icon in paper tab | `{}`
-`--emojione-selector-paper-tab-icon-focused` | Mixin applied to the icon in paper tab when it is focused | `{}`
-`--emojione-selector-chip` | Mixin applied to the search bar | `{}`
-`--emojione-selector-tab-container` | Mixin applied to the container of the search bar and tone picker | `{}`
-`--emojione-selector-list` | Mixin applied to the list picker | `{}`
-`--emojione-emoji-container` | Mixin applied to the emoji div of a emoji in the list | `{}`
-`--emojione-selector-title-icon` | Mixin applied to the emoji icon in the tab | `{}`
-
-You can also use any of the Polymer.PaperInputContainer styles to style the
-search input, or the Polymer.PaperTabs and Polymer.PaperTab styles to style
-the category tabs or the Polymer.MenuButton to style the tone picker or the
-Polymer.PaperIconButton to style the icon buttons or the Polymer.PaperMaterial
-to style the tone picker's dialog.
-
--->
-
-<dom-module id="emojione-selector">
-  <template strip-whitespace>
-    <custom-style>
-      <style>
-        * {
-          -webkit-tap-highlight-color: transparent;
-          -moz-tap-highlight-color: transparent;
-          tap-highlight-color: transparent;
-        }
-        :host {
-          @apply --layout-vertical;
-          outline: none;
-          position: relative;
-          @apply --emojione-selector;
-        }
-        paper-material {
-          background-color: #fff;
-        }
-        iron-selector {
-          @apply --layout-vertical;
-          @apply --layout-justified;
-          @apply --layout-center;
-        }
-        iron-selector emojione-emoji {
-          --emojione-emoji-container: {
-            height: auto;
-            width: auto;
-            border-radius: 0;
-          };
-        }
-        iron-selector emojione-emoji div {
-          background-color: #ffcf11;
-          border-radius: 50%;
-          height: 40px;
-          width: 40px;
-          padding: 10px;
-        };
-      }
-      .dropdown-trigger .pickcon {
-        background-color: #ffcf11;
-        border-radius: 50%;
-        height: 20px;
-        width: 20px;
-      }
-      .dropdown-trigger .pickcon.tone1 {
-        background-color: #ffe1bd;
-      }
-      .dropdown-trigger .pickcon.tone2 {
-        background-color: #fed0ac;
-      }
-      .dropdown-trigger .pickcon.tone3 {
-        background-color: #d6a57c;
-      }
-      .dropdown-trigger .pickcon.tone4 {
-        background-color: #b47d56;
-      }
-      .dropdown-trigger .pickcon.tone5 {
-        background-color: #8a6859;
-      }
-      emojione-chip-input {
-        @apply --layout-flex;
-        outline: none;
-        margin-right: 12px;
-        --paper-input-container-focus-color: var(--paper-blue-500);
-        @apply --emojione-selector-chip;
-      }
-      paper-icon-button {
-        color: var(--paper-grey-700);
-      }
-      paper-menu-button {
-        padding: 5px;
-      }
-      paper-menu-button paper-icon-button {
-        color: var(--paper-grey-800);
-      }
-
-      </style>
-    </custom-style>
-
-    <!-- storage for the most recent emoji -->
-    <iron-localstorage name="recentemoji" value="{{recentlyUsedEmojis}}" on-iron-localstorage-load-empty="initRecentEmoji"></iron-localstorage>
-
-    <!-- storage for the most recent skin tone -->
-    <iron-localstorage name="skintone" value="{{tone}}" on-iron-localstorage-load-empty="initSkintone"></iron-localstorage>
-
-    <!-- get the categories json -->
-    <iron-ajax auto url="{{categoryUrl}}" handle-as="json" last-response="{{categories}}" on-response="_onCategoryResponse"></iron-ajax>
-
-    <!-- get the latest emoji json -->
-    <iron-ajax id="emojiAjax" url="{{url}}" handle-as="json" last-response="{{rawemoji}}" on-response="_onEmojiResponse"></iron-ajax>
-
-    <iron-a11y-keys target="[[ctrlTarget]]" keys="ctrl+0 ctrl+1 ctrl+2 ctrl+3 ctrl+4 ctrl+5 ctrl+6 ctrl+7 ctrl+8 ctrl+9" on-keys-pressed="onCtrlComboEvent"></iron-a11y-keys>
-
-    <!-- arrow key navigation for emoji list -->
-    <iron-a11y-keys target="[[arrowTarget]]" keys="up right down left" on-keys-pressed="onArrowEvent"></iron-a11y-keys>
-
-    <!-- enter key select for emoji -->
-    <iron-a11y-keys target="[[arrowTarget]]" keys="enter" on-keys-pressed="setEmojiTap"></iron-a11y-keys>
-
-    <paper-tabs selected="{{selected}}" noink>
-      <paper-tab id="tab0" title="Recently used emoji">
-        <iron-icon icon="emojione-icons:history"></iron-icon>
-      </paper-tab>
-      <template is="dom-repeat" items="[[categories]]" as="category">
-        <paper-tab id$="tab[[_getNormalIndex(index)]]" title$="[[category.category_label]]">
-          <iron-icon icon="emojione-icons:{{_getCategoryIcon(category.category)}}"></iron-icon>
-        </paper-tab>
-      </template>
-    </paper-tabs>
-
-    <!-- position relative to but outside helper badges -->
-    <emojione-badge id="badge0" class$="[[_getClass(hasCtrl)]]">0</emojione-badge>
-    <template is="dom-repeat" items="[[categories]]" as="category">
-      <emojione-badge id="badge[[_getNormalIndex(index)]]" class$="[[_getClass(hasCtrl)]]">[[_getNormalIndex(index)]]</emojione-badge>
-    </template>
-
-    <div class="tab-container">
-
-      <!-- skin tone picker -->
-      <paper-menu-button dynamic-align vertical-offset="8">
-        <emojione-emoji slot="dropdown-trigger" class="dropdown-trigger" title="Skin tone selector" tabindex="0">
-          <div class$="pickcon [[tone]]"></div>
-        </emojione-emoji>
-        <paper-material elevation="1" slot="dropdown-content">
-          <iron-selector attr-for-selected="name" selected="{{tone}}">
-            <emojione-emoji name="tone0" tabindex="0">
-              <div></div>
-            </emojione-emoji>
-            <template is="dom-repeat" items="[[modifiers]]" as="modifier">
-              <emojione-emoji name="{{modifier}}" tabindex="0">
-                <div class$="{{modifier}}"></div>
-              </emojione-emoji>
-            </template>
-          </iron-selector>
-        </paper-material>
-      </paper-menu-button>
-
-      <!-- search bar -->
-      <emojione-chip-input id="searchField" label="Search emoji" items="{{search}}" no-label-float closable></emojione-chip-input>
-
-      <!-- clear the search -->
-      <paper-icon-button id="clearSearch" on-tap="onClearSearchTap" icon="emojione-icons:cancel"></paper-icon-button>
-
-    </div>
-
-    <!-- emoji list -->
-
-    <div id="emojiList" class="emoji-list" on-tap="setEmojiTap">
-      <template id="mainList" is="dom-repeat" items="[[currentList]]" as="emoji" initial-count="69">
-        <emojione-emoji tabindex="0">
-          <iron-image
-            class="{{_getToneProperty(emoji, tone, '_class', selected)}}"
-            alt="{{_getToneProperty(emoji, tone, 'name', selected)}}"
-            title="{{_getToneProperty(emoji, tone, 'name', selected)}}"
-            src="{{_getToneProperty(emoji, tone, '_src', selected)}}"
-            sizing="contain"></iron-image>
-        </emojione-emoji>
-      </template>
-    </div>
-
-  </template>
-  <script src="../emojione/lib/js/emojione.min.js"></script>
-  <script src="fuse.min.js"></script>
-  <script>
-
-    /**
-     * `emojione-selector`
-     * A polymer element that works best as a emoji picker and is powered by the emojione library
-     *
-     * @customElement
-     * @polymer
-     * @demo demo/index.html
-     */
-
-    class EmojioneSelector extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.GestureEventListeners(Polymer.Element)) {
-
-      static get is() {
-        return 'emojione-selector';
-      }
-
-      static get properties() {
-        return {
-          /**
-           * Fired when emoji changes.
-           *
-           * @event emoji-changed
-           */
-
-          /**
-           * the url for category info json
-          */
-          categoryUrl: {
-            type: String
-          },
-          /**
-           * the url for emoji info json
-          */
-          url: {
-            type: String
-          },
-          /**
-           * if the picker is open, useful to control the picker tab
-           */
-          opened: {
-            type: Object,
-            notify: true
-          },
-
-          /**
-           * most recent selected emoji
-           */
-          emoji: {
-            type: String,
-            notify: true
-          },
-
-          /**
-           * search terms for fuse js
-           */
-          search: {
-            type: Array,
-            value: []
-          },
-
-          /**
-           * category icon name map
-           */
-          categoryIconMap: {
-            type: Object,
-            value: {
-              'people': 'insert_emoticon',
-              'nature': 'nature',
-              'food': 'local_florist',
-              'activity': 'local_attraction',
-              'travel': 'card_travel',
-              'objects': 'build',
-              'symbols': 'extension',
-              'flags': 'flag',
-              'regional': 'font_download'
-            }
-          },
-
-          /**
-           * category data the list of categories
-           */
-          categories: {
-            type: Array,
-            value: []
-          },
-
-          /**
-           * the selected category tab
-           */
-          selected: {
-            type: Number,
-            value: 0
-          },
-
-          /**
-           * previously selected tab prior to search
-           */
-          prevSelected: {
-            type: Number
-          },
-
-          /**
-           * initial list of tabs prior to search
-           */
-          initTabs: {
-            type: Number
-          },
-
-          /**
-           * the current selected tone
-           */
-          tone: {
-            type: String,
-            notify: true,
-            value: ''
-          },
-
-          /**
-           * stores the raw list of emojis from emoji.json from emojione
-           */
-          rawemoji: {
-            type: Object
-          },
-
-          /**
-           * currently selected emoji
-           */
-          currentList: {
-            type: Array,
-            value: []
-          },
-
-          /**
-           * List of all processed emoji categories
-           */
-          emojis: {
-            type: Object,
-            value: {}
-          },
-
-          /**
-           * maximum possible number of emoji in a row
-           */
-          emojiInRow: {
-            type: Number
-          },
-
-          /**
-           * fuse js object
-           */
-          fuse: {
-            type: Object
-          },
-
-          /**
-           * ctrl keys tab target
-           */
-          ctrlTarget: {
-            type: Object
-          },
-
-          /**
-           * to show control key helpers
-           */
-          showCtrl: {
-            type: Boolean,
-            value: true
-          },
-
-          /**
-           * has the control key down
-           */
-          hasCtrl: {
-            type: Boolean
-          },
-
-          /**
-           * arrow keys navigation target
-           */
-          arrowTarget: {
-            type: Object
-          },
-
-          /**
-           * ctrl keys tab targets
-           */
-          tabTargets: {
-            type: Array,
-            value: []
-          },
-
-          /**
-           * the search index for fuse.js
-           */
-          searchIndex: {
-            type: Array,
-            value: []
-          },
-
-          /**
-           * search options for fuse.js
-           */
-          searchOptions: {
-            type: Object,
-            value: {
-              shouldSort: true,
-              threshold: 0.4,
-              location: 0,
-              distance: 20,
-              maxPatternLength: 16,
-              minMatchCharLength: 1,
-              keys: ['keywords', 'name', 'shortname', 'category']
-            }
-          },
-
-          /**
-           * is true when the component is ready to be used by the outside
-           */
-          isRendered: {
-            type: Boolean,
-            notify: true
-          },
-
-          /**
-           * list of skin tone modifiers
-           */
-          modifiers: {
-            type: Array,
-            value: ['tone1', 'tone2', 'tone3', 'tone4', 'tone5']
-          },
-
-          /**
-           * list of recently used emoji
-           */
-          recentlyUsedEmojis: {
-            type: Array
-          },
-
-          /**
-           * list of recently used emoji which is rendered
-           */
-          recentlyUsedEmojisRendered: {
-            type: Array
-          },
-
-          /**
-           * search results from fuse.js
-           */
-          searchResults: {
-            type: Array,
-            value: []
-          },
-
-          /**
-           * extract attributes
-           */
-          extractAttributes: {
-            type: Array,
-            value: ['class', 'src']
-          },
-
-          _debouncer: {
-            type: Object
-          }
-        };
-      }
-
-      // Observer method name, followed by a list of dependencies, in parenthesis
-      static get observers() {
-        return ['onRecentlyUsedEmojisChange(rawemoji, recentlyUsedEmojis.*)', 'onOpenedChange(opened, isRendered)', 'onSelectedChange(selected)', 'onSearchChange(search.*)'];
-      }
-
-      /**
-       * lifecycle events
-       */
-
-      ready() {
-        super.ready();
-
-        this.categoryUrl = this.importPath + '../emojione/categories.json';
-        this.url = this.importPath + '../emojione/emoji.json';
-
-        // set emojione properties
-        emojione.ascii = true;
-      }
-
-      connectedCallback() {
-        super.connectedCallback();
-
-        this.ctrlTarget = this;
-        this.arrowTarget = this.$.emojiList;
-
-        // no floating label for search field
-        this.$.searchField.shadowRoot.querySelector('paper-input').noLabelFloat = true;
-
-        // add  event listeners here
-        this.addEventListener('iron-resize', this.onResize.bind(this));
-        this.addEventListener('keydown', this.onCtrlEvent.bind(this));
-        this.addEventListener('keyup', this.onCloseCtrlEvent.bind(this));
-      }
-
-      disconnectedCallback() {
-        super.disconnectedCallback();
-
-        // remove  event listeners here
-        this.removeEventListener('iron-resize', this.onResize.bind(this));
-        this.removeEventListener('keydown', this.onCtrlEvent.bind(this));
-        this.removeEventListener('keyup', this.onCloseCtrlEvent.bind(this));
-      }
-
-      /**
-       * initiate the local storage for recent emoji and skin tone
-       */
-
-      initRecentEmoji() {
-        this.recentlyUsedEmojis = [];
-      }
-
-      initSkintone() {
-        this.tone = 'tone0';
-      }
-
-      /**
-       * observers
-       */
-
-      onRecentlyUsedEmojisChange(rawemoji, recentlyUsedEmojis) {
-        if (recentlyUsedEmojis.base && recentlyUsedEmojis.base.length > 0 && rawemoji) {
-          // parse and add them to recentlyUsedEmojisRendered
-          this.recentlyUsedEmojisRendered = [];
-          for (let emoji of recentlyUsedEmojis.base) {
-            this.push('recentlyUsedEmojisRendered', this._convertImgtoAttributes(Object.assign({}, rawemoji[emoji])));
-          }
-        }
-      }
-
-      onOpenedChange(opened, isRendered) {
-        // if the picker was opened do it
-        if (opened && isRendered) {
-          // if there are recently used emoji select that tab
-          if (this.recentlyUsedEmojis.length > 0) {
-            this.selected = 0;
-          } else {
-            this.selected = 1;
-          }
-          // focus the selected tab
-          window.setTimeout(() => {
-            this.shadowRoot.querySelector('#tab' + this.selected).focus();
-          }, 200);
-          this.setAttribute('tabindex', '0');
-        } else {
-          this.setAttribute('tabindex', '-1');
-        }
-      }
-
-      onSearchChange(search) {
-        // if selected is in regular bounds store it
-        if (this.selected > -1 && this.selected < this.initTabs) {
-          this.prevSelected = this.selected;
-        }
-        if (search.base.length > 0) {
-          this.$.clearSearch.style.display = '';
-        } else {
-          this.$.clearSearch.style.display = 'none';
-          // restore to prev tab
-          this.selected = this.prevSelected;
-        }
-        // search only if value is a number greater than 0
-        if (search.value > 0) {
-          // clean searchResults
-          this.searchResults = [];
-          // init search for all keywords
-          for (let i in search.base) {
-            this.searchResults = [
-              ...this.searchResults,
-              ...this.fuse.search(search.base[i])
-            ];
-          }
-          // only keep unique
-          this.currentList = [];
-          this.currentList = this.deDuplicateByKey(this.searchResults, 'shortname');
-          this.selected = -1;
-        }
-      }
-
-      // https://stackoverflow.com/a/37022759 keep only unique
-      deDuplicateByKey(array, key) {
-        const temp = array.map(el => el[key]);
-        return array.filter((el, i) => temp.indexOf(el[key]) === i);
-      }
-
-      onSelectedChange(selected) {
-        // only if selected if less than -1 or undefined
-        if (selected === undefined || selected < 0) {
-          return;
-        }
-        this.currentList = [];
-        if (selected === 0) {
-          this.currentList = this.recentlyUsedEmojisRendered;
-        } else {
-          this.currentList = this.get(`emojis.${this.categories[selected - 1].category}`);
-        }
-      }
-
-      _getNormalIndex(index) {
-        return index + 1;
-      }
-
-      _getClass(hasCtrl) {
-        if (hasCtrl) {
-          return 'show';
-        } else {
-          return '';
-        }
-      }
-
-      // get property in toned-safe way in case the conditions meet
-      _getToneProperty(emoji, tone, property, selected) {
-        if (tone === 'tone0' || !emoji._diverse || selected === 0) {
-          return emoji[property];
-        } else {
-          return emoji._diversities[tone][property];
-        }
-      }
-
-      _getCategoryIcon(category) {
-        return this.get(`categoryIconMap.${category}`);
-      }
-
-      _getEmoji(emoji) {
-        return emoji.shortname || emoji.code_points.base;
-      }
-
-      _renderEmoji(emoji) {
-        return emojione.toImage(this._getEmoji(emoji));
-      }
-
-      _getAttribute(str, attr) {
-        let end = '"';
-        attr += '="';
-        attr = str.indexOf(attr) + attr.length;
-        end = str.indexOf(end, attr);
-        return str.substring(attr, end);
-      }
-
-      _convertImgtoAttributes(emoji) {
-        let img = this._renderEmoji(emoji);
-        // put img attributes to the emoji tag
-        for (let attribute of this.extractAttributes) {
-          emoji['_' + attribute] = this._getAttribute(img, attribute);
-        }
-        return emoji;
-      }
-
-      _onCategoryResponse() {
-        // prepare the emoji category list
-        for (let category of this.categories) {
-          this.set(`emojis.${category.category}`, []);
-        }
-        // request for emojis list
-        this.$.emojiAjax.generateRequest();
-      }
-
-      _onEmojiResponse() {
-        let emoji,
-          i,
-          obj;
-
-        // put emoji in category
-        for (obj in this.rawemoji) {
-          // add img attributes to the obj
-          this.rawemoji[obj] = this._convertImgtoAttributes(this.rawemoji[obj]);
-          // for getting diversity
-          emoji = this.rawemoji[obj];
-          // no diversity support
-          emoji._diverse = false;
-          // if this is a diversity parent push it with diverse set true
-          if (emoji.diversities.length > 0) {
-            // add all tones as children
-            emoji._diversities = {};
-            // the emoji has diversity support
-            emoji._diverse = true;
-            for (i in emoji.diversities) {
-              emoji._diversities[`tone${parseInt(i) + 1}`] = this.rawemoji[emoji.diversities[i]];
-            }
-          }
-          // skip other diversity children i.e dont push them
-          if (emoji.diversity) {
-            continue;
-          }
-          // create a new category if not in categories
-          if (!this.emojis.hasOwnProperty(emoji.category)) {
-            this.push('categories', {
-              'order': -1,
-              'category': emoji.category,
-              'category_label': emoji.category
-            });
-            this.set(`emojis.${emoji.category}`, []);
-          }
-
-          // push the item in the array
-          this.push(`emojis.${emoji.category}`, emoji);
-
-          // also build the index for searching
-          this.push('searchIndex', Object.assign({}, emoji));
-        }
-
-        // go through all categories
-        for (emoji in this.emojis) {
-          this.get(`emojis.${emoji}`).sort((a, b) => {
-            // a is less than b by some ordering criterion
-            if (a.order < b.order) {
-              return -1;
-            }
-
-            // a is greater than b by the ordering criterion
-            if (a.order > b.order) {
-              return 1;
-            }
-
-            // a must be equal to b
-            return 0;
-          });
-        }
-
-        // sort according to the 'order' register initial tab count
-        this.initTabs = this.categories.length;
-
-        // register fuse js for searching later
-        this.fuse = new Fuse(this.searchIndex, this.searchOptions);
-
-        // force the currently selected
-        this.onSelectedChange(this.selected);
-
-        // initiate a resize call to calculate the emoji in a row
-        this.onResize();
-
-        this.isRendered = true;
-      }
-
-      /**
-       * tactile event listeners
-       */
-
-      onResize() {
-        this.emojiInRow = Math.floor(this.$.emojiList.clientWidth / 48);
-
-        this._debouncer = Polymer.Debouncer.debounce(this._debouncer, Polymer.Async.timeOut.after(200), () => {
-          var i,
-            j,
-            badge,
-            tab;
-
-          this.emojiInRow = Math.floor(this.$.emojiList.clientWidth / 48);
-
-          // set badges => tabs
-          this.$.badge0.position = {
-            'top': this.$.tab0.offsetTop + this.$.tab0.clientHeight,
-            'left': this.$.tab0.offsetLeft + ((this.$.tab0.clientWidth - this.$.badge0.clientWidth) / 2)
-          };
-
-          if (this.categories) {
-            window.setTimeout(() => {
-              for (i in this.categories) {
-                j = parseInt(i) + 1;
-                badge = this.shadowRoot.querySelector(`#badge${j}`);
-                tab = this.shadowRoot.querySelector(`#tab${j}`);
-
-                badge.position = {
-                  'top': tab.offsetTop + tab.clientHeight,
-                  'left': tab.offsetLeft + ((tab.clientWidth - badge.clientWidth) / 2)
-                };
-              }
-            });
-          }
-        });
-      }
-
-      onCloseCtrlEvent(event) {
-        // if ctrl key is up
-        if (!event.ctrlKey) {
-          this.hasCtrl = false;
-        }
-      }
-
-      onCtrlEvent(event) {
-        // if ctrl key is down
-        if (event.ctrlKey && this.showCtrl) {
-          this.hasCtrl = true;
-        }
-      }
-
-      onCtrlComboEvent(event) {
-        const keyboardEvent = event.detail.keyboardEvent,
-          key = keyboardEvent.key || keyboardEvent.code;
-        if (this.isRendered) {
-          this.selected = parseInt(key);
-        }
-      }
-
-      onArrowEvent(event) {
-        // get next and previous sibling
-        const keyboardEvent = event.detail.keyboardEvent,
-          currentElement = keyboardEvent.target,
-          parentElement = keyboardEvent.target.parentElement,
-          children = parentElement.children,
-          // https://stackoverflow.com/a/23528539
-          position = Array.prototype.indexOf.call(children, currentElement),
-          row = Math.floor(position / this.emojiInRow) + 1,
-          // skip the last element from count
-          count = children.length - 1,
-          rows = Math.ceil(count / this.emojiInRow),
-          positionInRow = position - ((row - 1) * this.emojiInRow),
-          nextElement = keyboardEvent.target.nextElementSibling,
-          previousElement = keyboardEvent.target.previousElementSibling,
-          firstElement = (row - 1) * this.emojiInRow,
-          lastElement = (row * this.emojiInRow) - 1,
-          key = keyboardEvent.key || keyboardEvent.code;
-
-        //check what key and act accordingly
-        if (key === 'ArrowLeft') {
-          this._onPreviousElement({previousElement: previousElement, row: row, count: count, children: children, lastElement: lastElement});
-        } else if (key === 'ArrowRight') {
-          this._onNextElement({
-            nextElement: nextElement,
-            row: row,
-            count: count,
-            position: position,
-            children: children,
-            firstElement: firstElement,
-            lastElement: lastElement
-          });
-        } else if (key === 'ArrowUp') {
-          this._onFastBackward({positionInRow: positionInRow, rows: rows, row: row, count: count, children: children});
-        } else if (key === 'ArrowDown') {
-          this._onFastForward({positionInRow: positionInRow, rows: rows, row: row, count: count, children: children});
-        }
-      }
-
-      _onFastBackward(params) {
-        const previousPosition = params.positionInRow + ((params.row - 2) * this.emojiInRow),
-          secondLastPosition = params.positionInRow + ((params.rows - 2) * this.emojiInRow),
-          lastPosition = params.positionInRow + ((params.rows - 1) * this.emojiInRow);
-        // if cant go up then go last
-        if (params.row === 1) {
-          if (lastPosition < params.count) {
-            params.children[lastPosition].focus();
-          } else {
-            params.children[secondLastPosition].focus();
-          }
-        } else {
-          params.children[previousPosition].focus();
-        }
-      }
-
-      _onFastForward(params) {
-        const nextPosition = params.positionInRow + (params.row * this.emojiInRow);
-        if (params.row <= params.rows && nextPosition < params.count) {
-          params.children[nextPosition].focus();
-        } else {
-          params.children[params.positionInRow].focus();
-        }
-      }
-
-      _onPreviousElement(params) {
-        // select previous element or the last element in row
-        if (params.previousElement) {
-          params.previousElement.focus();
-        } else {
-          // if the last item is more than the count then select the second last element as the last element is not part of the emoji list
-          if (params.lastElement < params.count) {
-            params.children[params.lastElement].focus();
-          } else {
-            params.children[params.count - 1].focus();
-          }
-        }
-      }
-
-      _onNextElement(params) {
-        // select previous element or the last element in row and not the last element
-        if (params.nextElement && params.position < params.lastElement && params.position + 1 < params.count) {
-          params.nextElement.focus();
-        } else {
-          params.children[params.firstElement].focus();
-        }
-      }
-
-      setEmojiTap(event) {
-        let model,
-          emoji;
-        // get the model and handle both keyboard and normal event
-        if (event.type === 'tap') {
-          model = this.$.mainList.modelForElement(event.target);
-        } else {
-          model = this.$.mainList.modelForElement(event.detail.keyboardEvent.target);
-        }
-        if (model) {
-          // get the correct shortname
-          if (model.emoji._diverse && this.tone !== 'tone0' && this.selected !== 0) {
-            emoji = model.emoji._diversities[this.tone];
-          } else {
-            emoji = model.emoji;
-          }
-          // HACK clear emoji and re-emoji to make it observable
-          this.emoji = '';
-          this.emoji = this._getEmoji(emoji);
-
-          // fires the event emoji changed
-          this.dispatchEvent(new CustomEvent('emoji-changed', {
-            detail: {
-              emoji: this.emoji
-            },
-            bubbles: true,
-            composed: true
-          }));
-
-          // if already in the list remove it
-          for (let i in this.recentlyUsedEmojis) {
-            if (this.recentlyUsedEmojis[i] === emoji.code_points.base) {
-              this.splice('recentlyUsedEmojis', i, 1);
-              break;
-            }
-          }
-          //  also add it to the recentlyUsedEmojis
-          this.unshift('recentlyUsedEmojis', emoji.code_points.base);
-        }
-      }
-
-      onClearSearchTap() {
-        this.search = [];
-      }
-    }
-
-    window.customElements.define(EmojioneSelector.is, EmojioneSelector);
-  </script>
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../iron-image/iron-image.html">
+<link rel="import" href="../iron-localstorage/iron-localstorage.html">
+<link rel="import" href="../paper-tabs/paper-tabs.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../paper-menu-button/paper-menu-button.html">
+<link rel="import" href="../iron-selector/iron-selector.html">
+<link rel="import" href="../neon-animation/web-animations.html">
+<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+
+<link rel="import" href="emojione-icons.html">
+<link rel="import" href="emojione-badge.html">
+<link rel="import" href="emojione-emoji.html">
+<link rel="import" href="emojione-chip-input.html">
+
+<!--
+`emojione-selector` works best as a emoji picker and is powered by the emojione library.
+
+It ships with the diversity update so you can swutch skin tones on the fly
+You can also use the advanced search feature to search with multiple search terms
+
+Example:
+
+    <emojione-selector></emojione-selector>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--emojione-selector` | Mixin applied to the picker | `{}`
+`--emojione-selector-paper-tabs` | Mixin applied to the paper-tabs | `{}`
+`--emojione-selector-paper-tab` | Mixin applied to the paper-tab | `{}`
+`--emojione-selector-paper-tab-icon` | Mixin applied to the icon in paper tab | `{}`
+`--emojione-selector-paper-tab-icon-focused` | Mixin applied to the icon in paper tab when it is focused | `{}`
+`--emojione-selector-tab-container` | Mixin applied to the container of the search bar and tone picker | `{}`
+`--emojione-selector-list` | Mixin applied to the list picker | `{}`
+`--emojione-emoji-container` | Mixin applied to the emoji div of a emoji in the list | `{}`
+`--emojione-selector-title-icon` | Mixin applied to the emoji icon in the tab | `{}`
+
+You can also use any of the Polymer.PaperInputContainer styles to style the
+search input, or the Polymer.PaperTabs and Polymer.PaperTab styles to style
+the category tabs or the Polymer.MenuButton to style the tone picker or the
+Polymer.PaperIconButton to style the icon buttons or the Polymer.PaperMaterial
+to style the tone picker's dialog.
+
+-->
+
+<dom-module id="emojione-selector">
+  <template>
+    <style is="custom-style">
+      * {
+        -webkit-tap-highlight-color: transparent;
+        -moz-tap-highlight-color: transparent;
+        tap-highlight-color: transparent;
+      }
+      :host {
+        @apply --layout-vertical;
+        outline: none;
+        position: relative;
+        @apply --emojione-selector;
+      }
+      paper-material {
+        background-color: #fff;
+      }
+      iron-selector {
+        @apply --layout-vertical;
+        @apply --layout-justified;
+        @apply --layout-center;
+      }
+      iron-selector emojione-emoji {
+        --emojione-emoji-container: {
+          height: auto;
+          width: auto;
+          border-radius: 0;
+        };
+      }
+      iron-selector emojione-emoji div {
+        background-color: #ffcf11;
+        border-radius: 50%;
+        height: 20px;
+        width: 20px;
+      }
+      iron-selector emojione-emoji.iron-selected div {
+        transform: scale(1.2);
+      }
+      iron-selector emojione-emoji div.tone1 {
+        background-color: #ffe1bd;
+      }
+      iron-selector emojione-emoji div.tone2 {
+        background-color: #fed0ac;
+      }
+      iron-selector emojione-emoji div.tone3 {
+        background-color: #d6a57c;
+      }
+      iron-selector emojione-emoji div.tone4 {
+        background-color: #b47d56;
+      }
+      iron-selector emojione-emoji div.tone5 {
+        background-color: #8a6859;
+      }
+      .emoji-list {
+        @apply --layout-horizontal;
+        @apply --layout-wrap;
+        @apply --layout-start-aligned;
+        height: 150px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        box-sizing: border-box;
+        @apply --emojione-selector-list;
+      }
+      emojione-emoji iron-image {
+        height: 32px;
+        width: 32px;
+      }
+      paper-tabs {
+        background-color: #fff;
+        border-top: 2px solid;
+        border-bottom: 2px solid;
+        border-color: var(--paper-grey-300);
+        --paper-tabs-selection-bar-color: var(--paper-blue-500);
+        @apply --emojione-selector-paper-tabs;
+      }
+      paper-tab {
+        --paper-tab: {
+          padding: 0;
+        }
+        @apply --emojione-selector-paper-tab;
+      }
+      paper-tab iron-icon {
+        --iron-icon-width: 20px;
+        --iron-icon-height: 20px;
+        --iron-icon-fill-color: var(--paper-grey-800);
+        @apply --emojione-selector-paper-tab-icon;
+      }
+      paper-tab[focused] iron-icon {
+        --iron-icon-fill-color: var(--paper-blue-500);
+        @apply --emojione-selector-paper-tab-icon-focused;
+      }
+      emojione-badge {
+        opacity: 0;
+      }
+      emojione-badge.show {
+        opacity: 1;
+      }
+      .tab-container {
+        @apply --layout-horizontal;
+        @apply --layout-center;
+        background-color: #fff;
+        border-bottom: 2px solid;
+        border-color: var(--paper-grey-300);
+        padding-left: 4px;
+        @apply --emojione-selector-tab-container;
+      }
+      .dropdown-trigger {
+        --emojione-emoji-container: {
+          display: block;
+          border-radius: 50%;
+          height: 40px;
+          width: 40px;
+          padding: 10px;
+        };
+      }
+      .dropdown-trigger .pickcon {
+        background-color: #ffcf11;
+        border-radius: 50%;
+        height: 20px;
+        width: 20px;
+      }
+      .dropdown-trigger .pickcon.tone1 {
+        background-color: #ffe1bd;
+      }
+      .dropdown-trigger .pickcon.tone2 {
+        background-color: #fed0ac;
+      }
+      .dropdown-trigger .pickcon.tone3 {
+        background-color: #d6a57c;
+      }
+      .dropdown-trigger .pickcon.tone4 {
+        background-color: #b47d56;
+      }
+      .dropdown-trigger .pickcon.tone5 {
+        background-color: #8a6859;
+      }
+      emojione-chip-input {
+        @apply --layout-flex;
+        outline: none;
+        margin-right: 12px;
+        --paper-input-container-focus-color: var(--paper-blue-500);
+        @apply --emojione-selector-chip;
+      }
+      paper-icon-button {
+        color: var(--paper-grey-700);
+      }
+      paper-menu-button {
+        padding: 5px;
+      }
+      paper-menu-button paper-icon-button {
+        color: var(--paper-grey-800);
+      }
+
+    </style>
+    <!-- storage for the most recent emoji -->
+    <iron-localstorage name="recentemoji" value="{{recentlyUsedEmojis}}" on-iron-localstorage-load-empty="initRecentEmoji"></iron-localstorage>
+
+    <!-- storage for the most recent skin tone -->
+    <iron-localstorage name="skintone" value="{{tone}}" on-iron-localstorage-load-empty="initSkintone"></iron-localstorage>
+
+    <!-- get the categories json -->
+    <iron-ajax auto id="categoryAjax" url="{{categoryUrl}}" handle-as="json" last-response="{{categories}}"></iron-ajax>
+
+    <!-- get the latest emoji json -->
+    <iron-ajax id="emojiAjax" url="{{url}}" handle-as="json" last-response="{{rawemoji}}"></iron-ajax>
+
+    <iron-a11y-keys target="[[ctrlTarget]]" keys="ctrl+0 ctrl+1 ctrl+2 ctrl+3 ctrl+4 ctrl+5 ctrl+6 ctrl+7 ctrl+8 ctrl+9" on-keys-pressed="onCtrlComboEvent"></iron-a11y-keys>
+
+    <!-- arrow key navigation for emoji list -->
+    <iron-a11y-keys target="[[arrowTarget]]" keys="up right down left" on-keys-pressed="onArrowEvent"></iron-a11y-keys>
+
+    <!-- enter key select for emoji -->
+    <iron-a11y-keys target="[[arrowTarget]]" keys="enter" on-keys-pressed="setEmojiTap"></iron-a11y-keys>
+
+    <paper-tabs selected="{{selected}}" noink>
+      <paper-tab id="tab0" title="Recently used emoji">
+        <iron-icon icon="emojione-icons:history"></iron-icon>
+      </paper-tab>
+      <template is="dom-repeat" items="[[categories]]" as="category">
+        <paper-tab id$="tab[[_getNormalIndex(index)]]" title$="[[category.category_label]]">
+          <iron-icon icon="emojione-icons:{{_getCategoryIcon(category.category)}}"></iron-icon>
+        </paper-tab>
+      </template>
+    </paper-tabs>
+
+    <!-- position relative to but outside helper badges -->
+    <emojione-badge id="badge0" class$="[[_getClass(hasCtrl)]]">0</emojione-badge>
+    <template is="dom-repeat" items="[[categories]]" as="category">
+      <emojione-badge id="badge[[_getNormalIndex(index)]]" class$="[[_getClass(hasCtrl)]]">[[_getNormalIndex(index)]]</emojione-badge>
+    </template>
+
+    <div class="tab-container">
+
+      <!-- skin tone picker -->
+      <paper-menu-button dynamic-align vertical-offset="8">
+        <emojione-emoji slot="dropdown-trigger" class="dropdown-trigger" title="Skin tone selector" tabindex="0">
+          <div class$="pickcon [[tone]]"></div>
+        </emojione-emoji>
+        <paper-material elevation="1" slot="dropdown-content">
+          <iron-selector attr-for-selected="name" selected="{{tone}}">
+            <emojione-emoji name="tone0" tabindex="0">
+              <div></div>
+            </emojione-emoji>
+            <template is="dom-repeat" items="[[modifiers]]" as="modifier">
+              <emojione-emoji name="{{modifier}}" tabindex="0">
+                <div class$="{{modifier}}"></div>
+              </emojione-emoji>
+            </template>
+          </iron-selector>
+        </paper-material>
+      </paper-menu-button>
+
+      <!-- search bar -->
+      <emojione-chip-input id="searchField" label="Search emoji" items="{{search}}" no-label-float closable></emojione-chip-input>
+
+      <!-- clear the search -->
+      <paper-icon-button id="clearSearch" icon="emojione-icons:cancel"></paper-icon-button>
+
+    </div>
+
+    <!-- emoji list -->
+    <div id="emojiList" class="emoji-list">
+      <template id="mainList" is="dom-repeat" items="[[currentList]]" as="emoji" initial-count="69">
+        <emojione-emoji tabindex="0">
+          <iron-image
+            class="{{_getToneProperty(emoji, tone, '_class', selected)}}"
+            alt="{{_getToneProperty(emoji, tone, 'name', selected)}}"
+            title="{{_getToneProperty(emoji, tone, 'name', selected)}}"
+            src="{{_getToneProperty(emoji, tone, '_src', selected)}}"
+            sizing="contain"></iron-image>
+        </emojione-emoji>
+      </template>
+    </div>
+
+  </template>
+  <script src="../emojione/lib/js/emojione.min.js"></script>
+  <script src="fuse.min.js"></script>
+  <script src="lodash.custom.min.js"></script>
+  <script>
+    Polymer({
+
+      is: 'emojione-selector',
+
+      behaviors: [Polymer.IronResizableBehavior],
+
+      properties: {
+        /**
+         * Fired when emoji changes.
+         *
+         * @event emoji-changed
+         */
+
+        /**
+         * the url for category info json
+        */
+        categoryUrl: {
+          type: String
+        },
+        /**
+         * the url for emoji info json
+        */
+        url: {
+          type: String
+        },
+        /**
+         * if the picker is open, useful to control the picker tab
+         */
+        opened: {
+          type: Object,
+          notify: true
+        },
+
+        /**
+         * most recent selected emoji
+         */
+        emoji: {
+          type: String,
+          notify: true
+        },
+
+        /**
+         * search terms for fuse js
+         */
+        search: {
+          type: Array,
+          value: []
+        },
+
+        /**
+         * category icon name map
+         */
+        categoryIconMap: {
+          type: Object,
+          value: {
+            'people': 'insert_emoticon',
+            'nature': 'nature',
+            'food': 'local_florist',
+            'activity': 'local_attraction',
+            'travel': 'card_travel',
+            'objects': 'build',
+            'symbols': 'extension',
+            'flags': 'flag',
+            'regional': 'font_download'
+          }
+        },
+
+        /**
+         * category data the list of categories
+         */
+        categories: {
+          type: Array,
+          value: []
+        },
+
+        /**
+         * the selected category tab
+         */
+        selected: {
+          type: Number,
+          value: 0
+        },
+
+        /**
+         * previously selected tab prior to search
+         */
+        prevSelected: {
+          type: Number
+        },
+
+        /**
+         * initial list of tabs prior to search
+         */
+        initTabs: {
+          type: Number
+        },
+
+        /**
+         * the current selected tone
+         */
+        tone: {
+          type: String,
+          notify: true,
+          value: ''
+        },
+
+        /**
+         * stores the raw list of emojis from emoji.json from emojione
+         */
+        rawemoji: {
+          type: Object
+        },
+
+        /**
+         * currently selected emoji
+         */
+        currentList: {
+          type: Array,
+          value: []
+        },
+
+        /**
+         * List of all processed emoji categories
+         */
+        emojis: {
+          type: Object,
+          value: {}
+        },
+
+        /**
+         * maximum possible number of emoji in a row
+         */
+        emojiInRow: {
+          type: Number
+        },
+
+        /**
+         * fuse js object
+         */
+        fuse: {
+          type: Object
+        },
+
+        /**
+         * ctrl keys tab target
+         */
+        ctrlTarget: {
+          type: Object
+        },
+
+        /**
+         * to show control key helpers
+         */
+        showCtrl: {
+          type: Boolean,
+          value: true
+        },
+
+        /**
+         * has the control key down
+         */
+        hasCtrl: {
+          type: Boolean
+        },
+
+        /**
+         * arrow keys navigation target
+         */
+        arrowTarget: {
+          type: Object
+        },
+
+        /**
+         * ctrl keys tab targets
+         */
+        tabTargets: {
+          type: Array,
+          value: []
+        },
+
+        /**
+         * the search index for fuse.js
+         */
+        searchIndex: {
+          type: Array,
+          value: []
+        },
+
+        /**
+         * search options for fuse.js
+         */
+        searchOptions: {
+          type: Object,
+          value: {
+            shouldSort: true,
+            threshold: 0.4,
+            location: 0,
+            distance: 20,
+            maxPatternLength: 16,
+            minMatchCharLength: 1,
+            keys: ['keywords', 'name', 'shortname', 'category']
+          }
+        },
+
+        /**
+         * is true when the component is ready to be used by the outside
+         */
+        isRendered: {
+          type: Boolean,
+          notify: true
+        },
+
+        /**
+         * list of skin tone modifiers
+         */
+        modifiers: {
+          type: Array,
+          value: ['tone1', 'tone2', 'tone3', 'tone4', 'tone5']
+        },
+
+        /**
+         * list of recently used emoji
+         */
+        recentlyUsedEmojis: {
+          type: Array
+        },
+
+        /**
+         * list of recently used emoji which is rendered
+         */
+        recentlyUsedEmojisRendered: {
+          type: Array
+        },
+
+        /**
+         * search results from fuse.js
+         */
+        searchResults: {
+          type: Array,
+          value: []
+        },
+
+        /**
+         * extract attributes
+         */
+        extractAttributes: {
+          type: Array,
+          value: ['class', 'src']
+        }
+      },
+
+      observers: [
+        'onRecentlyUsedEmojisChange(rawemoji, recentlyUsedEmojis.*)', 'onOpenedChange(opened, isRendered)', 'onSelectedChange(selected)', 'onSearchChange(search.*)'
+      ],
+
+      listeners: {
+        'emojiList.tap': 'setEmojiTap',
+        'clearSearch.tap': 'onClearSearchTap',
+        'categoryAjax.response': '_onCategoryResponse',
+        'emojiAjax.response': '_onEmojiResponse',
+        'iron-resize': 'onResize',
+        'keydown': 'onCtrlEvent',
+        'keyup': 'onCloseCtrlEvent'
+      },
+
+      ready: function () {
+        this.categoryUrl = this.importPath + '../emojione/categories.json';
+        this.url = this.importPath + '../emojione/emoji.json';
+
+        emojione.ascii = true;
+
+        this.$.clearSearch.style.display = 'none';
+
+        this.ctrlTarget = this;
+        this.arrowTarget = this.$.emojiList;
+      },
+
+      /**
+       * initiate the local storage for recent emoji and skin tone
+       */
+
+      initRecentEmoji: function () {
+        this.recentlyUsedEmojis = [];
+      },
+
+      initSkintone: function () {
+        this.tone = 'tone0';
+      },
+
+      /**
+       * observers
+       */
+
+      onRecentlyUsedEmojisChange: function (rawemoji, recentlyUsedEmojis) {
+        if (recentlyUsedEmojis.base && recentlyUsedEmojis.base.length > 0 && rawemoji) {
+          // parse and add them to recentlyUsedEmojisRendered
+          this.recentlyUsedEmojisRendered = [];
+          for (var emoji of recentlyUsedEmojis.base) {
+            this.push('recentlyUsedEmojisRendered', this._convertImgtoAttributes(_.cloneDeep(rawemoji[emoji])));
+          }
+        }
+      },
+
+      onOpenedChange: function (opened, isRendered) {
+        // if the picker was opened do it
+        if (opened && isRendered) {
+          // if there are recently used emoji select that tab
+          if (this.recentlyUsedEmojis.length > 0) {
+            this.selected = 0;
+          } else {
+            this.selected = 1;
+          }
+          // focus the selected tab
+          this.async(function () {
+            this.$$('#tab' + this.selected).focus();
+          }, 200);
+          this.setAttribute('tabindex', '0');
+        } else {
+          this.setAttribute('tabindex', '-1');
+        }
+      },
+
+      onSearchChange: function (search) {
+        // if selected is in regular bounds store it
+        if (this.selected > -1 && this.selected < this.initTabs) {
+          this.prevSelected = this.selected;
+        }
+        if (search.base.length > 0) {
+          this.$.clearSearch.style.display = '';
+        } else {
+          this.$.clearSearch.style.display = 'none';
+          // restore to prev tab
+          this.selected = this.prevSelected;
+        }
+        // search only if value is a number greater than 0
+        if (search.value > 0) {
+          // clean searchResults
+          this.searchResults = [];
+          // init search for all keywords
+          for (var i in search.base) {
+            this.searchResults = _.concat(this.searchResults, this.fuse.search(search.base[i].text));
+          }
+
+          // only keep unique
+          this.currentList = [];
+          this.currentList = _.uniqBy(this.searchResults);
+          this.selected = -1;
+        }
+      },
+
+      onSelectedChange: function (selected) {
+        // only if selected if less than -1
+        if (selected < 0) {
+          return;
+        }
+
+        this.currentList = [];
+
+        if (selected === 0) {
+          this.currentList = this.recentlyUsedEmojisRendered;
+        } else {
+          this.currentList = this.get('emojis.' + this.categories[selected - 1].category);
+        }
+      },
+
+      _getNormalIndex: function (index) {
+        return index + 1;
+      },
+
+      _getClass: function (hasCtrl) {
+        if (hasCtrl) {
+          return 'show';
+        } else {
+          return '';
+        }
+      },
+
+      // get property in toned-safe way in case the conditions meet
+      _getToneProperty: function (emoji, tone, property, selected) {
+        if (tone === 'tone0' || !emoji._diverse || selected === 0) {
+          return emoji[property];
+        } else {
+          return emoji._diversities[tone][property];
+        }
+      },
+
+      _getCategoryIcon: function (category) {
+        return this.get('categoryIconMap.' + category);
+      },
+
+      _getEmoji: function (emoji) {
+        return emoji.shortname || emoji.code_points.base;
+      },
+
+      _renderEmoji: function (emoji) {
+        return emojione.toImage(this._getEmoji(emoji));
+      },
+
+      _getAttribute: function (str, attr) {
+        var end = '"';
+        attr += '="';
+        attr = str.indexOf(attr) + attr.length;
+        end = str.indexOf(end, attr);
+        return str.substring(attr, end);
+      },
+
+      _convertImgtoAttributes: function (emoji) {
+        var img = this._renderEmoji(emoji);
+        // put img attributes to the emoji tag
+        for (var attribute of this.extractAttributes) {
+          emoji['_' + attribute] = this._getAttribute(img, attribute);
+        }
+        return emoji;
+      },
+
+      _onCategoryResponse: function () {
+        // prepare the emoji category list
+        for (var category of this.categories) {
+          this.set('emojis.' + category.category, []);
+        }
+        // request for emojis list
+        this.$.emojiAjax.generateRequest();
+      },
+
+      _onEmojiResponse: function () {
+        var emoji,
+          i,
+          obj;
+
+        // put emoji in category
+        for (obj in this.rawemoji) {
+          // add img attributes to the obj
+          this.rawemoji[obj] = this._convertImgtoAttributes(this.rawemoji[obj]);
+          // for getting diversity
+          emoji = this.rawemoji[obj];
+          // no diversity support
+          emoji._diverse = false;
+          // if this is a diversity parent push it with diverse set true
+          if (emoji.diversities.length > 0) {
+            // add all tones as children
+            emoji._diversities = {};
+            // the emoji has diversity support
+            emoji._diverse = true;
+            for (i in emoji.diversities) {
+              emoji._diversities['tone' + (parseInt(i) + 1)] = this.rawemoji[emoji.diversities[i]];
+            }
+          }
+          // skip other diversity children i.e dont push them
+          if (emoji.diversity) {
+            continue;
+          }
+          // create a new category if not in categories
+          if (!this.emojis.hasOwnProperty(emoji.category)) {
+            this.push('categories', {
+              'order': -1,
+              'category': emoji.category,
+              'category_label': emoji.category
+            });
+            this.set('emojis.' + emoji.category, []);
+          }
+
+          // push the item in the array
+          this.push('emojis.' + emoji.category, emoji);
+
+          // also build the index for searching
+          this.push('searchIndex', _.cloneDeep(emoji));
+        }
+
+        // go through all categories
+        for (emoji in this.emojis) {
+          this.get('emojis.' + emoji).sort(function (a, b) {
+            // a is less than b by some ordering criterion
+            if (a.order < b.order) {
+              return -1;
+            }
+
+            // a is greater than b by the ordering criterion
+            if (a.order > b.order) {
+              return 1;
+            }
+
+            // a must be equal to b
+            return 0;
+          });
+        }
+
+        // sort according to the 'order' register initial tab count
+        this.initTabs = this.categories.length;
+
+        // register fuse js for searching later
+        this.fuse = new Fuse(this.searchIndex, this.searchOptions);
+
+        // force the currently selected
+        this.onSelectedChange(this.selected);
+
+        // initiate a resize call to calculate the emoji in a row
+        this.onResize();
+
+        this.isRendered = true;
+      },
+
+      /**
+       * tactile event listeners
+       */
+
+      onResize: function () {
+        this.cancelDebouncer('emojioneResizeDebounce');
+
+        this.debounce('emojioneResizeDebounce', function () {
+          var i,
+            j,
+            badge,
+            tab;
+
+          this.emojiInRow = Math.floor(this.$.emojiList.clientWidth / 48);
+
+          // set badges => tabs
+          this.$.badge0.position = {
+            'top': this.$.tab0.offsetTop + this.$.tab0.clientHeight,
+            'left': this.$.tab0.offsetLeft + ((this.$.tab0.clientWidth - this.$.badge0.clientWidth) / 2)
+          };
+
+          if (this.categories) {
+            this.async(function () {
+              for (i in this.categories) {
+                j = parseInt(i) + 1;
+                badge = Polymer.dom(this.root).querySelector('#badge' + j);
+                tab = Polymer.dom(this.root).querySelector('#tab' + j);
+
+                badge.position = {
+                  'top': tab.offsetTop + tab.clientHeight,
+                  'left': tab.offsetLeft + ((tab.clientWidth - badge.clientWidth) / 2)
+                };
+              }
+            });
+          }
+        }, 200);
+      },
+
+      onCloseCtrlEvent: function (event) {
+        // if ctrl key is up
+        if (!event.ctrlKey) {
+          this.hasCtrl = false;
+        }
+      },
+
+      onCtrlEvent: function (event) {
+        // if ctrl key is down
+        if (event.ctrlKey && this.showCtrl) {
+          this.hasCtrl = true;
+        }
+      },
+
+      onCtrlComboEvent: function (event) {
+        var keyboardEvent = event.detail.keyboardEvent,
+          key = keyboardEvent.key || keyboardEvent.code;
+        if (this.isRendered) {
+          this.selected = parseInt(key);
+        }
+      },
+
+      onArrowEvent: function (event) {
+        // get next and previous sibling
+        var keyboardEvent = event.detail.keyboardEvent,
+          currentElement = keyboardEvent.target,
+          parentElement = keyboardEvent.target.parentElement,
+          children = parentElement.children,
+          // https://stackoverflow.com/a/23528539
+          position = Array.prototype.indexOf.call(children, currentElement),
+          row = Math.floor(position / this.emojiInRow) + 1,
+          // skip the last element from count
+          count = children.length - 1,
+          rows = Math.ceil(count / this.emojiInRow),
+          positionInRow = position - ((row - 1) * this.emojiInRow),
+          nextElement = keyboardEvent.target.nextElementSibling,
+          previousElement = keyboardEvent.target.previousElementSibling,
+          firstElement = (row - 1) * this.emojiInRow,
+          lastElement = (row * this.emojiInRow) - 1,
+          key = keyboardEvent.key || keyboardEvent.code;
+
+        //check what key and act accordingly
+        if (key === 'ArrowLeft') {
+          this._onPreviousElement({previousElement: previousElement, row: row, count: count, children: children, lastElement: lastElement});
+        } else if (key === 'ArrowRight') {
+          this._onNextElement({
+            nextElement: nextElement,
+            row: row,
+            count: count,
+            position: position,
+            children: children,
+            firstElement: firstElement,
+            lastElement: lastElement
+          });
+        } else if (key === 'ArrowUp') {
+          this._onFastBackward({positionInRow: positionInRow, rows: rows, row: row, count: count, children: children});
+        } else if (key === 'ArrowDown') {
+          this._onFastForward({positionInRow: positionInRow, rows: rows, row: row, count: count, children: children});
+        }
+      },
+
+      _onFastBackward: function (params) {
+        var previousPosition = params.positionInRow + ((params.row - 2) * this.emojiInRow),
+          secondLastPosition = params.positionInRow + ((params.rows - 2) * this.emojiInRow),
+          lastPosition = params.positionInRow + ((params.rows - 1) * this.emojiInRow);
+        // if cant go up then go last
+        if (params.row === 1) {
+          if (lastPosition < params.count) {
+            params.children[lastPosition].focus();
+          } else {
+            params.children[secondLastPosition].focus();
+          }
+        } else {
+          params.children[previousPosition].focus();
+        }
+      },
+
+      _onFastForward: function (params) {
+        var nextPosition = params.positionInRow + (params.row * this.emojiInRow);
+        if (params.row <= params.rows && nextPosition < params.count) {
+          params.children[nextPosition].focus();
+        } else {
+          params.children[params.positionInRow].focus();
+        }
+      },
+
+      _onPreviousElement: function (params) {
+        // select previous element or the last element in row
+        if (params.previousElement) {
+          params.previousElement.focus();
+        } else {
+          // if the last item is more than the count then select the second last element as the last element is not part of the emoji list
+          if (params.lastElement < params.count) {
+            params.children[params.lastElement].focus();
+          } else {
+            params.children[params.count - 1].focus();
+          }
+        }
+      },
+
+      _onNextElement: function (params) {
+        // select previous element or the last element in row and not the last element
+        if (params.nextElement && params.position < params.lastElement && params.position + 1 < params.count) {
+          params.nextElement.focus();
+        } else {
+          params.children[params.firstElement].focus();
+        }
+      },
+
+      setEmojiTap: function (event) {
+        var model,
+          emoji;
+        // get the model and handle both keyboard and normal event
+        if (event.type === 'tap') {
+          model = this.$.mainList.modelForElement(event.target);
+        } else {
+          model = this.$.mainList.modelForElement(event.detail.keyboardEvent.target);
+        }
+        if (model) {
+          // get the correct shortname
+          if (model.emoji._diverse && this.tone !== 'tone0' && this.selected !== 0) {
+            emoji = model.emoji._diversities[this.tone];
+          } else {
+            emoji = model.emoji;
+          }
+          // HACK clear emoji and re-emoji to make it observable
+          this.emoji = '';
+          this.emoji = this._getEmoji(emoji);
+
+          // fires the event emoji changed
+          this.dispatchEvent(new CustomEvent('emoji-changed', {
+            detail: {
+              emoji: this.emoji
+            },
+            bubbles: true,
+            composed: true
+          }));
+
+          // if already in the list remove it
+          for (var i in this.recentlyUsedEmojis) {
+            if (this.recentlyUsedEmojis[i] === emoji.code_points.base) {
+              this.splice('recentlyUsedEmojis', i, 1);
+              break;
+            }
+          }
+          //  also add it to the recentlyUsedEmojis
+          this.unshift('recentlyUsedEmojis', emoji.code_points.base);
+        }
+      },
+
+      onClearSearchTap: function () {
+        this.search = [];
+      }
+    });
+  </script>
 </dom-module>
\ No newline at end of file
diff --git a/fuse.min.js b/fuse.min.js
index 1f25d88..4b8a612 100644
--- a/fuse.min.js
+++ b/fuse.min.js
@@ -1,9 +1,9 @@
-/*!
- * Fuse.js v3.0.1 - Lightweight fuzzy-search (http://fusejs.io)
- * 
- * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
- * All Rights Reserved. Apache Software License 2.0
- * 
- * http://www.apache.org/licenses/LICENSE-2.0
- */
+/*!
+ * Fuse.js v3.0.1 - Lightweight fuzzy-search (http://fusejs.io)
+ * 
+ * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
+ * All Rights Reserved. Apache Software License 2.0
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
 !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Fuse",[],t):"object"==typeof exports?exports.Fuse=t():e.Fuse=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=8)}([function(e,t,n){"use strict";e.exports=function(e){return"[object Array]"===Object.prototype.toString.call(e)}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(5),s=n(7),a=n(4),c=function(){function e(t,n){var o=n.location,i=void 0===o?0:o,s=n.distance,c=void 0===s?100:s,h=n.threshold,u=void 0===h?.6:h,l=n.maxPatternLength,f=void 0===l?32:l,v=n.isCaseSensitive,d=void 0!==v&&v,p=n.tokenSeparator,g=void 0===p?/ +/g:p,m=n.findAllMatches,y=void 0!==m&&m,k=n.minMatchCharLength,x=void 0===k?1:k;r(this,e),this.options={location:i,distance:c,threshold:u,maxPatternLength:f,isCaseSensitive:d,tokenSeparator:g,findAllMatches:y,minMatchCharLength:x},this.pattern=this.options.isCaseSensitive?t:t.toLowerCase(),this.pattern.length<=f&&(this.patternAlphabet=a(this.pattern))}return o(e,[{key:"search",value:function(e){if(this.options.isCaseSensitive||(e=e.toLowerCase()),this.pattern===e)return{isMatch:!0,score:0,matchedIndices:[[0,e.length-1]]};var t=this.options,n=t.maxPatternLength,r=t.tokenSeparator;if(this.pattern.length>n)return i(e,this.pattern,r);var o=this.options,a=o.location,c=o.distance,h=o.threshold,u=o.findAllMatches,l=o.minMatchCharLength;return s(e,this.pattern,this.patternAlphabet,{location:a,distance:c,threshold:h,findAllMatches:u,minMatchCharLength:l})}}]),e}();e.exports=c},function(e,t,n){"use strict";var r=n(0),o=function e(t,n,o){if(n){var i=n.indexOf("."),s=n,a=null;-1!==i&&(s=n.slice(0,i),a=n.slice(i+1));var c=t[s];if(null!==c&&void 0!==c)if(a||"string"!=typeof c&&"number"!=typeof c)if(r(c))for(var h=0,u=c.length;h<u;h+=1)e(c[h],a,o);else a&&e(c,a,o);else o.push(c)}else o.push(t);return o};e.exports=function(e,t){return o(e,t,[])}},function(e,t,n){"use strict";e.exports=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=[],r=-1,o=-1,i=0,s=e.length;i<s;i+=1){var a=e[i];a&&-1===r?r=i:a||-1===r||(o=i-1,o-r+1>=t&&n.push([r,o]),r=-1)}return e[i-1]&&i-r>=t&&n.push([r,i-1]),n}},function(e,t,n){"use strict";e.exports=function(e){for(var t={},n=e.length,r=0;r<n;r+=1)t[e.charAt(r)]=0;for(var o=0;o<n;o+=1)t[e.charAt(o)]|=1<<n-o-1;return t}},function(e,t,n){"use strict";e.exports=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:/ +/g,r=e.match(new RegExp(t.replace(n,"|"))),o=!!r,s=[];if(o)for(i=0,matchesLen=r.length;i<matchesLen;i+=1)match=r[i],s.push([e.indexOf(match),match.length-1]);return{score:isMatched?.5:1,isMatch:o,matchedIndices:s}}},function(e,t,n){"use strict";e.exports=function(e,t){var n=t.errors,r=void 0===n?0:n,o=t.currentLocation,i=void 0===o?0:o,s=t.expectedLocation,a=void 0===s?0:s,c=t.distance,h=void 0===c?100:c,u=r/e.length,l=Math.abs(a-i);return h?u+l/h:l?1:u}},function(e,t,n){"use strict";var r=n(6),o=n(3);e.exports=function(e,t,n,i){for(var s=i.location,a=void 0===s?0:s,c=i.distance,h=void 0===c?100:c,u=i.threshold,l=void 0===u?.6:u,f=i.findAllMatches,v=void 0!==f&&f,d=i.minMatchCharLength,p=void 0===d?1:d,g=a,m=e.length,y=l,k=e.indexOf(t,g),x=t.length,S=[],M=0;M<m;M+=1)S[M]=0;if(-1!=k){var b=r(t,{errors:0,currentLocation:k,expectedLocation:g,distance:h});if(y=Math.min(b,y),-1!=(k=e.lastIndexOf(t,g+x))){var _=r(t,{errors:0,currentLocation:k,expectedLocation:g,distance:h});y=Math.min(_,y)}}k=-1;for(var L=[],w=1,A=x+m,C=1<<x-1,F=0;F<x;F+=1){for(var O=0,P=A;O<P;){r(t,{errors:F,currentLocation:g+P,expectedLocation:g,distance:h})<=y?O=P:A=P,P=Math.floor((A-O)/2+O)}A=P;var j=Math.max(1,g-P+1),z=v?m:Math.min(g+P,m)+x,I=Array(z+2);I[z+1]=(1<<F)-1;for(var T=z;T>=j;T-=1){var E=T-1,K=n[e.charAt(E)];if(K&&(S[E]=1),I[T]=(I[T+1]<<1|1)&K,0!==F&&(I[T]|=(L[T+1]|L[T])<<1|1|L[T+1]),I[T]&C&&(w=r(t,{errors:F,currentLocation:E,expectedLocation:g,distance:h}))<=y){if(y=w,(k=E)<=g)break;j=Math.max(1,2*g-k)}}if(r(t,{errors:F+1,currentLocation:g,expectedLocation:g,distance:h})>y)break;L=I}return{isMatch:k>=0,score:0===w?.001:w,matchedIndices:o(S,p)}}},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=n(1),s=n(2),a=n(0),c=function(){function e(t,n){var o=n.location,i=void 0===o?0:o,a=n.distance,c=void 0===a?100:a,h=n.threshold,u=void 0===h?.6:h,l=n.maxPatternLength,f=void 0===l?32:l,v=n.caseSensitive,d=void 0!==v&&v,p=n.tokenSeparator,g=void 0===p?/ +/g:p,m=n.findAllMatches,y=void 0!==m&&m,k=n.minMatchCharLength,x=void 0===k?1:k,S=n.id,M=void 0===S?null:S,b=n.keys,_=void 0===b?[]:b,L=n.shouldSort,w=void 0===L||L,A=n.getFn,C=void 0===A?s:A,F=n.sortFn,O=void 0===F?function(e,t){return e.score-t.score}:F,P=n.tokenize,j=void 0!==P&&P,z=n.matchAllTokens,I=void 0!==z&&z,T=n.includeMatches,E=void 0!==T&&T,K=n.includeScore,R=void 0!==K&&K,q=n.verbose,B=void 0!==q&&q;r(this,e),this.options={location:i,distance:c,threshold:u,maxPatternLength:f,isCaseSensitive:d,tokenSeparator:g,findAllMatches:y,minMatchCharLength:x,id:M,keys:_,includeMatches:E,includeScore:R,shouldSort:w,getFn:C,sortFn:O,verbose:B,tokenize:j,matchAllTokens:I},this.set(t)}return o(e,[{key:"set",value:function(e){return this.list=e,e}},{key:"search",value:function(e){this._log('---------\nSearch pattern: "'+e+'"');var t=this._prepareSearchers(e),n=t.tokenSearchers,r=t.fullSearcher,o=this._search(n,r),i=o.weights,s=o.results;return this._computeScore(i,s),this.options.shouldSort&&this._sort(s),this._format(s)}},{key:"_prepareSearchers",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=[];if(this.options.tokenize)for(var n=e.split(this.options.tokenSeparator),r=0,o=n.length;r<o;r+=1)t.push(new i(n[r],this.options));return{tokenSearchers:t,fullSearcher:new i(e,this.options)}}},{key:"_search",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1],n=this.list,r={},o=[];if("string"==typeof n[0]){for(var i=0,s=n.length;i<s;i+=1)this._analyze({key:"",value:n[i],record:i,index:i},{resultMap:r,results:o,tokenSearchers:e,fullSearcher:t});return{weights:null,results:o}}for(var a={},c=0,h=n.length;c<h;c+=1)for(var u=n[c],l=0,f=this.options.keys.length;l<f;l+=1){var v=this.options.keys[l];if("string"!=typeof v){if(a[v.name]={weight:1-v.weight||1},v.weight<=0||v.weight>1)throw new Error("Key weight has to be > 0 and <= 1");v=v.name}else a[v]={weight:1};this._analyze({key:v,value:this.options.getFn(u,v),record:u,index:c},{resultMap:r,results:o,tokenSearchers:e,fullSearcher:t})}return{weights:a,results:o}}},{key:"_analyze",value:function(e,t){var n=e.key,r=e.value,o=e.record,i=e.index,s=t.tokenSearchers,c=void 0===s?[]:s,h=t.fullSearcher,u=void 0===h?[]:h,l=t.resultMap,f=void 0===l?{}:l,v=t.results,d=void 0===v?[]:v;if(void 0!==r&&null!==r){var p=!1,g=-1,m=0;if("string"==typeof r){this._log("\nKey: "+(""===n?"-":n));var y=u.search(r);if(this._log('Full text: "'+r+'", score: '+y.score),this.options.tokenize){for(var k=r.split(this.options.tokenSeparator),x=[],S=0;S<c.length;S+=1){var M=c[S];this._log('\nPattern: "'+M.pattern+'"');for(var b=!1,_=0;_<k.length;_+=1){var L=k[_],w=M.search(L),A={};w.isMatch?(A[L]=w.score,p=!0,b=!0,x.push(w.score)):(A[L]=1,this.options.matchAllTokens||x.push(1)),this._log('Token: "'+L+'", score: '+A[L])}b&&(m+=1)}g=x[0];for(var C=x.length,F=1;F<C;F+=1)g+=x[F];g/=C,this._log("Token score average:",g)}var O=y.score;g>-1&&(O=(O+g)/2),this._log("Score average:",O);var P=!this.options.tokenize||!this.options.matchAllTokens||m>=c.length;if(this._log("\nCheck Matches: "+P),(p||y.isMatch)&&P){var j=f[i];j?j.output.push({key:n,score:O,matchedIndices:y.matchedIndices}):(f[i]={item:o,output:[{key:n,score:O,matchedIndices:y.matchedIndices}]},d.push(f[i]))}}else if(a(r))for(var z=0,I=r.length;z<I;z+=1)this._analyze({key:n,value:r[z],record:o,index:i},{resultMap:f,results:d,tokenSearchers:c,fullSearcher:u})}}},{key:"_computeScore",value:function(e,t){this._log("\n\nComputing score:\n");for(var n=0,r=t.length;n<r;n+=1){for(var o=t[n].output,i=o.length,s=0,a=1,c=0;c<i;c+=1){var h=o[c].score,u=e?e[o[c].key].weight:1,l=h*u;1!==u?a=Math.min(a,l):(o[c].nScore=l,s+=l)}t[n].score=1===a?s/i:a,this._log(t[n])}}},{key:"_sort",value:function(e){this._log("\n\nSorting...."),e.sort(this.options.sortFn)}},{key:"_format",value:function(e){var t=[];this._log("\n\nOutput:\n\n",e);var n=[];this.options.includeMatches&&n.push(function(e,t){var n=e.output;t.matches=[];for(var r=0,o=n.length;r<o;r+=1){var i=n[r],s={indices:i.matchedIndices};i.key&&(s.key=i.key),t.matches.push(s)}}),this.options.includeScore&&n.push(function(e,t){t.score=e.score});for(var r=0,o=e.length;r<o;r+=1){var i=e[r];if(this.options.id&&(i.item=this.options.getFn(i.item,this.options.id)[0]),n.length){for(var s={item:i.item},a=0,c=n.length;a<c;a+=1)n[a](i,s);t.push(s)}else t.push(i.item)}return t}},{key:"_log",value:function(){if(this.options.verbose){var e;(e=console).log.apply(e,arguments)}}}]),e}();e.exports=c}])});
\ No newline at end of file
diff --git a/index.html b/index.html
index 1d24cc1..50f9fc9 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,27 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="refresh" content="0;url=demo/" />
-    <title>emojione-selector</title>
-  </head>
-  <body>
-    <!--
-        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
-        Visit demo/index.html to see live examples of your element running.
-        This page will automatically redirect you there when run in the browser
-        with `polymer serve`.
-      -->
-  </body>
-</html>
+<!doctype html>
+<!--
+Copyright (c) 2017 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
+-->
+<html>
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <title>emojione selector</title>
+
+    <script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="./bower_components/iron-component-page/iron-component-page.html">
+
+  </head>
+  <body>
+
+    <iron-component-page src="emojione-selector.html"></iron-component-page>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/lodash.custom.min.js b/lodash.custom.min.js
new file mode 100644
index 0000000..a367e8e
--- /dev/null
+++ b/lodash.custom.min.js
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Lodash (Custom Build) lodash.com/license | Underscore.js 1.8.3 underscorejs.org/LICENSE
+ * Build: `lodash exports="global" include="uniqBy,findIndex,replace,extend,cloneDeep,concat,endsWith,startsWith" -o ./helpers/lodash.js`
+ */
+;(function(){function t(t,e){return t.set(e[0],e[1]),t}function e(t,e){return t.add(e),t}function r(t,e,r){switch(r.length){case 0:return t.call(e);case 1:return t.call(e,r[0]);case 2:return t.call(e,r[0],r[1]);case 3:return t.call(e,r[0],r[1],r[2])}return t.apply(e,r)}function n(t,e){for(var r=-1,n=null==t?0:t.length;++r<n&&false!==e(t[r],r,t););}function o(t,e){for(var r=-1,n=null==t?0:t.length,o=0,u=[];++r<n;){var c=t[r];e(c,r,t)&&(u[o++]=c)}return u}function u(t,e){var r;if(r=!(null==t||!t.length)){
+if(e===e)t:{r=-1;for(var n=t.length;++r<n;)if(t[r]===e)break t;r=-1}else r=f(t,l,0);r=-1<r}return r}function c(t,e){for(var r=-1,n=e.length,o=t.length;++r<n;)t[o+r]=e[r];return t}function i(t,e,r){for(var n=-1,o=null==t?0:t.length;++n<o;)r=e(r,t[n],n,t);return r}function a(t,e){for(var r=-1,n=null==t?0:t.length;++r<n;)if(e(t[r],r,t))return true;return false}function f(t,e,r){var n=t.length;for(r+=-1;++r<n;)if(e(t[r],r,t))return r;return-1}function l(t){return t!==t}function s(t){return function(e){return null==e?Nt:e[t];
+}}function b(t){return function(e){return t(e)}}function h(t,e){return t.has(e)}function p(t){var e=-1,r=Array(t.size);return t.forEach(function(t,n){r[++e]=[n,t]}),r}function y(t){var e=Object;return function(r){return t(e(r))}}function j(t){var e=-1,r=Array(t.size);return t.forEach(function(t){r[++e]=t}),r}function _(){}function g(t){var e=-1,r=null==t?0:t.length;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function v(t){var e=-1,r=null==t?0:t.length;for(this.clear();++e<r;){var n=t[e];
+this.set(n[0],n[1])}}function d(t){var e=-1,r=null==t?0:t.length;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function A(t){var e=-1,r=null==t?0:t.length;for(this.__data__=new d;++e<r;)this.add(t[e])}function w(t){this.size=(this.__data__=new v(t)).size}function m(t,e){var r=ur(t),n=!r&&or(t),o=!r&&!n&&cr(t),u=!r&&!n&&!o&&ir(t);if(r=r||n||o||u){for(var n=t.length,c=String,i=-1,a=Array(n);++i<n;)a[i]=c(i);n=a}else n=[];var f,c=n.length;for(f in t)!e&&!je.call(t,f)||r&&("length"==f||o&&("offset"==f||"parent"==f)||u&&("buffer"==f||"byteLength"==f||"byteOffset"==f)||ft(f,c))||n.push(f);
+return n}function O(t,e,r){var n=t[e];je.call(t,e)&&_t(n,r)&&(r!==Nt||e in t)||x(t,e,r)}function S(t,e){for(var r=t.length;r--;)if(_t(t[r][0],e))return r;return-1}function k(t,e){return t&&K(e,Ft(e),t)}function z(t,e){return t&&K(e,Et(e),t)}function x(t,e,r){"__proto__"==e&&Fe?Fe(t,e,{configurable:true,enumerable:true,value:r,writable:true}):t[e]=r}function I(t,e){return t===t&&(e!==Nt&&(t=t<=e?t:e),0!==Nt&&(t=0<=t?t:0)),t}function F(t,e,r,o,u,c){var i,a=1&e,f=2&e,l=4&e;if(r&&(i=u?r(t,o,u,c):r(t)),i!==Nt)return i;
+if(!At(t))return t;if(o=ur(t)){if(i=ct(t),!a)return J(t,i)}else{var s=er(t),b="[object Function]"==s||"[object GeneratorFunction]"==s;if(cr(t))return G(t,a);if("[object Object]"==s||"[object Arguments]"==s||b&&!u){if(i=f||b?{}:typeof t.constructor!="function"||st(t)?{}:Qe(Oe(t)),!a)return f?X(t,z(i,t)):Q(t,k(i,t))}else{if(!ee[s])return u?t:{};i=it(t,s,F,a)}}if(c||(c=new w),u=c.get(t))return u;c.set(t,i);var f=l?f?et:tt:f?Et:Ft,h=o?Nt:f(t);return n(h||t,function(n,o){h&&(o=n,n=t[o]),O(i,o,F(n,e,r,o,t,c));
+}),i}function E(t,e,r,n,o){var u=-1,i=t.length;for(r||(r=at),o||(o=[]);++u<i;){var a=t[u];0<e&&r(a)?1<e?E(a,e-1,r,n,o):c(o,a):n||(o[o.length]=a)}return o}function $(t,e){e=q(e,t);for(var r=0,n=e.length;null!=t&&r<n;)t=t[pt(e[r++])];return r&&r==n?t:Nt}function U(t,e,r){return e=e(t),ur(t)?e:c(e,r(t))}function B(t){if(null==t)t=t===Nt?"[object Undefined]":"[object Null]";else if(Ie&&Ie in Object(t)){var e=je.call(t,Ie),r=t[Ie];try{t[Ie]=Nt;var n=true}catch(t){}var o=ge.call(t);n&&(e?t[Ie]=r:delete t[Ie]),
+t=o}else t=ge.call(t);return t}function D(t){return wt(t)&&"[object Arguments]"==B(t)}function M(t,e,r,n,o){if(t===e)e=true;else if(null==t||null==e||!wt(t)&&!wt(e))e=t!==t&&e!==e;else t:{var u=ur(t),c=ur(e),i=u?"[object Array]":er(t),a=c?"[object Array]":er(e),i="[object Arguments]"==i?"[object Object]":i,a="[object Arguments]"==a?"[object Object]":a,f="[object Object]"==i,c="[object Object]"==a;if((a=i==a)&&cr(t)){if(!cr(e)){e=false;break t}u=true,f=false}if(a&&!f)o||(o=new w),e=u||ir(t)?Y(t,e,r,n,M,o):Z(t,e,i,r,n,M,o);else{
+if(!(1&r)&&(u=f&&je.call(t,"__wrapped__"),i=c&&je.call(e,"__wrapped__"),u||i)){t=u?t.value():t,e=i?e.value():e,o||(o=new w),e=M(t,e,r,n,o);break t}if(a)e:if(o||(o=new w),u=1&r,i=tt(t),c=i.length,a=tt(e).length,c==a||u){for(f=c;f--;){var l=i[f];if(!(u?l in e:je.call(e,l))){e=false;break e}}if((a=o.get(t))&&o.get(e))e=a==e;else{a=true,o.set(t,e),o.set(e,t);for(var s=u;++f<c;){var l=i[f],b=t[l],h=e[l];if(n)var p=u?n(h,b,l,e,t,o):n(b,h,l,t,e,o);if(p===Nt?b!==h&&!M(b,h,r,n,o):!p){a=false;break}s||(s="constructor"==l);
+}a&&!s&&(r=t.constructor,n=e.constructor,r!=n&&"constructor"in t&&"constructor"in e&&!(typeof r=="function"&&r instanceof r&&typeof n=="function"&&n instanceof n)&&(a=false)),o.delete(t),o.delete(e),e=a}}else e=false;else e=false}}return e}function L(t,e){var r=e.length,n=r;if(null==t)return!n;for(t=Object(t);r--;){var o=e[r];if(o[2]?o[1]!==t[o[0]]:!(o[0]in t))return false}for(;++r<n;){var o=e[r],u=o[0],c=t[u],i=o[1];if(o[2]){if(c===Nt&&!(u in t))return false}else if(o=new w,void 0===Nt?!M(i,c,3,void 0,o):1)return false;
+}return true}function P(t){return wt(t)&&dt(t.length)&&!!te[B(t)]}function N(t){return typeof t=="function"?t:null==t?Ut:typeof t=="object"?ur(t)?C(t[0],t[1]):V(t):Mt(t)}function V(t){var e=ot(t);return 1==e.length&&e[0][2]?bt(e[0][0],e[0][1]):function(r){return r===t||L(r,e)}}function C(t,e){return lt(t)&&e===e&&!At(e)?bt(pt(t),e):function(r){var n=xt(r,t);return n===Nt&&n===e?It(r,t):M(e,n,3)}}function R(t){return function(e){return $(e,t)}}function T(t){return rr(ht(t,Ut),t+"")}function W(t){if(typeof t=="string")return t;
+if(ur(t)){for(var e=W,r=-1,n=null==t?0:t.length,o=Array(n);++r<n;)o[r]=e(t[r],r,t);return o+""}return mt(t)?Ke?Ke.call(t):"":(e=t+"","0"==e&&1/t==-Vt?"-0":e)}function q(t,e){return ur(t)?t:lt(t,e)?[t]:nr(zt(t))}function G(t,e){if(e)return t.slice();var r=t.length,r=me?me(r):new t.constructor(r);return t.copy(r),r}function H(t){var e=new t.constructor(t.byteLength);return new we(e).set(new we(t)),e}function J(t,e){var r=-1,n=t.length;for(e||(e=Array(n));++r<n;)e[r]=t[r];return e}function K(t,e,r){
+var n=!r;r||(r={});for(var o=-1,u=e.length;++o<u;){var c=e[o],i=Nt;i===Nt&&(i=t[c]),n?x(r,c,i):O(r,c,i)}return r}function Q(t,e){return K(t,Ze(t),e)}function X(t,e){return K(t,tr(t),e)}function Y(t,e,r,n,o,u){var c=1&r,i=t.length,f=e.length;if(i!=f&&!(c&&f>i))return false;if((f=u.get(t))&&u.get(e))return f==e;var f=-1,l=true,s=2&r?new A:Nt;for(u.set(t,e),u.set(e,t);++f<i;){var b=t[f],p=e[f];if(n)var y=c?n(p,b,f,e,t,u):n(b,p,f,t,e,u);if(y!==Nt){if(y)continue;l=false;break}if(s){if(!a(e,function(t,e){if(!h(s,e)&&(b===t||o(b,t,r,n,u)))return s.push(e);
+})){l=false;break}}else if(b!==p&&!o(b,p,r,n,u)){l=false;break}}return u.delete(t),u.delete(e),l}function Z(t,e,r,n,o,u,c){switch(r){case"[object DataView]":if(t.byteLength!=e.byteLength||t.byteOffset!=e.byteOffset)break;t=t.buffer,e=e.buffer;case"[object ArrayBuffer]":if(t.byteLength!=e.byteLength||!u(new we(t),new we(e)))break;return true;case"[object Boolean]":case"[object Date]":case"[object Number]":return _t(+t,+e);case"[object Error]":return t.name==e.name&&t.message==e.message;case"[object RegExp]":
+case"[object String]":return t==e+"";case"[object Map]":var i=p;case"[object Set]":if(i||(i=j),t.size!=e.size&&!(1&n))break;return(r=c.get(t))?r==e:(n|=2,c.set(t,e),e=Y(i(t),i(e),n,o,u,c),c.delete(t),e);case"[object Symbol]":if(Je)return Je.call(t)==Je.call(e)}return false}function tt(t){return U(t,Ft,Ze)}function et(t){return U(t,Et,tr)}function rt(){var t=_.iteratee||Bt,t=t===Bt?N:t;return arguments.length?t(arguments[0],arguments[1]):t}function nt(t,e){var r=t.__data__,n=typeof e;return("string"==n||"number"==n||"symbol"==n||"boolean"==n?"__proto__"!==e:null===e)?r[typeof e=="string"?"string":"hash"]:r.map;
+}function ot(t){for(var e=Ft(t),r=e.length;r--;){var n=e[r],o=t[n];e[r]=[n,o,o===o&&!At(o)]}return e}function ut(t,e){var r=null==t?Nt:t[e];return(!At(r)||_e&&_e in r?0:(vt(r)?ve:Xt).test(yt(r)))?r:Nt}function ct(t){var e=t.length,r=t.constructor(e);return e&&"string"==typeof t[0]&&je.call(t,"index")&&(r.index=t.index,r.input=t.input),r}function it(r,n,o,u){var c=r.constructor;switch(n){case"[object ArrayBuffer]":return H(r);case"[object Boolean]":case"[object Date]":return new c(+r);case"[object DataView]":
+return n=u?H(r.buffer):r.buffer,new r.constructor(n,r.byteOffset,r.byteLength);case"[object Float32Array]":case"[object Float64Array]":case"[object Int8Array]":case"[object Int16Array]":case"[object Int32Array]":case"[object Uint8Array]":case"[object Uint8ClampedArray]":case"[object Uint16Array]":case"[object Uint32Array]":return n=u?H(r.buffer):r.buffer,new r.constructor(n,r.byteOffset,r.length);case"[object Map]":return n=u?o(p(r),1):p(r),i(n,t,new r.constructor);case"[object Number]":case"[object String]":
+return new c(r);case"[object RegExp]":return n=new r.constructor(r.source,Jt.exec(r)),n.lastIndex=r.lastIndex,n;case"[object Set]":return n=u?o(j(r),1):j(r),i(n,e,new r.constructor);case"[object Symbol]":return Je?Object(Je.call(r)):{}}}function at(t){return ur(t)||or(t)||!!(xe&&t&&t[xe])}function ft(t,e){return e=null==e?9007199254740991:e,!!e&&(typeof t=="number"||Zt.test(t))&&-1<t&&0==t%1&&t<e}function lt(t,e){if(ur(t))return false;var r=typeof t;return!("number"!=r&&"symbol"!=r&&"boolean"!=r&&null!=t&&!mt(t))||(Tt.test(t)||!Rt.test(t)||null!=e&&t in Object(e));
+}function st(t){var e=t&&t.constructor;return t===(typeof e=="function"&&e.prototype||he)}function bt(t,e){return function(r){return null!=r&&(r[t]===e&&(e!==Nt||t in Object(r)))}}function ht(t,e){var n=void 0,n=Be(n===Nt?t.length-1:n,0);return function(){for(var o=arguments,u=-1,c=Be(o.length-n,0),i=Array(c);++u<c;)i[u]=o[n+u];for(u=-1,c=Array(n+1);++u<n;)c[u]=o[u];return c[n]=e(i),r(t,this,c)}}function pt(t){if(typeof t=="string"||mt(t))return t;var e=t+"";return"0"==e&&1/t==-Vt?"-0":e}function yt(t){
+if(null!=t){try{return ye.call(t)}catch(t){}return t+""}return""}function jt(t,e){function r(){var n=arguments,o=e?e.apply(this,n):n[0],u=r.cache;return u.has(o)?u.get(o):(n=t.apply(this,n),r.cache=u.set(o,n)||u,n)}if(typeof t!="function"||null!=e&&typeof e!="function")throw new TypeError("Expected a function");return r.cache=new(jt.Cache||d),r}function _t(t,e){return t===e||t!==t&&e!==e}function gt(t){return null!=t&&dt(t.length)&&!vt(t)}function vt(t){return!!At(t)&&(t=B(t),"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t);
+}function dt(t){return typeof t=="number"&&-1<t&&0==t%1&&9007199254740991>=t}function At(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function wt(t){return null!=t&&typeof t=="object"}function mt(t){return typeof t=="symbol"||wt(t)&&"[object Symbol]"==B(t)}function Ot(t){return t?(t=kt(t),t===Vt||t===-Vt?1.7976931348623157e308*(0>t?-1:1):t===t?t:0):0===t?t:0}function St(t){t=Ot(t);var e=t%1;return t===t?e?t-e:t:0}function kt(t){if(typeof t=="number")return t;if(mt(t))return Ct;if(At(t)&&(t=typeof t.valueOf=="function"?t.valueOf():t,
+t=At(t)?t+"":t),typeof t!="string")return 0===t?t:+t;t=t.replace(Gt,"");var e=Qt.test(t);return e||Yt.test(t)?ne(t.slice(2),e?2:8):Kt.test(t)?Ct:+t}function zt(t){return null==t?"":W(t)}function xt(t,e,r){return t=null==t?Nt:$(t,e),t===Nt?r:t}function It(t,e){var r;if(r=null!=t){r=t;var n;n=q(e,r);for(var o=-1,u=n.length,c=false;++o<u;){var i=pt(n[o]);if(!(c=null!=r&&null!=r&&i in Object(r)))break;r=r[i]}c||++o!=u?r=c:(u=null==r?0:r.length,r=!!u&&dt(u)&&ft(i,u)&&(ur(r)||or(r)))}return r}function Ft(t){
+if(gt(t))t=m(t);else if(st(t)){var e,r=[];for(e in Object(t))je.call(t,e)&&"constructor"!=e&&r.push(e);t=r}else t=Ue(t);return t}function Et(t){if(gt(t))t=m(t,true);else if(At(t)){var e,r=st(t),n=[];for(e in t)("constructor"!=e||!r&&je.call(t,e))&&n.push(e);t=n}else{if(e=[],null!=t)for(r in Object(t))e.push(r);t=e}return t}function $t(t){return function(){return t}}function Ut(t){return t}function Bt(t){return N(typeof t=="function"?t:F(t,1))}function Dt(){}function Mt(t){return lt(t)?s(pt(t)):R(t);
+}function Lt(){return[]}function Pt(){return false}var Nt,Vt=1/0,Ct=NaN,Rt=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,Tt=/^\w*$/,Wt=/^\./,qt=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Gt=/^\s+|\s+$/g,Ht=/\\(\\)?/g,Jt=/\w*$/,Kt=/^[-+]0x[0-9a-f]+$/i,Qt=/^0b[01]+$/i,Xt=/^\[object .+?Constructor\]$/,Yt=/^0o[0-7]+$/i,Zt=/^(?:0|[1-9]\d*)$/,te={};te["[object Float32Array]"]=te["[object Float64Array]"]=te["[object Int8Array]"]=te["[object Int16Array]"]=te["[object Int32Array]"]=te["[object Uint8Array]"]=te["[object Uint8ClampedArray]"]=te["[object Uint16Array]"]=te["[object Uint32Array]"]=true,
+te["[object Arguments]"]=te["[object Array]"]=te["[object ArrayBuffer]"]=te["[object Boolean]"]=te["[object DataView]"]=te["[object Date]"]=te["[object Error]"]=te["[object Function]"]=te["[object Map]"]=te["[object Number]"]=te["[object Object]"]=te["[object RegExp]"]=te["[object Set]"]=te["[object String]"]=te["[object WeakMap]"]=false;var ee={};ee["[object Arguments]"]=ee["[object Array]"]=ee["[object ArrayBuffer]"]=ee["[object DataView]"]=ee["[object Boolean]"]=ee["[object Date]"]=ee["[object Float32Array]"]=ee["[object Float64Array]"]=ee["[object Int8Array]"]=ee["[object Int16Array]"]=ee["[object Int32Array]"]=ee["[object Map]"]=ee["[object Number]"]=ee["[object Object]"]=ee["[object RegExp]"]=ee["[object Set]"]=ee["[object String]"]=ee["[object Symbol]"]=ee["[object Uint8Array]"]=ee["[object Uint8ClampedArray]"]=ee["[object Uint16Array]"]=ee["[object Uint32Array]"]=true,
+ee["[object Error]"]=ee["[object Function]"]=ee["[object WeakMap]"]=false;var re,ne=parseInt,oe=typeof global=="object"&&global&&global.Object===Object&&global,ue=typeof self=="object"&&self&&self.Object===Object&&self,ce=oe||ue||Function("return this")(),ie=typeof exports=="object"&&exports&&!exports.nodeType&&exports,ae=ie&&typeof module=="object"&&module&&!module.nodeType&&module,fe=ae&&ae.exports===ie,le=fe&&oe.process;t:{try{re=le&&le.binding&&le.binding("util");break t}catch(t){}re=void 0}var se=re&&re.isTypedArray,be=Array.prototype,he=Object.prototype,pe=ce["__core-js_shared__"],ye=Function.prototype.toString,je=he.hasOwnProperty,_e=function(){
+var t=/[^.]+$/.exec(pe&&pe.keys&&pe.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),ge=he.toString,ve=RegExp("^"+ye.call(je).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),de=fe?ce.Buffer:Nt,Ae=ce.Symbol,we=ce.Uint8Array,me=de?de.a:Nt,Oe=y(Object.getPrototypeOf),Se=Object.create,ke=he.propertyIsEnumerable,ze=be.splice,xe=Ae?Ae.isConcatSpreadable:Nt,Ie=Ae?Ae.toStringTag:Nt,Fe=function(){try{var t=ut(Object,"defineProperty");
+return t({},"",{}),t}catch(t){}}(),Ee=Object.getOwnPropertySymbols,$e=de?de.isBuffer:Nt,Ue=y(Object.keys),Be=Math.max,De=Date.now,Me=ut(ce,"DataView"),Le=ut(ce,"Map"),Pe=ut(ce,"Promise"),Ne=ut(ce,"Set"),Ve=ut(ce,"WeakMap"),Ce=ut(Object,"create"),Re=yt(Me),Te=yt(Le),We=yt(Pe),qe=yt(Ne),Ge=yt(Ve),He=Ae?Ae.prototype:Nt,Je=He?He.valueOf:Nt,Ke=He?He.toString:Nt,Qe=function(){function t(){}return function(e){return At(e)?Se?Se(e):(t.prototype=e,e=new t,t.prototype=Nt,e):{}}}();g.prototype.clear=function(){
+this.__data__=Ce?Ce(null):{},this.size=0},g.prototype.delete=function(t){return t=this.has(t)&&delete this.__data__[t],this.size-=t?1:0,t},g.prototype.get=function(t){var e=this.__data__;return Ce?(t=e[t],"__lodash_hash_undefined__"===t?Nt:t):je.call(e,t)?e[t]:Nt},g.prototype.has=function(t){var e=this.__data__;return Ce?e[t]!==Nt:je.call(e,t)},g.prototype.set=function(t,e){var r=this.__data__;return this.size+=this.has(t)?0:1,r[t]=Ce&&e===Nt?"__lodash_hash_undefined__":e,this},v.prototype.clear=function(){
+this.__data__=[],this.size=0},v.prototype.delete=function(t){var e=this.__data__;return t=S(e,t),!(0>t)&&(t==e.length-1?e.pop():ze.call(e,t,1),--this.size,true)},v.prototype.get=function(t){var e=this.__data__;return t=S(e,t),0>t?Nt:e[t][1]},v.prototype.has=function(t){return-1<S(this.__data__,t)},v.prototype.set=function(t,e){var r=this.__data__,n=S(r,t);return 0>n?(++this.size,r.push([t,e])):r[n][1]=e,this},d.prototype.clear=function(){this.size=0,this.__data__={hash:new g,map:new(Le||v),string:new g
+}},d.prototype.delete=function(t){return t=nt(this,t).delete(t),this.size-=t?1:0,t},d.prototype.get=function(t){return nt(this,t).get(t)},d.prototype.has=function(t){return nt(this,t).has(t)},d.prototype.set=function(t,e){var r=nt(this,t),n=r.size;return r.set(t,e),this.size+=r.size==n?0:1,this},A.prototype.add=A.prototype.push=function(t){return this.__data__.set(t,"__lodash_hash_undefined__"),this},A.prototype.has=function(t){return this.__data__.has(t)},w.prototype.clear=function(){this.__data__=new v,
+this.size=0},w.prototype.delete=function(t){var e=this.__data__;return t=e.delete(t),this.size=e.size,t},w.prototype.get=function(t){return this.__data__.get(t)},w.prototype.has=function(t){return this.__data__.has(t)},w.prototype.set=function(t,e){var r=this.__data__;if(r instanceof v){var n=r.__data__;if(!Le||199>n.length)return n.push([t,e]),this.size=++r.size,this;r=this.__data__=new d(n)}return r.set(t,e),this.size=r.size,this};var Xe=Fe?function(t,e){return Fe(t,"toString",{configurable:true,
+enumerable:false,value:$t(e),writable:true})}:Ut,Ye=Ne&&1/j(new Ne([,-0]))[1]==Vt?function(t){return new Ne(t)}:Dt,Ze=Ee?function(t){return null==t?[]:(t=Object(t),o(Ee(t),function(e){return ke.call(t,e)}))}:Lt,tr=Ee?function(t){for(var e=[];t;)c(e,Ze(t)),t=Oe(t);return e}:Lt,er=B;(Me&&"[object DataView]"!=er(new Me(new ArrayBuffer(1)))||Le&&"[object Map]"!=er(new Le)||Pe&&"[object Promise]"!=er(Pe.resolve())||Ne&&"[object Set]"!=er(new Ne)||Ve&&"[object WeakMap]"!=er(new Ve))&&(er=function(t){var e=B(t);
+if(t=(t="[object Object]"==e?t.constructor:Nt)?yt(t):"")switch(t){case Re:return"[object DataView]";case Te:return"[object Map]";case We:return"[object Promise]";case qe:return"[object Set]";case Ge:return"[object WeakMap]"}return e});var rr=function(t){var e=0,r=0;return function(){var n=De(),o=16-(n-r);if(r=n,0<o){if(800<=++e)return arguments[0]}else e=0;return t.apply(Nt,arguments)}}(Xe),nr=function(t){t=jt(t,function(t){return 500===e.size&&e.clear(),t});var e=t.cache;return t}(function(t){var e=[];
+return Wt.test(t)&&e.push(""),t.replace(qt,function(t,r,n,o){e.push(n?o.replace(Ht,"$1"):r||t)}),e});jt.Cache=d;var or=D(function(){return arguments}())?D:function(t){return wt(t)&&je.call(t,"callee")&&!ke.call(t,"callee")},ur=Array.isArray,cr=$e||Pt,ir=se?b(se):P,ar=function(t){return T(function(e,r){var n,o=-1,u=r.length,c=1<u?r[u-1]:Nt,i=2<u?r[2]:Nt,c=3<t.length&&typeof c=="function"?(u--,c):Nt;if(n=i){n=r[0];var a=r[1];if(At(i)){var f=typeof a;n=!!("number"==f?gt(i)&&ft(a,i.length):"string"==f&&a in i)&&_t(i[a],n);
+}else n=false}for(n&&(c=3>u?Nt:c,u=1),e=Object(e);++o<u;)(i=r[o])&&t(e,i,o,c);return e})}(function(t,e){K(e,Et(e),t)});_.assignIn=ar,_.concat=function(){var t=arguments.length;if(!t)return[];for(var e=Array(t-1),r=arguments[0];t--;)e[t-1]=arguments[t];return c(ur(r)?J(r):[r],E(e,1))},_.constant=$t,_.iteratee=Bt,_.keys=Ft,_.keysIn=Et,_.memoize=jt,_.property=Mt,_.uniqBy=function(t,e){var r;if(t&&t.length)t:{r=rt(e,2);var n=-1,o=u,c=t.length,i=true,a=[],f=a;if(200<=c){if(o=r?null:Ye(t)){r=j(o);break t}i=false,
+o=h,f=new A}else f=r?[]:a;e:for(;++n<c;){var l=t[n],s=r?r(l):l,l=0!==l?l:0;if(i&&s===s){for(var b=f.length;b--;)if(f[b]===s)continue e;r&&f.push(s),a.push(l)}else o(f,s,void 0)||(f!==a&&f.push(s),a.push(l))}r=a}else r=[];return r},_.extend=ar,_.cloneDeep=function(t){return F(t,5)},_.endsWith=function(t,e,r){t=zt(t),e=W(e);var n=t.length,n=r=r===Nt?n:I(St(r),n);return r-=e.length,0<=r&&t.slice(r,n)==e},_.eq=_t,_.findIndex=function(t,e,r){var n=null==t?0:t.length;return n?(r=null==r?0:St(r),0>r&&(r=Be(n+r,0)),
+f(t,rt(e,3),r)):-1},_.get=xt,_.hasIn=It,_.identity=Ut,_.isArguments=or,_.isArray=ur,_.isArrayLike=gt,_.isBuffer=cr,_.isFunction=vt,_.isLength=dt,_.isObject=At,_.isObjectLike=wt,_.isSymbol=mt,_.isTypedArray=ir,_.stubArray=Lt,_.stubFalse=Pt,_.noop=Dt,_.replace=function(){var t=arguments,e=zt(t[0]);return 3>t.length?e:e.replace(t[1],t[2])},_.startsWith=function(t,e,r){return t=zt(t),r=null==r?0:I(St(r),t.length),e=W(e),t.slice(r,r+e.length)==e},_.toFinite=Ot,_.toInteger=St,_.toNumber=kt,_.toString=zt,
+_.VERSION="4.17.4",ce._=_}).call(this);
\ No newline at end of file
diff --git a/polymer.json b/polymer.json
new file mode 100644
index 0000000..903de29
--- /dev/null
+++ b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-2-hybrid"
+    ]
+  }
+}