@arcgis/map-components 5.2.0-next.98 → 6.0.0-next.0

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

@@ -11,26 +11,29 @@ import type { ArcgisReferenceElement, IconName } from "../types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
- * The selection list component can be used to display a list of selected features from a selection manager.
+ * The `Selection List` component displays selected features in a hierarchical list organized by group and layer. It is intended for applications that need to present the current selection and support browsing, filtering, and interaction with selected features.
  *
+ * The component can be used with the [Map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/) or [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/) component and reflects selections made through a [selection manager](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/), including the [view](https://developers.arcgis.com/javascript/latest/references/core/views/View/#selectionManager), the [Selection Toolbar](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/), or the [selection manager API](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/).
+ *
+ * @see [Sample - Selection List Component](https://developers.arcgis.com/javascript/latest/sample-code/selection-list/)
  * @since 5.2
  */
 export abstract class ArcgisSelectionList extends LitElement {
   /**
-   * Reference to a single LayerItem being displayed in the list, if the
-   * 'layer' property is set and that layer has selected features.
+   * Reference to a single [layer item](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/LayerItem/) being displayed in the
+   * list, if the [layer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-list/#layer) property is set and that layer has selected features.
    *
    * @since 5.2
    */
   get activeLayerItem(): LayerItem | null | undefined;
   /**
-   * A callback function to be called when a list item is selected.
+   * An optional function that runs when a user selects a feature, layer, or group item in the selection list itself. It does not run when a feature becomes selected through the [arcgis-selection-toolbar](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/), map click, or [selection manager API](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/).
    *
    * @since 5.2
    */
   accessor afterListItemSelect: ListItemSelectCallback | undefined;
   /**
-   * Items representing all individual layers and group layers with an active selection.
+   * Items representing all individual [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/LayerItem/) and [group](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/GroupLayerItem/) layers with an active selection.
    *
    * @since 5.2
    */
@@ -61,23 +64,23 @@ export abstract class ArcgisSelectionList extends LitElement {
    */
   get count(): number;
   /**
-   * When true, the component is visually withdrawn and cannot receive user interaction.
+   * When true, the component is visually de-emphasized and does not accept user interaction.
    *
    * @default false
    */
   accessor disabled: boolean;
   /**
-   * Controls how the list is displayed. If this value is set to "group", the list displays feature and layer items nested under
-   * their associated layer and group items. If this value is set to "layer", the list displays feature items nested under
-   * their associated layer item, while excluding group items. If this value is set to "feature" the list only displays
-   * feature items, while excluding group and layer items.
+   * Controls how the list is displayed. If this value is set to `"group"`, the list displays [feature](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/FeatureItem/) and [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/LayerItem/) items nested under
+   * their associated [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/LayerItem/) and [group](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/GroupLayerItem/) items. If this value is set to `"layer"`, the list displays [feature](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/FeatureItem/) items nested under
+   * their associated [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/LayerItem/) item, while excluding [group](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/GroupLayerItem/) items. If this value is set to `"feature"` the list only displays
+   * [feature](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/FeatureItem/) items, while excluding [group](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/GroupLayerItem/) and [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/LayerItem/) items.
    *
    * @default "group"
    * @since 5.2
    */
   accessor displayMode: "feature" | "group" | "layer";
   /**
-   * Reference to the SelectionManager being represented by the component.
+   * Reference to the [selection manager](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/) being represented by the component.
    *
    * @since 5.2
    */
@@ -88,6 +91,22 @@ export abstract class ArcgisSelectionList extends LitElement {
    * @since 5.2
    */
   accessor filterText: string | undefined;
+  /**
+   * Indicates whether the selection count chip should be hidden. The chip shows the total
+   * count of selected features and a `close` button for clearing the selection.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hideChip: boolean;
+  /**
+   * Indicates whether the 'close' button on the selection count chip should be hidden.
+   * The 'close' button allows users to clear the current selection.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hideChipCloseButton: boolean;
   /**
    * Indicates that the filter should be hidden.
    *
@@ -151,13 +170,6 @@ export abstract class ArcgisSelectionList extends LitElement {
    * @since 5.2
    */
   accessor hideMenu: boolean;
-  /**
-   * Indicates that the total count should be hidden.
-   *
-   * @default false
-   * @since 5.2
-   */
-  accessor hideTotalCount: boolean;
   /**
    * Indicates that the 'zoom to' button should be hidden.
    *
@@ -211,7 +223,7 @@ export abstract class ArcgisSelectionList extends LitElement {
   accessor listItemUnavailableFunction: ListItemUnavailableFunction | undefined;
   /**
    * Indicates the list is only showing a subset of selected feature items due to
-   * the selection being greater than the current value of the 'maxVisibleFeatureCountPerLayer'
+   * the selection being greater than the current value of the [maxVisibleFeatureCountPerLayer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-list/#maxVisibleFeatureCountPerLayer)
    * property. This value also accounts for any active filters.
    *
    * @default false
@@ -219,7 +231,8 @@ export abstract class ArcgisSelectionList extends LitElement {
    */
   get maxVisibleFeatureCountExceeded(): boolean;
   /**
-   * Maximum number of selected feature items displayed per layer.
+   * x
+   * Maximum number of selected [feature items](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/FeatureItem/) displayed per layer.
    * Does not limit or restrict the selection itself.
    *
    * @since 5.2
@@ -237,6 +250,7 @@ export abstract class ArcgisSelectionList extends LitElement {
       componentLabel: string;
       allLayersCount: string;
       clear: string;
+      clearSelectionCount: string;
       collapseAll: string;
       deselectFeature: string;
       deselectGroup: string;
@@ -262,6 +276,7 @@ export abstract class ArcgisSelectionList extends LitElement {
       componentLabel: string;
       allLayersCount: string;
       clear: string;
+      clearSelectionCount: string;
       collapseAll: string;
       deselectFeature: string;
       deselectGroup: string;
@@ -291,13 +306,18 @@ export abstract class ArcgisSelectionList extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
-   * A reference to a custom selection manager to use instead of the view's default selection manager.
+   * A reference to a custom [selection manager](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/) to use instead of the view's default [selection manager](https://developers.arcgis.com/javascript/latest/references/core/views/View/#selectionManager).
    *
    * @since 5.2
    */
   accessor selectionManager: SelectionManager | null | undefined;
   /**
    * Reflects the component's current state.
+   * Possible values are:
+   * - `"disabled"`: The component is not interactive.
+   * - `"error"`: The component has encountered an error.
+   * - `"loading"`: The component is in a loading state.
+   * - `"ready"`: The component is ready for interaction.
    *
    * @since 5.2
    */
@@ -308,20 +328,20 @@ export abstract class ArcgisSelectionList extends LitElement {
    */
   accessor view: SelectableViewUnion | null | undefined;
   /**
-   * Total number of visible feature items in the list.
+   * Total number of visible [feature items](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/FeatureItem/) in the list.
    *
    * @since 5.2
    */
   get visibleFeatureCount(): number;
   /**
-   * Current number of visible feature list items, accounting for 'maxVisibleFeatureCountPerLayer'.
-   * Excludes feature list items hidden by the filter.
+   * Current number of visible [feature items](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/FeatureItem/) in the list, accounting for [maxVisibleFeatureCountPerLayer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-list/#maxVisibleFeatureCountPerLayer).
+   * Excludes [feature items](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/FeatureItem/) hidden by the filter.
    *
    * @since 5.2
    */
   get visibleFeatureItems(): FeatureItem[];
   /**
-   * Count for total number of visible layer items in the list, excluding group layer items.
+   * Count for total number of visible [layer items](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/LayerItem/) in the list, excluding [group layer items](https://developers.arcgis.com/javascript/latest/references/core/widgets/support/SelectionList/GroupLayerItem/).
    *
    * @since 5.2
    */
@@ -348,7 +368,7 @@ export abstract class ArcgisSelectionList extends LitElement {
   /**
    * Utility method to deselect any group, layer or feature item.
    *
-   * @param item
+   * @param item - The list item to deselect.
    * @since 5.2
    */
   deselectItem(item: ListItem): Promise<void>;
@@ -369,24 +389,24 @@ export abstract class ArcgisSelectionList extends LitElement {
    */
   findLayerItem(layer: SelectableLayer): Promise<LayerItem | null | undefined>;
   /**
-   * Utility method for finding the corresponding ParentItem for a given layer.
+   * Utility method for finding the corresponding parent item for a given layer.
    *
-   * @param layer - The layer for which to find the corresponding ParentItem.
-   * @returns The ParentItem associated with the provided layer.
+   * @param layer - The layer for which to find the corresponding parent item.
+   * @returns The parent item associated with the provided layer.
    * @since 5.2
    */
   findParentItem(layer: SelectableLayer): Promise<null | undefined | ParentItem>;
   /**
    * Repositions the view to center based on the chosen item.
    *
-   * @param item
+   * @param item - The list item for which to reposition the view.
    * @since 5.2
    */
   goToItem(item: ListItem): Promise<void>;
   /**
    * Removes specific features from the selection, based on the provided layer and object IDs.
    *
-   * @param params
+   * @param params - An object containing the layer and selection to remove.
    * @since 5.2
    */
   removeFromSelection(params: {
@@ -396,7 +416,7 @@ export abstract class ArcgisSelectionList extends LitElement {
   /**
    * Replaces an active selection, based on the provided layer and object IDs.
    *
-   * @param params
+   * @param params - An object containing the layer and selection to replace.
    * @since 5.2
    */
   replace(params: {
@@ -406,15 +426,25 @@ export abstract class ArcgisSelectionList extends LitElement {
   /**
    * Selects all features contextual to a given item. Deselects all other features.
    *
-   * @param item
+   * @param item - The list item for which to select all features.
    * @since 5.2
    */
   selectItem(item: ListItem): Promise<void>;
+  /**
+   * Fires when the active selection is cleared via the close button on the selection count chip.
+   * This event does not fire when the selection is cleared programmatically, or when the selection is
+   * cleared by a different component. For more information about selection changes, use the
+   * [selection-change](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/#event-selection-change) event emitted by the associated [selection manager](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/).
+   *
+   * @since 5.2
+   */
+  readonly arcgisClear: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** 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: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
+    arcgisClear: ArcgisSelectionList["arcgisClear"]["detail"];
     arcgisPropertyChange: ArcgisSelectionList["arcgisPropertyChange"]["detail"];
     arcgisReady: ArcgisSelectionList["arcgisReady"]["detail"];
   };

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

@@ -1,16 +1,16 @@
 /* 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 = {
+import { c as I } from "../../chunks/runtime.js";
+import { css as y, html as a } from "lit";
+import { keyed as o } from "lit/directives/keyed.js";
+import { ref as w } from "lit/directives/ref.js";
+import { substitute as u, formatNumber as p } from "@arcgis/core/intl.js";
+import { isFeatureItem as f, isLayerItem as v, isGroupLayerItem as b } from "@arcgis/core/widgets/support/SelectionList/selectionListUtils.js";
+import C from "@arcgis/core/widgets/support/SelectionList/SelectionListViewModel.js";
+import { LitElement as x, createEvent as $, nothing as h, safeClassMap as c } from "@arcgis/lumina";
+import { usePropertyChange as F } from "@arcgis/lumina/controllers";
+import { u as M } from "../../chunks/useT9n.js";
+import { m as L } from "../../chunks/useViewModel.js";
+const r = {
   container: "container",
   flowItem: "flow-item",
   layerDropdown: "layer-dropdown",
@@ -19,18 +19,17 @@ const c = {
   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 {
+  panel: "panel"
+}, S = y`: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)}calcite-chip{align-self:center;margin-inline:var(--calcite-spacing-xxs);line-height:initial}.item-count{display:flex;gap:.5em;align-items:center}`, T = L(C);
+class k extends x {
   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();
+    super(...arguments), this.viewModel = T(this), this.messages = M(), 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.hideChip = !1, this.hideChipCloseButton = !1, 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.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.arcgisClear = $(), this.arcgisPropertyChange = F()("state"), this.arcgisReady = $();
   }
   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 };
+    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, hideChip: 5, hideChipCloseButton: 5, hideFilter: 5, hideFilterNotice: 5, hideHeader: 5, hideItemCloseActions: 5, hideItemCount: 5, hideItemIcons: 5, hideItemMenus: 5, hideLayerFilter: 5, hideMenu: 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;
+    this.styles = S;
   }
   #i;
   #t;
@@ -113,7 +112,7 @@ class P extends M {
   }
   connectedCallback() {
     super.connectedCallback(), this.#e = new IntersectionObserver((e, t) => {
-      const { messages: a } = this;
+      const { messages: s } = this;
       e.forEach((i) => {
         if (!i.isIntersecting)
           return;
@@ -122,22 +121,35 @@ class P extends M {
           t.unobserve(l);
           return;
         }
-        const d = l.getAttribute("data-thumbnail-key"), o = d ? this._getFeatureItemByThumbnailKey(d) : void 0;
-        if (!o)
+        const d = l.getAttribute("data-thumbnail-key"), n = d ? this._getFeatureItemByThumbnailKey(d) : void 0;
+        if (!n)
           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);
+        const m = n.title && s.previewTemplateAriaLabel ? u(s.previewTemplateAriaLabel, { label: n.title }) : s.preview;
+        if (n.thumbnail) {
+          l.appendChild(n.thumbnail);
           return;
         }
-        o.fetchThumbnail({ ariaLabel: m }).then((h) => h && l.appendChild(h)).catch(() => this.#t.delete(l));
+        n.fetchThumbnail({ ariaLabel: m }).then((g) => g && l.appendChild(g)).catch(() => this.#t.delete(l));
       });
     });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.#e?.disconnect();
   }
+  _isDropdownItemVisible(e, t) {
+    const { hidden: s, type: i } = t;
+    return (typeof s == "function" ? s({ item: e }) : s) ? !1 : !!(!i || i === "feature" && f(e) || i === "layer" && v(e) || i === "group" && b(e));
+  }
+  _handleClearSelection() {
+    this.clear(), this.arcgisClear.emit();
+  }
+  _onFeatureItemBlur() {
+    this.highlightOnHoverDisabled || this.viewModel.removeTemporaryHighlight();
+  }
+  _onFeatureItemFocus(e) {
+    this.highlightOnHoverDisabled || this.viewModel.addTemporaryHighlight(e);
+  }
   _closeItemMenu(e) {
     (!e || e === this.itemWithOpenMenu) && (this.itemWithOpenMenu = void 0);
   }
@@ -156,73 +168,77 @@ class P extends M {
   _afterListItemSelect(e, t) {
     t.stopPropagation(), this._closeItemMenu(), this.afterListItemSelect?.({ item: e });
   }
+  _getTooltipForChip(e) {
+    const { messages: t } = this;
+    return !t?.selectionCount || !t?.clearSelectionCount ? "" : this.hideChipCloseButton ? u(t.selectionCount, { count: e }) : u(t.clearSelectionCount, { count: e });
+  }
   #o() {
-    if (this.hideTotalCount || this.hideHeader)
+    if (this.hideChip || 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>`;
+    const { count: e } = this, t = p(e), s = !this.hideChipCloseButton && e > 0;
+    return a`<calcite-chip appearance=outline .closable=${s} .closed=${e === 0} .disabled=${this.disabled} .icon=${this.maxVisibleFeatureCountExceeded ? "exclamation-mark-triangle" : void 0} .label=${t} .scale=${this.visualScale} slot=header-actions-end title=${this._getTooltipForChip(e) ?? h} @calciteChipClose=${this._handleClearSelection}>${t}</calcite-chip>`;
   }
-  #c() {
+  #r() {
     if (this.hideHeader || this.hideMenu)
       return;
-    const { menuScale: e, messages: t } = this, a = this.disabled || this.count === 0;
+    const { menuScale: e, messages: t } = this, s = 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>`
+      a`<calcite-action .disabled=${s} icon=reset .scale=${e} slot=header-menu-actions .text=${t.clear ?? ""} text-enabled @click=${this.clear}></calcite-action>`,
+      a`<calcite-action .disabled=${s} icon=folders .scale=${e} slot=header-menu-actions .text=${t.collapseAll ?? ""} text-enabled @click=${this.collapseAll}></calcite-action>`
     ];
   }
-  #r() {
+  #c() {
     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 }) => {
+    const s = t.allLayersCount ? u(t.allLayersCount, { count: e.length }) : "";
+    return a`<calcite-combobox class=${c(r.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>`;
+    }}>${o("all-layers", a`<calcite-combobox-item .heading=${s} 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 } }) => {
+      return a`<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>`);
+    return o(e.key, a`<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>`;
+      return a`<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);
+    return this.activeLayerItem ? this.#l(this.activeLayerItem) : e.map((t) => b(t) ? this.#v(t) : v(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>`;
+      return a`<calcite-notice class=${c(r.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>`;
+    const { messages: t } = this, s = p(e.total), i = p(e.visibleTotal), l = t.selectionCount ? u(t.selectionCount, { count: s }) : void 0;
+    return !this.hasFilterText && e.maxVisibleFeatureCountExceeded ? a`<span class=${c(r.itemCount)} slot=content-end title=${l ?? h}><calcite-icon icon=exclamation-mark-triangle scale=s title=${t.tooManyFeatures ?? h}></calcite-icon>${`${p(this.maxVisibleFeatureCountPerLayer)}+`}</span>` : a`<span class=${c(r.itemCount)} slot=content-end title=${l ?? h}>${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;
+    const { messages: t } = this, s = this.itemWithOpenMenu === e, i = f(e), l = i ? t.deselectFeature : v(e) ? 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=${() => {
+      o("dropdown", a`<calcite-dropdown .open=${s} 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
+      }}>${o("action", a`<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>`);
+      s ? o("dropdown-group", a`<calcite-dropdown-group selection-mode=none>${this.hideZoomToButton ? void 0 : o("zoom-to", a`<calcite-dropdown-item icon-start=layer-zoom-to @calciteDropdownItemSelect=${() => this.goToItem(e)}>${t.zoomTo}</calcite-dropdown-item>`)}${o("select-single", a`<calcite-dropdown-item icon-start=selection-filter @calciteDropdownItemSelect=${() => this.selectItem(e)}>${i ? t.onlySelectFeature : t.onlySelectThis}</calcite-dropdown-item>`)}${o("clear-selection", a`<calcite-dropdown-item icon-start=selection-x @calciteDropdownItemSelect=${() => this.deselectItem(e)}>${l}</calcite-dropdown-item>`)}${this.listItemActionConfigurations?.map((d) => {
+        const { disabled: n, label: m } = d;
+        if (this._isDropdownItemVisible(e, d))
+          return o(`custom-action-${m}`, a`<calcite-dropdown-item .disabled=${typeof n == "function" ? n({ item: e }) : !!n} .iconStart=${d.icon ?? void 0} @calciteDropdownItemSelect=${() => d.callback({ item: e })}>${m}</calcite-dropdown-item>`);
       })}</calcite-dropdown-group>`) : void 0}</calcite-dropdown>`)
     ];
   }
@@ -230,8 +246,8 @@ class P extends M {
     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) => {
+    const { displayMode: s } = this;
+    return s === "layer" || s === "feature" ? this.#s(e.items) : o(e.key, a`<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);
@@ -244,14 +260,14 @@ class P extends M {
       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) => {
+    const { messages: t } = this, s = e.title || t.untitledLayer;
+    return o(e.key, a`<calcite-list-item .closable=${!this.hideItemCloseActions} .expanded=${e.expanded} .iconStart=${this.hideItemIcons ? void 0 : e.iconName} .label=${s} title=${(e.layerIsVisible ? void 0 : t.layerIsNotVisible) ?? h} .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>`);
+    }} @calciteListItemSelect=${(i) => this._afterListItemSelect(e, i)}>${this.#p(e)}${this.#a(e)}${this.#n(e.featureItems)}${e.maxVisibleFeatureCountExceeded ? a`<calcite-notice class=${c(r.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));
@@ -259,21 +275,21 @@ class P extends M {
   #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>`);
+    const { hideItemIcons: t, messages: s } = this, i = e.title || s.untitledFeature, l = !t && this.displayMode !== "feature", d = !t && e.supportsThumbnail;
+    return o(e.key, a`<calcite-list-item class=${c(l ? r.listItemFeatureIcon : r.listItemFeature)} .closable=${!this.hideItemCloseActions} .iconStart=${d ? void 0 : e.iconName} .label=${i} .unavailable=${this._isItemUnavailable(e)} .value=${i} @blur=${this._onFeatureItemBlur} @calciteListItemClose=${(n) => {
+      n.stopPropagation(), this.deselectItem(e);
+    }} @calciteListItemSelect=${(n) => this._afterListItemSelect(e, n)} @focus=${this._onFeatureItemFocus.bind(this, e)} @pointerenter=${this._onFeatureItemFocus.bind(this, e)} @pointerleave=${this._onFeatureItemBlur}>${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>`);
+    if (!(this.hideItemIcons || !e.supportsThumbnail))
+      return o("thumbnail-container", a`<div class=${c(r.listItemIcon)} slot=content-start>${o(e.thumbnailKey, a`<span data-thumbnail-key=${e.thumbnailKey ?? h} ${w(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>`;
+    return a`<div><calcite-flow><calcite-flow-item class=${c(r.flowItem)} .heading=${e} .loading=${this.state === "loading"} overlay-positioning=fixed .scale=${this.visualScale} selected><calcite-panel class=${c(r.panel)} .disabled=${this.disabled} overlay-positioning=fixed .scale=${this.visualScale}><div class=${c(r.container)}>${this.#c()}${this.#d()}${this.#u()}${this.#m()}</div></calcite-panel>${this.#o()}${this.#r()}</calcite-flow-item></calcite-flow></div>`;
   }
 }
-y("arcgis-selection-list", P);
+I("arcgis-selection-list", k);
 export {
-  P as ArcgisSelectionList
+  k as ArcgisSelectionList
 };