import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { translateText } from "../client/Utils";
@customElement("language-modal")
export class LanguageModal extends LitElement {
@property({ type: Boolean }) visible = false;
@property({ type: Array }) languageList: any[] = [];
@property({ type: String }) currentLang = "en";
createRenderRoot() {
return this; // Use Light DOM for TailwindCSS classes
}
private close = () => {
this.dispatchEvent(
new CustomEvent("close-modal", {
bubbles: true,
composed: true,
}),
);
};
updated(changedProps: Map) {
if (changedProps.has("visible")) {
if (this.visible) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
}
}
connectedCallback() {
super.connectedCallback();
window.addEventListener("keydown", this.handleKeyDown);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener("keydown", this.handleKeyDown);
document.body.style.overflow = "auto";
}
private handleKeyDown = (e: KeyboardEvent) => {
if (e.code === "Escape") {
e.preventDefault();
this.close();
}
};
private selectLanguage = (lang: string) => {
this.dispatchEvent(
new CustomEvent("language-selected", {
detail: { lang },
bubbles: true,
composed: true,
}),
);
};
render() {
if (!this.visible) return null;
return html`
`;
}
}