From d5dc62824103d393647603a9515a7bc2587052d2 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 2 Jun 2022 08:53:20 -0400
Subject: [PATCH] add dir / lang

---
 CHANGELOG.md |  5 +++++
 README.md    |  3 +++
 src/index.ts | 22 ++++++++++++++++++++++
 3 files changed, 30 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 61a1cec..766b5ab 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/README.md b/README.md
index d4f1fd7..ee06538 100644
--- a/README.md
+++ b/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()}
     `;
   }
 }
diff --git a/src/index.ts b/src/index.ts
index d6663af..83b8cc4 100644
--- a/src/index.ts
+++ b/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);
   }