@anypoint-web-components/anypoint-autocomplete - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

package.json

 {
   "name": "@anypoint-web-components/anypoint-autocomplete",
   "description": "Anypoint styled autocomplete for inputs.",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "license": "Apache-2.0",
@@ -29,3 +29,3 @@ "main": "index.js",
     "@anypoint-web-components/anypoint-dropdown": "^1.1.2",
-    "@anypoint-web-components/anypoint-item": "^1.0.7",
+    "@anypoint-web-components/anypoint-item": "^1.0.8",
     "@anypoint-web-components/anypoint-listbox": "^1.1.4",
@@ -38,9 +38,9 @@ "@polymer/paper-progress": "^3.0.0",
     "@advanced-rest-client/arc-demo-helper": "^1.0.17",
-    "@advanced-rest-client/testing-karma-sl": "^1.4.1",
+    "@advanced-rest-client/testing-karma-sl": "^1.4.2",
     "@anypoint-web-components/anypoint-button": "^1.1.1",
     "@anypoint-web-components/anypoint-checkbox": "^1.1.2",
-    "@anypoint-web-components/anypoint-input": "^0.2.20",
+    "@anypoint-web-components/anypoint-input": "^0.2.21",
     "@anypoint-web-components/anypoint-styles": "^1.0.1",
     "@open-wc/eslint-config": "^3.0.0",
-    "@open-wc/testing": "^2.5.25",
+    "@open-wc/testing": "^2.5.26",
     "@open-wc/testing-karma": "^4.0.5",
@@ -51,10 +51,10 @@ "@polymer/iron-test-helpers": "^3.0.1",
     "es-dev-server": "^1.57.4",
-    "eslint": "^7.8.1",
+    "eslint": "^7.9.0",
     "eslint-config-prettier": "^6.11.0",
     "husky": "^4.3.0",
-    "lint-staged": "^10.3.0",
-    "prettier": "^2.1.1",
+    "lint-staged": "^10.4.0",
+    "prettier": "^2.1.2",
     "sinon": "^9.0.3",
     "ts-lit-plugin": "^1.2.1",
-    "typescript": "^4.0.2",
+    "typescript": "^4.0.3",
     "typescript-lit-html-plugin": "^0.9.0"
@@ -61,0 +61,0 @@ },

src/AnypointAutocomplete.d.ts

@@ -37,2 +37,8 @@ /*
   filter?: string;
+  /**
+   * This property is transparent for the component but useful when handling selection
+   * events to recognize which suggestion was used. It is up to the author to handle this
+   * property.
+   */
+  id?: string|number;
 }
@@ -67,4 +73,5 @@
    * an id of an element that is a child of the parent element of this node.
+   * @attribute
    */
-  target: HTMLElement;
+  target: HTMLElement|string;
   _oldTarget: HTMLElement;
@@ -97,6 +104,8 @@ /**
    * Do not use it it you do not handle suggestions asynchronously.
+   * @attribute
    */
   loader: boolean;
   /**
-   * If true it will opend suggestions on input field focus.
+   * If true it will opened suggestions on input field focus.
+   * @attribute
    */
@@ -110,2 +119,3 @@ openOnFocus: boolean;
    * Possible values are "top", "bottom", "middle", "auto".
+   * @attribute
    */
@@ -126,2 +136,3 @@ verticalAlign: string;
    * offset will move the dropdown downwards; a positive one, upwards.
+   * @attribute
    */
@@ -133,2 +144,3 @@ verticalOffset: number;
    * "center", "auto".
+   * @attribute
    */
@@ -149,2 +161,3 @@ horizontalAlign: string;
    * offset will move the dropdown to the right; a positive one, to the left.
+   * @attribute
    */
@@ -157,2 +170,3 @@ horizontalOffset: number;
    * close
+   * @attribute
    */
@@ -162,2 +176,3 @@ scrollAction: string;
    * Removes animation from the dropdown.
+   * @attribute
    */
@@ -168,2 +183,3 @@ noAnimations: boolean;
    * This effect is always disabled when `compatibility` is set.
+   * @attribute
    */
@@ -173,2 +189,3 @@ noink: boolean;
    * Enables compatibility with Anypoint components.
+   * @attribute
    */
@@ -183,2 +200,3 @@ compatibility: boolean;
    * When set it won't setup `aria-controls` on target element.
+   * @attribute
    */
@@ -189,2 +207,3 @@ noTargetControls: boolean;
    * target when a selection is made.
+   * @attribute
    */
@@ -228,3 +247,3 @@ noTargetValueUpdate: boolean;
   /**
-   * Setups relavent aria attributes in the target input.
+   * Setups relevant aria attributes in the target input.
    * @param target An element to set attribute on to
@@ -256,6 +275,6 @@ */
   /**
-   * Disaptches query event and returns it.
+   * Dispatches query event and returns it.
    * @param value Current input value.
    */
-  _disaptchQuery(value: string): CustomEvent;
+  _dispatchQuery(value: string): CustomEvent;
 
@@ -308,3 +327,3 @@ /**
   /**
-   * Accetps first suggestion from the dropdown when opened.
+   * Accepts first suggestion from the dropdown when opened.
    */
@@ -315,3 +334,3 @@ _onEnterKey(): void;
    * The element refocuses on the input when suggestions closes.
-   * Also, the lisbox element is focusable so with tab it can be next target.
+   * Also, the listbox element is focusable so with tab it can be next target.
    * Finally, the dropdown has close animation that takes some time to finish
@@ -318,0 +337,0 @@ * so it will try to refocus after the animation finish.

src/AnypointAutocomplete.js

@@ -56,4 +56,3 @@ /*
  *
- * @customElement
- * @demo demo/index.html
+ * @element anypoint-autocomplete
  */
@@ -77,2 +76,3 @@ export class AnypointAutocomplete extends LitElement {
        * an id of an element that is a child of the parent element of this node.
+       * @attribute
        */
@@ -88,2 +88,3 @@ target: {},
        * `value` property will be used to insert the value to the referenced text field.
+       * @attribute
        */
@@ -103,8 +104,10 @@ source: { type: Array },
        * Do not use it it you do not handle suggestions asynchronously.
+       * @attribute
        */
       loader: { type: Boolean, reflect: true },
       /**
-       * If true it will opend suggestions on input field focus.
+       * If true it will opened suggestions on input field focus.
+       * @attribute
        */
-      openOnFocus: { type: Boolean },
+      openOnFocus: { type: Boolean, reflect: true },
       /**
@@ -114,4 +117,5 @@ * The orientation against which to align the element vertically
        * Possible values are "top", "bottom", "middle", "auto".
+       * @attribute
        */
-      verticalAlign: { type: String },
+      verticalAlign: { type: String, reflect: true },
       /**
@@ -130,4 +134,5 @@ * A pixel value that will be added to the position calculated for the
        * offset will move the dropdown downwards; a positive one, upwards.
+       * @attribute
        */
-      verticalOffset: { type: Number },
+      verticalOffset: { type: Number, reflect: true },
       /**
@@ -137,4 +142,5 @@ * The orientation against which to align the element horizontally
        * "center", "auto".
+       * @attribute
        */
-      horizontalAlign: { type: String },
+      horizontalAlign: { type: String, reflect: true },
       /**
@@ -153,4 +159,5 @@ * A pixel value that will be added to the position calculated for the
        * offset will move the dropdown to the right; a positive one, to the left.
+       * @attribute
        */
-      horizontalOffset: { type: Number },
+      horizontalOffset: { type: Number, reflect: true },
       /**
@@ -161,15 +168,19 @@ * Determines which action to perform when scroll outside an opened overlay
        * close
+       * @attribute
        */
-      scrollAction: { type: String },
+      scrollAction: { type: String, reflect: true },
       /**
        * Removes animation from the dropdown.
+       * @attribute
        */
-      noAnimations: { type: Boolean },
+      noAnimations: { type: Boolean, reflect: true },
       /**
        * Removes ripple effect from list items.
        * This effect is always disabled when `compatibility` is set.
+       * @attribute
        */
-      noink: { type: Boolean },
+      noink: { type: Boolean, reflect: true },
       /**
        * Enables compatibility with Anypoint components.
+       * @attribute
        */
@@ -183,9 +194,11 @@ compatibility: { type: Boolean, reflect: true },
        * When set it won't setup `aria-controls` on target element.
+       * @attribute
        */
-      noTargetControls: { type: Boolean },
+      noTargetControls: { type: Boolean, reflect: true },
       /**
        * When set the element won't update the `value` property on the
        * target when a selection is made.
+       * @attribute
        */
-      noTargetValueUpdate: { type: Boolean },
+      noTargetValueUpdate: { type: Boolean, reflect: true },
     };
@@ -234,3 +247,3 @@ }
     this.dispatchEvent(
-      new CustomEvent('loading-chanegd', {
+      new CustomEvent('loadingchange', {
         detail: {
@@ -425,3 +438,3 @@ value
     // Styles are defined here because it does not uses shadow root
-    // to comply with accessibility requiremenets.
+    // to comply with accessibility requirements.
     // Styles defined in the component's `styles` getter won't be applied
@@ -431,4 +444,4 @@ // to the children.
     ensureNodeId(box);
-    box.style.backgroundColor = 'var(--anypoiont-autocomplete-background-color, #fff)';
-    box.style.boxShadow = 'var(--anypoiont-autocomplete-dropdown-shaddow)';
+    box.style.backgroundColor = 'var(--anypoint-autocomplete-background-color, #fff)';
+    box.style.boxShadow = 'var(--anypoint-autocomplete-dropdown-shadow)';
     const {id} = box;
@@ -502,3 +515,2 @@ this.setAttribute('aria-owns', id);
         this.target = node;
-
       }
@@ -535,3 +547,3 @@ } else if (target) {
   /**
-   * Setups relavent aria attributes in the target input.
+   * Setups the relevant aria attributes in the target input.
    * @param {HTMLElement} target An element to set attribute on to
@@ -618,3 +630,3 @@ */
     this._listbox.selected = -1;
-    this._disaptchQuery(value);
+    this._dispatchQuery(value);
     this._previousQuery = value;
@@ -632,7 +644,7 @@ this._filterSuggestions();
   /**
-   * Disaptches query event and returns it.
+   * Dispatches query event and returns it.
    * @param {String} value Current input value.
    * @return {CustomEvent}
    */
-  _disaptchQuery(value) {
+  _dispatchQuery(value) {
     const e = new CustomEvent('query', {
@@ -851,3 +863,3 @@ detail: {
   /**
-   * Accetps first suggestion from the dropdown when opened.
+   * Accepts first suggestion from the dropdown when opened.
    */
@@ -872,3 +884,3 @@ _onEnterKey() {
    * The element refocuses on the input when suggestions closes.
-   * Also, the lisbox element is focusable so with tab it can be next target.
+   * Also, the listbox element is focusable so with tab it can be next target.
    * Finally, the dropdown has close animation that takes some time to finish
@@ -1029,3 +1041,3 @@ * so it will try to refocus after the animation finish.
  *
- * Nore that setting up source in response to this event after the user has closed
+ * Note that setting up source in response to this event after the user has closed
  * the dropdown it will have no effect at the moment.
@@ -1032,0 +1044,0 @@ *

No alert changes

Improved metrics

Total package byte prevSize

72629

18.12%

Number of package files

11

10%

Lines of code

1544

17.5%

Dependency changes

• Updated

  @anypoint-web-components/anypoint-item@^1.0.8