1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
/**
* Cards contain content and actions about a single subject.
* There are two card types:
* The default type where no type attribute is required and the card
* will have no extra functionality.
*
* The "accordion" type will initially not show any content. The card
* will contain an arrow to expand the card so that all of the content
* is visible.
*
*
* @property {string} heading - The heading text that will be used for the card.
* @property {string} type - (optional) The type of card. No type specified
* will be the default card. The other available type is "accordion"
* @slot content - The content to show inside of the card.
*/
export default class MozCard extends MozLitElement {
static queries = {
detailsEl: "#moz-card-details",
headingEl: "#heading",
contentSlotEl: "#content",
};
static properties = {
heading: { type: String },
type: { type: String, reflect: true },
expanded: { type: Boolean },
};
constructor() {
super();
this.expanded = false;
this.type = "default";
}
headingTemplate() {
if (!this.heading) {
return "";
}
return html`
<div id="heading-wrapper">
${this.type == "accordion"
? html` <div class="chevron-icon"></div>`
: ""}
<span id="heading">${this.heading}</span>
</div>
`;
}
cardTemplate() {
if (this.type === "accordion") {
return html`
<details id="moz-card-details">
<summary>${this.headingTemplate()}</summary>
<div id="content"><slot></slot></div>
</details>
`;
}
return html`
${this.headingTemplate()}
<div id="content" aria-describedby="content">
<slot></slot>
</div>
`;
}
/**
* Handles the click event on the chevron icon.
*
* Without this, the click event would be passed to
* toggleDetails which would force the details element
* to stay open.
*
* @memberof MozCard
*/
onDetailsClick() {
this.toggleDetails();
}
/**
* @param {boolean} force - Used to force open or force close the
* details element.
* @memberof MozCard
*/
toggleDetails(force) {
this.detailsEl.open = force ?? !this.detailsEl.open;
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://global/content/elements/moz-card.css"
/>
<article
class="moz-card"
aria-labelledby=${ifDefined(this.heading ? "heading" : undefined)}
>
${this.cardTemplate()}
</article>
`;
}
}
customElements.define("moz-card", MozCard);
|
