From 951e82423844bac6f951e952f7b92756aa31e8b8 Mon Sep 17 00:00:00 2001
From: Puranjay Jain <me+github@puranjayjain.com>
Date: Tue, 27 Jun 2017 19:20:28 +0530
Subject: [PATCH 1/2] fixed hybrid code

---
 bower.json               |   3 +-
 emojione-chip-input.html | 113 +++++++++++++++++++++++++++++
 emojione-chip.html       | 152 +++++++++++++++++++++++++++++++++++++++
 emojione-selector.html   |  14 ++--
 4 files changed, 274 insertions(+), 8 deletions(-)
 create mode 100644 emojione-chip-input.html
 create mode 100644 emojione-chip.html

diff --git a/bower.json b/bower.json
index fff1803..2943f65 100644
--- a/bower.json
+++ b/bower.json
@@ -44,8 +44,7 @@
     "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",
-    "paper-input-autocomplete-chips": "WebPaperElements/paper-input-autocomplete-chips#^0.30.4"
+    "lodash": "lodash/lodash#^4.17.4"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
diff --git a/emojione-chip-input.html b/emojione-chip-input.html
new file mode 100644
index 0000000..cee455a
--- /dev/null
+++ b/emojione-chip-input.html
@@ -0,0 +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>
+</dom-module>
\ No newline at end of file
diff --git a/emojione-chip.html b/emojione-chip.html
new file mode 100644
index 0000000..7f21426
--- /dev/null
+++ b/emojione-chip.html
@@ -0,0 +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>
+</dom-module>
\ No newline at end of file
diff --git a/emojione-selector.html b/emojione-selector.html
index 420a22b..f02d36e 100644
--- a/emojione-selector.html
+++ b/emojione-selector.html
@@ -11,14 +11,14 @@
 <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="../paper-input-autocomplete-chips/paper-input-autocomplete-chips.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-icons.html">
+<link rel="import" href="emojione-chip-input.html">
 
 <!--
 `emojione-selector` works best as a emoji picker and is powered by the emojione library.
@@ -190,10 +190,12 @@
       .dropdown-trigger .pickcon.tone5 {
         background-color: #8a6859;
       }
-      paper-input-autocomplete-chips {
-        @apply (--layout-flex);
-        margin-right: 12px;
+      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);
@@ -265,7 +267,7 @@
       </paper-menu-button>
 
       <!-- search bar -->
-      <paper-input-autocomplete-chips id="searchField" no-label-float search-if-empty no-chip-image allow-select-unknown-token selected-objects="{{search}}" token-accept-key-codes="32,188" label="Search emoji"></paper-input-autocomplete-chips>
+      <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>

From ceaedd2e1e8251571659d0c717e08740edc2528a Mon Sep 17 00:00:00 2001
From: Puranjay Jain <me+github@puranjayjain.com>
Date: Tue, 27 Jun 2017 19:23:25 +0530
Subject: [PATCH 2/2] updated changelog

---
 CHANGELOG.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ec9da7..9fb1025 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,15 @@
-# v1.0.0 (T.B.A)
+# 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