@vaadin/select 24.2.0-alpha4 → 24.2.0-alpha5

package/src/vaadin-select-value-button-styles.js

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const valueButton = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    min-width: 0;
+    width: 0;
+  }
+
+  ::slotted(*) {
+    padding-left: 0;
+    padding-right: 0;
+    flex: auto;
+  }
+
+  /* placeholder styles */
+  ::slotted(*:not([selected])) {
+    line-height: 1;
+  }
+
+  .vaadin-button-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: inherit;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    text-shadow: inherit;
+  }
+
+  [part='label'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    line-height: inherit;
+  }
+`;

package/src/vaadin-select-value-button.js

@@ -5,7 +5,10 @@
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { valueButton } from './vaadin-select-value-button-styles.js';
+
+registerStyles('vaadin-select-value-button', valueButton, { moduleId: 'vaadin-select-value-button-styles' });
 
 /**
  * An element used internally by `<vaadin-select>`. Not intended to be used separately.
@@ -22,49 +25,6 @@ class SelectValueButton extends ButtonMixin(ThemableMixin(PolymerElement)) {
 
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-block;
-          position: relative;
-          outline: none;
-          white-space: nowrap;
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          user-select: none;
-          min-width: 0;
-          width: 0;
-        }
-
-        ::slotted(*) {
-          padding-left: 0;
-          padding-right: 0;
-          flex: auto;
-        }
-
-        /* placeholder styles */
-        ::slotted(*:not([selected])) {
-          line-height: 1;
-        }
-
-        .vaadin-button-container {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          text-align: inherit;
-          width: 100%;
-          height: 100%;
-          min-height: inherit;
-          text-shadow: inherit;
-        }
-
-        [part='label'] {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 100%;
-          line-height: inherit;
-        }
-      </style>
       <div class="vaadin-button-container">
         <span part="label">
           <slot></slot>

package/src/vaadin-select.d.ts

@@ -3,13 +3,9 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
 
 export interface SelectItem {
   label?: string;
@@ -174,87 +170,7 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class Select extends OverlayClassMixin(
-  DelegateFocusMixin(DelegateStateMixin(KeyboardMixin(FieldMixin(ElementMixin(ThemableMixin(HTMLElement)))))),
-) {
-  /**
-   * An array containing items that will be rendered as the options of the select.
-   *
-   * #### Example
-   * ```js
-   * select.items = [
-   *   { label: 'Most recent first', value: 'recent' },
-   *   { component: 'hr' },
-   *   { label: 'Rating: low to high', value: 'rating-asc' },
-   *   { label: 'Rating: high to low', value: 'rating-desc' },
-   *   { component: 'hr' },
-   *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
-   *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
-   * ];
-   * ```
-   *
-   * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
-   * To render the item with a custom component, provide a tag name by the `component` property.
-   *
-   * @type {!Array<!SelectItem>}
-   */
-  items: SelectItem[] | null | undefined;
-
-  /**
-   * Set when the select is open
-   */
-  opened: boolean;
-
-  /**
-   * Custom function for rendering the content of the `<vaadin-select>`.
-   * Receives two arguments:
-   *
-   * - `root` The `<vaadin-select-overlay>` internal container
-   *   DOM element. Append your content to it.
-   * - `select` The reference to the `<vaadin-select>` element.
-   */
-  renderer: SelectRenderer | undefined;
-
-  /**
-   * The `value` property of the selected item, or an empty string
-   * if no item is selected.
-   * On change or initialization, the component finds the item which matches the
-   * value and displays it.
-   * If no value is provided to the component, it selects the first item without
-   * value or empty value.
-   * Hint: If you do not want to select any item by default, you can either set all
-   * the values of inner vaadin-items, or set the vaadin-select value to
-   * an inexistent value in the items list.
-   */
-  value: string;
-
-  /**
-   * The name of this element.
-   */
-  name: string | null | undefined;
-
-  /**
-   * A hint to the user of what can be entered in the control.
-   * The placeholder will be displayed in the case that there
-   * is no item selected, or the selected item has an empty
-   * string label, or the selected item has no label and it's
-   * DOM content is empty.
-   */
-  placeholder: string | null | undefined;
-
-  /**
-   * When present, it specifies that the element is read-only.
-   */
-  readonly: boolean;
-
-  /**
-   * Requests an update for the content of the select.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate(): void;
-
+declare class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof SelectEventMap>(
     type: K,
     listener: (this: Select, ev: SelectEventMap[K]) => void,