feat: add disabled property to vaadin-message-input

src/vaadin-message-input.js

@@ -61,6 +61,16 @@ class MessageInputElement extends ElementMixin(ThemableMixin(PolymerElement)) {
           message: 'Message'
         }),
         observer: '__i18nChanged'
+      },
+
+      /**
+       * Set to true to disable this element.
+       * @type {boolean}
+       */
+      disabled: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
       }
     };
   }
@@ -85,8 +95,8 @@ class MessageInputElement extends ElementMixin(ThemableMixin(PolymerElement)) {
           margin: 0;
         }
       </style>
-      <vaadin-text-area value="{{value}}" placeholder="[[i18n.message]]"></vaadin-text-area>
-      <vaadin-button theme="primary contained" on-click="__submit">[[i18n.send]]</vaadin-button>
+      <vaadin-text-area disabled="[[disabled]]" value="{{value}}" placeholder="[[i18n.message]]"></vaadin-text-area>
+      <vaadin-button disabled="[[disabled]]" theme="primary contained" on-click="__submit">[[i18n.send]]</vaadin-button>
     `;
   }
 

test/message-input.test.js

@@ -106,4 +106,25 @@ describe('message-input', () => {
       expect(textArea.inputElement.getAttribute('aria-label')).to.be.equal('Viesti');
     });
   });
+
+  describe('disabled property', () => {
+    it('should be false by default', () => {
+      expect(messageInput.disabled).to.be.false;
+    });
+
+    it('should be reflected to the attribute', () => {
+      messageInput.disabled = true;
+      expect(messageInput.getAttribute('disabled')).to.exist;
+    });
+
+    it('should be propagated to text-area', () => {
+      messageInput.disabled = true;
+      expect(textArea.disabled).to.be.true;
+    });
+
+    it('should be propagated to button', () => {
+      messageInput.disabled = true;
+      expect(button.disabled).to.be.true;
+    });
+  });
 });