Slotted input

demo/demos.json

@@ -31,6 +31,16 @@
         "image": ""
       }
     },
+    {
+      "name": "Custom Input",
+      "url": "text-field-custom-demos",
+      "src": "text-field-custom-demos.html",
+      "meta": {
+        "title": "Vaadin Text Field Custom Input Examples",
+        "description": "",
+        "image": ""
+      }
+    },
     {
       "name": "RTL",
       "url": "text-field-rtl-demos",

demo/index.html

@@ -18,6 +18,7 @@
   <link rel="import" href="../vaadin-text-area.html">
   <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../vaadin-lumo-styles/icons.html">
+  <link rel="import" href="../theme/lumo/vaadin-placeholder-styles.html">
 
   <!-- Used in the styling examples, keep in sync -->
   <dom-module id="my-text-field-styles" theme-for="vaadin-text-field vaadin-text-area">
@@ -35,6 +36,13 @@
     </template>
   </dom-module>
 
+  <!-- Used for the custom input examples -->
+  <dom-module id="included-lumo-placeholder-styles" theme-for="vaadin-demo-shadow-dom-renderer">
+    <template>
+      <style include="lumo-placeholder-styles"></style>
+    </template>
+  </dom-module>
+
   <custom-style>
     <style include="vaadin-component-demo-shared-styles"></style>
   </custom-style>

demo/text-field-custom-demos.html

@@ -0,0 +1,78 @@
+<dom-module id="text-field-custom-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <h3>Custom Input</h3>
+    <p>
+      <b>Note:</b> In order to apply lumo or material theme styles to the placeholder
+      of the slotted input you should explicitly import a file
+      `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+      and include styles into the same scope as `vaadin-text-field`:
+      <code>&lt;custom-style&gt;&lt;style include="lumo-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code> OR 
+      <code>&lt;custom-style&gt;&lt;style include="material-placeholder-styles"&gt;&lt;/style&gt;&lt;/custom-style&gt;</code>
+    </p>
+    <vaadin-demo-snippet id="text-field-custom-demos-phone">
+      <template preserve-content>
+        <custom-style>
+          <style include="lumo-placeholder-styles"></style>
+        </custom-style>
+        <vaadin-text-field label="Name">
+          <input type="text" slot="input">
+        </vaadin-text-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Number Input</h3>
+    <p>
+      <b>Note:</b> All properties and attributes that `vaadin-text-field` has should be defined on the host.
+    </p>
+    <vaadin-demo-snippet id="text-field-custom-demos-phone">
+      <template preserve-content>
+        <vaadin-text-field label="Amount" pattern="^[1-9]{1,2}[0]?|100" prevent-invalid-input value="0">
+          <input type="number" slot="input" min="0" max="100" step="2">
+        </vaadin-text-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Email Input</h3>
+    <vaadin-demo-snippet id="text-field-custom-demos-email">
+      <template preserve-content>
+        <vaadin-text-field label="Email" required error-message="Please enter valid email"  pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$">
+          <input type="email" slot="input">
+        </vaadin-text-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Password Field</h3>
+    <vaadin-demo-snippet id="text-field-custom-demos-pass">
+      <template preserve-content>
+        <vaadin-password-field label="Password">
+          <input type="password" slot="input">
+        </vaadin-password-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Textarea</h3>
+    <vaadin-demo-snippet id="text-field-custom-demos-textarea">
+      <template preserve-content>
+        <vaadin-text-area label="Textarea">
+          <textarea slot="textarea"></textarea>
+        </vaadin-text-area>
+      </template>
+    </vaadin-demo-snippet>
+
+
+  </template>
+  <script>
+    class TextFieldCustomDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {
+      static get is() {
+        return 'text-field-custom-demos';
+      }
+    }
+    customElements.define(TextFieldCustomDemos.is, TextFieldCustomDemos);
+  </script>
+</dom-module>

src/vaadin-password-field.html

@@ -52,6 +52,39 @@
        * </vaadin-password-field>
        * ```
        *
+       * ### Custom input
+       *
+       * It is possible to use custom input within `<vaadin-password-field>`.
+       * In order for an input to be considered as a custom input, it must have the slot
+       * attribute set to `input`.
+       *
+       * **NOTE:** when using custom input: all properties and attributes that the
+       * `<vaadin-password-field>` has should be defined on the host element. They will be
+       * automatically propagated to the custom input.
+       *
+       * ```html
+       * <vaadin-password-field label="Password">
+       *   <input type="password" slot="input">
+       * </vaadin-password-field>
+       * ```
+       *
+       * **NOTE:** when using custom input: in order to apply lumo or material theme styles to the placeholder
+       * of the slotted input you should explicitly import a file
+       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+       * and include styles into the same scope as `vaadin-password-field`:
+       *
+       * ```html
+       * <custom-style>
+       *   <style include="lumo-placeholder-styles"></style>
+       * </custom-style>
+       *
+       * <!--OR-->
+       *
+       * <custom-style>
+       *   <style include="material-placeholder-styles"></style>
+       * </custom-style>
+       * ```
+       *
        * ### Styling
        *
        * See vaadin-text-field.html for the styling documentation
@@ -141,6 +174,10 @@
         }
 
         _onChange(e) {
+          const slotted = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
+          if (slotted) {
+            e.stopPropagation();
+          }
           if (this._passwordVisibilityChanging) {
             this._cachedChangeEvent = e;
           } else {

src/vaadin-text-area.html

@@ -56,26 +56,9 @@
 
         <slot name="prefix"></slot>
 
-        <textarea part="value"
-            autocomplete$="[[autocomplete]]"
-            autocorrect$="[[autocorrect]]"
-            autocapitalize$="[[autocapitalize]]"
-            autofocus$="[[autofocus]]"
-            disabled$="[[disabled]]"
-            maxlength$="[[maxlength]]"
-            minlength$="[[minlength]]"
-            placeholder$="[[placeholder]]"
-            readonly$="[[readonly]]"
-            aria-readonly$="[[readonly]]"
-            required$="[[required]]"
-            aria-required$="[[required]]"
-            value="{{value::input}}"
-            on-blur="validate"
-            on-input="_onInput"
-            on-change="_onChange"
-            aria-describedby$="[[_getActiveErrorId(invalid, errorMessage, _errorId)]]"
-            aria-labelledby$="[[_getActiveLabelId(label, _labelId)]]"
-            aria-invalid$="[[invalid]]"></textarea>
+        <slot name="textarea">
+          <textarea part="value"></textarea>
+        </slot>
 
         <div part="clear-button" id="clearButton" role="button" aria-label="Clear"></div>
         <slot name="suffix"></slot>
@@ -116,6 +99,39 @@
        * </vaadin-text-area>
        * ```
        *
+       * ### Custom textarea
+       *
+       * It is possible to use custom textarea within `<vaadin-text-area>`.
+       * In order for an textarea to be considered as a custom textarea, it must have the slot
+       * attribute set to `textarea`.
+       *
+       * **NOTE:** when using custom textarea: all properties and attributes that the
+       * `<vaadin-text-area>` has should be defined on the host element. They will be
+       * automatically propagated to the custom textarea.
+       *
+       * ```html
+       * <vaadin-text-area label="Textarea">
+       *   <textarea slot="textarea"></textarea>
+       * </vaadin-text-area>
+       * ```
+       *
+       * **NOTE:** when using custom textarea: in order to apply lumo or material theme styles to the placeholder
+       * of the slotted textarea you should explicitly import a file
+       * `theme/lumo/vaadin-placeholder-styles.html` or `theme/material/vaadin-placeholder-styles.html`
+       * and include styles into the same scope as `vaadin-text-area`:
+       *
+       * ```html
+       * <custom-style>
+       *   <style include="lumo-placeholder-styles"></style>
+       * </custom-style>
+       *
+       * <!--OR-->
+       *
+       * <custom-style>
+       *   <style include="material-placeholder-styles"></style>
+       * </custom-style>
+       * ```
+       *
        * ### Styling
        *
        * The following shadow DOM parts are available for styling:
@@ -173,6 +189,10 @@
           }
         }
 
+        get _slottedTagName() {
+          return 'textarea';
+        }
+
         _textAreaValueChanged(value) {
           this._updateHeight();
         }