Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-select

Package Overview
Dependencies
Maintainers
16
Versions
259
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-select - npm Package Compare versions

Comparing version 2.4.0 to 3.0.0-alpha1

src/interfaces.d.ts

99

package.json
{
"name": "@vaadin/vaadin-select",
"version": "3.0.0-alpha1",
"description": "vaadin-select",
"main": "vaadin-select.js",
"module": "vaadin-select.js",
"repository": "vaadin/vaadin-select",
"keywords": [

@@ -10,7 +15,2 @@ "Vaadin",

],
"repository": "vaadin/vaadin-select",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-select",
"version": "2.4.0",
"main": "vaadin-select.js",
"author": "Vaadin Ltd",

@@ -21,44 +21,81 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"@types",
"src",
"theme"
],
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"check-version": "magi check-version",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"lint": "npm run lint:js && npm run lint:css && npm run lint:types",
"lint:js": "eslint src theme test",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:types": "tsc",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@polymer/iron-media-query": "^3.0.0",
"@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.8.0",
"@vaadin/vaadin-list-box": "^1.4.0",
"@polymer/polymer": "^3.2.0",
"@vaadin/vaadin-control-state-mixin": "^2.2.4",
"@vaadin/vaadin-element-mixin": "^2.4.2",
"@vaadin/vaadin-item": "^3.0.0-alpha1",
"@vaadin/vaadin-list-box": "^2.0.0-alpha1",
"@vaadin/vaadin-list-mixin": "^2.5.0",
"@vaadin/vaadin-item": "^2.3.0",
"@vaadin/vaadin-overlay": "^3.5.0",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-element-mixin": "^2.4.1"
"@vaadin/vaadin-overlay": "^3.5.1",
"@vaadin/vaadin-text-field": "^3.0.0-alpha1",
"@vaadin/vaadin-themable-mixin": "^1.6.2"
},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.0",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-test-helpers": "^3.0.0",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-form": "^3.0.0",
"@polymer/iron-icon": "^3.0.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@vaadin/vaadin-demo-helpers": "^3.1.0",
"@vaadin/vaadin-button": "^2.4.0",
"@vaadin/vaadin-icons": "^4.3.1"
"@rollup/plugin-node-resolve": "^11.0.0",
"@web/dev-server": "^0.0.19",
"@web/test-runner": "^0.9.7",
"@web/test-runner-saucelabs": "0.1.1",
"eslint": "^7.13.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.1.2",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.0",
"stylelint": "^13.7.2",
"stylelint-config-vaadin": "^0.2.6",
"typescript": "^4.0.5"
}
}

84

README.md

@@ -1,16 +0,6 @@

[![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)
[![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)
# <vaadin-select>
[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)

@@ -20,13 +10,9 @@

<!--
```
<custom-element-demo height="425">
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-select.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-select)](https://www.npmjs.com/package/@vaadin/vaadin-select)
[![Build Status](https://github.com/vaadin/vaadin-select/workflows/tests/badge.svg)](https://github.com/vaadin/vaadin-select/actions)
[![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)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-select.svg)](https://vaadin.com/directory/component/vaadinvaadin-select)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
```html

@@ -59,27 +45,5 @@ <vaadin-select></vaadin-select>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.
### Polymer 2 and HTML Imports Compatible Version
Install `vaadin-select`:
```sh
bower i vaadin/vaadin-select --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-select/vaadin-select.html">
```
### Polymer 3 and ES Modules Compatible Version
Install `vaadin-select`:
```sh
npm i @vaadin/vaadin-select --save

@@ -104,37 +68,41 @@ ```

`theme/lumo/vaadin-select.html`
`theme/lumo/vaadin-select.js`
- The component with the Material theme:
- `theme/material/vaadin-select.html`
- `theme/material/vaadin-select.js`
- Alias for `theme/lumo/vaadin-select.html`:
- Alias for `theme/lumo/vaadin-select.js`:
- `vaadin-select.html`
- `vaadin-select.js`
## Running demos and tests in a browser
## Running API docs and tests in a browser
1. Fork the `vaadin-select` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. When in the `vaadin-select` directory, run `npm install` and then `bower install` to install dependencies.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vaadin-select` directory, run `npm install` to install dependencies.
1. Run `npm start`, browser will automatically open the component API documentation.
1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:
- http://127.0.0.1:3000/components/vaadin-select/demo
- http://127.0.0.1:3000/components/vaadin-select/test
- http://127.0.0.1:3000/test/visual/select.html
## Running tests from the command line
1. When in the `vaadin-select` directory, run `polymer test`
1. When in the `vaadin-select` directory, run `npm test`
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Following the coding style
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.

@@ -141,0 +109,0 @@

54

src/vaadin-select-overlay.js
/**
@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/lib/elements/dom-module.js';
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
const $_documentContainer = document.createElement('template');
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
$_documentContainer.innerHTML = `<dom-module id="vaadin-select-overlay-styles" theme-for="vaadin-select-overlay">
<template>
<style>
:host {
align-items: flex-start;
justify-content: flex-start;
}
</style>
</template>
</dom-module>`;
registerStyles(
'vaadin-select-overlay',
css`
:host {
align-items: flex-start;
justify-content: flex-start;
}
`,
{ moduleId: 'vaadin-select-overlay-styles' }
);
document.head.appendChild($_documentContainer.content);
/**
* The overlay element.
*
* ### Styling
*
* See [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)
* for `<vaadin-select-overlay>` parts.
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @extends PolymerElement
*/
* The overlay element.
*
* ### Styling
*
* See [`<vaadin-overlay>` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)
* for `<vaadin-select-overlay>` parts.
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*/
class SelectOverlayElement extends OverlayElement {

@@ -40,2 +35,3 @@ static get is() {

}
customElements.define(SelectOverlayElement.is, SelectOverlayElement);

52

src/vaadin-select-text-field.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
let memoizedTemplate;
/**
* The text-field element.
*
* ### Styling
*
* See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
* for `<vaadin-select-text-field>` parts and available slots (prefix, suffix etc.)
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @extends PolymerElement
*/
* The text-field element.
*
* ### Styling
*
* See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
* for `<vaadin-select-text-field>` parts and available slots (prefix, suffix etc.)
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*/
class SelectTextFieldElement extends TextFieldElement {

@@ -26,25 +23,2 @@ static get is() {

static get template() {
// Check if text-field is using slotted input
if (super.template.content.querySelector('slot[name="input"]')) {
return super.template;
}
if (!memoizedTemplate) {
// Clone the superclass template
memoizedTemplate = super.template.cloneNode(true);
// Create a slot for the value element
const slot = document.createElement('slot');
slot.setAttribute('name', 'value');
// Insert the slot before the text-field
const input = memoizedTemplate.content.querySelector('input');
input.parentElement.replaceChild(slot, input);
slot.appendChild(input);
}
return memoizedTemplate;
}
get focusElement() {

@@ -51,0 +25,0 @@ return this.shadowRoot.querySelector('[part=input-field]');

77

src/vaadin-select.d.ts

@@ -1,30 +0,9 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-select.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import { SelectEventMap, SelectRenderer } from './interfaces';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import {ControlStateMixin} from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
/**

@@ -123,7 +102,3 @@ * `<vaadin-select>` is a Web Component for selecting values from a list of items. The content of the

*/
declare class SelectElement extends
ElementMixin(
ControlStateMixin(
ThemableMixin(
PolymerElement))) {
declare class SelectElement extends ElementMixin(ControlStateMixin(ThemableMixin(HTMLElement))) {
readonly focusElement: HTMLElement;

@@ -144,7 +119,6 @@

*/
renderer: SelectRenderer|undefined;
renderer: SelectRenderer | undefined;
/**
* The error message to display when the select value is invalid
* @attr {string} error-message
*/

@@ -156,3 +130,3 @@ errorMessage: string;

*/
label: string|null|undefined;
label: string | null | undefined;

@@ -177,3 +151,3 @@ /**

*/
required: boolean|null|undefined;
required: boolean | null | undefined;

@@ -188,3 +162,3 @@ /**

*/
name: string|null|undefined;
name: string | null | undefined;

@@ -198,9 +172,8 @@ /**

*/
placeholder: string|null|undefined;
placeholder: string | null | undefined;
/**
* String used for the helper text.
* @attr {string} helper-text
*/
helperText: string|null|undefined;
helperText: string | null | undefined;

@@ -211,7 +184,7 @@ /**

readonly: boolean;
ready(): void;
connectedCallback(): void;
disconnectedCallback(): void;
_setFocused(focused: boolean): void;
ready(): void;
/**

@@ -221,4 +194,5 @@ * Manually invoke existing renderer.

render(): void;
notifyResize(): void;
_onKeyDown(e: KeyboardEvent): void;
_onKeyDownInside(e: KeyboardEvent): void;

@@ -232,13 +206,22 @@

validate(): boolean;
addEventListener<K extends keyof SelectEventMap>(
type: K,
listener: (this: SelectElement, ev: SelectEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof SelectEventMap>(
type: K,
listener: (this: SelectElement, ev: SelectEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
"vaadin-select": SelectElement;
'vaadin-select': SelectElement;
}
}
export {SelectElement};
import {SelectRenderer} from '../@types/interfaces';
export { SelectElement };

191

src/vaadin-select.js
/**
@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/elements/custom-style.js';
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';

@@ -17,8 +16,5 @@ import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';

import './vaadin-select-text-field.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
$_documentContainer.innerHTML = `
<style>

@@ -32,7 +28,7 @@ @font-face {

</style>
</custom-style>`;
`;
document.head.appendChild($_documentContainer.content);
/**
*
* `<vaadin-select>` is a Web Component for selecting values from a list of items. The content of the

@@ -130,48 +126,59 @@ * the select can be populated in two ways: imperatively by using renderer callback function and

*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ControlStateMixin
* @mixes ThemableMixin
* @demo demo/index.html
*/
class SelectElement extends
ElementMixin(
ControlStateMixin(
ThemableMixin(
mixinBehaviors(IronResizableBehavior, PolymerElement)))) {
class SelectElement extends ElementMixin(
ControlStateMixin(ThemableMixin(mixinBehaviors(IronResizableBehavior, PolymerElement)))
) {
static get template() {
return html`
<style>
:host {
display: inline-block;
}
<style>
:host {
display: inline-block;
}
vaadin-select-text-field {
width: 100%;
min-width: 0;
}
vaadin-select-text-field {
width: 100%;
min-width: 0;
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
[part="toggle-button"] {
font-family: "vaadin-select-icons";
}
[part='toggle-button'] {
font-family: 'vaadin-select-icons';
}
[part="toggle-button"]::before {
content: "\\e900";
}
</style>
[part='toggle-button']::before {
content: '\\e900';
}
</style>
<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>
<vaadin-select-overlay opened="{{opened}}" with-backdrop="[[_phone]]" phone\$="[[_phone]]" theme\$="[[theme]]"></vaadin-select-overlay>
<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>
<vaadin-select-overlay
opened="{{opened}}"
with-backdrop="[[_phone]]"
phone$="[[_phone]]"
theme$="[[theme]]"
></vaadin-select-overlay>
<iron-media-query query="[[_phoneMediaQuery]]" query-matches="{{_phone}}"></iron-media-query>
`;
<iron-media-query query="[[_phoneMediaQuery]]" query-matches="{{_phone}}"></iron-media-query>
`;
}

@@ -184,3 +191,3 @@

static get version() {
return '2.4.0';
return '3.0.0-alpha1';
}

@@ -360,2 +367,10 @@

/** @protected */
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('iron-resize', this._boundSetPosition);
// Making sure the select is closed and removed from DOM after detaching the select.
this.opened = false;
}
/** @protected */
ready() {

@@ -372,6 +387,6 @@ super.ready();

this.focusElement.addEventListener('click', e => this.opened = !this.readonly);
this.focusElement.addEventListener('keydown', e => this._onKeyDown(e));
this.focusElement.addEventListener('click', () => (this.opened = !this.readonly));
this.focusElement.addEventListener('keydown', (e) => this._onKeyDown(e));
this._observer = new FlattenedNodesObserver(this, info => this._setTemplateFromNodes(info.addedNodes));
this._observer = new FlattenedNodesObserver(this, (info) => this._setTemplateFromNodes(info.addedNodes));
this._observer.flush();

@@ -382,3 +397,4 @@ }

_setTemplateFromNodes(nodes) {
const template = Array.from(nodes).filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate;
const template =
Array.from(nodes).filter((node) => node.localName && node.localName === 'template')[0] || this._contentTemplate;
this._overlayElement.template = this._contentTemplate = template;

@@ -440,3 +456,3 @@ this._setForwardHostProps();

if (renderer) {
overlay.setProperties({owner: this, renderer: renderer});
overlay.setProperties({ owner: this, renderer: renderer });
this.render();

@@ -452,15 +468,21 @@

_assignMenuElement() {
this._menuElement = Array.from(this._overlayElement.content.children).filter(element => element.localName !== 'style')[0];
this._menuElement = Array.from(this._overlayElement.content.children).filter(
(element) => element.localName !== 'style'
)[0];
if (this._menuElement) {
this._menuElement.addEventListener('items-changed', e => {
this._menuElement.addEventListener('items-changed', () => {
this._items = this._menuElement.items;
this._items.forEach(item => item.setAttribute('role', 'option'));
this._items.forEach((item) => item.setAttribute('role', 'option'));
});
this._menuElement.addEventListener('selected-changed', e => this._updateValueSlot());
this._menuElement.addEventListener('keydown', e => this._onKeyDownInside(e));
this._menuElement.addEventListener('click', e => {
this.__userInteraction = true;
this.opened = false;
}, true);
this._menuElement.addEventListener('selected-changed', () => this._updateValueSlot());
this._menuElement.addEventListener('keydown', (e) => this._onKeyDownInside(e));
this._menuElement.addEventListener(
'click',
() => {
this.__userInteraction = true;
this.opened = false;
},
true
);

@@ -476,23 +498,5 @@ this._menuElement.setAttribute('role', 'listbox');

get focusElement() {
return this._inputElement ||
(this._inputElement = this.shadowRoot.querySelector('vaadin-select-text-field'));
return this._inputElement || (this._inputElement = this.shadowRoot.querySelector('vaadin-select-text-field'));
}
/** @protected */
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('iron-resize', this._boundSetPosition);
// Making sure the select is closed and removed from DOM after detaching the select.
this.opened = false;
}
notifyResize() {
super.notifyResize();
if (this.positionTarget && this.opened) {
this._setPosition();
// Schedule another position update (to cover virtual keyboard opening for example)
requestAnimationFrame(this._setPosition.bind(this));
}
}
/** @private */

@@ -527,3 +531,2 @@ _requiredChanged(required) {

this.opened = true;
} else if (/[a-zA-Z0-9]/.test(e.key) && e.key.length === 1) {

@@ -590,5 +593,5 @@ const selected = this._menuElement.selected;

return Boolean(
selected.hasAttribute('label') ?
selected.getAttribute('label') :
selected.textContent.trim() || selected.children.length
selected.hasAttribute('label')
? selected.getAttribute('label')
: selected.textContent.trim() || selected.children.length
);

@@ -638,13 +641,5 @@ }

// Check if text-field is using slotted input
const slotName = this._inputElement.shadowRoot.querySelector('slot[name="input"]') ? 'input' : 'value';
// Toggle visibility of _valueElement vs fallback input with placeholder
this._valueElement.slot = hasContent ? slotName : '';
this._valueElement.slot = hasContent ? 'input' : '';
// Ensure the slot distribution to apply correct style scope for cloned item
if (hasContent && window.ShadyDOM) {
window.ShadyDOM.flush();
}
this._attachSelectedItem(selected);

@@ -656,3 +651,3 @@

if (this.__userInteraction) {
this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
this.__userInteraction = false;

@@ -705,3 +700,3 @@ }

this._overlayElement.style.removeProperty('top');
this._overlayElement.style.bottom = (viewportHeight - inputRect.bottom) + 'px';
this._overlayElement.style.bottom = viewportHeight - inputRect.bottom + 'px';
} else {

@@ -713,3 +708,3 @@ this._overlayElement.removeAttribute('bottom-aligned');

this._overlayElement.updateStyles({'--vaadin-select-text-field-width': inputRect.width + 'px'});
this._overlayElement.updateStyles({ '--vaadin-select-text-field-width': inputRect.width + 'px' });
}

@@ -716,0 +711,0 @@

212

theme/lumo/vaadin-select-styles.js

@@ -0,1 +1,2 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';

@@ -10,133 +11,128 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';

import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-select" theme-for="vaadin-select">
<template>
<style include="lumo-field-button">
:host {
outline: none;
-webkit-tap-highlight-color: transparent;
}
registerStyles(
'vaadin-select',
css`
:host {
outline: none;
-webkit-tap-highlight-color: transparent;
}
[selected] {
padding-left: 0;
padding-right: 0;
flex: auto;
}
[selected] {
padding-left: 0;
padding-right: 0;
flex: auto;
}
:host([theme~="small"]) [selected] {
padding: 0;
min-height: var(--lumo-size-s);
}
:host([theme~='small']) [selected] {
padding: 0;
min-height: var(--lumo-size-s);
}
:host([theme~="align-left"]) [selected] {
text-align: left;
}
:host([theme~='align-left']) [selected] {
text-align: left;
}
:host([theme~="align-right"]) [selected] {
text-align: right;
}
:host([theme~='align-right']) [selected] {
text-align: right;
}
:host([theme~="align-center"]) [selected] {
text-align: center;
}
:host([theme~='align-center']) [selected] {
text-align: center;
}
[part="toggle-button"]::before {
content: var(--lumo-icons-dropdown);
}
[part='toggle-button']::before {
content: var(--lumo-icons-dropdown);
}
/* Highlight the toggle button when hovering over the entire component */
:host(:hover:not([readonly]):not([disabled])) [part="toggle-button"] {
color: var(--lumo-contrast-80pct);
}
</style>
</template>
</dom-module><dom-module id="lumo-select-text-field" theme-for="vaadin-select-text-field">
<template>
<style>
:host([theme~="align-center"]) ::slotted([part~="value"]) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
}
/* Highlight the toggle button when hovering over the entire component */
:host(:hover:not([readonly]):not([disabled])) [part='toggle-button'] {
color: var(--lumo-contrast-80pct);
}
`,
{ include: ['lumo-field-button'], moduleId: 'lumo-select' }
);
:host([theme~="align-center"]) ::slotted([part~="value"]) {
--_lumo-text-field-overflow-mask-image: none;
}
registerStyles(
'vaadin-select-text-field',
css`
:host([theme~='align-center']) ::slotted([part~='value']) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
}
:host([theme~="align-right"]) ::slotted([part~="value"]) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
}
:host([theme~='align-center']) ::slotted([part~='value']) {
--_lumo-text-field-overflow-mask-image: none;
}
[part="input-field"] {
cursor: default;
}
:host([theme~='align-right']) ::slotted([part~='value']) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
}
[part="input-field"] ::slotted([part="value"]) {
display: flex;
}
[part='input-field'] {
cursor: default;
}
/* ShadyCSS limitation workaround */
[part="input-field"] ::slotted([part="value"]) [selected]::before {
display: none;
}
[part='input-field'] ::slotted([part='value']) {
display: flex;
}
[part="input-field"]:focus {
outline: none;
}
[part='input-field']:focus {
outline: none;
}
/* RTL specific styles */
/* RTL specific styles */
:host([theme~='align-left'][dir='rtl']) ::slotted([part~='value']) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
}
:host([theme~="align-left"][dir="rtl"]) ::slotted([part~="value"]) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
}
:host([theme~='align-center'][dir='rtl']) ::slotted([part~='value']) {
--_lumo-text-field-overflow-mask-image: none;
}
:host([theme~="align-center"][dir="rtl"]) ::slotted([part~="value"]) {
--_lumo-text-field-overflow-mask-image: none;
}
:host([dir='rtl']) ::slotted([part~='value']),
:host([theme~='align-right'][dir='rtl']) ::slotted([part~='value']) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
}
`,
{ moduleId: 'lumo-select-text-field' }
);
:host([dir="rtl"]) ::slotted([part~="value"]),
:host([theme~="align-right"][dir="rtl"]) ::slotted([part~="value"]) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
}
</style>
</template>
</dom-module><dom-module id="lumo-select-overlay" theme-for="vaadin-select-overlay">
<template>
<style include="lumo-menu-overlay">
:host {
--_lumo-item-selected-icon-display: block;
}
registerStyles(
'vaadin-select-overlay',
css`
:host {
--_lumo-item-selected-icon-display: block;
}
:host([bottom-aligned]) {
justify-content: flex-end;
}
:host([bottom-aligned]) {
justify-content: flex-end;
}
[part~="overlay"] {
min-width: var(--vaadin-select-text-field-width);
}
[part~='overlay'] {
min-width: var(--vaadin-select-text-field-width);
}
/* Small viewport adjustment */
:host([phone]) {
top: 0 !important;
right: 0 !important;
bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
left: 0 !important;
align-items: stretch;
justify-content: flex-end;
}
/* Small viewport adjustment */
:host([phone]) {
top: 0 !important;
right: 0 !important;
bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
left: 0 !important;
align-items: stretch;
justify-content: flex-end;
}
:host([theme~="align-left"]) {
text-align: left;
}
:host([theme~='align-left']) {
text-align: left;
}
:host([theme~="align-right"]) {
text-align: right;
}
:host([theme~='align-right']) {
text-align: right;
}
:host([theme~="align-center"]) {
text-align: center;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
:host([theme~='align-center']) {
text-align: center;
}
`,
{ include: ['lumo-menu-overlay'], moduleId: 'lumo-select-overlay' }
);

104

theme/material/vaadin-select-styles.js

@@ -0,1 +1,2 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-item/theme/material/vaadin-item.js';

@@ -8,63 +9,62 @@ import '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';

import '@vaadin/vaadin-material-styles/mixins/field-button.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-select" theme-for="vaadin-select">
<template>
<style include="material-field-button">
:host {
display: inline-flex;
-webkit-tap-highlight-color: transparent;
}
registerStyles(
'vaadin-select',
css`
:host {
display: inline-flex;
-webkit-tap-highlight-color: transparent;
}
[part="toggle-button"]::before {
content: var(--material-icons-dropdown);
}
[part='toggle-button']::before {
content: var(--material-icons-dropdown);
}
:host([opened]) [part="toggle-button"] {
transform: rotate(180deg);
}
:host([opened]) [part='toggle-button'] {
transform: rotate(180deg);
}
/* Disabled */
:host([disabled]) {
pointer-events: none;
}
`,
{ include: ['material-field-button'], moduleId: 'material-select' }
);
:host([disabled]) {
pointer-events: none;
}
</style>
</template>
</dom-module><dom-module id="material-select-text-field" theme-for="vaadin-select-text-field">
<template>
<style>
:host {
width: 100%;
}
registerStyles(
'vaadin-select-text-field',
css`
:host {
width: 100%;
}
:host([disabled]) [part="input-field"],
[part="input-field"],
[part="value"] {
cursor: default;
}
:host([disabled]) [part='input-field'],
[part='input-field'],
[part='value'] {
cursor: default;
}
[part="input-field"]:focus {
outline: none;
}
[part='input-field']:focus {
outline: none;
}
::slotted([part="value"]) {
display: flex;
}
</style>
</template>
</dom-module><dom-module id="material-select-overlay" theme-for="vaadin-select-overlay">
<template>
<style include="material-menu-overlay">
:host([bottom-aligned]) {
justify-content: flex-end;
}
::slotted([part='value']) {
display: flex;
}
`,
{ moduleId: 'material-select-text-field' }
);
[part="overlay"] {
min-width: var(--vaadin-select-text-field-width);
}
</style>
</template>
</dom-module>`;
registerStyles(
'vaadin-select-overlay',
css`
:host([bottom-aligned]) {
justify-content: flex-end;
}
document.head.appendChild($_documentContainer.content);
[part='overlay'] {
min-width: var(--vaadin-select-text-field-width);
}
`,
{ include: ['material-menu-overlay'], moduleId: 'material-select-overlay' }
);

15

vaadin-select.d.ts

@@ -1,15 +0,2 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-select.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-select.js';
export * from './@types/interfaces';
export * from './src/interfaces';
./@types/interfaces.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc