@vaadin/message-input 23.3.0-alpha5 → 24.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-input",
-  "version": "23.3.0-alpha5",
+  "version": "24.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,12 +36,12 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.3.0-alpha5",
-    "@vaadin/component-base": "23.3.0-alpha5",
-    "@vaadin/text-area": "23.3.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha5",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha5"
+    "@vaadin/button": "24.0.0-alpha2",
+    "@vaadin/component-base": "24.0.0-alpha2",
+    "@vaadin/text-area": "24.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "0b6fdcf444683e97e3efb433d603e1274d5bcd66"
+  "gitHead": "0c16c01a6807e629a84f5a982793afecc1a7ced0"
 }

package/src/vaadin-message-input.js

@@ -3,11 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-message-input-text-area.js';
-import './vaadin-message-input-button.js';
+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 { 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';
 
@@ -23,16 +24,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * <vaadin-message-input></vaadin-message-input>
  * ```
  *
- * ### Internal components
- *
- * In addition to `<vaadin-message-input>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-message-input-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-message-input-text-area>` - has the same API as [`<vaadin-text-area>`](#/elements/vaadin-text-area).
- *
  * @extends HTMLElement
- * @mizes ControllerMixin
+ * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
@@ -44,10 +37,10 @@ class MessageInput extends ElementMixin(ThemableMixin(ControllerMixin(PolymerEle
        */
       value: {
         type: String,
+        value: '',
       },
 
       /**
-       *
        * The object used to localize this component.
        * For changing the default localization, change the entire
        * `i18n` object.
@@ -84,6 +77,16 @@ class MessageInput extends ElementMixin(ThemableMixin(ControllerMixin(PolymerEle
         value: false,
         reflectToAttribute: true,
       },
+
+      /** @private */
+      _button: {
+        type: Object,
+      },
+
+      /** @private */
+      _textArea: {
+        type: Object,
+      },
     };
   }
 
@@ -102,17 +105,19 @@ class MessageInput extends ElementMixin(ThemableMixin(ControllerMixin(PolymerEle
         :host([hidden]) {
           display: none !important;
         }
+
+        ::slotted([slot='button']) {
+          flex-shrink: 0;
+        }
+
+        ::slotted([slot='textarea']) {
+          align-self: stretch;
+          flex-grow: 1;
+        }
       </style>
-      <vaadin-message-input-text-area
-        disabled="[[disabled]]"
-        value="{{value}}"
-        placeholder="[[i18n.message]]"
-        aria-label="[[i18n.message]]"
-        on-enter="__submit"
-      ></vaadin-message-input-text-area>
-      <vaadin-message-input-button disabled="[[disabled]]" theme="primary contained" on-click="__submit"
-        >[[i18n.send]]</vaadin-message-input-button
-      >
+      <slot name="textarea"></slot>
+
+      <slot name="button"></slot>
 
       <slot name="tooltip"></slot>
     `;
@@ -122,14 +127,91 @@ class MessageInput extends ElementMixin(ThemableMixin(ControllerMixin(PolymerEle
     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',
+      () => document.createElement('vaadin-button'),
+      (_, btn) => {
+        btn.setAttribute('theme', 'primary contained');
+
+        btn.addEventListener('click', () => {
+          this.__submit();
+        });
+
+        this._button = btn;
+      },
+    );
+    this.addController(this._buttonController);
+
+    this._textAreaController = new SlotController(
+      this,
+      'textarea',
+      () => document.createElement('vaadin-text-area'),
+      (_, 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);
   }
 
+  /** @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.
@@ -141,7 +223,7 @@ class MessageInput extends ElementMixin(ThemableMixin(ControllerMixin(PolymerEle
       this.dispatchEvent(new CustomEvent('submit', { detail: { value: this.value } }));
       this.value = '';
     }
-    this.shadowRoot.querySelector('vaadin-message-input-text-area').focus();
+    this._textArea.focus();
   }
 }
 

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

@@ -10,6 +10,10 @@ registerStyles(
     :host {
       padding: var(--lumo-space-s) var(--lumo-space-m);
     }
+
+    ::slotted([slot='textarea']) {
+      margin-inline-end: var(--lumo-space-s);
+    }
   `,
   { moduleId: 'lumo-message-input' },
 );

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

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

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

@@ -8,6 +8,11 @@ registerStyles(
     :host {
       padding: 0.5em 1em;
     }
+
+    ::slotted([slot='textarea']) {
+      margin: 0;
+      margin-inline-end: 0.5em;
+    }
   `,
   { moduleId: 'material-message-input' },
 );

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

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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "23.3.0-alpha5",
+  "version": "24.0.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-message-input",
-          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```\n\n### Internal components\n\nIn addition to `<vaadin-message-input>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-input-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-button).\n- `<vaadin-message-input-text-area>` - has the same API as [`<vaadin-text-area>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-text-area).",
+          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```",
           "attributes": [
             {
               "name": "value",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "23.3.0-alpha5",
+  "version": "24.0.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-message-input",
-          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```\n\n### Internal components\n\nIn addition to `<vaadin-message-input>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-input-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-button).\n- `<vaadin-message-input-text-area>` - has the same API as [`<vaadin-text-area>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha5/#/elements/vaadin-text-area).",
+          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```",
           "extension": true,
           "attributes": [
             {

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

@@ -1,20 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { Button } from '@vaadin/button/src/vaadin-button.js';
-
-/**
- * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
- *
- * @extends Button
- * @protected
- */
-declare class MessageInputButton extends Button {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-message-input-button': MessageInputButton;
-  }
-}

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

@@ -1,31 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { Button } from '@vaadin/button/src/vaadin-button.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-input-button',
-  css`
-    :host {
-      flex-shrink: 0;
-    }
-  `,
-  { moduleId: 'vaadin-message-input-button-styles' },
-);
-
-/**
- * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
- *
- * @extends Button
- * @protected
- */
-class MessageInputButton extends Button {
-  static get is() {
-    return 'vaadin-message-input-button';
-  }
-}
-
-customElements.define(MessageInputButton.is, MessageInputButton);

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

@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { TextArea } from '@vaadin/text-area/src/vaadin-text-area.js';
-
-/**
- * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
- *
- * @protected
- */
-declare class MessageInputTextArea extends TextArea {
-  ariaLabel: string;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-message-input-text-area': MessageInputTextArea;
-  }
-}

package/src/vaadin-message-input-text-area.js

@@ -1,99 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { TextArea } from '@vaadin/text-area/src/vaadin-text-area.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-input-text-area',
-  css`
-    :host {
-      align-self: stretch;
-      flex-grow: 1;
-    }
-
-    .textarea-wrapper {
-      min-height: 0;
-    }
-  `,
-  { moduleId: 'vaadin-message-input-text-area-styles' },
-);
-
-/**
- * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
- *
- * @extends TextArea
- * @protected
- */
-class MessageInputTextArea extends TextArea {
-  static get is() {
-    return 'vaadin-message-input-text-area';
-  }
-
-  static get properties() {
-    return {
-      ariaLabel: {
-        type: String,
-        observer: '__ariaLabelChanged',
-      },
-    };
-  }
-
-  /**
-   * Override an observer from `InputMixin`.
-   * @protected
-   * @override
-   */
-  _inputElementChanged(input) {
-    super._inputElementChanged(input);
-
-    if (input) {
-      input.removeAttribute('aria-labelledby');
-
-      // Set initial height to one row
-      input.setAttribute('rows', 1);
-      input.style.minHeight = '0';
-
-      this.__updateAriaLabel(this.ariaLabel);
-    }
-  }
-
-  /**
-   * Override an event listener from `InputControlMixin`
-   * to dispatch a custom event on Enter key.
-   * @param {!KeyboardEvent} event
-   * @protected
-   * @override
-   */
-  _onKeyDown(event) {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.dispatchEvent(new CustomEvent('enter'));
-    }
-
-    super._onKeyDown(event);
-  }
-
-  /** @private */
-  __updateAriaLabel(ariaLabel) {
-    if (ariaLabel) {
-      this.inputElement.setAttribute('aria-label', ariaLabel);
-    } else {
-      this.inputElement.removeAttribute('aria-label');
-    }
-  }
-
-  /** @private */
-  __ariaLabelChanged(ariaLabel) {
-    if (!this.inputElement) {
-      return;
-    }
-
-    this.__updateAriaLabel(ariaLabel);
-  }
-}
-
-customElements.define(MessageInputTextArea.is, MessageInputTextArea);

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

@@ -1,2 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '../../src/vaadin-message-input-button.js';

package/theme/lumo/vaadin-message-input-text-area-styles.js

@@ -1,15 +0,0 @@
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-input-text-area',
-  css`
-    :host {
-      margin: 0 var(--lumo-space-s) 0 0;
-    }
-
-    :host([dir='rtl']) {
-      margin: 0 0 0 var(--lumo-space-s);
-    }
-  `,
-  { moduleId: 'lumo-message-input-text-area' },
-);

package/theme/lumo/vaadin-message-input-text-area.js

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

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

@@ -1,2 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '../../src/vaadin-message-input-button.js';

package/theme/material/vaadin-message-input-text-area-styles.js

@@ -1,15 +0,0 @@
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-input-text-area',
-  css`
-    :host {
-      margin: 0 0.5em 0 0;
-    }
-
-    :host([dir='rtl']) {
-      margin: 0 0 0 0.5em;
-    }
-  `,
-  { moduleId: 'material-message-input-text-area' },
-);

package/theme/material/vaadin-message-input-text-area.js

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