blob: b99c8f34434851143115277c484f2dfd93a269aa [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6
7/**
8 * `<chops-chip>` displays a chip.
9 * "Chips are compact elements that represent an input, attribute, or action."
10 * https://material.io/components/chips/
11 */
12export class ChopsChip extends LitElement {
13 /** @override */
14 static get properties() {
15 return {
16 focusable: {type: Boolean, reflect: true},
17 thumbnail: {type: String},
18 buttonIcon: {type: String},
19 buttonLabel: {type: String},
20 };
21 }
22
23 /** @override */
24 constructor() {
25 super();
26
27 /** @type {boolean} */
28 this.focusable = false;
29
30 /** @type {string} */
31 this.thumbnail = '';
32
33 /** @type {string} */
34 this.buttonIcon = '';
35 /** @type {string} */
36 this.buttonLabel = '';
37 }
38
39 /** @override */
40 static get styles() {
41 return css`
42 :host {
43 --chops-chip-bg-color: var(--chops-blue-gray-50);
44 display: inline-flex;
45 padding: 0px 10px;
46 line-height: 22px;
47 margin: 0 2px;
48 border-radius: 12px;
49 background: var(--chops-chip-bg-color);
50 align-items: center;
51 font-size: var(--chops-main-font-size);
52 box-sizing: border-box;
53 border: 1px solid var(--chops-chip-bg-color);
54 }
55 :host(:focus), :host(.selected) {
56 background: var(--chops-active-choice-bg);
57 border: 1px solid var(--chops-light-accent-color);
58 }
59 :host([hidden]) {
60 display: none;
61 }
62 i.left {
63 margin: 0 4px 0 -6px;
64 }
65 button {
66 border-radius: 50%;
67 cursor: pointer;
68 background: none;
69 border: 0;
70 padding: 0;
71 margin: 0 -6px 0 4px;
72 display: inline-flex;
73 align-items: center;
74 transition: background-color 0.2s ease-in-out;
75 }
76 button[hidden] {
77 display: none;
78 }
79 button:hover {
80 background: var(--chops-gray-300);
81 }
82 i.material-icons {
83 color: var(--chops-primary-icon-color);
84 font-size: 14px;
85 user-select: none;
86 }
87 `;
88 }
89
90 /** @override */
91 render() {
92 return html`
93 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
94 ${this.thumbnail ? html`
95 <i class="material-icons left">${this.thumbnail}</i>
96 ` : ''}
97 <slot></slot>
98 ${this.buttonIcon ? html`
99 <button @click=${this.clickButton} aria-label=${this.buttonLabel}>
100 <i class="material-icons" aria-hidden="true"}>${this.buttonIcon}</i>
101 </button>
102 `: ''}
103 `;
104 }
105
106 /** @override */
107 update(changedProperties) {
108 if (changedProperties.has('focusable')) {
109 this.tabIndex = this.focusable ? '0' : undefined;
110 }
111 super.update(changedProperties);
112 }
113
114 /**
115 * @param {MouseEvent} e A click event.
116 * @fires CustomEvent#click-button
117 */
118 clickButton(e) {
119 this.dispatchEvent(new CustomEvent('click-button'));
120 }
121}
122customElements.define('chops-chip', ChopsChip);