Correctly align overlay in RTL mode

.travis.yml

@@ -34,7 +34,7 @@ jobs:
 
 script:
   - if [[ "$POLYMER" = "2" ]]; then
-      npm -q i && npm i -q --no-save -g bower polymer-cli && bower -q i &&
+      npm -q i && npm i -q --no-save bower polymer-cli && bower -q i &&
       gulp lint version:check &&
       polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html &&
       if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then

src/vaadin-date-picker-mixin.html

@@ -529,6 +529,9 @@
         }
       }
 
+      this.$.overlay.setAttribute('dir',
+        getComputedStyle(this._inputElement).getPropertyValue('direction')
+      );
       this._overlayContent._repositionYearScroller();
     }
 

src/vaadin-date-picker-styles.html

@@ -27,6 +27,10 @@
         align-items: flex-end;
       }
 
+      :host([right-aligned][dir="rtl"]) {
+        align-items: flex-start;
+      }
+
       [part="overlay"] {
         display: flex;
         flex: auto;

test/basic.html

@@ -659,6 +659,22 @@
           expect(window.getComputedStyle(flexDatePicker).width).to.eql('500px');
         });
       });
+
+      describe('Right-to-left', () => {
+        before(() => {
+          document.querySelector('body').setAttribute('dir', 'rtl');
+        });
+
+        after(() => {
+          document.querySelector('body').removeAttribute('dir');
+        });
+
+        it('overlay should position correctly', () => {
+          datepicker.open();
+          expect((overlayContent.getBoundingClientRect().right >= datepicker.getBoundingClientRect().right))
+            .to.be.true;
+        });
+      });
     });
 
     describe('Basic features theme attribute', () => {