1 | import {
|
2 | Modal
|
3 | } from "./chunk.PGOLEULU.js";
|
4 | import {
|
5 | lockBodyScrolling,
|
6 | unlockBodyScrolling
|
7 | } from "./chunk.H262HIXG.js";
|
8 | import {
|
9 | dialog_styles_default
|
10 | } from "./chunk.6JTZ33QQ.js";
|
11 | import {
|
12 | animateTo,
|
13 | stopAnimations
|
14 | } from "./chunk.63W3F5G5.js";
|
15 | import {
|
16 | getAnimation,
|
17 | setDefaultAnimation
|
18 | } from "./chunk.EFXMZY2Q.js";
|
19 | import {
|
20 | LocalizeController
|
21 | } from "./chunk.6WMYSCDC.js";
|
22 | import {
|
23 | HasSlotController
|
24 | } from "./chunk.3IYPB6RR.js";
|
25 | import {
|
26 | o
|
27 | } from "./chunk.IAELDRGJ.js";
|
28 | import {
|
29 | l
|
30 | } from "./chunk.7MO772SN.js";
|
31 | import {
|
32 | watch
|
33 | } from "./chunk.W6MGCO4G.js";
|
34 | import {
|
35 | emit,
|
36 | waitForEvent
|
37 | } from "./chunk.UY5AQKHP.js";
|
38 | import {
|
39 | e,
|
40 | i,
|
41 | n
|
42 | } from "./chunk.VKNZYXSO.js";
|
43 | import {
|
44 | $,
|
45 | s
|
46 | } from "./chunk.WWAD5WF4.js";
|
47 | import {
|
48 | __decorateClass
|
49 | } from "./chunk.K2NRSETB.js";
|
50 |
|
51 |
|
52 | var SlDialog = class extends s {
|
53 | constructor() {
|
54 | super(...arguments);
|
55 | this.hasSlotController = new HasSlotController(this, "footer");
|
56 | this.localize = new LocalizeController(this);
|
57 | this.open = false;
|
58 | this.label = "";
|
59 | this.noHeader = false;
|
60 | }
|
61 | connectedCallback() {
|
62 | super.connectedCallback();
|
63 | this.modal = new Modal(this);
|
64 | }
|
65 | firstUpdated() {
|
66 | this.dialog.hidden = !this.open;
|
67 | if (this.open) {
|
68 | this.modal.activate();
|
69 | lockBodyScrolling(this);
|
70 | }
|
71 | }
|
72 | disconnectedCallback() {
|
73 | super.disconnectedCallback();
|
74 | unlockBodyScrolling(this);
|
75 | }
|
76 | async show() {
|
77 | if (this.open) {
|
78 | return void 0;
|
79 | }
|
80 | this.open = true;
|
81 | return waitForEvent(this, "sl-after-show");
|
82 | }
|
83 | async hide() {
|
84 | if (!this.open) {
|
85 | return void 0;
|
86 | }
|
87 | this.open = false;
|
88 | return waitForEvent(this, "sl-after-hide");
|
89 | }
|
90 | requestClose(source) {
|
91 | const slRequestClose = emit(this, "sl-request-close", {
|
92 | cancelable: true,
|
93 | detail: { source }
|
94 | });
|
95 | if (slRequestClose.defaultPrevented) {
|
96 | const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
|
97 | animateTo(this.panel, animation.keyframes, animation.options);
|
98 | return;
|
99 | }
|
100 | this.hide();
|
101 | }
|
102 | handleKeyDown(event) {
|
103 | if (event.key === "Escape") {
|
104 | event.stopPropagation();
|
105 | this.requestClose("keyboard");
|
106 | }
|
107 | }
|
108 | async handleOpenChange() {
|
109 | if (this.open) {
|
110 | emit(this, "sl-show");
|
111 | this.originalTrigger = document.activeElement;
|
112 | this.modal.activate();
|
113 | lockBodyScrolling(this);
|
114 | const autoFocusTarget = this.querySelector("[autofocus]");
|
115 | if (autoFocusTarget) {
|
116 | autoFocusTarget.removeAttribute("autofocus");
|
117 | }
|
118 | await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
|
119 | this.dialog.hidden = false;
|
120 | requestAnimationFrame(() => {
|
121 | const slInitialFocus = emit(this, "sl-initial-focus", { cancelable: true });
|
122 | if (!slInitialFocus.defaultPrevented) {
|
123 | if (autoFocusTarget) {
|
124 | autoFocusTarget.focus({ preventScroll: true });
|
125 | } else {
|
126 | this.panel.focus({ preventScroll: true });
|
127 | }
|
128 | }
|
129 | if (autoFocusTarget) {
|
130 | autoFocusTarget.setAttribute("autofocus", "");
|
131 | }
|
132 | });
|
133 | const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
|
134 | const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
|
135 | await Promise.all([
|
136 | animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
|
137 | animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
|
138 | ]);
|
139 | emit(this, "sl-after-show");
|
140 | } else {
|
141 | emit(this, "sl-hide");
|
142 | this.modal.deactivate();
|
143 | await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
|
144 | const panelAnimation = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
|
145 | const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
|
146 | await Promise.all([
|
147 | animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
|
148 | animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
|
149 | ]);
|
150 | this.dialog.hidden = true;
|
151 | unlockBodyScrolling(this);
|
152 | const trigger = this.originalTrigger;
|
153 | if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
|
154 | setTimeout(() => trigger.focus());
|
155 | }
|
156 | emit(this, "sl-after-hide");
|
157 | }
|
158 | }
|
159 | render() {
|
160 | return $`
|
161 | <div
|
162 | part="base"
|
163 | class=${o({
|
164 | dialog: true,
|
165 | "dialog--open": this.open,
|
166 | "dialog--has-footer": this.hasSlotController.test("footer")
|
167 | })}
|
168 | @keydown=${this.handleKeyDown}
|
169 | >
|
170 | <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
|
171 |
|
172 | <div
|
173 | part="panel"
|
174 | class="dialog__panel"
|
175 | role="dialog"
|
176 | aria-modal="true"
|
177 | aria-hidden=${this.open ? "false" : "true"}
|
178 | aria-label=${l(this.noHeader ? this.label : void 0)}
|
179 | aria-labelledby=${l(!this.noHeader ? "title" : void 0)}
|
180 | tabindex="0"
|
181 | >
|
182 | ${!this.noHeader ? $`
|
183 | <header part="header" class="dialog__header">
|
184 | <h2 part="title" class="dialog__title" id="title">
|
185 | <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
|
186 | </h2>
|
187 | <sl-icon-button
|
188 | part="close-button"
|
189 | exportparts="base:close-button__base"
|
190 | class="dialog__close"
|
191 | name="x"
|
192 | label=${this.localize.term("close")}
|
193 | library="system"
|
194 | @click="${() => this.requestClose("close-button")}"
|
195 | ></sl-icon-button>
|
196 | </header>
|
197 | ` : ""}
|
198 |
|
199 | <div part="body" class="dialog__body">
|
200 | <slot></slot>
|
201 | </div>
|
202 |
|
203 | <footer part="footer" class="dialog__footer">
|
204 | <slot name="footer"></slot>
|
205 | </footer>
|
206 | </div>
|
207 | </div>
|
208 | `;
|
209 | }
|
210 | };
|
211 | SlDialog.styles = dialog_styles_default;
|
212 | __decorateClass([
|
213 | i(".dialog")
|
214 | ], SlDialog.prototype, "dialog", 2);
|
215 | __decorateClass([
|
216 | i(".dialog__panel")
|
217 | ], SlDialog.prototype, "panel", 2);
|
218 | __decorateClass([
|
219 | i(".dialog__overlay")
|
220 | ], SlDialog.prototype, "overlay", 2);
|
221 | __decorateClass([
|
222 | e({ type: Boolean, reflect: true })
|
223 | ], SlDialog.prototype, "open", 2);
|
224 | __decorateClass([
|
225 | e({ reflect: true })
|
226 | ], SlDialog.prototype, "label", 2);
|
227 | __decorateClass([
|
228 | e({ attribute: "no-header", type: Boolean, reflect: true })
|
229 | ], SlDialog.prototype, "noHeader", 2);
|
230 | __decorateClass([
|
231 | watch("open", { waitUntilFirstUpdate: true })
|
232 | ], SlDialog.prototype, "handleOpenChange", 1);
|
233 | SlDialog = __decorateClass([
|
234 | n("sl-dialog")
|
235 | ], SlDialog);
|
236 | setDefaultAnimation("dialog.show", {
|
237 | keyframes: [
|
238 | { opacity: 0, transform: "scale(0.8)" },
|
239 | { opacity: 1, transform: "scale(1)" }
|
240 | ],
|
241 | options: { duration: 250, easing: "ease" }
|
242 | });
|
243 | setDefaultAnimation("dialog.hide", {
|
244 | keyframes: [
|
245 | { opacity: 1, transform: "scale(1)" },
|
246 | { opacity: 0, transform: "scale(0.8)" }
|
247 | ],
|
248 | options: { duration: 250, easing: "ease" }
|
249 | });
|
250 | setDefaultAnimation("dialog.denyClose", {
|
251 | keyframes: [{ transform: "scale(1)" }, { transform: "scale(1.02)" }, { transform: "scale(1)" }],
|
252 | options: { duration: 250 }
|
253 | });
|
254 | setDefaultAnimation("dialog.overlay.show", {
|
255 | keyframes: [{ opacity: 0 }, { opacity: 1 }],
|
256 | options: { duration: 250 }
|
257 | });
|
258 | setDefaultAnimation("dialog.overlay.hide", {
|
259 | keyframes: [{ opacity: 1 }, { opacity: 0 }],
|
260 | options: { duration: 250 }
|
261 | });
|
262 |
|
263 | export {
|
264 | SlDialog
|
265 | };
|