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

@vaadin/vaadin-combo-box

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

package.json

		{
		"name": "@vaadin/vaadin-combo-box",
		"version": "22.0.0-alpha6",
		"version": "22.0.0-alpha7",
		"publishConfig": {
		"access": "public"
		},
		"description": "Web Component for displaying a list of items with filtering",
		"license": "Apache-2.0",
		"repository": {
		"type": "git",
		"url": "https://github.com/vaadin/web-components.git",
		"directory": "packages/vaadin-combo-box"
		},
		"author": "Vaadin Ltd",
		"homepage": "https://vaadin.com/components",
		"bugs": {
		"url": "https://github.com/vaadin/vaadin-combo-box/issues"
		},
		"main": "vaadin-combo-box.js",
		"repository": "vaadin/vaadin-combo-box",
		"files": [
		"src",
		"theme",
		"vaadin-*.d.ts",
		"vaadin-*.js"
		],
		"keywords": [
		@@ -14,42 +33,6 @@ "Vaadin",
		],
		"author": "Vaadin Ltd",
		"license": "Apache-2.0",
		"bugs": {
		"url": "https://github.com/vaadin/vaadin-combo-box/issues"
		},
		"homepage": "https://vaadin.com/components",
		"files": [
		"vaadin-*.d.ts",
		"vaadin-*.js",
		"src",
		"theme"
		],
		"dependencies": {
		"@polymer/iron-a11y-announcer": "^3.0.0",
		"@polymer/iron-resizable-behavior": "^3.0.0",
		"@polymer/polymer": "^3.0.0",
		"@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha6",
		"@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
		"@vaadin/vaadin-item": "^22.0.0-alpha6",
		"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
		"@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
		"@vaadin/vaadin-overlay": "^22.0.0-alpha6",
		"@vaadin/vaadin-text-field": "^22.0.0-alpha6",
		"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6",
		"@vaadin/vaadin-virtual-list": "^22.0.0-alpha6"
		"@vaadin/combo-box": "22.0.0-alpha7"
		},
		"devDependencies": {
		"@esm-bundle/chai": "^4.3.4",
		"@polymer/iron-input": "^3.0.1",
		"@polymer/paper-input": "^3.0.0",
		"@vaadin/testing-helpers": "^0.3.0",
		"@vaadin/vaadin-dialog": "^22.0.0-alpha6",
		"@vaadin/vaadin-template-renderer": "^22.0.0-alpha6",
		"lit": "^2.0.0-rc.1",
		"sinon": "^9.2.0"
		},
		"publishConfig": {
		"access": "public"
		},
		"gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
		"gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
		}

src/interfaces.d.ts

		@@ -1,71 +0,6 @@
		import { ComboBoxElement } from './vaadin-combo-box';

		export type ComboBoxDefaultItem = any;

		export interface ComboBoxItemModel<TItem> {
		index: number;
		item: TItem;
		}

		export type ComboBoxRenderer<TItem> = (
		root: HTMLElement,
		comboBox: ComboBoxElement<TItem>,
		model: ComboBoxItemModel<TItem>
		) => void;

		export type ComboBoxDataProviderCallback<TItem> = (items: Array<TItem>, size: number) => void;

		export interface ComboBoxDataProviderParams {
		page: number;
		pageSize: number;
		filter: string;
		}

		export type ComboBoxDataProvider<TItem> = (
		params: ComboBoxDataProviderParams,
		callback: ComboBoxDataProviderCallback<TItem>
		) => void;

		/**
		* Fired when the user sets a custom value.
		* @license
		* Copyright (c) 2021 Vaadin Ltd.
		* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		export type ComboBoxCustomValueSetEvent = CustomEvent<string>;

		/**
		* Fired when the `opened` property changes.
		*/
		export type ComboBoxOpenedChangedEvent = CustomEvent<{ value: boolean }>;

		/**
		* Fired when the `invalid` property changes.
		*/
		export type ComboBoxInvalidChangedEvent = CustomEvent<{ value: boolean }>;

		/**
		* Fired when the `value` property changes.
		*/
		export type ComboBoxValueChangedEvent = CustomEvent<{ value: string }>;

		/**
		* Fired when the `filter` property changes.
		*/
		export type ComboBoxFilterChangedEvent = CustomEvent<{ value: string }>;

		/**
		* Fired when the `selectedItem` property changes.
		*/
		export type ComboBoxSelectedItemChangedEvent<TItem> = CustomEvent<{ value: TItem \| null \| undefined }>;

		export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
		'custom-value-set': ComboBoxCustomValueSetEvent;

		'opened-changed': ComboBoxOpenedChangedEvent;

		'filter-changed': ComboBoxFilterChangedEvent;

		'invalid-changed': ComboBoxInvalidChangedEvent;

		'value-changed': ComboBoxValueChangedEvent;

		'selected-item-changed': ComboBoxSelectedItemChangedEvent<TItem>;
		}
		export * from '@vaadin/combo-box/src/interfaces';

109

src/vaadin-combo-box-light.d.ts

		@@ -1,100 +0,19 @@
		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin';
		/**
		* @license
		* Copyright (c) 2021 Vaadin Ltd.
		* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		import { ComboBoxDefaultItem } from '@vaadin/combo-box';
		import { ComboBoxLight } from '@vaadin/combo-box/src/vaadin-combo-box-light.js';

		import { ComboBoxMixin } from './vaadin-combo-box-mixin';
		/**
		* @deprecated Import `ComboBoxLight` from `@vaadin/combo-box/vaadin-combo-box-light` instead.
		*/
		export type ComboBoxLightElement<TItem = ComboBoxDefaultItem> = ComboBoxLight<TItem>;

		import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin';

		import { ComboBoxDefaultItem, ComboBoxEventMap } from './interfaces';

		/**
		* `<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing
		* only the dropdown functionality and leaving the input field definition to the user.
		*
		* The element has the same API as `<vaadin-combo-box>`.
		*
		* To create a custom input field, you need to add a child element which has a two-way
		* data-bindable property representing the input value. The property name is expected
		* to be `value` by default. See the example below for a simplest possible example
		* using a `<vaadin-text-field>` element.
		*
		* ```html
		* <vaadin-combo-box-light>
		* <vaadin-text-field>
		* </vaadin-text-field>
		* </vaadin-combo-box-light>
		* ```
		*
		* If you are using other custom input fields like `<iron-input>`, you
		* need to define the name of the bindable property with the `attrForValue` attribute.
		*
		* ```html
		* <vaadin-combo-box-light attr-for-value="bind-value">
		* <iron-input>
		* <input>
		* </iron-input>
		* </vaadin-combo-box-light>
		* ```
		*
		* In the next example you can see how to create a custom input field based
		* on a `<paper-input>` decorated with a custom `<iron-icon>` and
		* two `<paper-button>`s to act as the clear and toggle controls.
		*
		* ```html
		* <vaadin-combo-box-light>
		* <paper-input label="Elements" class="input">
		* <iron-icon icon="toll" slot="prefix"></iron-icon>
		* <paper-button slot="suffix" class="clear-button">Clear</paper-button>
		* <paper-button slot="suffix" class="toggle-button">Toggle</paper-button>
		* </paper-input>
		* </vaadin-combo-box-light>
		* ```
		*
		* @fires {Event} change - Fired when the user commits a value change.
		* @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
		* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
		* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
		* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
		* @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
		* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
		* @deprecated Import `ComboBoxLight` from `@vaadin/combo-box/vaadin-combo-box-light` instead.
		*/
		declare class ComboBoxLightElement<TItem = ComboBoxDefaultItem> extends HTMLElement {
		readonly _propertyForValue: string;
		export const ComboBoxLightElement: typeof ComboBoxLight;

		_inputElementValue: string;

		readonly focused: boolean;

		/**
		* Name of the two-way data-bindable property representing the
		* value of the custom input field.
		* @attr {string} attr-for-value
		*/
		attrForValue: string;

		readonly inputElement: Element \| undefined;

		addEventListener<K extends keyof ComboBoxEventMap<TItem>>(
		type: K,
		listener: (this: ComboBoxLightElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
		options?: boolean \| AddEventListenerOptions
		): void;

		removeEventListener<K extends keyof ComboBoxEventMap<TItem>>(
		type: K,
		listener: (this: ComboBoxLightElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
		options?: boolean \| EventListenerOptions
		): void;
		}

		interface ComboBoxLightElement<TItem = ComboBoxDefaultItem>
		extends ComboBoxDataProviderMixin<TItem>,
		ComboBoxMixin<TItem>,
		ThemableMixin {}

		declare global {
		interface HTMLElementTagNameMap {
		'vaadin-combo-box-light': ComboBoxLightElement;
		}
		}

		export { ComboBoxLightElement };
		export * from '@vaadin/combo-box/src/vaadin-combo-box-light.js';

201

src/vaadin-combo-box-light.js

		@@ -6,202 +6,9 @@ /**
		*/
		import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
		import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
		import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
		import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
		import './vaadin-combo-box-dropdown.js';
		import { ComboBoxLight } from '@vaadin/combo-box/src/vaadin-combo-box-light.js';

		/**
		* `<vaadin-combo-box-light>` is a customizable version of the `<vaadin-combo-box>` providing
		* only the dropdown functionality and leaving the input field definition to the user.
		*
		* The element has the same API as `<vaadin-combo-box>`.
		*
		* To create a custom input field, you need to add a child element which has a two-way
		* data-bindable property representing the input value. The property name is expected
		* to be `value` by default. See the example below for a simplest possible example
		* using a `<vaadin-text-field>` element.
		*
		* ```html
		* <vaadin-combo-box-light>
		* <vaadin-text-field>
		* </vaadin-text-field>
		* </vaadin-combo-box-light>
		* ```
		*
		* If you are using other custom input fields like `<iron-input>`, you
		* need to define the name of the bindable property with the `attrForValue` attribute.
		*
		* ```html
		* <vaadin-combo-box-light attr-for-value="bind-value">
		* <iron-input>
		* <input>
		* </iron-input>
		* </vaadin-combo-box-light>
		* ```
		*
		* In the next example you can see how to create a custom input field based
		* on a `<paper-input>` decorated with a custom `<iron-icon>` and
		* two `<paper-button>`s to act as the clear and toggle controls.
		*
		* ```html
		* <vaadin-combo-box-light>
		* <paper-input label="Elements" class="input">
		* <iron-icon icon="toll" slot="prefix"></iron-icon>
		* <paper-button slot="suffix" class="clear-button">Clear</paper-button>
		* <paper-button slot="suffix" class="toggle-button">Toggle</paper-button>
		* </paper-input>
		* </vaadin-combo-box-light>
		* ```
		*
		* @fires {Event} change - Fired when the user commits a value change.
		* @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
		* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
		* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
		* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
		* @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
		* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
		*
		* @extends HTMLElement
		* @mixes ComboBoxDataProviderMixin
		* @mixes ComboBoxMixin
		* @mixes ThemableMixin
		* @deprecated Import `ComboBoxLight` from `@vaadin/combo-box/vaadin-combo-box-light` instead.
		*/
		class ComboBoxLightElement extends ThemableMixin(ComboBoxDataProviderMixin(ComboBoxMixin(PolymerElement))) {
		static get template() {
		return html`
		<style>
		:host([opened]) {
		pointer-events: auto;
		}
		</style>
		export const ComboBoxLightElement = ComboBoxLight;

		<slot></slot>

		<vaadin-combo-box-dropdown
		id="dropdown"
		opened="[[opened]]"
		position-target="[[inputElement]]"
		renderer="[[renderer]]"
		_focused-index="[[_focusedIndex]]"
		_item-id-path="[[itemIdPath]]"
		_item-label-path="[[itemLabelPath]]"
		loading="[[loading]]"
		theme="[[theme]]"
		></vaadin-combo-box-dropdown>
		`;
		}

		static get is() {
		return 'vaadin-combo-box-light';
		}

		static get properties() {
		return {
		/**
		* Name of the two-way data-bindable property representing the
		* value of the custom input field.
		* @attr {string} attr-for-value
		* @type {string}
		*/
		attrForValue: {
		type: String,
		value: 'value'
		},

		/**
		* @type {!Element \| undefined}
		*/
		inputElement: {
		type: Element,
		readOnly: true
		}
		};
		}

		constructor() {
		super();
		this._boundInputValueChanged = this._inputValueChanged.bind(this);
		this.__boundInputValueCommitted = this.__inputValueCommitted.bind(this);
		}

		/** @protected */
		ready() {
		super.ready();
		this._toggleElement = this.querySelector('.toggle-button');
		this._clearElement = this.querySelector('.clear-button');

		if (this._clearElement) {
		this._clearElement.addEventListener('mousedown', (e) => {
		e.preventDefault(); // Prevent native focus changes
		// _focusableElement is needed for paper-input
		(this.inputElement._focusableElement \|\| this.inputElement).focus();
		});
		}
		}

		/**
		* @return {boolean}
		*/
		get focused() {
		return this.getRootNode().activeElement === this.inputElement;
		}

		/** @protected */
		connectedCallback() {
		super.connectedCallback();
		const cssSelector = 'vaadin-text-field,iron-input,paper-input,.paper-input-input,.input';
		this._setInputElement(this.querySelector(cssSelector));
		this._revertInputValue();
		this.inputElement.addEventListener('input', this._boundInputValueChanged);
		this.inputElement.addEventListener('change', this.__boundInputValueCommitted);
		this._preventInputBlur();
		}

		/** @protected */
		disconnectedCallback() {
		super.disconnectedCallback();
		this.inputElement.removeEventListener('input', this._boundInputValueChanged);
		this.inputElement.removeEventListener('change', this.__boundInputValueCommitted);
		this._restoreInputBlur();
		}

		/** @private */
		__inputValueCommitted(e) {
		// Detect if the input was cleared (by clicking the clear button on a vaadin-text-field)
		// and propagate the value change to combo box value immediately.
		if (e.__fromClearButton) {
		this._clear();
		}
		}

		/**
		* @return {string}
		* @protected
		*/
		get _propertyForValue() {
		return dashToCamelCase(this.attrForValue);
		}

		/**
		* @return {string}
		* @protected
		*/
		get _inputElementValue() {
		return this.inputElement && this.inputElement[this._propertyForValue];
		}

		/**
		* @param {string} value
		* @protected
		*/
		set _inputElementValue(value) {
		if (this.inputElement) {
		this.inputElement[this._propertyForValue] = value;
		}
		}
		}

		customElements.define(ComboBoxLightElement.is, ComboBoxLightElement);

		export { ComboBoxLightElement };
		export * from '@vaadin/combo-box/src/vaadin-combo-box-light.js';

258

src/vaadin-combo-box.d.ts

		@@ -1,249 +0,19 @@
		import { TextFieldElement } from '@vaadin/vaadin-text-field/vaadin-text-field';
		/**
		* @license
		* Copyright (c) 2021 Vaadin Ltd.
		* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		import { ComboBoxDefaultItem } from '@vaadin/combo-box';
		import { ComboBox } from '@vaadin/combo-box/src/vaadin-combo-box.js';

		import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin';
		/**
		* @deprecated Import `ComboBox` from `@vaadin/combo-box` instead.
		*/
		export type ComboBoxElement<TItem = ComboBoxDefaultItem> = ComboBox<TItem>;

		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin';

		import { ComboBoxMixin } from './vaadin-combo-box-mixin';

		import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin';

		import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin';

		import { ComboBoxDefaultItem, ComboBoxEventMap } from './interfaces';

		/**
		* `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
		* input field for filtering the list of items. If you want to replace the default
		* input field with a custom implementation, you should use the
		* [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
		*
		* Items in the dropdown list must be provided as a list of `String` values.
		* Defining the items is done using the `items` property, which can be assigned
		* with data-binding, using an attribute or directly with the JavaScript property.
		*
		* ```html
		* <vaadin-combo-box
		* label="Fruit"
		* items="[[data]]">
		* </vaadin-combo-box>
		* ```
		*
		* ```js
		* combobox.items = ['apple', 'orange', 'banana'];
		* ```
		*
		* When the selected `value` is changed, a `value-changed` event is triggered.
		*
		* ### Item rendering
		*
		* `<vaadin-combo-box>` supports using custom renderer callback function for defining the
		* content of `<vaadin-combo-box-item>`.
		*
		* The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
		* Generate DOM content by using `model` object properties if needed, append it to the `root`
		* element and control the state of the host element by accessing `comboBox`. Before generating new
		* content, users are able to check if there is already content in `root` for reusing it.
		*
		* ```html
		* <vaadin-combo-box id="combo-box"></vaadin-combo-box>
		* ```
		* ```js
		* const comboBox = document.querySelector('#combo-box');
		* comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
		* comboBox.renderer = function(root, comboBox, model) {
		* root.innerHTML = model.index + ': ' +
		* model.item.label + ' ' +
		* '<b>' + model.item.value + '</b>';
		* };
		* ```
		*
		* Renderer is called on the opening of the combo-box and each time the related model is updated.
		* DOM generated during the renderer call can be reused
		* in the next renderer call and will be provided with the `root` argument.
		* On first call it will be empty.
		*
		* The following properties are available in the `model` argument:
		*
		* Property name \| Type \| Description
		* --------------\|------\|------------
		* `index`\| Number \| Index of the item in the `items` array
		* `item` \| String or Object \| The item reference
		* `selected` \| Boolean \| True when item is selected
		* `focused` \| Boolean \| True when item is focused
		*
		* ### Lazy Loading with Function Data Provider
		*
		* In addition to assigning an array to the items property, you can alternatively
		* provide the `<vaadin-combo-box>` data through the
		* [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
		* The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
		* to be displayed.
		*
		* See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
		* the API reference below for the detailed data provider arguments description,
		* and the “Lazy Loading“ example on “Basics” page in the demos.
		*
		* __Note that when using function data providers, the total number of items
		* needs to be set manually. The total number of items can be returned
		* in the second argument of the data provider callback:__
		*
		* ```javascript
		* comboBox.dataProvider = function(params, callback) {
		* var url = 'https://api.example/data' +
		* '?page=' + params.page + // the requested page index
		* '&per_page=' + params.pageSize; // number of items on the page
		* var xhr = new XMLHttpRequest();
		* xhr.onload = function() {
		* var response = JSON.parse(xhr.responseText);
		* callback(
		* response.employees, // requested page of items
		* response.totalSize // total number of items
		* );
		* };
		* xhr.open('GET', url, true);
		* xhr.send();
		* };
		* ```
		*
		* ### Styling
		*
		* The following custom properties are available for styling:
		*
		* Custom property \| Description \| Default
		* ----------------\|-------------\|-------------
		* `--vaadin-combo-box-overlay-max-height` \| Property that determines the max height of overlay \| `65vh`
		*
		* The following shadow DOM parts are available for styling:
		*
		* Part name \| Description
		* ----------------\|----------------
		* `text-field` \| The text field
		* `toggle-button` \| The toggle button
		*
		* The following state attributes are available for styling:
		*
		* Attribute \| Description \| Part name
		* -------------\|-------------\|------------
		* `opened` \| Set when the combo box dropdown is open \| :host
		* `disabled` \| Set to a disabled combo box \| :host
		* `readonly` \| Set to a read only combo box \| :host
		* `has-value` \| Set when the element has a value \| :host
		* `invalid` \| Set when the element is invalid \| :host
		* `focused` \| Set when the element is focused \| :host
		* `focus-ring` \| Set when the element is keyboard focused \| :host
		* `loading` \| Set when new items are expected \| :host
		*
		* ### Internal components
		*
		* In addition to `<vaadin-combo-box>` itself, the following internal
		* components are themable:
		*
		* - `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
		* - [`<vaadin-text-field>`](#/elements/vaadin-text-field)
		* - `<vaadin-combo-box-item>`
		*
		* Note: the `theme` attribute value set on `<vaadin-combo-box>` is
		* propagated to the internal components listed above.
		*
		* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
		*
		* @fires {Event} change - Fired when the user commits a value change.
		* @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
		* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
		* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
		* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
		* @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
		* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
		* @deprecated Import `ComboBox` from `@vaadin/combo-box` instead.
		*/
		declare class ComboBoxElement<TItem = ComboBoxDefaultItem> extends HTMLElement {
		/**
		* Focusable element used by vaadin-control-state-mixin
		*/
		readonly focusElement: HTMLElement;
		export const ComboBoxElement: typeof ComboBox;

		autofocus: boolean;

		/**
		* Set to true to disable this input.
		*/
		disabled: boolean;

		/**
		* Set to true to prevent the user from picking a value or typing in the input.
		*/
		readonly: boolean;

		readonly inputElement: TextFieldElement \| undefined;

		/**
		* The label for this element.
		*/
		label: string \| null \| undefined;

		/**
		* Set to true to mark the input as required.
		*/
		required: boolean;

		/**
		* Set to true to prevent the user from entering invalid input.
		* @attr {boolean} prevent-invalid-input
		*/
		preventInvalidInput: boolean \| null \| undefined;

		/**
		* A pattern to validate the `input` with.
		*/
		pattern: string \| null \| undefined;

		/**
		* The error message to display when the input is invalid.
		* @attr {string} error-message
		*/
		errorMessage: string \| null \| undefined;

		/**
		* A placeholder string in addition to the label.
		*/
		placeholder: string;

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

		/**
		* Set to true to display the clear icon which clears the input.
		* @attr {boolean} clear-button-visible
		*/
		clearButtonVisible: boolean;

		addEventListener<K extends keyof ComboBoxEventMap<TItem>>(
		type: K,
		listener: (this: ComboBoxElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
		options?: boolean \| AddEventListenerOptions
		): void;

		removeEventListener<K extends keyof ComboBoxEventMap<TItem>>(
		type: K,
		listener: (this: ComboBoxElement<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
		options?: boolean \| EventListenerOptions
		): void;
		}

		interface ComboBoxElement<TItem = ComboBoxDefaultItem>
		extends ElementMixin,
		ControlStateMixin,
		ComboBoxDataProviderMixin<TItem>,
		ComboBoxMixin<TItem>,
		ThemableMixin {}

		declare global {
		interface HTMLElementTagNameMap {
		'vaadin-combo-box': ComboBoxElement;
		}
		}

		export { ComboBoxElement };
		export * from '@vaadin/combo-box/src/vaadin-combo-box.js';

414

src/vaadin-combo-box.js

		@@ -6,415 +6,9 @@ /**
		*/
		import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
		import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
		import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
		import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
		import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
		import './vaadin-combo-box-dropdown.js';
		import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
		import { ComboBox } from '@vaadin/combo-box/src/vaadin-combo-box.js';

		/**
		* `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
		* input field for filtering the list of items. If you want to replace the default
		* input field with a custom implementation, you should use the
		* [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
		*
		* Items in the dropdown list must be provided as a list of `String` values.
		* Defining the items is done using the `items` property, which can be assigned
		* with data-binding, using an attribute or directly with the JavaScript property.
		*
		* ```html
		* <vaadin-combo-box
		* label="Fruit"
		* items="[[data]]">
		* </vaadin-combo-box>
		* ```
		*
		* ```js
		* combobox.items = ['apple', 'orange', 'banana'];
		* ```
		*
		* When the selected `value` is changed, a `value-changed` event is triggered.
		*
		* ### Item rendering
		*
		* `<vaadin-combo-box>` supports using custom renderer callback function for defining the
		* content of `<vaadin-combo-box-item>`.
		*
		* The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
		* Generate DOM content by using `model` object properties if needed, append it to the `root`
		* element and control the state of the host element by accessing `comboBox`. Before generating new
		* content, users are able to check if there is already content in `root` for reusing it.
		*
		* ```html
		* <vaadin-combo-box id="combo-box"></vaadin-combo-box>
		* ```
		* ```js
		* const comboBox = document.querySelector('#combo-box');
		* comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
		* comboBox.renderer = function(root, comboBox, model) {
		* root.innerHTML = model.index + ': ' +
		* model.item.label + ' ' +
		* '<b>' + model.item.value + '</b>';
		* };
		* ```
		*
		* Renderer is called on the opening of the combo-box and each time the related model is updated.
		* DOM generated during the renderer call can be reused
		* in the next renderer call and will be provided with the `root` argument.
		* On first call it will be empty.
		*
		* The following properties are available in the `model` argument:
		*
		* Property name \| Type \| Description
		* --------------\|------\|------------
		* `index`\| Number \| Index of the item in the `items` array
		* `item` \| String or Object \| The item reference
		* `selected` \| Boolean \| True when item is selected
		* `focused` \| Boolean \| True when item is focused
		*
		* ### Lazy Loading with Function Data Provider
		*
		* In addition to assigning an array to the items property, you can alternatively
		* provide the `<vaadin-combo-box>` data through the
		* [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
		* The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
		* to be displayed.
		*
		* See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
		* the API reference below for the detailed data provider arguments description,
		* and the “Lazy Loading“ example on “Basics” page in the demos.
		*
		* __Note that when using function data providers, the total number of items
		* needs to be set manually. The total number of items can be returned
		* in the second argument of the data provider callback:__
		*
		* ```javascript
		* comboBox.dataProvider = function(params, callback) {
		* var url = 'https://api.example/data' +
		* '?page=' + params.page + // the requested page index
		* '&per_page=' + params.pageSize; // number of items on the page
		* var xhr = new XMLHttpRequest();
		* xhr.onload = function() {
		* var response = JSON.parse(xhr.responseText);
		* callback(
		* response.employees, // requested page of items
		* response.totalSize // total number of items
		* );
		* };
		* xhr.open('GET', url, true);
		* xhr.send();
		* };
		* ```
		*
		* ### Styling
		*
		* The following custom properties are available for styling:
		*
		* Custom property \| Description \| Default
		* ----------------\|-------------\|-------------
		* `--vaadin-combo-box-overlay-max-height` \| Property that determines the max height of overlay \| `65vh`
		*
		* The following shadow DOM parts are available for styling:
		*
		* Part name \| Description
		* ----------------\|----------------
		* `text-field` \| The text field
		* `toggle-button` \| The toggle button
		*
		* The following state attributes are available for styling:
		*
		* Attribute \| Description \| Part name
		* -------------\|-------------\|------------
		* `opened` \| Set when the combo box dropdown is open \| :host
		* `disabled` \| Set to a disabled combo box \| :host
		* `readonly` \| Set to a read only combo box \| :host
		* `has-value` \| Set when the element has a value \| :host
		* `invalid` \| Set when the element is invalid \| :host
		* `focused` \| Set when the element is focused \| :host
		* `focus-ring` \| Set when the element is keyboard focused \| :host
		* `loading` \| Set when new items are expected \| :host
		*
		* ### Internal components
		*
		* In addition to `<vaadin-combo-box>` itself, the following internal
		* components are themable:
		*
		* - `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
		* - [`<vaadin-text-field>`](#/elements/vaadin-text-field)
		* - `<vaadin-combo-box-item>`
		*
		* Note: the `theme` attribute value set on `<vaadin-combo-box>` is
		* propagated to the internal components listed above.
		*
		* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
		*
		* @fires {Event} change - Fired when the user commits a value change.
		* @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
		* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
		* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
		* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
		* @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
		* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
		*
		* @extends HTMLElement
		* @mixes ElementMixin
		* @mixes ControlStateMixin
		* @mixes ComboBoxDataProviderMixin
		* @mixes ComboBoxMixin
		* @mixes ThemableMixin
		* @deprecated Import `ComboBox` from `@vaadin/combo-box` instead.
		*/
		class ComboBoxElement extends ElementMixin(
		ControlStateMixin(ThemableMixin(ComboBoxDataProviderMixin(ComboBoxMixin(PolymerElement))))
		) {
		static get template() {
		return html`
		<style>
		:host {
		display: inline-block;
		}
		export const ComboBoxElement = ComboBox;

		:host([hidden]) {
		display: none !important;
		}

		:host([opened]) {
		pointer-events: auto;
		}

		[part='text-field'] {
		width: 100%;
		min-width: 0;
		}
		</style>

		<vaadin-text-field
		part="text-field"
		id="input"
		pattern="[[pattern]]"
		prevent-invalid-input="[[preventInvalidInput]]"
		value="{{_inputElementValue}}"
		autocomplete="off"
		invalid="[[invalid]]"
		label="[[label]]"
		name="[[name]]"
		placeholder="[[placeholder]]"
		required="[[required]]"
		disabled="[[disabled]]"
		readonly="[[readonly]]"
		helper-text="[[helperText]]"
		error-message="[[errorMessage]]"
		autocapitalize="none"
		autofocus="[[autofocus]]"
		on-change="_stopPropagation"
		on-input="_inputValueChanged"
		clear-button-visible="[[clearButtonVisible]]"
		theme$="[[theme]]"
		>
		<slot name="prefix" slot="prefix"></slot>
		<slot name="helper" slot="helper">[[helperText]]</slot>

		<div part="toggle-button" id="toggleButton" slot="suffix" role="button" aria-label="Toggle"></div>
		</vaadin-text-field>

		<vaadin-combo-box-dropdown
		id="dropdown"
		opened="[[opened]]"
		renderer="[[renderer]]"
		position-target="[[_getPositionTarget()]]"
		_focused-index="[[_focusedIndex]]"
		_item-id-path="[[itemIdPath]]"
		_item-label-path="[[itemLabelPath]]"
		loading="[[loading]]"
		theme="[[theme]]"
		></vaadin-combo-box-dropdown>
		`;
		}

		constructor() {
		super();
		/**
		* @property
		*/
		this.theme;
		}

		static get is() {
		return 'vaadin-combo-box';
		}

		static get properties() {
		return {
		/**
		* The label for this element.
		*/
		label: {
		type: String,
		reflectToAttribute: true
		},

		/**
		* Set to true to mark the input as required.
		* @type {boolean}
		*/
		required: {
		type: Boolean,
		value: false
		},

		/**
		* Set to true to disable this input.
		* @type {boolean}
		*/
		disabled: {
		type: Boolean,
		value: false
		},

		/**
		* Set to true to prevent the user from entering invalid input.
		* @attr {boolean} prevent-invalid-input
		*/
		preventInvalidInput: {
		type: Boolean
		},

		/**
		* A pattern to validate the `input` with.
		*/
		pattern: {
		type: String
		},

		/**
		* The error message to display when the input is invalid.
		* @attr {string} error-message
		*/
		errorMessage: {
		type: String
		},

		/** @type {boolean} */
		autofocus: {
		type: Boolean
		},

		/**
		* A placeholder string in addition to the label.
		* @type {string}
		*/
		placeholder: {
		type: String,
		value: ''
		},

		/**
		* String used for the helper text.
		* @attr {string} helper-text
		*/
		helperText: {
		type: String,
		value: ''
		},

		/**
		* Set to true to prevent the user from picking a value or typing in the input.
		* @type {boolean}
		*/
		readonly: {
		type: Boolean,
		value: false,
		reflectToAttribute: true
		},

		/**
		* Set to true to display the clear icon which clears the input.
		* @attr {boolean} clear-button-visible
		* @type {boolean}
		*/
		clearButtonVisible: {
		type: Boolean,
		value: false
		}
		};
		}

		static get observers() {
		return ['_updateAriaExpanded(opened)'];
		}

		/** @protected */
		ready() {
		super.ready();

		this._nativeInput = this.inputElement.focusElement;
		this._toggleElement = this.$.toggleButton;
		this._clearElement = this.inputElement.shadowRoot.querySelector('[part="clear-button"]');

		// Stop propagation of Esc in capturing phase so that
		// vaadin-text-field will not handle Esc as a shortcut
		// to clear the value.
		// We need to set this listener for "this.inputElement"
		// instead of just "this", otherwise keyboard navigation behaviour
		// breaks a bit on Safari and some related tests fail.
		this.inputElement.addEventListener(
		'keydown',
		(e) => {
		if (e.keyCode === 27) {
		this._stopPropagation(e);
		// Trigger _onEscape method of vaadin-combo-box-mixin because
		// bubbling phase is not reached.
		this._onEscape(e);
		}
		},
		true
		);

		this._nativeInput.setAttribute('role', 'combobox');
		this._nativeInput.setAttribute('aria-autocomplete', 'list');
		this._updateAriaExpanded();
		}

		/** @protected */
		connectedCallback() {
		super.connectedCallback();
		this._preventInputBlur();
		}

		/** @protected */
		disconnectedCallback() {
		super.disconnectedCallback();
		this._restoreInputBlur();
		}

		/** @private */
		_getPositionTarget() {
		return this.$.input;
		}

		/** @private */
		_updateAriaExpanded() {
		if (this._nativeInput) {
		this._nativeInput.setAttribute('aria-expanded', this.opened);
		this._toggleElement.setAttribute('aria-expanded', this.opened);
		}
		}

		/** @return {!TextFieldElement \| undefined} */
		get inputElement() {
		return this.$.input;
		}

		/**
		* Focusable element used by vaadin-control-state-mixin
		* @return {!HTMLElement}
		*/
		get focusElement() {
		// inputElement might not be defined on property changes before ready.
		return this.inputElement \|\| this;
		}
		}

		customElements.define(ComboBoxElement.is, ComboBoxElement);

		export { ComboBoxElement };
		export * from '@vaadin/combo-box/src/vaadin-combo-box.js';

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

		@@ -1,3 +0,1 @@
		import './vaadin-combo-box-dropdown-styles.js';
		import './vaadin-combo-box-item-styles.js';
		import '../../src/vaadin-combo-box-light.js';
		import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-light.js';

theme/lumo/vaadin-combo-box.js

		@@ -1,4 +0,1 @@
		import './vaadin-combo-box-dropdown-styles.js';
		import './vaadin-combo-box-item-styles.js';
		import './vaadin-combo-box-styles.js';
		import '../../src/vaadin-combo-box.js';
		import '@vaadin/combo-box/theme/lumo/vaadin-combo-box.js';

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

		@@ -1,3 +0,1 @@
		import './vaadin-combo-box-dropdown-styles.js';
		import './vaadin-combo-box-item-styles.js';
		import '../../src/vaadin-combo-box-light.js';
		import '@vaadin/combo-box/theme/material/vaadin-combo-box.js';

theme/material/vaadin-combo-box.js

		@@ -1,4 +0,1 @@
		import './vaadin-combo-box-dropdown-styles.js';
		import './vaadin-combo-box-item-styles.js';
		import './vaadin-combo-box-styles.js';
		import '../../src/vaadin-combo-box.js';
		import '@vaadin/combo-box/theme/material/vaadin-combo-box.js';

src/vaadin-combo-box-data-provider-mixin.d.ts

src/vaadin-combo-box-data-provider-mixin.js

src/vaadin-combo-box-dropdown.js

src/vaadin-combo-box-item.js

src/vaadin-combo-box-mixin.d.ts

src/vaadin-combo-box-mixin.js

src/vaadin-combo-box-overlay.js

src/vaadin-combo-box-placeholder.js

src/vaadin-combo-box-scroller.js

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

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

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

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

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

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

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

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes