@esri/calcite-components 1.0.0-beta.95 → 1.0.0-beta.97

package/dist/collection/utils/globalAttributes.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 import { createObserver } from "./observers";
 const allowedGlobalAttributes = ["lang"];

package/dist/collection/utils/globalScript.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 import { initThemeChangeEvent } from "./theme";
 /**

package/dist/collection/utils/guid.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 function gen(counts) {
   return counts

package/dist/collection/utils/interactive.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 function noopClick() {
   /** noop */

package/dist/collection/utils/key.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 export function isActivationKey(key) {
   return key === "Enter" || key === " ";

package/dist/collection/utils/label.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
 /**

package/dist/collection/utils/locale.js

@@ -1,9 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
-import { sanitizeDecimalString, sanitizeExponentialNumberString, isValidNumber, BigDecimal } from "./number";
+import { BigDecimal, isValidNumber, sanitizeExponentialNumberString } from "./number";
+import { createObserver } from "./observers";
+import { closestElementCrossShadowBoundary, containsCrossShadowBoundary } from "./dom";
+export const defaultLocale = "en";
 export const locales = [
   "ar",
   "bg",
@@ -14,7 +17,7 @@ export const locales = [
   "de",
   "de-CH",
   "el",
-  "en",
+  defaultLocale,
   "en-AU",
   "en-CA",
   "en-GB",
@@ -55,78 +58,210 @@ export const locales = [
   "zh-HK",
   "zh-TW"
 ];
-const allDecimalsExceptLast = new RegExp(`[.](?=.*[.])`, "g");
-const everythingExceptNumbersDecimalsAndMinusSigns = new RegExp("[^0-9-.]", "g");
-const defaultGroupSeparator = new RegExp(",", "g");
+export const numberingSystems = [
+  "arab",
+  "arabext",
+  "bali",
+  "beng",
+  "deva",
+  "fullwide",
+  "gujr",
+  "guru",
+  "hanidec",
+  "khmr",
+  "knda",
+  "laoo",
+  "latn",
+  "limb",
+  "mlym",
+  "mong",
+  "mymr",
+  "orya",
+  "tamldec",
+  "telu",
+  "thai",
+  "tibt"
+];
+const isNumberingSystemSupported = (numberingSystem) => numberingSystems.includes(numberingSystem);
 const browserNumberingSystem = new Intl.NumberFormat().resolvedOptions().numberingSystem;
-const defaultNumberingSystem = browserNumberingSystem === "arab" ? "latn" : browserNumberingSystem;
-export function createLocaleNumberFormatter(locale, numberingSystem = defaultNumberingSystem) {
-  return new Intl.NumberFormat(locale, {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 20,
-    numberingSystem
-  });
-}
-export function delocalizeNumberString(numberString, locale) {
-  return sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
-    const delocalizedNumberString = nonExpoNumString
-      .replace(getMinusSign(locale), "-")
-      .replace(getGroupSeparator(locale), "")
-      .replace(getDecimalSeparator(locale), ".")
-      .replace(allDecimalsExceptLast, "")
-      .replace(everythingExceptNumbersDecimalsAndMinusSigns, "");
-    return isValidNumber(delocalizedNumberString) ? delocalizedNumberString : nonExpoNumString;
-  });
+export const defaultNumberingSystem = browserNumberingSystem === "arab" || !isNumberingSystemSupported(browserNumberingSystem)
+  ? "latn"
+  : browserNumberingSystem;
+export const getSupportedNumberingSystem = (numberingSystem) => isNumberingSystemSupported(numberingSystem) ? numberingSystem : defaultNumberingSystem;
+export function getSupportedLocale(locale) {
+  if (locales.indexOf(locale) > -1) {
+    return locale;
+  }
+  if (!locale) {
+    return defaultLocale;
+  }
+  locale = locale.toLowerCase();
+  // we support both 'nb' and 'no' (BCP 47) for Norwegian
+  if (locale === "nb") {
+    return "no";
+  }
+  if (locale.includes("-")) {
+    locale = locale.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
+    if (!locales.includes(locale)) {
+      locale = locale.split("-")[0];
+    }
+  }
+  return locales.includes(locale) ? locale : defaultLocale;
 }
-export function getGroupSeparator(locale) {
-  const formatter = createLocaleNumberFormatter(locale);
-  const parts = formatter.formatToParts(1234567);
-  const value = parts.find((part) => part.type === "group").value;
-  // change whitespace group characters that don't render correctly
-  return value.trim().length === 0 ? " " : value;
+const connectedComponents = new Set();
+/**
+ * This utility sets up internals for messages support.
+ *
+ * It needs to be called in `connectedCallback` before any logic that depends on locale
+ *
+ * @param component
+ */
+export function connectLocalized(component) {
+  updateEffectiveLocale(component);
+  if (connectedComponents.size === 0) {
+    mutationObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["lang"],
+      subtree: true
+    });
+  }
+  connectedComponents.add(component);
 }
-export function getDecimalSeparator(locale) {
-  const formatter = createLocaleNumberFormatter(locale);
-  const parts = formatter.formatToParts(1.1);
-  return parts.find((part) => part.type === "decimal").value;
+/**
+ * This is only exported for components that implemented the now deprecated `locale` prop.
+ *
+ * Do not use this utils for new components.
+ *
+ * @param component
+ */
+export function updateEffectiveLocale(component) {
+  component.effectiveLocale = getLocale(component);
 }
-export function getMinusSign(locale) {
-  const formatter = createLocaleNumberFormatter(locale);
-  const parts = formatter.formatToParts(-9);
-  return parts.find((part) => part.type === "minusSign").value;
+/**
+ * This utility tears down internals for messages support.
+ *
+ * It needs to be called in `disconnectedCallback`
+ *
+ * @param component
+ */
+export function disconnectLocalized(component) {
+  connectedComponents.delete(component);
+  if (connectedComponents.size === 0) {
+    mutationObserver.disconnect();
+  }
 }
-export function localizeNumberString(numberString, locale, displayGroupSeparator = false, numberingSystem) {
-  return sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
-    if (nonExpoNumString) {
-      const sanitizedNumberString = sanitizeDecimalString(nonExpoNumString.replace(defaultGroupSeparator, ""));
-      if (isValidNumber(sanitizedNumberString)) {
-        const parts = new BigDecimal(sanitizedNumberString).formatToParts(locale, numberingSystem);
-        const localizedNumberString = parts
-          .map(({ type, value }) => {
-          switch (type) {
-            case "group":
-              return displayGroupSeparator ? getGroupSeparator(locale) : "";
-            case "decimal":
-              return getDecimalSeparator(locale);
-            case "minusSign":
-              return getMinusSign(locale);
-            default:
-              return value;
-          }
-        })
-          .reduce((string, part) => string + part);
-        return localizedNumberString;
+const mutationObserver = createObserver("mutation", (records) => {
+  records.forEach((record) => {
+    const el = record.target;
+    connectedComponents.forEach((component) => {
+      const hasOverridingLocale = !!(component.locale && !component.el.lang);
+      const inUnrelatedSubtree = !containsCrossShadowBoundary(el, component.el);
+      if (hasOverridingLocale || inUnrelatedSubtree) {
+        return;
       }
-    }
-    return nonExpoNumString;
+      const closestLangEl = closestElementCrossShadowBoundary(component.el, "[lang]");
+      if (!closestLangEl) {
+        component.effectiveLocale = defaultLocale;
+        return;
+      }
+      const closestLang = closestLangEl.lang;
+      component.effectiveLocale =
+        // user set lang="" means unknown language, so we use default
+        closestLangEl.hasAttribute("lang") && closestLang === "" ? defaultLocale : closestLang;
+    });
   });
-}
+});
 /**
  * This util helps resolve a component's locale.
  * It will also fall back on the deprecated `locale` if a component implemented this previously.
  *
  * @param component
  */
-export function getLocale(component) {
-  return component.el.lang || component.locale || document.documentElement.lang || "en";
+function getLocale(component) {
+  var _a;
+  return (component.el.lang ||
+    component.locale ||
+    ((_a = closestElementCrossShadowBoundary(component.el, "[lang]")) === null || _a === void 0 ? void 0 : _a.lang) ||
+    document.documentElement.lang ||
+    defaultLocale);
+}
+/**
+ * This util formats and parses numbers for localization
+ */
+class NumberStringFormat {
+  constructor() {
+    this.delocalize = (numberString) => 
+    // For performance, (de)localization is skipped if the formatter isn't initialized.
+    // In order to localize/delocalize, e.g. when lang/numberingSystem props are not default values,
+    // `numberFormatOptions` must be set in a component to create and cache the formatter.
+    this._numberFormatOptions
+      ? sanitizeExponentialNumberString(numberString, (nonExpoNumString) => nonExpoNumString
+        .trim()
+        .replace(new RegExp(`[${this._minusSign}]`, "g"), "-")
+        .replace(new RegExp(`[${this._group}]`, "g"), "")
+        .replace(new RegExp(`[${this._decimal}]`, "g"), ".")
+        .replace(new RegExp(`[${this._digits.join("")}]`, "g"), this._getDigitIndex))
+      : numberString;
+    this.localize = (numberString) => this._numberFormatOptions
+      ? sanitizeExponentialNumberString(numberString, (nonExpoNumString) => isValidNumber(nonExpoNumString.trim())
+        ? new BigDecimal(nonExpoNumString.trim())
+          .format(this._numberFormatter)
+          .replace(new RegExp(`[${this._actualGroup}]`, "g"), this._group)
+        : nonExpoNumString)
+      : numberString;
+  }
+  get group() {
+    return this._group;
+  }
+  get decimal() {
+    return this._decimal;
+  }
+  get minusSign() {
+    return this._minusSign;
+  }
+  get digits() {
+    return this._digits;
+  }
+  get numberFormatter() {
+    return this._numberFormatter;
+  }
+  get numberFormatOptions() {
+    return this._numberFormatOptions;
+  }
+  /**
+   * numberFormatOptions needs to be set before localize/delocalize is called to ensure the options are up to date
+   */
+  set numberFormatOptions(options) {
+    options.locale = getSupportedLocale(options === null || options === void 0 ? void 0 : options.locale);
+    options.numberingSystem = getSupportedNumberingSystem(options === null || options === void 0 ? void 0 : options.numberingSystem);
+    if (
+    // No need to create the formatter if `locale` and `numberingSystem`
+    // are the default values and `numberFormatOptions` has not been set
+    (!this._numberFormatOptions &&
+      options.locale === defaultLocale &&
+      options.numberingSystem === defaultNumberingSystem &&
+      // don't skip initialization if any options besides locale/numberingSystem are set
+      Object.keys(options).length === 2) ||
+      // cache formatter by only recreating when options change
+      JSON.stringify(this._numberFormatOptions) === JSON.stringify(options)) {
+      return;
+    }
+    this._numberFormatOptions = options;
+    this._numberFormatter = new Intl.NumberFormat(this._numberFormatOptions.locale, this._numberFormatOptions);
+    this._digits = [
+      ...new Intl.NumberFormat(this._numberFormatOptions.locale, {
+        useGrouping: false,
+        numberingSystem: this._numberFormatOptions.numberingSystem
+      }).format(9876543210)
+    ].reverse();
+    const index = new Map(this._digits.map((d, i) => [d, i]));
+    const parts = new Intl.NumberFormat(this._numberFormatOptions.locale).formatToParts(-12345678.9);
+    this._actualGroup = parts.find((d) => d.type === "group").value;
+    // change whitespace group characters that don't render correctly
+    this._group = this._actualGroup.trim().length === 0 ? " " : this._actualGroup;
+    this._decimal = parts.find((d) => d.type === "decimal").value;
+    this._minusSign = parts.find((d) => d.type === "minusSign").value;
+    this._getDigitIndex = (d) => index.get(d);
+  }
 }
+export const numberStringFormatter = new NumberStringFormat();

package/dist/collection/utils/math.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 export const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 export const decimalPlaces = (value) => {

package/dist/collection/utils/number.js

@@ -1,15 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 import { numberKeys } from "./key";
-import { createLocaleNumberFormatter, getDecimalSeparator, getMinusSign } from "./locale";
-// regex for number sanitization
-const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
-const decimalOnlyAtEndOfString = /(?!^\.)\.$/;
-const allHyphensExceptTheStart = /(?!^-)-/g;
-const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/;
+import { numberStringFormatter } from "./locale";
 // adopted from https://stackoverflow.com/a/66939244
 export class BigDecimal {
   constructor(input) {
@@ -36,10 +31,9 @@ export class BigDecimal {
     const i = s.slice(0, -BigDecimal.DECIMALS);
     const d = s.slice(-BigDecimal.DECIMALS).replace(/\.?0+$/, "");
     const value = i.concat(d.length ? "." + d : "");
-    return (this.isNegative ? "-" : "").concat(value);
+    return `${this.isNegative ? "-" : ""}${value}`;
   }
-  formatToParts(locale, numberingSystem) {
-    const formatter = createLocaleNumberFormatter(locale, numberingSystem);
+  formatToParts(formatter) {
     const s = this.value
       .toString()
       .replace(new RegExp("-", "g"), "")
@@ -47,13 +41,24 @@ export class BigDecimal {
     const i = s.slice(0, -BigDecimal.DECIMALS);
     const d = s.slice(-BigDecimal.DECIMALS).replace(/\.?0+$/, "");
     const parts = formatter.formatToParts(BigInt(i));
-    this.isNegative && parts.unshift({ type: "minusSign", value: getMinusSign(locale) });
+    this.isNegative && parts.unshift({ type: "minusSign", value: numberStringFormatter.minusSign });
     if (d.length) {
-      parts.push({ type: "decimal", value: getDecimalSeparator(locale) });
+      parts.push({ type: "decimal", value: numberStringFormatter.decimal });
       d.split("").forEach((char) => parts.push({ type: "fraction", value: char }));
     }
     return parts;
   }
+  format(formatter) {
+    const s = this.value
+      .toString()
+      .replace(new RegExp("-", "g"), "")
+      .padStart(BigDecimal.DECIMALS + 1, "0");
+    const i = s.slice(0, -BigDecimal.DECIMALS);
+    const d = s.slice(-BigDecimal.DECIMALS).replace(/\.?0+$/, "");
+    const iFormatted = `${this.isNegative ? numberStringFormatter.minusSign : ""}${formatter.format(BigInt(i))}`;
+    const dFormatted = d.length ? `${numberStringFormatter.decimal}${formatter.format(BigInt(d))}` : "";
+    return `${iFormatted}${dFormatted}`;
+  }
   add(num) {
     return BigDecimal.fromBigInt(this.value + new BigDecimal(num).value);
   }
@@ -96,30 +101,30 @@ export function parseNumberString(numberString) {
     return isValidNumber(result) ? new BigDecimal(result).toString() : "";
   });
 }
-export function sanitizeDecimalString(decimalString) {
-  return decimalString.replace(decimalOnlyAtEndOfString, "");
-}
-export function sanitizeNegativeString(negativeString) {
-  return negativeString.replace(allHyphensExceptTheStart, "");
-}
-export function sanitizeLeadingZeroString(zeroString) {
-  return zeroString.replace(allLeadingZerosOptionallyNegative, "$1");
-}
-export function sanitizeNumberString(numberString) {
-  return sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
-    const sanitizedValue = sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(nonExpoNumString)));
-    return isValidNumber(sanitizedValue)
-      ? isNegativeDecimalOnlyZeros.test(sanitizedValue)
-        ? sanitizedValue
-        : new BigDecimal(sanitizedValue).toString()
-      : nonExpoNumString;
-  });
-}
+// regex for number sanitization
+const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
+const decimalOnlyAtEndOfString = /(?!^\.)\.$/;
+const allHyphensExceptTheStart = /(?!^-)-/g;
+const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/;
+export const sanitizeNumberString = (numberString) => sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
+  const sanitizedValue = nonExpoNumString
+    .replace(allHyphensExceptTheStart, "")
+    .replace(decimalOnlyAtEndOfString, "")
+    .replace(allLeadingZerosOptionallyNegative, "$1");
+  return isValidNumber(sanitizedValue)
+    ? isNegativeDecimalOnlyZeros.test(sanitizedValue)
+      ? sanitizedValue
+      : new BigDecimal(sanitizedValue).toString()
+    : nonExpoNumString;
+});
 export function sanitizeExponentialNumberString(numberString, func) {
   if (!numberString) {
     return numberString;
   }
   const firstE = numberString.toLowerCase().indexOf("e") + 1;
+  if (!firstE) {
+    return func(numberString);
+  }
   return numberString
     .replace(/[eE]*$/g, "")
     .substring(0, firstE)

package/dist/collection/utils/observers.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 import { Build } from "@stencil/core";
 /**
@@ -12,13 +12,37 @@ import { Build } from "@stencil/core";
  * @param options - the observer options
  */
 export function createObserver(type, callback, options) {
+  if (!Build.isBrowser) {
+    return undefined;
+  }
   const Observer = getObserver(type);
-  return Build.isBrowser ? new Observer(callback, options) : undefined;
+  return new Observer(callback, options);
 }
 function getObserver(type) {
-  return (type === "intersection"
-    ? window.IntersectionObserver
-    : type === "mutation"
-      ? window.MutationObserver
-      : window.ResizeObserver);
+  // based on https://github.com/whatwg/dom/issues/126#issuecomment-1049814948
+  class ExtendedMutationObserver extends window.MutationObserver {
+    constructor(callback) {
+      super(callback);
+      this.observedEntry = [];
+      this.callback = callback;
+    }
+    observe(target, options) {
+      this.observedEntry.push({ target, options });
+      return super.observe(target, options);
+    }
+    unobserve(target) {
+      const newObservedEntries = this.observedEntry.filter((observed) => observed.target !== target);
+      this.observedEntry = [];
+      this.callback(super.takeRecords(), this);
+      this.disconnect();
+      newObservedEntries.forEach((observed) => this.observe(observed.target, observed.options));
+    }
+  }
+  return (function () {
+    return (type === "intersection"
+      ? window.IntersectionObserver
+      : type === "mutation"
+        ? ExtendedMutationObserver
+        : window.ResizeObserver);
+  })();
 }

package/dist/collection/utils/openCloseComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 const componentToTransitionListeners = new WeakMap();
 function transitionStart(event) {

package/dist/collection/utils/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 export const autoTheme = "calcite-theme-auto";
 export const darkTheme = "calcite-theme-dark";

package/dist/collection/utils/t9n.js

@@ -0,0 +1,110 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.97
+ */
+import { getAssetPath } from "@stencil/core";
+import { getSupportedLocale } from "./locale";
+export const componentLangToMessageBundleCache = {};
+async function getMessageBundle(lang, component) {
+  const key = `${component}_${lang}`;
+  if (componentLangToMessageBundleCache[key]) {
+    return componentLangToMessageBundleCache[key];
+  }
+  componentLangToMessageBundleCache[key] = fetch(getAssetPath(`./assets/${component}/t9n/messages_${lang}.json`))
+    .then((resp) => {
+    if (!resp.ok) {
+      throwMessageFetchError();
+    }
+    return resp.json();
+  })
+    .catch(() => throwMessageFetchError());
+  return componentLangToMessageBundleCache[key];
+}
+function throwMessageFetchError() {
+  throw new Error("could not fetch component message bundle");
+}
+/**
+ * This util helps preserve existing intlProp usage when they have not been replaced by overrides.
+ *
+ * @param component
+ */
+export function overridesFromIntlProps(component) {
+  const { el } = component;
+  const overrides = {};
+  Object.keys(el.constructor.prototype)
+    .filter((prop) => prop.startsWith("intl"))
+    .forEach((prop) => {
+    const assignedValue = el[prop];
+    if (assignedValue) {
+      let mappedProp = prop.replace("intl", "");
+      mappedProp = `${mappedProp[0].toLowerCase()}${mappedProp.slice(1)}`;
+      overrides[mappedProp] = assignedValue;
+    }
+  });
+  return overrides;
+}
+function mergeMessages(component) {
+  component.messages = {
+    ...component.defaultMessages,
+    ...getEffectiveMessageOverrides(component)
+  };
+}
+function getEffectiveMessageOverrides(component) {
+  var _a;
+  return (_a = component.messageOverrides) !== null && _a !== void 0 ? _a : overridesFromIntlProps(component);
+}
+/**
+ * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.
+ *
+ * @param component
+ */
+export async function setUpMessages(component) {
+  component.defaultMessages = await fetchMessages(component, component.effectiveLocale);
+  mergeMessages(component);
+}
+async function fetchMessages(component, lang) {
+  const { el } = component;
+  const tag = el.tagName.toLowerCase();
+  const componentName = tag.replace("calcite-", "");
+  return getMessageBundle(getSupportedLocale(lang), componentName);
+}
+/**
+ * This utility must be set up for the component to update its default message bundle if the locale changes.
+ *
+ * It can be set up in **either** of the following ways:
+ *
+ * 1. called from `LocalizedComponent`'s `onLocaleChange` method or
+ * 2. called from a watcher configured to watch `LocalizedComponent`'s `effectiveLocale` prop
+ *
+ * @param component
+ * @param lang
+ */
+export async function updateMessages(component, lang) {
+  component.defaultMessages = await fetchMessages(component, lang);
+}
+/**
+ * This utility sets up internals for messages support.
+ *
+ * It needs to be called in `connectedCallback`
+ *
+ * **Note**: this must be called after `LocalizedComponent`'s `connectLocalized` method.
+ *
+ * @param component
+ */
+export function connectMessages(component) {
+  component.onMessagesChange = defaultOnMessagesChange;
+}
+/**
+ * This utility tears down internals for messages support.
+ *
+ * It needs to be called in `disconnectedCallback`
+ *
+ * @param component
+ */
+export function disconnectMessages(component) {
+  component.onMessagesChange = undefined;
+}
+function defaultOnMessagesChange() {
+  mergeMessages(this);
+}

package/dist/collection/utils/theme.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
 import { autoTheme, darkTheme } from "./resources";
 /**