Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/chops/chops-filter-chips/chops-filter-chips.js b/static_src/elements/chops/chops-filter-chips/chops-filter-chips.js
new file mode 100644
index 0000000..3bcc0c6
--- /dev/null
+++ b/static_src/elements/chops/chops-filter-chips/chops-filter-chips.js
@@ -0,0 +1,70 @@
+// Copyright 2020 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 'elements/chops/chops-chip/chops-chip.js';
+
+/**
+ * `<chops-filter-chips>` displays a set of filter chips.
+ * https://material.io/components/chips/#filter-chips
+ */
+export class ChopsFilterChips extends LitElement {
+ /** @override */
+ static get properties() {
+ return {
+ options: {type: Array},
+ selected: {type: Object},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+ /** @type {Array<string>} */
+ this.options = [];
+ /** @type {Object<string, boolean>} */
+ this.selected = {};
+ }
+
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ display: inline-flex;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`${this.options.map((option) => this._renderChip(option))}`;
+ }
+
+ /**
+ * Render a single chip.
+ * @param {string} option The text on the chip.
+ * @return {TemplateResult}
+ */
+ _renderChip(option) {
+ return html`
+ <chops-chip
+ @click=${this.select.bind(this, option)}
+ class=${this.selected[option] ? 'selected' : ''}
+ .thumbnail=${this.selected[option] ? 'check' : ''}>
+ ${option}
+ </chops-chip>
+ `;
+ }
+
+ /**
+ * Selects or unselects an option.
+ * @param {string} option The option to select or unselect.
+ * @fires Event#change
+ */
+ select(option) {
+ this.selected = {...this.selected, [option]: !this.selected[option]};
+ this.dispatchEvent(new Event('change'));
+ }
+}
+customElements.define('chops-filter-chips', ChopsFilterChips);
diff --git a/static_src/elements/chops/chops-filter-chips/chops-filter-chips.test.js b/static_src/elements/chops/chops-filter-chips/chops-filter-chips.test.js
new file mode 100644
index 0000000..3fd2671
--- /dev/null
+++ b/static_src/elements/chops/chops-filter-chips/chops-filter-chips.test.js
@@ -0,0 +1,58 @@
+// Copyright 2020 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 {assert} from 'chai';
+import sinon from 'sinon';
+import {ChopsFilterChips} from './chops-filter-chips.js';
+
+/** @type {ChopsFilterChips} */
+let element;
+
+describe('chops-filter-chips', () => {
+ beforeEach(() => {
+ // @ts-ignore
+ element = document.createElement('chops-filter-chips');
+ document.body.appendChild(element);
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, ChopsFilterChips);
+ });
+
+ it('renders', async () => {
+ element.options = ['one', 'two'];
+ element.selected = {two: true};
+ await element.updateComplete;
+
+ const firstChip = element.shadowRoot.firstElementChild;
+ assert.deepEqual(firstChip.className, '');
+ assert.deepEqual(firstChip.thumbnail, '');
+
+ const lastChip = element.shadowRoot.lastElementChild;
+ assert.deepEqual(lastChip.className, 'selected');
+ assert.deepEqual(lastChip.thumbnail, 'check');
+ });
+
+ it('click', async () => {
+ const onChangeStub = sinon.stub();
+
+ element.options = ['one'];
+ await element.updateComplete;
+
+ element.addEventListener('change', onChangeStub);
+ element.shadowRoot.firstElementChild.click();
+
+ assert.isTrue(element.selected.one);
+ sinon.assert.calledOnce(onChangeStub);
+
+ element.shadowRoot.firstElementChild.click();
+
+ assert.isFalse(element.selected.one);
+ sinon.assert.calledTwice(onChangeStub);
+ });
+});