Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/issue-list/mr-grid-page/mr-grid-dropdown.js b/static_src/elements/issue-list/mr-grid-page/mr-grid-dropdown.js
new file mode 100644
index 0000000..2fc05b6
--- /dev/null
+++ b/static_src/elements/issue-list/mr-grid-page/mr-grid-dropdown.js
@@ -0,0 +1,72 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import {equalsIgnoreCase} from 'shared/helpers.js';
+
+/**
+ * `<mr-grid-dropdown>`
+ *
+ * Component used by the user to select what grid options to use.
+ */
+export class MrGridDropdown extends LitElement {
+ /** @override */
+ render() {
+ return html`
+ ${this.text}:
+ <select
+ class="drop-down"
+ @change=${this._optionChanged}
+ >
+ ${(this.items).map((item) => html`
+ <option .selected=${equalsIgnoreCase(item, this.selection)}>
+ ${item}
+ </option>
+ `)}
+ </select>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ text: {type: String},
+ items: {type: Array},
+ selection: {type: String},
+ };
+ };
+
+ /** @override */
+ constructor() {
+ super();
+ this.items = [];
+ this.selection = 'None';
+ };
+
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ font-size: var(--chops-large-font-size);
+ }
+ .drop-down {
+ font-size: var(--chops-large-font-size);
+ }
+ `;
+ };
+
+ /**
+ * Syncs values when the user updates their selection.
+ * @param {Event} e
+ * @fires CustomEvent#change
+ * @private
+ */
+ _optionChanged(e) {
+ this.selection = e.target.value;
+ this.dispatchEvent(new CustomEvent('change'));
+ };
+};
+
+customElements.define('mr-grid-dropdown', MrGridDropdown);
+