From 4e23f3c24fbdc90f2e562015aaffd0de66b4fcf6 Mon Sep 17 00:00:00 2001
From: Milutin Kristofic <milutin@google.com>
Date: Thu, 20 Aug 2020 22:43:39 +0200
Subject: [PATCH] Convert gr-account-entry to typescript

The change converts the following files to typescript:

* elements/shared/gr-account-entry/gr-account-entry.ts

Change-Id: Iff07cdbbcbe10c68bd0cb530dc65ff0dd696bfe4
---
 .../gr-account-entry/gr-account-entry.ts      | 102 +++++++++---------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.ts b/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.ts
index 807aa81b74..925480f068 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.ts
@@ -14,26 +14,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '../../../styles/shared-styles.js';
-import '../gr-autocomplete/gr-autocomplete.js';
-import '../gr-rest-api-interface/gr-rest-api-interface.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-account-entry_html.js';
+import '../../../styles/shared-styles';
+import '../gr-autocomplete/gr-autocomplete';
+import '../gr-rest-api-interface/gr-rest-api-interface';
+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-account-entry_html';
+import {customElement, property} from '@polymer/decorators';
+import {GrAutocomplete} from '../gr-autocomplete/gr-autocomplete';
 
+export interface GrAccountEntry {
+  $: {
+    input: GrAutocomplete;
+  };
+}
 /**
  * gr-account-entry is an element for entering account
  * and/or group with autocomplete support.
- *
- * @extends PolymerElement
  */
-class GrAccountEntry extends GestureEventListeners(
-    LegacyElementMixin(
-        PolymerElement)) {
-  static get template() { return htmlTemplate; }
+@customElement('gr-account-entry')
+export class GrAccountEntry extends GestureEventListeners(
+  LegacyElementMixin(PolymerElement)
+) {
+  static get template() {
+    return htmlTemplate;
+  }
 
-  static get is() { return 'gr-account-entry'; }
   /**
    * Fired when an account is entered.
    *
@@ -48,36 +55,23 @@ class GrAccountEntry extends GestureEventListeners(
    * @event account-text-changed
    */
 
-  static get properties() {
-    return {
-      allowAnyInput: Boolean,
-      borderless: Boolean,
-      placeholder: String,
+  @property({type: Boolean})
+  allowAnyInput?: boolean;
 
-      // suggestFrom = 0 to enable default suggestions.
-      suggestFrom: {
-        type: Number,
-        value: 0,
-      },
+  @property({type: Boolean})
+  borderless?: boolean;
 
-      /** @type {!function(string): !Promise<Array<{name, value}>>} */
-      querySuggestions: {
-        type: Function,
-        notify: true,
-        value() {
-          return input => Promise.resolve([]);
-        },
-      },
+  @property({type: String})
+  placeholder?: string;
 
-      _config: Object,
-      /** The value of the autocomplete entry. */
-      _inputText: {
-        type: String,
-        observer: '_inputTextChanged',
-      },
+  @property({type: Number})
+  suggestFrom = 0;
 
-    };
-  }
+  @property({type: Object, notify: true})
+  querySuggestions = () => Promise.resolve([]);
+
+  @property({type: String, observer: '_inputTextChanged'})
+  _inputText?: string;
 
   get focusStart() {
     return this.$.input.focusStart;
@@ -91,7 +85,7 @@ class GrAccountEntry extends GestureEventListeners(
     this.$.input.clear();
   }
 
-  setText(text) {
+  setText(text: string) {
     this.$.input.setText(text);
   }
 
@@ -99,20 +93,28 @@ class GrAccountEntry extends GestureEventListeners(
     return this.$.input.text;
   }
 
-  _handleInputCommit(e) {
-    this.dispatchEvent(new CustomEvent('add', {
-      detail: {value: e.detail.value},
-      composed: true, bubbles: true,
-    }));
+  _handleInputCommit(e: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('add', {
+        detail: {value: e.detail.value},
+        composed: true,
+        bubbles: true,
+      })
+    );
     this.$.input.focus();
   }
 
-  _inputTextChanged(text) {
+  _inputTextChanged(text: string) {
     if (text.length && this.allowAnyInput) {
-      this.dispatchEvent(new CustomEvent(
-          'account-text-changed', {bubbles: true, composed: true}));
+      this.dispatchEvent(
+        new CustomEvent('account-text-changed', {bubbles: true, composed: true})
+      );
     }
   }
 }
 
-customElements.define(GrAccountEntry.is, GrAccountEntry);
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-account-entry': GrAccountEntry;
+  }
+}