{"_id":"paper-input-place","_rev":"1-ab7c1638d0921ecca77c4f66fa7a068c","name":"paper-input-place","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.1":{"description":"Google Places Autocomplete styled as a paper-input","keywords":["polymer","place","places","autocomplete","google-places","web-components","geocode","reverse-geocode"],"name":"paper-input-place","version":"2.0.1","repository":{"type":"git","url":"git+https://github.com/mlisook/paper-input-place.git"},"resolutions":{"inherits":"2.0.3","samsam":"1.1.3","supports-color":"3.1.2","type-detect":"1.0.0","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"main":"paper-input-place.js","license":"MIT","flat":true,"dependencies":{"@polymer/iron-icon":"^3.0.0-pre.18","@polymer/iron-iconset-svg":"^3.0.0-pre.18","@polymer/iron-input":"^3.0.0-pre.18","@polymer/iron-jsonp-library":"^3.0.0-pre.18","@polymer/paper-input":"^3.0.0-pre.18","@polymer/polymer":"^3.0.0"},"devDependencies":{"@polymer/iron-component-page":"^3.0.0-pre.18","@polymer/iron-demo-helpers":"^3.0.0-pre.18","@webcomponents/webcomponentsjs":"^2.0.0","wct-browser-legacy":"^0.0.1-pre.11"},"gitHead":"9de3018d2bc64a00744982ae87e8d6b74b3a417f","bugs":{"url":"https://github.com/mlisook/paper-input-place/issues"},"homepage":"https://github.com/mlisook/paper-input-place#readme","_id":"paper-input-place@2.0.1","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"mlisook","email":"murray@lisook.net"},"dist":{"integrity":"sha512-MgNdiw36U050Vx7Qc75F+Q3dVbjk80+0pnSf9DsC6XNw07k91pyEiao1WSDQC+A60T6ihLv8G8AqPfCWfjbaoQ==","shasum":"bcf940220d079febf7a33fdc3dcdac5ada1d6527","tarball":"https://registry.npmjs.org/paper-input-place/-/paper-input-place-2.0.1.tgz","fileCount":97,"unpackedSize":278890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbL+fkCRA9TVsSAnZWagAAB9gP+wRaSPKfYB+3Pnd0ip+C\nWq/Sk0Bt4T9K2TtRLWMF6GWsz87QrG9YYQYkuVVsIKSZxA/J9Muh9+xhPUEe\nV67wovECMrMDvk1UZPsoG3O3PEyQ8wrDsyp8pbFJtYkagYOOEe7H5t9Uzn+G\nR1NBgDCjI5G0b2gSNPuPjXRUrLeQg9hepZKUUEcdbYCcEonQOSKC3Vkdg4PT\nF+ZJ3MSS1JaX23/vuk9uMZ0V9im9kRWuODkz0DkZbgGUyrzTBSqzuCJEzH6A\nJ4qo0HOjTMl/e9e2gSpEF1RC0p2VPv5fcrLvrkrKTLj1JXsRGhrPHZ6BF1pU\ng9qK8om4PfNdpUT7xb+uh6Wit+HTFlhdwP9hZRjzo3tZUMN7dQvPvL75Bb/H\nTB0wgRL3FP88iXMcHT/lF78nm62UmD0Ltb2+n+eijrLVN45VXV+Q1kZ63nDP\n1Bj0ciVi5o5bGCCP0o4Oy+BHG99hatBl0lHRFMaSb/915tsWpaMgSXoJzc9Q\n1E/p6mJFjfQf8SP2UshUZRfIVqL8bg/9qhtYN9utJudN7uaoPM6JMmmEJNZY\n54cS8ZHFrTjhYUSj3X+RFU9nq+qeFE/il+OiCBimuoHjUZAzevWb05/z9uKb\nlAMR2m2FkWONuLgnFG7rKwBB/VQk+IUQsgYpuH3kVpVDDbnv/qwfqWzIi4vq\nkJLL\r\n=kLtC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBtg4UbExoSFj0OT2IPzw9SqNXHPuTnAa2q++LPNf8GAiEA13BZShWXUpWFz6dmTvgA+ayCoFcoj6TcJTBnFre7HbM="}]},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/paper-input-place_2.0.1_1529866211899_0.5121853541940014"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-24T18:50:11.898Z","2.0.1":"2018-06-24T18:50:12.332Z","modified":"2022-05-12T13:26:46.628Z"},"maintainers":[{"name":"mlisook","email":"murray@lisook.net"}],"description":"Google Places Autocomplete styled as a paper-input","homepage":"https://github.com/mlisook/paper-input-place#readme","keywords":["polymer","place","places","autocomplete","google-places","web-components","geocode","reverse-geocode"],"repository":{"type":"git","url":"git+https://github.com/mlisook/paper-input-place.git"},"bugs":{"url":"https://github.com/mlisook/paper-input-place/issues"},"license":"MIT","readme":"# paper-input-place\r\n\r\nGoogle Places Autocomplete styled as a paper-input, providing a convenient material design input for places.\r\n\r\nThe element is available as a Polymer 3.0 class based module or as a Polymer 2 hybrid supporting Polymer 2.x and 1.x projects.\r\n\r\nTry it on the [Live Demos](https://mlisook.github.io/paper-input-place/) page.\r\n\r\n## Contents\r\n* [Installation](#installation)\r\n* [Basic Use](#basic-use)\r\n* [Properties](#additional-properties)\r\n* [Methods](#methods)\r\n* [Styling](#styling)\r\n* [Support / Issues](#support)\r\n* [Contributing](#contributing)\r\n* [License](#license)\r\n\r\n\r\n## Installation\r\n### For Polymer 3.x Projects \r\nUse `npm` or `yarn` to install:\r\n```\r\nnpm i --save paper-input-place\r\n// or using yarn\r\nyarn add paper-input-place\r\n```\r\n\r\n### For Polymer 1.x or 2.x projects\r\nUse bower to install. ***Important*** - the polymer 1.x/2.x versions are 1.9.xxx\r\n\r\n```\r\nbower install --save paper-input-place#^1.9.12\r\n```\r\n\r\n## Basic use\r\n\r\n```html\r\n\r\n```\r\nThe `value` property is an object:\r\n\r\n```js\r\n{\r\n \"search\": \"Guggenheim Museum, 5th Avenue, New York, NY, United States\",\r\n \"place_id\": \"ChIJmZ5emqJYwokRuDz79o0coAQ\",\r\n \"latLng\": {\r\n \"lat\": 40.7829796,\r\n \"lng\": -73.95897059999999\r\n }\r\n}\r\n```\r\nBasic use with validation:\r\n\r\n```html\r\n\r\n```\r\nBasic use with a country code specified (use ISO Alpha-2 code):\r\n```html\r\n\r\n\r\n```\r\n\r\n\r\n## Additional Properties\r\n### apiLoaded\r\nA _read only_ boolean property (notifies) that indicates if the google api is\r\nloaded and ready to provide place suggestions and geocoding services.\r\n\r\nThe control also fires an event, `api-loaded`, when the google api is ready\r\nand attached to the input control.\r\n\r\n### errorMessage\r\n`errorMessage` / `error-message` allows customization of the error message display.\r\n```html\r\n\r\nSave\r\n```\r\n\r\n### hideError\r\nIf specified the element doesn't display an error message and doesn't turn red.\r\nSet `hide-error` in the markup to suppress validation.\r\n\r\n### hideIcon\r\n\r\nIf true (`hide-icon` attribute present) the element will not display the \"place\" icon\r\nin the prefix position of the `paper-input`.\r\n\r\n### invalid\r\n`invalid` is a _read only_ property which indicates if the control has a valid place.\r\n```html\r\n\r\nSave\r\n```\r\n### label\r\nThe floating label for the paper-input.\r\n### latLng\r\n`latLng` is a _read only_ property which returns an object after the user selects a place from the prompt.\r\n```html\r\n\r\n```\r\n```js\r\n{\r\n \"lat\": 40.7829796,\r\n \"lng\": -73.95897059999999\r\n}\r\n```\r\n### place\r\n`place` is a _read only_ property which returns an object with detailed information after the user selects a place:\r\n```html\r\n\r\n```\r\n```js\r\n{\r\n \"place_id\": \"ChIJmZ5emqJYwokRuDz79o0coAQ\",\r\n \"formatted_address\": \"1071 5th Ave, New York, NY 10128, USA\",\r\n \"search\": \"Guggenheim Museum, 5th Avenue, New York, NY, United States\",\r\n \"latLng\": {\r\n \"lat\": 40.7829796,\r\n \"lng\": -73.95897059999999\r\n },\r\n \"basic\": {\r\n \"name\": \"Solomon R. Guggenheim Museum\",\r\n \"address\": \"1071 5th Avenue\",\r\n \"city\": \"New York\",\r\n \"state\": \"New York\",\r\n \"stateCode\": \"NY\",\r\n \"postalCode\": \"10128\",\r\n \"country\": \"United States\",\r\n \"countryCode\": \"US\",\r\n \"streetNumber\": \"1071\",\r\n \"route\": \"5th Avenue\",\r\n \"phone\": \"(212) 423-3500\"\r\n },\r\n \"placeDetails\": {\r\n \"address_components\": [\r\n {\r\n \"long_name\": \"1071\",\r\n \"short_name\": \"1071\",\r\n \"types\": [\r\n \"street_number\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"5th Avenue\",\r\n \"short_name\": \"5th Ave\",\r\n \"types\": [\r\n \"route\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"Upper East Side\",\r\n \"short_name\": \"UES\",\r\n \"types\": [\r\n \"neighborhood\",\r\n \"political\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"Manhattan\",\r\n \"short_name\": \"Manhattan\",\r\n \"types\": [\r\n \"sublocality_level_1\",\r\n \"sublocality\",\r\n \"political\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"New York\",\r\n \"short_name\": \"New York\",\r\n \"types\": [\r\n \"locality\",\r\n \"political\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"New York County\",\r\n \"short_name\": \"New York County\",\r\n \"types\": [\r\n \"administrative_area_level_2\",\r\n \"political\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"New York\",\r\n \"short_name\": \"NY\",\r\n \"types\": [\r\n \"administrative_area_level_1\",\r\n \"political\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"United States\",\r\n \"short_name\": \"US\",\r\n \"types\": [\r\n \"country\",\r\n \"political\"\r\n ]\r\n },\r\n {\r\n \"long_name\": \"10128\",\r\n \"short_name\": \"10128\",\r\n \"types\": [\r\n \"postal_code\"\r\n ]\r\n }\r\n ],\r\n \"icon\": \"https://maps.gstatic.com/mapfiles/place_api/icons/museum-71.png\",\r\n \"international_phone_number\": \"+1 212-423-3500\",\r\n \"permanently_closed\": false,\r\n \"types\": [\r\n \"museum\",\r\n \"point_of_interest\",\r\n \"establishment\"\r\n ],\r\n \"website\": \"http://www.guggenheim.org/new-york\",\r\n \"url\": \"https://maps.google.com/?cid=333297768485043384\",\r\n \"utc_offset\": -240\r\n }\r\n}\r\n```\r\n#### A Note About Handling Addresses\r\nIf you need the address and are working with a global scope you should be aware that not all countries will have a street name and number system you can rely on. For example in Japan (except in Kyoto and some Hokkaidō cities) most streets do not have names. In Ghana most rural places don't have numbers. You may want to consider testing `place` result properties and using `formatted_address` where needed.\r\n\r\n### placeholder\r\nSets the `placeholder` of the underlying `input` element.\r\n\r\n### required\r\nIndicates to the control that selection of a place is mandatory and that an empty input is not valid.\r\n\r\n### Search Bias Properties - searchCountryCode, searchBounds, searchType\r\nThese properties can be used to limit the autocomplete search results by country, a bounding geographic rectangle and/or by type of result.\r\n\r\n#### searchCountryCode\r\nYou can provide an [ISO Alpha-2 Country](http://www.nationsonline.org/oneworld/country_code_list.htm) code to limit results to the given country.\r\n\r\n#### searchBounds\r\n`searchBounds` takes an object of the form:\r\n```js\r\n{\r\n east: number, // East longitude in degrees.\r\n west: number, // West longitude in degrees.\r\n north: number, // North latitude in degrees.\r\n south: number, // South latitude in degrees. \r\n}\r\n```\r\nFor example, this area \r\n```\r\n{ north: 39.144342, east: 1.672126, south: 38.810722, west: 1.164008}\r\n```\r\nincludes the island of Ibiza, Spain.\r\n\r\n#### searchType\r\nLimits results to a given result type. Valid types are:\r\n* address\r\n* geocode\r\n* establishment\r\n* (regions) \r\n* (cities)\r\n\r\n#### language\r\nSets the input and autocomplete list preferred language. The default is the user's preferred language setting in the browser (see [Google Maps Api Localizing](https://developers.google.com/maps/documentation/javascript/localization)).\r\n\r\nSpecify the language as a [supported language code](https://developers.google.com/maps/faq#languagesupport).\r\n\r\nIt should also be noted that Google does not have a translation for every place name in the world in every supported language.\r\n\r\nIf you use this attribute you must set it when the element is initialized or at least before the `apiKey` is set.\r\n\r\nIf you use this attribute you must also set the `language` attribute to the same value on any other element that may load the Google Maps API (e.g. `google-map`) or you will generate API loaded twice errors.\r\n\r\n#### minimizeApi\r\nIf true, the element does not load the drawing, geometry or visualization libraries, slightly reducing payload size.\r\n\r\nDo not set this attribute if your page includes other elements that use the Google Maps Javascript API (e.g. `google-map`) as those elements will attempt to load all libraries, generating API loaded twice errors.\r\n\r\nThe default value, `false`, is compatible with the api set used by the Google Elements collection.\r\n\r\nIf you use this attribute you must set it when the element is initialized or at least before the `apiKey` is set.\r\n\r\n## Methods\r\n\r\n### focus()\r\nSets the focus to the input field.\r\n\r\n### Convenience Functions\r\nWhile not needed for the main purpose, the user entering a place, you may have existing data you\r\nneed to geocode for use in the element. We make these functions available here since the Google\r\nAPI is already loaded.\r\n\r\n#### geocode(address)\r\nThe `geocode` function takes an address as its parameter and returns a _promise_ for a result which is a _place object_ as described in the place property above. Note that this does not have any effect on the control's properties (but, of course one could turn around and set the value property with information from the place detail returned).\r\n```js\r\nthis.$$('paper-input-place').geocode(address).then(\r\n function(result) {\r\n // do something with result (a place object)\r\n }.bind(this),\r\n function(status) {\r\n // do something with status - the reason the geocode did not work\r\n }.bind(this)\r\n);\r\n```\r\n#### reverseGeocode(latLng)\r\nThe `reverseGeocode` function takes a latLng object as it's parameter and returns a _promise_ for a result which is a _place object_ as described in the place property above. Note that this does not have any effect on the control's properties (but, of course one could turn around and set the value property with information from the place detail returned).\r\n```js\r\nthis.$$('paper-input-place').reverseGeocode(latlng).then(\r\n function(result) {\r\n // do something with result (a place object)\r\n }.bind(this),\r\n function(status) {\r\n // do something with status - the reason the geocode did not work\r\n }.bind(this)\r\n);\r\n```\r\n#### putPlace(place)\r\nThe `putPlace` function takes a place object and updates the control to reflect that place.\r\n```js\r\nthis.$$('paper-input-place').geocode('Qualcomm Stadium').then(\r\n function(result) {\r\n // set the control to this place\r\n this.$$('paper-input-place').putPlace(result);\r\n }.bind(this),\r\n function(status) {\r\n // do something with status - the reason the geocode did not work\r\n }.bind(this)\r\n);\r\n```\r\n\r\n## Styling\r\n### Custom Properties\r\n\r\nThe following custom properties and mixins are available for styling:\r\n\r\nCustom property | Description | Default\r\n----------------|-------------|----------\r\n`--paper-input-place-icon-mixin` | Mixin applied to all icons | `{}`\r\n`--paper-input-place-prefix-icon-mixin` | Mixin applied to the prefix icon | `{}`\r\n`--paper-input-place-postfix-icon-mixin` | Mixin applied to the postfix icon | `{}`\r\n\r\n### Paper Input Mixins and Variables\r\nYou can style the `paper-input-place` element as you would any `paper-input` element - use the mixins and variables\r\nof `paper-input-container` documented on the [paper-input-container api page](https://www.webcomponents.org/element/PolymerElements/paper-input/elements/paper-input-container). Apply the style to the `paper-input-place` element.\r\n\r\nExample: make the `paper-input-place` more green:\r\n\r\n```html\r\n\r\n```\r\n### Styling the Autocomplete Items List\r\nThe list is provided by Google Places Autocomplete and can be styled by CSS classes described [here](https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete). The trick is the styles must be in the document level (not within a custom element).\r\n\r\nExample: Make the list garish:\r\n\r\nindex.html\r\n```\r\n\r\n```\r\n\r\n## Support\r\nSupport is available for both the Polymer 2.x/1.x version and the Polymer 3.x version of `paper-input-place'. You may submit issues in the [github repository](https://github.com/mlisook/paper-input-place). I strive to address issues within one day.\r\n\r\n## Contributing\r\nContributions via pull request are certainly welcome and appreciated.\r\n\r\n## License\r\nMIT","readmeFilename":"README.md"}