@vaadin/vaadin-combo-box - npm Package Compare versions

Comparing version 4.1.0-alpha3 to 4.1.0-beta1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.1.0-alpha3",
+  "version": "4.1.0-beta1",
   "main": "vaadin-combo-box.js",
@@ -28,35 +28,35 @@ "author": "Vaadin Ltd",
   "dependencies": {
-    "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.12",
-    "@polymer/iron-a11y-announcer": "^3.0.0-pre.12",
-    "@polymer/iron-list": "^3.0.0-pre.12",
-    "@polymer/iron-resizable-behavior": "^3.0.0-pre.12",
+    "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.18",
+    "@polymer/iron-a11y-announcer": "^3.0.0-pre.18",
+    "@polymer/iron-list": "^3.0.0-pre.18",
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.18",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-control-state-mixin": "^2.1.0-alpha2",
-    "@vaadin/vaadin-overlay": "^3.1.0-alpha2",
-    "@vaadin/vaadin-text-field": "^2.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "^1.2.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "^1.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "^1.1.0-alpha2",
-    "@vaadin/vaadin-item": "^2.1.0-alpha2",
-    "@vaadin/vaadin-element-mixin": "^1.1.0-alpha1"
+    "@vaadin/vaadin-control-state-mixin": "^2.1.1",
+    "@vaadin/vaadin-overlay": "^3.1.0-beta1",
+    "@vaadin/vaadin-text-field": "^2.1.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "^1.2.1",
+    "@vaadin/vaadin-lumo-styles": "^1.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "^1.1.0-beta1",
+    "@vaadin/vaadin-item": "^2.1.0-beta1",
+    "@vaadin/vaadin-element-mixin": "^1.1.2"
   },
   "devDependencies": {
-    "@polymer/iron-ajax": "^3.0.0-pre.12",
-    "@polymer/iron-component-page": "^3.0.0-pre.12",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.12",
-    "@polymer/iron-form": "^3.0.0-pre.12",
-    "@polymer/iron-icon": "^3.0.0-pre.12",
-    "@polymer/iron-icons": "^3.0.0-pre.12",
-    "@polymer/iron-input": "^3.0.0-pre.12",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.12",
-    "@polymer/paper-button": "^3.0.0-pre.12",
-    "@polymer/paper-icon-button": "^3.0.0-pre.12",
-    "@polymer/paper-item": "^3.0.0-pre.12",
-    "@polymer/paper-input": "^3.0.0-pre.12",
-    "@polymer/paper-styles": "^3.0.0-pre.12",
-    "@polymer/test-fixture": "^3.0.0-pre.12",
-    "@vaadin/vaadin-button": "^2.1.0-alpha2",
-    "wct-browser-legacy": "0.0.1-pre.11",
-    "@vaadin/vaadin-demo-helpers": "^2.0.0-alpha2"
+    "@polymer/iron-ajax": "^3.0.0-pre.18",
+    "@polymer/iron-component-page": "^3.0.0-pre.18",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-form": "^3.0.0-pre.18",
+    "@polymer/iron-icon": "^3.0.0-pre.18",
+    "@polymer/iron-icons": "^3.0.0-pre.18",
+    "@polymer/iron-input": "^3.0.0-pre.18",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@polymer/paper-button": "^3.0.0-pre.18",
+    "@polymer/paper-icon-button": "^3.0.0-pre.18",
+    "@polymer/paper-item": "^3.0.0-pre.18",
+    "@polymer/paper-input": "^3.0.0-pre.18",
+    "@polymer/paper-styles": "^3.0.0-pre.18",
+    "@polymer/test-fixture": "^3.0.0-pre.18",
+    "@vaadin/vaadin-button": "^2.1.0-beta1",
+    "wct-browser-legacy": "^1.0.1",
+    "@vaadin/vaadin-demo-helpers": "^2.0.1"
   }
 }

README.md

@@ -88,20 +88,23 @@ [![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-combo-box.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-combo-box)
 
-## The file structure for Vaadin components
+To use the Material theme, import the correspondent file from the `theme/material` folder.
 
-- `src/vaadin-combo-box.html`
-- `src/vaadin-combo-box-light.html`
+## Entry points
 
-  Unstyled components.
+- The components with the Lumo theme:
 
-- `theme/lumo/vaadin-combo-box.html`
-- `theme/lumo/vaadin-combo-box-light.html`
+  `theme/lumo/vaadin-combo-box.html`  
+  `theme/lumo/vaadin-combo-box-light.html`
 
-  Components with Lumo theme.
+- The components with the Material theme:
 
-- `vaadin-combo-box.html`
-- `vaadin-combo-box-light.html`
+  `theme/material/vaadin-combo-box.html`  
+  `theme/material/vaadin-combo-box-light.html`
 
-  Alias for theme/lumo/vaadin-combo-box.html
-  theme/lumo/vaadin-combo-box-light.html
+- Alias for `theme/lumo/vaadin-combo-box.html`  
+  `theme/lumo/vaadin-combo-box-light.html`
 
+  `vaadin-combo-box.html`  
+  `vaadin-combo-box-light.html`
+
+
 ## Running demos and tests in browser
@@ -133,8 +136,5 @@
 
-## Creating a pull request
+## Contributing
 
-  - Make sure your code is compliant with our code linters: `gulp lint`
-  - Check that tests are passing: `polymer test`
-  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
-  - Wait for response from one of Vaadin components team members
+  To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
 
@@ -141,0 +141,0 @@

src/vaadin-combo-box-dropdown-wrapper.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import '@polymer/polymer/lib/utils/debounce.js';
@@ -31,3 +37,3 @@ import '@polymer/iron-list/iron-list.js';
     </style>
-    <vaadin-combo-box-dropdown id="dropdown" opened="{{opened}}" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight">
+    <vaadin-combo-box-dropdown id="dropdown" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight">
       <template>
@@ -123,3 +129,3 @@ <div id="scroller" on-click="_stopPropagation" hidden\$="[[loading]]">
   static get observers() {
-    return ['_selectorChanged(_selector)', '_loadingChanged(loading)'];
+    return ['_selectorChanged(_selector)', '_loadingChanged(loading)', '_openedChanged(opened, _items)'];
   }
@@ -133,2 +139,8 @@
 
+  _openedChanged(opened, items) {
+    // Do not attach if no items
+    // Do not dettach if opened but user types an invalid search
+    this.$.dropdown.opened = !!(opened && (this.$.dropdown.opened || items && items.length));
+  }
+
   ready() {
@@ -240,3 +252,3 @@ super.ready();
     let label = item ? this.get(this._itemLabelPath, item) : undefined;
-    if (label === undefined) {
+    if (label === undefined || label === null) {
       label = item ? item.toString() : '';
@@ -243,0 +255,0 @@ }

src/vaadin-combo-box-dropdown.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
@@ -45,3 +51,3 @@ import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
     </style>
-    <vaadin-combo-box-overlay id="overlay" hidden\$="[[hidden]]" opened="[[opened]]" template="{{template}}" style="align-items: stretch; margin: 0">
+    <vaadin-combo-box-overlay id="overlay" hidden\$="[[hidden]]" opened="[[opened]]" template="{{template}}" style="align-items: stretch; margin: 0;">
       <slot></slot>
@@ -58,6 +64,3 @@ </vaadin-combo-box-overlay>
     return {
-      opened: {
-        type: Boolean,
-        notify: true
-      },
+      opened: Boolean,
 
@@ -64,0 +67,0 @@ template: {

src/vaadin-combo-box-item.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -3,0 +9,0 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';

src/vaadin-combo-box-light.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
@@ -3,0 +9,0 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

src/vaadin-combo-box-mixin.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import '@polymer/polymer/polymer-element.js';
+
 import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
@@ -8,2 +14,5 @@ import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
 
+/**
+ * @polymerMixin
+ */
 export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extends subclass {
@@ -194,2 +203,7 @@
     this.addEventListener('focusout', e => {
+      // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
+      if (e.relatedTarget === this.$.overlay.$.dropdown.$.overlay) {
+        e.composedPath()[0].focus();
+        return;
+      }
       if (!this._closeOnBlurIsPrevented) {
@@ -256,4 +270,7 @@ this.close();
       }
-    } else if (this._openedWithFocusRing && this.hasAttribute('focused')) {
-      this.focusElement.setAttribute('focus-ring', '');
+    } else {
+      if (this._openedWithFocusRing && this.hasAttribute('focused')) {
+        this.focusElement.setAttribute('focus-ring', '');
+      }
+      this._onClosed();
     }
@@ -260,0 +277,0 @@ }

src/vaadin-combo-box.js

@@ -0,2 +1,8 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
@@ -164,3 +170,3 @@ import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
   static get version() {
-    return '4.1.0-alpha3';
+    return '4.1.0-beta1';
   }
@@ -167,0 +173,0 @@

test/common-imports.js

 import '@polymer/iron-test-helpers/test-helpers.js';
 import '../vaadin-combo-box.js';
 import '../vaadin-combo-box-light.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -20,2 +19,2 @@ $_documentContainer.innerHTML = `<dom-module id="not-animated-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/lumo/vaadin-combo-box-dropdown-styles.js

@@ -5,4 +5,3 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -35,2 +34,2 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/lumo/vaadin-combo-box-item-styles.js

@@ -5,4 +5,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -51,2 +50,2 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-combo-box-item" theme-for="vaadin-combo-box-item">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/lumo/vaadin-combo-box-styles.js

 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -25,2 +24,2 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-combo-box" theme-for="vaadin-combo-box">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/material/vaadin-combo-box-dropdown-styles.js

 import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -29,2 +28,2 @@ $_documentContainer.innerHTML = `<dom-module id="material-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/material/vaadin-combo-box-item-styles.js

@@ -5,4 +5,3 @@ import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-item/theme/material/vaadin-item.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -44,2 +43,2 @@ $_documentContainer.innerHTML = `<dom-module id="material-combo-box-item" theme-for="vaadin-combo-box-item">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

theme/material/vaadin-combo-box-styles.js

@@ -7,4 +7,3 @@ import './vaadin-combo-box-dropdown-styles.js';
 import '@vaadin/vaadin-material-styles/mixins/field-button.js';
-const $_documentContainer = document.createElement('div');
-$_documentContainer.setAttribute('style', 'display: none;');
+const $_documentContainer = document.createElement('template');
 
@@ -35,2 +34,2 @@ $_documentContainer.innerHTML = `<dom-module id="material-combo-box" theme-for="vaadin-combo-box">
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Improved metrics

Total package byte prevSize

608049

increased by10.38%

Number of package files

68

increased by25.93%

Lines of code

2767

increased by32.46%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-a11y-announcer@^3.0.0-pre.18

• Updated@polymer/iron-a11y-keys-behavior@^3.0.0-pre.18

• Updated@polymer/iron-list@^3.0.0-pre.18

• Updated@polymer/iron-resizable-behavior@^3.0.0-pre.18

• Updated@vaadin/vaadin-control-state-mixin@^2.1.1

• Updated@vaadin/vaadin-element-mixin@^1.1.2

• Updated@vaadin/vaadin-item@^2.1.0-beta1

• Updated@vaadin/vaadin-lumo-styles@^1.1.0-beta1

• Updated@vaadin/vaadin-material-styles@^1.1.0-beta1

• Updated@vaadin/vaadin-overlay@^3.1.0-beta1

• Updated@vaadin/vaadin-text-field@^2.1.0-beta1

• Updated@vaadin/vaadin-themable-mixin@^1.2.1