Fix TypeScript error with PaperInputElement props

I am getting a "ts-conformance#property-renaming-safe" error for
`paperInput.$.nativeInput`.

This change unifies how to deal with native input of PaperInputElement
in all files.

Change-Id: I0842d2dccaa48af6b0c39c5e780a5ab163174889

polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts

@@ -35,9 +35,9 @@ import {
 } from '../../../scripts/gr-reviewer-suggestions-provider/gr-reviewer-suggestions-provider';
 import {ReportingService} from '../../../services/gr-reporting/gr-reporting';
 import {GrAccountEntry} from '../gr-account-entry/gr-account-entry';
-import {PaperInputElement} from '@polymer/paper-input/paper-input';
 import {GrAccountChip} from '../gr-account-chip/gr-account-chip';
 import {PolymerDeepPropertyChange} from '@polymer/polymer/interfaces';
+import {PaperInputElementExt} from '../../../types/types';
 
 const VALID_EMAIL_ALERT = 'Please input a valid email.';
 
@@ -344,14 +344,14 @@ export class GrAccountList extends GestureEventListeners(
     console.warn('received remove event for missing account', toRemove);
   }
 
-  _getNativeInput(paperInput: PaperInputElement) {
+  _getNativeInput(paperInput: PaperInputElementExt) {
     // In Polymer 2 inputElement isn't nativeInput anymore
     return (paperInput.$.nativeInput ||
       paperInput.inputElement) as HTMLTextAreaElement;
   }
 
   _handleInputKeydown(
-    e: CustomEvent<{input: PaperInputElement; keyCode: number}>
+    e: CustomEvent<{input: PaperInputElementExt; keyCode: number}>
   ) {
     const input = this._getNativeInput(e.detail.input);
     if (

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

@@ -29,17 +29,17 @@ import {
   CustomKeyboardEvent,
 } from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
 import {property, customElement, observe} from '@polymer/decorators';
-import {PaperInputElement} from '@polymer/paper-input/paper-input';
 import {GrAutocompleteDropdown} from '../gr-autocomplete-dropdown/gr-autocomplete-dropdown';
 import {GrCursorManager} from '../gr-cursor-manager/gr-cursor-manager';
 import {EventWithPath} from '../../plugins/gr-event-helper/gr-event-helper';
+import {PaperInputElementExt} from '../../../types/types';
 
 const TOKENIZE_REGEX = /(?:[^\s"]+|"[^"]*")+/g;
 const DEBOUNCE_WAIT_MS = 200;
 
 export interface GrAutocomplete {
   $: {
-    input: PaperInputElement & {$: {nativeInput?: Element}};
+    input: PaperInputElementExt;
     suggestions: GrAutocompleteDropdown;
     cursor: GrCursorManager;
   };

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts

@@ -29,7 +29,7 @@ import {customElement, property} from '@polymer/decorators';
 import {htmlTemplate} from './gr-editable-label_html';
 import {IronDropdownElement} from '@polymer/iron-dropdown/iron-dropdown';
 import {dom, EventApi} from '@polymer/polymer/lib/legacy/polymer.dom';
-import {PaperInputElement} from '@polymer/paper-input/paper-input';
+import {PaperInputElementExt} from '../../../types/types';
 
 const AWAIT_MAX_ITERS = 10;
 const AWAIT_STEP = 5;
@@ -42,7 +42,7 @@ declare global {
 
 export interface GrEditableLabel {
   $: {
-    input: PaperInputElement;
+    input: PaperInputElementExt;
     dropdown: IronDropdownElement;
   };
 }
@@ -188,12 +188,9 @@ export class GrEditableLabel extends KeyboardShortcutMixin(
   }
 
   get _nativeInput(): HTMLInputElement {
-    // In Polymer 2, the namespace of nativeInput changed from input to
+    // In Polymer 2 inputElement isn't nativeInput anymore
-    // nativeInput.
+    return (this.$.input.$.nativeInput ||
-    // `this.$.input` has type PaperInputElement, so this is beyond our control
+      this.$.input.inputElement) as HTMLInputElement;
-    // and we cannot force `this.$.input.$` to have a proper type.
-    return (this.$.input.$['nativeInput'] ||
-      this.$.input.$['input']) as HTMLInputElement;
   }
 
   _handleEnter(e: CustomKeyboardEvent) {

polygerrit-ui/app/types/types.ts

@@ -18,6 +18,7 @@ import {Side} from '../constants/constants';
 import {IronA11yAnnouncer} from '@polymer/iron-a11y-announcer/iron-a11y-announcer';
 import {GrDiffLine} from '../elements/diff/gr-diff/gr-diff-line';
 import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer';
+import {PaperInputElement} from '@polymer/paper-input/paper-input';
 
 export function notUndefined<T>(x: T | undefined): x is T {
   return x !== undefined;
@@ -59,6 +60,14 @@ export enum ErrorType {
   GENERIC = 'GENERIC',
 }
 
+/**
+ * We would like to access the the typed `nativeInput` of PaperInputElement, so
+ * we are creating this wrapper.
+ */
+export type PaperInputElementExt = PaperInputElement & {
+  $: {nativeInput?: Element};
+};
+
 /**
  * If Polymer would have exported DomApiNative from its dom.js utility, then we
  * would probably not need this type. We just use it for casting the return