commit 0c8f76988b7bbdf1d21425217f0e2000479d1125
author Dhruv Srivastava <dhruvsri@google.com> Thu Jul 30 14:03:34 2020 +0200
committer Dhruv Srivastava <dhruvsri@google.com> Fri Jul 31 16:20:54 2020 +0200
tree c5a2f51c0d655eae022e3227093548589463cf28
parent bd267d0a422377283edf7dc9853e68144f2dfb48

Convert gr-tooltip.js to typescript

Change-Id: Ibf422a85b75ef8ed135740d089d332bb16af5f85

polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.ts b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.ts
index 2244cca..c1a8eb2 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.ts
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.ts
@@ -14,37 +14,42 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '../../../styles/shared-styles.js';
-import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
-import {PolymerElement} from '@polymer/polymer/polymer-element.js';
-import {htmlTemplate} from './gr-tooltip_html.js';
+import '../../../styles/shared-styles';
+import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
+import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
+import {htmlTemplate} from './gr-tooltip_html';
+import {customElement, property, observe} from '@polymer/decorators';
 
-/** @extends PolymerElement */
-class GrTooltip extends GestureEventListeners(
-    LegacyElementMixin(
-        PolymerElement)) {
-  static get template() { return htmlTemplate; }
+export interface GrTooltip {
+  $: {};
+}
 
-  static get is() { return 'gr-tooltip'; }
-
-  static get properties() {
-    return {
-      text: String,
-      maxWidth: {
-        type: String,
-        observer: '_updateWidth',
-      },
-      positionBelow: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-    };
-  }
-
-  _updateWidth(maxWidth) {
-    this.updateStyles({'--tooltip-max-width': maxWidth});
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-tooltip': GrTooltip;
   }
 }
 
-customElements.define(GrTooltip.is, GrTooltip);
+@customElement('gr-tooltip')
+export class GrTooltip extends GestureEventListeners(
+  LegacyElementMixin(PolymerElement)
+) {
+  static get template() {
+    return htmlTemplate;
+  }
+
+  @property({type: String})
+  text = '';
+
+  @property({type: String})
+  maxWidth = '';
+
+  @property({type: Boolean, reflectToAttribute: true})
+  positionBelow = false;
+
+  @observe('maxWidth')
+  _updateWidth(maxWidth: string) {
+    this.updateStyles({'--tooltip-max-width': maxWidth});
+  }
+}