@esri/calcite-components 2.2.1-next.1 → 2.3.0-next.0

package/dist/cjs/label-3ae92f3c.js

@@ -0,0 +1,183 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.3.0-next.0
+ */
+'use strict';
+
+const dom = require('./dom-9295bc30.js');
+const component = require('./component-2175b124.js');
+
+/**
+ * Exported for testing purposes only
+ *
+ * @internal
+ */
+const labelClickEvent = "calciteInternalLabelClick";
+const labelConnectedEvent = "calciteInternalLabelConnected";
+const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
+const labelTagName = "calcite-label";
+const labelToLabelables = new WeakMap();
+const onLabelClickMap = new WeakMap();
+const onLabelConnectedMap = new WeakMap();
+const onLabelDisconnectedMap = new WeakMap();
+const unlabeledComponents = new Set();
+const findLabelForComponent = (componentEl) => {
+    const { id } = componentEl;
+    const forLabel = id && dom.queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
+    if (forLabel) {
+        return forLabel;
+    }
+    const parentLabel = dom.closestElementCrossShadowBoundary(componentEl, labelTagName);
+    if (!parentLabel ||
+        // labelable components within other custom elements are not considered labelable
+        hasAncestorCustomElements(parentLabel, componentEl)) {
+        return null;
+    }
+    return parentLabel;
+};
+function hasAncestorCustomElements(label, componentEl) {
+    let traversedElements;
+    const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+    const listener = (event) => {
+        event.stopImmediatePropagation();
+        const composedPath = event.composedPath();
+        traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+    };
+    label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+    componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+    label.removeEventListener(customElementAncestorCheckEventType, listener);
+    const ancestorCustomElements = traversedElements
+        .filter((el) => el !== componentEl && el !== label)
+        .filter((el) => el.tagName?.includes("-"));
+    return ancestorCustomElements.length > 0;
+}
+/**
+ * Helper to set up label interactions on connectedCallback.
+ *
+ * @param component
+ */
+function connectLabel(component) {
+    if (!component) {
+        return;
+    }
+    const labelEl = findLabelForComponent(component.el);
+    if ((onLabelClickMap.has(labelEl) && labelEl === component.labelEl) ||
+        (!labelEl && unlabeledComponents.has(component))) {
+        return;
+    }
+    const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+    if (labelEl) {
+        component.labelEl = labelEl;
+        const labelables = labelToLabelables.get(labelEl) || [];
+        labelables.push(component);
+        labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));
+        if (!onLabelClickMap.has(component.labelEl)) {
+            onLabelClickMap.set(component.labelEl, onLabelClick);
+            component.labelEl.addEventListener(labelClickEvent, onLabelClick);
+        }
+        unlabeledComponents.delete(component);
+        document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+        onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);
+        document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+    }
+    else if (!unlabeledComponents.has(component)) {
+        boundOnLabelDisconnected();
+        document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+    }
+}
+/**
+ * Helper to tear down label interactions on disconnectedCallback on labelable components.
+ *
+ * @param component
+ */
+function disconnectLabel(component) {
+    if (!component) {
+        return;
+    }
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));
+    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));
+    onLabelConnectedMap.delete(component);
+    onLabelDisconnectedMap.delete(component);
+    if (!component.labelEl) {
+        return;
+    }
+    const labelables = labelToLabelables.get(component.labelEl);
+    if (labelables.length === 1) {
+        component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));
+        onLabelClickMap.delete(component.labelEl);
+    }
+    labelToLabelables.set(component.labelEl, labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder));
+    component.labelEl = null;
+}
+function sortByDOMOrder(a, b) {
+    return dom.isBefore(a.el, b.el) ? -1 : 1;
+}
+/**
+ * Helper to get the label text from a component.
+ *
+ * @param component
+ */
+function getLabelText(component) {
+    return component.label || component.labelEl?.textContent?.trim() || "";
+}
+function onLabelClick(event) {
+    const labelClickTarget = event.detail.sourceEvent.target;
+    const labelables = labelToLabelables.get(this);
+    const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);
+    const labelableChildClicked = labelables.includes(clickedLabelable);
+    if (labelableChildClicked) {
+        // no need to forward click as labelable will receive focus
+        return;
+    }
+    const firstLabelable = labelables[0];
+    if (firstLabelable.disabled) {
+        return;
+    }
+    firstLabelable.onLabelClick(event);
+}
+function onLabelConnected() {
+    if (unlabeledComponents.has(this)) {
+        connectLabel(this);
+    }
+}
+function onLabelDisconnected() {
+    unlabeledComponents.add(this);
+    const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);
+    onLabelConnectedMap.set(this, boundOnLabelConnected);
+    document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
+}
+/**
+ * Helper to associate an explicit label (i.e., using `for`) with a labelable component that does not have an associated label.
+ *
+ * @param label - the label element
+ */
+async function associateExplicitLabelToUnlabeledComponent(label) {
+    await component.componentOnReady(label);
+    const alreadyLabeled = labelToLabelables.has(label);
+    if (alreadyLabeled) {
+        return;
+    }
+    const forComponentEl = label.ownerDocument?.getElementById(label.for);
+    if (!forComponentEl) {
+        return;
+    }
+    requestAnimationFrame(() => {
+        for (const labelable of unlabeledComponents) {
+            if (labelable.el === forComponentEl) {
+                connectLabel(labelable);
+                break;
+            }
+        }
+    });
+}
+
+exports.associateExplicitLabelToUnlabeledComponent = associateExplicitLabelToUnlabeledComponent;
+exports.connectLabel = connectLabel;
+exports.disconnectLabel = disconnectLabel;
+exports.getLabelText = getLabelText;
+exports.labelConnectedEvent = labelConnectedEvent;
+exports.labelDisconnectedEvent = labelDisconnectedEvent;
+
+//# sourceMappingURL=label-3ae92f3c.js.map

package/dist/cjs/label-3ae92f3c.js.map

@@ -0,0 +1 @@
+{"file":"label-3ae92f3c.js","mappings":"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","names":["queryElementRoots","closestElementCrossShadowBoundary","isBefore","componentOnReady"],"sources":["src/utils/label.ts"],"sourcesContent":["import { closestElementCrossShadowBoundary, isBefore, queryElementRoots } from \"./dom\";\nimport { componentOnReady } from \"./component\";\n\nexport interface LabelableComponent {\n  /**\n   * When true, disabled prevents interaction.\n   */\n  disabled: boolean;\n\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * Text label.\n   */\n  label?: string;\n\n  /**\n   * The label this component is associated with.\n   */\n  labelEl: HTMLCalciteLabelElement;\n\n  /**\n   * Hook for components to provide custom label click behavior.\n   */\n  onLabelClick: (event: CustomEvent<any>) => void;\n}\n\n/**\n * Exported for testing purposes only\n *\n * @internal\n */\nexport const labelClickEvent = \"calciteInternalLabelClick\";\nexport const labelConnectedEvent = \"calciteInternalLabelConnected\";\nexport const labelDisconnectedEvent = \"calciteInternalLabelDisconnected\";\n\nconst labelTagName = \"calcite-label\";\nconst labelToLabelables = new WeakMap<HTMLCalciteLabelElement, LabelableComponent[]>();\nconst onLabelClickMap = new WeakMap<HTMLCalciteLabelElement, typeof onLabelClick>();\nconst onLabelConnectedMap = new WeakMap<LabelableComponent, typeof onLabelConnected>();\nconst onLabelDisconnectedMap = new WeakMap<LabelableComponent, typeof onLabelDisconnected>();\nconst unlabeledComponents = new Set<LabelableComponent>();\n\nconst findLabelForComponent = (componentEl: HTMLElement): HTMLCalciteLabelElement | null => {\n  const { id } = componentEl;\n\n  const forLabel =\n    id && (queryElementRoots(componentEl, { selector: `${labelTagName}[for=\"${id}\"]` }) as HTMLCalciteLabelElement);\n\n  if (forLabel) {\n    return forLabel;\n  }\n\n  const parentLabel = closestElementCrossShadowBoundary<HTMLCalciteLabelElement>(componentEl, labelTagName);\n\n  if (\n    !parentLabel ||\n    // labelable components within other custom elements are not considered labelable\n    hasAncestorCustomElements(parentLabel, componentEl)\n  ) {\n    return null;\n  }\n\n  return parentLabel;\n};\n\nfunction hasAncestorCustomElements(label: HTMLCalciteLabelElement, componentEl: HTMLElement): boolean {\n  let traversedElements: HTMLElement[];\n  const customElementAncestorCheckEventType = \"custom-element-ancestor-check\";\n\n  const listener = (event: CustomEvent) => {\n    event.stopImmediatePropagation();\n    const composedPath = event.composedPath() as HTMLElement[];\n    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));\n  };\n\n  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });\n\n  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));\n  label.removeEventListener(customElementAncestorCheckEventType, listener);\n\n  const ancestorCustomElements = traversedElements\n    .filter((el) => el !== componentEl && el !== label)\n    .filter((el) => el.tagName?.includes(\"-\"));\n\n  return ancestorCustomElements.length > 0;\n}\n\n/**\n * Helper to set up label interactions on connectedCallback.\n *\n * @param component\n */\nexport function connectLabel(component: LabelableComponent): void {\n  if (!component) {\n    return;\n  }\n\n  const labelEl = findLabelForComponent(component.el);\n\n  if (\n    (onLabelClickMap.has(labelEl) && labelEl === component.labelEl) ||\n    (!labelEl && unlabeledComponents.has(component))\n  ) {\n    return;\n  }\n\n  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);\n\n  if (labelEl) {\n    component.labelEl = labelEl;\n\n    const labelables = labelToLabelables.get(labelEl) || [];\n    labelables.push(component);\n    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));\n\n    if (!onLabelClickMap.has(component.labelEl)) {\n      onLabelClickMap.set(component.labelEl, onLabelClick);\n      component.labelEl.addEventListener(labelClickEvent, onLabelClick);\n    }\n\n    unlabeledComponents.delete(component);\n    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));\n    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);\n    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);\n  } else if (!unlabeledComponents.has(component)) {\n    boundOnLabelDisconnected();\n    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));\n  }\n}\n/**\n * Helper to tear down label interactions on disconnectedCallback on labelable components.\n *\n * @param component\n */\nexport function disconnectLabel(component: LabelableComponent): void {\n  if (!component) {\n    return;\n  }\n\n  unlabeledComponents.delete(component);\n  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));\n  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));\n  onLabelConnectedMap.delete(component);\n  onLabelDisconnectedMap.delete(component);\n\n  if (!component.labelEl) {\n    return;\n  }\n\n  const labelables = labelToLabelables.get(component.labelEl);\n\n  if (labelables.length === 1) {\n    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));\n    onLabelClickMap.delete(component.labelEl);\n  }\n\n  labelToLabelables.set(\n    component.labelEl,\n    labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder),\n  );\n\n  component.labelEl = null;\n}\n\nfunction sortByDOMOrder(a: LabelableComponent, b: LabelableComponent): number {\n  return isBefore(a.el, b.el) ? -1 : 1;\n}\n\n/**\n * Helper to get the label text from a component.\n *\n * @param component\n */\nexport function getLabelText(component: LabelableComponent): string {\n  return component.label || component.labelEl?.textContent?.trim() || \"\";\n}\n\nfunction onLabelClick(this: HTMLCalciteLabelElement, event: CustomEvent<{ sourceEvent: MouseEvent }>): void {\n  const labelClickTarget = event.detail.sourceEvent.target as HTMLElement;\n  const labelables = labelToLabelables.get(this);\n  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);\n  const labelableChildClicked = labelables.includes(clickedLabelable);\n\n  if (labelableChildClicked) {\n    // no need to forward click as labelable will receive focus\n    return;\n  }\n\n  const firstLabelable = labelables[0];\n\n  if (firstLabelable.disabled) {\n    return;\n  }\n\n  firstLabelable.onLabelClick(event);\n}\n\nfunction onLabelConnected(this: LabelableComponent): void {\n  if (unlabeledComponents.has(this)) {\n    connectLabel(this);\n  }\n}\n\nfunction onLabelDisconnected(this: LabelableComponent): void {\n  unlabeledComponents.add(this);\n  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);\n  onLabelConnectedMap.set(this, boundOnLabelConnected);\n  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);\n}\n\n/**\n * Helper to associate an explicit label (i.e., using `for`) with a labelable component that does not have an associated label.\n *\n * @param label - the label element\n */\nexport async function associateExplicitLabelToUnlabeledComponent(label: HTMLCalciteLabelElement): Promise<void> {\n  await componentOnReady(label);\n\n  const alreadyLabeled = labelToLabelables.has(label);\n\n  if (alreadyLabeled) {\n    return;\n  }\n\n  const forComponentEl = label.ownerDocument?.getElementById(label.for);\n\n  if (!forComponentEl) {\n    return;\n  }\n\n  requestAnimationFrame(() => {\n    for (const labelable of unlabeledComponents) {\n      if (labelable.el === forComponentEl) {\n        connectLabel(labelable);\n        break;\n      }\n    }\n  });\n}\n"],"version":3}

package/dist/cjs/loadable-0a65536b.js

@@ -0,0 +1,91 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.3.0-next.0
+ */
+'use strict';
+
+const index = require('./index-cff042ba.js');
+
+const resolveMap = new WeakMap();
+const promiseMap = new WeakMap();
+/**
+ * This helper util sets up the component for the ability to know when the component has been loaded.
+ *
+ * This should be used in the `componentWillLoad` lifecycle hook.
+ *
+ * ```
+ * componentWillLoad(): void {
+ *   setUpLoadableComponent(this);
+ * }
+ * ```
+ *
+ * @param component
+ */
+function setUpLoadableComponent(component) {
+    promiseMap.set(component, new Promise((resolve) => resolveMap.set(component, resolve)));
+}
+/**
+ * This helper util lets the loadable component know that it is now loaded.
+ *
+ * This should be used in the `componentDidLoad` lifecycle hook.
+ *
+ * ```
+ * componentDidLoad(): void {
+ *   setComponentLoaded(this);
+ * }
+ * ```
+ *
+ * @param component
+ */
+function setComponentLoaded(component) {
+    resolveMap.get(component)();
+}
+/**
+ * This helper util can be used to ensure a component has been loaded (The "componentDidLoad" Stencil lifecycle method has been called).
+ *
+ * Requires requires `LoadableComponent` to be implemented.
+ *
+ * A component developer can await this method before proceeding with any logic that requires a component to be loaded first.
+ *
+ * ```
+ * async myMethod(): Promise<void> {
+ *   await componentLoaded(this);
+ * }
+ * ```
+ *
+ * @param component
+ * @returns Promise<void>
+ */
+function componentLoaded(component) {
+    return promiseMap.get(component);
+}
+/**
+ * This helper util can be used to ensuring the component is loaded and rendered by the browser (The "componentDidLoad" Stencil lifecycle method has been called and any internal elements are focusable).
+ *
+ * Requires requires `LoadableComponent` to be implemented.
+ *
+ * A component developer can await this method before proceeding with any logic that requires a component to be loaded first and then an internal element be focused.
+ *
+ * ```
+ * async setFocus(): Promise<void> {
+ *   await componentFocusable(this);
+ *   this.internalElement?.focus();
+ * }
+ * ```
+ *
+ * @param component
+ * @returns Promise<void>
+ */
+async function componentFocusable(component) {
+    await componentLoaded(component);
+    index.forceUpdate(component);
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+exports.componentFocusable = componentFocusable;
+exports.componentLoaded = componentLoaded;
+exports.setComponentLoaded = setComponentLoaded;
+exports.setUpLoadableComponent = setUpLoadableComponent;
+
+//# sourceMappingURL=loadable-0a65536b.js.map

package/dist/cjs/loadable-0a65536b.js.map

@@ -0,0 +1 @@
+{"file":"loadable-0a65536b.js","mappings":";;;;;;;;;AA0DA,MAAM,UAAU,GAAG,IAAI,OAAO,EAAgE,CAAC;AAE/F,MAAM,UAAU,GAAG,IAAI,OAAO,EAAoC,CAAC;AAEnE;;;;;;;;;;;;;SAagB,sBAAsB,CAAC,SAA4B;IACjE,UAAU,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,OAAO,CAAC,CAAC,OAAO,KAAK,UAAU,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1F,CAAC;AAED;;;;;;;;;;;;;SAagB,kBAAkB,CAAC,SAA4B;IAC7D,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;;;SAgBgB,eAAe,CAAC,SAA4B;IAC1D,OAAO,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AACnC,CAAC;AAED;;;;;;;;;;;;;;;;;AAiBO,eAAe,kBAAkB,CAAC,SAA4B;IACnE,MAAM,eAAe,CAAC,SAAS,CAAC,CAAC;IAMjCA,iBAAW,CAAC,SAAS,CAAC,CAAC;IACvB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAK,qBAAqB,CAAC,MAAM,OAAO,EAAE,CAAC,CAAC,CAAC;AAC1E;;;;;;;","names":["forceUpdate"],"sources":["src/utils/loadable.ts"],"sourcesContent":["import { Build, forceUpdate } from \"@stencil/core\";\n\n/**\n * This helper adds support for knowing when a component has been loaded.\n *\n * Related issue: https://github.com/Esri/calcite-design-system/issues/5369\n * Could be related to Stencil.js issue: https://github.com/ionic-team/stencil/issues/3580\n *\n * Implementing\n *\n * ```\n * export class MyComponent implements LoadableComponent { }\n * ```\n *\n * ```\n *  //--------------------------------------------------------------------------\n *  //\n *  //  Lifecycle\n *  //\n *  //--------------------------------------------------------------------------\n *\n *  componentWillLoad(): void {\n *    setUpLoadableComponent(this);\n *  }\n *\n *  componentDidLoad(): void {\n *    setComponentLoaded(this);\n *  }\n *\n *  // --------------------------------------------------------------------------\n *  //\n *  //  Methods\n *  //\n *  // --------------------------------------------------------------------------\n *\n *  async myMethod(): Promise<void> {\n *    await componentLoaded(this);\n *  }\n * ```\n */\nexport interface LoadableComponent {\n  /**\n   * Stencil lifecycle method.\n   * https://stenciljs.com/docs/component-lifecycle#componentwillload\n   *\n   * Called once just after the component is first connected to the DOM. Since this method is only called once, it's a good place to load data asynchronously and to setup the state without triggering extra re-renders.\n   */\n  componentWillLoad: () => Promise<void> | void;\n\n  /**\n   * Stencil lifecycle method.\n   * https://stenciljs.com/docs/component-lifecycle#componentdidload\n   *\n   * Called once just after the component is fully loaded and the first render() occurs.\n   */\n  componentDidLoad: () => Promise<void> | void;\n}\n\nconst resolveMap = new WeakMap<LoadableComponent, (value: void | PromiseLike<void>) => void>();\n\nconst promiseMap = new WeakMap<LoadableComponent, Promise<void>>();\n\n/**\n * This helper util sets up the component for the ability to know when the component has been loaded.\n *\n * This should be used in the `componentWillLoad` lifecycle hook.\n *\n * ```\n * componentWillLoad(): void {\n *   setUpLoadableComponent(this);\n * }\n * ```\n *\n * @param component\n */\nexport function setUpLoadableComponent(component: LoadableComponent): void {\n  promiseMap.set(component, new Promise((resolve) => resolveMap.set(component, resolve)));\n}\n\n/**\n * This helper util lets the loadable component know that it is now loaded.\n *\n * This should be used in the `componentDidLoad` lifecycle hook.\n *\n * ```\n * componentDidLoad(): void {\n *   setComponentLoaded(this);\n * }\n * ```\n *\n * @param component\n */\nexport function setComponentLoaded(component: LoadableComponent): void {\n  resolveMap.get(component)();\n}\n\n/**\n * This helper util can be used to ensure a component has been loaded (The \"componentDidLoad\" Stencil lifecycle method has been called).\n *\n * Requires requires `LoadableComponent` to be implemented.\n *\n * A component developer can await this method before proceeding with any logic that requires a component to be loaded first.\n *\n * ```\n * async myMethod(): Promise<void> {\n *   await componentLoaded(this);\n * }\n * ```\n *\n * @param component\n * @returns Promise<void>\n */\nexport function componentLoaded(component: LoadableComponent): Promise<void> {\n  return promiseMap.get(component);\n}\n\n/**\n * This helper util can be used to ensuring the component is loaded and rendered by the browser (The \"componentDidLoad\" Stencil lifecycle method has been called and any internal elements are focusable).\n *\n * Requires requires `LoadableComponent` to be implemented.\n *\n * A component developer can await this method before proceeding with any logic that requires a component to be loaded first and then an internal element be focused.\n *\n * ```\n * async setFocus(): Promise<void> {\n *   await componentFocusable(this);\n *   this.internalElement?.focus();\n * }\n * ```\n *\n * @param component\n * @returns Promise<void>\n */\nexport async function componentFocusable(component: LoadableComponent): Promise<void> {\n  await componentLoaded(component);\n\n  if (!Build.isBrowser) {\n    return;\n  }\n\n  forceUpdate(component);\n  return new Promise((resolve) => requestAnimationFrame(() => resolve()));\n}\n"],"version":3}