Import Polymer 0.8 and several key elements.

third_party/polymer/v0_8/components/iron-selector/iron-multi-selectable.html

+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="iron-selectable.html">
+
+<script>
+
+  Polymer.IronMultiSelectableBehavior = [
+    Polymer.IronSelectableBehavior, {
+
+      properties: {
+
+        /**
+         * If true, multiple selections are allowed.
+         *
+         * @attribute multi
+         * @type Boolean
+         * @default false
+         */
+        multi: {
+          type: Boolean,
+          value: false,
+          observer: 'multiChanged'
+        },
+
+        /**
+         * Gets or sets the selected elements. This is used instead of `selected` when `multi`
+         * is true.
+         *
+         * @attribute selectedValues
+         * @type Array
+         */
+        selectedValues: {
+          type: Array,
+          notify: true
+        },
+
+        /**
+         * Returns an array of currently selected items.
+         *
+         * @attribute selectedItems
+         * @type Array
+         */
+        selectedItems: {
+          type: Array,
+          readOnly: true,
+          notify: true
+        },
+
+      },
+
+      observers: [
+        '_updateSelected(attrForSelected, selectedValues)'
+      ],
+
+      /**
+       * Selects the given value. If the `multi` property is true, then the selected state of the
+       * `value` will be toggled; otherwise the `value` will be selected.
+       *
+       * @method select
+       * @param {String} value the value to select.
+       */
+      select: function(value) {
+        if (this.multi) {
+          if (this.selectedValues) {
+            this._toggleSelected(value);
+          } else {
+            this.selectedValues = [value];
+          }
+        } else {
+          this.selected = value;
+        }
+      },
+
+      multiChanged: function(multi) {
+        this._selection.multi = multi;
+      },
+
+      _updateSelected: function() {
+        if (this.multi) {
+          this._selectMulti(this.selectedValues);
+        } else {
+          this._selectSelected(this.selected);
+        }
+      },
+
+      _selectMulti: function(values) {
+        this._selection.clear();
+        if (values) {
+          for (var i = 0; i < values.length; i++) {
+            this._selection.setItemSelected(this._valueToItem(values[i]), true);
+          }
+        }
+      },
+
+      _selectionChange: function() {
+        var s = this._selection.get();
+        if (this.multi) {
+          this._setSelectedItems(s);
+        } else {
+          this._setSelectedItems([s]);
+          this._setSelectedItem(s);
+        }
+      },
+
+      _toggleSelected: function(value) {
+        var i = this.selectedValues.indexOf(value);
+        var unselected = i < 0;
+        if (unselected) {
+          this.selectedValues.push(value);
+        } else {
+          this.selectedValues.splice(i, 1);
+        }
+        this._selection.setItemSelected(this._valueToItem(value), unselected);
+      }
+
+    }
+  ];
+
+</script>