From 53ffd22ba56ca4e92d0a8f4984d7769f28763bb3 Mon Sep 17 00:00:00 2001
From: Vinicius <viniromano@gmail.com>
Date: Wed, 20 Jul 2016 13:49:00 -0300
Subject: [PATCH] Added multi option

---
 demo/index.html                | 23 +++++++++++++++++++++++
 paper-dropdown-menu-light.html | 27 ++++++++++++++++++---------
 paper-dropdown-menu.html       | 27 ++++++++++++++++++---------
 3 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 4bb258e..9788a62 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -198,6 +198,29 @@ <h4>You can remove the ripple and the animations</h4>
       </template>
     </demo-snippet>
 
+    <h4>This is a multi paper-dropdown-menu</h4>
+    <demo-snippet class="centered-demo">
+      <template>
+        <paper-dropdown-menu label="Dinosaurs" multi>
+          <paper-listbox class="dropdown-content" multi>
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu>
+
+        <paper-dropdown-menu-light label="Dinosaurs (light)">
+          <paper-listbox class="dropdown-content">
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu-light>
+      </template>
+    </demo-snippet>
+
     <h4>You can style a paper-dropdown-menu using custom properties</h4>
     <demo-snippet class="centered-demo">
       <template>
diff --git a/paper-dropdown-menu-light.html b/paper-dropdown-menu-light.html
index 90d0159..e76b57d 100644
--- a/paper-dropdown-menu-light.html
+++ b/paper-dropdown-menu-light.html
@@ -279,8 +279,9 @@
       on-iron-select="_onIronSelect"
       on-iron-deselect="_onIronDeselect"
       opened="{{opened}}"
-      close-on-activate
-      allow-outside-scroll="[[allowOutsideScroll]]">
+      allow-outside-scroll="[[allowOutsideScroll]]"
+      multi="[[multi]]"
+      ignore-select="[[multi]]">
       <div class="dropdown-trigger">
         <label hidden$="[[!label]]"
             class$="[[_computeLabelClass(noLabelFloat,alwaysFloatLabel,hasContent)]]">[[label]]</label>
@@ -428,6 +429,14 @@
           hasContent: {
             type: Boolean,
             readOnly: true
+          },
+
+          /**
+           * If true, multiple selections are allowed.
+           */
+          multi: {
+            type: Boolean,
+            value: false
           }
         },
 
@@ -489,7 +498,7 @@
          * @param {CustomEvent} event An `iron-select` event.
          */
         _onIronSelect: function(event) {
-          this._setSelectedItem(event.detail.item);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -498,7 +507,7 @@
          * @param {CustomEvent} event An `iron-deselect` event.
          */
         _onIronDeselect: function(event) {
-          this._setSelectedItem(null);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -518,12 +527,12 @@
          * @param {Element} selectedItem A selected Element item, with an
          * optional `label` property.
          */
-        _selectedItemChanged: function(selectedItem) {
+        _selectedItemChanged: function(selectedItems) {
           var value = '';
-          if (!selectedItem) {
-            value = '';
-          } else {
-            value = selectedItem.label || selectedItem.textContent.trim();
+          if (selectedItems.length) {
+            value = selectedItems.map((item) => {
+              return item && (item.label || item.getAttribute('label') || item.textContent.trim());
+            }).join(', ');
           }
 
           this._setValue(value);
diff --git a/paper-dropdown-menu.html b/paper-dropdown-menu.html
index d34221d..9c18c8e 100644
--- a/paper-dropdown-menu.html
+++ b/paper-dropdown-menu.html
@@ -96,8 +96,9 @@
       on-iron-select="_onIronSelect"
       on-iron-deselect="_onIronDeselect"
       opened="{{opened}}"
-      close-on-activate
-      allow-outside-scroll="[[allowOutsideScroll]]">
+      allow-outside-scroll="[[allowOutsideScroll]]"
+      multi="[[multi]]"
+      ignore-select="[[multi]]">
       <div class="dropdown-trigger">
         <paper-ripple></paper-ripple>
         <!-- paper-input has type="text" for a11y, do not remove -->
@@ -255,6 +256,14 @@
           verticalAlign: {
             type: String,
             value: 'top'
+          },
+
+          /**
+           * If true, multiple selections are allowed.
+           */
+          multi: {
+            type: Boolean,
+            value: false
           }
         },
 
@@ -315,7 +324,7 @@
          * @param {CustomEvent} event An `iron-select` event.
          */
         _onIronSelect: function(event) {
-          this._setSelectedItem(event.detail.item);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -324,7 +333,7 @@
          * @param {CustomEvent} event An `iron-deselect` event.
          */
         _onIronDeselect: function(event) {
-          this._setSelectedItem(null);
+          this._setSelectedItem(event.detail.item.parentElement.selectedItems);
         },
 
         /**
@@ -344,12 +353,12 @@
          * @param {Element} selectedItem A selected Element item, with an
          * optional `label` property.
          */
-        _selectedItemChanged: function(selectedItem) {
+        _selectedItemChanged: function(selectedItems) {
           var value = '';
-          if (!selectedItem) {
-            value = '';
-          } else {
-            value = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
+          if (selectedItems.length) {
+            value = selectedItems.map((item) => {
+              return item && (item.label || item.getAttribute('label') || item.textContent.trim());
+            }).join(', ');
           }
 
           this._setValue(value);