@advanced-rest-client/paper-autocomplete - npm Package Compare versions

Comparing version 2.0.4 to 3.0.0-preview.1

CHANGELOG.md

@@ -0,1 +1,13 @@
+<a name="2.0.6"></a>
+## [2.0.6](https://github.com/advanced-rest-client/paper-autocomplete/compare/2.0.2...2.0.6) (2019-01-07)
+
+
+
+
+<a name="2.0.4"></a>
+## [2.0.4](https://github.com/advanced-rest-client/paper-autocomplete/compare/2.0.2...2.0.4) (2018-05-18)
+
+
+
+
 <a name="2.0.3"></a>
@@ -2,0 +14,0 @@ ## [2.0.3](https://github.com/advanced-rest-client/paper-autocomplete/compare/2.0.2...2.0.3) (2018-03-08)

gen-tsd.json

 {
   "excludeFiles": [
     "tasks/*",
-    "demo/*"
+    "demo/*",
+    "test/*",
+    "index.html"
   ]
 }

package.json

 {
+  "description": "Paper autocomplete element to be used with paper-, iron- and regular inputs.",
+  "keywords": [
+    "web-component",
+    "polymer",
+    "paper-autocomplete",
+    "autocomplete",
+    "suggestions"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/advanced-rest-client/paper-autocomplete.git"
+  },
+  "homepage": "https://github.com/advanced-rest-client/paper-autocomplete/",
   "name": "@advanced-rest-client/paper-autocomplete",
-  "version": "2.0.4",
+  "version": "3.0.0-preview.1",
   "license": "Apache-2.0",
-  "description": "Paper autocomplete element to be used with paper-, iron- and regular inputs.",
   "authors": [
@@ -17,13 +29,36 @@ "Pawel Psztyc",
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.1.1"
+    "@polymer/gen-typescript-declarations": "^1.6.0",
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-demo-helpers": "^3.0.0",
+    "@polymer/iron-test-helpers": "^3.0.0",
+    "@polymer/paper-button": "^3.0.0",
+    "@polymer/paper-input": "^3.0.0",
+    "@polymer/test-fixture": "^4.0.2",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "chai": "^4.2.0",
+    "chance": "^1.0.18",
+    "mocha": "^5.2.0",
+    "sinon": "^7.2.3",
+    "wct-mocha": "^1.0.0"
   },
-  "private": false,
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/advanced-rest-client/paper-autocomplete.git"
-  },
   "bugs": {
     "url": "https://github.com/advanced-rest-client/paper-autocomplete/issues",
     "email": "[e-mail]"
+  },
+  "main": "paper-autocomplete.js",
+  "contributors": [
+    "Pawel Psztyc <[e-mail]>",
+    "The Advanced REST Client authors"
+  ],
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0",
+    "@polymer/iron-overlay-behavior": "^3.0.0",
+    "@polymer/paper-item": "^3.0.0",
+    "@polymer/paper-ripple": "^3.0.0",
+    "@polymer/paper-styles": "^3.0.0",
+    "@polymer/iron-a11y-keys": "^3.0.0",
+    "@polymer/iron-selector": "^3.0.0",
+    "@polymer/iron-scroll-target-behavior": "^3.0.0",
+    "@polymer/paper-progress": "^3.0.0"
   }
 }

paper-autocomplete.d.ts

@@ -5,20 +5,26 @@ /**
  * This file was automatically generated by
- *   https://github.com/Polymer/gen-typescript-declarations
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
  *
  * To modify these typings, edit the source file(s):
- *   paper-autocomplete.html
+ *   paper-autocomplete.js
  */
 
-/// <reference path="../polymer/types/polymer-element.d.ts" />
-/// <reference path="../paper-item/paper-item.d.ts" />
-/// <reference path="../paper-ripple/paper-ripple.d.ts" />
-/// <reference path="../paper-styles/shadow.d.ts" />
-/// <reference path="../iron-overlay-behavior/iron-overlay-behavior.d.ts" />
-/// <reference path="../iron-selector/iron-selector.d.ts" />
-/// <reference path="../iron-a11y-keys/iron-a11y-keys.d.ts" />
-/// <reference path="../iron-scroll-target-behavior/iron-scroll-target-behavior.d.ts" />
-/// <reference path="../paper-progress/paper-progress.d.ts" />
 
-declare namespace UIElements {
+// tslint:disable:variable-name Describing an API that's defined elsewhere.
+// tslint:disable:no-any describes the API as best we are able today
 
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+
+import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
+
+import {IronOverlayBehavior} from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
+
+import {IronScrollTargetBehavior} from '@polymer/iron-scroll-target-behavior/iron-scroll-target-behavior.js';
+
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+
+declare namespace UiElements {
+
   /**
@@ -113,18 +119,5 @@ * # `<paper-autocomplete>`
    */
-  class PaperAutocomplete extends
-    Polymer.IronOverlayBehavior(
-    Polymer.IronScrollTargetBehavior(
-    Polymer.Element)) {
+  class PaperAutocomplete {
 
     /**
-     * Sizing target element.
-     */
-    sizingTarget: HTMLElement|null|undefined;
-
-    /**
-     * Scroll target element
-     */
-    scrollTarget: HTMLElement|null|undefined;
-
-    /**
      * List of suggestions to display.
@@ -161,2 +154,12 @@ * If the array items are strings they will be used for display a suggestions and
     /**
+     * Scroll target element
+     */
+    scrollTarget: HTMLElement|null|undefined;
+
+    /**
+     * Sizing target element.
+     */
+    sizingTarget: HTMLElement|null|undefined;
+
+    /**
      * True when user query changed and waiting for `source` property update
@@ -189,5 +192,5 @@ */
     _keyTarget: HTMLElement|null|undefined;
-    ready(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    ready(): void;
 
@@ -208,2 +211,9 @@ /**
     /**
+     * Disaptches query event and returns it.
+     *
+     * @param value Current input value.
+     */
+    _disaptchQuery(value: String|null): CustomEvent|null;
+
+    /**
      * Filter `source` array for current value.
@@ -270,3 +280,3 @@ */
      */
-    _targetClick(e: any): void;
+    _targetClick(e: ClickEvent|null): void;
 
@@ -281,4 +291,7 @@ /**
 
-interface HTMLElementTagNameMap {
-  "paper-autocomplete": UIElements.PaperAutocomplete;
+declare global {
+
+  interface HTMLElementTagNameMap {
+    "paper-autocomplete": UiElements.PaperAutocomplete;
+  }
 }

polymer.json

 {
+  "npm": true,
   "lint": {
-    "rules": ["polymer-2"]
+    "rules": [
+      "polymer-3"
+    ]
   }
 }

README.md

@@ -1,2 +0,103 @@
-[![Build Status](https://travis-ci.org/advanced-rest-client/paper-autocomplete.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/paper-autocomplete)  
+[![Build Status](https://travis-ci.org/advanced-rest-client/paper-autocomplete.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/paper-autocomplete)
 
+# `<paper-autocomplete>` element
+
+<!---
+```
+<custom-element-demo>
+  <template>
+    <link rel="import" href="paper-autocomplete.html">
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+
+```html
+<input id="userInput"/>
+<paper-autocomplete id="ac" source='["Apple", "Orange", "Bananas"]'></paper-autocomplete>
+<script>
+document.getElementById('ac').target = document.getElementById('userInput');
+</script>
+```
+
+Use `paper-autocomplete` to add autocomplete functionality to the input elements.
+It also works wilt polymer inputs.
+
+The element works with static list of suggestions or with dynamic (asynchronous)
+operation that require calling te backend or local datastore.
+In second case you should set `loader` property which will display a loader animation
+while results are loaded.
+
+You must associate suggestions with the input field. This can be done by passing
+an element reference to the `target` property.
+
+## Example:
+
+### Static suggestions
+
+```html
+<paper-input label="Enter fruit name" id="fruits"></paper-input>
+<paper-autocomplete id="fruitsSuggestions"></paper-autocomplete>
+```
+
+```javascript
+const ac = document.getElementById('fruitsSuggestions');
+ac.target = document.getElementById('fruits');
+ac.source = ['Apple', 'Orange', 'Bananas'];
+```
+
+or defined in an attribute:
+
+```html
+<paper-autocomplete source='["Apple", "Orange", "Bananas"]'></paper-autocomplete>
+```
+
+### Dynamic suggestions
+
+```html
+<paper-input-container>
+  <label>Enter friut name</label>
+  <iron-input slot="input">
+    <input id="asyncField">
+  </iron-input>
+</paper-input-container>
+<paper-autocomplete loader id="fruitAsync" on-query="_asyncSuggestions"></paper-autocomplete>
+```
+
+```javascript
+const ac = document.querySelector('#fruitAsync');
+ac.target = document.querySelector('#asyncField');
+ac.addEventListener('query', (e) => {
+  const query = e.detail.value;
+  // some function go get results.
+  asyncQuery(query, (suggestions) => {
+    e.target.source = suggestions;
+  });
+});
+```
+
+## Rendering the suggestions
+
+Suggestions array can be either an array of strings or objects.
+For strings, displayed in the list and inserted to the input field value is the same item.
+
+You can set different list item display value and value inserted into the field when the array contains
+onject. Each object must contain `value` and `display` properties where `value` property
+will be inserted into the text field and `display` will be used to display description inside the list.
+
+## Query event
+
+The `query` event is fired when the user query change in the way so the element is
+not able to render suggestions properly.
+This means if the user add a letter to previously entered value the query event will not
+fire since it already have list of suggestion that should be used to filter suggestions from.
+And again when the user will delete a letter the element will still have list of
+source suggestions to filter suggestions from.
+However, if the user change the query entirely it will fire `query` event
+and the app will expect to `source` to change. Setting source is not mandatory.
+
+## Preventing from changing the input value
+
+To prevent the element to update the value of the target input, listent for
+`selected` event and cancel it by calling `event.preventDefault()` function.

wct.conf.json

@@ -6,41 +6,71 @@ {
       "disabled": true,
-      "browsers": ["chrome", "firefox"]
+      "browsers": [
+        "chrome",
+        "firefox"
+      ]
     },
     "sauce": {
       "disabled": true,
-      "browsers": [{
-        "browserName": "microsoftedge",
-        "platform": "Windows 10",
-        "version": ""
-      }, {
-        "browserName": "firefox",
-        "platform": "Windows 10",
-        "version": "latest-4"
-      }, {
-        "browserName": "firefox",
-        "platform": "Windows 10",
-        "version": "latest"
-      }, {
-        "browserName": "chrome",
-        "platform": "Windows 10",
-        "version": "latest-4"
-      }, {
-        "browserName": "chrome",
-        "platform": "Windows 10",
-        "version": "latest"
-      }, {
-        "browserName": "safari",
-        "platform": "OS X 10.11",
-        "version": "9.0"
-      }, {
-        "browserName": "safari",
-        "platform": "macOS 10.12",
-        "version": "10.1"
-      }, {
-        "browserName": "safari",
-        "platform": "macOS 10.13",
-        "version": "11.0"
-      }]
+      "browsers": [
+        {
+          "browserName": "microsoftedge",
+          "platform": "Windows 10",
+          "version": ""
+        },
+        {
+          "browserName": "firefox",
+          "platform": "Windows 10",
+          "version": "latest-4"
+        },
+        {
+          "browserName": "firefox",
+          "platform": "Windows 10",
+          "version": "latest"
+        },
+        {
+          "browserName": "chrome",
+          "platform": "Windows 10",
+          "version": "latest-4"
+        },
+        {
+          "browserName": "chrome",
+          "platform": "Windows 10",
+          "version": "latest"
+        },
+        {
+          "browserName": "safari",
+          "platform": "macOS 10.12",
+          "version": "10.1"
+        },
+        {
+          "browserName": "safari",
+          "platform": "macOS 10.13",
+          "version": "11.1"
+        }
+      ]
+    },
+    "@advanced-rest-client/wct-istanbub": {
+      "dir": "./coverage",
+      "reporters": [
+        "text-summary",
+        "lcov"
+      ],
+      "include": [
+        "**/*.js"
+      ],
+      "exclude": [
+        "**/test/**",
+        "**/demo/**",
+        "**/tasks/**"
+      ],
+      "thresholds": {
+        "global": {
+          "statements": 80,
+          "branches": 80,
+          "functions": 90,
+          "lines": 80
+        }
+      }
     }
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 7 instances in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low maintenance alerts

1

decreased by-50%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

104

increased by3366.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

112368

decreased by-39.78%

Dependency count

9

increased byInfinity%

Dev dependency count

13

increased by1200%

Number of package files

15

decreased by-31.82%

Lines of code

1859

decreased by-53.61%

Dependency changes

• + Added@polymer/iron-a11y-keys@^3.0.0

• + Added@polymer/iron-overlay-behavior@^3.0.0

• + Added@polymer/iron-scroll-target-behavior@^3.0.0

• + Added@polymer/iron-selector@^3.0.0

• + Added@polymer/paper-item@^3.0.0

• + Added@polymer/paper-progress@^3.0.0

• + Added@polymer/paper-ripple@^3.0.0

• + Added@polymer/paper-styles@^3.0.0

• + Added@polymer/polymer@^3.0.0

• + Added@polymer/font-roboto@3.0.2(transitive)

• + Added@polymer/iron-a11y-keys@3.0.1(transitive)

• + Added@polymer/iron-a11y-keys-behavior@3.0.1(transitive)

• + Added@polymer/iron-behaviors@3.0.1(transitive)

• + Added@polymer/iron-fit-behavior@3.1.0(transitive)

• + Added@polymer/iron-flex-layout@3.0.1(transitive)

• + Added@polymer/iron-overlay-behavior@3.0.3(transitive)

• + Added@polymer/iron-range-behavior@3.0.1(transitive)

• + Added@polymer/iron-resizable-behavior@3.0.1(transitive)

• + Added@polymer/iron-scroll-target-behavior@3.0.1(transitive)

• + Added@polymer/iron-selector@3.0.1(transitive)

• + Added@polymer/paper-item@3.0.1(transitive)

• + Added@polymer/paper-progress@3.0.1(transitive)

• + Added@polymer/paper-ripple@3.0.2(transitive)

• + Added@polymer/paper-styles@3.0.1(transitive)

• + Added@polymer/polymer@3.5.2(transitive)

• + Added@webcomponents/shadycss@1.11.2(transitive)