@odx/foundation 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/i18n/lib/translate.d.ts

@@ -1,5 +1,9 @@
 import { Signal } from '@lit-labs/signals';
 import { Locale } from './models.js';
-export declare function setTranslation(locale: Locale, translation: Record<string, string>): void;
+type Translation = {
+    [key: string]: Translation | string;
+};
+export declare function setTranslation(locale: Locale, translation: Translation): void;
 export declare function translate(key: string, context?: Record<string, string | number> | null, locale?: Locale | null): Signal.Computed<string>;
+export {};
 //# sourceMappingURL=translate.d.ts.map

package/dist/i18n.js

@@ -0,0 +1,140 @@
+import { signal, SignalWatcher, computed } from '@lit-labs/signals';
+import { createOptions, parseDate, createMutationObserver, dedupeMixin, interpolate } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import { k as flattenObject } from './vendor.js';
+
+const I18nOptions = createOptions({
+  defaultLocale: () => navigator.language,
+  relativeTimeFormatOptions: { minUnit: "minute" }
+});
+const i18nOptions = signal(null);
+function setI18nOptions(options) {
+  i18nOptions.set(getI18nOptions(options));
+}
+function getI18nOptions(options) {
+  return I18nOptions(options ?? i18nOptions.get() ?? {});
+}
+
+function formatDate(input, options) {
+  const value = parseDate(input);
+  if (!value) return "";
+  const { dateTimeFormatOptions } = getI18nOptions({ dateTimeFormatOptions: options });
+  if (dateTimeFormatOptions?.dateStyle === "iso8601") {
+    return new Intl.DateTimeFormat("sv-SE", { dateStyle: "short" }).format(value);
+  }
+  return new Intl.DateTimeFormat(options?.locale, dateTimeFormatOptions).format(value);
+}
+function formatNumber(input, options) {
+  const value = Number(input);
+  if (Number.isNaN(value)) return "";
+  const { numberFormatOptions } = getI18nOptions({ numberFormatOptions: options });
+  if (numberFormatOptions?.currency) {
+    numberFormatOptions.style = "currency";
+  }
+  return new Intl.NumberFormat(numberFormatOptions?.locale, numberFormatOptions).format(value);
+}
+function formatList(input, options) {
+  if (input.length === 0) return "";
+  const { listFormatOptions } = getI18nOptions({ listFormatOptions: options });
+  return new Intl.ListFormat(options?.locale, listFormatOptions).format(input);
+}
+const TIME_UNITS = [
+  { max: 59e3, value: 1e3, unit: "second" },
+  // max 59 seconds
+  { max: 276e4, value: 6e4, unit: "minute" },
+  // max 46 minutes
+  { max: 72e6, value: 36e5, unit: "hour" },
+  // max 20 hours
+  { max: 5184e5, value: 864e5, unit: "day" },
+  // max 6 days
+  { max: 24192e5, value: 6048e5, unit: "week" },
+  // max 28 days
+  { max: 28512e6, value: 2592e6, unit: "month" },
+  // max 11 months
+  { max: Number.POSITIVE_INFINITY, value: 31536e6, unit: "year" }
+];
+function findTimeUnit(value, minUnit) {
+  const minTimeUnit = TIME_UNITS.find(({ unit }) => unit === minUnit) ?? TIME_UNITS[0];
+  return TIME_UNITS.find((config) => value < config.max && config.value >= minTimeUnit.value);
+}
+function formatRelativeTime(input, options) {
+  const value = parseDate(input);
+  if (!value) return "";
+  const { relativeTimeFormatOptions } = getI18nOptions({ relativeTimeFormatOptions: options });
+  const relativeTime = value.getTime() - (/* @__PURE__ */ new Date()).getTime();
+  const timeUnit = findTimeUnit(Math.abs(relativeTime), relativeTimeFormatOptions?.minUnit);
+  return new Intl.RelativeTimeFormat(options?.locale, relativeTimeFormatOptions).format(Math.round(relativeTime / timeUnit.value), timeUnit.unit);
+}
+
+const activeLocale = signal(null, { equals: (t, t2) => t?.toString() === t2?.toString() });
+function watchLocaleChanges(root = document.documentElement) {
+  const updateLocale = () => activeLocale.set(getLocale(root.lang));
+  const observer = createMutationObserver(updateLocale);
+  observer.observe(root, { attributes: true, attributeFilter: ["lang"] });
+  updateLocale();
+}
+function setLocale(locale) {
+  if (locale === null) {
+    document.documentElement.lang = getI18nOptions().defaultLocale().toString();
+  } else {
+    document.documentElement.lang = getLocale(locale).toString();
+  }
+}
+function getLocale(locale) {
+  const fallbackLocale = activeLocale.get() || getI18nOptions().defaultLocale();
+  try {
+    return new Intl.Locale(locale || fallbackLocale);
+  } catch {
+    return new Intl.Locale(fallbackLocale);
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const IsLocalized = dedupeMixin((superClass) => {
+  class IsLocalizedElement extends SignalWatcher(superClass) {
+    constructor() {
+      super(...arguments);
+      this.locale = computed(() => getLocale(this.lang));
+    }
+    formatDate(...[input, options]) {
+      return formatDate(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatNumber(...[input, options]) {
+      return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatList(...[input, options]) {
+      return formatList(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatRelativeTime(...[input, options]) {
+      return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+  }
+  __decorateClass([
+    property()
+  ], IsLocalizedElement.prototype, "lang", 2);
+  return IsLocalizedElement;
+});
+
+const translations = signal({});
+function setTranslation(locale, translation) {
+  const { language } = getLocale(locale);
+  translations.set({ ...translations.get(), [language]: { ...translations.get()[language], ...flattenObject(translation, { delimiter: "." }) } });
+}
+function translate(key, context, locale) {
+  return computed(() => {
+    const translation = translations.get()[getLocale(locale).language];
+    if (typeof translation?.[key] !== "string") return key;
+    return interpolate(translation[key], { ...translation, ...context });
+  });
+}
+
+export { IsLocalized, formatDate, formatList, formatNumber, formatRelativeTime, getI18nOptions, getLocale, setI18nOptions, setLocale, setTranslation, translate, watchLocaleChanges };