@arcgis/map-components 5.2.0-next.95 → 5.2.0-next.97

package/dist/components/arcgis-selection-list/customElement.js

@@ -0,0 +1,279 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as y } from "../../chunks/runtime.js";
+import { css as w, html as s } from "lit";
+import { keyed as n } from "lit/directives/keyed.js";
+import { ref as x } from "lit/directives/ref.js";
+import { substitute as v, formatNumber as g } from "@arcgis/core/intl.js";
+import { isGroupLayerItem as b, isLayerItem as I, isFeatureItem as C } from "@arcgis/core/widgets/support/SelectionList/selectionListUtils.js";
+import L from "@arcgis/core/widgets/support/SelectionList/SelectionListViewModel.js";
+import { LitElement as M, createEvent as F, nothing as u, safeClassMap as r } from "@arcgis/lumina";
+import { usePropertyChange as S } from "@arcgis/lumina/controllers";
+import { u as T } from "../../chunks/useT9n.js";
+import { m as k } from "../../chunks/useViewModel.js";
+const c = {
+  container: "container",
+  flowItem: "flow-item",
+  layerDropdown: "layer-dropdown",
+  listItemFeature: "feature",
+  listItemFeatureIcon: "feature-icon",
+  listItemIcon: "icon",
+  itemCount: "item-count",
+  notice: "notice",
+  panel: "panel",
+  totalCount: "total-count"
+}, A = w`:host{width:100%;display:flex;height:100%;flex:1 1 0;>*{align-items:center;align-self:center;width:100%;height:100%}}.root{display:flex;flex-direction:column}calcite-flow{height:100%;width:100%}.container,.flow-item,.panel{display:flex}.flow-item{overflow:auto}.flow-item[scale=s] .container{gap:var(--calcite-spacing-sm);padding:var(--calcite-spacing-sm) 0}.flow-item[scale=m] .container{gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md) 0}.flow-item[scale=l] .container{gap:var(--calcite-spacing-lg);padding:var(--calcite-spacing-lg) 0}.container{flex-direction:column;background-color:var(--calcite-color-foreground-1)}.container>*{background-color:var(--calcite-color-foreground-1)}.container>*[scale=s]{padding:0 var(--calcite-spacing-sm) 0 var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}.container>*[scale=m]{padding:0 var(--calcite-spacing-md) 0 var(--calcite-spacing-md);font-size:var(--calcite-font-size-md)}.container>*[scale=l]{padding:0 var(--calcite-spacing-lg) 0 var(--calcite-spacing-lg);font-size:var(--calcite-font-size-lg)}.icon{display:flex;align-items:center;justify-content:center;min-width:var(--calcite-spacing-xxl);height:var(--calcite-spacing-xxl)}.icon span{line-height:0}.feature-icon .icon{margin-inline-start:calc(var(--calcite-spacing-lg) * -1)}.total-count{align-self:center;margin-inline:var(--calcite-spacing-xxs);line-height:initial}.item-count{display:flex;gap:.5em;align-items:center}`, D = k(L);
+class P extends M {
+  constructor() {
+    super(...arguments), this.viewModel = D(this), this.messages = T(), this.#i = !1, this.#t = /* @__PURE__ */ new WeakSet(), this.#e = null, this.autoDestroyDisabled = !1, this.icon = "selection", this.view = this.viewModel.view, this.displayMode = "group", this.filterText = this.viewModel.filterText, this.hideFilter = !1, this.hideFilterNotice = !1, this.hideHeader = !1, this.hideItemCloseActions = !1, this.hideItemCount = !1, this.hideItemIcons = !1, this.hideItemMenus = !1, this.hideLayerFilter = !1, this.hideMenu = !1, this.hideTotalCount = !1, this.hideZoomToButton = !1, this.highlightOnHoverDisabled = !1, this.layer = this.viewModel.layer, this.maxVisibleFeatureCountPerLayer = this.viewModel.maxVisibleFeatureCountPerLayer, this.menuScale = "m", this.selectionManager = this.viewModel.selectionManager, this.visualScale = "s", this.arcgisPropertyChange = S()("state"), this.arcgisReady = F();
+  }
+  static {
+    this.properties = { hasFilterText: 16, isUpdating: 16, itemWithOpenMenu: 16, autoDestroyDisabled: 5, disabled: 5, icon: 1, label: 1, referenceElement: 1, view: 0, activeLayerItem: 32, afterListItemSelect: 0, allLayerItems: 32, count: 32, displayMode: 1, effectiveSelectionManager: 32, filterText: 1, hideFilter: 5, hideFilterNotice: 5, hideHeader: 5, hideItemCloseActions: 5, hideItemCount: 5, hideItemIcons: 5, hideItemMenus: 5, hideLayerFilter: 5, hideMenu: 5, hideTotalCount: 5, hideZoomToButton: 5, highlightOnHoverDisabled: 5, listItemActionConfigurations: 0, listItemUnavailableFunction: 0, layer: 0, layerItems: 32, maxVisibleFeatureCountExceeded: 32, maxVisibleFeatureCountPerLayer: 9, menuScale: 1, selectionManager: 0, state: 32, visibleFeatureCount: 32, visibleFeatureItems: 32, visibleLayerCount: 32, visualScale: 1 };
+  }
+  static {
+    this.styles = A;
+  }
+  #i;
+  #t;
+  #e;
+  get hasFilterText() {
+    const { filterText: e } = this;
+    return e != null && e !== "";
+  }
+  get isUpdating() {
+    return this.viewModel.isUpdating;
+  }
+  get disabled() {
+    return this.#i || this.state === "disabled";
+  }
+  set disabled(e) {
+    this.#i = e;
+  }
+  get activeLayerItem() {
+    return this.viewModel.activeLayerItem;
+  }
+  get allLayerItems() {
+    return this.viewModel.allLayerItems;
+  }
+  get count() {
+    return this.viewModel.effectiveCount;
+  }
+  get effectiveSelectionManager() {
+    return this.viewModel.effectiveSelectionManager;
+  }
+  get layerItems() {
+    return this.viewModel.layerItems;
+  }
+  get maxVisibleFeatureCountExceeded() {
+    return this.viewModel.maxVisibleFeatureCountExceeded;
+  }
+  get state() {
+    return this.viewModel.state;
+  }
+  get visibleFeatureCount() {
+    return this.viewModel.visibleFeatureCount;
+  }
+  get visibleFeatureItems() {
+    return this.viewModel.visibleFeatureItems;
+  }
+  get visibleLayerCount() {
+    return this.viewModel.visibleLayerCount;
+  }
+  async clear() {
+    this.viewModel.clear();
+  }
+  async collapseAll() {
+    this.viewModel.collapseAll();
+  }
+  async deselectItem(e) {
+    this.viewModel.deselectItem(e);
+  }
+  async destroy() {
+    this.viewModel?.destroy();
+  }
+  async expandAll() {
+    this.viewModel.expandAll();
+  }
+  async findLayerItem(e) {
+    return this.viewModel.findLayerItem(e);
+  }
+  async findParentItem(e) {
+    return this.viewModel.findParentItem(e);
+  }
+  async goToItem(e) {
+    this.viewModel.goToItem(e);
+  }
+  async removeFromSelection(e) {
+    this.viewModel.removeFromSelection(e);
+  }
+  async replace(e) {
+    this.viewModel.replace(e);
+  }
+  async selectItem(e) {
+    this.viewModel.selectSingleItem(e);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.#e = new IntersectionObserver((e, t) => {
+      const { messages: a } = this;
+      e.forEach((i) => {
+        if (!i.isIntersecting)
+          return;
+        const l = i.target;
+        if (this.#t.has(l)) {
+          t.unobserve(l);
+          return;
+        }
+        const d = l.getAttribute("data-thumbnail-key"), o = d ? this._getFeatureItemByThumbnailKey(d) : void 0;
+        if (!o)
+          return;
+        this.#t.add(l);
+        const m = o.title && a.previewTemplateAriaLabel ? v(a.previewTemplateAriaLabel, { label: o.title }) : a.preview;
+        if (o.thumbnail) {
+          l.appendChild(o.thumbnail);
+          return;
+        }
+        o.fetchThumbnail({ ariaLabel: m }).then((h) => h && l.appendChild(h)).catch(() => this.#t.delete(l));
+      });
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#e?.disconnect();
+  }
+  _closeItemMenu(e) {
+    (!e || e === this.itemWithOpenMenu) && (this.itemWithOpenMenu = void 0);
+  }
+  _getFeatureItemByThumbnailKey(e) {
+    return this.viewModel.visibleFeatureItems.find((t) => t.thumbnailKey === e);
+  }
+  _isItemUnavailable(e) {
+    return !e.layerIsVisible || this.listItemUnavailableFunction?.({ item: e }) || !1;
+  }
+  _makeObserverRef() {
+    let e = null;
+    return (t) => {
+      t ? (e = t, this.#e?.observe(t)) : e && (this.#e?.unobserve(e), e = null);
+    };
+  }
+  _afterListItemSelect(e, t) {
+    t.stopPropagation(), this._closeItemMenu(), this.afterListItemSelect?.({ item: e });
+  }
+  #o() {
+    if (this.hideTotalCount || this.hideHeader)
+      return;
+    const { count: e, messages: t } = this, a = g(e), i = t.selectionCount ? v(t.selectionCount, { count: a }) : void 0;
+    return s`<calcite-chip appearance=outline class=${r(c.totalCount)} .closable=${e > 0} .closed=${e === 0} .disabled=${this.disabled} .icon=${this.maxVisibleFeatureCountExceeded ? "exclamation-mark-triangle" : void 0} .label=${a} .scale=${this.visualScale} slot=header-actions-end title=${i ?? u} @calciteChipClose=${this.clear}>${a}</calcite-chip>`;
+  }
+  #c() {
+    if (this.hideHeader || this.hideMenu)
+      return;
+    const { menuScale: e, messages: t } = this, a = this.disabled || this.count === 0;
+    return [
+      s`<calcite-action .disabled=${a} icon=reset .scale=${e} slot=header-menu-actions .text=${t.clear ?? ""} text-enabled @click=${this.clear}></calcite-action>`,
+      s`<calcite-action .disabled=${a} icon=folders .scale=${e} slot=header-menu-actions .text=${t.collapseAll ?? ""} text-enabled @click=${this.collapseAll}></calcite-action>`
+    ];
+  }
+  #r() {
+    const { layerItems: e, messages: t } = this;
+    if (this.count === 0 || e.length < 2 || this.hideLayerFilter)
+      return;
+    const a = t.allLayersCount ? v(t.allLayersCount, { count: e.length }) : "";
+    return s`<calcite-combobox class=${r(c.layerDropdown)} .disabled=${this.disabled} .label=${t.filterByLayer ?? ""} overlay-positioning=fixed .placeholder=${t.filterByLayer} .scale=${this.visualScale} selection-mode=single-persist @calciteComboboxChange=${({ currentTarget: i }) => {
+      this.filterText = void 0;
+      const l = i.selectedItems[0]?.value ?? void 0;
+      this.layer = l === "all-layers" ? void 0 : l;
+    }}>${n("all-layers", s`<calcite-combobox-item .heading=${a} icon=layers .selected=${this.layer == null} value=all-layers></calcite-combobox-item>`)}${this.layerItems.map((i) => this.#h(i))}</calcite-combobox>`;
+  }
+  #d() {
+    if (!(this.hideFilter || this.count === 0))
+      return s`<calcite-input clearable .disabled=${this.disabled} icon=search .placeholder=${this.messages.filter} .scale=${this.visualScale} .value=${this.filterText} @calciteInputInput=${({ target: { value: e } }) => {
+        this.filterText = e;
+      }}></calcite-input>`;
+  }
+  #h(e) {
+    const t = e.title || this.messages?.untitledLayer || "";
+    return n(e.key, s`<calcite-combobox-item .heading=${t} .icon=${e.iconName} .selected=${e.layer === this.layer} .value=${e.layer}></calcite-combobox-item>`);
+  }
+  #u() {
+    const { messages: e } = this;
+    if (this.visibleFeatureCount !== 0)
+      return s`<calcite-list .disabled=${this.disabled} display-mode=nested interaction-mode=interactive .label=${e.componentLabel ?? ""} .loading=${this.isUpdating} .scale=${this.visualScale} selection-mode=none>${this.#s(this.allLayerItems)}</calcite-list>`;
+  }
+  #s(e) {
+    return this.activeLayerItem ? this.#l(this.activeLayerItem) : e.map((t) => b(t) ? this.#v(t) : I(t) ? this.#l(t) : null).filter((t) => t != null);
+  }
+  #m() {
+    if (!(this.disabled || this.visibleFeatureCount > 0 || this.hideFilter || this.hideFilterNotice))
+      return s`<calcite-notice class=${r(c.notice)} icon=exclamation-mark-triangle kind=info open .scale=${this.visualScale} width=full><div slot=message>${this.messages.noMatchingFeatures}</div></calcite-notice>`;
+  }
+  #p(e) {
+    if (this.hideItemCount)
+      return;
+    const { messages: t } = this, a = g(e.total), i = g(e.visibleTotal), l = t.selectionCount ? v(t.selectionCount, { count: a }) : void 0;
+    return !this.hasFilterText && e.maxVisibleFeatureCountExceeded ? s`<span class=${r(c.itemCount)} slot=content-end title=${l ?? u}><calcite-icon icon=exclamation-mark-triangle scale=s title=${t.tooManyFeatures ?? u}></calcite-icon>${`${g(this.maxVisibleFeatureCountPerLayer)}+`}</span>` : s`<span class=${r(c.itemCount)} slot=content-end title=${l ?? u}>${i}</span>`;
+  }
+  #a(e) {
+    if (this.hideItemMenus)
+      return;
+    const { messages: t } = this, a = this.itemWithOpenMenu === e, i = C(e), l = I(e), d = b(e), o = i ? t.deselectFeature : l ? t.deselectLayer : t.deselectGroup;
+    return [
+      n("dropdown", s`<calcite-dropdown .open=${a} overlay-positioning=fixed placement=bottom-end .scale=${this.menuScale} slot=actions-end width=m @calciteDropdownClose=${() => this._closeItemMenu(e)} @calciteDropdownOpen=${() => {
+        this.itemWithOpenMenu = e;
+      }}>${n("action", s`<calcite-action icon=ellipsis .scale=${this.visualScale} slot=trigger .text=${t.menu ?? ""}></calcite-action>`)}${// Only render menu-items for open menu(s) to reduce
+      // the total number of list item elements in the DOM at any time.
+      a ? n("dropdown-group", s`<calcite-dropdown-group selection-mode=none>${this.hideZoomToButton ? void 0 : n("zoom-to", s`<calcite-dropdown-item icon-start=layer-zoom-to @calciteDropdownItemSelect=${() => this.goToItem(e)}>${t.zoomTo}</calcite-dropdown-item>`)}${n("select-single", s`<calcite-dropdown-item icon-start=selection-filter @calciteDropdownItemSelect=${() => this.selectItem(e)}>${i ? t.onlySelectFeature : t.onlySelectThis}</calcite-dropdown-item>`)}${n("clear-selection", s`<calcite-dropdown-item icon-start=selection-x @calciteDropdownItemSelect=${() => this.deselectItem(e)}>${o}</calcite-dropdown-item>`)}${this.listItemActionConfigurations?.map((m) => {
+        const { disabled: h, hidden: f, label: $, type: p } = m;
+        if (!(typeof f == "function" ? f({ item: e }) : !!f) && (!p || p === "feature" && i || p === "layer" && l || p === "group" && d))
+          return n(`custom-action-${$}`, s`<calcite-dropdown-item .disabled=${typeof h == "function" ? h({ item: e }) : !!h} .iconStart=${m.icon ?? void 0} @calciteDropdownItemSelect=${() => m.callback({ item: e })}>${$}</calcite-dropdown-item>`);
+      })}</calcite-dropdown-group>`) : void 0}</calcite-dropdown>`)
+    ];
+  }
+  #v(e) {
+    const t = e.title || this.messages.untitledLayer;
+    if (e.visibleTotal === 0)
+      return;
+    const { displayMode: a } = this;
+    return a === "layer" || a === "feature" ? this.#s(e.items) : n(e.key, s`<calcite-list-item .closable=${!this.hideItemCloseActions} .expanded=${e.expanded} .iconStart=${this.hideItemIcons ? void 0 : e.iconName} .label=${t} .unavailable=${this._isItemUnavailable(e)} .value=${e.title} @calciteListItemCollapse=${(i) => {
+      i.stopPropagation(), e.expanded = !1;
+    }} @calciteListItemClose=${(i) => {
+      i.stopPropagation(), this.deselectItem(e);
+    }} @calciteListItemExpand=${(i) => {
+      i.stopPropagation(), e.expanded = !0;
+    }} @calciteListItemSelect=${(i) => this._afterListItemSelect(e, i)}>${this.#a(e)}${this.#s(e.items)}</calcite-list-item>`);
+  }
+  #l(e) {
+    if (e.visibleTotal === 0 || !e.visible)
+      return;
+    if (this.displayMode === "feature")
+      return this.#n(e.featureItems);
+    const { messages: t } = this, a = e.title || t.untitledLayer;
+    return n(e.key, s`<calcite-list-item .closable=${!this.hideItemCloseActions} .expanded=${e.expanded} .iconStart=${this.hideItemIcons ? void 0 : e.iconName} .label=${a} title=${(e.layerIsVisible ? void 0 : t.layerIsNotVisible) ?? u} .unavailable=${this._isItemUnavailable(e)} .value=${e.title} @calciteListItemCollapse=${(i) => {
+      i.stopPropagation(), e.expanded = !1;
+    }} @calciteListItemClose=${(i) => {
+      i.stopPropagation(), this.deselectItem(e);
+    }} @calciteListItemExpand=${(i) => {
+      i.stopPropagation(), e.expanded = !0;
+    }} @calciteListItemSelect=${(i) => this._afterListItemSelect(e, i)}>${this.#p(e)}${this.#a(e)}${this.#n(e.featureItems)}${e.maxVisibleFeatureCountExceeded ? s`<calcite-notice class=${r(c.notice)} icon=exclamation-mark-triangle kind=info open .scale=${this.visualScale}><div slot=message>${t.tooManyFeatures}</div></calcite-notice>` : void 0}</calcite-list-item>`);
+  }
+  #n(e) {
+    return e.map((t) => this.#g(t));
+  }
+  #g(e) {
+    if (!e.visible)
+      return;
+    const { highlightOnHoverDisabled: t, messages: a, viewModel: i } = this, l = e.title || a.untitledFeature, d = !this.hideItemIcons && this.displayMode !== "feature";
+    return n(e.key, s`<calcite-list-item class=${r(d ? c.listItemFeatureIcon : c.listItemFeature)} .closable=${!this.hideItemCloseActions} .label=${l} .unavailable=${this._isItemUnavailable(e)} .value=${l} @blur=${t ? void 0 : () => i.removeTemporaryHighlight()} @calciteListItemClose=${(o) => {
+      o.stopPropagation(), this.deselectItem(e);
+    }} @calciteListItemSelect=${(o) => this._afterListItemSelect(e, o)} @focus=${t ? void 0 : () => i.addTemporaryHighlight(e)} @pointerenter=${t ? void 0 : () => i.addTemporaryHighlight(e)} @pointerleave=${t ? void 0 : () => i.removeTemporaryHighlight()}>${this.#f(e)}${this.#a(e)}</calcite-list-item>`);
+  }
+  #f(e) {
+    if (!this.hideItemIcons)
+      return n("thumbnail-container", s`<div class=${r(c.listItemIcon)} slot=content-start>${n(e.thumbnailKey, s`<span data-thumbnail-key=${e.thumbnailKey ?? u} ${x(this._makeObserverRef())}></span>`)}</div>`);
+  }
+  render() {
+    const e = this.hideHeader ? void 0 : this.el.title || this.messages.selection;
+    return s`<div><calcite-flow><calcite-flow-item class=${r(c.flowItem)} .heading=${e} .loading=${this.state === "loading"} overlay-positioning=fixed .scale=${this.visualScale} selected><calcite-panel class=${r(c.panel)} .disabled=${this.disabled} overlay-positioning=fixed .scale=${this.visualScale}><div class=${r(c.container)}>${this.#r()}${this.#d()}${this.#u()}${this.#m()}</div></calcite-panel>${this.#o()}${this.#c()}</calcite-flow-item></calcite-flow></div>`;
+  }
+}
+y("arcgis-selection-list", P);
+export {
+  P as ArcgisSelectionList
+};

package/dist/components/arcgis-selection-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-selection-list/index.js

@@ -0,0 +1,16 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-combobox";
+import "@esri/calcite-components/components/calcite-combobox-item";
+import "@esri/calcite-components/components/calcite-input";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-dropdown";
+import "@esri/calcite-components/components/calcite-dropdown-group";
+import "@esri/calcite-components/components/calcite-dropdown-item";
+import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-flow";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "@esri/calcite-components/components/calcite-panel";
+export * from "./customElement.js";

package/dist/components/arcgis-selection-list/types.d.ts

@@ -0,0 +1,85 @@
+import type { ListItem } from "@arcgis/core/widgets/support/SelectionList/types.js";
+import type { Icon } from "@esri/calcite-components/components/calcite-icon";
+
+/**
+ * A callback function that is called to determine if a menu action should be unavailable.
+ *
+ * @param params
+ * @since 5.2
+ */
+export type ListItemUnavailableFunction = (params: { item: ListItem; }) => boolean;
+
+/**
+ * Configuration for list item menu actions.
+ *
+ * @since 5.2
+ */
+export interface ListItemActionConfiguration {
+  /**
+   * A label for the menu action. This will be displayed in the list item menu.
+   *
+   * @since 5.2
+   */
+  label: string;
+  /** A callback function that is called when the menu action is selected. */
+  callback: ListItemActionCallbackFunction;
+  /**
+   * An optional callback function that is called to determine if the menu action should be disabled.
+   * If this function returns true, the menu action will be disabled. This value can also be a boolean.
+   *
+   * @since 5.2
+   */
+  disabled?: ListItemActionDisabledFunction | boolean;
+  /**
+   * An optional callback function that is called to determine if the menu action should be hidden.
+   * If this function returns true, the menu action will be hidden. This value can also be a boolean.
+   *
+   * @since 5.2
+   */
+  hidden?: ListItemActionHiddenFunction | boolean;
+  /**
+   * An optional property specifying an icon to display for the menu action.
+   *
+   * @since 5.2
+   */
+  icon?: Icon["icon"];
+  /**
+   * The type of the list item that the menu action configuration applies to.
+   * If this property is not specified, the menu action will be available for all list item types.
+   *
+   * @since 5.2
+   */
+  type?: null | undefined | "feature" | "group" | "layer";
+}
+
+/**
+ * A callback function that is called when a list item is selected.
+ *
+ * @param params
+ * @since 5.2
+ */
+export type ListItemSelectCallback = (params: { item: ListItem; }) => void;
+
+/**
+ * A callback function that is called when a menu action is selected.
+ *
+ * @param params
+ * @since 5.2
+ */
+export type ListItemActionCallbackFunction = (params: { item: ListItem; }) => void;
+
+/**
+ * A callback function that is called to determine if a menu action should be disabled.
+ *
+ * @param params
+ * @since 5.2
+ */
+export type ListItemActionDisabledFunction = (params: { item: ListItem; }) => boolean;
+
+/**
+ * A callback function that is called to determine if a menu action should be hidden.
+ *
+ * @param params
+ * @since 5.2
+ */
+export type ListItemActionHiddenFunction = (params: { item: ListItem; }) => boolean;

package/dist/components/arcgis-table-list-next/customElement.js

@@ -10,19 +10,19 @@ import { usePropertyChange as T } from "@arcgis/lumina/controllers";
 import { reEmitEvent as D } from "@arcgis/lumina/controllers/accessor";
 import { classes as P } from "@arcgis/toolkit/dom";
 import { generateGuid as N } from "@arcgis/toolkit/string";
-import { createRef as U, ref as A } from "lit/directives/ref.js";
+import { createRef as U, ref as x } from "lit/directives/ref.js";
 import { html as o } from "lit";
-import { u as x } from "../../chunks/useT9n.js";
+import { u as A } from "../../chunks/useT9n.js";
 import { g as u } from "../../chunks/globalCss.js";
 import { m as B, b as R, r as k, e as S } from "../../chunks/layer-list-utils.js";
-import { A as G } from "../../chunks/layer-list-item.js";
+import { ArcgisLayerListItem as G } from "../arcgis-layer-list-next/layer-list-item/customElement.js";
 import { s as O, a as q } from "../../chunks/layer-list-next.js";
 import { c as H } from "../../chunks/css.js";
 import { m as V } from "../../chunks/useViewModel.js";
 const w = H, y = "nested", j = V(L);
 class z extends E {
   constructor() {
-    super(...arguments), this._lastDragDetail = null, this._rootGroupUid = `table-${N()}`, this._rootListRef = U(), this._selectedDragItemLayerUid = null, this.messages = x(), this.viewModel = j(this), this._canMove = ({ dragEl: e, fromEl: t, toEl: i }, s) => {
+    super(...arguments), this._lastDragDetail = null, this._rootGroupUid = `table-${N()}`, this._rootListRef = U(), this._selectedDragItemLayerUid = null, this.messages = A(), this.viewModel = j(this), this._canMove = ({ dragEl: e, fromEl: t, toEl: i }, s) => {
       const l = s === "pull" ? this.listItemCanGiveFunction : this.listItemCanReceiveFunction, a = this._getItem(e);
       if (!a || !("sortable" in a) || !a.sortable)
         return !1;
@@ -166,7 +166,7 @@ class z extends E {
     const { collapsed: e, _visibleItems: t, _filterEnabled: i, _rootGroupUid: s, showCloseButton: l, showCollapseButton: a, showHeading: h, _dragEnabled: d, selectionMode: n, filterText: m, filterPlaceholder: f, messages: g } = this, p = [
       o`<calcite-flow-item .closable=${l} .closed=${this.closed} .collapsed=${e} .collapsible=${a} .heading=${h ? this.label ?? g.componentLabel : void 0} .headingLevel=${this.headingLevel} .selected=${!this._openedPanelItems.length} @calciteFlowItemClose=${() => this._handleFlowItemClose()}>${t?.length ? o`<calcite-list .canPull=${(r) => this._canMove(r, "pull")} .canPut=${(r) => this._canMove(r, "put")} data-layer-type=${s ?? F} .displayMode=${y} .dragEnabled=${d} .filterEnabled=${i} .filterPlaceholder=${f} .filterProps=${S} .filterText=${i ? m : ""} .group=${s} .label=${this.label ?? g.componentLabel} selection-appearance=border .selectionMode=${n} @calciteListChange=${this._handleCalciteListChange} @calciteListDragEnd=${(r) => this._handleCalciteListDragEnd(r.detail)} @calciteListFilter=${(r) => {
         this.filterText = r.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
-      }} @calciteListOrderChange=${(r) => this._onCalciteListOrderChange(r.detail)} ${A(this._rootListRef)}>${t.toArray().map((r) => this._renderItem(r))}${i && !this.hideNoFilterResultsNotice ? o`<div class=${b(w.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>`,
+      }} @calciteListOrderChange=${(r) => this._onCalciteListOrderChange(r.detail)} ${x(this._rootListRef)}>${t.toArray().map((r) => this._renderItem(r))}${i && !this.hideNoFilterResultsNotice ? o`<div class=${b(w.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()
     ];
     return this.closed ? null : _("root-flow", o`<calcite-flow>${p}</calcite-flow>`);

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.d.ts

@@ -71,7 +71,8 @@ export abstract class ArcgisUtilityNetworkAggregatedGeometryResultItem extends L
   /** The heading of the result item. */
   accessor heading: string | undefined;
   /**
-   * Whether or not the aggregated geometry graphics are hidden on the map.
+   * Whether to hide the aggregated geometry [graphics](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-aggregated-geometry-result-item/#geometryGraphics)
+   * from the map when the trace result contains aggregated geometry results.
    *
    * @default false
    */

package/dist/components/arcgis-utility-network-elements-result-item/customElement.d.ts

@@ -177,7 +177,7 @@ export abstract class ArcgisUtilityNetworkElementsResultItem extends LitElement
   clearResult(): void;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
-  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "isFeaturesListShown" | "selectedResultFeature"; }>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "isFeaturesListShown" | "selectedResultFeature" | "state"; }>;
   /** Fires when the component finishes querying all features for the trace result elements. */
   readonly arcgisResultReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when an action is triggered on the component. */

package/dist/components/arcgis-utility-network-elements-result-item/customElement.js

@@ -12,7 +12,7 @@ import { q as S, c as p, d as v } from "../../chunks/layer-utils.js";
 const $ = E`arcgis-features-next{height:100%}.elements-list-item{border:solid 1px var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sm);margin:0 var(--calcite-spacing-sm)}.features-hidden{margin:var(--calcite-spacing-md);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size)}`;
 class A extends R {
   constructor() {
-    super(...arguments), this._messages = L({ blocking: !0 }), this.#l = !0, this.#e = [], this.#t = [], this.#s = /* @__PURE__ */ new Map(), this.#n = /* @__PURE__ */ new Map(), this.#i = /* @__PURE__ */ new Map(), this.#r = /* @__PURE__ */ new Map(), this.#a = [], this._isFeaturesSelected = !1, this.autoDestroyDisabled = !1, this.disableHighlightFeatureResults = !1, this.features = [], this.hideActionBar = !1, this.hideFeatureResults = !1, this.hidePlaceholder = !1, this.includeDefaultActionsDisabled = !1, this.layers = [], this.state = "loading", this.arcgisPropertyChange = b()("isFeaturesListShown", "selectedResultFeature"), this.arcgisTriggerAction = y(), this.arcgisResultReady = y();
+    super(...arguments), this._messages = L({ blocking: !0 }), this.#l = !0, this.#e = [], this.#t = [], this.#s = /* @__PURE__ */ new Map(), this.#n = /* @__PURE__ */ new Map(), this.#i = /* @__PURE__ */ new Map(), this.#r = /* @__PURE__ */ new Map(), this.#a = [], this._isFeaturesSelected = !1, this.autoDestroyDisabled = !1, this.disableHighlightFeatureResults = !1, this.features = [], this.hideActionBar = !1, this.hideFeatureResults = !1, this.hidePlaceholder = !1, this.includeDefaultActionsDisabled = !1, this.layers = [], this.state = "loading", this.arcgisPropertyChange = b()("isFeaturesListShown", "selectedResultFeature", "state"), this.arcgisTriggerAction = y(), this.arcgisResultReady = y();
   }
   static {
     this.properties = { _featuresComponentElement: 16, _isFeaturesSelected: 16, actions: 0, autoDestroyDisabled: 5, disableHighlightFeatureResults: 5, features: 32, heading: 1, hideActionBar: 5, hideFeatureResults: 5, hidePlaceholder: 5, includeDefaultActionsDisabled: 5, isFeaturesListShown: 32, layers: 0, messageOverrides: 0, numResults: 32, referenceElement: 1, selectedResultFeature: 32, state: 1, traceResult: 0, utilityNetwork: 0, view: 0 };
@@ -35,7 +35,7 @@ class A extends R {
   #r;
   #a;
   get isFeaturesListShown() {
-    return (this._isFeaturesSelected || this.#o) && !this.hideFeatureResults && !this._featuresComponentElement?.manager.destroyed;
+    return (this._isFeaturesSelected || this.#o) && !this.hideFeatureResults && !this._featuresComponentElement?.manager?.destroyed;
   }
   get numResults() {
     return this.features.length + this.#e.length;

package/dist/components/arcgis-utility-network-trace-analysis-next/customElement.d.ts

@@ -255,6 +255,13 @@ export abstract class ArcgisUtilityNetworkTraceAnalysisNext extends LitElement {
    * ```
    */
   accessor hideFeatureResults: boolean;
+  /**
+   * Whether to hide the aggregated geometry [graphics](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-aggregated-geometry-result-item/#geometryGraphics)
+   * from the map when the trace result contains aggregated geometry results.
+   *
+   * @default false
+   */
+  accessor hideGraphics: boolean;
   /**
    * Whether to hide the placeholder string when feature results are hidden in the results tab.
    *
@@ -349,6 +356,7 @@ export abstract class ArcgisUtilityNetworkTraceAnalysisNext extends LitElement {
    * Event payload contains a boolean representing whether the aggregated geometry graphics are hidden.
    * If true, the aggregated geometry graphics are hidden on the view.
    *
+   * @deprecated since 5.2. Use [@arcgisPropertyChange](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-analysis-next/#event-arcgisPropertyChange) instead.
    * @example
    * ```js
    * const traceElement = document.querySelector("arcgis-utility-network-trace-analysis-next");
@@ -359,6 +367,8 @@ export abstract class ArcgisUtilityNetworkTraceAnalysisNext extends LitElement {
    * ```
    */
   readonly arcgisHideGraphicsChange: import("@arcgis/lumina").TargetedEvent<this, boolean>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "aggregatedGeometryGraphicsColor" | "hideGraphics"; }>;
   /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
@@ -431,6 +441,7 @@ export abstract class ArcgisUtilityNetworkTraceAnalysisNext extends LitElement {
   readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, ActionEvent>;
   readonly "@eventTypes": {
     arcgisHideGraphicsChange: ArcgisUtilityNetworkTraceAnalysisNext["arcgisHideGraphicsChange"]["detail"];
+    arcgisPropertyChange: ArcgisUtilityNetworkTraceAnalysisNext["arcgisPropertyChange"]["detail"];
     arcgisReady: ArcgisUtilityNetworkTraceAnalysisNext["arcgisReady"]["detail"];
     arcgisTraceLocationSelectEnd: ArcgisUtilityNetworkTraceAnalysisNext["arcgisTraceLocationSelectEnd"]["detail"];
     arcgisTraceLocationSelectStart: ArcgisUtilityNetworkTraceAnalysisNext["arcgisTraceLocationSelectStart"]["detail"];