@vaadin/vaadin-select 2.3.0 → 2.4.2

package/README.md

@@ -1,21 +1,18 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-select)](https://www.npmjs.com/package/@vaadin/vaadin-select)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-select)](https://github.com/vaadin/vaadin-select/releases)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-select)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-select.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-select)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-select/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-select?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# <vaadin-select>
 
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-select)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-select.svg)](https://vaadin.com/directory/component/vaadinvaadin-select)
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-select) monorepository.
+> This repository contains the source code and releases of `<vaadin-select>` for the Vaadin versions 10 to 19.
 
-# &lt;vaadin-select&gt;
+[&lt;vaadin-select&gt;](https://vaadin.com/components/vaadin-select) is a Web Component similar to a native browser select element, part of the [Vaadin components](https://vaadin.com/components).
 
-[Live Demo ↗](https://cdn.vaadin.com/vaadin-select/2.0.0-beta1/demo)
+[Live Demo ↗](https://vaadin.com/components/vaadin-select/html-examples)
 |
-[API documentation ↗](https://cdn.vaadin.com/vaadin-select/2.0.0-beta1/#/elements/vaadin-select)
+[API documentation ↗](https://vaadin.com/components/vaadin-select/html-api)
 
-
-[&lt;vaadin-select&gt;](https://vaadin.com/components/vaadin-select) is a Web Component similar to a native browser select element, part of the [Vaadin components](https://vaadin.com/components).
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-select)](https://www.npmjs.com/package/@vaadin/vaadin-select)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-select)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-select)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 <!--
 ```

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-select",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-select",
-  "version": "2.3.0",
+  "version": "2.4.2",
   "main": "vaadin-select.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,6 +25,8 @@
     "theme"
   ],
   "resolutions": {
+    "es-abstract": "1.17.6",
+    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -36,7 +38,7 @@
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@vaadin/vaadin-control-state-mixin": "^2.2.1",
     "@vaadin/vaadin-themable-mixin": "^1.6.1",
-    "@vaadin/vaadin-text-field": "^2.7.0",
+    "@vaadin/vaadin-text-field": "^2.8.0",
     "@vaadin/vaadin-list-box": "^1.4.0",
     "@vaadin/vaadin-list-mixin": "^2.5.0",
     "@vaadin/vaadin-item": "^2.3.0",
@@ -46,9 +48,9 @@
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
-  "devDependencies": {
+  "generate-typings": "gen-typescript-declarations --outDir . --verify"
+},
+"devDependencies": {
     "@polymer/iron-test-helpers": "^3.0.0",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-form": "^3.0.0",

package/src/vaadin-select.d.ts

@@ -192,6 +192,12 @@ declare class SelectElement extends
    */
   placeholder: string|null|undefined;
 
+  /**
+   * String used for the helper text.
+   * @attr {string} helper-text
+   */
+  helperText: string|null|undefined;
+
   /**
    * When present, it specifies that the element is read-only.
    */

package/src/vaadin-select.js

@@ -161,8 +161,9 @@ class SelectElement extends
       }
     </style>
 
-    <vaadin-select-text-field placeholder="[[placeholder]]" label="[[label]]" required="[[required]]" invalid="[[invalid]]" error-message="[[errorMessage]]" readonly\$="[[readonly]]" theme\$="[[theme]]">
+    <vaadin-select-text-field placeholder="[[placeholder]]" label="[[label]]" required="[[required]]" invalid="[[invalid]]" error-message="[[errorMessage]]" readonly\$="[[readonly]]" helper-text="[[helperText]]" theme\$="[[theme]]">
       <slot name="prefix" slot="prefix"></slot>
+      <slot name="helper" slot="helper">[[helperText]]</slot>
       <div part="value"></div>
       <div part="toggle-button" slot="suffix" role="button" aria-haspopup="listbox" aria-label="Toggle"></div>
     </vaadin-select-text-field>
@@ -177,7 +178,7 @@ class SelectElement extends
   }
 
   static get version() {
-    return '2.3.0';
+    return '2.4.2';
   }
 
   static get properties() {
@@ -282,6 +283,15 @@ class SelectElement extends
         type: String
       },
 
+      /**
+       * String used for the helper text.
+       * @attr {string} helper-text
+       */
+      helperText: {
+        type: String,
+        value: ''
+      },
+
       /**
        * When present, it specifies that the element is read-only.
        * @type {boolean}
@@ -354,7 +364,12 @@ class SelectElement extends
     this._nativeInput.setAttribute('tabindex', -1);
     this._nativeInput.style.pointerEvents = 'none';
 
-    this.focusElement.addEventListener('click', e => this.opened = !this.readonly);
+    this.focusElement.addEventListener('click', (e) => {
+      const isHelperClick = Array.from(e.composedPath()).some((node) => {
+        return node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'helper';
+      });
+      this.opened = !this.readonly && !isHelperClick;
+    });
     this.focusElement.addEventListener('keydown', e => this._onKeyDown(e));
 
     this._observer = new FlattenedNodesObserver(this, info => this._setTemplateFromNodes(info.addedNodes));
@@ -547,13 +562,9 @@ class SelectElement extends
       this._setPosition();
       window.addEventListener('scroll', this._boundSetPosition, true);
     } else if (wasOpened) {
-      if (this._phone) {
-        this._setFocused(false);
-      } else {
-        this.focusElement.focus();
-        if (this._openedWithFocusRing) {
-          this.focusElement.setAttribute('focus-ring', '');
-        }
+      this.focusElement.focus();
+      if (this._openedWithFocusRing) {
+        this.focusElement.setAttribute('focus-ring', '');
       }
       this.validate();
       window.removeEventListener('scroll', this._boundSetPosition, true);