@shoelace-style/localize 2.1.3 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.2.0
+
+- Added `dir()` method to return the target element's directionality
+- Added `lang()` method to return the target element's language
+
 ## 2.1.3
 
 - Renamed `updateLocalizedTerms()` to `update()` (forgive me SemVer, but nobody was using this I promise)

package/README.md

@@ -185,6 +185,9 @@ export class MyElement extends LitElement {
 
       <!-- Number/currency -->
       ${this.localize.number(1000, { style: 'currency', currency: 'USD'})}
+
+      <!-- Determining directionality, e.g. 'ltr' or 'rtl' -->
+      ${this.localize.dir()}
     `;
   }
 }

package/dist/index.d.ts

@@ -17,6 +17,8 @@ export declare class LocalizeController implements ReactiveController {
     constructor(host: ReactiveControllerHost & HTMLElement);
     hostConnected(): void;
     hostDisconnected(): void;
+    dir(): string;
+    lang(): string;
     term<K extends keyof Translation>(key: K, ...args: FunctionParams<Translation[K]>): any;
     date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
     number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;

package/dist/index.js

@@ -1,6 +1,7 @@
 const connectedElements = new Set();
 const documentElementObserver = new MutationObserver(update);
 const translations = new Map();
+let documentDirection = document.documentElement.dir || 'ltr';
 let documentLanguage = document.documentElement.lang || navigator.language;
 let fallback;
 documentElementObserver.observe(document.documentElement, {
@@ -53,6 +54,7 @@ export function relativeTime(lang, value, unit, options) {
     return new Intl.RelativeTimeFormat(lang, options).format(value, unit);
 }
 export function update() {
+    documentDirection = document.documentElement.dir || 'ltr';
     documentLanguage = document.documentElement.lang || navigator.language;
     [...connectedElements.keys()].map((el) => {
         if (typeof el.requestUpdate === 'function') {
@@ -71,6 +73,12 @@ export class LocalizeController {
     hostDisconnected() {
         connectedElements.delete(this.host);
     }
+    dir() {
+        return `${this.host.dir || documentDirection}`.toLowerCase();
+    }
+    lang() {
+        return `${this.host.lang || documentLanguage}`.toLowerCase();
+    }
     term(key, ...args) {
         return term(this.host.lang || documentLanguage, key, ...args);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoelace-style/localize",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "A micro library for localizing custom elements using Lit's Reactive Controller model.",
   "main": "/dist/index.js",
   "module": "/dist/index.js",

package/src/index.ts

@@ -12,6 +12,7 @@ export interface Translation {
 const connectedElements = new Set<HTMLElement>();
 const documentElementObserver = new MutationObserver(update);
 const translations: Map<string, Translation> = new Map();
+let documentDirection = document.documentElement.dir || 'ltr';
 let documentLanguage = document.documentElement.lang || navigator.language;
 let fallback: Translation;
 
@@ -100,6 +101,7 @@ export function relativeTime(
 // Updates all localized elements that are currently connected
 //
 export function update() {
+  documentDirection = document.documentElement.dir || 'ltr';
   documentLanguage = document.documentElement.lang || navigator.language;
 
   [...connectedElements.keys()].map((el: LitElement) => {
@@ -143,18 +145,38 @@ export class LocalizeController implements ReactiveController {
     connectedElements.delete(this.host);
   }
 
+  /**
+   * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
+   * lowercase.
+   */
+  dir() {
+    return `${this.host.dir || documentDirection}`.toLowerCase();
+  }
+
+  /**
+   * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
+   * lowercase.
+   */
+  lang() {
+    return `${this.host.lang || documentLanguage}`.toLowerCase();
+  }
+
   term<K extends keyof Translation>(key: K, ...args: FunctionParams<Translation[K]>) {
+    /** Outputs a localized term. */
     return term(this.host.lang || documentLanguage, key, ...args);
   }
 
+  /** Outputs a localized date in the specified format. */
   date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions) {
     return date(this.host.lang || documentLanguage, dateToFormat, options);
   }
 
+  /** Outputs a localized number in the specified format. */
   number(numberToFormat: number | string, options?: Intl.NumberFormatOptions) {
     return number(this.host.lang || documentLanguage, numberToFormat, options);
   }
 
+  /** Outputs a localized time in relative format. */
   relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) {
     return relativeTime(this.host.lang || documentLanguage, value, unit, options);
   }