Move gr-custom-plugin-header and gr-theme-api to typescript

Change-Id: Ie2002bcb4d8d4c20eb762b625edbc9aae60636e9

polygerrit-ui/app/elements/plugins/gr-theme-api/gr-custom-plugin-header.ts

@@ -14,39 +14,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {PolymerElement} from '@polymer/polymer/polymer-element.js';
-import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
+import {html} from '@polymer/polymer/lib/utils/html-tag';
+import {customElement, property} from '@polymer/decorators';
 
-class CustomPluginHeader extends PolymerElement {
-  static get is() {
-    return 'gr-custom-plugin-header';
-  }
-
-  static get properties() {
-    return {
-      logoUrl: String,
-      title: String,
-    };
-  }
-
-  static get template() {
-    return html`
-    <style>
-      img {
-        width: 1em;
-        height: 1em;
-        vertical-align: middle;
-      }
-      .title {
-        margin-left: var(--spacing-xs);
-      }
-    </style>
-    <span>
-      <img src="[[logoUrl]]" hidden\$="[[!logoUrl]]">
-      <span class="title">[[title]]</span>
-    </span>
-`;
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-custom-plugin-header': GrCustomPluginHeader;
   }
 }
 
-customElements.define(CustomPluginHeader.is, CustomPluginHeader);
+@customElement('gr-custom-plugin-header')
+export class GrCustomPluginHeader extends PolymerElement {
+  @property({type: String})
+  logoUrl = '';
+
+  @property({type: String})
+  title = '';
+
+  static get template() {
+    return html`
+      <style>
+        img {
+          width: 1em;
+          height: 1em;
+          vertical-align: middle;
+        }
+        .title {
+          margin-left: var(--spacing-xs);
+        }
+      </style>
+      <span>
+        <img src="[[logoUrl]]" hidden$="[[!logoUrl]]" />
+        <span class="title">[[title]]</span>
+      </span>
+    `;
+  }
+}

polygerrit-ui/app/elements/plugins/gr-theme-api/gr-theme-api.ts

@@ -14,21 +14,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import './gr-custom-plugin-header.js';
+import './gr-custom-plugin-header';
+import {GrCustomPluginHeader} from './gr-custom-plugin-header';
 
-/** @constructor */
-export function GrThemeApi(plugin) {
-  this.plugin = plugin;
+// TODO(TS): replace with Plugin once gr-public-js-api migrated
+interface PluginApi {
+  hook(
+    endpointName: string,
+    option: {replace?: boolean}
+  ): {
+    onAttached(callback: (el: Element) => void): void;
+  };
 }
 
-GrThemeApi.prototype.setHeaderLogoAndTitle = function(logoUrl, title) {
-  this.plugin.hook('header-title', {replace: true}).onAttached(
-      element => {
-        const customHeader =
-              document.createElement('gr-custom-plugin-header');
-        customHeader.logoUrl = logoUrl;
-        customHeader.title = title;
-        element.appendChild(customHeader);
-      });
-};
+/**
+ * Defines api for theme, can be used to set header logo and title.
+ */
+export class GrThemeApi {
+  constructor(private readonly plugin: PluginApi) {}
 
+  setHeaderLogoAndTitle(logoUrl: string, title: string) {
+    this.plugin.hook('header-title', {replace: true}).onAttached(element => {
+      const customHeader: GrCustomPluginHeader = document.createElement(
+        'gr-custom-plugin-header'
+      );
+      customHeader.logoUrl = logoUrl;
+      customHeader.title = title;
+      element.appendChild(customHeader);
+    });
+  }
+}