@arcgis/coding-components 4.30.0-next.21 → 4.30.0-next.22

package/dist/components/chunk-3I7AEPTU.js

@@ -0,0 +1,1290 @@
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
+ * v4.30.0-next.22
+ */
+import { forceUpdate } from '@stencil/core/internal/client';
+import { getArcgisAssetPath as getAssetPath } from "./arcgis-assets.js";
+
+// ../components-utils/dist/index.js
+var h = class {
+  constructor() {
+    this.resolve = () => {
+    }, this.reject = () => {
+    }, this.promise = new Promise((t, n) => {
+      this.resolve = t, this.reject = n;
+    });
+  }
+};
+function w(e, t) {
+  let n = e;
+  for (; n; ) {
+    if (n === t)
+      return true;
+    if (!n.parentNode)
+      return false;
+    n.parentNode instanceof ShadowRoot ? n = n.parentNode.host : n = n.parentNode;
+  }
+  return false;
+}
+function b(e, t, n) {
+  let { subscribe: r } = $(t);
+  return r((o) => {
+    o.some((s) => w(e, s.target)) && n();
+  });
+}
+var f = {};
+function $(e) {
+  let t = e.join(","), n = f[t];
+  if (n !== void 0)
+    return n;
+  let r = /* @__PURE__ */ new Set(), o = new MutationObserver((s) => r.forEach((a) => a(s)));
+  o.observe(document.documentElement, { attributes: true, attributeFilter: e, subtree: true });
+  let i = { subscribe(s) {
+    return r.add(s), { remove: () => {
+      r.delete(s), r.size === 0 && (o.disconnect(), f[t] = void 0);
+    } };
+  } };
+  return f[t] = i, i;
+}
+function x(e, t) {
+  let n = e;
+  for (; n; ) {
+    let r = n.closest(t);
+    if (r)
+      return r;
+    let o = n.getRootNode();
+    if (o === document)
+      return null;
+    n = o.host;
+  }
+  return null;
+}
+function m(e, t, n) {
+  return x(e, `[${t}]`)?.getAttribute(t) ?? n;
+}
+var A = (e) => e.charAt(0).toUpperCase() + e.slice(1);
+var T = (e) => A(e.replaceAll(/([a-z])([A-Z])/gu, "$1 $2"));
+var v = /* @__PURE__ */ new Set(["ar", "bg", "bs", "ca", "cs", "da", "de", "el", "en", "es", "et", "fi", "fr", "he", "hr", "hu", "id", "it", "ja", "ko", "lt", "lv", "nl", "nb", "pl", "pt-BR", "pt-PT", "ro", "ru", "sk", "sl", "sr", "sv", "th", "tr", "uk", "vi", "zh-CN", "zh-HK", "zh-TW"]);
+var g = "en";
+async function j(e, t, n = "") {
+  let r = `${t}/${n}`, o = `${r}${e}.json`;
+  return u[o] ?? (u[o] = S(e, r)), await u[o];
+}
+var u = {};
+async function S(e, t) {
+  let n = `${t}${e}.json`;
+  try {
+    let r = await fetch(n);
+    if (r.ok)
+      return await r.json();
+  } catch (r) {
+    return console.error(r), E;
+  }
+  return e === g ? E : await S(g, t);
+}
+var E = new Proxy({}, { get: (e, t) => T(t.toString()) });
+function M(e) {
+  let t = m(e, "lang", navigator.language || g);
+  if (v.has(t))
+    return { lang: t, t9nLocale: t };
+  let n = t.slice(0, 2);
+  return { lang: t, t9nLocale: v.has(n) ? n : g };
+}
+function Y(e, t, n, r) {
+  let o, i = () => void P(e, t, r).then((s) => {
+    (o?.lang !== s.lang || o.t9nLocale !== s.t9nLocale || o.t9nStrings !== s.t9nStrings) && n(s), o = s;
+  }).catch(console.error);
+  return i(), b(e, ["lang"], i);
+}
+async function P(e, t, n = e.tagName.toLowerCase().replace("arcgis-", "")) {
+  let { lang: r, t9nLocale: o } = M(e), i = `${t}/${n}/t9n`, s = `${n}.t9n.`, a = await j(o, i, s);
+  return { lang: r, t9nLocale: o, t9nStrings: a };
+}
+
+// src/types.ts
+var controllerSymbol = Symbol("controller");
+
+// src/utils.ts
+function safeCall(callback) {
+  try {
+    return callback?.();
+  } catch (error) {
+    console.error(error, callback);
+  }
+  return void 0;
+}
+async function safeAsyncCall(callback) {
+  try {
+    return await callback();
+  } catch (error) {
+    console.error(error, callback);
+  }
+  return void 0;
+}
+function extendObject(base, extend) {
+  Object.entries(extend).forEach(([key, value]) => {
+    if (key in base)
+      throw new Error(`Unable to extend object because property "${key}" is already defined`);
+    const thisBase = base;
+    thisBase[key] = value;
+  });
+  return base;
+}
+var isController = (value) => typeof value === "object" && value !== null && (controllerSymbol in value || "hostConnected" in value || "hostDisconnected" in value || "hostUpdate" in value || "hostUpdated" in value);
+
+// src/ControllerInternals.ts
+var ControllerInternals = class {
+  constructor() {
+    this._ambientControllers = [];
+    /**
+     * The type definition has to be duplicated due to the
+     * "'use' is referenced directly or indirectly in its own type annotation."
+     * error
+     */
+    this.use = async (value, watchExports) => {
+      const controller = this._useRefSync(value);
+      if (controller === void 0) {
+        if (typeof watchExports === "function") {
+          const error = new Error(
+            `Unable to resolve a controller from the provided value, so can't watch it's exports. ${unresolvableExports}`
+          );
+          console.error(error);
+        }
+        return value;
+      }
+      await controller.ready;
+      if (typeof watchExports === "function") {
+        if (controller.watchExports === void 0)
+          throw new Error(`The controller must implement watchExports method to support watching exports`);
+        const unsubscribe = controller.watchExports(
+          (exports) => watchExports(exports, unsubscribe)
+        );
+      }
+      return controller.exports;
+    };
+    this.useRef = async (value) => {
+      const controller = this._useRefSync(value);
+      if (controller === void 0)
+        throw new Error(`Unable to resolve a controller from the provided value. ${unresolvableExports}`);
+      await controller.ready;
+      return controller;
+    };
+    this.shouldBypassSetter = false;
+    /**
+     * A map from component instance or component element to component instance.
+     * To get from component instance or component element to component element,
+     * you can just use the .el property
+     */
+    this.elementToInstance = /* @__PURE__ */ new WeakMap();
+  }
+  /*
+   * Allow controllers to implicitly retrive which component they are in, to
+   * improve DX (avoids the need to pass "this" explicitly for each controller)
+   */
+  setAmbientComponent(component) {
+    if (this._ambientComponent === component)
+      return;
+    this._ambientComponent = component;
+    queueMicrotask(() => {
+      if (this._ambientComponent === component)
+        this._ambientComponent = void 0;
+    });
+  }
+  retriveComponent(name) {
+    if (this._ambientComponent === void 0)
+      throw new Error(
+        [
+          `Unable to find out which component ${name || "this"} controller `,
+          "belongs to. This might happen if you tried to create a controller ",
+          "outside the component. If so, please wrap your controller ",
+          "definition in an arrow function, ",
+          "`const myController = ()=>makeController(...);` and call that",
+          "function inside the component `my = myController();`, or ",
+          "define your controller using makeGenericController/GenericController ",
+          "instead.\n",
+          "If you wish to use a controller inside an async controller, ",
+          "make sure you are using controller.use.\n",
+          "You might also have multiple instances of Controllers loaded"
+        ].join("\n")
+      );
+    return this._ambientComponent;
+  }
+  /*
+   * Aids proxyExports() in knowing who is it's host
+   */
+  setParentController(controller) {
+    if (controller === void 0) {
+      this._ambientControllers = [];
+      return;
+    }
+    const index = this._ambientControllers.indexOf(controller);
+    this._ambientControllers = index === -1 ? [...this._ambientControllers, controller] : this._ambientControllers.slice(0, index + 1);
+    queueMicrotask(() => {
+      this._ambientControllers = [];
+    });
+  }
+  retriveParentControllers() {
+    return this._ambientControllers;
+  }
+  /*
+   * Aids controller.use in retrieving controller value when it receives
+   * controller exports, rather than the controller itself
+   */
+  setAmbientChildController(controller) {
+    if (this._ambientChildController === controller)
+      return;
+    this._ambientChildController = controller;
+    queueMicrotask(() => {
+      if (this._ambientChildController === controller)
+        this._ambientChildController = void 0;
+    });
+  }
+  retriveAmbientChildController() {
+    const controller = this._ambientChildController;
+    this._ambientChildController = void 0;
+    return controller;
+  }
+  /**
+   * Try to resolve a controller, without awaiting it's load
+   */
+  _useRefSync(value) {
+    const ambientChildController = this.retriveAmbientChildController();
+    if (ambientChildController !== void 0)
+      return ambientChildController;
+    const component = Controller.internals.retriveComponent();
+    const controller = component.manager.internals.resolveExports(value);
+    if (controller !== void 0)
+      return controller;
+    if (isController(value))
+      return value;
+    return void 0;
+  }
+};
+var unresolvableExports = [
+  "The value you passed is not a controller and not a controller exports. If ",
+  "your controller exports a literal value, try making your controller export ",
+  "an object instead"
+].join("");
+
+// src/stencil.ts
+function retrieveComponentMeta(component) {
+  const constructor = component.constructor;
+  const meta = constructor.__registerControllers?.(component)?.$cmpMeta$ ?? void 0;
+  constructor.__registerControllers = void 0;
+  if (typeof meta !== "object")
+    throw new Error(
+      "Failed to retrive internal component meta. Make sure you have the useComponentsControllers() Rollup Plugin for Stencil Controllers configured in your Stencil config."
+    );
+  component.manager.internals.meta = meta;
+}
+function parsePropertyValue(value, type = 0) {
+  if (value == null || typeof type !== "number")
+    return value;
+  if ((type & 4 /* Boolean */) !== 0)
+    return value === "false" ? false : value === "" || !!value;
+  else if ((type & 2 /* Number */) !== 0)
+    return Number.parseFloat(value.toString());
+  else if ((type & 1 /* String */) !== 0)
+    return String(value);
+  else
+    return value;
+}
+var makeMemberFilter = (filter) => (component) => {
+  const meta = component.manager.internals.meta;
+  return Object.entries(meta.$members$ ?? {}).filter(([_name, [propType]]) => (propType & filter) !== 0).map(([name]) => name);
+};
+var getPropLikeMembers = makeMemberFilter(63 /* PropLike */);
+var getMemberType = (component, name) => component.manager.internals.meta.$members$?.[name]?.[0];
+function getPropType(component, name) {
+  const type = getMemberType(component, name);
+  if (type === void 0)
+    return void 0;
+  else if (type & 32 /* State */)
+    return "state";
+  else
+    return "prop";
+}
+function addPropertyWatcher(component, property) {
+  const meta = component.manager.internals.meta;
+  meta.$watchers$ ?? (meta.$watchers$ = {});
+  const watchers = meta.$watchers$;
+  if (!(property in watchers))
+    watchers[property] = [];
+  if (!watchers[property].includes(watcherCallbackName))
+    watchers[property].push(watcherCallbackName);
+}
+var watcherCallbackName = "dynamicWatcherCallback";
+
+// src/Controller.ts
+var _a;
+var _Controller = class _Controller {
+  constructor(component) {
+    this._ready = new h();
+    this._lifecycleDisconnected = [];
+    this.connectedCalled = false;
+    this.willLoadCalled = false;
+    this.didLoadCalled = false;
+    this[_a] = true;
+    this.ready = this._ready.promise;
+    /*
+     * Setting default exports to "this" so that controllers that don't use
+     * exports/proxyExports(), could still be used as if they did
+     * (i.e with controller.use)
+     */
+    this._exports = makeProvisionalValue(this);
+    this._exportWatchers = /* @__PURE__ */ new Set();
+    const resolvedComponent = toControllerHost(
+      component ?? _Controller.internals.retriveComponent(new.target.name)
+    );
+    Object.defineProperty(this, "component", {
+      writable: false,
+      enumerable: false,
+      configurable: true,
+      value: resolvedComponent
+    });
+    this.component.addController(this);
+    const manager = this.component.manager;
+    this.connected = manager?.connected;
+    this.internals = manager?.internals;
+    _Controller.internals.setParentController(this);
+    if ("hostDestroy" in this)
+      this.component.manager.ensureHasDestroy();
+    if (manager !== void 0)
+      queueMicrotask(() => this.catchUpLifecycle());
+    const controller = this;
+    this._callbacks = {
+      hostConnected: "hostConnected" in this ? [() => controller.hostConnected?.()] : [],
+      hostDisconnected: "hostDisconnected" in this ? [() => controller.hostDisconnected?.()] : [],
+      hostLoad: "hostLoad" in this ? [() => controller.hostLoad?.()] : [],
+      hostLoaded: "hostLoaded" in this ? [() => controller.hostLoaded?.()] : [],
+      hostRender: "hostRender" in this ? [() => controller.hostRender?.()] : [],
+      hostRendered: "hostRendered" in this ? [() => controller.hostRendered?.()] : [],
+      hostUpdate: "hostUpdate" in this ? [() => controller.hostUpdate?.()] : [],
+      hostUpdated: "hostUpdated" in this ? [() => controller.hostUpdated?.()] : [],
+      hostDestroy: "hostDestroy" in this ? [() => controller.hostDestroy?.()] : [],
+      hostLifecycle: "hostLifecycle" in this ? [() => controller.hostLifecycle?.()] : []
+    };
+  }
+  /**
+   * If controller is being added dynamically, after the component
+   * construction, then trigger connected and load right away
+   */
+  catchUpLifecycle() {
+    if (this.connectedCalled)
+      return;
+    this.triggerConnected();
+    this.triggerLoad().then(() => this.triggerLoaded()).catch(console.error);
+  }
+  get exports() {
+    return this._exports;
+  }
+  /**
+   * Set controller's exports property (for usage with proxyExports()) and mark
+   * controller as ready (for usage in other controllers). Also, triggers
+   * re-render of the component
+   */
+  set exports(exports) {
+    if (this._exports !== exports) {
+      this._exports = exports;
+      if (this.connectedCalled)
+        this.component.requestUpdate();
+      this._exportWatchers.forEach((callback) => callback(exports));
+    }
+    this._ready.resolve(exports);
+  }
+  setProvisionalExports(exports) {
+    this._exports = makeProvisionalValue(exports);
+    this._exportWatchers.forEach((callback) => callback(this._exports));
+  }
+  watchExports(callback) {
+    const safeCallback = (exports) => safeCall(() => callback(exports));
+    this._exportWatchers.add(safeCallback);
+    return () => void this._exportWatchers.delete(safeCallback);
+  }
+  /**
+   * A flexible utility for making sure a controller is loaded before it's used,
+   * regardless of how or where a controller was defined:
+   *
+   * @example
+   * makeGenericController(async (component, controller) => {
+   *   // Await some controller from the component:
+   *   await controller.use(component.someController);
+   *   // Initialize new controllers
+   *   await controller.use(load(importCoreReactiveUtils));
+   *   await controller.use(new ViewModelController(component,newWidgetsHomeHomeViewModel));
+   *   await controller.use(someController(component));
+   * });
+   *
+   * @remarks
+   * If your controller is not async, and you are not creating it async, then
+   * you are not required to use controller.use - you can use it directly.
+   * Similarly, accessing controllers after componentWillLoad callback does not
+   * require awaiting them as they are guaranteed to be loaded by then.
+   */
+  get use() {
+    _Controller.internals.setAmbientComponent(this.component);
+    return _Controller.internals.use;
+  }
+  /**
+   * Just like controller.use, but returns the controller itself, rather than it's
+   * exports
+   *
+   * Use cases:
+   * - You have a controller and you want to make sure it's loaded before you
+   *   try to use it
+   * - Your contoller is not using exports, so you wish to access some props on
+   *   it directly
+   * - You have a controller exports only, and you want to retrieve the
+   *   controller itself. This is useful if you wish to call .watchExports() or
+   *   some other method on the controller
+   */
+  get useRef() {
+    _Controller.internals.setAmbientComponent(this.component);
+    return _Controller.internals.useRef;
+  }
+  /**
+   * If you need to set a prop/state without triggering the custom setter you
+   * defined with getSet()/dynamicGetSet()/readonly(), set the value inside
+   * of this function
+   *
+   * @example
+   * @Prop({mutable:true}) readOnly = this.manager.readOnly(true);
+   *
+   * someAction(): void {
+   *   this.manager.bypassSetter(()=>{
+   *     this.readOnly = false;
+   *   });
+   * }
+   *
+   */
+  bypassSetter(callback) {
+    _Controller.internals.shouldBypassSetter = true;
+    const result = safeCall(callback);
+    _Controller.internals.shouldBypassSetter = false;
+    return result;
+  }
+  /**
+   * Like this.manager.getSet(), but can be called on any component's
+   * state/prop from anywhere, rather than just from the default value
+   */
+  dynamicGetSet(name, getSet) {
+    this.genericGetSet(name, getSet);
+  }
+  /**
+   * Like dynamicGetSet, but less type-safe. Useful in cases when trying to set
+   * getters/setters in place where property names & types are not known
+   * statically
+   */
+  genericGetSet(property, getSet) {
+    var _a2, _b;
+    const classPrototype = Object.getPrototypeOf(this.component);
+    this.internals.getSetProxy(classPrototype, property, getSet, "class");
+    const htmlPrototype = Object.getPrototypeOf(this.component.el);
+    if (classPrototype !== htmlPrototype)
+      this.internals.getSetProxy(htmlPrototype, property, getSet, "html");
+    const genericGetSet = getSet;
+    if (genericGetSet.get !== void 0) {
+      (_a2 = this.internals.getters)[property] ?? (_a2[property] = []);
+      if (getSet.order === "last")
+        this.internals.getters[property].splice(-1, 0, genericGetSet.get);
+      else
+        this.internals.getters[property].unshift(genericGetSet.get);
+    }
+    if (genericGetSet.set !== void 0) {
+      (_b = this.internals.setters)[property] ?? (_b[property] = []);
+      if (getSet.order === "last")
+        this.internals.setters[property].splice(-1, 0, genericGetSet.set);
+      else
+        this.internals.setters[property].unshift(genericGetSet.set);
+    }
+  }
+  // FEATURE: improve typings
+  /**
+   * Dynamically set a watcher for any @Prop()/@State() property
+   */
+  watch(property, callback) {
+    var _a2;
+    const type = getMemberType(this.component, property);
+    if (type === void 0)
+      throw new Error(
+        `Trying to watch a non-@Prop, non-@State property "${property}". Either convert it into a @State() or use manager.getSet/dynamicGetSet`
+      );
+    addPropertyWatcher(this.component, property);
+    (_a2 = this.internals.watchers)[property] ?? (_a2[property] = []);
+    const watchers = this.internals.watchers[property];
+    const genericCallback = callback;
+    const safeCallback = (newValue, oldValue, propertyName) => safeCall(() => genericCallback(newValue, oldValue, propertyName));
+    watchers.push(safeCallback);
+    return () => {
+      const index = watchers.indexOf(safeCallback);
+      if (index !== -1)
+        watchers.splice(index, 1);
+    };
+  }
+  // Register a lifecycle callback
+  onConnected(callback) {
+    this._callbacks.hostConnected.push(callback);
+  }
+  onDisconnected(callback) {
+    this._callbacks.hostDisconnected.push(callback);
+  }
+  onLoad(callback) {
+    this._callbacks.hostLoad.push(callback);
+  }
+  onLoaded(callback) {
+    this._callbacks.hostLoaded.push(callback);
+  }
+  onRender(callback) {
+    this._callbacks.hostRender.push(callback);
+  }
+  onRendered(callback) {
+    this._callbacks.hostRendered.push(callback);
+  }
+  onUpdate(callback) {
+    this._callbacks.hostUpdate.push(callback);
+  }
+  onUpdated(callback) {
+    this._callbacks.hostUpdated.push(callback);
+  }
+  onDestroy(callback) {
+    this.component.manager.ensureHasDestroy();
+    this._callbacks.hostDestroy.push(callback);
+  }
+  onLifecycle(callback) {
+    this._callbacks.hostLifecycle.push(callback);
+    if (this.connectedCalled && this.component.el.isConnected)
+      this._callLifecycle(callback);
+  }
+  // Call each lifecycle hook
+  triggerConnected() {
+    this._callbacks.hostConnected.forEach(safeCall);
+    this.triggerLifecycle();
+    this.connectedCalled = true;
+  }
+  triggerDisconnected() {
+    this._callbacks.hostDisconnected.forEach(safeCall);
+    this._lifecycleDisconnected.forEach(safeCall);
+    this._lifecycleDisconnected = [];
+  }
+  async triggerLoad() {
+    if (this.willLoadCalled)
+      return;
+    this.willLoadCalled = true;
+    if (this._callbacks.hostLoad.length > 0)
+      await Promise.allSettled(this._callbacks.hostLoad.map(safeAsyncCall));
+    this._ready.resolve(this._exports);
+  }
+  triggerLoaded() {
+    if (this.didLoadCalled)
+      return;
+    this._callbacks.hostLoaded.forEach(safeCall);
+    this.didLoadCalled = true;
+  }
+  async triggerRender() {
+    if (this._callbacks.hostRender.length > 0)
+      await Promise.allSettled(this._callbacks.hostRender.map(safeAsyncCall));
+  }
+  triggerRendered() {
+    this._callbacks.hostRendered.forEach(safeCall);
+  }
+  async triggerUpdate() {
+    if (this._callbacks.hostUpdate.length > 0)
+      await Promise.allSettled(this._callbacks.hostUpdate.map(safeAsyncCall));
+  }
+  triggerUpdated() {
+    this._callbacks.hostUpdated.forEach(safeCall);
+  }
+  triggerDestroy() {
+    this._callbacks.hostDestroy.forEach(safeCall);
+  }
+  triggerLifecycle() {
+    this._callbacks.hostLifecycle.forEach((callback) => this._callLifecycle(callback));
+  }
+  _callLifecycle(callback) {
+    const cleanupRaw = safeCall(callback);
+    const cleanup = Array.isArray(cleanupRaw) ? cleanupRaw : [cleanupRaw];
+    cleanup.forEach((cleanup2) => {
+      if (typeof cleanup2 === "function")
+        this._lifecycleDisconnected.push(cleanup2);
+      else if (typeof cleanup2 === "object" && typeof cleanup2.remove === "function")
+        this._lifecycleDisconnected.push(cleanup2.remove);
+    });
+  }
+};
+_a = controllerSymbol;
+_Controller.internals = new ControllerInternals();
+var Controller = _Controller;
+var GenericController = class extends Controller {
+  // Redundant constructor needed to improve typing
+  constructor(component) {
+    super(component);
+  }
+  // Overriding super's watch only to improve typing
+  watch(property, callback) {
+    return super.watch(
+      property,
+      callback
+    );
+  }
+  /**
+   * Silence "Property 'dynamicGetSet' in type
+   * 'GenericController<Exports, Requires>' is not assignable to the same
+   * property in base type 'Controller<Exports>'", as TypeScript is being overly
+   * conservative here with what it allows
+   */
+  dynamicGetSet(property, getSet) {
+    super.genericGetSet(property, getSet);
+  }
+};
+function makeProvisionalValue(base) {
+  if (typeof base !== "object" && typeof base !== "function" || base === null)
+    return base;
+  const proxy3 = new Proxy(base, {
+    get(target, prop, receiver) {
+      if (cyclical.has(prop) && prop in target && target[prop] === proxy3)
+        return void 0;
+      if (prop in target || promiseMethods.has(prop) || typeof prop === "symbol")
+        return typeof target === "function" ? target[prop] : Reflect.get(target, prop, receiver);
+      console.error(`Trying to access "${prop.toString()}" on the controller before it's loaded. ${accessBeforeLoad}`);
+      return void 0;
+    },
+    set(target, prop, newValue, reciever) {
+      console.error(`Trying to set "${prop.toString()}" on the controller before it's loaded. ${accessBeforeLoad}`);
+      return Reflect.set(target, prop, newValue, reciever);
+    }
+  });
+  return proxy3;
+}
+var promiseMethods = /* @__PURE__ */ new Set(["then", "catch", "finally"]);
+var cyclical = /* @__PURE__ */ new Set(["exports", "_exports"]);
+var accessBeforeLoad = [
+  "This might be the case if you are trying to access an async controller in ",
+  "connectedCallback(). Or, if you are using it inside of ",
+  "componentWillLoad()/another controller without controller.use. Example correct ",
+  "usage:\n",
+  "makeController(async (component, controller)=>{ await controller.use(someOtherController); });"
+].join("");
+function toControllerHost(component) {
+  if ("addController" in component)
+    return component;
+  else
+    throw new Error(
+      "Component does not implement ControllerHost. This might be because you forgot to add 'manager: Controller<this> = useControllerManager(this);' in your component, or you tried to use some controller before that line"
+    );
+}
+
+// src/trackPropertyKey.ts
+function trackPropertyKey(object, onResolved, defaultValue) {
+  const keys = Object.keys(object);
+  const keyCount = keys.length;
+  if (keyTrackMap === void 0)
+    queueMicrotask(keyTrackResolve);
+  keyTrackMap ?? (keyTrackMap = /* @__PURE__ */ new Map());
+  let pendingTrackers = keyTrackMap.get(object);
+  if (pendingTrackers === void 0) {
+    pendingTrackers = { callbacks: [], keyCount };
+    keyTrackMap.set(object, pendingTrackers);
+  }
+  if (pendingTrackers.keyCount !== keyCount) {
+    pendingTrackers.callbacks.forEach((resolve) => resolve(keys));
+    pendingTrackers.callbacks = [];
+    pendingTrackers.keyCount = keyCount;
+  }
+  pendingTrackers.callbacks.push((keys2) => {
+    const key = keys2[keyCount];
+    if (key === void 0)
+      onResolved(void 0);
+    else if (object[key] === defaultValue)
+      onResolved(key);
+    else
+      onResolved(void 0);
+  });
+  return defaultValue;
+}
+var keyTrackMap = void 0;
+function keyTrackResolve() {
+  Array.from(keyTrackMap?.entries() ?? []).forEach(([object, { callbacks }]) => {
+    const keys = Object.keys(object);
+    callbacks.forEach((commit) => commit(keys));
+  });
+  keyTrackMap = void 0;
+}
+
+// src/ComponentInternals.ts
+var ComponentInternals = class {
+  constructor(component) {
+    this.trackKey = (hostsCandidates, onResolved, defaultValue) => {
+      const candidateHosts = Array.isArray(hostsCandidates) ? hostsCandidates : [hostsCandidates];
+      let leftToResolve = candidateHosts.length + 1;
+      const resolved = (resolution) => {
+        leftToResolve -= 1;
+        if (resolution !== void 0)
+          leftToResolve = 0;
+        if (leftToResolve === 0)
+          onResolved(resolution);
+      };
+      candidateHosts.forEach(
+        (host) => this.component.manager.trackPropertyKey(
+          host,
+          (key) => resolved(
+            key === void 0 ? void 0 : {
+              key,
+              host,
+              type: "property",
+              domValue: void 0
+            }
+          ),
+          defaultValue
+        )
+      );
+      this.component.manager.trackPropKey((key, domValue) => {
+        const propType = key === void 0 ? void 0 : getPropType(this.component, key);
+        resolved(
+          key === void 0 ? void 0 : {
+            key,
+            host: this.component,
+            type: propType ?? "prop",
+            domValue: propType === "prop" ? domValue : void 0
+          }
+        );
+      }, defaultValue);
+      return defaultValue;
+    };
+    this.trackPropKey = (onResolved, defaultValue) => {
+      if (this._trackedValue !== nothing && this._trackedValue !== defaultValue)
+        this._firePropertyTrackers(void 0, void 0, void 0);
+      if (this._keyTrackers.length === 0)
+        queueMicrotask(() => this._firePropertyTrackers(void 0, void 0, void 0));
+      this._trackedValue = defaultValue;
+      this._keyTrackers.push(
+        (key, value, previousValue) => onResolved(defaultValue === value ? key : void 0, previousValue)
+      );
+      return defaultValue;
+    };
+    this._trackedValue = nothing;
+    this._keyTrackers = [];
+    this.getters = {};
+    this.setters = {};
+    this._exports = /* @__PURE__ */ new WeakMap();
+    Object.defineProperty(this, "component", {
+      writable: false,
+      enumerable: false,
+      configurable: true,
+      value: component
+    });
+  }
+  _firePropertyTrackers(key, value, oldValue) {
+    const trackers = this._keyTrackers;
+    this._trackedValue = nothing;
+    this._keyTrackers = [];
+    trackers.forEach((tracker) => tracker(key, value, oldValue));
+  }
+  /**
+   * Configure a getter or setter for a given @Prop/@State. Note, since props
+   * are defined on the prototype, they are shared between all instances of a
+   * component. Thus instead of passing function reference to
+   * Object.defineProperty, we use instance-owned getters and setters array.
+   */
+  getSetProxy(prototype, name, {
+    get,
+    set
+  }, type) {
+    const component = this.component;
+    const propType = getMemberType(component, name);
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, name);
+    const tolerateNotFound = type === "html";
+    if (descriptor?.set === void 0 || descriptor.get === void 0)
+      if (descriptor !== void 0 && "value" in descriptor)
+        throw new Error(
+          `getSet() should only be used on Stencil's @Prop and @State properties. For internal component properties, use regular get/set syntax. Tried to use it on "${name}" in ${component.el.tagName}`
+        );
+      else if (tolerateNotFound)
+        return;
+      else
+        throw new Error(`Unable to find "${name}" property on the ${component.el.tagName} component`);
+    const { get: originalGet, set: originalSet } = descriptor;
+    const isGetterAlreadyOverwritten = customAccessor in originalGet;
+    const isSetterAlreadyOverwritten = customAccessor in originalSet;
+    const shouldOverwriteGet = !isGetterAlreadyOverwritten && typeof get === "function";
+    const shouldOverwriteSet = !isSetterAlreadyOverwritten && typeof set === "function";
+    if (!shouldOverwriteGet && !shouldOverwriteSet)
+      return;
+    const finalGetter = shouldOverwriteGet ? function getter() {
+      let value = originalGet.call(this);
+      const component2 = Controller.internals.elementToInstance.get(this);
+      const getters = component2?.manager.internals.getters[name] ?? [];
+      for (let i = 0; i < getters.length; i++)
+        value = getters[i](value, name);
+      return value;
+    } : originalGet;
+    const finalSetter = shouldOverwriteSet ? function setter(rawNewValue) {
+      if (Controller.internals.shouldBypassSetter) {
+        originalSet.call(this, rawNewValue);
+        return;
+      }
+      const oldValue = originalGet.call(this);
+      let newValue = parsePropertyValue(rawNewValue, propType);
+      const component2 = Controller.internals.elementToInstance.get(this);
+      const internals = component2?.manager.internals;
+      if (newValue === oldValue)
+        originalSet.call(this, rawNewValue);
+      else {
+        const setters = internals?.setters[name] ?? [];
+        for (let i = 0; i < setters.length; i++)
+          newValue = setters[i](newValue, oldValue, name);
+        originalSet.call(this, newValue);
+      }
+      if ((internals?._keyTrackers.length ?? 0) > 0)
+        internals?._firePropertyTrackers(name, rawNewValue, oldValue);
+    } : originalSet;
+    if (shouldOverwriteGet)
+      Object.defineProperty(finalGetter, customAccessor, { value: true });
+    if (shouldOverwriteSet)
+      Object.defineProperty(finalSetter, customAccessor, { value: true });
+    Object.defineProperty(prototype, name, {
+      ...descriptor,
+      get: finalGetter,
+      set: finalSetter
+    });
+  }
+  /**
+   * Associate an exports object with a controller for reverse lookup in
+   * controller.use
+   */
+  markExports(controller, exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function")
+      this._exports.set(exports, controller);
+  }
+  resolveExports(exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function")
+      return this._exports.get(exports);
+    else
+      return void 0;
+  }
+};
+var customAccessor = Symbol("controllersCustomAccessor");
+var nothing = Symbol("nothing");
+
+// ../core-adapter/dist/index.js
+var isAMD = typeof window !== "undefined" && "$arcgis" in window && typeof window.$arcgis === "object" && "import" in window.$arcgis;
+function isDefaultModule(module) {
+  return module.default !== void 0;
+}
+async function importCoreAccessor() {
+  if (isAMD) {
+    return await window.$arcgis.import("esri/core/Accessor");
+  }
+  const module = await import('./Accessor-YDTURKZ7.js');
+  return isDefaultModule(module) ? module.default : module;
+}
+async function importCoreAccessorSupportDecorators() {
+  if (isAMD) {
+    return await window.$arcgis.import("esri/core/accessorSupport/decorators");
+  }
+  const module = await import('./decorators-443AWDOE.js');
+  return isDefaultModule(module) ? module.default : module;
+}
+
+// src/accessorIntegration.ts
+var accessorPromise = Promise.all([importCoreAccessor(), importCoreAccessorSupportDecorators()]);
+async function accessorIntegration(component) {
+  let accessor = void 0;
+  const getSet = {
+    get: (value, propertyName) => {
+      const accessorValue = accessor?.[propertyName];
+      return value ?? accessorValue;
+    },
+    set: (newValue, oldValue, propertyName) => {
+      if (accessor !== void 0)
+        accessor[propertyName] = newValue;
+      return newValue;
+    }
+  };
+  const members = getPropLikeMembers(component);
+  members.forEach((member) => component.manager.genericGetSet(member, getSet));
+  const [Accessor, { subclass, property }] = await accessorPromise;
+  return () => {
+    class AccessorSubclass extends Accessor {
+    }
+    members.forEach(
+      (name) => property({
+        value: component[name]
+      })(AccessorSubclass.prototype, name)
+    );
+    const Subclass = subclass(component.el.tagName)(AccessorSubclass);
+    accessor = new Subclass();
+  };
+}
+
+// src/ControllerManager.ts
+var useControllerManager = (component) => new ControllerManager(component);
+var ControllerManager = class extends GenericController {
+  constructor(component) {
+    const controllers = /* @__PURE__ */ new Set();
+    const watchers = {};
+    const controllerHost = {
+      addController: (controller) => {
+        controllers.add(controller);
+      },
+      [watcherCallbackName]: (newValue, oldValue, propertyName) => {
+        watchers[propertyName]?.forEach((callback) => callback(newValue, oldValue, propertyName));
+      },
+      removeController: (controller) => {
+        controllers.delete(controller);
+      },
+      requestUpdate: () => forceUpdate(component)
+    };
+    extendObject(component, controllerHost);
+    super(component);
+    this._connected = new h();
+    this.internals = new ComponentInternals(this.component);
+    this.connected = this._connected.promise;
+    this.hasDestroy = false;
+    this.destroyed = false;
+    this._updatePromise = new h();
+    this._originalLifecycles = {};
+    /**
+     * A magical solution to finding out what property name a given controller
+     * on a given object was assigned to. Note, this does not work for properties
+     * that have \@Prop() or \@State() decorator - for those, use
+     * manager.trackPropKey() instead.
+     *
+     * @example
+     * function trackMe<T>(defaultValue:T, component:BaseComponent):T {
+     *   component.manager.trackPropertyKey(component, (key)=>console.log(key), defaultValue);
+     *   return defaultValue;
+     * }
+     *
+     * class MyComponent extends BaseComponent {
+     *   // Will console log "myProp"
+     *   myProp = trackMe('a', this);
+     * }
+     *
+     */
+    this.trackPropertyKey = trackPropertyKey;
+    /**
+     * Like manager.trackPropertyKey(), but for props that have \@State() or \@Prop()
+     * decorator
+     *
+     * @example
+     * function trackMe(component:BaseComponent) {
+     *   component.manager.trackPropKey((key)=>console.log(key));
+     * }
+     *
+     * class MyComponent extends BaseComponent {
+     *   // Will console log "myProp"
+     *   @Prop() myProp = trackMe(this);
+     *
+     *   // Will console log "myState"
+     *   @State() myState = trackMe(this);
+     * }
+     */
+    this.trackPropKey = this.internals.trackPropKey;
+    /**
+     * A combination of trackPropertyKey() and trackPropKey(). For usage when
+     * you want to track a property, but don't know if it will be defined with the
+     * \@Prop() decorator or not
+     */
+    this.trackKey = this.internals.trackKey;
+    this.component.manager = this;
+    retrieveComponentMeta(component);
+    this._controllers = controllers;
+    this.internals.watchers = watchers;
+    this.exports = void 0;
+    this.hasDestroy = "preserveOnDisconnect" in this.component && typeof this.component.destroy === "function";
+    if (this.hasDestroy)
+      this.watch("preserveOnDisconnect", () => this._preserveOnDisconnectWatcher());
+    this._bindLifecycleMethods();
+    Object.defineProperty(component, "updateComplete", {
+      get: async () => await this._updatePromise.promise
+    });
+    this.component.addController(this);
+    this._accessorIntegrationReady = accessorIntegration(this.component);
+    Controller.internals.setParentController(void 0);
+    Controller.internals.setAmbientComponent(component);
+    Controller.internals.elementToInstance.set(component.el, component);
+    Controller.internals.elementToInstance.set(component, component);
+  }
+  _bindLifecycleMethods() {
+    const component = this.component;
+    this._originalLifecycles = {
+      connectedCallback: component.connectedCallback,
+      disconnectedCallback: component.disconnectedCallback,
+      componentWillLoad: component.componentWillLoad,
+      componentDidLoad: component.componentDidLoad,
+      componentWillRender: component.componentWillRender,
+      componentDidRender: component.componentDidRender,
+      componentWillUpdate: component.componentWillUpdate,
+      componentDidUpdate: component.componentDidUpdate,
+      destroy: component.destroy
+    };
+    component.connectedCallback = this._connectedCallback.bind(this);
+    component.disconnectedCallback = this._disconnectedCallback.bind(this);
+    component.componentWillLoad = this._componentWillLoad.bind(this);
+    component.componentDidLoad = this._componentDidLoad.bind(this);
+    component.componentWillRender = this._componentWillRender.bind(this);
+    component.componentDidRender = this._componentDidRender.bind(this);
+    component.componentWillUpdate = this._componentWillUpdate.bind(this);
+    component.componentDidUpdate = this._componentDidUpdate.bind(this);
+    if (this.hasDestroy)
+      component.destroy = this.destroy.bind(this);
+  }
+  /**
+   * Throws an error if component does not implement destroy() lifecycle, but
+   * tries to use it.
+   */
+  ensureHasDestroy() {
+    if (!this.hasDestroy)
+      throw new Error(destroyErrorMessage);
+  }
+  /**
+   * Private because this is not supposed to be called by Component directly.
+   * Instead, _bindLifecycleMethods will take care of that. Otherwise, you risk
+   * calling lifecycle methods twice.
+   */
+  _connectedCallback() {
+    if (this.destroyed) {
+      const tagName = this.component.el.tagName.toLowerCase();
+      this.component.el.remove();
+      throw new Error(
+        `The ${tagName} component has already been destroyed. It can not be used again. If you meant to disconnect and reconnect a component without automatic destroy, set the preserveOnDisconnect prop.`
+      );
+    }
+    keyTrackResolve();
+    this._connected.resolve();
+    this._controllers.forEach(
+      (controller) => "triggerConnected" in controller ? controller.triggerConnected() : safeCall(() => controller.hostConnected?.())
+    );
+    this._originalLifecycles.connectedCallback?.call(this.component);
+  }
+  _disconnectedCallback() {
+    if (this.destroyed)
+      return;
+    this._controllers.forEach(
+      (controller) => "triggerDisconnected" in controller ? controller.triggerDisconnected() : safeCall(() => controller.hostDisconnected?.())
+    );
+    this._originalLifecycles.disconnectedCallback?.call(this.component);
+    if (this.hasDestroy)
+      this._preserveOnDisconnectWatcher();
+  }
+  async _componentWillLoad() {
+    const enableIntegration = await this._accessorIntegrationReady;
+    enableIntegration();
+    await Promise.allSettled(
+      Array.from(
+        this._controllers,
+        async (controller) => "triggerLoad" in controller ? await controller.triggerLoad() : await safeAsyncCall(async () => await controller.hostLoad?.())
+      )
+    );
+    await this._originalLifecycles.componentWillLoad?.call(this.component);
+  }
+  _componentDidLoad() {
+    this._controllers.forEach(
+      (controller) => "triggerLoaded" in controller ? controller.triggerLoaded() : safeCall(() => controller.hostLoaded?.())
+    );
+    this._originalLifecycles.componentDidLoad?.call(this.component);
+  }
+  async _componentWillRender() {
+    await Promise.allSettled(
+      Array.from(
+        this._controllers,
+        async (controller) => "triggerRender" in controller ? await controller.triggerRender() : await safeAsyncCall(async () => await controller.hostRender?.())
+      )
+    );
+    await this._originalLifecycles.componentWillRender?.call(this.component);
+  }
+  _componentDidRender() {
+    this._controllers.forEach(
+      (controller) => "triggerRendered" in controller ? controller.triggerRendered() : safeCall(() => controller.hostRendered?.())
+    );
+    this._originalLifecycles.componentDidRender?.call(this.component);
+  }
+  async _componentWillUpdate() {
+    await Promise.allSettled(
+      Array.from(
+        this._controllers,
+        async (controller) => "triggerUpdate" in controller ? await controller.triggerUpdate() : await safeAsyncCall(async () => await controller.hostUpdate?.())
+      )
+    );
+    await this._originalLifecycles.componentWillUpdate?.call(this.component);
+  }
+  _componentDidUpdate() {
+    this._controllers.forEach(
+      (controller) => "triggerUpdated" in controller ? controller.triggerUpdated() : safeCall(() => controller.hostUpdated?.())
+    );
+    this._originalLifecycles.componentDidUpdate?.call(this.component);
+    const updatePromise = this._updatePromise;
+    this._updatePromise = new h();
+    updatePromise.resolve(true);
+  }
+  async destroy() {
+    this.ensureHasDestroy();
+    if (this.destroyed)
+      return;
+    if (this.component.el.isConnected) {
+      this.hasDestroy = false;
+      this.component.el.remove();
+      this.hasDestroy = true;
+    }
+    this.destroyed = true;
+    this._controllers.forEach(
+      (controller) => "triggerDestroy" in controller ? controller.triggerDestroy() : safeCall(() => controller.hostDestroy?.())
+    );
+    await this._originalLifecycles.destroy?.call(this.component);
+  }
+  _preserveOnDisconnectWatcher() {
+    if (!this.component.el.isConnected && !this.component.preserveOnDisconnect)
+      void this.destroy().catch(console.error);
+  }
+  readonly(value) {
+    return this.getSet(value, {
+      set: (newValue, _oldValue, property) => {
+        throw new Error(
+          `Cannot assign to read-only property "${property}" of ${this.component.el.tagName.toLowerCase()}. Trying to assign "${String(
+            newValue
+          )}"`
+        );
+      }
+    });
+  }
+  /**
+   * Listen for any component's @State()/@Prop() change, and mutate it's
+   * value before it is set.
+   * This is necessary because Stencil's Compiler does not support get/set for
+   * @State()/@Prop().
+   * For private component properties, you should use regular get/set syntax.
+   *
+   * @example
+   * @Prop() exampleProp = this.manager.getSet(defaultValue,{get,set})
+   * @Prop() someProp = this.manager.getSet(
+   *   undefined as string | undefined,
+   *   {
+   *     get: (value)=>value.trim(),
+   *     set: (newValue,oldValue) => newValue.trim() ?? oldValue
+   *   }
+   * )
+   *
+   * @remarks
+   * Unlike a native get/set, the get function receives the current attribute
+   * value, and can modify it before returning it (or can disregard the current
+   * value and get it from elsewhere instead).
+   * Similarly, setter is called with the new and old value, and is expected to
+   * return the final new value (or return the old value to undo the change)
+   */
+  getSet(defaultValue, getSet) {
+    return this.component.manager.trackPropKey((name) => {
+      if (name === void 0)
+        throw new Error(
+          "Unable to resolve get/set's prop name. Make sure you are using it like @Prop() someProp = this.manager.getSet(defaultValue,{get,set})"
+        );
+      const genericComponent = this.component;
+      const value = genericComponent[name];
+      if (value != null && value !== defaultValue && typeof getSet.set === "function" && getSet.initialSet !== false) {
+        const newValue = getSet.set(value, defaultValue, name);
+        if (newValue !== value)
+          genericComponent[name] = newValue;
+      }
+      this.genericGetSet(name, getSet);
+    }, defaultValue);
+  }
+};
+var destroyErrorMessage = `
+If the component uses a controller that uses destroy() method, then the
+component must have the following properties:
+${// Don't expose internal code in production, and keep bundle smaller:
+`preserveOnDisconnect and destroy` }
+`.trim();
+
+// src/proxyExports.ts
+var proxyExports = (Class) => (...args) => {
+  const ambientControllers = Controller.internals.retriveParentControllers();
+  const instance = new Class(...args);
+  const initialExports = instance.exports;
+  Controller.internals.setParentController(ambientControllers.at(-1));
+  const internals = instance.component.manager.internals;
+  internals.markExports(instance, initialExports);
+  instance.watchExports((exports) => internals.markExports(instance, exports));
+  Controller.internals.setAmbientChildController(instance);
+  const hostCandidates = [instance.component, ...ambientControllers].reverse();
+  return internals.trackKey(
+    hostCandidates,
+    (resolution) => resolution === void 0 ? void 0 : setProxy(instance, resolution.host, resolution.key, initialExports),
+    initialExports
+  );
+};
+function setProxy(controller, host, key, initialExports) {
+  const genericHost = host;
+  const controllerValueChanged = genericHost[key] !== controller.exports;
+  const hostValueChanged = genericHost[key] !== initialExports;
+  const controllerUpdatedExports = initialExports !== controller.exports;
+  if (controllerValueChanged && !hostValueChanged && controllerUpdatedExports)
+    genericHost[key] = controller.exports;
+  controller.watchExports(() => {
+    if (genericHost[key] !== controller.exports)
+      genericHost[key] = controller.exports;
+  });
+}
+
+// src/functional.ts
+var makeController = (constructor) => proxy(void 0, constructor);
+var FunctionalController = class extends Controller {
+  constructor(component, constructor) {
+    super(component);
+    const originalExports = this.exports;
+    try {
+      Controller.internals.setAmbientComponent(this.component);
+      const value = constructor(this.component, this);
+      const constructorChangedExports = this.exports !== originalExports;
+      if (value instanceof Promise) {
+        if (!constructorChangedExports)
+          this.setProvisionalExports(value);
+        const resolved = value.then((result) => {
+          this.exports = result;
+          super.catchUpLifecycle();
+        }).catch((error) => {
+          this._ready.reject(error);
+          console.error(error);
+        });
+        this.onLoad(async () => await resolved);
+      } else {
+        if (!constructorChangedExports || value !== void 0)
+          this.exports = value;
+        super.catchUpLifecycle();
+      }
+    } catch (error) {
+      this._ready.reject(error);
+      console.error(error);
+    }
+  }
+  /** Noop - will be called in the constructor instead */
+  catchUpLifecycle() {
+    return;
+  }
+};
+var proxy = proxyExports(FunctionalController);
+function useT9n({
+  blocking = false,
+  name
+} = {}) {
+  return makeController((component, controller) => {
+    controller.onLifecycle(
+      () => Y(
+        component.el,
+        getAssetPath("./assets"),
+        ({ t9nLocale, t9nStrings, lang }) => {
+          controller.exports = { ...t9nStrings, _lang: lang, _t9nLocale: t9nLocale };
+          if (typeof t9nStrings.widgetLabel === "string" && "label" in component)
+            component.label ?? (component.label = t9nStrings.widgetLabel);
+        },
+        name
+      )
+    );
+    if (blocking)
+      return controller.ready;
+    const locale = M(component.el);
+    return { _lang: locale.lang, _t9nLocale: locale.t9nLocale };
+  });
+}
+
+export { useT9n as a, useControllerManager as u };