@vaadin/vaadin-select 2.4.3 → 2.5.0

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-select",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-select",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "main": "vaadin-select.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@vaadin/vaadin-control-state-mixin": "^2.2.1",
     "@vaadin/vaadin-themable-mixin": "^1.6.1",
-    "@vaadin/vaadin-text-field": "^2.8.0",
+    "@vaadin/vaadin-text-field": "^2.10.0",
     "@vaadin/vaadin-list-box": "^1.4.0",
     "@vaadin/vaadin-list-mixin": "^2.5.0",
     "@vaadin/vaadin-item": "^2.3.0",

package/src/vaadin-select-overlay.js

@@ -15,6 +15,22 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-select-overlay-styles" t
         align-items: flex-start;
         justify-content: flex-start;
       }
+
+      :host([bottom-aligned]) {
+        justify-content: flex-end;
+      }
+
+      :host([right-aligned]) {
+        align-items: flex-end;
+      }
+
+      :host([dir="rtl"]) {
+        align-items: flex-end;
+      }
+
+      :host([dir="rtl"][right-aligned]) {
+        align-items: flex-start;
+      }
     </style>
   </template>
 </dom-module>`;

package/src/vaadin-select.d.ts

@@ -214,9 +214,17 @@ declare class SelectElement extends
   notifyResize(): void;
   _onKeyDown(e: KeyboardEvent): void;
   _onKeyDownInside(e: KeyboardEvent): void;
+  _setInvalid(invalid: boolean): void;
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Override this method to define whether the given `invalid` state should be set.
+   */
+  _shouldSetInvalid(_invalid: boolean): boolean;
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
    *
    * @returns True if the value is valid and sets the `invalid` flag appropriately
    */

package/src/vaadin-select.js

@@ -178,7 +178,7 @@ class SelectElement extends
   }
 
   static get version() {
-    return '2.4.3';
+    return '2.5.0';
   }
 
   static get properties() {
@@ -680,17 +680,22 @@ class SelectElement extends
   /** @private */
   _setPosition() {
     const inputRect = this._inputElement.shadowRoot.querySelector('[part~="input-field"]').getBoundingClientRect();
+    const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
     const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
-    const bottomAlign = inputRect.top > (viewportHeight - inputRect.height) / 2;
+    const shouldAlignRight = this.__shouldAlignRight(inputRect, viewportWidth);
+    const shouldAlignBottom = this.__shouldAlignBottom(inputRect, viewportHeight);
 
-    const isRtl = this.getAttribute('dir') === 'rtl';
-    if (isRtl) {
-      this._overlayElement.style.right = document.documentElement.clientWidth - inputRect.right + 'px';
+    if (shouldAlignRight) {
+      this._overlayElement.setAttribute('right-aligned', '');
+      this._overlayElement.style.right = (viewportWidth - inputRect.right) + 'px';
+      this._overlayElement.style.removeProperty('left');
     } else {
+      this._overlayElement.removeAttribute('right-aligned');
       this._overlayElement.style.left = inputRect.left + 'px';
+      this._overlayElement.style.removeProperty('right');
     }
 
-    if (bottomAlign) {
+    if (shouldAlignBottom) {
       this._overlayElement.setAttribute('bottom-aligned', '');
       this._overlayElement.style.removeProperty('top');
       this._overlayElement.style.bottom = (viewportHeight - inputRect.bottom) + 'px';
@@ -703,13 +708,75 @@ class SelectElement extends
     this._overlayElement.updateStyles({'--vaadin-select-text-field-width': inputRect.width + 'px'});
   }
 
+  /** @private */
+  __shouldAlignRight(targetRect, viewportWidth) {
+    const isRTL = this.getAttribute('dir') === 'rtl';
+    const spaceLeft = targetRect.left / viewportWidth;
+    const spaceRight = (viewportWidth - targetRect.right) / viewportWidth;
+
+    if (isRTL) {
+      // When RTL mode, should align the dropdown right
+      // as long as there is enough space on the left side.
+      //
+      // Default alignment for RTL:
+      //
+      //           _____Select_____
+      // ––––––––––––––––––––––––––
+      // | Dropdown               |
+      // ––––––––––––––––––––––––––
+      return spaceLeft > 0.3;
+    }
+
+    // When LTL mode, should align the dropdown right
+    // only when there is not enough space on the right side.
+    //
+    // Default alignment for LTL:
+    //
+    // _____Select_____
+    // ––––––––––––––––––––––––––
+    // | Dropdown               |
+    // ––––––––––––––––––––––––––
+    return spaceRight < 0.3;
+  }
+
+  /** @private */
+  __shouldAlignBottom(targetRect, viewportHeight) {
+    return targetRect.top > (viewportHeight - targetRect.height) / 2;
+  }
+
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * @param {boolean} invalid
+   * @protected
+   */
+  _setInvalid(invalid) {
+    if (this._shouldSetInvalid(invalid)) {
+      this.invalid = invalid;
+    }
+  }
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   *
+   * @param {boolean} _invalid
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetInvalid(_invalid) {
+    return true;
+  }
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
    *
    * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
    */
   validate() {
-    return !(this.invalid = !(this.disabled || !this.required || this.value));
+    const isValid = !!(this.disabled || !this.required || this.value);
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   /**
@@ -717,6 +784,14 @@ class SelectElement extends
    *
    * @event change
    */
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 }
 
 customElements.define(SelectElement.is, SelectElement);

package/theme/lumo/vaadin-select-styles.js

@@ -105,10 +105,6 @@ const $_documentContainer = html`<dom-module id="lumo-select" theme-for="vaadin-
         --_lumo-item-selected-icon-display: block;
       }
 
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
       [part~="overlay"] {
         min-width: var(--vaadin-select-text-field-width);
       }

package/theme/material/vaadin-select-styles.js

@@ -55,10 +55,6 @@ const $_documentContainer = html`<dom-module id="material-select" theme-for="vaa
 </dom-module><dom-module id="material-select-overlay" theme-for="vaadin-select-overlay">
   <template>
     <style include="material-menu-overlay">
-      :host([bottom-aligned]) {
-        justify-content: flex-end;
-      }
-
       [part="overlay"] {
         min-width: var(--vaadin-select-text-field-width);
       }