RTL toast fix (#2646)

* RTL toast fix

* Removed reflectToAttribute

src/layouts/app/dialog-manager-mixin.ts

@@ -74,8 +74,8 @@ export const dialogManagerMixin = (
       if (!(dialogTag in LOADED)) {
         LOADED[dialogTag] = dialogImport().then(() => {
           const dialogEl = document.createElement(dialogTag) as HassDialog;
-          this.shadowRoot!.appendChild(dialogEl);
           this.provideHass(dialogEl);
+          this.shadowRoot!.appendChild(dialogEl);
           return dialogEl;
         });
       }

src/managers/notification-manager.js

@@ -2,6 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import LocalizeMixin from "../mixins/localize-mixin";
+import { computeRTL } from "../common/util/compute_rtl";
 
 class NotificationManager extends LocalizeMixin(PolymerElement) {
   static get template() {
@@ -14,6 +15,7 @@ class NotificationManager extends LocalizeMixin(PolymerElement) {
 
       <ha-toast
         id="toast"
+        dir="[[_rtl]]"
         no-cancel-on-outside-click="[[_cancelOnOutsideClick]]"
       ></ha-toast>
     `;
@@ -27,6 +29,11 @@ class NotificationManager extends LocalizeMixin(PolymerElement) {
         type: Boolean,
         value: false,
       },
+
+      _rtl: {
+        type: String,
+        computed: "_computeRTLDirection(hass)",
+      },
     };
   }
 
@@ -38,6 +45,10 @@ class NotificationManager extends LocalizeMixin(PolymerElement) {
   showDialog({ message }) {
     this.$.toast.show(message);
   }
+
+  _computeRTLDirection(hass) {
+    return computeRTL(hass) ? "rtl" : "ltr";
+  }
 }
 
 customElements.define("notification-manager", NotificationManager);