1 | import {
|
2 | details_styles_default
|
3 | } from "./chunk.ZOQFTFEF.js";
|
4 | import {
|
5 | animateTo,
|
6 | shimKeyframesHeightAuto,
|
7 | stopAnimations
|
8 | } from "./chunk.63W3F5G5.js";
|
9 | import {
|
10 | getAnimation,
|
11 | setDefaultAnimation
|
12 | } from "./chunk.EFXMZY2Q.js";
|
13 | import {
|
14 | LocalizeController
|
15 | } from "./chunk.6WMYSCDC.js";
|
16 | import {
|
17 | o
|
18 | } from "./chunk.IAELDRGJ.js";
|
19 | import {
|
20 | watch
|
21 | } from "./chunk.W6MGCO4G.js";
|
22 | import {
|
23 | emit,
|
24 | waitForEvent
|
25 | } from "./chunk.UY5AQKHP.js";
|
26 | import {
|
27 | e,
|
28 | i,
|
29 | n
|
30 | } from "./chunk.VKNZYXSO.js";
|
31 | import {
|
32 | $,
|
33 | s
|
34 | } from "./chunk.WWAD5WF4.js";
|
35 | import {
|
36 | __decorateClass
|
37 | } from "./chunk.K2NRSETB.js";
|
38 |
|
39 |
|
40 | var SlDetails = class extends s {
|
41 | constructor() {
|
42 | super(...arguments);
|
43 | this.localize = new LocalizeController(this);
|
44 | this.open = false;
|
45 | this.disabled = false;
|
46 | }
|
47 | firstUpdated() {
|
48 | this.body.hidden = !this.open;
|
49 | this.body.style.height = this.open ? "auto" : "0";
|
50 | }
|
51 | async show() {
|
52 | if (this.open || this.disabled) {
|
53 | return void 0;
|
54 | }
|
55 | this.open = true;
|
56 | return waitForEvent(this, "sl-after-show");
|
57 | }
|
58 | async hide() {
|
59 | if (!this.open || this.disabled) {
|
60 | return void 0;
|
61 | }
|
62 | this.open = false;
|
63 | return waitForEvent(this, "sl-after-hide");
|
64 | }
|
65 | handleSummaryClick() {
|
66 | if (!this.disabled) {
|
67 | if (this.open) {
|
68 | this.hide();
|
69 | } else {
|
70 | this.show();
|
71 | }
|
72 | this.header.focus();
|
73 | }
|
74 | }
|
75 | handleSummaryKeyDown(event) {
|
76 | if (event.key === "Enter" || event.key === " ") {
|
77 | event.preventDefault();
|
78 | if (this.open) {
|
79 | this.hide();
|
80 | } else {
|
81 | this.show();
|
82 | }
|
83 | }
|
84 | if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
|
85 | event.preventDefault();
|
86 | this.hide();
|
87 | }
|
88 | if (event.key === "ArrowDown" || event.key === "ArrowRight") {
|
89 | event.preventDefault();
|
90 | this.show();
|
91 | }
|
92 | }
|
93 | async handleOpenChange() {
|
94 | if (this.open) {
|
95 | emit(this, "sl-show");
|
96 | await stopAnimations(this.body);
|
97 | this.body.hidden = false;
|
98 | const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
|
99 | await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
|
100 | this.body.style.height = "auto";
|
101 | emit(this, "sl-after-show");
|
102 | } else {
|
103 | emit(this, "sl-hide");
|
104 | await stopAnimations(this.body);
|
105 | const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
|
106 | await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
|
107 | this.body.hidden = true;
|
108 | this.body.style.height = "auto";
|
109 | emit(this, "sl-after-hide");
|
110 | }
|
111 | }
|
112 | render() {
|
113 | return $`
|
114 | <div
|
115 | part="base"
|
116 | class=${o({
|
117 | details: true,
|
118 | "details--open": this.open,
|
119 | "details--disabled": this.disabled
|
120 | })}
|
121 | >
|
122 | <header
|
123 | part="header"
|
124 | id="header"
|
125 | class="details__header"
|
126 | role="button"
|
127 | aria-expanded=${this.open ? "true" : "false"}
|
128 | aria-controls="content"
|
129 | aria-disabled=${this.disabled ? "true" : "false"}
|
130 | tabindex=${this.disabled ? "-1" : "0"}
|
131 | @click=${this.handleSummaryClick}
|
132 | @keydown=${this.handleSummaryKeyDown}
|
133 | >
|
134 | <div part="summary" class="details__summary">
|
135 | <slot name="summary">${this.summary}</slot>
|
136 | </div>
|
137 |
|
138 | <span part="summary-icon" class="details__summary-icon">
|
139 | <sl-icon name="chevron-right" library="system"></sl-icon>
|
140 | </span>
|
141 | </header>
|
142 |
|
143 | <div class="details__body">
|
144 | <div part="content" id="content" class="details__content" role="region" aria-labelledby="header">
|
145 | <slot></slot>
|
146 | </div>
|
147 | </div>
|
148 | </div>
|
149 | `;
|
150 | }
|
151 | };
|
152 | SlDetails.styles = details_styles_default;
|
153 | __decorateClass([
|
154 | i(".details")
|
155 | ], SlDetails.prototype, "details", 2);
|
156 | __decorateClass([
|
157 | i(".details__header")
|
158 | ], SlDetails.prototype, "header", 2);
|
159 | __decorateClass([
|
160 | i(".details__body")
|
161 | ], SlDetails.prototype, "body", 2);
|
162 | __decorateClass([
|
163 | e({ type: Boolean, reflect: true })
|
164 | ], SlDetails.prototype, "open", 2);
|
165 | __decorateClass([
|
166 | e()
|
167 | ], SlDetails.prototype, "summary", 2);
|
168 | __decorateClass([
|
169 | e({ type: Boolean, reflect: true })
|
170 | ], SlDetails.prototype, "disabled", 2);
|
171 | __decorateClass([
|
172 | watch("open", { waitUntilFirstUpdate: true })
|
173 | ], SlDetails.prototype, "handleOpenChange", 1);
|
174 | SlDetails = __decorateClass([
|
175 | n("sl-details")
|
176 | ], SlDetails);
|
177 | setDefaultAnimation("details.show", {
|
178 | keyframes: [
|
179 | { height: "0", opacity: "0" },
|
180 | { height: "auto", opacity: "1" }
|
181 | ],
|
182 | options: { duration: 250, easing: "linear" }
|
183 | });
|
184 | setDefaultAnimation("details.hide", {
|
185 | keyframes: [
|
186 | { height: "auto", opacity: "1" },
|
187 | { height: "0", opacity: "0" }
|
188 | ],
|
189 | options: { duration: 250, easing: "linear" }
|
190 | });
|
191 |
|
192 | export {
|
193 | SlDetails
|
194 | };
|