| <!-- |
| This in an HTML Import-able file that contains the definition |
| of the following elements: |
| |
| <input-list-sk> |
| |
| To use this file import it: |
| |
| <link href="/res/imp/input-list-sk.html" rel="import" /> |
| |
| Usage: |
| |
| <input-list-sk></input-list-sk> |
| |
| Properties: |
| autocomplete: Array<String> values for auto-completing. |
| heading: String, the heading to display |
| values: Array<String> Any typed in values |
| |
| Methods: |
| None. |
| |
| Events: |
| None. |
| --> |
| <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-listbox/paper-listbox.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html"> |
| |
| <link rel="import" href="/res/common/imp/autocomplete-input-sk.html"> |
| <link rel="import" href="/res/common/imp/url-params-sk.html"> |
| |
| <dom-module id="input-list-sk"> |
| <template> |
| <style> |
| #container { |
| margin: 5px; |
| padding: 10px; |
| border: 1px solid #eeeeee; |
| font-size: 12px; |
| } |
| h2 { |
| font-size: 16px; |
| } |
| paper-icon-button { |
| width: 30px; |
| height: 30px; |
| } |
| .filter { |
| font-style: italic; |
| } |
| </style> |
| |
| <div id="container"> |
| <h2>{{heading}}</h2> |
| <template is="dom-repeat" items="[[values]]" as="value"> |
| <div class="horizontal layout center"> |
| <span class="filter flex">{{value}}</span> |
| <paper-icon-button icon="clear" value="{{value}}" on-click="_valueDeleted"></paper-icon-button> |
| </div> |
| </template> |
| <autocomplete-input-sk |
| autocomplete="[[autocomplete]]" |
| id="new" |
| on-change="_newValueEntered" |
| ></autocomplete-input-sk> |
| </div> |
| |
| </template> |
| <script> |
| (function(){ |
| Polymer({ |
| is:"input-list-sk", |
| |
| properties: { |
| autocomplete: { |
| type: Array, |
| }, |
| |
| heading: { |
| type: String, |
| }, |
| |
| values: { |
| type: Array, |
| notify: true, |
| }, |
| }, |
| |
| addValue: function(value) { |
| if (!!value && value != "" && this.values.indexOf(value) == -1) { |
| if (!this.values) { |
| this.set("values", []); |
| } |
| this.push("values", value); |
| } |
| }, |
| |
| deleteValue: function(value) { |
| var idx = this.values.indexOf(value); |
| if (idx >= 0) { |
| this.splice("values", idx, 1); |
| } |
| }, |
| |
| _newValueEntered: function() { |
| var v = this.$.new.value; |
| this.$.new.value = ""; |
| this.addValue(v); |
| this.suggestions = []; |
| }, |
| |
| _valueDeleted: function(e,d,s) { |
| var target = e.target; |
| var toDelete = target.value || target.parentElement.value; |
| this.deleteValue(toDelete); |
| } |
| |
| }); |
| })() |
| </script> |
| </dom-module> |