blob: de71d7e609a3b0dcced368b20555cc1a2f793dd7 [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-collapse>` displays a collapsible element.
9 *
10 */
11export class ChopsCollapse extends LitElement {
12 /** @override */
13 static get properties() {
14 return {
15 opened: {
16 type: Boolean,
17 reflect: true,
18 },
19 ariaHidden: {
20 attribute: 'aria-hidden',
21 type: Boolean,
22 reflect: true,
23 },
24 };
25 }
26
27 /** @override */
28 static get styles() {
29 return css`
30 :host, :host([hidden]) {
31 display: none;
32 }
33 :host([opened]) {
34 display: block;
35 }
36 `;
37 }
38
39 /** @override */
40 render() {
41 return html`
42 <slot></slot>
43 `;
44 }
45
46 /** @override */
47 constructor() {
48 super();
49
50 this.opened = false;
51 this.ariaHidden = true;
52 }
53
54 /** @override */
55 update(changedProperties) {
56 if (changedProperties.has('opened')) {
57 this.ariaHidden = !this.opened;
58 }
59 super.update(changedProperties);
60 }
61}
62customElements.define('chops-collapse', ChopsCollapse);