{"_id":"@pushkar8723/paper-dropdown","_rev":"2-3e85f6f882834fa801544de4dfd89b41","name":"@pushkar8723/paper-dropdown","dist-tags":{"latest":"3.0.1"},"versions":{"3.0.0":{"name":"@pushkar8723/paper-dropdown","version":"3.0.0","description":"`paper-dropdown` is a wrapper for `paper-dropdown-menu` to enable various features like multi-select, search / filter of items, key value pair and 2-way binding on value.","main":"index.js","dependencies":{"@polymer/iron-form-element-behavior":"^3.0.0-pre.19","@polymer/iron-input":"^3.0.0-pre.19","@polymer/iron-validatable-behavior":"^3.0.0-pre.19","@polymer/neon-animation":"^3.0.0-pre.19","@polymer/paper-dropdown-menu":"^3.0.0-pre.19","@polymer/paper-listbox":"^3.0.0-pre.19","@polymer/polymer":"^3.0.2","@webcomponents/webcomponentsjs":"^2.0.2"},"devDependencies":{"@polymer/iron-component-page":"^3.0.0-pre.21","@polymer/iron-demo-helpers":"^3.0.0-pre.21","@polymer/iron-form":"^3.0.0-pre.21","@polymer/paper-item":"^3.0.0-pre.21","eslint":"^4.19.1","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.12.0","lint-staged":"^7.1.1","pre-commit":"^1.2.2","web-animations-js":"^2.3.1"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","lint-staged":"lint-staged","lint":"eslint **/**.js"},"repository":{"type":"git","url":"git+https://github.com/pushkar8723/paper-dropdown.git"},"keywords":["polymer","paper-dropdown"],"author":{"name":"Pushkar Anand"},"license":"MIT","bugs":{"url":"https://github.com/pushkar8723/paper-dropdown/issues"},"homepage":"https://github.com/pushkar8723/paper-dropdown#readme","lint-staged":{"*.js":"eslint"},"pre-commit":"lint-staged","gitHead":"e5e6c518b22faf21784dabdb8e535ef7968338e3","_id":"@pushkar8723/paper-dropdown@3.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.6.0","_npmUser":{"name":"pushkar8723","email":"pushkar8723@gmail.com"},"dist":{"integrity":"sha512-AeNoidouiw+w+Y+/JtOyvGvsZqrml1MDLeLTJ72tm6TxOmmgzTUf300epdR9zhbtdXX8xNdPGbKxzFeyEK/VLQ==","shasum":"474d3ceb11d4e90744b551b8babdd36188e61d43","tarball":"https://registry.npmjs.org/@pushkar8723/paper-dropdown/-/paper-dropdown-3.0.0.tgz","fileCount":18,"unpackedSize":238924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbShrjCRA9TVsSAnZWagAAxkkP/Au5+v4cm6JEUOPGV+hl\n0gsjCwMzABTat2yaRu8k75pyODSauu1gpUW0IA91dU01EjQrIjzZRwS4NWyd\n6SKh+l9l8HD2nxkDQHtJQ0XFhDAWmu5TVuB+hi82v1Z5+jqK4gR96MdHK/uK\nU+gAynheHWdxSPurwA07ZNsLHXqPbeZ+As7mRQ15rAebjf2hbGDzbfpO5Da9\nj463657P92MzXGAqpVzu19mWF0Fo/ovjOx6o6GA1IAePD6UKYWRmKcOhMlE9\nd82A0d8cd1acnM9qRsygMeSmrjnkA3HknJlHdtkTp9kt5P0IKl0Y9NHXyqkR\n0LSQeILDwLknp+LKsgo1OO2xB2FDV7p6ijcQk0EYN9deKt6VaCTZqoUSfU56\nxcAExuCinCOGubqbBpBpOqZJOTDhwl18w/qTRkDka3Bd0gvb38bDh6XR46ju\nrHKqlkqPORs0goapUsP5Cz8T0Ke9TKlc4geIaK0l+ZuZ57XJ2WtdZQkcPrtH\nG5kOiMIlcb6BgITg4dnOUbzKSBojebivlTnwX7y5sJFxtt43Hu9691Z/adVE\nVBg7yQH3UkvHh8+Sqsg0sY6sX+pxyK8S9LzcFVEcEwE1eOZ7x0UQS10qcjQc\nENmLob98NpLZYNs/OwyZOb7mX+buEHwd9RrLfqtM7XEjEh8zly/ML2cI1mW4\nJgsQ\r\n=Tk5+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElHRSYieqOxVwkxQJQ/DiFnTN653cUXnVtzaKBUN1sCAiB9zwaZU+yknIugGGMdfFVOE5PZwb5JUa3+748RHP3eJA=="}]},"maintainers":[{"name":"pushkar8723","email":"pushkar8723@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/paper-dropdown_3.0.0_1531583203397_0.8359025363748314"},"_hasShrinkwrap":false},"3.0.1":{"name":"@pushkar8723/paper-dropdown","version":"3.0.1","description":"`paper-dropdown` is a wrapper for `paper-dropdown-menu` to enable various features like multi-select, search / filter of items, key value pair and 2-way binding on value.","main":"index.html","dependencies":{"@polymer/iron-form-element-behavior":"^3.0.0-pre.19","@polymer/iron-input":"^3.0.0-pre.19","@polymer/iron-validatable-behavior":"^3.0.0-pre.19","@polymer/neon-animation":"^3.0.0-pre.19","@polymer/paper-dropdown-menu":"^3.0.0-pre.19","@polymer/paper-listbox":"^3.0.0-pre.19","@polymer/polymer":"^3.0.2","@webcomponents/webcomponentsjs":"^2.0.2"},"devDependencies":{"@polymer/iron-component-page":"^3.0.0-pre.21","@polymer/iron-demo-helpers":"^3.0.0-pre.21","@polymer/iron-form":"^3.0.0-pre.21","@polymer/paper-item":"^3.0.0-pre.21","eslint":"^4.19.1","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.12.0","lint-staged":"^7.1.1","polymer-cli":"^1.9.5","pre-commit":"^1.2.2","web-animations-js":"^2.3.1"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","lint-staged":"lint-staged","lint":"eslint **/**.js","build":"polymer build --npm --entrypoint index.html --html-minify --js-minify --css-minify","start":"polymer serve --npm"},"repository":{"type":"git","url":"git+https://github.com/pushkar8723/paper-dropdown.git"},"keywords":["polymer","paper-dropdown"],"author":{"name":"Pushkar Anand"},"license":"MIT","bugs":{"url":"https://github.com/pushkar8723/paper-dropdown/issues"},"homepage":"https://github.com/pushkar8723/paper-dropdown#readme","lint-staged":{"*.js":"eslint"},"pre-commit":"lint-staged","gitHead":"6b8b8ec101f52bae998b1f4af1ce4560b0739afe","_id":"@pushkar8723/paper-dropdown@3.0.1","_npmVersion":"6.3.0","_nodeVersion":"10.8.0","_npmUser":{"name":"pushkar8723","email":"pushkar8723@gmail.com"},"dist":{"integrity":"sha512-70W9L0G+0HqpM+a7V3u8kByK3rmU0LitwNe02kEE819j0Rqg7z3NNE1wKHQQpZeGoRS1dfkSmwIJIdPQx+S4Jw==","shasum":"7f16d0c90628f462bf54201e998b934d94d14199","tarball":"https://registry.npmjs.org/@pushkar8723/paper-dropdown/-/paper-dropdown-3.0.1.tgz","fileCount":19,"unpackedSize":238566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP4/BCRA9TVsSAnZWagAAyUAQAKMaMUe6tHZ4qTxi5DI3\nrpEpj1P/6ayOHmjk76WKVpmi5fcQ1FW371RFK/K+3kKYHCll1G8LWUsdl5pX\naHp/7RAtNScbyb+l2zUGcEoAVl2KI+Q8bu7zIHtmCLMrJFwadWtWjQDj7jR1\naD7OhqmRSNHDDQTU9sve/vZnklz69bKVB/Y/rjgk6+s2qWyG3+yMcsQiBIhd\n0p/kLQAalKXuZcX8T28qf7V4urxKWFgTXIx8Q59GyF8Y/Jajf8TLfEF7l6Gt\nhH8hi4beYfPRtVOxVhpvn6sk+q3CTXJr1cynQ0B6BqUa24xkuHys1MhUzD+Z\nBoOf3CQfI6JRg6Mncmelj0sk3SmPiMUzxNdYrRPWbJvUHmhxUFjAKF51oFB5\nvw7Yly2xwurapLustmlt9IzA4FbKiw8lR9aaTt4jzZEkHCBc8oN9/YMAlfLm\nYnss/4XCoCe6R0a4y61Donakki7CmZF8Hm30zHFG2FnclB4KvYXbHRiNGY7g\nXgxu7jxJMHYgPWHW23BxaxgVuolZwYpAKA5z1FYgVYCdsydN/BaVrHcO77eo\nPEMYLNbaJmnawftF53U1O1g4A+JacQ3yMVcbZs0XAg9pDBzV4YgaCPCyI3WI\ntGFBIrENjhUMRg5if8pkDNonIW4n8LkgdZSqkY4fDjJyljwE3MT7cIMEHC/q\n0l60\r\n=oBUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8hPQy9pdaoZSjdLRRk9oklYujU1F1EtYVw50HR9hF5QIgKQ13EMkBaGf33npeY5+i9yW1gQ7wc4cu/epjtfkbV7Y="}]},"maintainers":[{"name":"pushkar8723","email":"pushkar8723@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/paper-dropdown_3.0.1_1547669440467_0.3166744927970082"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-14T15:46:43.152Z","3.0.0":"2018-07-14T15:46:43.472Z","modified":"2022-04-06T17:09:07.609Z","3.0.1":"2019-01-16T20:10:40.590Z"},"maintainers":[{"name":"pushkar8723","email":"pushkar8723@gmail.com"}],"description":"`paper-dropdown` is a wrapper for `paper-dropdown-menu` to enable various features like multi-select, search / filter of items, key value pair and 2-way binding on value.","homepage":"https://github.com/pushkar8723/paper-dropdown#readme","keywords":["polymer","paper-dropdown"],"repository":{"type":"git","url":"git+https://github.com/pushkar8723/paper-dropdown.git"},"author":{"name":"Pushkar Anand"},"bugs":{"url":"https://github.com/pushkar8723/paper-dropdown/issues"},"license":"MIT","readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/pushkar8723/paper-dropdown)\n\n## &lt;paper-dropdown&gt;\n\n`paper-dropdown` is a wrapper for `paper-dropdown-menu` to enable various features like multi-select, search / filter of\nitems, key value pair and 2-way binding on value.\n\n**Doc:** https://paper-dropdown.netlify.com/#/elements/paper-dropdown\n\n**Demo:** https://paper-dropdown.netlify.com/#/elements/paper-dropdown/demos/demo/index.html\n\nValues can be bound using `value` attribute.\n\n**Example**\n<!--\n```\n<custom-element-demo>\n    <template>\n        <link rel=\"import\" href=\"paper-dropdown.html\">\n        <link rel=\"import\" href=\"../paper-item/paper-item.html\">\n        <link rel=\"import\" href=\"../iron-demo-helpers/demo-pages-shared-styles.html\">\n        <style is=\"custom-style\" include=\"demo-pages-shared-styles\">\n            paper-dropdown {\n                height: 300px;\n            }\n        </style>\n        <next-code-block></next-code-block>\n    </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-dropdown label=\"Fruit\" value=\"{{value}}\">\n    <paper-item>Apple</paper-item>\n    <paper-item>Banana</paper-item>\n    <paper-item>Mango</paper-item>\n    <paper-item>Orange</paper-item>\n    <paper-item>Tomato</paper-item>\n</paper-dropdown>\n```\n\nEach item can have a key-value pair where key is what stored in the model but\nlabel is what user sees. This can be done using `value` attribute for `paper-item`\n\n**Example**\n<!--\n```\n<custom-element-demo>\n    <template>\n        <link rel=\"import\" href=\"paper-dropdown.html\">\n        <link rel=\"import\" href=\"../paper-item/paper-item.html\">\n        <link rel=\"import\" href=\"../iron-demo-helpers/demo-pages-shared-styles.html\">\n        <style is=\"custom-style\" include=\"demo-pages-shared-styles\">\n            paper-dropdown {\n                height: 300px;\n            }\n        </style>\n        <next-code-block></next-code-block>\n    </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-dropdown label=\"Fruit\" value=\"{{value}}\">\n    <paper-item value=\"apple\">Apple</paper-item>\n    <paper-item value=\"banana\">Banana</paper-item>\n    <paper-item value=\"mango\">Mango</paper-item>\n    <paper-item value=\"orange\">Orange</paper-item>\n    <paper-item value=\"tomato\">Tomato</paper-item>\n</paper-dropdown>\n```\n\nIt also has an optional parameter named `searchable`, which when set to true\nwill add a text field at the start of the dropdown which users can use to filter\nout the items in the dropdown.\n\n**Example**\n<!--\n```\n<custom-element-demo>\n    <template>\n        <link rel=\"import\" href=\"paper-dropdown.html\">\n        <link rel=\"import\" href=\"../paper-item/paper-item.html\">\n        <link rel=\"import\" href=\"../iron-demo-helpers/demo-pages-shared-styles.html\">\n        <style is=\"custom-style\" include=\"demo-pages-shared-styles\">\n            paper-dropdown {\n                height: 300px;\n            }\n        </style>\n        <next-code-block></next-code-block>\n    </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-dropdown label=\"Fruit\" value=\"{{value}}\" searchable=\"true\">\n    <paper-item value=\"apple\">Apple</paper-item>\n    <paper-item value=\"banana\">Banana</paper-item>\n    <paper-item value=\"mango\">Mango</paper-item>\n    <paper-item value=\"orange\">Orange</paper-item>\n    <paper-item value=\"tomato\">Tomato</paper-item>\n</paper-dropdown>\n```\n\nFor multi-select, set `mutli` parameter to true.  In this case however, paper-item's `value` attribute must be set.\n\n**Example**\n<!--\n```\n<custom-element-demo>\n    <template>\n        <link rel=\"import\" href=\"paper-dropdown.html\">\n        <link rel=\"import\" href=\"../paper-item/paper-item.html\">\n        <link rel=\"import\" href=\"../iron-demo-helpers/demo-pages-shared-styles.html\">\n        <style is=\"custom-style\" include=\"demo-pages-shared-styles\">\n            paper-dropdown {\n                height: 300px;\n            }\n        </style>\n        <next-code-block></next-code-block>\n    </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-dropdown label=\"Fruit\" value=\"{{value}}\" multi=\"true\" searchable=\"true\">\n    <paper-item value=\"apple\">Apple</paper-item>\n    <paper-item value=\"banana\">Banana</paper-item>\n    <paper-item value=\"mango\">Mango</paper-item>\n    <paper-item value=\"orange\">Orange</paper-item>\n    <paper-item value=\"tomato\">Tomato</paper-item>\n</paper-dropdown>\n```\n\nA very common usecase for dropdown is where items are dynamic. Following example shows how to use paper-dropdown with template repeat.\n\n**Example**\n<!--\n```\n<custom-element-demo>\n    <template>\n        <link rel=\"import\" href=\"paper-dropdown.html\">\n        <link rel=\"import\" href=\"../paper-item/paper-item.html\">\n        <link rel=\"import\" href=\"../iron-demo-helpers/demo-pages-shared-styles.html\">\n        <style is=\"custom-style\" include=\"demo-pages-shared-styles\">\n            paper-dropdown {\n                height: 300px;\n            }\n        </style>\n        <next-code-block></next-code-block>\n    </template>\n</custom-element-demo>\n```\n--> \n```html\n<dom-bind>\n    <template>\n        <paper-dropdown label=\"Select an item\" value=\"{{value}}\" searchable multi>\n            <template is=\"dom-repeat\" items=\"{{items}}\">\n      \t        <paper-item value$=\"{{item.key}}\">{{item.value}}</paper-item>\n            </template>\n        </paper-dropdown><br/>\n        <strong>Seleted Item:</strong> {{value}}\n    </template>\n    <script>\n        var domBind = document.querySelector('dom-bind');\n        domBind.items = [\n            {key: 'item1', value: 'First Item'},\n            {key: 'item2', value: 'Second Item'},\n            {key: 'item3', value: 'Third Item'},\n            {key: 'item4', value: 'Fourth Item'},\n            {key: 'item5', value: 'Fifth Item'},\n        ];\n    </script>\n</dom-bind>\n```\n\n### Styling\n\nSince `paper-dropdown` is wrapper around `paper-dropdown-menu`, you can use any of the `paper-dropdown-menu`, `paper-input-container` and `paper-menu-button` style mixins and custom properties to style the internal input and menu button respectively.\n","readmeFilename":"README.md"}