@ni/nimble-components 20.1.22 → 20.2.0

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 01 Sep 2023 07:07:38 GMT
+   * Generated on Fri, 01 Sep 2023 19:18:16 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16679,6 +16679,45 @@
     }
 `;
 
+  /**
+   * Observable class to subscribe to changes in the page's lang attribute
+   */
+  class DocumentElementLang {
+      constructor() {
+          this.lang = document.documentElement.lang;
+          const observer = new MutationObserver(mutations => {
+              for (const mutation of mutations) {
+                  if (mutation.type === 'attributes'
+                      && mutation.attributeName === 'lang') {
+                      this.lang = mutation.target.lang;
+                  }
+              }
+          });
+          observer.observe(document.documentElement, {
+              attributeFilter: ['lang']
+          });
+      }
+  }
+  __decorate$1([
+      observable
+  ], DocumentElementLang.prototype, "lang", void 0);
+  const documentElementLang = new DocumentElementLang();
+
+  function isValidLang(value) {
+      try {
+          // We are relying on the Locale constructor to validate the value
+          // eslint-disable-next-line no-new
+          new Intl.Locale(value);
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  }
+  const lang$1 = DesignToken.create({
+      name: 'lang',
+      cssCustomPropertyName: null
+  }).withDefault(() => (isValidLang(documentElementLang.lang) ? documentElementLang.lang : 'en-US'));
   // Not represented as a CSS Custom Property, instead available
   // as an attribute of theme provider.
   const direction = DesignToken.create({
@@ -16697,8 +16736,31 @@
   class ThemeProvider extends FoundationElement {
       constructor() {
           super(...arguments);
-          this.direction = Direction.ltr;
           this.theme = Theme.light;
+          this.langIsInvalid = false;
+      }
+      get validity() {
+          return {
+              invalidLang: this.langIsInvalid
+          };
+      }
+      checkValidity() {
+          return !this.langIsInvalid;
+      }
+      langChanged(_prev, next) {
+          if (next === null || next === undefined) {
+              lang$1.deleteValueFor(this);
+              this.langIsInvalid = false;
+              return;
+          }
+          if (isValidLang(next)) {
+              lang$1.setValueFor(this, next);
+              this.langIsInvalid = false;
+          }
+          else {
+              lang$1.deleteValueFor(this);
+              this.langIsInvalid = true;
+          }
       }
       directionChanged(_prev, next) {
           if (next !== undefined && next !== null) {
@@ -16718,14 +16780,13 @@
       }
   }
   __decorate$1([
-      attr({
-          attribute: 'direction'
-      })
+      attr()
+  ], ThemeProvider.prototype, "lang", void 0);
+  __decorate$1([
+      attr()
   ], ThemeProvider.prototype, "direction", void 0);
   __decorate$1([
-      attr({
-          attribute: 'theme'
-      })
+      attr()
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
@@ -65148,11 +65209,21 @@ img.ProseMirror-separator {
           super(...arguments);
           /** @internal */
           this.validator = new TableColumnDateTextValidator(this.columnInternals);
+          this.langSubscriber = {
+              handleChange: () => {
+                  this.updateColumnConfig();
+              }
+          };
       }
       connectedCallback() {
           super.connectedCallback();
+          lang$1.subscribe(this.langSubscriber, this);
           this.updateColumnConfig();
       }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          lang$1.unsubscribe(this.langSubscriber, this);
+      }
       get validity() {
           return this.validator.getValidity();
       }
@@ -65251,7 +65322,7 @@ img.ProseMirror-separator {
               options = this.getCustomFormattingOptions();
           }
           try {
-              return new Intl.DateTimeFormat(undefined, options);
+              return new Intl.DateTimeFormat(lang$1.getValueFor(this), options);
           }
           catch (e) {
               return undefined;