├── .gitignore
├── .yo-rc.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── demo
    ├── index-custom-chips-styles.html
    ├── index-grouped-suggestions.html
    └── index.html
├── index.html
├── input-autocomplete-behavior.html
├── paper-autocomplete-results.html
├── paper-input-autocomplete-chips.html
├── paper-input-autocomplete.html
└── test
    ├── basic-test.html
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | .idea
3 | 


--------------------------------------------------------------------------------
/.yo-rc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "generator-polymer": {
3 |     "ghUser": "patrinhani-ciandt"
4 |   }
5 | }


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | This file is based on
 3 | https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
 4 | -->
 5 | 
 6 | # WebPaperElements Elements
 7 | ## Guide for Contributors
 8 | 
 9 | ### Filing Issues
10 | 
11 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
12 | 
13 |  1. **Who will use the feature?** _“As someone filling out a form…”_
14 |  2. **When will they use the feature?** _“When I enter an invalid value…”_
15 |  3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
16 | 
17 | **If you are filing an issue to report a bug**, please provide:
18 | 
19 |  1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
20 | 
21 |  ```markdown
22 |  The `x` element causes the page to turn pink when clicked.
23 | 
24 |  ## Expected outcome
25 | 
26 |  The page stays the same color.
27 | 
28 |  ## Actual outcome
29 | 
30 |  The page turns pink.
31 | 
32 |  ## Steps to reproduce
33 | 
34 |  1. Put a `x` element in the page.
35 |  2. Open the page in a web browser.
36 |  3. Click the `x` element.
37 |  ```
38 | 
39 |  2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
40 | 
41 |  3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
42 | 
43 | ### Submitting Pull Requests
44 | 
45 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
46 | 
47 | When submitting pull requests, please provide:
48 | 
49 |  1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
50 | 
51 |  ```markdown
52 |  (For a single issue)
53 |  Fixes #20
54 | 
55 |  (For multiple issues)
56 |  Fixes #32, fixes #40
57 |  ```
58 | 
59 |  2. **A succinct description of the design** used to fix any related issues. For example:
60 | 
61 |  ```markdown
62 |  This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
63 |  ```
64 | 
65 |  3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
66 | 
67 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change.
68 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 WebPaperElements
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # paper-input-autocomplete-chips
 2 | 
 3 | An element providing a starting point for your own reusable Polymer elements.
 4 | 
 5 | [DOCS](http://webpaperelements.github.io/paper-input-autocomplete-chips/components/paper-input-autocomplete-chips/)
 6 | 
 7 | [DEMO](http://webpaperelements.github.io/paper-input-autocomplete-chips/components/paper-input-autocomplete-chips/demo/index.html)
 8 | 
 9 | ## Dependencies
10 | 
11 | Element dependencies are managed via [Bower](http://bower.io/). You can
12 | install that via:
13 | 
14 |     npm install -g bower
15 | 
16 | Then, go ahead and download the element's dependencies:
17 | 
18 |     bower install
19 | 
20 | 
21 | ## Playing With Your Element
22 | 
23 | If you wish to work on your element in isolation, we recommend that you use
24 | [Polyserve](https://github.com/PolymerLabs/polyserve) to keep your element's
25 | bower dependencies in line. You can install it via:
26 | 
27 |     npm install -g polyserve
28 | 
29 | And you can run it via:
30 | 
31 |     polyserve
32 | 
33 | Once running, you can preview your element at
34 | `http://localhost:8080/components/paper-input-autocomplete-chips/`, where `paper-input-autocomplete-chips` is the name of the directory containing it.
35 | 
36 | 
37 | ## Testing Your Element
38 | 
39 | Simply navigate to the `/test` directory of your element to run its tests. If
40 | you are using Polyserve: `http://localhost:8080/components/paper-input-autocomplete-chips/test/`
41 | 
42 | ### web-component-tester
43 | 
44 | The tests are compatible with [web-component-tester](https://github.com/Polymer/web-component-tester).
45 | Install it via:
46 | 
47 |     npm install -g web-component-tester
48 | 
49 | Then, you can run your tests on _all_ of your local browsers via:
50 | 
51 |     wct
52 | 
53 | #### WCT Tips
54 | 
55 | `wct -l chrome` will only run tests in chrome.
56 | 
57 | `wct -p` will keep the browsers alive after test runs (refresh to re-run).
58 | 
59 | `wct test/some-file.html` will test only the files you specify.
60 | 
61 | 
62 | ## Yeoman support
63 | 
64 | If you'd like to use Yeoman to scaffold your element that's possible. The official [`generator-polymer`](https://github.com/yeoman/generator-polymer) generator has a [`seed`](https://github.com/yeoman/generator-polymer#seed) subgenerator.
65 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "paper-input-autocomplete-chips",
 3 |   "version": "0.30.4",
 4 |   "authors": [
 5 |     "Vinicius Patrinhani <patrinhani@ciandt.com>"
 6 |   ],
 7 |   "description": "Web Component for Input autocomplete chips based on Polymer Paper Elements.",
 8 |   "keywords": [
 9 |     "web-component",
10 |     "polymer",
11 |     "material",
12 |     "autocomplete",
13 |     "chips"
14 |   ],
15 |   "main": "paper-input-autocomplete-chips.html",
16 |   "license": "MIT",
17 |   "homepage": "https://github.com/WebPaperElements/paper-input-autocomplete-chips",
18 |   "ignore": [
19 |     "/.*",
20 |     "/test/"
21 |   ],
22 |   "dependencies": {
23 |     "polymer": "Polymer/polymer#^1.4.0",
24 |     "paper-menu": "PolymerElements/paper-menu#^1.1.1",
25 |     "paper-input": "PolymerElements/paper-input#^1.0.15",
26 |     "paper-item": "PolymerElements/paper-item#^1.0.3",
27 |     "iron-icons": "PolymerElements/iron-icons#^1.0.4",
28 |     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.6",
29 |     "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.5",
30 |     "paper-chip": "WebPaperElements/paper-chip#^1.0.9",
31 |     "paper-material": "PolymerElements/paper-material#^1.0.6",
32 |     "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.12",
33 |     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.6",
34 |     "iron-input": "PolymerElements/iron-input#^1.0.8"
35 |   },
36 |   "devDependencies": {
37 |     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
38 |     "web-component-tester": "Polymer/web-component-tester#^5.0.0"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/demo/index-custom-chips-styles.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | -->
 11 | <html>
 12 |   <head>
 13 |     <meta charset="utf-8">
 14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 15 |     <title>paper-input-autocomplete-chips Demo</title>
 16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 17 |     <link rel="import" href="../../paper-button/paper-button.html">
 18 |     <link rel="import" href="../../paper-material/paper-material.html">
 19 |     <link rel="import" href="../../iron-icons/iron-icons.html">
 20 |     <link rel="import" href="../../iron-icons/social-icons.html">
 21 |     <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
 22 |     <link rel="import" href="../paper-input-autocomplete.html">
 23 |     <link rel="import" href="../paper-input-autocomplete-chips.html">
 24 |   </head>
 25 |   <style is="custom-style">
 26 | 
 27 |     body {
 28 |       background-color: darkgrey;
 29 |     }
 30 | 
 31 |     body > paper-material {
 32 |       width: 400px;
 33 |       background-color: white;
 34 |       padding: 24px;
 35 |       margin: 24px;
 36 |     }
 37 | 
 38 |     paper-material.fixed-paper {
 39 |       z-index: 99;
 40 |       position: fixed;
 41 |       top: 10px;
 42 |       right: 24px;
 43 |       bottom: 0px;
 44 |       margin-bottom: 24px;
 45 |       overflow-y: auto;
 46 |     }
 47 | 
 48 |   </style>
 49 |   <body unresolved>
 50 | 
 51 |     <template is="dom-bind" id="app">
 52 |       <style is="custom-style">
 53 |         #myAutoCompletePOCUnknownItems::shadow paper-chip[data-tag="custom01"] .main-container {
 54 |           background-color: #FFB74D;
 55 |         }
 56 | 
 57 |         #myAutoCompletePOCUnknownItems::shadow paper-chip[data-tag="custom02"] .main-container {
 58 |           background-color: #00B74D;
 59 |         }
 60 |       </style>
 61 | 
 62 |       <paper-material class="demo-paper">
 63 |         <p>An example of <code>&lt;paper-input-autocomplete-chips&gt; using tags on items to turn the chips findable or layout customizable.</code>:</p>
 64 | 
 65 |         <paper-input-autocomplete-chips
 66 |           id="myAutoCompletePOCUnknownItems"
 67 |           local-candidates="{{states}}"
 68 |           label="States" >
 69 |         </paper-input-autocomplete-chips>
 70 | 
 71 |       </paper-material>
 72 | 
 73 |       <script>
 74 |         window.addEventListener('WebComponentsReady', function() {
 75 | 
 76 |           var app = document.querySelector('#app');
 77 | 
 78 |           app.states = [
 79 |             {
 80 |               key: 1,
 81 |               text: "Alabama",
 82 |               imgUrl: 'https://lh5.googleusercontent.com/-tlQ1LE9IdgI/AAAAAAAAAAI/AAAAAAAAAAA/xTWfNFP8w_M/s32-c-mo/photo.jpg',
 83 |               tag: 'custom01',
 84 |               readOnly: false
 85 |             },
 86 |             {
 87 |               key: 2,
 88 |               text: "Alaska",
 89 |               imgUrl: 'http://lorempixel.com/256/256/',
 90 |               tag: 'custom02',
 91 |             },
 92 |             {
 93 |               key: 3,
 94 |               text: "American Samoa",
 95 |               imgUrl: 'http://lorempixel.com/200/200/sports/1/'
 96 |             },
 97 |             {
 98 |               key: 4,
 99 |               text: "Arizona",
100 |               imgUrl: 'http://lorempixel.com/256/256/'
101 |             },
102 |             {
103 |               key: 5,
104 |               text: "Arkansas",
105 |               imgUrl: null
106 |             },
107 |             {
108 |               key: 6,
109 |               text: "California",
110 |               imgUrl: 'http://lorempixel.com/256/256/'
111 |             },
112 |             {
113 |               key: 7,
114 |               text: "Colorado",
115 |               imgUrl: null
116 |             }
117 |           ];
118 |         });
119 |       </script>
120 |     </template>
121 |   </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/demo/index-grouped-suggestions.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | -->
 11 | <html>
 12 |   <head>
 13 |     <meta charset="utf-8">
 14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 15 |     <title>paper-input-autocomplete-chips Demo</title>
 16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 17 |     <link rel="import" href="../../paper-button/paper-button.html">
 18 |     <link rel="import" href="../../paper-material/paper-material.html">
 19 |     <link rel="import" href="../../iron-icons/iron-icons.html">
 20 |     <link rel="import" href="../../iron-icons/social-icons.html">
 21 |     <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
 22 |     <link rel="import" href="../../paper-item/paper-item.html">
 23 |     <link rel="import" href="../../paper-item/paper-icon-item.html">
 24 |     <link rel="import" href="../../paper-item/paper-item-body.html">
 25 |     <link rel="import" href="../paper-input-autocomplete.html">
 26 |     <link rel="import" href="../paper-input-autocomplete-chips.html">
 27 |   </head>
 28 |   <style is="custom-style">
 29 |     
 30 |     body {
 31 |       background-color: darkgrey;
 32 |     }
 33 |         
 34 |     body > paper-material {
 35 |       width: 400px;
 36 |       background-color: white;
 37 |       padding: 24px;
 38 |       margin: 24px;
 39 |     }
 40 |     
 41 |     paper-material.fixed-paper {
 42 |       z-index: 99;
 43 |       position: fixed;
 44 |       top: 10px;
 45 |       right: 24px;
 46 |       bottom: 0px;
 47 |       margin-bottom: 24px;
 48 |       overflow-y: auto;
 49 |     }
 50 |     
 51 |   </style>
 52 |   <body unresolved>
 53 | 
 54 |     <template is="dom-bind" id="app">
 55 |       <style is="custom-style">
 56 |         
 57 |         paper-input-autocomplete-chips {
 58 |           --paper-input-autocomplete-chips-suggestion-item-selected-weight: normal;
 59 | 
 60 |           --paper-input-autocomplete-chips-suggestion-container: {
 61 |             max-height: 256px;
 62 |           };
 63 | 
 64 |           --paper-input-autocomplete-chips-suggestion-item: {
 65 |             font-size: 15px;
 66 |             line-height: 20px;
 67 |             padding-top: 0px;
 68 |             padding-bottom: 0px;
 69 |           };
 70 |                     
 71 |           --paper-input-autocomplete-chips-suggestion-item-image: {
 72 |             width: 24px;
 73 |             height: 24px;
 74 |           };
 75 |         }
 76 |         
 77 |         #myAutoCompletePOCUnknownItems::shadow paper-chip[data-tag="custom01"] .main-container {
 78 |           background-color: #FFB74D;
 79 |         }
 80 | 
 81 |         #myAutoCompletePOCUnknownItems::shadow paper-chip[data-tag="custom02"] .main-container {
 82 |           background-color: #00B74D;
 83 |         }
 84 |       </style>
 85 | 
 86 |       <paper-material class="demo-paper">
 87 |         <p>An example of <code>&lt;paper-input-autocomplete-chips&gt; using tags on items to turn the chips findable or layout customizable.</code>:</p>
 88 |             
 89 |         <paper-input-autocomplete-chips 
 90 |           id="myAutoCompletePOCUnknownItems" 
 91 |           local-candidates="{{states}}" 
 92 |           label="States" 
 93 |           grouped-suggestions>
 94 |         </paper-input-autocomplete-chips>
 95 | 
 96 |       </paper-material>
 97 |     
 98 |       <script>
 99 |         window.addEventListener('WebComponentsReady', function() {
100 |           
101 |           var app = document.querySelector('#app');
102 |                     
103 |           app.states = [
104 |             {
105 |               key: 1,
106 |               text: "Alabama",
107 |               imgUrl: 'https://lh5.googleusercontent.com/-tlQ1LE9IdgI/AAAAAAAAAAI/AAAAAAAAAAA/xTWfNFP8w_M/s32-c-mo/photo.jpg',
108 |               tag: 'custom01',
109 |               group: 'Other',
110 |               groupIcon: 'dashboard',
111 |               readOnly: false
112 |             },
113 |             {
114 |               key: 2,
115 |               text: "Alaska",
116 |               imgUrl: 'http://lorempixel.com/256/256/',
117 |               tag: 'custom02',
118 |               group: 'Cold',
119 |               groupIcon: 'dashboard',
120 |             },
121 |             {
122 |               key: 3,
123 |               text: "American Samoa",
124 |               imgUrl: 'http://lorempixel.com/200/200/sports/1/',
125 |               group: 'Hot',
126 |               groupIcon: 'dashboard',
127 |             },
128 |             {
129 |               key: 4,
130 |               text: "Arizona",
131 |               imgUrl: 'http://lorempixel.com/256/256/',
132 |               group: 'Hot',
133 |               groupIcon: 'dashboard',
134 |             },
135 |             {
136 |               key: 5,
137 |               text: "Arkansas",
138 |               imgUrl: null,
139 |               group: 'Hot',
140 |             },
141 |             {
142 |               key: 6,
143 |               text: "California",
144 |               imgUrl: 'http://lorempixel.com/256/256/',
145 |               //group: 'Hot',
146 |             },
147 |             {
148 |               key: 7,
149 |               text: "Colorado",
150 |               imgUrl: null,
151 |               //group: 'Hot'
152 |             }
153 |           ];
154 |         });        
155 |       </script>
156 |     </template>
157 |   </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | -->
 11 | <html>
 12 |   <head>
 13 |     <meta charset="utf-8">
 14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 15 |     <title>paper-input-autocomplete-chips Demo</title>
 16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 17 |     <link rel="import" href="../../paper-button/paper-button.html">
 18 |     <link rel="import" href="../../paper-material/paper-material.html">
 19 |     <link rel="import" href="../../iron-icons/iron-icons.html">
 20 |     <link rel="import" href="../../iron-icons/social-icons.html">
 21 |     <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
 22 |     <link rel="import" href="../paper-input-autocomplete.html">
 23 |     <link rel="import" href="../paper-input-autocomplete-chips.html">
 24 |   </head>
 25 |   <style>
 26 |     
 27 |     body {
 28 |       background-color: darkgrey;
 29 |     }
 30 |         
 31 |     body > paper-material {
 32 |       width: 400px;
 33 |       background-color: white;
 34 |       padding: 24px;
 35 |       margin: 24px;
 36 |     }
 37 |     
 38 |     paper-material.fixed-paper {
 39 |       z-index: 99;
 40 |       position: fixed;
 41 |       top: 10px;
 42 |       right: 24px;
 43 |       bottom: 0px;
 44 |       margin-bottom: 24px;
 45 |       overflow-y: auto;
 46 |     }
 47 |     
 48 |     paper-chip[data-tag='read-only'] #chip {
 49 |       background-color: #FFB74D;
 50 |     }
 51 |     
 52 |   </style>
 53 |   <body unresolved>
 54 | 
 55 |     <template is="dom-bind" id="app">
 56 | 
 57 |       <paper-material class="demo-paper">
 58 |         <p>Some other DEMOS here:</p>
 59 |         <a href="index-custom-chips-styles.html" target="_blank">Custom Chip Styles</a>
 60 |         <a href="index-grouped-suggestions.html" target="_blank">Grouped Suggestions</a>
 61 |       </paper-material>
 62 | 
 63 |       <paper-material class="demo-paper">
 64 |         <p>An example of new <code>&lt;paper-input-autocomplete-chips&gt; for ajax support</code>:</p>
 65 |             
 66 |         <paper-input-autocomplete-chips 
 67 |           id="myAutoCompletePOCUnknownItems" 
 68 |           remote-url="http://www.mocky.io/v2/56b0dda4120000ec18670762"
 69 |           label="Invite people" 
 70 |           on-selected-objects-changed="_allowUnknown_onSelectedObjectsChanged"
 71 |           on-response-treatment="XHRResponseTreatment"
 72 |           placeholder-after-selected="E-mail..."
 73 |           pattern='^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
 74 |           error-message="Invalid E-mail"
 75 |           token-accept-key-codes="32,188"
 76 |           allow-select-unknown-token
 77 |           validate-on-accept
 78 |           no-chip-image
 79 |           paste-handler="{{_pasteHandler}}">
 80 | 
 81 |             <div loading>LOADING</div>
 82 | 
 83 |         </paper-input-autocomplete-chips>
 84 | 
 85 |       </paper-material>
 86 | 
 87 |       <paper-material class="demo-paper">
 88 |         <p>An example of new <code>&lt;paper-input-autocomplete-chips&gt; for tags accepting non unknown Items</code>:</p>
 89 | 
 90 |         <paper-button on-tap="onTestAppendSelectedObjects" raised>Try Append Objects</paper-button>
 91 |         <paper-button on-tap="onTestSetReadOnlyObjects" raised>Set Read Only</paper-button>
 92 |         <paper-button on-tap="onTestSetRemoveOnlyObjects" raised>Set Remove Only</paper-button>
 93 |             
 94 |         <paper-input-autocomplete-chips 
 95 |           id="myAutoCompletePOCUnknownItems" 
 96 |           local-candidates="{{states}}" 
 97 |           chip-label-prefix="#" 
 98 |           label="State hashtags" 
 99 |           on-selected-objects-changed="_allowUnknown_onSelectedObjectsChanged"
100 |           on-selecting-object="_allowUnknown_onSelectingObject" 
101 |           placeholder-after-selected="#"
102 |           max-selected-items="10"
103 |           auto-validate pattern="^(.*[^, #]* *)*$" error-message="Bad formatted string for a hashtag !"
104 |           token-accept-key-codes="32,188"
105 |           allow-select-unknown-token>
106 |         </paper-input-autocomplete-chips>
107 | 
108 |       </paper-material>
109 | 
110 |       <paper-material class="demo-paper">
111 |         <p>An example of new <code>&lt;paper-input-autocomplete-chips&gt;</code>:</p>
112 |     
113 |         <paper-button on-tap="onToggleDisabled" raised>Toggle Disabled</paper-button>
114 |         <paper-button on-tap="onSwitchSuggestionPanelPosition" raised>Switch Suggestion Panel (top/bottom)</paper-button>
115 |         <paper-input label="Chip label prefix" value="{{chipLabelPrefix}}"></paper-input>
116 |         <paper-input label="Chip label suffix" value="{{chipLabelSuffix}}"></paper-input>
117 |             
118 |         <paper-input-autocomplete-chips id="myAutoCompletePOC" local-candidates="{{states}}" chip-label-prefix="[[chipLabelPrefix]]" chip-label-suffix="[[chipLabelSuffix]]" label="Chips" placeholder-after-selected="..." search-on-got-focus search-if-empty>
119 |           <iron-icon icon="social:share" prefix></iron-icon>
120 |           <paper-icon-button icon="lock-open" suffix></paper-icon-button>
121 |         </paper-input-autocomplete-chips>
122 | 
123 |         <paper-input-autocomplete-chips id="myAutoCompletePOC02" local-candidates="{{states}}" label="Chips" placeholder-after-selected="...">
124 |           <iron-icon icon="social:share" prefix></iron-icon>
125 |           <paper-icon-button icon="lock" suffix></paper-icon-button>
126 |         </paper-input-autocomplete-chips>
127 |       </paper-material>
128 | 
129 |       <paper-material class="demo-paper">
130 |         <p>An example of <code>&lt;paper-input-autocomplete-chips&gt;</code>:</p>
131 |         
132 |         <paper-button on-tap="onSetDefaultValue" raised>Set default value</paper-button>
133 |     
134 |         <paper-input-autocomplete-chips id="myAutoComplete" local-candidates="{{states}}" label="Chips">
135 |           <!--<iron-icon icon="visibility" prefix></iron-icon>
136 |           <iron-icon icon="visibility" suffix></iron-icon>-->
137 |         </paper-input-autocomplete-chips>
138 |       </paper-material>
139 | 
140 |       <paper-material class="demo-paper">
141 |         <p>An example of <code>&lt;paper-chip&gt;</code>:</p>
142 |     
143 |         <paper-chip label="Jane Doe" style="display: block;" removable openable>
144 |           <div class="icon">J</div>
145 |           <h1>jdoe@example.com</h1>
146 |         </paper-chip>
147 |   
148 |         <paper-chip label="Jane Doe" style="display: block;" removable openable animated>
149 |           <div class="icon">J</div>
150 |           <h1>jdoe@example.com</h1>
151 |         </paper-chip>
152 |       </paper-material>
153 | 
154 |       <paper-material class="demo-paper" style="height: 300px; overflow: auto;">
155 |         <p>An example of <code>&lt;paper-input-autocomplete-chips&gt;</code>:</p>
156 |     
157 |         <paper-input-autocomplete-chips local-candidates="{{states}}" label="Chips">
158 |           <!--<iron-icon icon="visibility" prefix></iron-icon>
159 |           <iron-icon icon="visibility" suffix></iron-icon>-->
160 |         </paper-input-autocomplete-chips>
161 |       </paper-material>
162 | 
163 | 
164 |       <paper-material class="demo-paper" style="height: 300px; overflow: auto;">
165 |         <p>An example of <code>&lt;paper-input-autocomplete-chips&gt;</code> with the <code>noSuggestInactive</code> attribute:</p>
166 |         <p>It won't suggest neither Alabama nor Alaska</p>
167 |         <paper-input-autocomplete-chips local-candidates="{{states}}" label="Chips" no-suggest-inactive>
168 |         </paper-input-autocomplete-chips>
169 |       </paper-material>
170 | 
171 |     
172 |       <script>
173 |         window.addEventListener('WebComponentsReady', function() {
174 |           
175 |           var app = document.querySelector('#app');
176 | 
177 |           app.onTestAppendSelectedObjects = function () {
178 |             document.getElementById('myAutoCompletePOCUnknownItems').appendSelectedObject({
179 |               text: 'NewItem',
180 |               readOnly: true
181 |             });
182 | 
183 |             // document.getElementById('myAutoCompletePOCUnknownItems').selectedObjects = [
184 |             //   {
185 |             //     text: 'NewItem01'
186 |             //   },
187 |             //   {
188 |             //     text: 'NewItem02'
189 |             //   }
190 |             // ];
191 |           };
192 | 
193 |           app.onTestSetReadOnlyObjects = function () {
194 |               var autoComplete = document.getElementById('myAutoCompletePOCUnknownItems');
195 |               
196 |               autoComplete.readOnly = !autoComplete.readOnly; 
197 |           };
198 |           
199 |           app.onTestSetRemoveOnlyObjects = function () {
200 |               var autoComplete = document.getElementById('myAutoCompletePOCUnknownItems');
201 |               
202 |               autoComplete.removeOnly = !autoComplete.removeOnly; 
203 |           };
204 |           
205 |           app.onSetDefaultValue = function () {
206 |             document.getElementById('myAutoComplete').selectedObject = app.states[0];
207 |           };
208 |           
209 |           app.onToggleDisabled = function () {
210 |             var $el = document.getElementById('myAutoCompletePOC');
211 |             $el.disabled = !$el.disabled;
212 |           };
213 |           
214 |           app.onSwitchSuggestionPanelPosition = function () {
215 |             var $el = document.getElementById('myAutoCompletePOC');
216 |             //console.debug($el.suggestionsPosition);
217 |             $el.suggestionsPosition = ($el.suggestionsPosition === 'top') ? 'bottom' : 'top';
218 |           };
219 |           
220 |           app._allowUnknown_onSelectedObjectsChanged = function (e) {
221 |             //console.debug('[_allowUnknown_onSelectedObjectsChanged]', e.target.selectedObjects);
222 |           };
223 |           
224 |           app._allowUnknown_onSelectingObject = function (e) {
225 | 
226 |             if (e.detail.selectedObject.text.indexOf('@') === 0) {
227 |                 e.preventDefault();
228 |             }
229 |             
230 |             if (e.detail.selectedObject.text.indexOf('#') === 0) {
231 |                 e.detail.selectedObject.text = e.detail.selectedObject.text.substring(1);  
232 |             }
233 |           };
234 | 
235 |           app.XHRResponseTreatment = function(e){
236 |             var length = e.detail.response.length;
237 |             
238 |             for(var i = 0; i < length; i++){
239 |               e.detail.response[i].text = e.detail.response[i].t;
240 |               e.detail.response[i].imgUrl = e.detail.response[i].i;
241 |             }
242 |           };
243 | 
244 |           app._pasteHandler = function( text ){
245 |             return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
246 |           };
247 |                   
248 |           app.defaultSuggestions = [
249 |             {
250 |               key: 1,
251 |               text: "Alabama",
252 |               imgUrl: 'https://lh5.googleusercontent.com/-tlQ1LE9IdgI/AAAAAAAAAAI/AAAAAAAAAAA/xTWfNFP8w_M/s32-c-mo/photo.jpg',
253 |               tag: 'read-only',
254 |               readOnly: false
255 |             },
256 |             {
257 |               key: 2,
258 |               text: "Alaska",
259 |               imgUrl: 'http://lorempixel.com/256/256/'
260 |             },
261 |           ];
262 |                     
263 |           app.states = [
264 |             {
265 |               key: 1,
266 |               text: "Alabama",
267 |               imgUrl: 'https://lh5.googleusercontent.com/-tlQ1LE9IdgI/AAAAAAAAAAI/AAAAAAAAAAA/xTWfNFP8w_M/s32-c-mo/photo.jpg',
268 |               tag: 'read-only',
269 |               readOnly: false,
270 |               inactive: true
271 |             },
272 |             {
273 |               key: 2,
274 |               text: "Alaska",
275 |               imgUrl: 'http://lorempixel.com/256/256/',
276 |               inactive: true
277 |             },
278 |             {
279 |               key: 3,
280 |               text: "American Samoa",
281 |               imgUrl: 'http://lorempixel.com/200/200/sports/1/'
282 |             },
283 |             {
284 |               key: 4,
285 |               text: "Arizona",
286 |               imgUrl: 'http://lorempixel.com/256/256/'
287 |             },
288 |             {
289 |               key: 5,
290 |               text: "Arkansas",
291 |               imgUrl: null
292 |             },
293 |             {
294 |               key: 6,
295 |               text: "California",
296 |               imgUrl: 'http://lorempixel.com/256/256/'
297 |             },
298 |             {
299 |               key: 7,
300 |               text: "Colorado",
301 |               imgUrl: null
302 |             }
303 |           ];
304 | 
305 |           var autocompletePOC = document.getElementById('myAutoCompletePOC');
306 |           /*
307 |           autocompletePOC.selectedObjects = [
308 |             app.states[0],
309 |             app.states[1],
310 |             app.states[2],
311 |             app.states[3],
312 |             app.states[4],
313 |           ];
314 |           */
315 | 
316 |           // 
317 |           // app.states = [
318 |           //   "Alabama",
319 |           //   "Alaska",
320 |           //   "American Samoa",
321 |           //   "Arizona",
322 |           //   "Arkansas",
323 |           //   "California",
324 |           //   "Colorado",
325 |           //   "Connecticut",
326 |           //   "Delaware",
327 |           //   "District Of Columbia",
328 |           //   "Federated States Of Micronesia",
329 |           //   "Florida",
330 |           //   "Georgia",
331 |           //   "Guam",
332 |           //   "Hawaii",
333 |           //   "Idaho",
334 |           //   "Illinois",
335 |           //   "Indiana",
336 |           //   "Iowa",
337 |           //   "Kansas",
338 |           //   "Kentucky",
339 |           //   "Louisiana",
340 |           //   "Maine",
341 |           //   "Marshall Islands",
342 |           //   "Maryland",
343 |           //   "Massachusetts",
344 |           //   "Michigan",
345 |           //   "Minnesota",
346 |           //   "Mississippi",
347 |           //   "Missouri",
348 |           //   "Montana",
349 |           //   "Nebraska",
350 |           //   "Nevada",
351 |           //   "New Hampshire",
352 |           //   "New Jersey",
353 |           //   "New Mexico",
354 |           //   "New York",
355 |           //   "North Carolina",
356 |           //   "North Dakota",
357 |           //   "Northern Mariana Islands",
358 |           //   "Ohio",
359 |           //   "Oklahoma",
360 |           //   "Oregon",
361 |           //   "Palau",
362 |           //   "Pennsylvania",
363 |           //   "Puerto Rico",
364 |           //   "Rhode Island",
365 |           //   "South Carolina",
366 |           //   "South Dakota",
367 |           //   "Tennessee",
368 |           //   "Texas",
369 |           //   "Utah",
370 |           //   "Vermont",
371 |           //   "Virgin Islands",
372 |           //   "Virginia",
373 |           //   "Washington",
374 |           //   "West Virginia",
375 |           //   "Wisconsin",
376 |           //   "Wyoming"
377 |           // ];
378 |         });        
379 |       </script>
380 |     </template>
381 |   </body>
382 | </html>
383 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | <head>
13 | 
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 | 
17 |   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
19 | 
20 | </head>
21 | <body unresolved>
22 |   <!-- Note: if the main element for this repository doesn't
23 |        match the folder name, add a src="&lt;main-component&gt;.html" attribute,
24 |        where &lt;main-component&gt;.html" is a file that imports all of the
25 |        components you want documented. -->
26 |   <iron-component-page></iron-component-page>
27 | 
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/input-autocomplete-behavior.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../iron-behaviors/iron-control-state.html">
  3 | 
  4 | <script>
  5 |   var WebPaperElem = WebPaperElem || {};
  6 |   /*
  7 |   * @polymerBehavior WebPaperElem.InputAutoCompleteBehavior
  8 |   */
  9 |   WebPaperElem.InputAutoCompleteBehaviorImpl = {
 10 | 	  properties: {
 11 |       selectedItem: {
 12 |         type: Object,
 13 |       },
 14 |       selectedItemText: {
 15 |         type: String,
 16 |       },
 17 |       /**
 18 |        * The candidates from local variable.
 19 |        */
 20 |       localCandidates:{
 21 |         type:Array,
 22 |         value:function () { return []; }
 23 |       },
 24 |       /**
 25 |        * Remote URL.
 26 |        */
 27 |       remoteUrl:{
 28 |         type:String,
 29 |         value:''
 30 |       },
 31 |       /**
 32 |        * Internal variable holding all matched suggestions.
 33 |        */
 34 |       _suggestions:{
 35 |         type:Array,
 36 |         value: function () { return []; }
 37 |       },
 38 |       /**
 39 |        * Maximum number of suggestions to show up in typeahead.
 40 |        */
 41 |       maxSuggestions:{
 42 |         type:Number,
 43 |         value:5
 44 |       },
 45 | 
 46 |       /**
 47 |        * Input value.
 48 |        */
 49 |       inputValue: {
 50 |         type: String,
 51 |         notify: true,
 52 |       },
 53 | 
 54 |       _loading:{
 55 |         type: Boolean,
 56 |         value: false
 57 |       },
 58 | 
 59 |       allowSelectUnknownToken: {
 60 |         type: Boolean,
 61 |         value: false
 62 |       },
 63 | 
 64 |       tokenAcceptKeyCodes: {
 65 |         type: String,
 66 |         value: '',
 67 |         observer: '_tokenAcceptKeyCodesChanged'
 68 |       },
 69 | 
 70 |       validateOnAccept: {
 71 |         type: Boolean,
 72 |         value: false
 73 |       },
 74 | 
 75 |       /**
 76 |        * The attribute to listen for value changes on.
 77 |        */
 78 |       attrForValue: {
 79 |         type: String,
 80 |         value: 'bind-value'
 81 |       },
 82 | 
 83 |       suggestionsPosition: {
 84 |         type: String,
 85 |         value: 'bottom',
 86 |       },
 87 | 
 88 |       groupedSuggestions: {
 89 |         type: Boolean,
 90 |         value: false
 91 |       },
 92 | 
 93 |       searchIfEmpty: {
 94 |         type: Boolean,
 95 |         value: false
 96 |       },
 97 | 
 98 |       searchOnGotFocus: {
 99 |         type: Boolean,
100 |         value: false,
101 |       },
102 | 
103 |       extraHeaders: {
104 |         type: Object,
105 |         value: function() {
106 |           return {};
107 |         }
108 |       },
109 | 
110 |       /**
111 |        * If set to true, elements will not be automatically selected when the
112 |        * mouse hovers over them
113 |        */
114 |       disableHoverSelect: {
115 |         type: Boolean,
116 |         value: false
117 |       },
118 | 
119 |       pasteHandler: {
120 |         type: Function,
121 |         notify: true
122 |       },
123 | 
124 |       withCustomPasteActionHandler: {
125 |         type: Boolean,
126 |         value: false
127 |       },
128 | 
129 |       /**
130 |        * If set to true, candidate items which property 'inactive' are set to true
131 |        * won't be suggested
132 |        */
133 |       noSuggestInactive: {
134 |         type: Boolean,
135 |         value: false
136 |       },
137 | 
138 | 	  },
139 | 
140 |     _tokenAcceptKeyCodesChanged: function (newValue) {
141 |       this.tokenAcceptKeyCodesArray = (newValue) ? newValue.split(',') : [];
142 |       this.tokenAcceptKeyCodesArray.push('13'); /* return key is default. */
143 |       this.tokenAcceptKeyCodesArray.push('9'); /* tab key is default. */
144 |     },
145 | 
146 |     get _propertyForValue() {
147 |       return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
148 |     },
149 | 
150 |     /**
151 |      * Returns a reference to the input element.
152 |      */
153 |     get _inputElement() {
154 |       return this.$$('paper-input.autocomplete-input, input.autocomplete-input');
155 |     },
156 | 
157 |     /**
158 |      * Returns a reference to the menu element.
159 |      */
160 |     get _menuElement() {
161 |       return this.$$('paper-autocomplete-results.autocomplete-suggestions');
162 |     },
163 | 
164 |     get isSuggestionsOnBottom() {
165 |       return (this.suggestionsPosition === 'bottom');
166 |     },
167 | 
168 |     get _safeInputValue() {
169 |       return (this.inputValue) ? this.inputValue.trim() : '';
170 |     },
171 | 
172 |     get _suggestionsFocusedItem() {
173 |       var suggestionsMenu = this._menuElement;
174 |       return (suggestionsMenu) ? suggestionsMenu.focusedItem : null;
175 |     },
176 | 
177 |     setSuggestions: function (suggestions) {
178 |       this._suggestions = this._normalizeSuggestionsList(suggestions);
179 |     },
180 | 
181 |     _normalizeSuggestionsList: function (suggestions) {
182 |       if (suggestions) {
183 |         var filteredSuggestions = this._suggestionFilterBeforePublish(suggestions);
184 | 
185 |         if (this.groupedSuggestions) {
186 |           return this._groupSuggestions(filteredSuggestions);
187 |         } else {
188 |           return this._processSuggestionArrayBeforePublish(filteredSuggestions);
189 |         }
190 |       } else {
191 |         return [];
192 |       }
193 |     },
194 | 
195 |     _groupSuggestions: function (suggestions) {
196 |       var groupedSuggestions = [];
197 |       var groupStructure = {};
198 | 
199 |       suggestions.forEach(function (item) {
200 |         var groupName = '{none}';
201 |         if (item.group) {
202 |           groupName = item.group;
203 |         }
204 |         if (!groupStructure[groupName]) {
205 |           groupStructure[groupName] = {
206 |             groupIcon: item.groupIcon,
207 |             items: []
208 |           };
209 |         }
210 |         groupStructure[groupName].items.push(item);
211 |       });
212 | 
213 |       for (var key in groupStructure) {
214 |         if (groupStructure.hasOwnProperty(key)) {
215 |           groupedSuggestions.push({
216 |             groupName: key,
217 |             groupIcon: groupStructure[key].groupIcon,
218 |             items: this._processSuggestionArrayBeforePublish(groupStructure[key].items)
219 |           });
220 |         }
221 |       }
222 | 
223 |       return groupedSuggestions;
224 |     },
225 | 
226 |     _processSuggestionArrayBeforePublish: function (suggestionsArray) {
227 |       if (!this.isSuggestionsOnBottom) {
228 |         return suggestionsArray.slice(0, this.maxSuggestions).reverse();
229 |       } else {
230 |         return suggestionsArray.slice(0, this.maxSuggestions);
231 |       }
232 |     },
233 | 
234 |     _suggestionFilterBeforePublish: function (suggestions) {
235 |       return suggestions;
236 |     },
237 | 
238 |     // Element Behavior
239 |     /**
240 |      * Callback for keydown event
241 |      *
242 |      * @param {e} event
243 |      */
244 |     _keydown: function(e) {
245 |       var defaultPreventedKeyCodes = [
246 |         27, /* ESC */
247 |         40,
248 |         38
249 |       ];
250 | 
251 |       // TAB
252 |       if ( e.which === 9) {
253 |         if (this._safeInputValue.length > 0 && this._suggestions.length === 0) {
254 |           //console.warn('[_keydown]: IF01');
255 |           e.preventDefault();
256 |         } else if ((this._safeInputValue.length <= 0) || (!this._suggestionsFocusedItem)) {
257 |           //console.warn('[_keydown]: IF02');
258 |           return false;
259 |         }
260 |       }
261 | 
262 |       if ((defaultPreventedKeyCodes.indexOf(e.which) >= 0) || (this._checkTokenAcceptKeyCode(e.which))) {
263 |         //console.warn('[_keydown]: IF03');
264 |         e.preventDefault();
265 |       }
266 |     },
267 |     /**
268 |      * Callback on mouse over event on paper-item
269 |      *
270 |      */
271 |     _onMouseOverSelectable: function(e) {
272 |       if (this.disableHoverSelect) {
273 |         return;
274 |       }
275 | 
276 |       var suggestionsMenu = this._menuElement;
277 |       if (suggestionsMenu && typeof(suggestionsMenu) !== 'undefined'){
278 |         var selectedItem = e.currentTarget;
279 |         index = Number(suggestionsMenu.indexOfSelectable(selectedItem));
280 |         suggestionsMenu.select(index);
281 |       }
282 |     },
283 |     /**
284 |      * Callback on tap event on paper-item
285 |      *
286 |      */
287 |     _onTapSelectable: function(e) {
288 |       var suggestionsMenu = this._menuElement;
289 |       if (suggestionsMenu && typeof(suggestionsMenu) !== 'undefined'){
290 |         this._setSelectedItem(e.currentTarget);
291 |         e.stopPropagation();
292 |       }
293 |     },
294 |     /**
295 |      * Callback for keyup event
296 |      *
297 |      * @param {e} event
298 |      */
299 |     _keyup: function(e) {
300 |       var suggestionsMenu = this._menuElement;
301 | 
302 |       if(this.validateOnAccept){
303 |         this._inputElement.invalid = false;
304 |       }
305 | 
306 |       var searchTerm = this._safeInputValue;
307 | 
308 |       if (e.which == 27) {
309 |         // ESC Key
310 |         this.inputValue = '';
311 | 
312 |         this._checkIntegrityOfSelectedItem();
313 |         this._search(searchTerm);
314 |       } else if (e.which == 40){
315 |         // Down Key
316 |         if (!suggestionsMenu) { return; }
317 | 
318 |         suggestionsMenu.selectNext();
319 |       } else if (e.which == 38){
320 |         // Up Key
321 |         if (!suggestionsMenu) { return; }
322 | 
323 |         suggestionsMenu.selectPrevious();
324 |       } else if (this._checkTokenAcceptKeyCode(e.which)){
325 |         // Return Key
326 |         //console.warn('[_keyup]: IF01');
327 |         this._createChip();
328 | 
329 |         if (this.searchOnGotFocus) {
330 |           this._search(this._safeInputValue);
331 |         }
332 |       }else if (e.which === 37) { //left
333 | 
334 |       }else if (e.which === 39) { // right
335 | 
336 |       } else if (e.which !== 16) {
337 |         //console.warn('[_keyup]: ELSE: ', e.which);
338 |         this._checkIntegrityOfSelectedItem();
339 | 
340 |         this._search(searchTerm);
341 |       }
342 |     },
343 | 
344 |     _blur: function(e){
345 |       //console.debug('[_blur]', e);
346 |       var relativeFocusedTarget = e.relatedTarget || e.explicitOriginalTarget;
347 |       if ((!relativeFocusedTarget) || ((relativeFocusedTarget) && (!this._menuElement.contains(relativeFocusedTarget)))) {
348 |         this.setSuggestions([]);
349 |         this.inputValue = '';
350 |       }
351 |     },
352 | 
353 |     _paste: function(e){
354 |       var text = '';
355 |       var data = [];
356 | 
357 |       if (this.withCustomPasteActionHandler) {
358 |         var evtObj = {
359 |           clipboardData : e.clipboardData
360 |         };
361 |         var respPasteAction = this.fire('paste-action', evtObj, {cancelable: true});
362 | 
363 |         if (!respPasteAction.defaultPrevented) {
364 |           e.preventDefault();
365 |         }
366 |       } else {
367 |         /* OBSOLETE */
368 |         if (!this.pasteHandler){
369 |           return;
370 |         }
371 | 
372 |         if (/text\/plain/.test(e.clipboardData.types)) {
373 |           text = e.clipboardData.getData('text/plain');
374 |         }
375 | 
376 |         data = this.pasteHandler(text);
377 | 
378 |         if(data && data.length){
379 |           for(var i = 0; i < data.length; i++){
380 |             this.selectedObject = {
381 |               key: this._generateObjectKey(data[i]),
382 |               text: data[i]
383 |             };
384 |           }
385 |           e.preventDefault();
386 |         }
387 |       }
388 |     },
389 | 
390 |     _createChip: function(){
391 |       if(this.validateOnAccept && !this._inputElement.validate() ){
392 |         // IRON-INPUT BUG - VALIDATE METHOD SET INVALID TO TRUE BUT STYLES ARE NOT UPDATED
393 |         this._inputElement.invalid = false;
394 |         this._inputElement.invalid = true;
395 |       }
396 | 
397 |       var suggestionFocusedItem = this._suggestionsFocusedItem;
398 | 
399 |       if ((suggestionFocusedItem) || (!this._inputElement.invalid )) {
400 |         if (suggestionFocusedItem) {
401 |           this._setSelectedItem(suggestionFocusedItem);
402 |         } else {
403 |           this._setSelectedItem();
404 |         }
405 |       } else{
406 |         this.setSuggestions([]);
407 |       }
408 |     },
409 | 
410 |     _checkIntegrityOfSelectedItem: function () {
411 |       var _inputValue = this._safeInputValue;
412 | 
413 |       if ((this.selectedItem) &&
414 |           ((_inputValue === '')||
415 |            (this.inputValue !== this.selectedItemText))) {
416 |         this._setSelectedItem(null);
417 |       }
418 |     },
419 | 
420 |     _setSelectedItem: function (selectedItemElement) {
421 |       var suggestionsMenu = this._menuElement;
422 | 
423 |       if (selectedItemElement !== undefined) {
424 |         if (this.selectedItem !== selectedItemElement) {
425 | 
426 |           var selectedObject = null;
427 |           var selectedItemText = null;
428 | 
429 |           if (selectedItemElement !== null) {
430 |             index = Number(suggestionsMenu.indexOfSelectable(selectedItemElement));
431 |             if (index >= 0) {
432 |               selectedObject = selectedItemElement.dataObject;
433 | 
434 |               selectedItemText = selectedObject.text;
435 |               this.setSuggestions([]);
436 |               this.inputValue = selectedItemText;
437 |             } else {
438 |               selectedItemElement = null;
439 |             }
440 |           }
441 | 
442 |           this.selectedItemText = selectedItemText;
443 |           this.selectedItem = selectedItemElement;
444 |           this.selectedObject = selectedObject;
445 | 
446 |         }
447 |       } else if (this.allowSelectUnknownToken) {
448 | 
449 |         if (!this.invalid) {
450 |           var selectedItemText = this._safeInputValue;
451 | 
452 |           if (selectedItemText.length > 0) {
453 |             var selectedObject = {
454 |               key: this._generateObjectKey(selectedItemText),
455 |               text: selectedItemText
456 |             };
457 | 
458 |             this.selectedItemText = selectedItemText;
459 |             this.selectedObject = selectedObject;
460 |             this.setSuggestions([]);
461 | 
462 |             if(this.xmlhttp){
463 |               this.xmlhttp.abort();
464 |             }
465 |           }
466 |         }
467 |       }
468 | 
469 |       if(this.validateOnAccept){
470 |         this._inputElement.invalid = false;
471 |       }
472 |     },
473 | 
474 |     _generateObjectKey: function (text) {
475 |       return 'dyn_' + this._strHashCode((text) ? text.toLowerCase() : '');
476 |     },
477 | 
478 |     _search: function(term){
479 |       var that = this;
480 |       this.xmlhttp;
481 | 
482 |       this.debounce('search', function(){
483 |         if ((term === '') && (!this.searchIfEmpty)) {
484 |           this.setSuggestions([]);
485 |           return;
486 |         }
487 | 
488 |         var patt =  new RegExp( this._scapeString( term.toLowerCase() ) );
489 |         var matchedStartsWith = [];
490 |         var matchedContains = [];
491 |         var matched = [];
492 |         var candidates = this.localCandidates;
493 |         var noSuggestInactive = Boolean(this.noSuggestInactive);
494 | 
495 |         if (candidates && candidates.length) {
496 |           for (var i = 0; i < candidates.length; i ++) {
497 |             var candidate = candidates[i];
498 |             if (noSuggestInactive) {
499 |               if (!Boolean(candidate.inactive)) {
500 |                 if( candidate.text.toLowerCase().startsWith(term.toLowerCase()) ){
501 |                   matchedStartsWith.push(candidate);
502 |                 }
503 | 
504 |                 if (patt.test(candidate.text.toLowerCase()) == true){
505 |                   matchedContains.push(candidate);
506 |                 }
507 |               }
508 |             } else {
509 |               if( candidate.text.toLowerCase().startsWith(term.toLowerCase()) ){
510 |                 matchedStartsWith.push(candidate);
511 |               }
512 | 
513 |               if (patt.test(candidate.text.toLowerCase()) == true){
514 |                 matchedContains.push(candidate);
515 |               }
516 |             }
517 |           }
518 | 
519 |           matched = matchedStartsWith.concat(matchedContains).filter(function(item, pos, self) {
520 |             return self.indexOf(item) == pos;
521 |           });
522 |         }
523 | 
524 |         if (typeof(this._prefetchedCandidates) !== 'undefined'){
525 |           for (var i = 0; i < this._prefetchedCandidates.length; i ++){
526 |             if (patt.test(this._prefetchedCandidates[i].toLowerCase()) == true){
527 |               matched.push(this._prefetchedCandidates[i]);
528 |             }
529 |           }
530 |         }
531 | 
532 |         if ( this.remoteUrl ){
533 |           var url = this.remoteUrl.replace("%QUERY", encodeURIComponent(term));
534 | 
535 |           this._loading = true;
536 | 
537 |           if(this.xmlhttp){
538 |             this.xmlhttp.abort();
539 |           }
540 | 
541 |           this.xmlhttp = new XMLHttpRequest();
542 |           this.xmlhttp.open('GET', url, true);
543 |           this.xmlhttp.setRequestHeader("Content-type", "application/json");
544 | 
545 |           // If there are extra headers, add them to the request
546 |           if (that.extraHeaders) {
547 |             for (var header in that.extraHeaders) {
548 |               this.xmlhttp.setRequestHeader(header, that.extraHeaders[header]);
549 |             }
550 |           }
551 | 
552 |           this.xmlhttp.onreadystatechange = function() {
553 |             if (that.xmlhttp.readyState === 4 && that.xmlhttp.status === 200) {
554 |               var resp = that.xmlhttp.response;
555 |               var DATA = JSON.parse(resp);
556 |               var responseTreatment = that.fire('response-treatment', { response : DATA }, {cancelable: true});
557 |               var cuttedMatched = responseTreatment.detail.response;
558 | 
559 |               if (!responseTreatment.defaultPrevented) {
560 | 
561 |                 for(var i = 0; i < cuttedMatched.length; i++){
562 |                   cuttedMatched[i].key = that._generateObjectKey(cuttedMatched[i].text);
563 |                 }
564 | 
565 |                 that._loading = false;
566 | 
567 |                 if(!that._inputElement.invalid){
568 |                   that.setSuggestions(matched.concat(cuttedMatched));
569 |                 }
570 | 
571 |               }
572 |             }
573 |           }
574 |           this.xmlhttp.send();
575 |         }
576 |         else{
577 |           this.setSuggestions(matched);
578 |         }
579 |       },250);
580 |     },
581 | 
582 |     _scapeString: function(term){
583 |       var especialChars = ['\\.', '\\*', '\\+', '\\(', '\\)', '\\[', '\\]', '\\{', '\\}', '\\\\'];
584 | 
585 |       for (var i=0, l=especialChars.length ; i<l ; i++) {
586 |         term = term.replace(new RegExp(especialChars[i], 'g'), especialChars[i] );
587 |       }
588 | 
589 |       return term;
590 |     },
591 | 
592 |     _strHashCode: function(strValue) {
593 |       var hash = 0, i, chr, len;
594 |       if (strValue.length === 0) return hash;
595 |       for (i = 0, len = strValue.length; i < len; i++) {
596 |         chr   = strValue.charCodeAt(i);
597 |         hash  = ((hash << 5) - hash) + chr;
598 |         hash |= 0; // Convert to 32bit integer
599 |       }
600 |       return hash;
601 |     },
602 | 
603 |     _checkTokenAcceptKeyCode: function (keyCode) {
604 |       return (this.tokenAcceptKeyCodesArray.indexOf('' + keyCode + '') >= 0)
605 |     },
606 |   };
607 | 
608 |   WebPaperElem.InputAutoCompleteBehavior = [
609 |     Polymer.IronControlState,
610 |     WebPaperElem.InputAutoCompleteBehaviorImpl
611 |   ];
612 | 
613 | </script>
614 | 


--------------------------------------------------------------------------------
/paper-autocomplete-results.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../paper-menu/paper-menu.html">
  3 | <link rel="import" href="../paper-item/paper-item.html">
  4 | <link rel="import" href="../paper-material/paper-material.html">
  5 | 
  6 | <dom-module id="paper-autocomplete-results">
  7 |   <template>
  8 |     <style>
  9 |       :host {
 10 |         display: block;
 11 |       }
 12 | 
 13 |       :host paper-menu {
 14 |         padding: 0px;
 15 |       }
 16 |     </style>
 17 |     <paper-menu id="paperMenu" tabindex="-1" on-iron-items-changed="_onIronItemsChanged">
 18 |       <content></content>
 19 |     </paper-menu>
 20 |   </template>
 21 |   <script>
 22 | 
 23 |     Polymer({
 24 | 
 25 |       is: 'paper-autocomplete-results',
 26 | 
 27 |       behaviors: [
 28 |       ],
 29 | 
 30 |       hostAttributes: {
 31 |         'tabindex': -1
 32 |       },
 33 | 
 34 |       properties: {
 35 |         selectableItems: {
 36 |           type: Array,
 37 |           value: function() { return []; }
 38 |         },
 39 | 
 40 |         /**
 41 |          * By default navigating of results with the keyboard is circular. i.e.
 42 |          * when you are in the first item and you click the up arrow you will
 43 |          * move to the last item. If you are in the last item and then click
 44 |          * the down arrow, you will move to the first element.
 45 |          * By setting this property to true, you prevent this behaviour
 46 |          */
 47 |         notCircular: {
 48 |           type: Boolean,
 49 |           value: false
 50 |         }
 51 |       },
 52 | 
 53 |       // Element Lifecycle
 54 | 
 55 |       ready: function() {
 56 |       },
 57 | 
 58 |       attached: function() {
 59 |       },
 60 | 
 61 |       detached: function() {
 62 |       },
 63 | 
 64 |       get items() {
 65 |         return this.$.paperMenu.items;
 66 |       },
 67 | 
 68 |       get focusedItem() {
 69 |         return this.$.paperMenu.querySelector('.iron-selected');
 70 |       },
 71 | 
 72 |       indexOf: function (selectableElement) {
 73 |         return this.$.paperMenu.indexOf(selectableElement);
 74 |       },
 75 | 
 76 |       indexOfSelectable: function (selectableElement) {
 77 |         return this.selectableItems.indexOf(selectableElement);
 78 |       },
 79 | 
 80 |       select: function (index) {
 81 |         if ((index >= 0) && (this.selectableItems.length > index)) {
 82 |           var focusedItem = this.focusedItem;
 83 |           if (focusedItem) {
 84 |             focusedItem.classList.remove('iron-selected')
 85 |             focusedItem.active = false;
 86 |           }
 87 | 
 88 |           var nextElement = this.selectableItems[index];
 89 | 
 90 |           nextElement.classList.add('iron-selected')
 91 |           nextElement.active = true;
 92 | 
 93 |           var offset = nextElement.offsetTop + nextElement.offsetHeight;
 94 |           var clientHeightOffsetParent = (this.offsetParent) ? this.offsetParent.clientHeight : 0;
 95 |           var scrollTopValue = Math.max(0, offset - clientHeightOffsetParent);
 96 |           if (this.offsetParent) {
 97 |             this.offsetParent.scrollTop = scrollTopValue;
 98 |           }
 99 |         }
100 |       },
101 | 
102 |       selectFirst: function () {
103 |         this.select(0);
104 |       },
105 | 
106 |       selectPrevious: function () {
107 |         var selectedItem = this.focusedItem;
108 |         if (typeof(selectedItem) !== 'undefined'){
109 |           index = Number(this.indexOfSelectable(selectedItem));
110 |           index = Math.max(index - 1, -1);
111 |           if (index < 0) {
112 |             if (!this.notCircular) {
113 |               this.selectLast()
114 |             }
115 |           } else {
116 |             this.select(index);
117 |           }
118 |         }
119 |       },
120 | 
121 |       selectNext: function () {
122 |         var index = 0;
123 |         var selectedItem = this.focusedItem;
124 |         if (typeof(selectedItem) !== 'undefined'){
125 |           index = Number(this.indexOfSelectable(selectedItem));
126 |           index = Math.min(index + 1, this.selectableItems.length);
127 |           if (index >= this.selectableItems.length) {
128 |             if (!this.notCircular) {
129 |               this.selectFirst();
130 |             }
131 |           } else {
132 |             this.select(index);
133 |           }
134 |         }
135 |       },
136 | 
137 |       selectLast: function () {
138 |         this.select(this.selectableItems.length - 1);
139 |       },
140 | 
141 |       _onIronItemsChanged: function (e) {
142 |           if (e.detail) {
143 |             var that = this;
144 |             if (e.detail.removedNodes) {
145 |               e.detail.removedNodes.forEach(function (item) {
146 |                   that.arrayDelete('selectableItems', item);
147 |               });
148 |             }
149 | 
150 |             if (e.detail.addedNodes) {
151 |               e.detail.addedNodes.forEach(function (item) {
152 |                 if ((item.hasAttribute) && (item.hasAttribute('selectable-item'))) {
153 |                   that.push('selectableItems', item);
154 |                 }
155 |               });
156 |             }
157 |           }
158 |       },
159 | 
160 |     });
161 | 
162 |   </script>
163 | </dom-module>
164 | 


--------------------------------------------------------------------------------
/paper-input-autocomplete-chips.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
  3 | <link rel="import" href="../iron-input/iron-input.html">
  4 | <link rel="import" href="../paper-input/paper-input-behavior.html">
  5 | <link rel="import" href="../paper-input/paper-input-container.html">
  6 | <link rel="import" href="../paper-input/paper-input-error.html">
  7 | <link rel="import" href="../paper-input/paper-input.html">
  8 | <link rel="import" href="../paper-menu/paper-menu.html">
  9 | <link rel="import" href="../paper-item/paper-item.html">
 10 | <link rel="import" href="../paper-item/paper-icon-item.html">
 11 | <link rel="import" href="../paper-item/paper-item-body.html">
 12 | <link rel="import" href="../paper-chip/paper-chip.html">
 13 | <link rel="import" href="../iron-icon/iron-icon.html">
 14 | <link rel="import" href="../paper-material/paper-material.html">
 15 | <link rel="import" href="./input-autocomplete-behavior.html">
 16 | 
 17 | <link rel="import" href="./paper-autocomplete-results.html">
 18 | 
 19 | <!--
 20 | An element providing a solution to no problem in particular.
 21 | 
 22 | Example:
 23 | 
 24 |     <paper-input-autocomplete-chips></paper-input-autocomplete-chips>
 25 | 
 26 | @group Seed Elements
 27 | @element paper-input-autocomplete-chips
 28 | @demo demo/index.html
 29 | @hero hero.svg
 30 | -->
 31 | <dom-module id="paper-input-autocomplete-chips">
 32 |   <template>
 33 |     <style>
 34 | 
 35 |       :host {
 36 |         --autocomplete-chip-margin: 4px 4px 4px 0px;
 37 |         --autocomplete-line-height: 40px;
 38 | 
 39 |         display: block;
 40 |         position: relative;
 41 | 
 42 |         --paper-chip: {
 43 |           display: inline-block;
 44 |         }
 45 |       }
 46 | 
 47 |       .prefix-container
 48 |       ,.suffix-container {
 49 |         line-height: var(--autocomplete-line-height, 40px);
 50 |       }
 51 | 
 52 |      .prefix-container {
 53 |         align-self: flex-start;
 54 | 
 55 |         @apply(--prefix-container);
 56 |       }
 57 | 
 58 |       .suffix-container {
 59 |         align-self: flex-end;
 60 | 
 61 |         @apply(--suffix-container);
 62 |       }
 63 | 
 64 |       .complete-input-container {
 65 |         display: block;
 66 |         overflow-x: hidden;
 67 |         -webkit-flex: 1;
 68 |         flex: 1;
 69 |         direction: ltr;
 70 |       }
 71 | 
 72 |       paper-input-container .complete-input-container paper-chip {
 73 |         margin: var(--autocomplete-chip-margin, 4px 0px);
 74 |       }
 75 | 
 76 |       .input-container {
 77 |         display: inline-block;
 78 |       }
 79 | 
 80 |       .input-container input#input {
 81 |         display: block;
 82 |         resize: none;
 83 |       }
 84 | 
 85 |       paper-input-container {
 86 |         --paper-input-container-label: {
 87 |           top: auto;
 88 |           height: 38px;
 89 |           line-height: var(--autocomplete-line-height, 40px);
 90 |         };
 91 | 
 92 |         --paper-input-container-label-floating: {
 93 |           top: 0;
 94 |           bottom: auto;
 95 |         };
 96 | 
 97 |         --paper-input-container-input: {
 98 |           height: 38px;
 99 |           line-height: var(--autocomplete-line-height, 40px);
100 |         };
101 |       }
102 | 
103 |       paper-input-container::shadow div.complete-input-container.chip-item-added label {
104 |         line-height: var(--autocomplete-line-height, 40px);
105 |       }
106 | 
107 |       paper-input-container div.complete-input-container.chip-item-added .input-container {
108 |         width: 50%;
109 |       }
110 | 
111 |       paper-input-container div.complete-input-container:not(.chip-item-added) .input-container {
112 |         width: 100%;
113 |       }
114 | 
115 |       div.prefix-content {
116 |         height: 100%;
117 |       }
118 | 
119 |       paper-material.autocomplete-suggestion-container {
120 |         left:0;
121 |         right:0;
122 |         position: absolute;
123 |         z-index: 10;
124 |         max-height: var(--autocomplete-suggestions-container-max-height, 112px);
125 |         overflow-y: auto;
126 |         opacity: 1;
127 | 
128 |         @apply(--paper-input-autocomplete-chips-suggestion-container);
129 |       }
130 | 
131 |       paper-material.autocomplete-suggestion-container.hidden {
132 |         display: none;
133 |       }
134 | 
135 |       paper-material.autocomplete-suggestion-container .suggestion-item {
136 |         cursor: pointer;
137 |       }
138 | 
139 |       paper-material.autocomplete-suggestion-container .iron-selected {
140 |         background: #E0E0E0;
141 |       }
142 | 
143 |       .suggestion-item .avatar-chip-icon {
144 |         @apply(--layout-vertical);
145 |         @apply(--layout-center);
146 |         @apply(--layout-center-justified);
147 |       }
148 |       .suggestion-item .avatar-chip-icon svg, .avatar-chip-icon img {
149 |         width: 100%;
150 |         height: 100%;
151 |       }
152 | 
153 |       .suggestion-item .avatar-result-icon {
154 |         width: 40px;
155 |         height: 40px;
156 |         margin-right: 8px;
157 |         border-radius: 100%;
158 |         overflow: hidden;
159 |         text-align: center;
160 |         vertical-align: middle;
161 |         font-size: 16px;
162 |         font-weight: bold;
163 |         background-color: var(--paper-chip-icon-background-color, --paper-grey-500);
164 |         color: var(--paper-chip-icon-text-color, --text-primary-color);
165 |         @apply(--layout-vertical);
166 |         @apply(--layout-center);
167 |         @apply(--layout-center-justified);
168 |         @apply(--paper-input-autocomplete-chips-suggestion-item-image);
169 |       }
170 |       .suggestion-item .avatar-result-icon svg, .avatar-result-icon img {
171 |         width: 100%;
172 |         height: 100%;
173 |       }
174 | 
175 |       .autocomplete-suggestions {
176 |         padding: 0px;
177 |       }
178 | 
179 |       .autocomplete-suggestions .suggestion-item {
180 |         --paper-item-icon-width: auto;
181 |         --paper-item-selected-weight: var(--paper-input-autocomplete-chips-suggestion-item-selected-weight, bold);
182 |         padding-left: 24px;
183 |         padding-top: 8px;
184 |         padding-bottom: 8px;
185 |         font-family: 'Roboto', 'Noto', sans-serif;
186 |         font-size: 14px;
187 |         min-height: 48px;
188 |         @apply(--paper-input-autocomplete-chips-suggestion-item);
189 |       }
190 | 
191 |       .autocomplete-suggestions .suggestion-item.iron-selected {
192 |         font-weight: var(--paper-input-autocomplete-chips-suggestion-item-selected-weight, bold);
193 |       }
194 | 
195 |       .autocomplete-suggestions .suggestion-item.suggestion-group {
196 |         @apply(--paper-input-autocomplete-chips-suggestion-group);
197 |       }
198 | 
199 |       .autocomplete-suggestions .suggestion-item.suggestion-group .icon {
200 |         margin-right: 8px;
201 |       }
202 | 
203 |       .autocomplete-suggestions .suggestion-item.suggestion-group-item {
204 |         padding-left: 56px;
205 |       }
206 | 
207 |       :host(.no-display-input-edit-line) paper-input-container {
208 |           --paper-input-container-underline: {
209 |               display: none;
210 |           };
211 |           --paper-input-container-underline-focus: {
212 |               display: none;
213 |           };
214 |       }
215 | 
216 |     </style>
217 | 
218 |     <paper-input-container id="paperInputContainer" no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
219 | 
220 |       <input is="iron-input" type="hidden" class="paper-input-input" bind-value="{{hiddenValue}}">
221 | 
222 |       <div class="prefix-container" prefix>
223 |         <content select="[prefix]"></content>
224 |       </div>
225 | 
226 |       <label hidden$="[[!label]]">[[label]]</label>
227 | 
228 |       <div class="complete-input-container" id="inputTagsContainer">
229 | 				<template is="dom-repeat" items="[[selectedObjects]]">
230 |           <paper-chip label="[[chipLabelPrefix]][[item.text]][[chipLabelSuffix]]" data-key="[[item.key]]" data-tag$="[[item.tag]]" data-text="[[item.text]]" data-object="[[item]]" on-remove="_onChipRemove" removable="[[_canRemoveChip(item, readOnly, removeOnly)]]" no-image="[[noChipImage]]">
231 |             <template is="dom-if" if="{{item.imgUrl}}">
232 |               <div class="icon avatar-chip-icon"><img src$="[[item.imgUrl]]"></div>
233 |             </template>
234 |             <template is="dom-if" if="{{!item.imgUrl}}">
235 |               <div class="icon avatar-chip-icon">[[getInitialsFrom(item.text)]]</div>
236 |             </template>
237 |           </paper-chip>
238 |         </template>
239 |         <div id="inputContainer" class="input-container">
240 |           <input is="iron-input" id="input" class="autocomplete-input" on-keyup="_local_keyup" on-keydown="_local_keydown" on-paste="_local_paste"
241 |             on-blur="_local_blur" on-focus="_onInputFocus" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]"
242 |             disabled$="[[disabled]]" bind-value="{{inputValue}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]"
243 |             allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]"
244 |             autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]"
245 |             min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[_placeholderAfterSelected]]" readonly$="[[readonly]]"
246 |             list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange"
247 |             tabindex$="[[tabindex]]" autosave$="[[autosave]]" results$="[[results]]" accept$="[[accept]]" multiple$="[[multiple]]">
248 |         </div>
249 |     </div>
250 | 
251 |     <div class="suffix-container" suffix>
252 |       <content select="[suffix]"></content>
253 |     </div>
254 | 
255 |     <template is="dom-if" if="[[errorMessage]]">
256 |       <paper-input-error>[[errorMessage]]</paper-input-error>
257 |     </template>
258 |   </paper-input-container>
259 |   <paper-material id="suggestionsPanel" elevation="3" class="autocomplete-suggestion-container" animated="[[animated]]">
260 |     <template is="dom-if" if="{{_loading}}">
261 |         <div id="loading">
262 |           <content select="[loading]"></content>
263 |         </div>
264 |       </template>
265 | 
266 |     <paper-autocomplete-results id="autocompleteResults" class="autocomplete-suggestions" hidden="[[_loading]]" not-circular="[[notCircular]]">
267 |       <template is="dom-if" if="[[!groupedSuggestions]]">
268 |           <template is="dom-repeat" items="{{_suggestions}}">
269 |             <paper-icon-item class="suggestion-item" data-key="[[item.key]]" data-text="[[item.text]]" data-tag$="[[item.tag]]" data-object="[[item]]" on-mouseover="_onMouseOverSelectable" on-tap="_onTapSelectable"  tabindex="-1" selectable-item>
270 |               <template is="dom-if" if="{{item.imgUrl}}">
271 |                 <div class="icon avatar-result-icon" item-icon><img src$="[[item.imgUrl]]"></div>
272 |               </template>
273 |       <template is="dom-if" if="{{!item.imgUrl}}">
274 |                 <div class="icon avatar-result-icon" item-icon>[[getInitialsFrom(item.text)]]</div>
275 |               </template>
276 |       <paper-item-body>
277 |         <div>[[item.text]]</div>
278 |       </paper-item-body>
279 |       </paper-icon-item>
280 |       </template>
281 |       </template>
282 |       <template is="dom-if" if="[[groupedSuggestions]]">
283 |           <template is="dom-repeat" items="{{_suggestions}}">
284 |             <paper-icon-item class="suggestion-item suggestion-group" tabindex="-1" disabled>
285 |               <template is="dom-if" if="[[item.groupIcon]]">
286 |                 <iron-icon class="icon" icon="[[item.groupIcon]]" item-icon></iron-icon>
287 |               </template>
288 |       <paper-item-body>
289 |         <div>[[item.groupName]]</div>
290 |       </paper-item-body>
291 |       </paper-icon-item>
292 |       <template is="dom-repeat" items="{{item.items}}">
293 |               <paper-icon-item class="suggestion-item suggestion-group-item" data-key="[[item.key]]" data-text="[[item.text]]" data-tag$="[[item.tag]]" data-object="[[item]]" on-mouseover="_onMouseOverSelectable" on-tap="_onTapSelectable"  tabindex="-1" selectable-item>
294 |                 <template is="dom-if" if="{{item.imgUrl}}">
295 |                   <div class="icon avatar-result-icon" item-icon><img src$="[[item.imgUrl]]"></div>
296 |                 </template>
297 |       <template is="dom-if" if="{{!item.imgUrl}}">
298 |                   <div class="icon avatar-result-icon" item-icon>[[getInitialsFrom(item.text)]]</div>
299 |                 </template>
300 |       <paper-item-body>
301 |         <div>[[item.text]]</div>
302 |       </paper-item-body>
303 |       </paper-icon-item>
304 |       </template>
305 |       </template>
306 |       </template>
307 |     </paper-autocomplete-results>
308 | 
309 |   </paper-material>
310 |   </template>
311 |   <script>
312 |     Polymer({
313 |       is: 'paper-input-autocomplete-chips',
314 | 
315 |       behaviors: [
316 |         Polymer.IronControlState,
317 |         Polymer.IronFormElementBehavior,
318 |         Polymer.PaperInputBehavior,
319 |         WebPaperElem.InputAutoCompleteBehavior
320 |       ],
321 | 
322 |       _suggestionFilterBeforePublish: function (suggestions) {
323 |         if (this.removeSelectedFromSuggestions) {
324 |           var selectedKeys = [];
325 |           this.selectedObjects.forEach(function (item) {
326 |             selectedKeys.push(item.key);
327 |           });
328 | 
329 |           var filteredSuggestions = suggestions.filter(function (item) {
330 |             return (selectedKeys.indexOf(item.key) < 0);
331 |           });
332 | 
333 |           return filteredSuggestions;
334 |         } else {
335 |           return suggestions;
336 |         }
337 |       },
338 | 
339 |       properties: {
340 |         chipLabelPrefix: {
341 |           type: String,
342 |           value: ''
343 |         },
344 |         chipLabelSuffix: {
345 |           type: String,
346 |           value: ''
347 |         },
348 |         /**
349 |          * The candidates from local variable.
350 |          */
351 |         selectedObjects: {
352 |           type: Array,
353 |           value: function() { return []; },
354 |           notify: true
355 |         },
356 |         /**
357 |          * The candidates from local variable.
358 |          */
359 |         localCandidates:{
360 |           type:Array,
361 |           value: function() { return []; }
362 |         },
363 |         /**
364 |          * Hidden Input value.
365 |          */
366 |         hiddenValue: {
367 |           type: String,
368 |           notify: true,
369 |         },
370 | 
371 |         placeholderAfterSelected: {
372 |           type: String,
373 |         },
374 | 
375 |         _placeholderAfterSelected: {
376 |           type: String,
377 |         },
378 | 
379 |         /**
380 |           * Whether or not the chip uses an animated transition between opened and
381 |           * closed states
382 |           *
383 |           * @attribute animated
384 |           * @type Boolean
385 |           * @default true
386 |           */
387 |         animated: {
388 |           type: Boolean,
389 |           value: false,
390 |           reflectToAttribute: true
391 |         },
392 | 
393 |         noChipImage: {
394 |           type: Boolean,
395 |           value: false,
396 |           reflectToAttribute: true
397 |         },
398 | 
399 |         _boundOnBlur: {
400 |           type: Function,
401 |           value: function() {
402 |             return this._onBlur.bind(this);
403 |           }
404 |         },
405 | 
406 |         maxSelectedItems: {
407 |           type: Number,
408 |           value: 0
409 |         },
410 | 
411 |         readOnly: {
412 |           type: Boolean,
413 |           value: false,
414 |           reflectToAttribute: true
415 |         },
416 | 
417 |         removeOnly: {
418 |           type: Boolean,
419 |           value: false,
420 |           reflectToAttribute: true
421 |         },
422 | 
423 |         removeSelectedFromSuggestions: {
424 |           type: Boolean,
425 |           value: false
426 |         },
427 | 
428 |         notCircular: {
429 |           type: Boolean,
430 |           value: false
431 |         },
432 | 
433 |         withCustomSuggestionBoxPosition: {
434 |           type: Boolean,
435 |           value: false
436 |         },
437 | 	      
438 |         noDisplayInputEditLine: {
439 |           type: Boolean,
440 |           value: false
441 |         },
442 |       },
443 | 
444 |       get _paperInputContainerElement() {
445 |         return this.$.paperInputContainer;
446 |       },
447 | 
448 |       get hasSelectedObjects() {
449 |         return ((this.selectedObjects) && (this.selectedObjects.length > 0));
450 |       },
451 | 
452 |       get $input() {
453 |         return this.$.input;
454 |       },
455 | 
456 |       listeners: {
457 |         'tap': '_onTap',
458 |         'iron-input-validate': '_onIronInputValidate'
459 |       },
460 | 
461 |       _onTap: function (e) {
462 |         if ((e.target === this.$.inputTagsContainer) && (!this._inputElement.focused)) {
463 |           this._inputElement.focus();
464 |         }
465 |       },
466 | 
467 |       _local_keyup: function (e) {
468 |         this._keyup(e);
469 |       },
470 | 
471 |       _local_keydown: function (e) {
472 |         if (e.which === 8) {
473 |           this._keydown_backspace_handler(e);
474 |         } else {
475 |           this._keydown(e);
476 |         }
477 |       },
478 | 
479 |       _local_blur: function (e) {
480 |         this._blur(e);
481 |       },
482 | 
483 |       _local_paste: function(e){
484 |         this._paste(e);
485 |       },
486 | 
487 |       observers: [
488 |         '_onInputValueChange(inputValue)',
489 |         '_onSelectedObjectsChange(selectedObjects)',
490 |         '_onSelectedObjectsChange(selectedObjects.splices)',
491 |         '_onAutoCompleteSelectedObjectChange(selectedObject)',
492 |         '_suggestionsChanged(_suggestions)',
493 |         '_suggestionsChanged(_suggestions.splices)',
494 |         '_loadingChanged(_loading)',
495 |         '_calculateSuggestionPanelPosition(suggestionsPosition)',
496 |         '_cptReadOnlyOrRemoveOnly(readOnly, removeOnly)',
497 |         '_cptInputTextStyle(readOnly, removeOnly, noDisplayInputEditLine)'
498 |       ],
499 | 
500 |       _onInputValueChange: function (inputValue) {
501 |         var hasSelectedObjects = ((this.selectedObjects) && (this.selectedObjects.length > 0));
502 | 
503 |         this.hiddenValue = ((inputValue === '') && hasSelectedObjects) ? ' ' : inputValue;
504 | 
505 |         this._paperInputContainerElement._handleValueAndAutoValidate(this._inputElement);
506 |       },
507 | 
508 |       _loadingChanged: function(_loading){
509 |         if ( this._loading ) {
510 |           this.showSuggestionsPanel();
511 |         } else {
512 |           this.hideSuggestionsPanel();
513 |         }
514 |       },
515 | 
516 |       _onSelectedObjectsChange: function (selectedObjects) {
517 | 
518 |         if (selectedObjects) {
519 |           if (selectedObjects.indexSplices) {
520 |             var $this = this;
521 |             selectedObjects.indexSplices.forEach(function (spliceItem) {
522 |               if (spliceItem.addedCount > 0) {
523 |                 $this._fixMissingObjextKeys([ spliceItem.object[spliceItem.index] ]);
524 |               }
525 |             });
526 |             //console.info(this.selectedObjects);
527 |           } else {
528 |             this._fixMissingObjextKeys(selectedObjects);
529 |           }
530 |         }
531 | 
532 |         this._updatePlaceholderAfterSelected();
533 |         this._updateHiddenInputTextForFloatLabel();
534 |         this.selectedObject = null;
535 |       },
536 | 
537 |       _updatePlaceholderAfterSelected: function () {
538 |         if ((this.alwaysFloatLabel) && ((!this.selectedObjects) || (this.selectedObjects.length <= 0))) {
539 |           this._placeholderAfterSelected = this.placeholder;
540 |         } else if ((this.selectedObjects) && (this.selectedObjects.length > 0)) {
541 |           this._placeholderAfterSelected = this.placeholderAfterSelected;
542 |         }
543 |         else {
544 |           this._placeholderAfterSelected = null;
545 |         }
546 |       },
547 | 
548 |       getInitialsFrom: function(value) {
549 |         if (value) {
550 |           return value.replace(/[^A-Z]/g, '');
551 |         }
552 |       },
553 | 
554 |       _fixMissingObjextKeys: function (objectArray) {
555 |         if (objectArray) {
556 |           for (var i=0; i < objectArray.length; i++) {
557 |             if (!objectArray[i].key) {
558 |               objectArray[i].key = this._generateObjectKey(objectArray[i].text);
559 |             }
560 |           }
561 |         }
562 |       },
563 | 
564 |       _findObjectAlreadySelected: function (objValue) {
565 |         if (!objValue) { return -1; }
566 | 
567 |         var i = (this.selectedObjects) ? this.selectedObjects.length : 0;
568 |         while (i--) {
569 |           var objToCompare = this.selectedObjects[i];
570 |           if (objToCompare.key === objValue.key) return i;
571 |         }
572 |         return -1;
573 |       },
574 | 
575 |       _onAutoCompleteSelectedObjectChange: function (selectedObject) {
576 | 
577 |         this.appendSelectedObject(selectedObject);
578 | 
579 |         this.inputValue = null;
580 |         this._setSelectedItem(null);
581 | 
582 |         this._updateHiddenInputTextForFloatLabel();
583 |       },
584 | 
585 |       _onChipRemove: function (e) {
586 | 
587 |         e.preventDefault();
588 | 
589 |         this.removeSelectedObject(e.target.dataObject);
590 | 
591 |         this._updateHiddenInputTextForFloatLabel();
592 |       },
593 | 
594 |       _updateHiddenInputTextForFloatLabel: function () {
595 | 
596 |         this.hiddenValue = (this.hasSelectedObjects) ? ' ' : null;
597 | 
598 |         if (this.hasSelectedObjects) {
599 |           this.$.inputTagsContainer.classList.add('chip-item-added');
600 |         } else {
601 |           this.$.inputTagsContainer.classList.remove('chip-item-added');
602 |         }
603 |       },
604 | 
605 |       _suggestionsChanged: function (suggestions) {
606 |         if ((this._suggestions) && (this._suggestions.length > 0)) {
607 |           this.showSuggestionsPanel();
608 |         } else {
609 |           this.hideSuggestionsPanel();
610 |         }
611 |       },
612 | 
613 |       _cptReadOnlyOrRemoveOnly: function (readOnly, removeOnly) {
614 | 
615 |           var ableToInputText = false;
616 | 
617 |           ableToInputText = (readOnly || removeOnly);
618 | 
619 |           if (ableToInputText) {
620 |               this.$.inputContainer.hidden = true;
621 |           } else {
622 |               this.$.inputContainer.hidden = false;
623 |           }
624 |       },
625 | 
626 |       _canRemoveChip: function (chipItem, readOnly, removeOnly) {
627 |           var canRemoveChip = false;
628 | 
629 |           if ((!chipItem.readOnly) && (!readOnly)) {
630 |               canRemoveChip = true;
631 |           }
632 | 
633 |           return canRemoveChip;
634 |       },
635 | 
636 |       _canInputText: function (readOnly, removeOnly) {
637 |           var canInputText = false;
638 | 
639 |           if ((!readOnly) && (!removeOnly)) {
640 |               canInputText = true;
641 |           }
642 | 
643 |           return canInputText;
644 |       },
645 | 
646 |       _cptInputTextStyle: function (readOnly, removeOnly, noDisplayInputEditLine) {
647 | 	  if (noDisplayInputEditLine) {
648 | 	      this.classList.add('no-display-input-edit-line');	  
649 | 	  } else {
650 | 	      if (this._canInputText(readOnly, removeOnly)) {
651 | 	          this.classList.remove('no-display-input-edit-line');
652 |     	      } else {
653 | 	          this.classList.add('no-display-input-edit-line');
654 | 	      }
655 | 	  }
656 | 
657 |           this.updateStyles();
658 |       },
659 | 
660 |       // Element Lifecycle
661 | 
662 |       ready: function() {
663 |         this._override_paperInputContainer();
664 | 
665 |         this.addEventListener('blur', this._boundOnBlur, true);
666 |       },
667 | 
668 |       attached: function() {
669 |       },
670 | 
671 |       detached: function() {
672 |       },
673 | 
674 |       // Element Behavior
675 | 
676 |       hideSuggestionsPanel: function () {
677 |         this.$.suggestionsPanel.classList.add('hidden');
678 |       },
679 | 
680 |       showSuggestionsPanel: function () {
681 |         this.fire('before-show-suggestion-panel');
682 |         this._calculateSuggestionPanelPosition();
683 |         this.$.suggestionsPanel.classList.remove('hidden');
684 |         this.async(function () {
685 |           if (this.isSuggestionsOnBottom) {
686 |             this.$.autocompleteResults.selectFirst();
687 |           } else {
688 |             this.$.autocompleteResults.selectLast();
689 |           }
690 |         }, 1);
691 |       },
692 | 
693 |       _calculateSuggestionPanelPosition: function () {
694 |         if (this.withCustomSuggestionBoxPosition) {
695 |           fire('custom-suggestion-position', {
696 |             inputContainer: this.$.paperInputContainer,
697 |             inputElement: this.$input,
698 |             suggestionPanel: this.$.suggestionsPanel
699 |           });
700 |         } else {
701 |           if (this.suggestionsPosition === 'top') {
702 |             var inputRect = this.$input.getBoundingClientRect();
703 |             var diffBottom = 8; // Bottom margin from paper-input-container
704 |             var deltaBottom = inputRect.height + diffBottom;
705 |             this.$.suggestionsPanel.style.top = '';
706 |             this.$.suggestionsPanel.style.bottom = deltaBottom + 'px';
707 |           } else if (this.suggestionsPosition === 'bottom') {
708 |             this.$.suggestionsPanel.style.top = '';
709 |             this.$.suggestionsPanel.style.bottom = '';
710 |           }
711 |         }
712 |       },
713 | 
714 |       removeSelectedObject: function (selectedObject) {
715 |         this.removeSelectedObjectByIndex(this._findObjectAlreadySelected(selectedObject));
716 |       },
717 | 
718 |       removeSelectedObjectByIndex: function (objectIndex) {
719 |         if (objectIndex >= 0) {
720 |           this.arrayDelete('selectedObjects', this.selectedObjects[objectIndex]);
721 |         }
722 |       },
723 | 
724 |       appendSelectedObject: function (selectedObject) {
725 |         if (!selectedObject) { return; }
726 | 
727 |         if (!this.selectedObjects) {
728 |           this.selectedObjects = [];
729 |         }
730 | 
731 |         if ((this.maxSelectedItems > 0) && (this.selectedObjects.length >= this.maxSelectedItems)) {
732 |           return;
733 |         }
734 | 
735 |         var previousObjectKeyValues = {
736 |             key: selectedObject.key,
737 |             text: selectedObject.text,
738 |         };
739 | 
740 |         var eSelectingObject = this.fire('selecting-object', { selectedObject: selectedObject }, {cancelable: true});
741 | 
742 |         if (!eSelectingObject.defaultPrevented) {
743 | 
744 |           if ((selectedObject.key === previousObjectKeyValues.key)
745 |               && (selectedObject.text !== previousObjectKeyValues.text)) {
746 |               selectedObject.key = this._generateObjectKey(selectedObject.text);
747 |           }
748 | 
749 |           if (this._findObjectAlreadySelected(selectedObject) < 0) {
750 |               this.push('selectedObjects', selectedObject);
751 |           }
752 |         }
753 |       },
754 | 
755 |       _onBlur: function() {
756 |         this._paperInputContainerElement._handleValueAndAutoValidate(this._inputElement);
757 |       },
758 | 
759 |       _keydown_backspace_handler: function (e) {
760 |         if ((!this.inputValue) || (this.inputValue === '')) {
761 |           this.removeSelectedObjectByIndex(this.selectedObjects.length-1);
762 |         }
763 |       },
764 | 
765 |       _onIronInputValidate: function(event) {
766 |         this.invalid = this._inputElement.invalid;
767 |       },
768 | 
769 |       _override_paperInputContainer: function () {
770 |         this._paperInputContainerElement._handleValue = this._override_paperInputContainer_handleValue;
771 |         this._paperInputContainerElement._handleValueAndAutoValidate = this._override_paperInputContainer_handleValueAndAutoValidate;
772 |       },
773 | 
774 |       _override_paperInputContainer_handleValue: function(inputElement) {
775 |         inputElement = this.dataHost._inputElement;
776 | 
777 |         var value = this.dataHost.inputValue;
778 |         // type="number" hack needed because this.value is empty until it's valid
779 |         if (value || value === 0 || (inputElement.type === 'number' && !inputElement.checkValidity()) || this.dataHost.hasSelectedObjects) {
780 |           this._inputHasContent = true;
781 |         } else {
782 |           this._inputHasContent = false;
783 |         }
784 |         this.updateAddons({
785 |           inputElement: inputElement,
786 |           value: value,
787 |           invalid: this.invalid
788 |         });
789 |       },
790 | 
791 |       _override_paperInputContainer_handleValueAndAutoValidate: function(inputElement) {
792 |         inputElement = this.dataHost._inputElement;
793 | 
794 |         if (this.autoValidate) {
795 |           var valid;
796 |           if (inputElement.validate) {
797 |             valid = inputElement.validate(this.inputValue);
798 |           } else {
799 |             valid = inputElement.checkValidity();
800 |           }
801 |           this.invalid = !valid;
802 |         }
803 |         // Call this last to notify the add-ons.
804 |         this._handleValue(inputElement);
805 |       },
806 | 
807 |       _onInputFocus: function (e) {
808 |         this.fire('input-focused');
809 |         if (this.searchOnGotFocus) {
810 |           this._search(this._safeInputValue);
811 |         }
812 |       },
813 | 
814 |       clear: function() {
815 |         this.selectedObjects = [];
816 |       },
817 |       
818 |     });
819 |   </script>
820 | </dom-module>
821 | 


--------------------------------------------------------------------------------
/paper-input-autocomplete.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../paper-input/paper-input.html">
  3 | <link rel="import" href="../paper-menu/paper-menu.html">
  4 | <link rel="import" href="../paper-item/paper-item.html">
  5 | <link rel="import" href="../iron-ajax/iron-ajax.html">
  6 | <link rel="import" href="../paper-material/paper-material.html">
  7 | 
  8 | <link rel="import" href="input-autocomplete-behavior.html">
  9 | 
 10 | <dom-module id="paper-input-autocomplete">
 11 |   <style>
 12 |     :host {
 13 |       display: block;
 14 |     }
 15 |     
 16 |     paper-material{
 17 |       left:0;
 18 |       right:0;
 19 |       position: absolute;
 20 |       z-index: 10; 
 21 |     }
 22 |     
 23 |     paper-item{
 24 |       cursor: pointer;
 25 |     }
 26 |     
 27 |     .iron-selected{
 28 |       background: #E0E0E0;
 29 |     }
 30 |   </style>
 31 |   <template>
 32 |     <template is="dom-if" if="{{label}}">
 33 |      <h3>{{label}}</h3> 
 34 |     </template>
 35 |     <template is="dom-if" if="{{prefetchUrl}}">
 36 |     	<iron-ajax auto url="{{prefetchUrl}}" handle-as="json" last-response="{{_prefetchedCandidates}}"></iron-ajax>
 37 |     </template>
 38 | 
 39 | 	<div style="position:relative;">
 40 | 		<paper-input value="{{inputValue}}" class="autocomplete-input" on-keyup="_keyup" on-keydown="_keydown" label="{{placeholder}}"></paper-input>
 41 | 		<template is="dom-if" if="{{_suggestions.length}}">
 42 |       <paper-material class="autocomplete-suggestion-container">
 43 |         <paper-menu class="autocomplete-suggestions">
 44 | 				<template is="dom-repeat" items="{{_suggestions}}">
 45 | 					<paper-item on-mouseover="_onMouseOverSelectable" on-tap="_onTapSelectable">
 46 | 					<span>{{item}}</span>
 47 | 					</paper-item>
 48 | 				</template>
 49 | 				</paper-menu>
 50 | 			</paper-material>
 51 | 		</template>
 52 | 	</div>
 53 |   </template>
 54 | </dom-module>
 55 | <script>
 56 | 
 57 |   Polymer({
 58 | 
 59 |     is: 'paper-input-autocomplete',
 60 | 
 61 |     behaviors: [
 62 |       WebPaperElem.InputAutoCompleteBehavior
 63 |     ],
 64 | 
 65 |     properties: {
 66 | 
 67 |       /**
 68 |        * The label that will show up as the label for tags input. It not specified, no label will show up.
 69 |        */
 70 |       label:{
 71 |         type:String,
 72 |         value:''
 73 |       },
 74 |       /**
 75 |        * The placeholder for the paper-input element.
 76 |        */
 77 |       placeholder:{
 78 |         type:String,
 79 |         value:'Please enter values here'
 80 |       },
 81 |       /**
 82 |        * Url for a prefectched list in json format for the list of suggestion candidates. The response should be something like: ["a","b"] 
 83 |        */
 84 |       prefetchUrl:String,
 85 |       /**
 86 |       * The prefetched candidates get by prefetchUrl
 87 |       */
 88 |       _prefetchedCandidates:{
 89 |         type:Array,
 90 |         value:function () { return []; }
 91 |       },
 92 |       /**
 93 |        * Remote url to perform a search using the value in the input. The input value will be passed in as url parameter. The placeholder should be %QUERY.
 94 |        */
 95 |       remoteUrl:String,
 96 |       /**
 97 |        * Input value.
 98 |        */
 99 |       inputValue: {
100 |         type: String,
101 |         notify: true,
102 |       },
103 |     },
104 | 
105 |     // Element Lifecycle
106 | 
107 |     ready: function() {
108 |       // `ready` is called after all elements have been configured, but
109 |       // propagates bottom-up. This element's children are ready, but parents
110 |       // are not.
111 |       //
112 |       // This is the point where you should make modifications to the DOM (when
113 |       // necessary), or kick off any processes the element wants to perform.
114 |       document.addEventListener("click", function(){
115 |         var ptinputs = document.querySelectorAll('paper-input-autocomplete')
116 |         for (var i = 0; i < ptinputs.length; i ++){
117 |           var ptinput = ptinputs[i];
118 |           ptinput._suggestions = [];
119 |         }
120 |       });
121 |       this._inputElement.autocomplete = 'address-level4';
122 |     },
123 | 
124 |     attached: function() {
125 |     },
126 | 
127 |     detached: function() {
128 |     },
129 | 
130 |   });
131 | 
132 | </script>


--------------------------------------------------------------------------------
/test/basic-test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 |   <head>
13 |     <meta charset="utf-8">
14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 | 
16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17 |     <script src="../../web-component-tester/browser.js"></script>
18 | 
19 |     <!-- Step 1: import the element to test -->
20 |     <link rel="import" href="../paper-input-autocomplete-chips.html">
21 |   </head>
22 |   <body>
23 | 
24 |     <!-- You can use the document as a place to set up your fixtures. -->
25 |     <paper-input-autocomplete-chips></paper-input-autocomplete-chips>
26 | 
27 |     <script>
28 |       var myEl = document.querySelector('paper-input-autocomplete-chips');
29 | 
30 |       suite('<paper-input-autocomplete-chips>', function() {
31 | 
32 |         test('defines the "author" property', function() {
33 |           assert.equal(myEl.author.name, 'Dimitri Glazkov');
34 |           assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
35 |         });
36 | 
37 |         test('says hello', function() {
38 |           assert.equal(myEl.sayHello(), 'paper-input-autocomplete-chips says, Hello World!');
39 | 
40 |           var greetings = myEl.sayHello('greetings Earthlings');
41 |           assert.equal(greetings, 'paper-input-autocomplete-chips says, greetings Earthlings');
42 |         });
43 | 
44 |         test('fires lasers', function(done) {
45 |           myEl.addEventListener('paper-input-autocomplete-chips-lasers', function(event) {
46 |             assert.equal(event.detail.sound, 'Pew pew!');
47 |             done();
48 |           });
49 |           myEl.fireLasers();
50 |         });
51 | 
52 |       });
53 |     </script>
54 | 
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 |   <head>
13 |     <meta charset="utf-8">
14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 | 
16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17 |     <script src="../../web-component-tester/browser.js"></script>
18 |   </head>
19 |   <body>
20 |     <script>
21 |       // Load and run all tests (.html, .js):
22 |       WCT.loadSuites([
23 |         'basic-test.html',
24 |       ]);
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------