@arcgis/lumina 4.31.0-next.100

package/dist/index.js

@@ -0,0 +1,805 @@
+import {
+  defaultEventBubbles,
+  defaultEventCancelable,
+  defaultEventComposed,
+  lazyMetaGroupJoiner,
+  lazyMetaItemJoiner,
+  lazyMetaSubItemJoiner
+} from "./chunk-CH52Q2MB.js";
+
+// src/createEvent.ts
+import { retrieveComponent, trackPropertyKey } from "@arcgis/components-controllers";
+var createEventFactory = (eventName = "", options = {}, component = retrieveComponent()) => {
+  const emitter = {
+    emit: (payload) => {
+      if (process.env.NODE_ENV !== "production") {
+        if (eventName === "") {
+          throw new Error("Unable to resolve event name from property name");
+        }
+        if (!component.el.isConnected) {
+          console.warn(
+            `Trying to emit an ${eventName} event on a disconnected element ${component.el.tagName.toLowerCase()}`
+          );
+        }
+      }
+      const event = new CustomEvent(eventName, {
+        detail: payload,
+        cancelable: defaultEventCancelable,
+        bubbles: defaultEventBubbles,
+        composed: defaultEventComposed,
+        ...options
+      });
+      component.el.dispatchEvent(event);
+      return event;
+    }
+  };
+  if (eventName === "") {
+    trackPropertyKey(
+      component,
+      (key) => {
+        if (process.env.NODE_ENV !== "production" && key === void 0) {
+          throw new Error(`createEvent must be called in property default value only`);
+        }
+        eventName = key;
+      },
+      emitter
+    );
+  }
+  return emitter;
+};
+var createEvent = createEventFactory.bind(null, "");
+
+// src/decorators.ts
+import { state } from "@lit/reactive-element/decorators/state.js";
+import { property as litProperty } from "@lit/reactive-element/decorators/property.js";
+var property = litProperty;
+var method = void 0;
+
+// src/lazyLoad.ts
+import { Deferred, camelToKebab } from "@arcgis/components-utils";
+
+// src/devOnlyDetectIncorrectLazyUsages.ts
+function devOnlyDetectIncorrectLazyUsages(LitClass) {
+  const genericPrototype = LitClass.prototype;
+  const allowList = /* @__PURE__ */ new Set([
+    // We shouldn't be overwriting this property
+    "constructor",
+    // Called by Lit - we proxy it to this.el in ProxyComponent
+    "setAttribute"
+  ]);
+  const customErrorMessages = {
+    addEventListener: "use this.listen() or this.el.addEventListener()"
+  };
+  Object.entries({
+    ...Object.getOwnPropertyDescriptors(HTMLElement.prototype),
+    ...Object.getOwnPropertyDescriptors(Element.prototype),
+    ...Object.getOwnPropertyDescriptors(Node.prototype),
+    ...Object.getOwnPropertyDescriptors(EventTarget.prototype)
+  }).filter(([key, { value }]) => typeof value === "function" && !allowList.has(key)).forEach(([key]) => {
+    genericPrototype[key] = (...args) => {
+      if (key === "hasAttribute" && args[0] === "defer-hydration") {
+        return false;
+      }
+      throw new Error(
+        `You should not be calling this.${key}() directly as it won't work correctly in lazy-builds. Instead, ${customErrorMessages[key] ?? `use this.el.${key}()`}`
+      );
+    };
+  });
+}
+
+// src/lifecycleSupport.ts
+function attachToAncestor(child, el) {
+  let ancestor = el;
+  while (ancestor = ancestor.parentNode ?? ancestor.host) {
+    if (ancestor?.constructor?.lumina) {
+      const litParent = ancestor;
+      if (!litParent.manager?.loadedCalled) {
+        litParent._offspring.push(child);
+      }
+      return litParent._postLoad?.promise;
+    }
+  }
+  return false;
+}
+
+// src/utils.ts
+var noShadowRoot = {};
+
+// src/lazyLoad.ts
+var makeDefineCustomElements = (runtime, structure) => function defineCustomElements(windowOrOptions, options) {
+  if (!globalThis.customElements) {
+    return;
+  }
+  const resolvedOptions = options ?? windowOrOptions ?? {};
+  const resourcesUrl = resolvedOptions.resourcesUrl;
+  if (resourcesUrl) {
+    runtime.setAssetPath(resourcesUrl);
+  }
+  Object.entries(structure).forEach(createLazyElement);
+};
+function createLazyElement([tagName, [load, compactMeta = ""]]) {
+  if (customElements.get(tagName)) {
+    return;
+  }
+  const [compactObservedProps, compactAsyncMethods, compactSyncMethods] = compactMeta.split(lazyMetaGroupJoiner);
+  const observedProps = compactObservedProps ? compactObservedProps?.split(lazyMetaItemJoiner).map(parseCondensedProp) : void 0;
+  const observedProperties = observedProps?.map(([property2]) => property2);
+  const ProxyClass = class extends ProxyComponent {
+    static {
+      this.observedAttributes = observedProps?.map(([, attribute]) => attribute).filter((attribute) => attribute !== "");
+    }
+    static {
+      this._properties = observedProperties;
+    }
+    static {
+      this._asyncMethods = compactAsyncMethods ? compactAsyncMethods?.split(lazyMetaItemJoiner) : void 0;
+    }
+    static {
+      this._syncMethods = compactSyncMethods?.split(lazyMetaItemJoiner);
+    }
+    static {
+      this._name = tagName;
+    }
+    constructor() {
+      const isFirstInstanceOfType = !ProxyClass._loadPromise;
+      if (isFirstInstanceOfType) {
+        ProxyClass._loadPromise = load();
+        ProxyClass._initializePrototype();
+      }
+      super();
+    }
+  };
+  customElements.define(tagName, ProxyClass);
+}
+function parseCondensedProp(propAndAttribute) {
+  const name = propAndAttribute.split(lazyMetaSubItemJoiner);
+  return name.length === 1 ? [name[0], camelToKebab(name[0])] : name;
+}
+var HtmlElement = globalThis.HTMLElement ?? parseCondensedProp;
+var ProxyComponent = class extends HtmlElement {
+  constructor() {
+    super();
+    /**
+     * On HMR, preserve the values of all properties that at least once were set
+     * by someone other than component itself.
+     *
+     * @internal
+     */
+    this._hmrSetProps = /* @__PURE__ */ new Set();
+    /** @internal */
+    this._hmrSetAttributes = /* @__PURE__ */ new Set();
+    /** @internal */
+    this._store = {};
+    /**
+     * If attributeChangedCallback() is called before the LitElement is loaded,
+     * store the attributes here, and replay later
+     */
+    this._pendingAttributes = [];
+    /**
+     * Resolved once LitElement's load() is complete.
+     * Not read inside of this class, but needed for LitElement to determine if
+     * it's closest ancestor finished load()
+     */
+    this._postLoad = new Deferred();
+    /**
+     * Resolved once LitElement's loaded() is complete
+     */
+    this._postLoaded = new Deferred();
+    /**
+     * Direct offspring that should be awaited before loaded() is emitted
+     */
+    this._offspring = [];
+    this._saveInstanceProperties();
+    const ProxyClass = this.constructor;
+    if (ProxyClass._LitConstructor) {
+      this._initializeComponent({ a: ProxyClass._LitConstructor });
+    } else {
+      void ProxyClass._loadPromise.then(this._initializeComponent.bind(this)).catch(this._postLoaded.reject);
+    }
+    if (process.env.NODE_ENV !== "production") {
+      ProxyClass._hmrInstances ??= [];
+      ProxyClass._hmrInstances.push(new WeakRef(this));
+    }
+  }
+  static {
+    this.lumina = true;
+  }
+  /** @internal */
+  static _initializePrototype() {
+    this._properties?.forEach(this._bindProp, this);
+    this._asyncMethods?.forEach(this._bindAsync, this);
+    this._syncMethods?.forEach(this._bindSync, this);
+  }
+  static _bindProp(propName) {
+    Object.defineProperty(this.prototype, propName, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return this._store[propName];
+      },
+      set(value) {
+        this._store[propName] = value;
+        if (process.env.NODE_ENV !== "production") {
+          this._hmrSetProps.add(propName);
+        }
+      }
+    });
+  }
+  static _bindAsync(methodName) {
+    Object.defineProperty(this.prototype, methodName, {
+      async value(...args) {
+        if (!this._litElement) {
+          await this._postLoaded.promise;
+        }
+        const genericLitElement = this._litElement;
+        return await genericLitElement[methodName](...args);
+      },
+      configurable: true,
+      writable: true,
+      enumerable: true
+    });
+  }
+  static _bindSync(methodName) {
+    Object.defineProperty(this.prototype, methodName, {
+      value(...args) {
+        if (process.env.NODE_ENV === "development" && !this._litElement) {
+          const ProxyClass = this.constructor;
+          throw new Error(
+            `Tried to call method ${methodName}() on <${ProxyClass._name}> component before it's fully loaded. Please do 'await component.componentOnReady();' before calling this method.`
+          );
+        }
+        const genericLitElement = this._litElement;
+        return genericLitElement[methodName](...args);
+      },
+      configurable: true,
+      enumerable: true
+    });
+  }
+  get manager() {
+    return this._litElement?.manager;
+  }
+  /**
+   * Until the custom element is registered on the page, an instance of that
+   * element can be constructed and some properties on that instance set.
+   *
+   * These properties are set before the element prototype is set to this proxy
+   * class and thus none of our getters/setters are yet registered - such
+   * properties will be set by JavaScript on the instance directly.
+   *
+   * Once element is registered, the properties set in the meanwhile will shadow
+   * the getter/setters, and thus break reactivity. The fix is to delete these
+   * properties from the instance, and re-apply them once accessors are set.
+   *
+   * @example
+   * ```ts
+   * import { defineCustomElements } from '@arcgis/map-components';
+   * const map = document.createElement('arcgis-map');
+   * // This will shadow the getter/setters
+   * map.itemId = '...';
+   * // This finally defines the custom elements and sets the property accessors
+   * defineCustomElements();
+   * ```
+   *
+   * @remarks
+   * This is an equivalent of the __saveInstanceProperties method in Lit's
+   * ReactiveElement. Lit takes care of this on LitElement, but we have to take
+   * care of this on the lazy proxy
+   */
+  _saveInstanceProperties() {
+    const ProxyClass = this.constructor;
+    const genericThis = this;
+    ProxyClass._properties?.forEach((propName) => {
+      if (Object.hasOwn(this, propName)) {
+        this._store[propName] = genericThis[propName];
+        delete genericThis[propName];
+      }
+    });
+  }
+  /*
+   * This method must be statically present rather than added later, or else,
+   * browsers won't call it. Same for connected and disconnected callbacks.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._litElement?.attributeChangedCallback(name, oldValue, newValue);
+    if (!this._litElement) {
+      this._pendingAttributes.push(name);
+    }
+    if (process.env.NODE_ENV !== "production") {
+      this._hmrSetAttributes.add(name);
+    }
+  }
+  connectedCallback() {
+    if (this._litElement) {
+      this._litElement?.connectedCallback();
+    } else {
+      queueMicrotask(() => {
+        this._ancestorLoad = attachToAncestor(this, this);
+      });
+    }
+  }
+  disconnectedCallback() {
+    this._litElement?.disconnectedCallback();
+  }
+  /**
+   * Create a promise that resolves once component is fully loaded
+   */
+  async componentOnReady() {
+    await this._postLoaded.promise;
+    return this._litElement;
+  }
+  /** @internal */
+  _initializeComponent(module) {
+    const ProxyClass = this.constructor;
+    const tagName = ProxyClass._name;
+    if (process.env.NODE_ENV !== "production") {
+      Object.entries(module).forEach(([name, LitConstructor2]) => {
+        if (name !== "exportsForTests" && typeof LitConstructor2 !== "function" || typeof LitConstructor2.tagName !== "string") {
+          console.warn(
+            `Found non-component export "${name}" in the file for the "${tagName}" component. This will interfere with hot module replacement. Please move "${name}" into a separate file.`
+          );
+        }
+      });
+    }
+    const LitConstructor = Object.values(module).find(
+      (LitConstructor2) => LitConstructor2.tagName === tagName
+    );
+    if (process.env.NODE_ENV !== "production" && !LitConstructor) {
+      throw new Error(
+        `Unable to find the LitElement class for the "${tagName}" custom element in the lazy-loaded module`
+      );
+    }
+    const lazyTagName = process.env.NODE_ENV === "production" ? `${tagName}--lazy` : (ProxyClass._hmrIndex ?? 0) === 0 ? `${tagName}--lazy` : `${tagName}--lazy-${ProxyClass._hmrIndex}`;
+    const isFirstInitialization = !ProxyClass._LitConstructor;
+    if (isFirstInitialization) {
+      ProxyClass._LitConstructor = LitConstructor;
+      LitConstructor.prototype.removeAttribute = removeAttribute;
+      LitConstructor.prototype.setAttribute = setAttribute;
+      if (process.env.NODE_ENV !== "production" && LitConstructor.shadowRootOptions !== noShadowRoot) {
+        devOnlyDetectIncorrectLazyUsages(Object.getPrototypeOf(LitConstructor));
+      }
+      customElements.define(lazyTagName, LitConstructor);
+    }
+    LitConstructor.lazy = this;
+    const litElement = document.createElement(lazyTagName);
+    LitConstructor.lazy = void 0;
+    this._litElement = litElement;
+    this._pendingAttributes.forEach((name) => {
+      const value = this.getAttribute(name);
+      litElement.attributeChangedCallback(
+        name,
+        // Lit doesn't look at this value, thus even if attribute already exists, that's ok
+        null,
+        value
+      );
+    });
+    Object.entries(this._store).forEach(syncLitElement, litElement);
+    this._store = litElement;
+    if (process.env.NODE_ENV !== "production") {
+      const litObserved = LitConstructor.observedAttributes ?? [];
+      const lazyObserved = ProxyClass.observedAttributes ?? [];
+      const missingFromLazy = litObserved.filter((attribute) => !lazyObserved.includes(attribute));
+      const missingFromLit = lazyObserved.filter((attribute) => !litObserved.includes(attribute));
+      if (missingFromLazy.length > 0) {
+        console.warn(
+          `The following attributes on <${ProxyClass._name}> are present on the Lit element, but are missing from the lazy proxy component: ${missingFromLazy.join(", ")}. This either indicates a bug in Lumina, or you are creating the attribute dynamically in a way that compiler can not infer statically. For these attributes, lazy-loading version of your component won't work correctly, thus this must be resolved`
+        );
+      }
+      if (missingFromLit.length > 0) {
+        console.warn(
+          `The following attributes on <${ProxyClass._name}> are defined on the lazy proxy component, but not on the actual Lit element: ${missingFromLit.join(", ")}. This either indicates a bug in Lumina, or you are creating the attribute dynamically in a way that compiler can not infer statically. This is a non-critical issue, but does indicate that something is going wrong and should be fixed`
+        );
+      }
+    }
+    if (this.isConnected) {
+      litElement.connectedCallback();
+    }
+  }
+};
+function removeAttribute(qualifiedName) {
+  HTMLElement.prototype.removeAttribute.call(this.el, qualifiedName);
+}
+function setAttribute(qualifiedName, value) {
+  HTMLElement.prototype.setAttribute.call(this.el, qualifiedName, value);
+}
+function syncLitElement([key, value]) {
+  this[key] = value;
+}
+
+// src/hmrSupport.ts
+import { camelToKebab as camelToKebab2 } from "@arcgis/components-utils";
+function handleHmrUpdate(newModules) {
+  newModules.forEach((newModule) => {
+    if (newModule === void 0) {
+      return;
+    }
+    Object.values(newModule).forEach((exported) => {
+      if (typeof exported !== "function" || typeof exported.tagName !== "string") {
+        return;
+      }
+      const LitConstructor = exported;
+      const ProxyClass = customElements.get(LitConstructor.tagName);
+      if (ProxyClass === void 0) {
+        throw new Error(`Failed to find custom element proxy for tag name: ${LitConstructor.tagName}`);
+      }
+      ProxyClass._LitConstructor = void 0;
+      ProxyClass._loadPromise = void 0;
+      ProxyClass._hmrIndex ??= 0;
+      ProxyClass._hmrIndex += 1;
+      ProxyClass._initializePrototype();
+      ProxyClass._hmrInstances?.forEach((instanceWeakRef) => {
+        const instance = instanceWeakRef.deref();
+        if (instance === void 0) {
+          return;
+        }
+        if (instance._litElement === void 0) {
+          void ProxyClass._loadPromise.then(() => reInitialize(instance, newModule));
+        } else {
+          reInitialize(instance, newModule);
+        }
+      });
+      return;
+    });
+  });
+}
+function reInitialize(instance, newModule) {
+  const PreviousLitConstructor = instance._litElement.constructor;
+  const properties = PreviousLitConstructor.elementProperties;
+  const preservedProperties = Array.from(properties.entries()).filter(
+    ([propertyName, descriptor]) => typeof propertyName === "string" && (instance._hmrSetProps.has(propertyName) || typeof descriptor.attribute === "string" && instance._hmrSetAttributes.has(descriptor.attribute))
+  ).map(([key]) => [key, instance[key]]);
+  instance._store = Object.fromEntries(preservedProperties);
+  const isConnected = instance.isConnected;
+  if (isConnected) {
+    instance._litElement.disconnectedCallback();
+  }
+  instance._initializeComponent(newModule);
+}
+function handleComponentMetaUpdate(meta) {
+  const ProxyClass = customElements.get(meta.tagName);
+  if (ProxyClass === void 0) {
+    return;
+  }
+  const attributes = meta.properties.map(([property2, attribute]) => attribute ?? camelToKebab2(property2)).filter(Boolean);
+  observedAttributes[meta.tagName] ??= {};
+  observedAttributes[meta.tagName].original ??= new Set(ProxyClass.observedAttributes);
+  const originallyObserved = observedAttributes[meta.tagName].original;
+  observedAttributes[meta.tagName].manuallyObserved ??= new Set(
+    /**
+     * Never manually observe attributes that were in the original
+     * observedAttributes as those would be observed by the browser
+     */
+    attributes.filter((attribute) => !originallyObserved.has(attribute))
+  );
+  ProxyClass._asyncMethods = meta.asyncMethods;
+  ProxyClass._syncMethods = meta.syncMethods;
+  ProxyClass._properties = meta.properties.map(([name]) => name);
+  ProxyClass.observedAttributes = attributes;
+}
+var observedAttributesSymbol = Symbol.for("@arcgis/lumina:observedAttributes");
+var globalThisWithObservedAttributes = globalThis;
+var alreadyHadObservers = observedAttributesSymbol in globalThisWithObservedAttributes;
+globalThisWithObservedAttributes[observedAttributesSymbol] ??= {};
+var observedAttributes = globalThisWithObservedAttributes[observedAttributesSymbol];
+if (!alreadyHadObservers) {
+  const makeObserver = (original) => function observeAttributes(qualifiedName, ...rest) {
+    const observed = observedAttributes[this.tagName.toLowerCase()]?.manuallyObserved;
+    if (observed?.has(qualifiedName)) {
+      const oldValue = this.getAttribute(qualifiedName);
+      const returns = original.call(this, qualifiedName, ...rest);
+      const newValue = this.getAttribute(qualifiedName);
+      this.attributeChangedCallback(qualifiedName, oldValue, newValue);
+      return returns;
+    } else {
+      return original.call(this, qualifiedName, ...rest);
+    }
+  };
+  ProxyComponent.prototype.setAttribute = makeObserver(ProxyComponent.prototype.setAttribute);
+  ProxyComponent.prototype.toggleAttribute = makeObserver(ProxyComponent.prototype.toggleAttribute);
+  ProxyComponent.prototype.removeAttribute = makeObserver(ProxyComponent.prototype.removeAttribute);
+}
+
+// src/LitElement.ts
+import { Deferred as Deferred2, camelToKebab as camelToKebab3 } from "@arcgis/components-utils";
+import { LitElement as OriginalLitElement, isServer } from "lit";
+import { useControllerManager } from "@arcgis/components-controllers";
+var emptyFunction = () => void 0;
+var LitElement = class _LitElement extends OriginalLitElement {
+  constructor() {
+    super();
+    /**
+     * In lazy build, the actual DOM element differs from the class instance:
+     * - "this.el" is a proxy custom element - it's physically present in the DOM
+     *   even before the Lit component is loaded.
+     * - "this" is the actual Lit component - in case of Lazy builds, it's
+     *   never directly attached to the DOM. Instead, all interactions with the
+     *   proxy are forwarded to the actual Lit component. And, when Lit wants to
+     *   render, it renders into the shadow root of the proxy.
+     *
+     * "this.el" should be used instead of "this" for all things involving the
+     * DOM (addEventListener, querySelector, children, setAttribute,
+     * MutationObserver, etc...)
+     *
+     * @example
+     * ```ts
+     * // Generally, you shouldn't have to write logic specific to lazy or non-lazy
+     * // build, but if you have to, you can detect if you are in a lazy build like so:
+     * const isLazy = this.el !== this;
+     * ```
+     */
+    this.el = this.constructor.lazy ?? this;
+    /**
+     * Controller Manager orchestrates all components used by this component,
+     * connecting their lifecycle hooks and providing context information.
+     */
+    this.manager = useControllerManager(this);
+    /** @internal */
+    this._postLoad = this.constructor.lazy?._postLoad ?? new Deferred2();
+    /**
+     * Direct offspring that should be awaited before loaded() is emitted.
+     *
+     * `attachToAncestor()` will add elements to this array
+     *
+     * @internal
+     */
+    this._offspring = this.constructor.lazy?._offspring ?? [];
+    /**
+     * Promise that resolves once parent's load() completed. False if there is no
+     * parent
+     *
+     * @internal
+     */
+    this._ancestorLoad = this.constructor.lazy?._ancestorLoad;
+    this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred2();
+    this._enableUpdating = this.enableUpdating;
+    this.enableUpdating = emptyFunction;
+    const ourShouldUpdate = _LitElement.prototype.shouldUpdate;
+    if (this.shouldUpdate !== ourShouldUpdate) {
+      this._originalShouldUpdate = this.shouldUpdate;
+      this.shouldUpdate = ourShouldUpdate;
+    }
+    if (process.env.NODE_ENV !== "production") {
+      globalThis.devOnly$luminaComponentRefCallback?.(this);
+    }
+    if (isServer) {
+      this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
+    }
+  }
+  static finalizeStyles(styles) {
+    if (process.env.NODE_ENV === "test" && Array.isArray(styles)) {
+      styles = styles.filter(Boolean);
+    }
+    const finalizedStyles = super.finalizeStyles(styles);
+    const options = this.constructor.shadowRootOptions;
+    const useLightDom = options === noShadowRoot;
+    return this.runtime?.commonStyles === void 0 || useLightDom ? finalizedStyles : [this.runtime.commonStyles, ...finalizedStyles];
+  }
+  static createProperty(name, options) {
+    const flags = typeof options === "number" ? options : Array.isArray(options) ? options[0] : 0;
+    const rest = Array.isArray(options) ? options[1] : void 0;
+    super.createProperty(name, {
+      /**
+       * By default to infer attribute name from property name, Lit just
+       * converts property name to lowercase. That is consistent with
+       * native DOM attributes.
+       *
+       * However, that is not consistent with Stencil and would be a
+       * breaking change for us. Also, kebab-case is more common among the
+       * web components. But the most important reason is that we have
+       * some pretty long attribute names, which would be utterly
+       * unreadable in lowercase.
+       *
+       * Also, if browsers add new attributes, that may cause a conflict
+       * with our attributes.
+       *
+       * Thus, overwriting Lit's default behavior to use kebab-case:
+       */
+      attribute: !!(flags & 1 /* ATTRIBUTE */) && typeof name === "string" ? camelToKebab3(name) : false,
+      reflect: !!(flags & 2 /* REFLECT */),
+      type: flags & 4 /* BOOLEAN */ ? Boolean : flags & 8 /* NUMBER */ ? Number : void 0,
+      /**
+       * At the moment in Lit, state:true just means attribute:false, so this
+       * line is technically redundant, but let's keep it here just in case Lit
+       * will add more meaning to state:true in the future.
+       */
+      state: !!(flags & 16 /* STATE */),
+      // Controllers add this option to Lit
+      readOnly: !!(flags & 32 /* READ_ONLY */),
+      noAccessor: !!(flags & 64 /* NO_ACCESSOR */),
+      ...rest
+    });
+  }
+  static {
+    this.lumina = true;
+  }
+  connectedCallback() {
+    if (this.el.hasAttribute("defer-hydration")) {
+      return;
+    }
+    const isFirstCall = !this.manager.connectedCalled;
+    super.connectedCallback();
+    if (isFirstCall) {
+      queueMicrotask(() => void this._load().catch(this._postLoaded.reject));
+    }
+  }
+  /**
+   * Overwrite Lit's default behavior of attaching shadow root to the lit
+   * element, and instead use this.el to support lazy builds.
+   *
+   * Also, support the case when component asked to not use shadow root
+   */
+  createRenderRoot() {
+    const existingShadowRoot = this.el.shadowRoot;
+    const Class = this.constructor;
+    const options = Class.shadowRootOptions;
+    const useLightDom = options === noShadowRoot;
+    const renderRoot = existingShadowRoot ?? (useLightDom ? this.el : this.el.attachShadow(options));
+    Object.defineProperty(this, "shadowRoot", {
+      // Create shadow root on the proxy instance, to make Lit render content there
+      value: renderRoot
+    });
+    if (existingShadowRoot) {
+      if (process.env.NODE_ENV === "production") {
+        OriginalLitElement.prototype.createRenderRoot.call(this);
+      }
+      return existingShadowRoot;
+    }
+    const domRoot = renderRoot.getRootNode();
+    domRoot.adoptedStyleSheets = [
+      ...domRoot.adoptedStyleSheets,
+      ...Class.elementStyles.map((stylesheet) => "styleSheet" in stylesheet ? stylesheet.styleSheet : stylesheet)
+    ];
+    return renderRoot;
+  }
+  /** Do asynchronous component load */
+  async _load() {
+    const parentLoadPromise = this._ancestorLoad ?? attachToAncestor(this, this);
+    if (parentLoadPromise) {
+      await parentLoadPromise;
+    }
+    await this.manager._load();
+    this._enableUpdating(true);
+    this.performUpdate();
+    this._postLoad.resolve();
+    await Promise.resolve();
+    const pendingChildren = this._offspring.filter((loaded) => !loaded.manager?.loadedCalled);
+    if (pendingChildren.length) {
+      await Promise.allSettled(pendingChildren.map(async (child) => await child.componentOnReady()));
+    }
+    this._offspring.length = 0;
+    this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
+    this.manager._loaded();
+    this._postLoaded.resolve();
+  }
+  /**
+   * Overwriting default shouldUpdate simply to get access to
+   * "changedProperties" so that we can later provide it to ControllerManager
+   */
+  shouldUpdate(_changedProperties) {
+    this.$changes = _changedProperties;
+    return this._originalShouldUpdate?.(_changedProperties) ?? true;
+  }
+  listen(name, listener, options) {
+    const boundListener = listener?.bind(this) ?? listener;
+    this.manager.onLifecycle(() => {
+      this.el.addEventListener(name, boundListener, options);
+      return () => this.el.removeEventListener(name, boundListener, options);
+    });
+  }
+  listenOn(target, name, listener, options) {
+    const boundListener = listener?.bind(this) ?? listener;
+    this.manager.onLifecycle(() => {
+      target.addEventListener(name, boundListener, options);
+      return () => target.removeEventListener(name, boundListener, options);
+    });
+  }
+  /**
+   * Create a promise that resolves once component is fully loaded.
+   *
+   * @example
+   * const map = document.createElement('arcgis-map');
+   * document.body.append(map);
+   * map.componentOnReady().then(() => {
+   *   console.log('Map is ready to go!');
+   * });
+   */
+  async componentOnReady() {
+    await this._postLoaded.promise;
+    return this;
+  }
+};
+LitElement.$createEvent = createEventFactory;
+if (process.env.NODE_ENV !== "production") {
+  const globalWithLit = globalThis;
+  globalWithLit.litIssuedWarnings ??= /* @__PURE__ */ new Set();
+  globalWithLit.litIssuedWarnings.add(
+    "Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators See https://lit.dev/msg/no-override-create-property for more information."
+  );
+}
+
+// src/runtime.ts
+function makeRuntime(options) {
+  let assetPath;
+  const setAssetPath = (path) => {
+    assetPath = new URL(path, globalThis.location?.href).href;
+  };
+  const runtime = {
+    ...options,
+    // FEATURE: research https://vitejs.dev/guide/build.html#advanced-base-options
+    getAssetPath(suffix) {
+      const assetUrl = new URL(suffix, assetPath);
+      return assetUrl.origin !== globalThis.location?.origin ? assetUrl.href : assetUrl.pathname;
+    },
+    setAssetPath,
+    customElement(tagName, component) {
+      component.runtime = runtime;
+      component.tagName = tagName;
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, component);
+      }
+    }
+  };
+  setAssetPath(options.defaultAssetPath);
+  if (process.env.NODE_ENV !== "production") {
+    globalThis.devOnly$luminaRuntime = runtime;
+  }
+  return runtime;
+}
+
+// src/jsx/jsx.ts
+import { directive as litDirective } from "lit-html/directive.js";
+import { noChange as litNoChange, nothing as litNothing } from "lit-html";
+var bindAttribute = void 0;
+var bindBooleanAttribute = void 0;
+var bindProperty = void 0;
+var bindEvent = void 0;
+var nothing = litNothing;
+var noChange = litNoChange;
+var directive = litDirective;
+
+// src/jsx/directives.ts
+import { classMap } from "lit-html/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+var safeClassMap = (parameters) => typeof parameters === "object" && parameters != null ? classMap(parameters) : parameters;
+var safeStyleMap = (parameters) => typeof parameters === "object" && parameters != null ? styleMap(parameters) : parameters;
+
+// src/wrappersUtils.ts
+function createPrototypeProxy(tagName) {
+  const customElement = {
+    name: tagName,
+    get prototype() {
+      const customElementPrototype = customElements.get(tagName)?.prototype;
+      if (!customElementPrototype) {
+        if (process.env.NODE_ENV === "production") {
+          throw new Error(`Custom element "${tagName}" not found`);
+        } else {
+          return Object.create(HTMLElement.prototype);
+        }
+      }
+      Object.defineProperty(customElement, "prototype", customElementPrototype);
+      return customElementPrototype;
+    }
+  };
+  return customElement;
+}
+export {
+  LitElement,
+  bindAttribute,
+  bindBooleanAttribute,
+  bindEvent,
+  bindProperty,
+  createEvent,
+  createPrototypeProxy,
+  directive,
+  handleComponentMetaUpdate,
+  handleHmrUpdate,
+  makeDefineCustomElements,
+  makeRuntime,
+  method,
+  noChange,
+  noShadowRoot,
+  nothing,
+  property,
+  safeClassMap,
+  safeStyleMap,
+  state
+};