Format code, fix ESLint errors

vaadin · Sep 15, 2020 · 6e1229f · 6e1229f
1 parent d501438
commit 6e1229f
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 100 deletions.
diff --git a/src/vaadin-select-text-field.js b/src/vaadin-select-text-field.js
@@ -6,18 +6,19 @@ This program is available under Apache License Version 2.0, available at https:/
 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)
+ *
+ * @extends PolymerElement
+ */
 class SelectTextFieldElement extends TextFieldElement {
   static get is() {
     return 'vaadin-select-text-field';

diff --git a/src/vaadin-select.js b/src/vaadin-select.js
@@ -3,18 +3,15 @@
 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 { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.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';
 import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import '@polymer/iron-media-query/iron-media-query.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 import './vaadin-select-overlay.js';
 import './vaadin-select-text-field.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `
@@ -109,46 +106,58 @@ document.head.appendChild($_documentContainer.content);
  * @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;
-      }
-
-      vaadin-select-text-field {
-        width: 100%;
-        min-width: 0;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
+      <style>
+        :host {
+          display: inline-block;
+        }
 
-      [part="toggle-button"] {
-        font-family: "vaadin-select-icons";
-      }
+        vaadin-select-text-field {
+          width: 100%;
+          min-width: 0;
+        }
 
-      [part="toggle-button"]::before {
-        content: "\\e900";
-      }
-    </style>
+        :host([hidden]) {
+          display: none !important;
+        }
 
-    <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>
+        [part='toggle-button'] {
+          font-family: 'vaadin-select-icons';
+        }
 
-    <iron-media-query query="[[_phoneMediaQuery]]" query-matches="{{_phone}}"></iron-media-query>
-`;
+        [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>
+
+      <iron-media-query query="[[_phoneMediaQuery]]" query-matches="{{_phone}}"></iron-media-query>
+    `;
   }
 
   static get is() {
@@ -336,8 +345,8 @@ class SelectElement extends
     this._nativeInput.setAttribute('tabindex', -1);
     this._nativeInput.style.pointerEvents = 'none';
 
-    this.focusElement.addEventListener('click', e => this.opened = !this.readonly);
-    this.focusElement.addEventListener('keydown', e => this._onKeyDown(e));
+    this.focusElement.addEventListener('click', () => (this.opened = !this.readonly));
+    this.focusElement.addEventListener('keydown', (e) => this._onKeyDown(e));
   }
 
   /**
@@ -366,7 +375,7 @@ class SelectElement extends
     this._oldRenderer = renderer;
 
     if (renderer) {
-      overlay.setProperties({owner: this, renderer: renderer});
+      overlay.setProperties({ owner: this, renderer: renderer });
       this.render();
 
       if (overlay.content.firstChild) {
@@ -377,19 +386,25 @@ class SelectElement extends
 
   /** @private */
   _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
+      );
 
       this._menuElement.setAttribute('role', 'listbox');
     }
@@ -400,8 +415,7 @@ class SelectElement extends
    * @protected
    */
   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 */
@@ -450,7 +464,6 @@ class SelectElement extends
       if (/^(Enter|SpaceBar|\s|ArrowDown|Down|ArrowUp|Up)$/.test(e.key)) {
         e.preventDefault();
         this.opened = true;
-
       } else if (/[a-zA-Z0-9]/.test(e.key) && e.key.length === 1) {
         const selected = this._menuElement.selected;
         const currentIdx = selected !== undefined ? selected : -1;
@@ -512,9 +525,9 @@ class SelectElement extends
       return false;
     }
     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
     );
   }
 
@@ -576,7 +589,7 @@ class SelectElement extends
       this._selectedChanging = true;
       this.value = selected.value || '';
       if (this.__userInteraction) {
-        this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
         this.__userInteraction = false;
       }
       delete this._selectedChanging;
@@ -624,14 +637,14 @@ class SelectElement extends
     if (bottomAlign) {
       this._overlayElement.setAttribute('bottom-aligned', '');
       this._overlayElement.style.removeProperty('top');
-      this._overlayElement.style.bottom = (viewportHeight - inputRect.bottom) + 'px';
+      this._overlayElement.style.bottom = viewportHeight - inputRect.bottom + 'px';
     } else {
       this._overlayElement.removeAttribute('bottom-aligned');
       this._overlayElement.style.removeProperty('bottom');
       this._overlayElement.style.top = inputRect.top + 'px';
     }
 
-    this._overlayElement.updateStyles({'--vaadin-select-text-field-width': inputRect.width + 'px'});
+    this._overlayElement.updateStyles({ '--vaadin-select-text-field-width': inputRect.width + 'px' });
   }
 
   /**

diff --git a/test/animations.test.js b/test/animations.test.js
@@ -16,7 +16,7 @@ function space(target) {
 
 function afterAnimation(el) {
   const name = getComputedStyle(el).getPropertyValue('animation-name');
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     if (name && name != 'none') {
       const listener = () => {
         el.removeEventListener('animationend', listener);
@@ -52,7 +52,7 @@ describe('vaadin-select accessibility', () => {
     input = select._inputElement;
   });
 
-  it('should not fail when quick toggling with mouse because of animations', async() => {
+  it('should not fail when quick toggling with mouse because of animations', async () => {
     input.click();
     getFirstMenuItem(select).click();
     input.click();
@@ -61,7 +61,7 @@ describe('vaadin-select accessibility', () => {
     expect(select._overlayElement.opened).to.be.false;
   });
 
-  it('should not fail when quick toggling with keyboard because of animations', async() => {
+  it('should not fail when quick toggling with keyboard because of animations', async () => {
     space(input);
     space(getFirstMenuItem(select));
     space(input);

diff --git a/test/mock-item.js b/test/mock-item.js
@@ -75,7 +75,7 @@ class MockItemElement extends PolymerElement {
     }
   }
 
-  _onKeyup(event) {
+  _onKeyup() {
     if (this.hasAttribute('active')) {
       this._setActive(false);
       this.click();

diff --git a/test/renderer.test.js b/test/renderer.test.js
@@ -52,7 +52,7 @@ describe('vaadin-select accessibility', () => {
     select.opened = true;
     spy.resetHistory();
     select.render();
-    expect(spy.callCount).to.equal(1)
+    expect(spy.callCount).to.equal(1);
   });
 
   it('should update selected value after renderer is called', async () => {
@@ -66,7 +66,7 @@ describe('vaadin-select accessibility', () => {
     expect(select._valueElement.textContent.trim()).to.be.equal('barbaz');
   });
 
-  it('should update selected value after renderer is reassigned based on the value', async() => {
+  it('should update selected value after renderer is reassigned based on the value', async () => {
     select.renderer = generateRendererWithItems(['foo', 'bar']);
     await nextFrame();
     select.value = 'bar';

diff --git a/test/scrollable-viewport.test.js b/test/scrollable-viewport.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixture, html, nextFrame } from '@open-wc/testing-helpers';
+import { fixture, html } from '@open-wc/testing-helpers';
 import { render } from 'lit-html';
 import { keyDownOn } from '@polymer/iron-test-helpers/mock-interactions.js';
 import '@vaadin/vaadin-list-box/vaadin-list-box.js';

diff --git a/test/select.test.js b/test/select.test.js
@@ -2,7 +2,7 @@ import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { fixture, html, nextFrame } from '@open-wc/testing-helpers';
 import { render } from 'lit-html';
-import { keyDownOn, keyboardEventFor } from '@polymer/iron-test-helpers/mock-interactions.js';
+import { keyDownOn, keyUpOn, keyboardEventFor } from '@polymer/iron-test-helpers/mock-interactions.js';
 import '@vaadin/vaadin-list-box/vaadin-list-box.js';
 import '@vaadin/vaadin-item/vaadin-item.js';
 import './mock-item.js';
@@ -269,7 +269,7 @@ describe('vaadin-select', () => {
         expect(select._overlayElement.opened).to.be.false;
       });
 
-      it('should align the overlay on top left corner by default on input click', async() => {
+      it('should align the overlay on top left corner by default on input click', async () => {
         // NOTE: avoid setting bottom-aligned because of web-test-runner window size
         select.setAttribute('style', 'position: absolute; top: 10px');
         enter(input);
@@ -594,8 +594,8 @@ describe('vaadin-select', () => {
         arrowUp(menu);
 
         const secondOption = menu.querySelector('[value="v2"]');
-        MockInteractions.keyDownOn(secondOption, 13, [], 'Enter');
-        MockInteractions.keyUpOn(secondOption, 13, [], 'Enter');
+        keyDownOn(secondOption, 13, [], 'Enter');
+        keyUpOn(secondOption, 13, [], 'Enter');
         expect(changeSpy.callCount).to.equal(1);
       });
     });

diff --git a/test/visual/test.js b/test/visual/test.js
@@ -1,35 +1,32 @@
 describe('vaadin-select', () => {
   const locator = '#select-tests[data-ready]';
 
-  ['lumo', 'material'].forEach(theme => {
-    it(`${theme}-default`, function() {
+  ['lumo', 'material'].forEach((theme) => {
+    it(`${theme}-default`, function () {
       return this.browser
         .url(`select.html?theme=${theme}`)
         .waitForVisible(locator, 10000)
         .assertView(`${theme}-default`, locator);
     });
 
-    it(`${theme}-rtl`, function() {
+    it(`${theme}-rtl`, function () {
       return this.browser
         .url(`rtl.html?theme=${theme}`)
         .waitForVisible(locator, 10000)
         .assertView(`${theme}-rtl`, locator);
     });
   });
 
-  ['ltr', 'rtl'].forEach(dir => {
-    it(`${dir}-align`, function() {
+  ['ltr', 'rtl'].forEach((dir) => {
+    it(`${dir}-align`, function () {
       return this.browser
         .url(`align-themes.html?dir=${dir}`)
         .waitForVisible(locator, 10000)
         .assertView(`${dir}-align`, locator);
     });
   });
 
-  it('lumo-variants', function() {
-    return this.browser
-      .url(`lumo.html`)
-      .waitForVisible(locator, 10000)
-      .assertView('lumo-variants', locator);
+  it('lumo-variants', function () {
+    return this.browser.url(`lumo.html`).waitForVisible(locator, 10000).assertView('lumo-variants', locator);
   });
 });