@vaadin/vaadin-combo-box 22.0.0-alpha1 → 22.0.0-alpha10

package/README.md

@@ -1,12 +1,3 @@
-[![npm latest version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box/latest)](https://www.npmjs.com/package/@vaadin/vaadin-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)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-combo-box.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-combo-box)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-combo-box/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-combo-box?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-combo-box)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-combo-box.svg)](https://vaadin.com/directory/component/vaadinvaadin-combo-box)
-
 # <vaadin-combo-box>
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-combo-box/html-examples)
@@ -15,15 +6,24 @@
 
 [<vaadin-combo-box>](https://vaadin.com/components/vaadin-combo-box) is a Web Component combining a dropdown list with an input field for filtering the list of items, part of the [Vaadin components](https://vaadin.com/components).
 
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-combo-box)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
+
 ```html
-<vaadin-combo-box label="User" placeholder="Please select" item-value-path="email" item-label-path="email"></vaadin-combo-box>
+<vaadin-combo-box
+  label="User"
+  placeholder="Please select"
+  item-value-path="email"
+  item-label-path="email"
+></vaadin-combo-box>
 
 <script>
   const comboBox = document.querySelector('vaadin-combo-box');
 
   fetch('https://randomuser.me/api?results=100&inc=name,email')
-    .then(res => res.json())
-    .then(json => comboBox.items = json.results);
+    .then((res) => res.json())
+    .then((json) => (comboBox.items = json.results));
 </script>
 ```
 
@@ -67,46 +67,9 @@ To use the Material theme, import the correspondent file from the `theme/materia
   `vaadin-combo-box.js`
   `vaadin-combo-box-light.js`
 
-
-## Running API docs and tests in a browser
-
-1. Fork the `vaadin-combo-box` repository and clone it locally.
-
-1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
-
-1. Make sure you have [npm](https://www.npmjs.com/) installed.
-
-1. When in the `vaadin-combo-box` directory, run `npm install` to install dependencies.
-
-1. Run `npm start`, browser will automatically open the component API documentation.
-
-1. You can also open visual tests, for example:
-
-  - http://127.0.0.1:3000/test/visual/default.html
-
-
-## Running tests from the command line
-
-1. When in the `vaadin-combo-box` 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.
-
-
-## Big Thanks
-
-Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
-
-
 ## Contributing
 
-  To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
-
+Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,9 +1,28 @@
 {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "22.0.0-alpha1",
+  "version": "22.0.0-alpha10",
+  "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": [
     "Vaadin",
     "combo-box",
@@ -11,43 +30,8 @@
     "web-component",
     "polymer"
   ],
-  "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-list": "^3.0.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha1",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha1",
-    "@vaadin/vaadin-item": "^22.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha1",
-    "@vaadin/vaadin-overlay": "^22.0.0-alpha1",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "4.3.0",
-    "@polymer/iron-input": "^3.0.1",
-    "@polymer/paper-input": "^3.0.0",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-dialog": "^22.0.0-alpha1",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha1",
-    "sinon": "^9.2.0"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/combo-box": "22.0.0-alpha10"
   },
-  "gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

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

@@ -1,100 +1,19 @@
-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 { 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.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class ComboBoxLightElement<TItem = ComboBoxDefaultItem> extends HTMLElement {
-  readonly _propertyForValue: string;
-
-  _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;
+import { ComboBoxDefaultItem } from '@vaadin/combo-box';
+import { ComboBoxLight } from '@vaadin/combo-box/src/vaadin-combo-box-light.js';
 
-  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 {}
+/**
+ * @deprecated Import `ComboBoxLight` from `@vaadin/combo-box/vaadin-combo-box-light` instead.
+ */
+export type ComboBoxLightElement<TItem = ComboBoxDefaultItem> = ComboBoxLight<TItem>;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-combo-box-light': ComboBoxLightElement;
-  }
-}
+/**
+ * @deprecated Import `ComboBoxLight` from `@vaadin/combo-box/vaadin-combo-box-light` instead.
+ */
+export const ComboBoxLightElement: typeof ComboBoxLight;
 
-export { ComboBoxLightElement };
+export * from '@vaadin/combo-box/src/vaadin-combo-box-light.js';

package/src/vaadin-combo-box-light.js

@@ -3,204 +3,11 @@
  * Copyright (c) 2021 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 { 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-wrapper.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-wrapper
-        id="overlay"
-        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-wrapper>
-    `;
-  }
-
-  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';