@vaadin/field-highlighter 23.1.0-alpha3 → 23.1.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,27 +34,27 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-overlay": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/checkbox": "23.1.0-alpha3",
-    "@vaadin/combo-box": "23.1.0-alpha3",
-    "@vaadin/date-picker": "23.1.0-alpha3",
-    "@vaadin/date-time-picker": "23.1.0-alpha3",
-    "@vaadin/item": "23.1.0-alpha3",
-    "@vaadin/list-box": "23.1.0-alpha3",
-    "@vaadin/radio-group": "23.1.0-alpha3",
-    "@vaadin/select": "23.1.0-alpha3",
+    "@vaadin/checkbox": "23.1.0-beta2",
+    "@vaadin/combo-box": "23.1.0-beta2",
+    "@vaadin/date-picker": "23.1.0-beta2",
+    "@vaadin/date-time-picker": "23.1.0-beta2",
+    "@vaadin/item": "23.1.0-beta2",
+    "@vaadin/list-box": "23.1.0-beta2",
+    "@vaadin/radio-group": "23.1.0-beta2",
+    "@vaadin/select": "23.1.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.1.0-alpha3",
-    "@vaadin/time-picker": "23.1.0-alpha3",
+    "@vaadin/text-field": "23.1.0-beta2",
+    "@vaadin/time-picker": "23.1.0-beta2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/fields/vaadin-checkbox-group-observer.js

@@ -12,6 +12,6 @@ export class CheckboxGroupObserver extends FieldObserver {
 
   getFocusTarget(event) {
     const fields = this.getFields();
-    return Array.from(event.composedPath()).filter((node) => fields.indexOf(node) !== -1)[0];
+    return Array.from(event.composedPath()).filter((node) => fields.includes(node))[0];
   }
 }

package/src/fields/vaadin-component-observer.js

@@ -32,7 +32,7 @@ export class ComponentObserver {
     this._tags = tags;
 
     component.addEventListener('mouseenter', (event) => {
-      // ignore mouseleave on overlay opening
+      // Ignore mouseleave on overlay opening
       if (event.relatedTarget === this._tags.$.overlay) {
         return;
       }
@@ -45,7 +45,7 @@ export class ComponentObserver {
     });
 
     component.addEventListener('mouseleave', (event) => {
-      // ignore mouseleave on overlay opening
+      // Ignore mouseleave on overlay opening
       if (event.relatedTarget === this._tags.$.overlay) {
         return;
       }
@@ -76,7 +76,7 @@ export class ComponentObserver {
     });
 
     this._tags.$.overlay.addEventListener('mouseleave', (event) => {
-      // ignore mouseleave when moving back to field
+      // Ignore mouseleave when moving back to field
       if (event.relatedTarget === component) {
         return;
       }
@@ -109,8 +109,8 @@ export class ComponentObserver {
       new CustomEvent(`vaadin-highlight-${action}`, {
         bubbles: true,
         composed: true,
-        detail: { fieldIndex: this.getFieldIndex(field) }
-      })
+        detail: { fieldIndex: this.getFieldIndex(field) },
+      }),
     );
   }
 

package/src/fields/vaadin-date-picker-observer.js

@@ -45,13 +45,13 @@ export class DatePickerObserver extends ComponentObserver {
 
   onFocusIn(event) {
     if (event.relatedTarget === this.overlay) {
-      // focus returns from the overlay, do nothing.
+      // Focus returns from the overlay, do nothing.
       return;
     }
 
     if (this.blurWhileOpened) {
       this.blurWhileOpened = false;
-      // focus returns from outside the browser tab, ignore.
+      // Focus returns from outside the browser tab, ignore.
       return;
     }
 
@@ -60,9 +60,9 @@ export class DatePickerObserver extends ComponentObserver {
 
   onFocusOut(event) {
     if (this.fullscreenFocus || event.relatedTarget === this.overlay) {
-      // do nothing, overlay is opening.
+      // Do nothing, overlay is opening.
     } else if (!this.datePicker.opened) {
-      // field blur when closed.
+      // Field blur when closed.
       this.hideOutline(this.datePicker);
     } else {
       // Focus moves away while still opened, e.g. outside the browser.
@@ -84,7 +84,7 @@ export class DatePickerObserver extends ComponentObserver {
       this.showOutline(this.datePicker);
     }
 
-    // closing after previously moving focus away.
+    // Closing after previously moving focus away.
     if (event.detail.value === false && this.blurWhileOpened) {
       this.blurWhileOpened = false;
       this.hideOutline(this.datePicker);

package/src/fields/vaadin-date-time-picker-observer.js

@@ -11,7 +11,7 @@ class DateObserver extends DatePickerObserver {
   constructor(datePicker, host) {
     super(datePicker);
 
-    // fire events on the host
+    // Fire events on the host
     this.component = host;
   }
 
@@ -24,7 +24,7 @@ class TimeObserver extends FieldObserver {
   constructor(timePicker, host) {
     super(timePicker);
 
-    // fire events on the host
+    // Fire events on the host
     this.component = host;
     this.timePicker = timePicker;
   }

package/src/fields/vaadin-list-box-observer.js

@@ -12,6 +12,6 @@ export class ListBoxObserver extends FieldObserver {
 
   getFocusTarget(event) {
     const fields = this.getFields();
-    return Array.from(event.composedPath()).filter((node) => fields.indexOf(node) !== -1)[0];
+    return Array.from(event.composedPath()).filter((node) => fields.includes(node))[0];
   }
 }

package/src/fields/vaadin-radio-group-observer.js

@@ -12,6 +12,6 @@ export class RadioGroupObserver extends FieldObserver {
 
   getFocusTarget(event) {
     const fields = this.getFields();
-    return Array.from(event.composedPath()).filter((node) => fields.indexOf(node) !== -1)[0];
+    return Array.from(event.composedPath()).filter((node) => fields.includes(node))[0];
   }
 }

package/src/fields/vaadin-select-observer.js

@@ -17,7 +17,7 @@ export class SelectObserver extends FieldObserver {
     super.addListeners(select);
 
     select.addEventListener('opened-changed', (event) => {
-      // when in phone mode, focus is lost when closing.
+      // When in phone mode, focus is lost when closing.
       if (select._phone && event.detail.value === false) {
         this.hideOutline(select);
       }
@@ -26,12 +26,12 @@ export class SelectObserver extends FieldObserver {
 
   onFocusIn(event) {
     if (this.overlay.contains(event.relatedTarget)) {
-      // focus returns on item select, do nothing.
+      // Focus returns on item select, do nothing.
       return;
     }
 
     if (!this.component._phone && this.overlay.hasAttribute('closing')) {
-      // focus returns on outside click, do nothing.
+      // Focus returns on outside click, do nothing.
       return;
     }
 
@@ -40,7 +40,7 @@ export class SelectObserver extends FieldObserver {
 
   onFocusOut(event) {
     if (this.overlay.contains(event.relatedTarget)) {
-      // do nothing, overlay is opening.
+      // Do nothing, overlay is opening.
       return;
     }
     super.onFocusOut(event);

package/src/vaadin-field-outline.js

@@ -54,8 +54,8 @@ export class FieldOutline extends ThemableMixin(DirMixin(PolymerElement)) {
       user: {
         type: Object,
         value: null,
-        observer: '_userChanged'
-      }
+        observer: '_userChanged',
+      },
     };
   }
 

package/src/vaadin-user-tag.js

@@ -66,14 +66,14 @@ export class UserTag extends ThemableMixin(DirMixin(PolymerElement)) {
        * Name of the user.
        */
       name: {
-        type: String
+        type: String,
       },
 
       /**
        * Id of the user.
        */
       uid: {
-        type: String
+        type: String,
       },
 
       /**
@@ -81,8 +81,8 @@ export class UserTag extends ThemableMixin(DirMixin(PolymerElement)) {
        */
       colorIndex: {
         type: Number,
-        observer: '_colorIndexChanged'
-      }
+        observer: '_colorIndexChanged',
+      },
     };
   }
 
@@ -114,9 +114,9 @@ export class UserTag extends ThemableMixin(DirMixin(PolymerElement)) {
         bubbles: true,
         composed: true,
         detail: {
-          name: this.name
-        }
-      })
+          name: this.name,
+        },
+      }),
     );
   }
 }

package/src/vaadin-user-tags-overlay.js

@@ -64,7 +64,7 @@ registerStyles(
         opacity: 1;
       }
     }
-  `
+  `,
 );
 
 /**

package/src/vaadin-user-tags.js

@@ -59,7 +59,7 @@ export class UserTags extends PolymerElement {
       hasFocus: {
         type: Boolean,
         value: false,
-        observer: '_hasFocusChanged'
+        observer: '_hasFocusChanged',
       },
 
       /**
@@ -68,7 +68,7 @@ export class UserTags extends PolymerElement {
       opened: {
         type: Boolean,
         value: false,
-        observer: '_openedChanged'
+        observer: '_openedChanged',
       },
 
       /**
@@ -77,14 +77,14 @@ export class UserTags extends PolymerElement {
        */
       flashing: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
        * A target element that the overlay is positioned to.
        */
       target: {
-        type: Object
+        type: Object,
       },
 
       /**
@@ -92,14 +92,14 @@ export class UserTags extends PolymerElement {
        */
       users: {
         type: Array,
-        value: () => []
+        value: () => [],
       },
 
       /** @private */
       _flashQueue: {
         type: Array,
-        value: () => []
-      }
+        value: () => [],
+      },
     };
   }
 
@@ -220,7 +220,7 @@ export class UserTags extends PolymerElement {
       }
     });
 
-    // filter out users that are only moved
+    // Filter out users that are only moved
     const addedUsers = usersToAdd.filter((u) => !usersToRemove.some((u2) => u.id === u2.id));
     const removedUsers = usersToRemove.filter((u) => !usersToAdd.some((u2) => u.id === u2.id));
 
@@ -264,7 +264,7 @@ export class UserTags extends PolymerElement {
 
     const changedTags = this.getChangedTags(addedUsers, removedUsers);
 
-    // check if flash queue contains pending tags for removed users
+    // Check if flash queue contains pending tags for removed users
     if (this._flashQueue.length > 0) {
       for (let i = 0; i < removedUsers.length; i++) {
         if (changedTags.removed[i] === null) {
@@ -283,7 +283,7 @@ export class UserTags extends PolymerElement {
       // Avoid adding to queue if window is not visible.
       const tags = changedTags.added;
       if (this.flashing) {
-        // schedule next flash later
+        // Schedule next flash later
         this.push('_flashQueue', tags);
       } else {
         this.flashTags(tags);
@@ -296,7 +296,7 @@ export class UserTags extends PolymerElement {
 
   /** @private */
   _onOverlayOpen() {
-    // animate all tags except removing ones
+    // Animate all tags except removing ones
     Array.from(this.wrapper.children).forEach((tag) => {
       if (!tag.classList.contains('removing')) {
         tag.classList.add('show');
@@ -308,11 +308,11 @@ export class UserTags extends PolymerElement {
     this.flashing = true;
     const wrapper = this.wrapper;
 
-    // hide existing tags
+    // Hide existing tags
     const hidden = Array.from(wrapper.children);
     hidden.forEach((tag) => (tag.style.display = 'none'));
 
-    // render new tags
+    // Render new tags
     added.forEach((tag) => {
       wrapper.insertBefore(tag, wrapper.firstChild);
     });
@@ -320,12 +320,12 @@ export class UserTags extends PolymerElement {
     this.flashPromise = new Promise((resolve) => {
       listenOnce(this.$.overlay, 'vaadin-overlay-open').then(() => {
         this._debounceFlashStart = Debouncer.debounce(this._debounceFlashStart, timeOut.after(DURATION + DELAY), () => {
-          // animate disappearing
+          // Animate disappearing
           if (!this.hasFocus) {
             added.forEach((tag) => tag.classList.remove('show'));
           }
           this._debounceFlashEnd = Debouncer.debounce(this._debounceFlashEnd, timeOut.after(DURATION), () => {
-            // show all tags
+            // Show all tags
             const finishFlash = () => {
               hidden.forEach((tag) => (tag.style.display = 'block'));
               this.flashing = false;
@@ -335,7 +335,7 @@ export class UserTags extends PolymerElement {
             if (this.hasFocus) {
               finishFlash();
             } else {
-              // wait for overlay closing animation to complete
+              // Wait for overlay closing animation to complete
               listenOnce(this.$.overlay, 'animationend').then(() => {
                 finishFlash();
               });
@@ -357,8 +357,12 @@ export class UserTags extends PolymerElement {
   }
 
   stopFlash() {
-    this._debounceFlashStart && this._debounceFlashStart.flush();
-    this._debounceFlashEnd && this._debounceFlashEnd.flush();
+    if (this._debounceFlashStart) {
+      this._debounceFlashStart.flush();
+    }
+    if (this._debounceFlashEnd) {
+      this._debounceFlashEnd.flush();
+    }
     this.$.overlay._flushAnimation('closing');
   }
 

package/theme/lumo/vaadin-field-outline-styles.js

@@ -41,5 +41,5 @@ registerStyles(
       box-shadow: inset 0 0 0 2px var(--_active-user-color);
     }
   `,
-  { moduleId: 'lumo-field-outline' }
+  { moduleId: 'lumo-field-outline' },
 );

package/theme/lumo/vaadin-user-tags-styles.js

@@ -37,8 +37,8 @@ registerStyles(
     }
   `,
   {
-    moduleId: 'lumo-user-tags-overlay'
-  }
+    moduleId: 'lumo-user-tags-overlay',
+  },
 );
 
 registerStyles(
@@ -60,5 +60,5 @@ registerStyles(
       min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
     }
   `,
-  { moduleId: 'lumo-user-tag' }
+  { moduleId: 'lumo-user-tag' },
 );

package/theme/material/vaadin-field-outline-styles.js

@@ -39,5 +39,5 @@ registerStyles(
       box-shadow: inset 0 0 0 2px var(--_active-user-color);
     }
   `,
-  { moduleId: 'material-field-outline' }
+  { moduleId: 'material-field-outline' },
 );

package/theme/material/vaadin-user-tags-styles.js

@@ -27,5 +27,5 @@ registerStyles(
       min-width: 1.75em;
     }
   `,
-  { moduleId: 'material-user-tag' }
+  { moduleId: 'material-user-tag' },
 );