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

Comparing version 5.2.0-alpha2 to 5.3.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "5.2.0-alpha2",
+  "version": "5.3.0-alpha1",
   "main": "vaadin-combo-box.js",
@@ -22,3 +22,5 @@ "author": "Vaadin Ltd",
   "files": [
+    "vaadin-*.d.ts",
     "vaadin-*.js",
+    "@types",
     "src",
@@ -39,15 +41,15 @@ "theme"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-control-state-mixin": "^2.1.1",
-    "@vaadin/vaadin-overlay": "^3.4.0",
-    "@vaadin/vaadin-text-field": "^2.6.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "^1.5.2",
+    "@vaadin/vaadin-control-state-mixin": "^2.2.2",
+    "@vaadin/vaadin-overlay": "^3.5.0",
+    "@vaadin/vaadin-text-field": "^2.7.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "^1.6.1",
     "@vaadin/vaadin-lumo-styles": "^1.1.1",
     "@vaadin/vaadin-material-styles": "^1.1.2",
-    "@vaadin/vaadin-item": "^2.2.0-alpha1",
-    "@vaadin/vaadin-element-mixin": "^2.3.0"
+    "@vaadin/vaadin-item": "^2.3.0-alpha1",
+    "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "scripts": {
-  "generate-typings": "gen-typescript-declarations --outDir . --verify"
-},
-"devDependencies": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify"
+  },
+  "devDependencies": {
     "@polymer/iron-form": "^3.0.0",
@@ -57,7 +59,7 @@ "@polymer/iron-component-page": "^4.0.0",
     "@polymer/paper-input": "^3.0.0",
-    "@vaadin/vaadin-button": "^2.1.0",
+    "@vaadin/vaadin-button": "^2.4.0-alpha1",
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^3.1.0-alpha1",
-    "@vaadin/vaadin-dialog": "^2.2.1"
+    "@vaadin/vaadin-demo-helpers": "^3.1.0",
+    "@vaadin/vaadin-dialog": "^2.5.0-alpha1"
   }
 }

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

@@ -18,2 +18,3 @@ /**
        * Number of items fetched at a time from the dataprovider.
+       * @type {number}
        */
@@ -28,2 +29,3 @@ pageSize: {
        * Total number of items.
+       * @type {number | undefined}
        */
@@ -47,2 +49,3 @@ size: {
        *   - `size` Total number of items.
+       * @type {ComboBoxDataProvider | undefined}
        */
@@ -54,2 +57,3 @@ dataProvider: {
 
+      /** @private */
       _pendingRequests: {
@@ -61,2 +65,3 @@ value: () => {
 
+      /** @private */
       __placeHolder: {
@@ -78,4 +83,5 @@ value: new ComboBoxPlaceholder()
 
+  /** @private */
   _dataProviderClearFilter(dataProvider, opened, value) {
-    // Can't depend on filter in this obsever as we don't want
+    // Can't depend on filter in this observer as we don't want
     // to clear the filter whenever it's set
@@ -90,2 +96,3 @@ if (dataProvider && this.filter) {
 
+  /** @protected */
   ready() {
@@ -105,2 +112,3 @@ super.ready();
 
+  /** @private */
   _dataProviderFilterChanged() {
@@ -114,2 +122,3 @@ if (this.dataProvider && this.opened) {
 
+  /** @private */
   _ensureFirstPage(opened) {
@@ -121,2 +130,3 @@ if (opened && this._shouldLoadPage(0)) {
 
+  /** @private */
   _shouldLoadPage(page) {
@@ -136,2 +146,3 @@ if (!this.filteredItems || this._forceNextRequest) {
 
+  /** @private */
   _loadPage(page) {
@@ -179,2 +190,3 @@ // make sure same page isn't requested multiple times.
 
+  /** @private */
   _getPageForIndex(index) {
@@ -204,2 +216,3 @@ return Math.floor(index / this.pageSize);
 
+  /** @private */
   _sizeChanged(size = 0) {
@@ -213,2 +226,3 @@ const filteredItems = (this.filteredItems || []).slice(0, size);
 
+  /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
@@ -222,2 +236,3 @@ if (Math.floor(pageSize) !== pageSize || pageSize < 1) {
 
+  /** @private */
   _dataProviderChanged(dataProvider, oldDataProvider) {
@@ -229,2 +244,3 @@ this._ensureItemsOrDataProvider(() => {
 
+  /** @private */
   _ensureItemsOrDataProvider(restoreOldValueCallback) {
@@ -239,2 +255,3 @@ if (this.items !== undefined && this.dataProvider !== undefined) {
 
+  /** @private */
   _warnDataProviderValue(dataProvider, value) {
@@ -241,0 +258,0 @@ if (dataProvider && value !== '' && (this.selectedItem === undefined || this.selectedItem === null)) {

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

@@ -269,3 +269,3 @@ /**
    * Gets the index of the item with the provided label.
-   * @return {Number}
+   * @return {number}
    */
@@ -289,3 +289,3 @@ indexOfLabel(label) {
    *
-   * @return {Number}
+   * @return {number}
    */
@@ -302,3 +302,3 @@ __requestItemByIndex(item, index) {
    * Gets the label string for the item based on the `_itemLabelPath`.
-   * @return {String}
+   * @return {string}
    */
@@ -305,0 +305,0 @@ getItemLabel(item, itemLabelPath) {

src/vaadin-combo-box-light.js

@@ -9,3 +9,2 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
@@ -62,9 +61,7 @@ import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
  * @mixes ThemableMixin
- * @mixes ThemePropertyMixin
  */
 class ComboBoxLightElement extends
-  ThemePropertyMixin(
-    ThemableMixin(
-      ComboBoxDataProviderMixin(
-        ComboBoxMixin(PolymerElement)))) {
+  ThemableMixin(
+    ComboBoxDataProviderMixin(
+      ComboBoxMixin(PolymerElement))) {
   static get template() {
@@ -94,2 +91,3 @@ return html`
        * value of the custom input field.
+       * @type {string}
        */
@@ -101,2 +99,5 @@ attrForValue: {
 
+      /**
+       * @type {!Element | undefined}
+       */
       inputElement: {
@@ -115,2 +116,3 @@ type: Element,
 
+  /** @protected */
   ready() {
@@ -130,2 +132,5 @@ super.ready();
 
+  /**
+   * @return {boolean}
+   */
   get focused() {
@@ -135,2 +140,3 @@ return this.getRootNode().activeElement === this.inputElement;
 
+  /** @protected */
   connectedCallback() {
@@ -146,2 +152,3 @@ super.connectedCallback();
 
+  /** @protected */
   disconnectedCallback() {
@@ -154,2 +161,3 @@ super.disconnectedCallback();
 
+  /** @private */
   __inputValueCommitted(e) {
@@ -163,2 +171,6 @@ // Detect if the input was cleared (by clicking the clear button on a vaadin-text-field)
 
+  /**
+   * @return {string}
+   * @protected
+   */
   get _propertyForValue() {
@@ -168,2 +180,6 @@ return dashToCamelCase(this.attrForValue);
 
+  /**
+   * @return {string}
+   * @protected
+   */
   get _inputElementValue() {
@@ -173,2 +189,6 @@ return this.inputElement && this.inputElement[this._propertyForValue];
 
+  /**
+   * @param {string} value
+   * @protected
+   */
   set _inputElementValue(value) {
@@ -175,0 +195,0 @@ if (this.inputElement) {

src/vaadin-combo-box-mixin.js

@@ -25,2 +25,3 @@ /**
        * True if the dropdown is open, false otherwise.
+       * @type {boolean}
        */
@@ -42,2 +43,3 @@ opened: {
        * Set to true to disable this element.
+       * @type {boolean}
        */
@@ -52,2 +54,3 @@ disabled: {
        * When present, it specifies that the element field is read-only.
+       * @type {boolean}
        */
@@ -70,2 +73,3 @@ readonly: {
        *   - `model.item` The item.
+       * @type {ComboBoxRenderer | undefined}
        */
@@ -77,2 +81,3 @@ renderer: Function,
        * The items can be of either `String` or `Object` type.
+       * @type {!Array<!ComboBoxItem> | undefined}
        */
@@ -89,2 +94,3 @@ items: {
        * to reflect that value.
+       * @type {boolean}
        */
@@ -100,2 +106,3 @@ allowCustomValue: {
        * The items can be of either `String` or `Object` type.
+       * @type {!Array<!ComboBoxItem> | undefined}
        */
@@ -114,2 +121,3 @@ filteredItems: {
        * the `items` array.
+       * @type {string}
        */
@@ -125,7 +133,9 @@ value: {
        * Used to detect user value changes and fire `change` events.
+       * @private
        */
       _lastCommittedValue: String,
 
-      /*
+      /**
        * When set to `true`, "loading" attribute is added to host and the overlay element.
+       * @type {boolean}
        */
@@ -138,2 +148,6 @@ loading: {
 
+      /**
+       * @type {number}
+       * @protected
+       */
       _focusedIndex: {
@@ -146,2 +160,3 @@ type: Number,
        * Filtering string the user has typed into the input field.
+       * @type {string}
        */
@@ -156,2 +171,3 @@ filter: {
        * The selected item from the `items` array.
+       * @type {ComboBoxItem | undefined}
        */
@@ -173,2 +189,3 @@ selectedItem: {
        * for filtering, and for displaying the selected item value in the input box.
+       * @type {string}
        */
@@ -188,2 +205,3 @@ itemLabelPath: {
        * to provide the form value.
+       * @type {string}
        */
@@ -212,2 +230,3 @@ itemValuePath: {
        * Set to true if the value is invalid.
+       * @type {boolean}
        */
@@ -221,11 +240,24 @@ invalid: {
 
+      /**
+       * @type {!HTMLElement | undefined}
+       * @protected
+       */
       _toggleElement: Object,
+
+      /**
+       * @type {!HTMLElement | undefined}
+       * @protected
+       */
       _clearElement: Object,
 
+      /** @protected */
       _inputElementValue: String,
 
+      /** @private */
       _closeOnBlurIsPrevented: Boolean,
 
+      /** @private */
       _previousDocumentPointerEvents: String,
 
+      /** @private */
       _itemTemplate: Object
@@ -259,2 +291,3 @@ };
 
+  /** @protected */
   ready() {
@@ -309,2 +342,3 @@ super.ready();
 
+  /** @private */
   _setTemplateFromNodes(nodes) {
@@ -314,2 +348,3 @@ this._itemTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._itemTemplate;
 
+  /** @private */
   _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
@@ -323,2 +358,3 @@ if (template !== oldTemplate) {
 
+  /** @private */
   _templateOrRendererChanged(template, renderer) {
@@ -351,2 +387,3 @@ if (template && renderer) {
 
+  /** @private */
   _openedChanged(value, old) {
@@ -372,2 +409,3 @@ // Prevent _close() being called when opened is set to its default value (false).
 
+  /** @private */
   _onOverlayTouchAction(event) {
@@ -381,2 +419,3 @@ // On touch devices, blur the input on touch start inside the overlay, in order to hide
 
+  /** @private */
   _onClick(e) {
@@ -403,4 +442,4 @@ this._closeOnBlurIsPrevented = true;
    * Keyboard navigation
+   * @private
    */
-
   _onKeyDown(e) {
@@ -428,6 +467,13 @@ if (this._isEventKey(e, 'down')) {
 
-  _isEventKey(e, k) {
-    return IronA11yKeysBehavior.keyboardEventMatchesKeys(e, k);
+  /**
+   * @param {!KeyboardEvent} event
+   * @param {string} key
+   * @return {boolean}
+   * @protected
+   */
+  _isEventKey(event, key) {
+    return IronA11yKeysBehavior.keyboardEventMatchesKeys(event, key);
   }
 
+  /** @private */
   _getItemLabel(item) {
@@ -437,2 +483,3 @@ return this.$.overlay.getItemLabel(item);
 
+  /** @private */
   _getItemValue(item) {
@@ -446,2 +493,3 @@ let value = item && this.itemValuePath ? this.get(this.itemValuePath, item) : undefined;
 
+  /** @private */
   _onArrowDown() {
@@ -458,2 +506,3 @@ if (this.opened) {
 
+  /** @private */
   _onArrowUp() {
@@ -475,2 +524,3 @@ if (this.opened) {
 
+  /** @private */
   _prefillFocusedItemLabel() {
@@ -489,2 +539,3 @@ if (this._focusedIndex > -1) {
 
+  /** @private */
   _setSelectionRange(start, end) {
@@ -508,2 +559,3 @@ // vaadin-text-field does not implement setSelectionRange, hence we need the native input
 
+  /** @private */
   _markAllSelectionRange() {
@@ -515,2 +567,3 @@ if (this._inputElementValue !== undefined) {
 
+  /** @private */
   _clearSelectionRange() {
@@ -523,2 +576,3 @@ if (this._inputElementValue !== undefined) {
 
+  /** @private */
   _closeOrCommit() {
@@ -532,2 +586,3 @@ if (this.autoOpenDisabled && !this.opened) {
 
+  /** @private */
   _onEnter(e) {
@@ -547,2 +602,6 @@ // should close on enter when custom values are allowed, input field is cleared, or when an existing
 
+  /**
+   * @param {!KeyboardEvent} e
+   * @protected
+   */
   _onEscape(e) {
@@ -564,2 +623,3 @@ if (this.autoOpenDisabled) {
 
+  /** @private */
   _toggleElementChanged(toggleElement) {
@@ -580,2 +640,3 @@ if (toggleElement) {
    * Clears the current value.
+   * @protected
    */
@@ -602,2 +663,3 @@ _clear() {
 
+  /** @private */
   _onOpened() {
@@ -629,2 +691,3 @@ // Pre P2 iron-list used a debouncer to render. Now that we synchronously render items,
 
+  /** @private */
   _onClosed() {
@@ -639,2 +702,3 @@ // Happens when the overlay is closed by clicking outside
 
+  /** @private */
   _commitValue() {
@@ -680,2 +744,6 @@ if (this.$.overlay._items && this._focusedIndex > -1) {
 
+  /**
+   * @return {string}
+   * @protected
+   */
   get _propertyForValue() {
@@ -686,3 +754,5 @@ return 'value';
   /**
-   *  Filtering and items handling
+   * Filtering and items handling
+   * @param {!Event} e
+   * @protected
    */
@@ -697,2 +767,3 @@ _inputValueChanged(e) {
 
+  /** @private */
   _filterFromInput(e) {
@@ -713,2 +784,3 @@ if (!this.opened && !e.__fromClearButton && !this.autoOpenDisabled) {
 
+  /** @private */
   _itemLabelPathChanged(itemLabelPath, oldItemLabelPath) {
@@ -720,2 +792,3 @@ if (typeof itemLabelPath !== 'string') {
 
+  /** @private */
   _filterChanged(filter, itemValuePath, itemLabelPath) {
@@ -735,2 +808,3 @@ if (filter === undefined) {
 
+  /** @private */
   _loadingChanged(loading) {
@@ -742,2 +816,3 @@ if (loading) {
 
+  /** @protected */
   _revertInputValue() {
@@ -752,2 +827,3 @@ if (this.filter !== '') {
 
+  /** @private */
   _revertInputValueToValue() {
@@ -761,2 +837,3 @@ if (this.allowCustomValue && !this.selectedItem) {
 
+  /** @private */
   _resizeDropdown() {
@@ -766,2 +843,3 @@ this.$.overlay.$.dropdown.notifyResize();
 
+  /** @private */
   _updateHasValue(hasValue) {
@@ -775,2 +853,3 @@ if (hasValue) {
 
+  /** @private */
   _selectedItemChanged(selectedItem, itemLabelPath) {
@@ -812,2 +891,3 @@ if (selectedItem === null || selectedItem === undefined) {
 
+  /** @private */
   _valueChanged(value, oldVal) {
@@ -838,2 +918,3 @@ if (value === '' && oldVal === undefined) { // initializing, no need to do anything (#554)
 
+  /** @private */
   _detectAndDispatchChange() {
@@ -846,2 +927,3 @@ if (this.value !== this._lastCommittedValue) {
 
+  /** @private */
   _itemsChanged(items, oldItems) {
@@ -853,2 +935,3 @@ this._ensureItemsOrDataProvider(() => {
 
+  /** @private */
   _itemsOrPathsChanged(e, itemValuePath, itemLabelPath) {
@@ -871,2 +954,3 @@ if (e.value === undefined) {
 
+  /** @private */
   _filteredItemsChanged(e, itemValuePath, itemLabelPath) {
@@ -889,2 +973,3 @@ if (e.value === undefined) {
 
+  /** @private */
   _filterItems(arr, filter) {
@@ -904,2 +989,3 @@ if (!arr) {
 
+  /** @private */
   _selectItemForValue(value) {
@@ -920,2 +1006,3 @@ const valueIndex = this._indexOfValue(value, this.filteredItems);
 
+  /** @private */
   _setOverlayItems(items) {
@@ -925,2 +1012,3 @@ this.$.overlay.set('_items', items);
 
+  /** @private */
   _repositionOverlay() {
@@ -955,2 +1043,3 @@ // async needed to reposition correctly after filtering
 
+  /** @private */
   _indexOfValue(value, items) {
@@ -970,4 +1059,3 @@ if (items && this._isValidValue(value)) {
    * Checks if the value is supported as an item value in this control.
-   *
-   * @return {boolean}
+   * @private
    */
@@ -978,2 +1066,3 @@ _isValidValue(value) {
 
+  /** @private */
   _overlaySelectedItemChanged(e) {
@@ -997,2 +1086,3 @@ // stop this private event from leaking outside.
 
+  /** @private */
   _onFocusout(event) {
@@ -1010,2 +1100,3 @@ // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
 
+  /** @private */
   _onTouchend(event) {
@@ -1033,2 +1124,3 @@ if (!this._clearElement || event.composedPath()[0] !== this._clearElement) {
    * You can override the `checkValidity` method for custom validations.
+   * @return {boolean | undefined}
    */
@@ -1041,2 +1133,3 @@ checkValidity() {
 
+  /** @private */
   get _instanceProps() {
@@ -1051,2 +1144,3 @@ return {
 
+  /** @protected */
   _ensureTemplatized() {
@@ -1072,2 +1166,3 @@ if (!this._TemplateClass) {
 
+  /** @private */
   _getRootTemplate() {
@@ -1077,2 +1172,3 @@ return Array.prototype.filter.call(this.children, elem => elem.tagName === 'TEMPLATE')[0];
 
+  /** @protected */
   _preventInputBlur() {
@@ -1087,2 +1183,3 @@ if (this._toggleElement) {
 
+  /** @protected */
   _restoreInputBlur() {
@@ -1097,2 +1194,3 @@ if (this._toggleElement) {
 
+  /** @private */
   _preventDefault(e) {
@@ -1102,2 +1200,6 @@ e.preventDefault();
 
+  /**
+   * @param {!Event} e
+   * @protected
+   */
   _stopPropagation(e) {
@@ -1104,0 +1206,0 @@ e.stopPropagation();

src/vaadin-combo-box.js

@@ -11,3 +11,2 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
@@ -179,3 +178,2 @@ import './vaadin-combo-box-dropdown-wrapper.js';
  * @mixes ThemableMixin
- * @mixes ThemePropertyMixin
  * @demo demo/index.html
@@ -186,6 +184,5 @@ */
     ControlStateMixin(
-      ThemePropertyMixin(
-        ThemableMixin(
-          ComboBoxDataProviderMixin(
-            ComboBoxMixin(PolymerElement)))))) {
+      ThemableMixin(
+        ComboBoxDataProviderMixin(
+          ComboBoxMixin(PolymerElement))))) {
   static get template() {
@@ -237,3 +234,3 @@ return html`
   static get version() {
-    return '5.2.0-alpha2';
+    return '5.3.0-alpha1';
   }
@@ -253,2 +250,3 @@
        * Set to true to mark the input as required.
+       * @type {boolean}
        */
@@ -262,2 +260,3 @@ required: {
        * Set to true to disable this input.
+       * @type {boolean}
        */
@@ -290,2 +289,3 @@ disabled: {
 
+      /** @type {boolean} */
       autofocus: {
@@ -297,2 +297,3 @@ type: Boolean
        * A placeholder string in addition to the label.
+       * @type {string}
        */
@@ -304,2 +305,3 @@ placeholder: {
 
+      /** @type {boolean} */
       readonly: {
@@ -312,2 +314,3 @@ type: Boolean,
        * Set to true to display the clear icon which clears the input.
+       * @type {boolean}
        */
@@ -325,3 +328,10 @@ clearButtonVisible: {
 
-  attributeChanged(name, type) {
+  /**
+   * @param {string} name
+   * @param {?string} oldValue
+   * @param {?string} newValue
+   * @protected
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
     // Safari has an issue with repainting shadow root element styles when a host attribute changes.
@@ -338,2 +348,3 @@ // Need this workaround (toggle any inline css property on and off) until the issue gets fixed.
 
+  /** @protected */
   ready() {
@@ -366,2 +377,3 @@ super.ready();
 
+  /** @protected */
   connectedCallback() {
@@ -372,2 +384,3 @@ super.connectedCallback();
 
+  /** @protected */
   disconnectedCallback() {
@@ -378,2 +391,3 @@ super.disconnectedCallback();
 
+  /** @private */
   _getPositionTarget() {
@@ -383,2 +397,3 @@ return this.$.input;
 
+  /** @private */
   _updateAriaExpanded() {
@@ -391,2 +406,3 @@ if (this._nativeInput) {
 
+  /** @return {!TextFieldElement | undefined} */
   get inputElement() {
@@ -398,2 +414,3 @@ return this.$.input;
    * Focusable element used by vaadin-control-state-mixin
+   * @return {!HTMLElement}
    */
@@ -400,0 +417,0 @@ get focusElement() {

vaadin-combo-box-light.js

 import './theme/lumo/vaadin-combo-box-light.js';
+export * from './src/vaadin-combo-box-light.js';

vaadin-combo-box.js

 import './theme/lumo/vaadin-combo-box.js';
+export * from './src/vaadin-combo-box.js';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138579

increased by20.52%

Number of package files

30

increased by30.43%

Lines of code

3528

increased by26.77%

Dependency changes

• Updated@vaadin/vaadin-control-state-mixin@^2.2.2

• Updated@vaadin/vaadin-element-mixin@^2.4.1

• Updated@vaadin/vaadin-item@^2.3.0-alpha1

• Updated@vaadin/vaadin-overlay@^3.5.0

• Updated@vaadin/vaadin-text-field@^2.7.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@^1.6.1