@arcgis/map-components 5.2.0-next.8 → 5.2.0-next.85

package/dist/components/arcgis-bookmarks/index.js

@@ -7,10 +7,10 @@ import "@esri/calcite-components/components/calcite-fab";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-label";
 import "@esri/calcite-components/components/calcite-switch";
+import "@esri/calcite-components/components/calcite-table-cell";
+import "@esri/calcite-components/components/calcite-table";
 import "@esri/calcite-components/components/calcite-table-row";
 import "@esri/calcite-components/components/calcite-table-header";
-import "@esri/calcite-components/components/calcite-table";
-import "@esri/calcite-components/components/calcite-table-cell";
 import "@esri/calcite-components/components/calcite-scrim";
 import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-list-item";

package/dist/components/arcgis-building-discipline-tree/customElement.js

@@ -5,9 +5,9 @@ import { LitElement as S, nothing as V } from "@arcgis/lumina";
 import y from "@arcgis/core/core/Collection.js";
 import m from "@arcgis/core/core/Accessor.js";
 import { property as a, subclass as v } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { c as O, f as $ } from "../../chunks/building-layer-utils.js";
+import { c as O, f as $ } from "../../chunks/layer-utils2.js";
 import { watch as b, on as E } from "@arcgis/core/core/reactiveUtils.js";
-import { i as A } from "../../chunks/async-utils.js";
+import { a as A } from "../../chunks/async-utils.js";
 var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (e, t, i, l) => {
   for (var s = l > 1 ? void 0 : l ? M(t, i) : t, r = e.length - 1, o; r >= 0; r--)
     (o = e[r]) && (s = (l ? o(t, i, s) : o(s)) || s);

package/dist/components/arcgis-building-explorer/customElement.d.ts

@@ -197,8 +197,8 @@ export abstract class ArcgisBuildingExplorer extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-building-explorer component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-building-explorer component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: SceneView | undefined;
   /** Permanently destroy the component. */

package/dist/components/arcgis-building-explorer/customElement.js

@@ -9,7 +9,7 @@ import { u as G } from "../../chunks/useT9n.js";
 import { watch as M } from "@arcgis/core/core/reactiveUtils.js";
 import z from "@arcgis/core/core/Accessor.js";
 import { property as o, subclass as E } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { c as X, a as I } from "../../chunks/building-layer-utils.js";
+import { c as X, a as I } from "../../chunks/layer-utils2.js";
 import { signal as N } from "@arcgis/core/applications/Components/reactiveUtils.js";
 import { isAbortError as Z } from "@arcgis/core/core/promiseUtils.js";
 import q from "@arcgis/core/layers/support/BuildingFilter.js";

package/dist/components/arcgis-building-level-picker/customElement.js

@@ -4,7 +4,7 @@ import { repeat as b } from "lit/directives/repeat.js";
 import { css as L, html as o } from "lit";
 import { keyed as x } from "lit/directives/keyed.js";
 import { LitElement as P, createEvent as $, safeClassMap as a, nothing as h, safeStyleMap as m } from "@arcgis/lumina";
-import { l as w, a as H, b as y, c as M, d as C, e as k, f as z, g as W, h as E, i as v, j as d } from "../../chunks/constants.js";
+import { l as w, a as H, b as y, c as M, d as C, e as k, f as z, g as v, h as W, i as E, j as d } from "../../chunks/constants.js";
 import { clamp as c } from "@arcgis/toolkit/number";
 import { queryAll as O } from "lit/decorators.js";
 import { createRef as A, ref as B } from "lit/directives/ref.js";

package/dist/components/arcgis-catalog-layer-list/customElement.d.ts

@@ -252,7 +252,7 @@ export abstract class ArcgisCatalogLayerList extends LitElement {
    * catalogLayerListElement.selectionMode = "multiple";
    * ```
    */
-  accessor selectionMode: "multiple" | "single" | "none" | "single-persist";
+  accessor selectionMode: "none" | "single-persist" | "multiple" | "single";
   /**
    * Indicates whether to display a close button in the header.
    *
@@ -302,8 +302,8 @@ export abstract class ArcgisCatalogLayerList extends LitElement {
    */
   get state(): CatalogLayerListState;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-catalog-layer-list component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-catalog-layer-list component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapViewOrSceneView | null | undefined;
   /**

package/dist/components/arcgis-catalog-layer-list-next/customElement.d.ts

@@ -0,0 +1,219 @@
+/// <reference path="../../index.d.ts" />
+import type Collection from "@arcgis/core/core/Collection.js";
+import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
+import type KnowledgeGraphLayer from "@arcgis/core/layers/KnowledgeGraphLayer.js";
+import type MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
+import type TileLayer from "@arcgis/core/layers/TileLayer.js";
+import type CatalogItemCollection from "@arcgis/core/layers/list/CatalogItemCollection.js";
+import type Item from "@arcgis/core/layers/list/Item.js";
+import type { CatalogItemCollectionEvents } from "@arcgis/core/layers/list/CatalogItemCollection.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { useT9n } from "../../controllers/useT9n.js";
+import type { VisibilityAppearance } from "../../utils/action-utils.js";
+import type { setFilterPredicate } from "../../utils/layer-list-utils.js";
+import type { ArcgisTableList } from "../arcgis-table-list/customElement.js";
+import type { ArcgisReferenceElement, HeadingLevel } from "../types.js";
+import type { CatalogLayerListViewModelEvents } from "@arcgis/core/widgets/CatalogLayerList/CatalogLayerListViewModel.js";
+import type { TableListProperties } from "@arcgis/core/widgets/TableList.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
+import type { State, ItemModifier } from "@arcgis/core/layers/list/types.js";
+
+export interface CatalogLayerListEvents extends CatalogItemCollectionEvents {}
+
+/**
+ * The Catalog Layer List Next component provides a way to display a list of catalog layers and switch on/off their visibility.
+ *
+ * @since 5.2
+ * @beta
+ */
+export abstract class ArcgisCatalogLayerListNext extends LitElement {
+  /** @default false */
+  accessor autoDestroyDisabled: boolean;
+  accessor catalogItems: Collection<Item>;
+  accessor catalogLayer: CatalogLayer | null | undefined;
+  accessor catalogOptions: CatalogLayerListOptions | undefined;
+  /** @default false */
+  accessor closed: boolean;
+  /** @default false */
+  accessor collapsed: boolean;
+  /** @default "" */
+  accessor filterPlaceholder: string;
+  accessor filterPredicate: Parameters<typeof setFilterPredicate>[1] | undefined;
+  /** @default "" */
+  accessor filterText: string;
+  /** @default 2 */
+  accessor headingLevel: HeadingLevel;
+  /**
+   * This property provides the ability to show or hide the catalog layer list.
+   *
+   * @default false
+   */
+  accessor hideCatalogLayerList: boolean;
+  /**
+   * This property provides the ability to show or hide the no items to display notice when there are no filter results.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hideNoFilterResultsNotice: boolean;
+  /**
+   * This property provides the ability to show or hide the no items to display notice.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hideNoItemsNotice: boolean;
+  /**
+   * This property provides the ability to show or hide status indicators.
+   *
+   * @default false
+   */
+  accessor hideStatusIndicators: boolean;
+  accessor knowledgeGraphOptions: TableListProperties | undefined;
+  accessor label: string | undefined;
+  accessor listItemCreatedFunction: ItemModifier | null | undefined;
+  /**
+   * Specifies whether to ignore the [listMode](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#listMode) property to display all layers. A common use case for `listModeDisabled` is when you want to use the component to manage and configure a layer's `listMode` value.
+   *
+   * @default false
+   * @see [listMode](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#listMode)
+   * @since 5.2
+   */
+  accessor listModeDisabled: boolean;
+  /** Overwrite localized strings for this component */
+  accessor messageOverrides: CatalogLayerListMessageOverrides;
+  /** @internal */
+  protected messages: Partial<{
+      componentLabel: string;
+      noItemsToDisplay: string;
+      layerInvisibleAtScale: string;
+      layerInvisibleAtTime: string;
+      layerError: string;
+      untitledLayer: string;
+      layerVisibility: string;
+      showLayer: string;
+      hideLayer: string;
+      layerIncompatible: string;
+      layerIncompatibleTooltip: string;
+      temporary: string;
+      tables: string;
+      catalogLayers: string;
+  }> & T9nMeta<{
+      componentLabel: string;
+      noItemsToDisplay: string;
+      layerInvisibleAtScale: string;
+      layerInvisibleAtTime: string;
+      layerError: string;
+      untitledLayer: string;
+      layerVisibility: string;
+      showLayer: string;
+      hideLayer: string;
+      layerIncompatible: string;
+      layerIncompatibleTooltip: string;
+      temporary: string;
+      tables: string;
+      catalogLayers: string;
+  }>;
+  /** @default 10 */
+  accessor minFilterItems: number;
+  accessor onCatalogOpen: ((item: Item) => void) | undefined;
+  accessor onTablesOpen: ((item: Item) => void) | undefined;
+  get openedLayerLists(): Collection<FlowList>;
+  get openedLayers(): Collection<FlowLayer>;
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  accessor selectedItems: Collection<Item>;
+  /** @default "none" */
+  accessor selectionMode: "multiple" | "none" | "single-persist" | "single";
+  /**
+   * This property provides the ability to show or hide the close button.
+   *
+   * @default false
+   */
+  accessor showCloseButton: boolean;
+  /**
+   * This property provides the ability to show or hide the collapse button.
+   *
+   * @default false
+   */
+  accessor showCollapseButton: boolean;
+  /**
+   * This property provides the ability to show or hide error indicators.
+   *
+   * @default false
+   */
+  accessor showErrors: boolean;
+  /**
+   * This property provides the ability to show or hide the filter input.
+   *
+   * @default false
+   */
+  accessor showFilter: boolean;
+  /**
+   * This property provides the ability to show or hide the heading.
+   *
+   * @default false
+   */
+  accessor showHeading: boolean;
+  /**
+   * This property provides the ability to show or hide temporary layer indicators.
+   *
+   * @default false
+   */
+  accessor showTemporaryLayerIndicators: boolean;
+  get state(): State;
+  /** @default false */
+  accessor topLayerDisabled: boolean;
+  /**
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-catalog-layer-list-next component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapViewOrSceneView | null | undefined;
+  /** @default "default" */
+  accessor visibilityAppearance: VisibilityAppearance;
+  destroy(): Promise<void>;
+  readonly arcgisCatalogItemsChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisFilterChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisOpenedLayersChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisSelectedItemsChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, CatalogLayerListViewModelEvents["trigger-action"]>;
+  readonly "@eventTypes": {
+    arcgisCatalogItemsChange: ArcgisCatalogLayerListNext["arcgisCatalogItemsChange"]["detail"];
+    arcgisFilterChange: ArcgisCatalogLayerListNext["arcgisFilterChange"]["detail"];
+    arcgisOpenedLayersChange: ArcgisCatalogLayerListNext["arcgisOpenedLayersChange"]["detail"];
+    arcgisPropertyChange: ArcgisCatalogLayerListNext["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisCatalogLayerListNext["arcgisReady"]["detail"];
+    arcgisSelectedItemsChange: ArcgisCatalogLayerListNext["arcgisSelectedItemsChange"]["detail"];
+    arcgisTriggerAction: ArcgisCatalogLayerListNext["arcgisTriggerAction"]["detail"];
+  };
+}
+
+export type FlowLayer = CatalogLayer | SubtablesLayer;
+
+export type FlowList = ArcgisCatalogLayerListNext | ArcgisTableList;
+
+export type CatalogLayerListOptions = Partial<Pick<ArcgisCatalogLayerListNext, "filterPlaceholder" | "hideStatusIndicators" | "minFilterItems" | "selectionMode" | "showErrors" | "showFilter" | "showTemporaryLayerIndicators" | "visibilityAppearance">>
+  & {
+  listItemCreatedFunction?: CatalogItemCollection["listItemCreatedFunction"];
+};
+
+export type CatalogLayerListMessageOverrides = ReturnType<typeof useT9n<{
+    componentLabel: string;
+    noItemsToDisplay: string;
+    layerInvisibleAtScale: string;
+    layerInvisibleAtTime: string;
+    layerError: string;
+    untitledLayer: string;
+    layerVisibility: string;
+    showLayer: string;
+    hideLayer: string;
+    layerIncompatible: string;
+    layerIncompatibleTooltip: string;
+    temporary: string;
+    tables: string;
+    catalogLayers: string;
+}>>["_overrides"];
+
+export type SubtablesLayer = KnowledgeGraphLayer | MapImageLayer | TileLayer;

package/dist/components/arcgis-catalog-layer-list-next/customElement.js

@@ -0,0 +1,261 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as O } from "../../chunks/runtime.js";
+import { html as n } from "lit";
+import { repeat as A } from "lit/directives/repeat.js";
+import { keyed as I } from "lit/directives/keyed.js";
+import { createReactiveMap as C } from "@arcgis/core/applications/Components/featureUtils.js";
+import u from "@arcgis/core/core/Collection.js";
+import { on as L, watch as R } from "@arcgis/core/core/reactiveUtils.js";
+import N from "@arcgis/core/layers/list/CatalogItemCollection.js";
+import x from "@arcgis/core/layers/list/Item.js";
+import { LitElement as D, createEvent as d, renderElement as M, safeClassMap as b, nothing as _ } from "@arcgis/lumina";
+import { usePropertyChange as k } from "@arcgis/lumina/controllers";
+import { reEmitEvent as B } from "@arcgis/lumina/controllers/accessor";
+import { classes as S } from "@arcgis/toolkit/dom";
+import { generateGuid as G } from "@arcgis/toolkit/string";
+import { createRef as H, ref as g } from "lit/directives/ref.js";
+import { u as U } from "../../chunks/useT9n.js";
+import { m as V } from "../../chunks/useViewModel.js";
+import { s as v } from "../../chunks/component-utils.js";
+import { g as f } from "../../chunks/globalCss.js";
+import { g as T, b as j, r as q, s as z, e as J } from "../../chunks/layer-list-utils.js";
+import { A as K } from "../../chunks/layer-list-item.js";
+import { s as Q, a as W } from "../../chunks/layer-list-next.js";
+import { c as X } from "../../chunks/css.js";
+const m = X, Y = (p) => {
+  const e = p?.type;
+  return e === "knowledge-graph" || e === "map-image" || e === "tile";
+}, Z = (p) => p?.type === "catalog", P = "nested", ee = u.ofType(x), te = V(N);
+class se extends D {
+  constructor() {
+    super(...arguments), this.#l = `operational-${G()}`, this.#e = null, this.#o = H(), this.#i = !1, this.#t = !1, this.messages = U(), this.#r = () => {
+      this._activeItem = null;
+    }, this.#n = (e) => {
+      if (this.visibilityAppearance !== "default")
+        return;
+      const t = Array.from(e.composedPath()).find((s) => s.classList?.contains(m.item));
+      this._activeItem = T(t);
+    }, this.#a = C(), this.#s = C(), this.#c = (e) => {
+      e && this.#b(e);
+    }, this.#h = (e) => {
+      e && this.#L(e);
+    }, this.#d = (e) => {
+      e && this.#v(e);
+    }, this.viewModel = te(this), this._activeItem = null, this._focusRootFlowItem = !1, this._focusPanelFlowItem = !1, this._focusLayerFlowItem = null, this.layerTablesEnabled = new u(["knowledge-graph"]), this.mapImageOptions = null, this.tileOptions = null, this.view = this.viewModel.view, this.hideCatalogLayerList = !1, this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.hideNoFilterResultsNotice = !1, this.hideNoItemsNotice = !1, this.showFilter = !1, this.showHeading = !1, this.hideStatusIndicators = !1, this.showTemporaryLayerIndicators = !1, this.closed = !1, this.topLayerDisabled = !1, this.autoDestroyDisabled = !1, this.state = this.viewModel.state, this.openedLayers = new u(), this.openedLayerLists = new u(), this.collapsed = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.minFilterItems = j, this.selectedItems = new ee(), this.selectionMode = "none", this.visibilityAppearance = "default", this.arcgisPropertyChange = k()("state"), this.arcgisReady = d(), this.arcgisCatalogItemsChange = d(), this.arcgisFilterChange = d(), this.arcgisSelectedItemsChange = d(), this.arcgisOpenedLayersChange = d(), this.arcgisTriggerAction = B(() => this.viewModel, "trigger-action");
+  }
+  static {
+    this.properties = { _catalogLayerList: 16, _activeItem: 16, _focusRootFlowItem: 16, _focusPanelFlowItem: 16, _focusLayerFlowItem: 16, _totalItems: 16, _filterEnabled: 16, _visibleItems: 16, _openedPanelItems: 16, _renderedOpenLayerFlowItems: 16, layerTablesEnabled: 16, mapImageOptions: 16, tileOptions: 16, view: 0, hideCatalogLayerList: 5, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, hideNoFilterResultsNotice: 5, hideNoItemsNotice: 5, showFilter: 5, showHeading: 5, hideStatusIndicators: 5, showTemporaryLayerIndicators: 5, closed: 5, topLayerDisabled: 5, autoDestroyDisabled: 5, referenceElement: 1, state: 32, openedLayers: 32, openedLayerLists: 32, catalogItems: 0, catalogLayer: 0, catalogOptions: 0, collapsed: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, knowledgeGraphOptions: 0, label: 1, listItemCreatedFunction: 0, listModeDisabled: 5, minFilterItems: 9, selectedItems: 0, selectionMode: 1, visibilityAppearance: 1, messageOverrides: 0, onCatalogOpen: 0, onTablesOpen: 0 };
+  }
+  static {
+    this.styles = [Q, W];
+  }
+  #l;
+  #e;
+  #o;
+  #i;
+  #t;
+  #r;
+  #n;
+  #a;
+  #s;
+  #c;
+  #h;
+  #d;
+  get _totalItems() {
+    return this.catalogItems?.flatten((e) => e.children.filter((t) => t.layer?.type !== "catalog-dynamic-group")).length ?? 0;
+  }
+  get _filterEnabled() {
+    return this._totalItems >= this.minFilterItems && this.showFilter;
+  }
+  get _visibleItems() {
+    return this.catalogItems?.filter((e) => !e.hidden && (this.showErrors || !e.error));
+  }
+  get _openedPanelItems() {
+    return this._visibleItems.flatten((e) => e.children).filter(({ hidden: e, panel: t }) => !e && t?.open && !t.disabled && t.flowEnabled);
+  }
+  get _renderedOpenLayerFlowItems() {
+    const { openedLayers: e } = this;
+    return e.toArray().map((t, s) => this.#N(t, s === e.length - 1));
+  }
+  get catalogItems() {
+    return this.viewModel.catalogItems;
+  }
+  set catalogItems(e) {
+    this.viewModel.catalogItems = e;
+  }
+  get catalogLayer() {
+    return this.viewModel.catalogLayer;
+  }
+  set catalogLayer(e) {
+    this.viewModel.catalogLayer = e;
+  }
+  async destroy() {
+    this.#i || this.#t || (this.#i = !0, this.#e?.abort(), this.#e = null, await this.manager.destroy(), this.openedLayerLists.removeAll(), this.openedLayers.removeAll(), this.#s.clear(), this.#a.clear(), this.#t = !0, this.#i = !1);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      L(() => this.openedLayers, "change", () => {
+        this.#w();
+      }),
+      L(() => this.viewModel.catalogItems, "change", () => {
+        q(this.selectedItems), this.arcgisCatalogItemsChange.emit();
+      }),
+      L(() => this.selectedItems, "change", () => this.arcgisSelectedItemsChange.emit()),
+      R(() => [this.filterPredicate, this.#o.value], () => z(this.#o.value, this.filterPredicate))
+    ]);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#e?.abort(), this.#e = null, !this.autoDestroyDisabled && !this.#t && !this.#i && this.destroy();
+  }
+  #u(e, t) {
+    return this.viewModel.triggerAction(e, t);
+  }
+  async #y(e, t) {
+    const s = this.#s.get(e);
+    if (s)
+      return s;
+    const a = e.type === "catalog" ? await this.#$(e) : await this.#C(e);
+    return t.aborted || !this.isConnected || this.#t ? (a?.destroy?.(), a) : (t.aborted || this.#s.set(e, a), a);
+  }
+  async #w() {
+    if (!this.isConnected || this.#t)
+      return;
+    const { openedLayers: e, openedLayerLists: t } = this;
+    this.#e?.abort();
+    const s = new AbortController(), { signal: a } = s;
+    this.#e = s, this.#s.forEach((r, c) => {
+      e.includes(c) || (r?.destroy?.(), this.#s.delete(c));
+    });
+    const o = await Promise.all(e.map((r) => this.#y(r, a)));
+    if (a.aborted || !this.isConnected || this.#t)
+      return;
+    t.removeAll(), t.addMany(o);
+    const i = t.at(-1), l = i && "catalogLayer" in i ? i : void 0;
+    this._catalogLayerList !== l && (this._catalogLayerList = l), this.arcgisOpenedLayersChange.emit();
+  }
+  #I(e) {
+    e.open = !1, this._focusRootFlowItem = !0;
+  }
+  #L(e) {
+    this._focusRootFlowItem && (this._focusRootFlowItem = !1, v(e));
+  }
+  #b(e) {
+    this._focusPanelFlowItem && (this._focusPanelFlowItem = !1, v(e));
+  }
+  #v(e) {
+    this._focusLayerFlowItem === e.dataset.layerUid && (this._focusLayerFlowItem = null, v(e));
+  }
+  async #$(e) {
+    const { headingLevel: t, catalogOptions: s, view: a, referenceElement: o, filterPlaceholder: i, listItemCreatedFunction: l, minFilterItems: r, selectionMode: c, visibilityAppearance: h } = this;
+    return M(n`<arcgis-catalog-layer-list-next .headingLevel=${t} .filterPlaceholder=${s?.filterPlaceholder ?? i} .listItemCreatedFunction=${s?.listItemCreatedFunction ?? l} .minFilterItems=${s?.minFilterItems ?? r} .selectionMode=${s?.selectionMode ?? c} .visibilityAppearance=${s?.visibilityAppearance ?? h} .showErrors=${s?.showErrors ?? this.showErrors} .showFilter=${s?.showFilter ?? this.showFilter} .hideStatusIndicators=${s?.hideStatusIndicators ?? this.hideStatusIndicators} .showTemporaryLayerIndicators=${s?.showTemporaryLayerIndicators ?? this.showTemporaryLayerIndicators} .messageOverrides=${this.messageOverrides} @arcgisReady=${(y) => y.stopPropagation()} .catalogLayer=${e} .view=${a} .referenceElement=${o} @catalogOpen=${this.#p} @tablesOpen=${this.#m}></arcgis-catalog-layer-list-next>`);
+  }
+  #F(e) {
+    switch (e.type) {
+      case "knowledge-graph":
+        return { ...this.knowledgeGraphOptions, tables: e.tables };
+      case "map-image":
+        return {
+          ...this.mapImageOptions,
+          tables: e.subtables
+        };
+      case "tile":
+        return {
+          ...this.tileOptions,
+          tables: e.subtables
+        };
+      default:
+        return null;
+    }
+  }
+  async #C(e) {
+    const { headingLevel: t, selectionMode: s, referenceElement: a, view: o } = this, i = this.#F(e);
+    return M(n`<arcgis-table-list-next .headingLevel=${i?.headingLevel ?? t} .selectionMode=${i?.selectionMode ?? s} .collapsed=${i?.collapsed} .filterPlaceholder=${i?.filterPlaceholder} .filterText=${i?.filterText} .label=${i?.label} .tables=${i?.tables} .view=${o} .referenceElement=${a} @arcgisReady=${(l) => l.stopPropagation()}></arcgis-table-list-next>`);
+  }
+  #m(e) {
+    if (this.onTablesOpen) {
+      this.onTablesOpen(e);
+      return;
+    }
+    const t = e.layer;
+    Y(t) && (this.openedLayers.push(t), this._focusLayerFlowItem = t.uid);
+  }
+  #p(e) {
+    if (this.onCatalogOpen) {
+      this.onCatalogOpen(e);
+      return;
+    }
+    const t = e.layer?.parent;
+    Z(t) && (this.openedLayers.push(t), this._focusLayerFlowItem = e.layer?.uid);
+  }
+  #M(e, t) {
+    t ? this.#a.set(e, t) : this.#a.delete(e);
+  }
+  #_(e, t) {
+    this.#u(e, t);
+  }
+  #T(e) {
+    const { selectionMode: t, selectedItems: s } = this;
+    if (t === "none")
+      return;
+    const a = e.target.selectedItems.map((o) => T(o)).filter(Boolean);
+    s.removeAll(), s.addMany(a);
+  }
+  render() {
+    const { state: e } = this, t = {
+      [f.hidden]: e === "loading",
+      [f.disabled]: e === "disabled"
+    };
+    return n`<div class=${b(S(f.widget, f.panel, t))}>${this._visibleItems?.length ? this.#E() : null}${this.#R()}</div>`;
+  }
+  #P(e) {
+    const t = this.#a, s = this.messages;
+    return e?.layer ? n`<calcite-tooltip overlay-positioning=fixed .referenceElement=${t.get(e.layer.uid)} .topLayerDisabled=${this.topLayerDisabled}>${s.layerIncompatibleTooltip}</calcite-tooltip>` : null;
+  }
+  #g(e) {
+    return e.incompatible ? this.#P(e) : e.children?.filter((t) => !t.hidden).toArray().map((t) => this.#g(t));
+  }
+  #E() {
+    return this._visibleItems?.toArray().map((e) => this.#g(e));
+  }
+  #f() {
+    return n`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
+  }
+  #O() {
+    return this.hideNoItemsNotice ? null : n`<div class=${b(m.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this.#f()}</calcite-notice></div>`;
+  }
+  #A() {
+    const { _openedPanelItems: e, openedLayers: t } = this;
+    return A(e.toArray(), ({ uid: s }) => s, (s, a) => {
+      const { uid: o, title: i, panel: l } = s, r = () => this.#I(l);
+      return n`<calcite-flow-item .description=${i} .heading=${l.title} .headingLevel=${this.headingLevel} .selected=${!t.length && a === e.length - 1} @calciteFlowItemBack=${(c) => {
+        c.preventDefault(), r();
+      }} ${g(this.#c)}><arcgis-layer-list-item-panel .item=${s} .view=${this.view}></arcgis-layer-list-item-panel><calcite-button appearance=transparent slot=footer-actions width=full @click=${r}>Back</calcite-button></calcite-flow-item>`;
+    });
+  }
+  #R() {
+    const { collapsed: e, _visibleItems: t, _filterEnabled: s, showCloseButton: a, showCollapseButton: o, showHeading: i, selectionMode: l, filterText: r, filterPlaceholder: c, openedLayers: h, _openedPanelItems: y } = this, $ = this.#l, F = this.label ?? this.messages.componentLabel ?? "", E = [
+      n`<calcite-flow-item .closable=${a} .closed=${this.closed} .collapsed=${e} .collapsible=${o} .heading=${i ? F : void 0} .headingLevel=${this.headingLevel} .selected=${!h.length && !y.length} @calciteFlowItemClose=${() => this.closed = !0} ${g(this.#h)}>${t?.length ? n`<calcite-list data-layer-type=${$ ?? _} .displayMode=${P} .filterEnabled=${s} .filterPlaceholder=${c} .filterProps=${J} .filterText=${s ? r : ""} .group=${$} .label=${F} @focusin=${this.#n} @focusout=${this.#r} selection-appearance=border .selectionMode=${l} @calciteListChange=${this.#T} @calciteListFilter=${(w) => {
+        this.filterText = w.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
+      }} @mouseleave=${this.#r} @mouseover=${this.#n} ${g(this.#o)}>${t.toArray().map((w) => this.#x(w))}${s && !this.hideNoFilterResultsNotice ? n`<div class=${b(m.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this.#f()}</calcite-notice></div>` : null}</calcite-list>` : this.#O()}</calcite-flow-item>`,
+      this.#A(),
+      this._renderedOpenLayerFlowItems
+    ];
+    return this.closed ? null : I("root-flow", n`<calcite-flow>${E}</calcite-flow>`);
+  }
+  #N(e, t) {
+    const { openedLayers: s } = this, a = e.title || this.messages.untitledLayer;
+    return I(e.uid, n`<calcite-flow-item data-layer-uid=${e.uid ?? _} .description=${a} .heading=${this.messages[e.type === "catalog" ? "catalogLayers" : "tables"]} .headingLevel=${this.headingLevel} .selected=${t} @calciteFlowItemBack=${(o) => {
+      o.preventDefault(), s.pop();
+      const i = s.at(-1);
+      i ? this._focusLayerFlowItem = i.uid : this._focusRootFlowItem = !0;
+    }} ${g(this.#d)}>${this.#s.get(e)}</calcite-flow-item>`);
+  }
+  #x(e, t, s) {
+    const { hideStatusIndicators: a, showCloseButton: o, showCollapseButton: i, showErrors: l, showFilter: r, showHeading: c, showTemporaryLayerIndicators: h } = this;
+    return I(e.uid, K({ activeItem: this._activeItem ?? void 0, css: { ...m, itemCatalogIcon: m.itemActionIcon }, displayMode: P, dragEnabled: !1, item: e, layerTablesEnabled: this.layerTablesEnabled, listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, parent: t, parentTitles: s, rootGroupUid: this.#l, selectedItems: this.selectedItems, selectionMode: this.selectionMode, visibilityAppearance: this.visibilityAppearance, hideStatusIndicators: a, showCloseButton: o, showCollapseButton: i, showErrors: l, showFilter: r, showHeading: c, showTemporaryLayerIndicators: h, handleAction: this.#_.bind(this), handleCatalogOpen: this.#p.bind(this), handleTablesOpen: this.#m.bind(this), handleTooltipReferenceChange: this.#M.bind(this), view: this.view }));
+  }
+}
+O("arcgis-catalog-layer-list-next", se);
+export {
+  se as ArcgisCatalogLayerListNext
+};

package/dist/components/arcgis-catalog-layer-list-next/index.js

@@ -0,0 +1,10 @@
+import ".//index.js";
+import "../arcgis-table-list-next/index.js";
+import "@esri/calcite-components/components/calcite-tooltip";
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "../arcgis-layer-list-item-panel/index.js";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-flow";
+export * from "./customElement.js";

package/dist/components/arcgis-catalog-layer-list-next/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * * Describes the current state of the list items in the [CatalogLayerListViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/CatalogLayerList/CatalogLayerListViewModel/).
+ *
+ * @since 5.2
+ */
+export type CatalogLayerListState = "disabled" | "loading" | "ready";

package/dist/components/arcgis-clipboard/customElement.d.ts

@@ -44,8 +44,8 @@ export abstract class ArcgisClipboard extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-clipboard component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-clipboard component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | SceneView | undefined;
   /** Emitted when the component associated with a map or scene view is ready to be interacted with. */

package/dist/components/arcgis-compass/customElement.d.ts

@@ -81,8 +81,8 @@ export abstract class ArcgisCompass extends LitElement {
    */
   get state(): CompassState;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-compass component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-compass component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | SceneView | undefined;
   /**