292 lines
8.7 KiB
JavaScript
292 lines
8.7 KiB
JavaScript
import {
|
|
Modal
|
|
} from "./chunk.JEBKOPXW.js";
|
|
import {
|
|
lockBodyScrolling,
|
|
unlockBodyScrolling
|
|
} from "./chunk.RK73WSZS.js";
|
|
import {
|
|
dialog_styles_default
|
|
} from "./chunk.WH4QNFFK.js";
|
|
import {
|
|
SlIconButton
|
|
} from "./chunk.Y77CZW56.js";
|
|
import {
|
|
getAnimation,
|
|
setDefaultAnimation
|
|
} from "./chunk.RCZVQXWP.js";
|
|
import {
|
|
waitForEvent
|
|
} from "./chunk.B4BZKR24.js";
|
|
import {
|
|
animateTo,
|
|
stopAnimations
|
|
} from "./chunk.S7GYYU7Z.js";
|
|
import {
|
|
LocalizeController
|
|
} from "./chunk.NH3SRVOC.js";
|
|
import {
|
|
o
|
|
} from "./chunk.2URMUHDY.js";
|
|
import {
|
|
HasSlotController
|
|
} from "./chunk.NYIIDP5N.js";
|
|
import {
|
|
e
|
|
} from "./chunk.UZVKBFXH.js";
|
|
import {
|
|
watch
|
|
} from "./chunk.FA5RT4K4.js";
|
|
import {
|
|
ShoelaceElement,
|
|
e as e2,
|
|
n
|
|
} from "./chunk.SEXBCYCU.js";
|
|
import {
|
|
x
|
|
} from "./chunk.CXZZ2LVK.js";
|
|
import {
|
|
__decorateClass
|
|
} from "./chunk.KIILAQWQ.js";
|
|
|
|
// src/components/dialog/dialog.component.ts
|
|
var SlDialog = class extends ShoelaceElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.hasSlotController = new HasSlotController(this, "footer");
|
|
this.localize = new LocalizeController(this);
|
|
this.modal = new Modal(this);
|
|
this.open = false;
|
|
this.label = "";
|
|
this.noHeader = false;
|
|
this.handleDocumentKeyDown = (event) => {
|
|
if (event.key === "Escape" && this.modal.isActive() && this.open) {
|
|
event.stopPropagation();
|
|
this.requestClose("keyboard");
|
|
}
|
|
};
|
|
}
|
|
firstUpdated() {
|
|
this.dialog.hidden = !this.open;
|
|
if (this.open) {
|
|
this.addOpenListeners();
|
|
this.modal.activate();
|
|
lockBodyScrolling(this);
|
|
}
|
|
}
|
|
disconnectedCallback() {
|
|
var _a;
|
|
super.disconnectedCallback();
|
|
this.modal.deactivate();
|
|
unlockBodyScrolling(this);
|
|
(_a = this.closeWatcher) == null ? void 0 : _a.destroy();
|
|
}
|
|
requestClose(source) {
|
|
const slRequestClose = this.emit("sl-request-close", {
|
|
cancelable: true,
|
|
detail: { source }
|
|
});
|
|
if (slRequestClose.defaultPrevented) {
|
|
const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
|
|
animateTo(this.panel, animation.keyframes, animation.options);
|
|
return;
|
|
}
|
|
this.hide();
|
|
}
|
|
addOpenListeners() {
|
|
var _a;
|
|
if ("CloseWatcher" in window) {
|
|
(_a = this.closeWatcher) == null ? void 0 : _a.destroy();
|
|
this.closeWatcher = new CloseWatcher();
|
|
this.closeWatcher.onclose = () => this.requestClose("keyboard");
|
|
} else {
|
|
document.addEventListener("keydown", this.handleDocumentKeyDown);
|
|
}
|
|
}
|
|
removeOpenListeners() {
|
|
var _a;
|
|
(_a = this.closeWatcher) == null ? void 0 : _a.destroy();
|
|
document.removeEventListener("keydown", this.handleDocumentKeyDown);
|
|
}
|
|
async handleOpenChange() {
|
|
if (this.open) {
|
|
this.emit("sl-show");
|
|
this.addOpenListeners();
|
|
this.originalTrigger = document.activeElement;
|
|
this.modal.activate();
|
|
lockBodyScrolling(this);
|
|
const autoFocusTarget = this.querySelector("[autofocus]");
|
|
if (autoFocusTarget) {
|
|
autoFocusTarget.removeAttribute("autofocus");
|
|
}
|
|
await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
|
|
this.dialog.hidden = false;
|
|
requestAnimationFrame(() => {
|
|
const slInitialFocus = this.emit("sl-initial-focus", { cancelable: true });
|
|
if (!slInitialFocus.defaultPrevented) {
|
|
if (autoFocusTarget) {
|
|
autoFocusTarget.focus({ preventScroll: true });
|
|
} else {
|
|
this.panel.focus({ preventScroll: true });
|
|
}
|
|
}
|
|
if (autoFocusTarget) {
|
|
autoFocusTarget.setAttribute("autofocus", "");
|
|
}
|
|
});
|
|
const panelAnimation = getAnimation(this, "dialog.show", { dir: this.localize.dir() });
|
|
const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
|
|
await Promise.all([
|
|
animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
|
|
animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
|
|
]);
|
|
this.emit("sl-after-show");
|
|
} else {
|
|
this.emit("sl-hide");
|
|
this.removeOpenListeners();
|
|
this.modal.deactivate();
|
|
await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
|
|
const panelAnimation = getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
|
|
const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
|
|
await Promise.all([
|
|
animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
|
|
this.overlay.hidden = true;
|
|
}),
|
|
animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
|
|
this.panel.hidden = true;
|
|
})
|
|
]);
|
|
this.dialog.hidden = true;
|
|
this.overlay.hidden = false;
|
|
this.panel.hidden = false;
|
|
unlockBodyScrolling(this);
|
|
const trigger = this.originalTrigger;
|
|
if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
|
|
setTimeout(() => trigger.focus());
|
|
}
|
|
this.emit("sl-after-hide");
|
|
}
|
|
}
|
|
/** Shows the dialog. */
|
|
async show() {
|
|
if (this.open) {
|
|
return void 0;
|
|
}
|
|
this.open = true;
|
|
return waitForEvent(this, "sl-after-show");
|
|
}
|
|
/** Hides the dialog */
|
|
async hide() {
|
|
if (!this.open) {
|
|
return void 0;
|
|
}
|
|
this.open = false;
|
|
return waitForEvent(this, "sl-after-hide");
|
|
}
|
|
render() {
|
|
return x`
|
|
<div
|
|
part="base"
|
|
class=${e({
|
|
dialog: true,
|
|
"dialog--open": this.open,
|
|
"dialog--has-footer": this.hasSlotController.test("footer")
|
|
})}
|
|
>
|
|
<div part="overlay" class="dialog__overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
|
|
|
|
<div
|
|
part="panel"
|
|
class="dialog__panel"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-hidden=${this.open ? "false" : "true"}
|
|
aria-label=${o(this.noHeader ? this.label : void 0)}
|
|
aria-labelledby=${o(!this.noHeader ? "title" : void 0)}
|
|
tabindex="-1"
|
|
>
|
|
${!this.noHeader ? x`
|
|
<header part="header" class="dialog__header">
|
|
<h2 part="title" class="dialog__title" id="title">
|
|
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
|
|
</h2>
|
|
<div part="header-actions" class="dialog__header-actions">
|
|
<slot name="header-actions"></slot>
|
|
<sl-icon-button
|
|
part="close-button"
|
|
exportparts="base:close-button__base"
|
|
class="dialog__close"
|
|
name="x-lg"
|
|
label=${this.localize.term("close")}
|
|
library="system"
|
|
@click="${() => this.requestClose("close-button")}"
|
|
></sl-icon-button>
|
|
</div>
|
|
</header>
|
|
` : ""}
|
|
${""}
|
|
<div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>
|
|
|
|
<footer part="footer" class="dialog__footer">
|
|
<slot name="footer"></slot>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
};
|
|
SlDialog.styles = dialog_styles_default;
|
|
SlDialog.dependencies = {
|
|
"sl-icon-button": SlIconButton
|
|
};
|
|
__decorateClass([
|
|
e2(".dialog")
|
|
], SlDialog.prototype, "dialog", 2);
|
|
__decorateClass([
|
|
e2(".dialog__panel")
|
|
], SlDialog.prototype, "panel", 2);
|
|
__decorateClass([
|
|
e2(".dialog__overlay")
|
|
], SlDialog.prototype, "overlay", 2);
|
|
__decorateClass([
|
|
n({ type: Boolean, reflect: true })
|
|
], SlDialog.prototype, "open", 2);
|
|
__decorateClass([
|
|
n({ reflect: true })
|
|
], SlDialog.prototype, "label", 2);
|
|
__decorateClass([
|
|
n({ attribute: "no-header", type: Boolean, reflect: true })
|
|
], SlDialog.prototype, "noHeader", 2);
|
|
__decorateClass([
|
|
watch("open", { waitUntilFirstUpdate: true })
|
|
], SlDialog.prototype, "handleOpenChange", 1);
|
|
setDefaultAnimation("dialog.show", {
|
|
keyframes: [
|
|
{ opacity: 0, scale: 0.8 },
|
|
{ opacity: 1, scale: 1 }
|
|
],
|
|
options: { duration: 250, easing: "ease" }
|
|
});
|
|
setDefaultAnimation("dialog.hide", {
|
|
keyframes: [
|
|
{ opacity: 1, scale: 1 },
|
|
{ opacity: 0, scale: 0.8 }
|
|
],
|
|
options: { duration: 250, easing: "ease" }
|
|
});
|
|
setDefaultAnimation("dialog.denyClose", {
|
|
keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
|
|
options: { duration: 250 }
|
|
});
|
|
setDefaultAnimation("dialog.overlay.show", {
|
|
keyframes: [{ opacity: 0 }, { opacity: 1 }],
|
|
options: { duration: 250 }
|
|
});
|
|
setDefaultAnimation("dialog.overlay.hide", {
|
|
keyframes: [{ opacity: 1 }, { opacity: 0 }],
|
|
options: { duration: 250 }
|
|
});
|
|
|
|
export {
|
|
SlDialog
|
|
};
|