Move gr-shell-command to typescript

Change-Id: I3d32c7c293ecc44f599ccaa0aa648a2c38788e59

polygerrit-ui/app/elements/shared/gr-shell-command/gr-shell-command.ts

@@ -14,31 +14,40 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '../../../styles/shared-styles.js';
-import '../gr-copy-clipboard/gr-copy-clipboard.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-shell-command_html.js';
+import '../../../styles/shared-styles';
+import '../gr-copy-clipboard/gr-copy-clipboard';
+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-shell-command_html';
+import {customElement, property} from '@polymer/decorators';
 
-/** @extends PolymerElement */
-class GrShellCommand extends GestureEventListeners(
-    LegacyElementMixin(
-        PolymerElement)) {
-  static get template() { return htmlTemplate; }
-
-  static get is() { return 'gr-shell-command'; }
-
-  static get properties() {
-    return {
-      command: String,
-      label: String,
-    };
-  }
-
-  focusOnCopy() {
-    this.shadowRoot.querySelector('gr-copy-clipboard').focusOnCopy();
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-shell-command': GrShellCommand;
   }
 }
 
-customElements.define(GrShellCommand.is, GrShellCommand);
+@customElement('gr-shell-command')
+class GrShellCommand extends GestureEventListeners(
+  LegacyElementMixin(PolymerElement)
+) {
+  static get template() {
+    return htmlTemplate;
+  }
+
+  @property({type: String})
+  command: string | undefined;
+
+  @property({type: String})
+  label: string | undefined;
+
+  focusOnCopy() {
+    if (this.shadowRoot !== null) {
+      const copyClipboard = this.shadowRoot.querySelector('gr-copy-clipboard');
+      if (copyClipboard !== null) {
+        copyClipboard.focusOnCopy();
+      }
+    }
+  }
+}