79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { LitElement, html, css } from "lit";
|
|
import { state, property } from "lit/decorators.js";
|
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
import { localized, msg } from "@lit/localize";
|
|
import sortBy from "lodash/fp/sortBy";
|
|
import ISO6391 from "iso-639-1";
|
|
import type { LanguageCode } from "iso-639-1";
|
|
import type { SlSelect } from "@shoelace-style/shoelace";
|
|
|
|
const languages = sortBy("name")(
|
|
ISO6391.getLanguages(ISO6391.getAllCodes())
|
|
) as unknown as Array<{
|
|
code: LanguageCode;
|
|
name: string;
|
|
nativeName: string;
|
|
}>;
|
|
|
|
/**
|
|
* Choose language from dropdown.
|
|
* Uses ISO 639-1 codes (2 letters representing macrolanguages.)
|
|
*
|
|
* Usage:
|
|
* ```ts
|
|
* <btrix-language-select value=${defaultValue} @on-change=${console.debug}>
|
|
* <span slot="label">Label</span>
|
|
* </btrix-language-select>
|
|
* ```
|
|
*
|
|
* @event on-change
|
|
*/
|
|
@localized()
|
|
export class LanguageSelect extends LitElement {
|
|
static styles = css`
|
|
sl-select::part(control) {
|
|
box-shadow: var(--sl-shadow-small);
|
|
}
|
|
|
|
sl-menu-item:not(:hover) .secondaryText {
|
|
color: var(--sl-color-neutral-400);
|
|
}
|
|
`;
|
|
|
|
@property({ type: String })
|
|
value?: LanguageCode;
|
|
|
|
@property({ type: Boolean })
|
|
hoist = false;
|
|
|
|
render() {
|
|
return html`
|
|
<sl-select
|
|
placeholder=${msg("Browser Default")}
|
|
value=${ifDefined(this.value)}
|
|
?hoist=${this.hoist}
|
|
@sl-change=${(e: Event) => {
|
|
e.stopPropagation();
|
|
|
|
this.dispatchEvent(
|
|
new CustomEvent("on-change", {
|
|
detail: {
|
|
value: (e.target as SlSelect).value,
|
|
},
|
|
})
|
|
);
|
|
}}
|
|
>
|
|
<div slot="label"><slot name="label">${msg("Language")}</slot></div>
|
|
${languages.map(
|
|
({ code, name, nativeName }) => html`
|
|
<sl-option value=${code}>
|
|
${name} <span class="secondaryText">(${nativeName})</span>
|
|
</sl-option>
|
|
`
|
|
)}
|
|
</sl-select>
|
|
`;
|
|
}
|
|
}
|