52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { EVENT_LOCALE_REQUEST } from "@goauthentik/common/constants";
|
|
import { customEvent } from "@goauthentik/elements/utils/customEvents";
|
|
|
|
import { localized, msg } from "@lit/localize";
|
|
import { LitElement, html } from "lit";
|
|
import { customElement } from "lit/decorators.js";
|
|
|
|
import "./ak-locale-context";
|
|
|
|
export default {
|
|
title: "Elements / Shell / Locale Context",
|
|
};
|
|
|
|
@localized()
|
|
@customElement("ak-locale-demo-component")
|
|
export class AKLocaleDemoComponent extends LitElement {
|
|
render() {
|
|
return html`<span>${msg("Everything is ok.")}</span>`;
|
|
}
|
|
}
|
|
|
|
@localized()
|
|
@customElement("ak-locale-sensitive-demo-component")
|
|
export class AKLocaleSensitiveDemoComponent extends LitElement {
|
|
render() {
|
|
return html`<p>${msg("Everything is ok.")}</p>`;
|
|
}
|
|
}
|
|
|
|
export const InFrench = () =>
|
|
html`<div style="background: #fff; padding: 4em">
|
|
<ak-locale-context locale="fr"
|
|
><ak-locale-demo-component
|
|
>Everything is not ok.</ak-locale-demo-component
|
|
></ak-locale-context
|
|
>
|
|
</div>`;
|
|
|
|
export const SwitchingBackAndForth = () => {
|
|
let lang = "en";
|
|
window.setInterval(() => {
|
|
lang = lang === "en" ? "fr" : "en";
|
|
window.dispatchEvent(customEvent(EVENT_LOCALE_REQUEST, { locale: lang }));
|
|
}, 1000);
|
|
|
|
return html`<div style="background: #fff; padding: 4em">
|
|
<ak-locale-context locale="fr">
|
|
<ak-locale-sensitive-demo-component></ak-locale-sensitive-demo-component
|
|
></ak-locale-context>
|
|
</div>`;
|
|
};
|