experiment: add LitElement based version of message-list (#8245)

packages/message-list/src/vaadin-lit-message-list.d.ts

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

packages/message-list/src/vaadin-lit-message-list.js

@@ -0,0 +1,53 @@
+/**
+ * @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-lit-message.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 { MessageListMixin } from './vaadin-message-list-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-message-list>` 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 MessageList extends MessageListMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-message-list';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        overflow: auto;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="list" role="list">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(MessageList);
+
+export { MessageList };

packages/message-list/src/vaadin-lit-message.d.ts

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

packages/message-list/src/vaadin-lit-message.js

@@ -0,0 +1,50 @@
+/**
+ * @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/avatar/src/vaadin-lit-avatar.js';
+import { 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 { MessageMixin } from './vaadin-message-mixin.js';
+import { messageStyles } from './vaadin-message-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-message>` 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 Message extends MessageMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-message';
+  }
+
+  static get styles() {
+    return messageStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot name="avatar"></slot>
+      <div part="content">
+        <div part="header">
+          <span part="name">${this.userName}</span>
+          <span part="time">${this.time}</span>
+        </div>
+        <div part="message"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(Message);
+
+export { Message };

packages/message-list/src/vaadin-message-list-mixin.js

@@ -35,6 +35,7 @@ export const MessageListMixin = (superClass) =>
           type: Array,
           value: () => [],
           observer: '_itemsChanged',
+          sync: true,
         },
       };
     }

packages/message-list/test/message-list-lit.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-message-list.js';
+import './message-list.common.js';

packages/message-list/test/message-list-polymer.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-message-list.js';
+import './message-list.common.js';

packages/message-list/test/message-list.test.js → packages/message-list/test/message-list.common.js

@@ -12,7 +12,6 @@ import {
   nextRender,
   tabKeyDown,
 } from '@vaadin/testing-helpers';
-import '../vaadin-message-list.js';
 
 describe('message-list', () => {
   let messageList, messages;
@@ -107,7 +106,7 @@ describe('message-list', () => {
       expect(firstMessage.userImg).to.be.equal(messages[0].userImg);
       expect(firstMessage.userColorIndex).to.be.equal(messages[0].userColorIndex);
       expect(firstMessage.textContent).to.be.equal(messages[0].text);
-      expect(firstMessage.theme).to.be.equal(messages[0].theme);
+      expect(firstMessage.getAttribute('theme')).to.be.equal(messages[0].theme);
     });
 
     describe('adding / removing', () => {

packages/message-list/test/message-lit.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-message.js';
+import './message.common.js';

packages/message-list/test/message-polymer.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-message.js';
+import './message.common.js';

packages/message-list/test/message.test.js → packages/message-list/test/message.common.js

@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync } from '@vaadin/testing-helpers';
-import '../vaadin-message.js';
 
 describe('message', () => {
   let message, tagName;

packages/message-list/theme/lumo/vaadin-lit-message-list.js

@@ -0,0 +1,2 @@
+import './vaadin-message-list-styles.js';
+import '../../src/vaadin-lit-message-list.js';

packages/message-list/theme/lumo/vaadin-lit-message.js

@@ -0,0 +1,2 @@
+import './vaadin-message-styles.js';
+import '../../src/vaadin-lit-message.js';

packages/message-list/theme/material/vaadin-lit-message-list.js

@@ -0,0 +1,2 @@
+import './vaadin-message-list-styles.js';
+import '../../src/vaadin-lit-message-list.js';

packages/message-list/theme/material/vaadin-lit-message.js

@@ -0,0 +1,2 @@
+import './vaadin-message-styles.js';
+import '../../src/vaadin-lit-message.js';

packages/message-list/vaadin-lit-message-list.d.ts

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

packages/message-list/vaadin-lit-message-list.js

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

packages/message-list/vaadin-lit-message.d.ts

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

packages/message-list/vaadin-lit-message.js

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