Allow custom html in title

bower.json

@@ -43,6 +43,7 @@
     "web-component-tester": "^6.1.5",
     "iron-test-helpers": "^2.0.0",
     "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.0.0",
+    "vaadin-icons": "vaadin/vaadin-icons#^4.2.1",
     "vaadin-dialog": "^2.2.0"
   }
 }

demo/advanced-demos.html

@@ -0,0 +1,65 @@
+<dom-module id="advanced-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <h3>Title with custom HTML</h3>
+    <vaadin-demo-snippet id="login-overlay">
+      <template preserve-content>
+        <vaadin-login-overlay><h1 slot="title"><iron-icon icon="vaadin:vaadin-h"></iron-icon> My App</h1></vaadin-login-overlay>
+        <vaadin-button>Log in</vaadin-button>
+        <vaadin-dialog id="feedbackDialog">
+            <template>Login is being processed...</template>
+        </vaadin-dialog>
+        <script>
+          window.addDemoReadyListener('#login-overlay', function(document) {
+            var button = document.querySelector('vaadin-button');
+            var vaadinLoginOverlay = document.querySelector('vaadin-login-overlay');
+            var feedbackDialog = document.querySelector('#feedbackDialog');
+
+            var i18n = Object.assign(
+              {},
+              vaadinLoginOverlay.i18n,
+              {additionalInformation: 'For this demo, use admin/admin to a successful login.'}
+            );
+
+            vaadinLoginOverlay.i18n = i18n;
+
+            button.addEventListener('click', function() {
+              vaadinLoginOverlay.opened = true;
+            });
+
+            vaadinLoginOverlay.addEventListener('login', function(e) {
+              feedbackDialog.opened = true;
+              var detail = e.detail,
+                username = detail.username,
+                password = detail.password;
+
+              setTimeout(function() {
+                feedbackDialog.opened = false;
+                if (username === 'admin' && password === 'admin') {
+                  vaadinLoginOverlay.opened = false;
+                } else {
+                  vaadinLoginOverlay.error = true;
+                  vaadinLoginOverlay.disabled = false;
+                }
+              }, 1000);
+            });
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class AdvancedDemos extends DemoReadyEventEmitter(ElementDemo(Polymer.Element)) {
+      static get is() {
+        return 'advanced-demos';
+      }
+    }
+    customElements.define(AdvancedDemos.is, AdvancedDemos);
+  </script>
+</dom-module>

demo/demos.json

@@ -20,6 +20,16 @@
       "description": "",
       "image": ""
      }
+  },
+  {
+    "name": "Advanced",
+    "url": "advanced-demos",
+    "src": "advanced-demos.html",
+    "meta": {
+      "title": "Vaadin Login Advanced Examples",
+      "description": "",
+      "image": ""
+     }
   }
   ]
 }

demo/element-basic-demos.html

@@ -28,8 +28,8 @@ <h3>Basics</h3>
           <template>Login is being processed...</template>
         </vaadin-dialog>
         <vaadin-dialog id="supportDialog">
-            <template>Please contact support.</template>
-          </vaadin-dialog>
+          <template>Please contact support.</template>
+        </vaadin-dialog>
         <script>
           window.addDemoReadyListener('#element-basic-demos-sample-example', function(document) {
             var login = document.querySelector('vaadin-login');

demo/index.html

@@ -7,6 +7,8 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
   <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../vaadin-icons/vaadin-icons.html">
+
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-snippet.html">
   <script src="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.js"></script>

src/vaadin-login-overlay-element.html

@@ -40,7 +40,9 @@
     </style>
     <section part="card">
       <div part="brand">
-        <h1>[[title]]</h1>
+          <slot name="title">
+            <h1>[[title]]</h1>
+          </slot>
         <p>[[description]]</p>
       </div>
       <div part="form">
@@ -97,4 +99,4 @@ <h1>[[title]]</h1>
         customElements.define(LoginOverlayElement.is, LoginOverlayElement);
       })();
     </script>
-  </dom-module>
+  </dom-module>

src/vaadin-login-overlay.html

@@ -16,8 +16,15 @@
 
 <dom-module id="vaadin-login-overlay">
   <template>
-    <vaadin-login-overlay-element id="overlay" opened="{{opened}}" focus-trap with-backdrop title="[[title]]" description="[[description]]">
-    <vaadin-login
+    <vaadin-login-overlay-element 
+      id="overlay"
+      opened="{{opened}}"
+      focus-trap
+      with-backdrop
+      title="[[title]]"
+      description="[[description]]">
+
+      <vaadin-login
         theme="with-overlay"
         id="login"
         action="{{action}}"
@@ -28,6 +35,7 @@
         on-login="_handleEvent"
         on-forgot-password="_handleEvent">
       </vaadin-login>
+
     </vaadin-login-overlay-element>
   </template>
   <script>
@@ -102,7 +110,6 @@
           this.$.overlay.opened = false;
         }
 
-
         __i18nChanged(i18n) {
           const header = i18n.base;
           if (!header) {
@@ -133,7 +140,33 @@
             this.$.login.$.username.value = '';
             this.$.login.$.password.value = '';
             this.disabled = false;
+            if (this._undoTeleport) {
+              this._undoTeleport();
+            }
+          } else {
+            this._undoTeleport = this._teleport(this._getElementsToTeleport());
+          }
+        }
+
+        _teleport(elements) {
+          const teleported = [];
+          for (const e of elements) {
+            this.$.overlay.appendChild(e);
+            teleported.push(e);
+          }
+          // Function to undo the teleport
+          return () => {
+            while (teleported.length > 0) {
+              this.appendChild(teleported.shift());
+            }
+          };
+        }
+
+        _getElementsToTeleport() {
+          if (!this._elementsToTeleport) {
+            this._elementsToTeleport = this.querySelectorAll('[slot=title]');
           }
+          return this._elementsToTeleport;
         }
       }
 

test/login-overlay-test.html

@@ -28,6 +28,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="title-as-component">
+    <template>
+      <vaadin-login-overlay description="New description" opened><div slot="title">Teleported title</div></vaadin-login-overlay>
+    </template>
+  </test-fixture>
+
   <script>
     describe('Login Overlay test', () => {
       var loginOverlay;
@@ -158,6 +164,25 @@
         expect(login.title).to.be.equal(login.i18n.header.title);
         expect(login.description).to.be.equal(login.i18n.header.description);
       });
+
+      describe('Title as component test', function() {
+        let overlay, overlayElement;
+
+        beforeEach(function() {
+          overlay = fixture('title-as-component');
+          overlayElement = overlay.$.overlay;
+        });
+
+        it('should teleport title', function() {
+          let titleElements = overlayElement.querySelectorAll('[slot=title]');
+          expect(titleElements.length).to.be.equal(1);
+          expect(titleElements[0].textContent).to.be.equal('Teleported title');
+
+          overlay.opened = false;
+          titleElements = overlayElement.querySelectorAll('[slot=title]');
+          expect(titleElements.length).to.be.equal(0);
+        });
+      });
     });
   </script>
 </body>