@arcgis/map-components 5.2.0-next.3 → 5.2.0-next.31

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-catalog-layer-list-next/customElement.d.ts

@@ -0,0 +1,187 @@
+/// <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 ListItem from "@arcgis/core/widgets/LayerList/ListItem.js";
+import type { CatalogLayerListProperties } from "@arcgis/core/widgets/CatalogLayerList.js";
+import type { CatalogLayerListViewModelEvents } from "@arcgis/core/widgets/CatalogLayerList/CatalogLayerListViewModel.js";
+import type { TableListProperties } from "@arcgis/core/widgets/TableList.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+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 { T9nMeta } from "@arcgis/lumina/controllers";
+import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
+import type { CatalogLayerListState } from "@arcgis/core/widgets/CatalogLayerList/types.js";
+import type { ListItemModifier } from "@arcgis/core/widgets/LayerList/types.js";
+
+export interface CatalogLayerListEvents extends CatalogLayerListViewModelEvents {}
+
+/**
+ * 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<ListItem>;
+  accessor catalogLayer: CatalogLayer | null | undefined;
+  accessor catalogOptions: CatalogLayerListProperties | 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 status indicators.
+   *
+   * @default false
+   */
+  accessor hideStatusIndicators: boolean;
+  accessor knowledgeGraphOptions: TableListProperties | undefined;
+  accessor label: string | undefined;
+  accessor listItemCreatedFunction: ListItemModifier | null | undefined;
+  /** Overwrite localized strings for this component */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      noItemsToDisplay?: string | undefined;
+      layerInvisibleAtScale?: string | undefined;
+      layerInvisibleAtTime?: string | undefined;
+      layerError?: string | undefined;
+      untitledLayer?: string | undefined;
+      layerVisibility?: string | undefined;
+      showLayer?: string | undefined;
+      hideLayer?: string | undefined;
+      layerIncompatible?: string | undefined;
+      layerIncompatibleTooltip?: string | undefined;
+      temporary?: string | undefined;
+      tables?: string | undefined;
+      catalogLayers?: string | undefined;
+  };
+  /** @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: ListItem) => void) | undefined;
+  accessor onTablesOpen: ((item: ListItem) => void) | undefined;
+  get openedLayerLists(): Collection<FlowList>;
+  get openedLayers(): Collection<FlowLayer>;
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  accessor selectedItems: Collection<ListItem>;
+  /** @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(): CatalogLayerListState;
+  /** @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 "@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"];
+  };
+}
+
+export type FlowLayer = CatalogLayer | SubtablesLayer;
+
+export type FlowList = ArcgisCatalogLayerListNext | ArcgisTableList;
+
+export type SubtablesLayer = KnowledgeGraphLayer | MapImageLayer | TileLayer;

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

@@ -0,0 +1,250 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as O } from "../../chunks/runtime.js";
+import { html as r } from "lit";
+import { repeat as R } from "lit/directives/repeat.js";
+import { keyed as I } from "lit/directives/keyed.js";
+import { createReactiveMap as $ } from "@arcgis/core/applications/Components/featureUtils.js";
+import y from "@arcgis/core/core/Collection.js";
+import { on as L, watch as E } from "@arcgis/core/core/reactiveUtils.js";
+import k from "@arcgis/core/widgets/CatalogLayerList/CatalogLayerListViewModel.js";
+import x from "@arcgis/core/widgets/LayerList/ListItem.js";
+import { createRef as D, ref as g } from "lit/directives/ref.js";
+import { LitElement as N, createEvent as h, renderElement as C, safeClassMap as w, nothing as F } from "@arcgis/lumina";
+import { usePropertyChange as B } from "@arcgis/lumina/controllers";
+import { classes as S } from "@arcgis/toolkit/dom";
+import { generateGuid as G } from "@arcgis/toolkit/string";
+import { u as U } from "../../chunks/useT9n.js";
+import { m as H } from "../../chunks/useViewModel.js";
+import { s as b } from "../../chunks/component-utils.js";
+import { g as f } from "../../chunks/globalCss.js";
+import { g as M, b as V, r as j, s as q, e as z } from "../../chunks/layer-list-utils.js";
+import { ArcgisLayerListItem as J } from "../arcgis-layer-list-next/layer-list-item/customElement.js";
+import { s as K, a as Q } from "../../chunks/layer-list-next.js";
+import { c as W } from "../../chunks/css.js";
+const m = W, X = (p) => {
+  const e = p?.type;
+  return e === "knowledge-graph" || e === "map-image" || e === "tile";
+}, Y = (p) => p?.type === "catalog", T = "nested", Z = y.ofType(x), ee = H(k);
+class te extends N {
+  constructor() {
+    super(...arguments), this._rootGroupUid = `operational-${G()}`, this._openedLayersController = null, this._rootListRef = D(), this._destroying = !1, this._destroyed = !1, this.messages = U(), this._clearActiveItem = () => {
+      this._activeItem = null;
+    }, this._setActiveItem = (e) => {
+      if (this.visibilityAppearance !== "default")
+        return;
+      const t = Array.from(e.composedPath()).find((s) => s.classList?.contains(m.item));
+      this._activeItem = M(t);
+    }, this._tooltipReferenceMap = $(), this._layerListMap = $(), this._setPanelFlowItemRef = (e) => {
+      e && this._focusPanelFlowItemNode(e);
+    }, this._setRootFlowItemRef = (e) => {
+      e && this._focusRootFlowItemNode(e);
+    }, this._setLayerFlowItemRef = (e) => {
+      e && this._focusLayerFlowItemNode(e);
+    }, this.viewModel = ee(this), this._activeItem = null, this._focusRootFlowItem = !1, this._focusPanelFlowItem = !1, this._focusLayerFlowItem = null, this.layerTablesEnabled = new y(["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.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 y(), this.openedLayerLists = new y(), this.collapsed = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.minFilterItems = V, this.selectedItems = new Z(), this.selectionMode = "none", this.visibilityAppearance = "default", this.arcgisPropertyChange = B()("state"), this.arcgisReady = h(), this.arcgisCatalogItemsChange = h(), this.arcgisFilterChange = h(), this.arcgisSelectedItemsChange = h(), this.arcgisOpenedLayersChange = h();
+  }
+  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, 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, minFilterItems: 9, selectedItems: 0, selectionMode: 1, visibilityAppearance: 1, messageOverrides: 0, onCatalogOpen: 0, onTablesOpen: 0 };
+  }
+  static {
+    this.styles = [K, Q];
+  }
+  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._renderLayerFlowItem(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._destroying || this._destroyed || (this._destroying = !0, this._openedLayersController?.abort(), this._openedLayersController = null, await this.manager.destroy(), this.openedLayerLists.removeAll(), this.openedLayers.removeAll(), this._layerListMap.clear(), this._tooltipReferenceMap.clear(), this._destroyed = !0, this._destroying = !1);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      L(() => this.openedLayers, "change", () => {
+        this._handleOpenedLayersChange();
+      }),
+      L(() => this.viewModel.catalogItems, "change", () => {
+        j(this.selectedItems), this.arcgisCatalogItemsChange.emit();
+      }),
+      L(() => this.selectedItems, "change", () => this.arcgisSelectedItemsChange.emit()),
+      E(() => [this.filterPredicate, this._rootListRef.value], () => q(this._rootListRef.value, this.filterPredicate))
+    ]);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._openedLayersController?.abort(), this._openedLayersController = null, !this.autoDestroyDisabled && !this._destroyed && !this._destroying && this.destroy();
+  }
+  loadDependencies() {
+  }
+  triggerAction(e, t) {
+    return this.viewModel.triggerAction(e, t);
+  }
+  async _createFlowList(e, t) {
+    const { _layerListMap: s } = this, i = s.get(e);
+    if (i)
+      return i;
+    const o = e.type === "catalog" ? await this._createCatalogLayerList(e) : await this._createTableList(e);
+    return t.aborted || !this.isConnected || this._destroyed ? (o?.destroy?.(), o) : (t.aborted || s.set(e, o), o);
+  }
+  async _handleOpenedLayersChange() {
+    if (!this.isConnected || this._destroyed)
+      return;
+    const { _layerListMap: e, openedLayers: t, openedLayerLists: s } = this;
+    this._openedLayersController?.abort();
+    const i = new AbortController(), { signal: o } = i;
+    this._openedLayersController = i, e.forEach((c, d) => {
+      t.includes(d) || (c?.destroy?.(), e.delete(d));
+    });
+    const a = await Promise.all(t.map((c) => this._createFlowList(c, o)));
+    if (o.aborted || !this.isConnected || this._destroyed)
+      return;
+    s.removeAll(), s.addMany(a);
+    const l = s.at(-1), n = l && "catalogLayer" in l ? l : void 0;
+    this._catalogLayerList !== n && (this._catalogLayerList = n), this.arcgisOpenedLayersChange.emit();
+  }
+  _handlePanelFlowItemBack(e) {
+    e.open = !1, this._focusRootFlowItem = !0;
+  }
+  _focusRootFlowItemNode(e) {
+    this._focusRootFlowItem && (this._focusRootFlowItem = !1, b(e));
+  }
+  _focusPanelFlowItemNode(e) {
+    this._focusPanelFlowItem && (this._focusPanelFlowItem = !1, b(e));
+  }
+  _focusLayerFlowItemNode(e) {
+    this._focusLayerFlowItem === e.dataset.layerUid && (this._focusLayerFlowItem = null, b(e));
+  }
+  async _createCatalogLayerList(e) {
+    const { headingLevel: t, catalogOptions: s, view: i, referenceElement: o, filterPlaceholder: a, listItemCreatedFunction: l, minFilterItems: n, selectionMode: c, visibilityAppearance: d } = this;
+    return C(r`<arcgis-catalog-layer-list-next .headingLevel=${t} .filterPlaceholder=${s?.filterPlaceholder ?? a} .listItemCreatedFunction=${s?.listItemCreatedFunction ?? l} .minFilterItems=${s?.minFilterItems ?? n} .selectionMode=${s?.selectionMode ?? c} .visibilityAppearance=${s?.visibilityAppearance ?? d} .showErrors=${s?.visibleElements?.errors ?? this.showErrors} .showFilter=${s?.visibleElements?.filter ?? this.showFilter} .hideStatusIndicators=${s?.visibleElements?.statusIndicators ?? this.hideStatusIndicators} .showTemporaryLayerIndicators=${s?.visibleElements?.temporaryLayerIndicators ?? this.showTemporaryLayerIndicators} @arcgisReady=${(u) => u.stopPropagation()} .catalogLayer=${e} .view=${i} .referenceElement=${o} @catalogOpen=${this._onCatalogOpen} @tablesOpen=${this._onTablesOpen}></arcgis-catalog-layer-list-next>`);
+  }
+  _getTableListParams(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 _createTableList(e) {
+    const { headingLevel: t, selectionMode: s, referenceElement: i, view: o } = this, a = this._getTableListParams(e);
+    return C(r`<arcgis-table-list .headingLevel=${a?.headingLevel ?? t} .selectionMode=${a?.selectionMode ?? s} .collapsed=${a?.collapsed} .filterPlaceholder=${a?.filterPlaceholder} .filterText=${a?.filterText} .label=${a?.label} .tables=${a?.tables} .view=${o} .referenceElement=${i} @arcgisReady=${(l) => l.stopPropagation()}></arcgis-table-list>`);
+  }
+  _onTablesOpen(e) {
+    if (this.onTablesOpen) {
+      this.onTablesOpen(e);
+      return;
+    }
+    const t = e.layer;
+    X(t) && (this.openedLayers.push(t), this._focusLayerFlowItem = t.uid);
+  }
+  _onCatalogOpen(e) {
+    if (this.onCatalogOpen) {
+      this.onCatalogOpen(e);
+      return;
+    }
+    const t = e.layer?.parent;
+    Y(t) && (this.openedLayers.push(t), this._focusLayerFlowItem = e.layer?.uid);
+  }
+  _onTooltipReferenceChange(e, t) {
+    t ? this._tooltipReferenceMap.set(e, t) : this._tooltipReferenceMap.delete(e);
+  }
+  _onTriggerAction(e, t) {
+    this.triggerAction(e, t);
+  }
+  _handleCalciteListChange(e) {
+    const { selectionMode: t, selectedItems: s } = this;
+    if (t === "none")
+      return;
+    const i = e.target.selectedItems.map((o) => M(o)).filter(Boolean);
+    s.removeAll(), s.addMany(i);
+  }
+  render() {
+    const { state: e } = this, t = {
+      [f.hidden]: e === "loading",
+      [f.disabled]: e === "disabled"
+    };
+    return r`<div class=${w(S(f.widget, f.panel, t))}>${this._visibleItems?.length ? this._renderItemTooltips() : null}${this._renderItems()}</div>`;
+  }
+  _renderItemTooltip(e) {
+    const { _tooltipReferenceMap: t, messages: s } = this;
+    return e?.layer ? r`<calcite-tooltip overlay-positioning=fixed .referenceElement=${t.get(e.layer.uid)} .topLayerDisabled=${this.topLayerDisabled}>${s.layerIncompatibleTooltip}</calcite-tooltip>` : null;
+  }
+  _renderItemTooltipNodes(e) {
+    return e.incompatible ? this._renderItemTooltip(e) : e.children?.filter((t) => !t.hidden).toArray().map((t) => this._renderItemTooltipNodes(t));
+  }
+  _renderItemTooltips() {
+    return this._visibleItems?.toArray().map((e) => this._renderItemTooltipNodes(e));
+  }
+  _renderNoItemsMessage() {
+    return r`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
+  }
+  _renderNoItems() {
+    return r`<div class=${w(m.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>`;
+  }
+  _renderPanelFlowItems() {
+    const { _openedPanelItems: e, openedLayers: t } = this;
+    return R(e.toArray(), ({ uid: s }) => s, (s, i) => {
+      const { uid: o, title: a, panel: l } = s, n = () => this._handlePanelFlowItemBack(l);
+      return r`<calcite-flow-item .description=${a} .heading=${l.title} .headingLevel=${this.headingLevel} .selected=${!t.length && i === e.length - 1} @calciteFlowItemBack=${(c) => {
+        c.preventDefault(), n();
+      }} ${g(this._setPanelFlowItemRef)}><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=${n}>Back</calcite-button></calcite-flow-item>`;
+    });
+  }
+  _renderItems() {
+    const { collapsed: e, _visibleItems: t, _filterEnabled: s, _rootGroupUid: i, showCloseButton: o, showCollapseButton: a, showHeading: l, selectionMode: n, filterText: c, filterPlaceholder: d, openedLayers: u, _openedPanelItems: P } = this, v = this.label ?? this.messages.componentLabel ?? "", A = [
+      r`<calcite-flow-item .closable=${o} .closed=${this.closed} .collapsed=${e} .collapsible=${a} .heading=${l ? v : void 0} .headingLevel=${this.headingLevel} .selected=${!u.length && !P.length} @calciteFlowItemClose=${() => this.closed = !0} ${g(this._setRootFlowItemRef)}>${t?.length ? r`<calcite-list data-layer-type=${i ?? F} .displayMode=${T} .filterEnabled=${s} .filterPlaceholder=${d} .filterProps=${z} .filterText=${s ? c : ""} .group=${i} .label=${v} @focusin=${this._setActiveItem} @focusout=${this._clearActiveItem} selection-appearance=border .selectionMode=${n} @calciteListChange=${this._handleCalciteListChange} @calciteListFilter=${(_) => {
+        this.filterText = _.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
+      }} @mouseleave=${this._clearActiveItem} @mouseover=${this._setActiveItem} ${g(this._rootListRef)}>${t.toArray().map((_) => this._renderItem(_))}${s ? r`<div class=${w(m.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>` : null}</calcite-list>` : this._renderNoItems()}</calcite-flow-item>`,
+      this._renderPanelFlowItems(),
+      this._renderedOpenLayerFlowItems
+    ];
+    return this.closed ? null : I("root-flow", r`<calcite-flow>${A}</calcite-flow>`);
+  }
+  _renderLayerFlowItem(e, t) {
+    const { messages: s, openedLayers: i } = this, o = e.title || this.messages.untitledLayer;
+    return I(e.uid, r`<calcite-flow-item data-layer-uid=${e.uid ?? F} .description=${o} .heading=${s[e.type === "catalog" ? "catalogLayers" : "tables"]} .headingLevel=${this.headingLevel} .selected=${t} @calciteFlowItemBack=${(a) => {
+      a.preventDefault(), i.pop();
+      const l = i.at(-1);
+      l ? this._focusLayerFlowItem = l.uid : this._focusRootFlowItem = !0;
+    }} ${g(this._setLayerFlowItemRef)}>${this._layerListMap.get(e)}</calcite-flow-item>`);
+  }
+  _renderItem(e, t, s) {
+    const { hideStatusIndicators: i, showCloseButton: o, showCollapseButton: a, showErrors: l, showFilter: n, showHeading: c, showTemporaryLayerIndicators: d } = this;
+    return I(e.uid, J({ activeItem: this._activeItem ?? void 0, css: { ...m, itemCatalogIcon: m.itemActionIcon }, displayMode: T, dragEnabled: !1, item: e, layerTablesEnabled: this.layerTablesEnabled, listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, parent: t, parentTitles: s, rootGroupUid: this._rootGroupUid, selectedItems: this.selectedItems, selectionMode: this.selectionMode, visibilityAppearance: this.visibilityAppearance, hideStatusIndicators: i, showCloseButton: o, showCollapseButton: a, showErrors: l, showFilter: n, showHeading: c, showTemporaryLayerIndicators: d, handleAction: this._onTriggerAction, handleCatalogOpen: this._onCatalogOpen, handleTablesOpen: this._onTablesOpen, handleTooltipReferenceChange: this._onTooltipReferenceChange, view: this.view }));
+  }
+}
+O("arcgis-catalog-layer-list-next", te);
+export {
+  te as ArcgisCatalogLayerListNext
+};

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

@@ -0,0 +1,10 @@
+import ".//index.js";
+import "../arcgis-table-list/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";