blob: 01857df75074856c504fa068ba5589a45d5da459 [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/**
9 * `<chops-snackbar>`
10 *
11 * A container for showing messages in a snackbar.
12 *
13 */
14export class ChopsSnackbar extends LitElement {
15 /** @override */
16 static get styles() {
17 return css`
18 :host {
19 align-items: center;
20 background-color: #333;
21 border-radius: 6px;
22 bottom: 1em;
23 left: 1em;
24 color: hsla(0, 0%, 100%, .87);
25 display: flex;
26 font-size: var(--chops-large-font-size);
27 padding: 16px;
28 position: fixed;
29 z-index: 1000;
30 }
31 button {
32 background: none;
33 border: none;
34 color: inherit;
35 cursor: pointer;
36 margin: 0;
37 margin-left: 8px;
38 padding: 0;
39 }
40 `;
41 }
42
43 /** @override */
44 render() {
45 return html`
46 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
47 <slot></slot>
48 <button @click=${this.close}>
49 <i class="material-icons">close</i>
50 </button>
51 `;
52 }
53
54 /**
55 * Closes the snackbar.
56 * @fires CustomEvent#close
57 */
58 close() {
59 this.dispatchEvent(new CustomEvent('close'));
60 }
61}
62
63customElements.define('chops-snackbar', ChopsSnackbar);