fix: make input work from left-to-right in RTL

- Create a new text-field component extending vaadin-text-field
- Add styles to make text-field behave as in LTR on RTL
- Add visual tests for RTL
- Fix styles for Lumo theme

Fix vaadin/vaadin-date-picker-flow#235

src/vaadin-date-picker-text-field.html

@@ -0,0 +1,58 @@
+<!--
+@license
+Copyright (c) 2019 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+-->
+
+<link rel="import" href="../../vaadin-text-field/src/vaadin-text-field.html">
+
+<dom-module id="vaadin-date-picker-text-field-styless" theme-for="vaadin-date-picker-text-field">
+  <template>
+    <style>
+      :host([dir="rtl"]) [part="input-field"] {
+        direction: ltr;
+      }
+
+      :host([dir="rtl"]) [part="value"]::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+
+      :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<script>
+  (function() {
+    /**
+      * The text-field element for date input.
+      *
+      * ### Styling
+      *
+      * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
+      * for `<vaadin-date-picker-text-field>` parts and available slots (prefix, suffix etc.)
+      *
+      * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+      *
+      * @memberof Vaadin
+      * @extends Vaadin.TextFieldElement
+      */
+    class DatePickerTextFieldElement extends Vaadin.TextFieldElement {
+      static get is() {
+        return 'vaadin-date-picker-text-field';
+      }
+    }
+
+    customElements.define(DatePickerTextFieldElement.is, DatePickerTextFieldElement);
+  })();
+</script>

src/vaadin-date-picker.html

@@ -13,7 +13,7 @@
 <link rel="import" href="vaadin-date-picker-overlay.html">
 <link rel="import" href="vaadin-date-picker-overlay-content.html">
 <link rel="import" href="vaadin-date-picker-mixin.html">
-<link rel="import" href="../../vaadin-text-field/src/vaadin-text-field.html">
+<link rel="import" href="vaadin-date-picker-text-field.html">
 <link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
 
 <dom-module id="vaadin-date-picker">
@@ -38,7 +38,7 @@
     </style>
 
 
-    <vaadin-text-field id="input"
+    <vaadin-date-picker-text-field id="input"
         role="application"
         autocomplete="off"
         on-focus="_focus"
@@ -58,7 +58,7 @@
       >
       <slot name="prefix" slot="prefix"></slot>
       <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-label$="[[i18n.calendar]]" aria-expanded$="[[_getAriaExpanded(opened)]]"></div>
-    </vaadin-text-field>
+    </vaadin-date-picker-text-field>
 
     <vaadin-date-picker-overlay
         id="overlay"

test/visual/test.js

@@ -22,7 +22,12 @@ gemini.suite('vaadin-date-picker', function(rootSuite) {
       suite
         .setUrl(`default.html?theme=${theme}`)
         .setCaptureElements('#default-tests')
-        .capture('default');
+        .capture('default')
+        .capture('rtl', function(actions) {
+          actions.executeJS(function(window) {
+            window.document.dir = 'rtl';
+          });
+        });
     });
 
     gemini.suite(`dropdown-${theme}`, function(suite) {

theme/lumo/vaadin-date-picker-text-field-styles.html

@@ -0,0 +1,18 @@
+<link rel="import" href="../../../vaadin-text-field/theme/lumo/vaadin-text-field.html">
+
+<dom-module id="lumo-date-picker-text-field" theme-for="vaadin-date-picker-text-field">
+  <template>
+    <style>
+      :not(*):placeholder-shown, /* to prevent broken styles on IE */
+      :host([dir="rtl"]) [part="value"]:placeholder-shown,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
+      :host([dir="rtl"]) [part="value"],
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
+        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+      }
+    </style>
+  </template>
+</dom-module>

theme/lumo/vaadin-date-picker-text-field.html

@@ -0,0 +1,3 @@
+<link rel="import" href="vaadin-date-picker-text-field-styles.html">
+
+<link rel="import" href="../../src/vaadin-date-picker-text-field.html">

theme/lumo/vaadin-date-picker.html

@@ -2,4 +2,5 @@
 <link rel="import" href="vaadin-date-picker-overlay-content-styles.html">
 <link rel="import" href="vaadin-month-calendar-styles.html">
 <link rel="import" href="vaadin-date-picker-styles.html">
+<link rel="import" href="vaadin-date-picker-text-field.html">
 <link rel="import" href="../../src/vaadin-date-picker.html">

theme/material/vaadin-date-picker-styles.html

@@ -1,7 +1,6 @@
 <link rel="import" href="vaadin-date-picker-overlay.html">
 <link rel="import" href="vaadin-date-picker-overlay-content.html">
 <link rel="import" href="vaadin-month-calendar.html">
-<link rel="import" href="../../../vaadin-text-field/theme/material/vaadin-text-field.html">
 
 <link rel="import" href="../../../vaadin-material-styles/color.html">
 <link rel="import" href="../../../vaadin-material-styles/font-icons.html">

theme/material/vaadin-date-picker-text-field.html

@@ -0,0 +1,3 @@
+<link rel="import" href="../../../vaadin-text-field/theme/material/vaadin-text-field.html">
+
+<link rel="import" href="../../src/vaadin-date-picker-text-field.html">

theme/material/vaadin-date-picker.html

@@ -1,2 +1,3 @@
 <link rel="import" href="vaadin-date-picker-styles.html">
+<link rel="import" href="vaadin-date-picker-text-field.html">
 <link rel="import" href="../../src/vaadin-date-picker.html">