@vaadin/message-input 24.6.0-beta1 → 24.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-input",
-  "version": "24.6.0-beta1",
+  "version": "24.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,18 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.6.0-beta1",
-    "@vaadin/component-base": "24.6.0-beta1",
-    "@vaadin/text-area": "24.6.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.6.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-beta1"
+    "@vaadin/button": "~24.6.0",
+    "@vaadin/component-base": "~24.6.0",
+    "@vaadin/text-area": "~24.6.0",
+    "@vaadin/vaadin-lumo-styles": "~24.6.0",
+    "@vaadin/vaadin-material-styles": "~24.6.0",
+    "@vaadin/vaadin-themable-mixin": "~24.6.0",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-beta1",
+    "@vaadin/chai-plugins": "~24.6.0",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -52,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ab28efb0dcf2cd1ef72100e2e8f32232fa49aacc"
+  "gitHead": "c0b38aa981494d04fac64da35aa3890ad72551ea"
 }

package/src/vaadin-lit-message-input.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-message-input.js';

package/src/vaadin-lit-message-input.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/button/src/vaadin-lit-button.js';
+import '@vaadin/text-area/src/vaadin-lit-text-area.js';
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageInputMixin } from './vaadin-message-input-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-message-input>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class MessageInput extends MessageInputMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-message-input';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        align-items: flex-start;
+        box-sizing: border-box;
+        display: flex;
+        max-height: 50vh;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      ::slotted([slot='button']) {
+        flex-shrink: 0;
+      }
+
+      ::slotted([slot='textarea']) {
+        align-self: stretch;
+        flex-grow: 1;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot name="textarea"></slot>
+
+      <slot name="button"></slot>
+
+      <slot name="tooltip"></slot>
+    `;
+  }
+}
+
+defineCustomElement(MessageInput);
+
+export { MessageInput };

package/src/vaadin-message-input-mixin.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+
+export interface MessageInputI18n {
+  send: string;
+  message: string;
+}
+
+export declare function MessageInputMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> & Constructor<MessageInputMixinClass> & T;
+
+export declare class MessageInputMixinClass {
+  /**
+   * Current content of the text input field
+   */
+  value: string | null | undefined;
+
+  /**
+   * The object used to localize this component.
+   * For changing the default localization, change the entire
+   * `i18n` object.
+   *
+   * The object has the following JSON structure and default values:
+   *
+   * ```
+   * {
+   *   // Used as the button label
+   *   send: 'Send',
+   *
+   *   // Used as the input field's placeholder and aria-label
+   *   message: 'Message'
+   * }
+   * ```
+   */
+  i18n: MessageInputI18n;
+
+  /**
+   * Set to true to disable this element.
+   */
+  disabled: boolean;
+}

package/src/vaadin-message-input-mixin.js

@@ -0,0 +1,188 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+
+/**
+ * @polymerMixin
+ * @mixes ControllerMixin
+ */
+export const MessageInputMixin = (superClass) =>
+  class MessageInputMixinClass extends ControllerMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * Current content of the text input field
+         */
+        value: {
+          type: String,
+          value: '',
+          sync: true,
+        },
+
+        /**
+         * The object used to localize this component.
+         * For changing the default localization, change the entire
+         * `i18n` object.
+         *
+         * The object has the following JSON structure and default values:
+         *
+         * ```
+         * {
+         *   // Used as the button label
+         *   send: 'Send',
+         *
+         *   // Used as the input field's placeholder and aria-label
+         *   message: 'Message'
+         * }
+         * ```
+         *
+         * @type {!MessageInputI18n}
+         * @default {English}
+         */
+        i18n: {
+          type: Object,
+          sync: true,
+          value: () => ({
+            send: 'Send',
+            message: 'Message',
+          }),
+        },
+
+        /**
+         * Set to true to disable this element.
+         * @type {boolean}
+         */
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          sync: true,
+        },
+
+        /** @private */
+        _button: {
+          type: Object,
+          sync: true,
+        },
+
+        /** @private */
+        _textArea: {
+          type: Object,
+          sync: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return [
+        '__buttonPropsChanged(_button, disabled, i18n)',
+        '__textAreaPropsChanged(_textArea, disabled, i18n, value)',
+      ];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._buttonController = new SlotController(this, 'button', 'vaadin-button', {
+        initializer: (btn) => {
+          btn.setAttribute('theme', 'primary contained');
+
+          btn.addEventListener('click', () => {
+            this.__submit();
+          });
+
+          this._button = btn;
+        },
+      });
+      this.addController(this._buttonController);
+
+      this._textAreaController = new SlotController(this, 'textarea', 'vaadin-text-area', {
+        initializer: (textarea) => {
+          textarea.addEventListener('value-changed', (event) => {
+            this.value = event.detail.value;
+          });
+
+          textarea.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+              this.__submit();
+            }
+          });
+
+          // With Lit version, input element renders asynchronously and it will
+          // override the `rows` attribute set to `1` in the `minRows` observer.
+          // Workaround: perform update twice to run the observer synchronously.
+          // TODO: needs https://github.com/vaadin/web-components/pull/8168
+          if (textarea.performUpdate) {
+            textarea.performUpdate();
+            textarea.performUpdate();
+          }
+
+          const input = textarea.inputElement;
+
+          // Set initial height to one row
+          input.setAttribute('rows', 1);
+          input.style.minHeight = '0';
+
+          this._textArea = textarea;
+        },
+      });
+      this.addController(this._textAreaController);
+
+      this._tooltipController = new TooltipController(this);
+      this.addController(this._tooltipController);
+    }
+
+    focus() {
+      if (this._textArea) {
+        this._textArea.focus();
+      }
+    }
+
+    /** @private */
+    __buttonPropsChanged(button, disabled, i18n) {
+      if (button) {
+        button.disabled = disabled;
+        button.textContent = i18n.send;
+      }
+    }
+
+    /** @private */
+    __textAreaPropsChanged(textArea, disabled, i18n, value) {
+      if (textArea) {
+        textArea.disabled = disabled;
+        textArea.value = value;
+
+        const message = i18n.message;
+        textArea.placeholder = message;
+        textArea.accessibleName = message;
+      }
+    }
+
+    /**
+     * Submits the current value as an custom event named 'submit'.
+     * It also clears the text input and refocuses it for sending another message.
+     * In UI, can be triggered by pressing the submit button or pressing enter key when field is focused.
+     * It does not submit anything if text is empty.
+     */
+    __submit() {
+      if (this.value !== '') {
+        this.dispatchEvent(new CustomEvent('submit', { detail: { value: this.value } }));
+        this.value = '';
+      }
+      this._textArea.focus();
+    }
+
+    /**
+     * Fired when a new message is submitted with `<vaadin-message-input>`, either
+     * by clicking the "send" button, or pressing the Enter key.
+     * @event submit
+     */
+  };

package/src/vaadin-message-input.d.ts

@@ -3,14 +3,11 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageInputMixin } from './vaadin-message-input-mixin.js';
 
-export interface MessageInputI18n {
-  send: string;
-  message: string;
-}
+export { MessageInputI18n } from './vaadin-message-input-mixin.js';
 
 /**
  * Fired when a new message is submitted with `<vaadin-message-input>`, either
@@ -36,36 +33,7 @@ export type MessageInputEventMap = HTMLElementEventMap & MessageInputCustomEvent
  * <vaadin-message-input></vaadin-message-input>
  * ```
  */
-declare class MessageInput extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))) {
-  /**
-   * Current content of the text input field
-   */
-  value: string | null | undefined;
-
-  /**
-   * The object used to localize this component.
-   * For changing the default localization, change the entire
-   * `i18n` object.
-   *
-   * The object has the following JSON structure and default values:
-   *
-   * ```
-   * {
-   *   // Used as the button label
-   *   send: 'Send',
-   *
-   *   // Used as the input field's placeholder and aria-label
-   *   message: 'Message'
-   * }
-   * ```
-   */
-  i18n: MessageInputI18n;
-
-  /**
-   * Set to true to disable this element.
-   */
-  disabled: boolean;
-
+declare class MessageInput extends MessageInputMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   addEventListener<K extends keyof MessageInputEventMap>(
     type: K,
     listener: (this: MessageInput, ev: MessageInputEventMap[K]) => void,

package/src/vaadin-message-input.js

@@ -6,12 +6,10 @@
 import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/text-area/src/vaadin-text-area.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageInputMixin } from './vaadin-message-input-mixin.js';
 
 /**
  * `<vaadin-message-input>` is a Web Component for sending messages.
@@ -27,71 +25,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
+ * @mixes MessageInputMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class MessageInput extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
-  static get properties() {
-    return {
-      /**
-       * Current content of the text input field
-       */
-      value: {
-        type: String,
-        value: '',
-      },
-
-      /**
-       * The object used to localize this component.
-       * For changing the default localization, change the entire
-       * `i18n` object.
-       *
-       * The object has the following JSON structure and default values:
-       *
-       * ```
-       * {
-       *   // Used as the button label
-       *   send: 'Send',
-       *
-       *   // Used as the input field's placeholder and aria-label
-       *   message: 'Message'
-       * }
-       * ```
-       *
-       * @type {!MessageInputI18n}
-       * @default {English}
-       */
-      i18n: {
-        type: Object,
-        value: () => ({
-          send: 'Send',
-          message: 'Message',
-        }),
-      },
-
-      /**
-       * Set to true to disable this element.
-       * @type {boolean}
-       */
-      disabled: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /** @private */
-      _button: {
-        type: Object,
-      },
-
-      /** @private */
-      _textArea: {
-        type: Object,
-      },
-    };
-  }
-
+class MessageInput extends MessageInputMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -128,111 +66,6 @@ class MessageInput extends ElementMixin(ThemableMixin(ControllerMixin(PolymerEle
   static get is() {
     return 'vaadin-message-input';
   }
-
-  static get observers() {
-    return [
-      '__buttonPropsChanged(_button, disabled, i18n)',
-      '__textAreaPropsChanged(_textArea, disabled, i18n, value)',
-    ];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._buttonController = new SlotController(this, 'button', 'vaadin-button', {
-      initializer: (btn) => {
-        btn.setAttribute('theme', 'primary contained');
-
-        btn.addEventListener('click', () => {
-          this.__submit();
-        });
-
-        this._button = btn;
-      },
-    });
-    this.addController(this._buttonController);
-
-    this._textAreaController = new SlotController(this, 'textarea', 'vaadin-text-area', {
-      initializer: (textarea) => {
-        textarea.addEventListener('value-changed', (event) => {
-          this.value = event.detail.value;
-        });
-
-        textarea.addEventListener('keydown', (event) => {
-          if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            this.__submit();
-          }
-        });
-
-        const input = textarea.inputElement;
-        input.removeAttribute('aria-labelledby');
-
-        // Set initial height to one row
-        input.setAttribute('rows', 1);
-        input.style.minHeight = '0';
-
-        this._textArea = textarea;
-      },
-    });
-    this.addController(this._textAreaController);
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-  }
-
-  focus() {
-    if (this._textArea) {
-      this._textArea.focus();
-    }
-  }
-
-  /** @private */
-  __buttonPropsChanged(button, disabled, i18n) {
-    if (button) {
-      button.disabled = disabled;
-      button.textContent = i18n.send;
-    }
-  }
-
-  /** @private */
-  __textAreaPropsChanged(textArea, disabled, i18n, value) {
-    if (textArea) {
-      textArea.disabled = disabled;
-      textArea.value = value;
-
-      const message = i18n.message;
-      textArea.placeholder = message;
-
-      if (message) {
-        textArea.inputElement.setAttribute('aria-label', message);
-      } else {
-        textArea.inputElement.removeAttribute('aria-label');
-      }
-    }
-  }
-
-  /**
-   * Submits the current value as an custom event named 'submit'.
-   * It also clears the text input and refocuses it for sending another message.
-   * In UI, can be triggered by pressing the submit button or pressing enter key when field is focused.
-   * It does not submit anything if text is empty.
-   */
-  __submit() {
-    if (this.value !== '') {
-      this.dispatchEvent(new CustomEvent('submit', { detail: { value: this.value } }));
-      this.value = '';
-    }
-    this._textArea.focus();
-  }
-
-  /**
-   * Fired when a new message is submitted with `<vaadin-message-input>`, either
-   * by clicking the "send" button, or pressing the Enter key.
-   * @event submit
-   */
 }
 
 defineCustomElement(MessageInput);

package/theme/lumo/vaadin-lit-message-input.d.ts

@@ -0,0 +1,4 @@
+import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
+import '@vaadin/text-area/theme/lumo/vaadin-lit-text-area.js';
+import './vaadin-message-input-styles.js';
+import '../../src/vaadin-lit-message-input.js';

package/theme/lumo/vaadin-lit-message-input.js

@@ -0,0 +1,4 @@
+import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
+import '@vaadin/text-area/theme/lumo/vaadin-lit-text-area.js';
+import './vaadin-message-input-styles.js';
+import '../../src/vaadin-lit-message-input.js';

package/theme/material/vaadin-lit-message-input.d.ts

@@ -0,0 +1,4 @@
+import '@vaadin/button/theme/material/vaadin-lit-button.js';
+import '@vaadin/text-area/theme/material/vaadin-lit-text-area.js';
+import './vaadin-message-input-styles.js';
+import '../../src/vaadin-lit-message-input.js';

package/theme/material/vaadin-lit-message-input.js

@@ -0,0 +1,4 @@
+import '@vaadin/button/theme/material/vaadin-lit-button.js';
+import '@vaadin/text-area/theme/material/vaadin-lit-text-area.js';
+import './vaadin-message-input-styles.js';
+import '../../src/vaadin-lit-message-input.js';

package/vaadin-lit-message-input.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-message-input.js';

package/vaadin-lit-message-input.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-message-input.js';
+export * from './src/vaadin-lit-message-input.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "24.6.0-beta1",
+  "version": "24.6.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "24.6.0-beta1",
+  "version": "24.6.0",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {