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

Comparing version 4.0.0-pre.1 to 4.0.0-pre.2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.0.0-pre.1",
+  "version": "4.0.0-pre.2",
   "main": "vaadin-combo-box.js",
@@ -34,4 +34,4 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-control-state-mixin": "^2.0.3-pre.1",
-    "@vaadin/vaadin-overlay": "^2.1.0-pre.1",
-    "@vaadin/vaadin-text-field": "^2.0.0-pre.1",
+    "@vaadin/vaadin-overlay": "^3.0.1-pre.1",
+    "@vaadin/vaadin-text-field": "^2.0.1-pre.1",
     "@vaadin/vaadin-themable-mixin": "^1.1.5-pre.1",
@@ -38,0 +38,0 @@ "@vaadin/vaadin-lumo-styles": "^1.0.0-pre.1",

README.md

 ![Bower version](https://img.shields.io/bower/v/vaadin-combo-box.svg)
+[![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-combo-box.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-combo-box)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-combo-box)
@@ -3,0 +4,0 @@ ![Polymer 2 supported](https://img.shields.io/badge/Polymer2-supported-blue.svg)

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

@@ -1,8 +0,8 @@
-import { PolymerElement } from '../../../@polymer/polymer/polymer-element.js';
-import '../../../@polymer/polymer/lib/utils/debounce.js';
-import '../../../@polymer/iron-list/iron-list.js';
-import '../../../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '@polymer/polymer/lib/utils/debounce.js';
+import '@polymer/iron-list/iron-list.js';
+import '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import './vaadin-combo-box-item.js';
 import './vaadin-combo-box-dropdown.js';
-import { html } from '../../../@polymer/polymer/lib/utils/html-tag.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -17,23 +17,18 @@ * Element for internal use only.
     return html`
-    <vaadin-combo-box-dropdown id="dropdown" opened="{{opened}}" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight">
-      <template>
-        <style>
-          :host([opened][loading]) {
-            display: block !important;
-            height: 58px;
-          }
+    <style>
+      #scroller {
+        overflow: auto;
 
-          #scroller {
-            overflow: auto;
+        /* Fixes item background from getting on top of scrollbars on Safari */
+        transform: translate3d(0, 0, 0);
 
-            /* Fixes item background from getting on top of scrollbars on Safari */
-            transform: translate3d(0, 0, 0);
+        /* Enable momentum scrolling on iOS (iron-list v1.2+ no longer does it for us) */
+        -webkit-overflow-scrolling: touch;
 
-            /* Enable momentum scrolling on iOS (iron-list v1.2+ no longer does it for us) */
-            -webkit-overflow-scrolling: touch;
-
-            /* Fixes scrollbar disappearing when "Show scroll bars: Always" enabled in Safari */
-            box-shadow: 0 0 0 white;
-          }
-        </style>
+        /* Fixes scrollbar disappearing when "Show scroll bars: Always" enabled in Safari */
+        box-shadow: 0 0 0 white;
+      }
+    </style>
+    <vaadin-combo-box-dropdown id="dropdown" opened="{{opened}}" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight">
+      <template>
         <div id="scroller" on-click="_stopPropagation" hidden\$="[[loading]]">
@@ -131,2 +126,8 @@ <iron-list id="selector" role="listbox" items="[[_items]]" scroll-target="[[_scroller]]">
 
+  _fireTouchAction(sourceEvent) {
+    this.dispatchEvent(new CustomEvent('vaadin-overlay-touch-action', {
+      detail: {sourceEvent: sourceEvent}
+    }));
+  }
+
   ready() {
@@ -141,6 +142,4 @@ super.ready();
 
-    this.$.dropdown.$.overlay.addEventListener('touchstart', sourceEvent => {
-      const evt = new CustomEvent('vaadin-overlay-touch-start', {detail: {sourceEvent: sourceEvent}});
-      this.dispatchEvent(evt);
-    });
+    this.$.dropdown.$.overlay.addEventListener('touchend', e => this._fireTouchAction(e));
+    this.$.dropdown.$.overlay.addEventListener('touchmove', e => this._fireTouchAction(e));
 
@@ -152,4 +151,4 @@ // Prevent blurring the input when clicking inside the overlay.
   _templateChanged(e) {
-    this._selector = this.$.dropdown.$.overlay.$.content.querySelector('#selector');
-    this._scroller = this.$.dropdown.$.overlay.$.content.querySelector('#scroller');
+    this._selector = this.$.dropdown.$.overlay.content.querySelector('#selector');
+    this._scroller = this.$.dropdown.$.overlay.content.querySelector('#scroller');
   }
@@ -156,0 +155,0 @@

src/vaadin-combo-box-dropdown.js

@@ -1,6 +0,6 @@
-import { PolymerElement } from '../../../@polymer/polymer/polymer-element.js';
-import { OverlayElement } from '../../../@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-import { IronResizableBehavior } from '../../../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { html } from '../../../@polymer/polymer/lib/utils/html-tag.js';
-import { mixinBehaviors } from '../../../@polymer/polymer/lib/legacy/class.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
+import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 /**
@@ -45,3 +45,3 @@ * The overlay element.
     </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>
@@ -48,0 +48,0 @@ </vaadin-combo-box-overlay>

src/vaadin-combo-box-item.js

@@ -1,4 +0,4 @@
-import { PolymerElement } from '../../../@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '../../../@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { html } from '../../../@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -106,3 +106,3 @@ * The default element used for items in the vaadin-combo-box.
       // 2.0 has __dataHost. Might want to consider assigning combobox reference directly to item.
-      const overlay = this.getRootNode().host; // equivalent of `this.domHost` from legacy API
+      const overlay = this.getRootNode().host.getRootNode().host;
       const dropdown = overlay.__dataHost;
@@ -109,0 +109,0 @@ const comboBoxOverlay = dropdown.getRootNode().host;

src/vaadin-combo-box-light.js

@@ -1,9 +0,9 @@
-import { PolymerElement } from '../../../@polymer/polymer/polymer-element.js';
-import { IronA11yKeysBehavior } from '../../../@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
-import { ThemableMixin } from '../../../@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
 import './vaadin-combo-box-dropdown-wrapper.js';
-import { html } from '../../../@polymer/polymer/lib/utils/html-tag.js';
-import { dashToCamelCase } from '../../../@polymer/polymer/lib/utils/case-map.js';
-import { mixinBehaviors } from '../../../@polymer/polymer/lib/legacy/class.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
+import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 /**
@@ -10,0 +10,0 @@ * `<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing

src/vaadin-combo-box-mixin.js

@@ -1,7 +0,7 @@
-import '../../../@polymer/polymer/polymer-element.js';
-import { IronA11yAnnouncer } from '../../../@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
-import { IronA11yKeysBehavior } from '../../../@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
-import { flush } from '../../../@polymer/polymer/lib/utils/flush.js';
-import { microTask } from '../../../@polymer/polymer/lib/utils/async.js';
-import { templatize } from '../../../@polymer/polymer/lib/utils/templatize.js';
+import '@polymer/polymer/polymer-element.js';
+import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
+import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
+import { flush } from '@polymer/polymer/lib/utils/flush.js';
+import { microTask } from '@polymer/polymer/lib/utils/async.js';
 
@@ -209,3 +209,3 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extends subclass {
 
-    this.$.overlay.addEventListener('vaadin-overlay-touch-start', this._onOverlayTouchStart.bind(this));
+    this.$.overlay.addEventListener('vaadin-overlay-touch-action', this._onOverlayTouchAction.bind(this));
 
@@ -260,3 +260,3 @@ this.addEventListener('touchend', e => {
 
-  _onOverlayTouchStart(event) {
+  _onOverlayTouchAction(event) {
     // On touch devices, blur the input on touch start inside the overlay, in order to hide
@@ -263,0 +263,0 @@ // the virtual keyboard. But don't close the overlay on this blur.

src/vaadin-combo-box.js

@@ -1,10 +0,10 @@
-import { PolymerElement } from '../../../@polymer/polymer/polymer-element.js';
-import '../../../@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
-import '../../../@vaadin/vaadin-text-field/src/vaadin-text-field.js';
-import { ControlStateMixin } from '../../../@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
-import { ThemableMixin } from '../../../@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
+import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
 import './vaadin-combo-box-dropdown-wrapper.js';
-import { ElementMixin } from '../../../@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { html } from '../../../@polymer/polymer/lib/utils/html-tag.js';
+import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -164,3 +164,3 @@ * `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
   static get version() {
-    return '4.0.0-pre.1';
+    return '4.0.0-pre.2';
   }
@@ -167,0 +167,0 @@

test/common-imports.js

@@ -1,3 +0,2 @@
-import '../../../@polymer/test-fixture/test-fixture.js';
-import '../../../@polymer/iron-test-helpers/test-helpers.js';
+import '@polymer/iron-test-helpers/test-helpers.js';
 import '../vaadin-combo-box.js';
@@ -4,0 +3,0 @@ import '../vaadin-combo-box-light.js';

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

@@ -1,5 +0,5 @@
-import '../../../../@vaadin/vaadin-lumo-styles/spacing.js';
-import '../../../../@vaadin/vaadin-lumo-styles/style.js';
-import '../../../../@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
-import '../../../../@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
+import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
 const $_documentContainer = document.createElement('div');
@@ -15,2 +15,11 @@ $_documentContainer.setAttribute('style', 'display: none;');
 
+      :host {
+        /* TODO: using a legacy mixin (unsupported) */
+        --iron-list-items-container: {
+          border-width: var(--lumo-space-xs);
+          border-style: solid;
+          border-color: transparent;
+        };
+      }
+
       /* TODO: workaround ShadyCSS issue when using inside of the dom-if */
@@ -22,11 +31,2 @@ :host([opened]) {
       }
-
-      iron-list {
-        /* TODO: using a legacy mixin (unsupported) */
-        --iron-list-items-container: {
-          border-width: var(--lumo-space-xs);
-          border-style: solid;
-          border-color: transparent;
-        }
-      }
     </style>
@@ -33,0 +33,0 @@ </template>

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

@@ -1,5 +0,5 @@
-import '../../../../@vaadin/vaadin-lumo-styles/color.js';
-import '../../../../@vaadin/vaadin-lumo-styles/spacing.js';
-import '../../../../@vaadin/vaadin-lumo-styles/style.js';
-import '../../../../@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
 const $_documentContainer = document.createElement('div');
@@ -6,0 +6,0 @@ $_documentContainer.setAttribute('style', 'display: none;');

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

@@ -1,4 +0,4 @@
-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';
+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');
@@ -5,0 +5,0 @@ $_documentContainer.setAttribute('style', 'display: none;');

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

176196

increased by1.33%

Number of lines in readme file

107

increased by0.94%

Worsened metrics

Lines of code

1949

decreased by-0.1%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/vaadin-overlay@3.5.1(transitive)

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

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

• - Removed@vaadin/vaadin-overlay@2.1.0-pre.1(transitive)

• Updated@vaadin/vaadin-overlay@^3.0.1-pre.1

• Updated@vaadin/vaadin-text-field@^2.0.1-pre.1