@arcgis/map-components 5.2.0-next.121 → 5.2.0-next.123

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 { c as I } from "../../chunks/runtime.js";
+import { css as y, html as a } 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 { 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 o = {
   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"), r = d ? this._getFeatureItemByThumbnailKey(d) : void 0;
+        if (!r)
           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 = r.title && s.previewTemplateAriaLabel ? u(s.previewTemplateAriaLabel, { label: r.title }) : s.preview;
+        if (r.thumbnail) {
+          l.appendChild(r.thumbnail);
           return;
         }
-        o.fetchThumbnail({ ariaLabel: m }).then((h) => h && l.appendChild(h)).catch(() => this.#t.delete(l));
+        r.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(o.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>`;
+    }}>${n("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 n(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(o.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(o.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(o.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=${() => {
+      n("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
+      }}>${n("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 ? n("dropdown-group", a`<calcite-dropdown-group selection-mode=none>${this.hideZoomToButton ? void 0 : n("zoom-to", a`<calcite-dropdown-item icon-start=layer-zoom-to @calciteDropdownItemSelect=${() => this.goToItem(e)}>${t.zoomTo}</calcite-dropdown-item>`)}${n("select-single", a`<calcite-dropdown-item icon-start=selection-filter @calciteDropdownItemSelect=${() => this.selectItem(e)}>${i ? t.onlySelectFeature : t.onlySelectThis}</calcite-dropdown-item>`)}${n("clear-selection", a`<calcite-dropdown-item icon-start=selection-x @calciteDropdownItemSelect=${() => this.deselectItem(e)}>${l}</calcite-dropdown-item>`)}${this.listItemActionConfigurations?.map((d) => {
+        const { disabled: r, label: m } = d;
+        if (this._isDropdownItemVisible(e, d))
+          return n(`custom-action-${m}`, a`<calcite-dropdown-item .disabled=${typeof r == "function" ? r({ item: e }) : !!r} .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) : n(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 n(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(o.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 { messages: t } = this, s = e.title || t.untitledFeature, i = !this.hideItemIcons && this.displayMode !== "feature";
+    return n(e.key, a`<calcite-list-item class=${c(i ? o.listItemFeatureIcon : o.listItemFeature)} .closable=${!this.hideItemCloseActions} .label=${s} .unavailable=${this._isItemUnavailable(e)} .value=${s} @blur=${this._onFeatureItemBlur} @calciteListItemClose=${(l) => {
+      l.stopPropagation(), this.deselectItem(e);
+    }} @calciteListItemSelect=${(l) => this._afterListItemSelect(e, l)} @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>`);
+      return n("thumbnail-container", a`<div class=${c(o.listItemIcon)} slot=content-start>${n(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(o.flowItem)} .heading=${e} .loading=${this.state === "loading"} overlay-positioning=fixed .scale=${this.visualScale} selected><calcite-panel class=${c(o.panel)} .disabled=${this.disabled} overlay-positioning=fixed .scale=${this.visualScale}><div class=${c(o.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
 };

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

@@ -76,6 +76,12 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
    * @since 5.2
    */
   accessor defaultPointToolOptions: SelectionOperationProperties;
+  /**
+   * The default configuration for the polygon tool.
+   *
+   * @since 5.2
+   */
+  accessor defaultPolygonToolOptions: SelectionOperationProperties;
   /**
    * The default configuration for the rectangle tool.
    *
@@ -108,6 +114,14 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
    * @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 whether the lasso tool should be hidden. The lasso tool allows for freehand selection of features.
    *
@@ -140,6 +154,14 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
    * @since 5.2
    */
   accessor hidePointTool: boolean;
+  /**
+   * Indicates whether the polygon tool should be hidden. The polygon tool allows for selecting features
+   * by drawing a polygon.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hidePolygonTool: boolean;
   /**
    * Indicates whether the progress indicator should be hidden.
    *
@@ -197,6 +219,7 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
       countTruncated: string;
       lasso: string;
       pan: string;
+      polygon: string;
       point: string;
       processing: string;
       rectangle: string;
@@ -206,8 +229,10 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
       replaceSelection: string;
       selectFeatures: string;
       selectByLasso: string;
+      selectByPolygon: string;
       selectByPoint: string;
       selectByRectangle: string;
+      selectionCount: string;
   }> & T9nMeta<{
       componentLabel: string;
       add: string;
@@ -217,6 +242,7 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
       countTruncated: string;
       lasso: string;
       pan: string;
+      polygon: string;
       point: string;
       processing: string;
       rectangle: string;
@@ -226,8 +252,10 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
       replaceSelection: string;
       selectFeatures: string;
       selectByLasso: string;
+      selectByPolygon: string;
       selectByPoint: string;
       selectByRectangle: string;
+      selectionCount: string;
   }>;
   /**
    * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
@@ -422,7 +450,17 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
    */
   readonly arcgisBeforeActivate: import("@arcgis/lumina").TargetedEvent<this, SelectionToolbarViewModelEvents["before-activate"]>;
   /**
-   * Fires when the [selection operation](/references/core/views/selection/SelectionOperation/) is complete and results have been processed.
+   * 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' event emitted by the associated [selection manager](/references/core/views/SelectionManager/).
+   *
+   * @since 5.2
+   */
+  readonly arcgisClear: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires when the [selection operation](/references/core/views/selection/SelectionOperation/) is complete
+   * or canceled and results have been processed.
    *
    * @since 5.2
    * @example
@@ -446,7 +484,8 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Fires when the potential selection set changes while drawing. This event will not fire unless
-   * the [syncWhileDrawing](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/#syncWhileDrawing) property is set to `true`. For the final selection set, use the [complete ](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/#event-arcgisComplete) event.
+   * the [syncWhileDrawing](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/#syncWhileDrawing) property is set to `true`. For the final selection set, use the [complete ](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/#event-arcgisComplete) event
+   * or refer to the associated [selection manager](/references/core/views/SelectionManager/).
    *
    * @since 5.2
    * @example
@@ -465,6 +504,7 @@ export abstract class ArcgisSelectionToolbar extends LitElement {
   readonly arcgisSelectionChange: import("@arcgis/lumina").TargetedEvent<this, SelectionToolbarViewModelEvents["selection-change"]>;
   readonly "@eventTypes": {
     arcgisBeforeActivate: ArcgisSelectionToolbar["arcgisBeforeActivate"]["detail"];
+    arcgisClear: ArcgisSelectionToolbar["arcgisClear"]["detail"];
     arcgisComplete: ArcgisSelectionToolbar["arcgisComplete"]["detail"];
     arcgisPropertyChange: ArcgisSelectionToolbar["arcgisPropertyChange"]["detail"];
     arcgisReady: ArcgisSelectionToolbar["arcgisReady"]["detail"];

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

@@ -1,28 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as g } from "../../chunks/runtime.js";
-import { css as v, html as a } from "lit";
-import { keyed as h } from "lit/directives/keyed.js";
-import { substitute as p, formatNumber as m } from "@arcgis/core/intl.js";
-import T from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
-import { LitElement as b, createEvent as y, nothing as r } from "@arcgis/lumina";
+import { c as v } from "../../chunks/runtime.js";
+import { css as T, html as s } from "lit";
+import { keyed as p } from "lit/directives/keyed.js";
+import { substitute as h, formatNumber as y } from "@arcgis/core/intl.js";
+import m from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
+import { LitElement as b, createEvent as u, nothing as a } from "@arcgis/lumina";
 import { usePropertyChange as w } from "@arcgis/lumina/controllers";
 import { reEmitEvent as d } from "@arcgis/lumina-toolkit/reEmitEvent";
 import { u as M } from "../../chunks/useT9n.js";
 import { m as O } from "../../chunks/useViewModel.js";
-const S = v`:host{width:100%;display:flex;>*{align-items:center;align-self:center;height:100%;width:100%}}.root{display:flex;flex-direction:column}calcite-action-bar[layout=horizontal]{width:100%;calcite-chip{margin-inline-start:auto}}calcite-action-bar[layout=vertical]{height:100%;calcite-chip{margin-block-start:auto}}calcite-action-bar slot{align-items:center}calcite-dropdown:has(calcite-action:not([text-enabled])){align-self:center}calcite-action:not([text-enabled]){align-self:center}calcite-chip{display:flex;align-self:center;line-height:initial}calcite-dropdown{calcite-icon{margin-inline-start:var(--calcite-space-2xs)}}calcite-chip[closed]{display:inline-flex}calcite-progress{--calcite-progress-background-color: transparent}`, u = {
+const C = T`:host{width:100%;display:flex;>*{align-items:center;align-self:center;height:100%;width:100%}}.root{display:flex;flex-direction:column}calcite-action-bar[layout=horizontal]{width:100%;calcite-chip{margin-inline-start:auto}}calcite-action-bar[layout=vertical]{height:100%;calcite-chip{margin-block-start:auto}}calcite-action-bar slot{align-items:center}calcite-dropdown:has(calcite-action:not([text-enabled])){align-self:center}calcite-action:not([text-enabled]){align-self:center}calcite-chip{display:flex;align-self:center;line-height:initial}calcite-dropdown{calcite-icon{margin-inline-start:var(--calcite-space-2xs)}}calcite-chip[closed]{display:inline-flex}calcite-progress{--calcite-progress-background-color: transparent}`, g = {
   replace: "overwrite-features",
   add: "cursor-plus",
   remove: "cursor-minus"
-}, $ = O(T);
-class D extends b {
+}, S = O(m);
+class $ extends b {
   constructor() {
-    super(...arguments), this.viewModel = $(this), this.messages = M(), this.autoDestroyDisabled = !1, this.disabled = !1, this.icon = "selection-set", this.view = this.viewModel.view, this.activeOperation = this.viewModel.activeOperation, this.availableOperationTypes = ["replace", "add", "remove"], this.continuousSelectionEnabled = this.viewModel.continuousSelectionEnabled, this.defaultLassoToolOptions = this.viewModel.defaultLassoToolOptions, this.defaultOperationType = this.viewModel.defaultOperationType, this.defaultPointToolOptions = this.viewModel.defaultPointToolOptions, this.defaultRectangleToolOptions = this.viewModel.defaultRectangleToolOptions, this.effectiveSelectionManager = this.viewModel.effectiveSelectionManager, this.effectiveSources = this.viewModel.effectiveSources, this.hideChip = !1, this.hideLassoTool = !1, this.hideOperationTypeControls = !1, this.hidePanTool = !1, this.hidePointTool = !1, this.hideProgress = !1, this.hideRectangleTool = !1, this.layout = "horizontal", this.returnFeatureTitleFields = this.viewModel.returnFeatureTitleFields, this.selectionManager = this.viewModel.selectionManager, this.showTextLabels = !1, this.sources = this.viewModel.sources, this.toolConfigs = this.viewModel.toolConfigs, this.visualScale = "m", this.arcgisBeforeActivate = d(() => this.viewModel, "before-activate"), this.arcgisComplete = d(() => this.viewModel, "complete"), this.arcgisPropertyChange = w()("activeOperation", "state"), this.arcgisReady = y(), this.arcgisSelectionChange = d(() => this.viewModel, "selection-change");
+    super(...arguments), this.viewModel = S(this), this.messages = M(), this.autoDestroyDisabled = !1, this.disabled = !1, this.icon = "selection-set", this.view = this.viewModel.view, this.activeOperation = this.viewModel.activeOperation, this.availableOperationTypes = ["replace", "add", "remove"], this.continuousSelectionEnabled = this.viewModel.continuousSelectionEnabled, this.defaultLassoToolOptions = this.viewModel.defaultLassoToolOptions, this.defaultOperationType = this.viewModel.defaultOperationType, this.defaultPolygonToolOptions = this.viewModel.defaultPolygonToolOptions, this.defaultPointToolOptions = this.viewModel.defaultPointToolOptions, this.defaultRectangleToolOptions = this.viewModel.defaultRectangleToolOptions, this.effectiveSelectionManager = this.viewModel.effectiveSelectionManager, this.effectiveSources = this.viewModel.effectiveSources, this.hideChip = !1, this.hideChipCloseButton = !1, this.hideLassoTool = !1, this.hideOperationTypeControls = !1, this.hidePanTool = !1, this.hidePolygonTool = !1, this.hidePointTool = !1, this.hideProgress = !1, this.hideRectangleTool = !1, this.layout = "horizontal", this.returnFeatureTitleFields = this.viewModel.returnFeatureTitleFields, this.selectionManager = this.viewModel.selectionManager, this.showTextLabels = !1, this.sources = this.viewModel.sources, this.toolConfigs = this.viewModel.toolConfigs, this.visualScale = "m", this.arcgisBeforeActivate = d(() => this.viewModel, "before-activate"), this.arcgisClear = u(), this.arcgisComplete = d(() => this.viewModel, "complete"), this.arcgisPropertyChange = w()("activeOperation", "state"), this.arcgisReady = u(), this.arcgisSelectionChange = d(() => this.viewModel, "selection-change");
   }
   static {
-    this.properties = { _effectiveDisabled: 16, _effectiveOperationType: 16, _processing: 16, autoDestroyDisabled: 5, disabled: 7, icon: 1, label: 1, referenceElement: 1, view: 0, activeOperation: 32, availableOperationTypes: 0, continuousSelectionEnabled: 5, defaultLassoToolOptions: 0, defaultOperationType: 1, defaultPointToolOptions: 0, defaultRectangleToolOptions: 0, effectiveSelectionManager: 32, effectiveSources: 32, hideChip: 5, hideLassoTool: 5, hideOperationTypeControls: 5, hidePanTool: 5, hidePointTool: 5, hideProgress: 5, hideRectangleTool: 5, layerViewPreferenceDisabled: 5, layout: 1, returnFeatureTitleFields: 5, returnGeometryDisabled: 5, selectionManager: 0, showTextLabels: 5, sources: 0, state: 32, syncResultsDisabled: 5, syncWhileDrawing: 5, toolConfigs: 0, visualScale: 1 };
+    this.properties = { _effectiveDisabled: 16, _effectiveOperationType: 16, _processing: 16, autoDestroyDisabled: 5, disabled: 7, icon: 1, label: 1, referenceElement: 1, view: 0, activeOperation: 32, availableOperationTypes: 0, continuousSelectionEnabled: 5, defaultLassoToolOptions: 0, defaultOperationType: 1, defaultPolygonToolOptions: 0, defaultPointToolOptions: 0, defaultRectangleToolOptions: 0, effectiveSelectionManager: 32, effectiveSources: 32, hideChip: 5, hideChipCloseButton: 5, hideLassoTool: 5, hideOperationTypeControls: 5, hidePanTool: 5, hidePolygonTool: 5, hidePointTool: 5, hideProgress: 5, hideRectangleTool: 5, layerViewPreferenceDisabled: 5, layout: 1, returnFeatureTitleFields: 5, returnGeometryDisabled: 5, selectionManager: 0, showTextLabels: 5, sources: 0, state: 32, syncResultsDisabled: 5, syncWhileDrawing: 5, toolConfigs: 0, visualScale: 1 };
   }
   static {
-    this.styles = S;
+    this.styles = C;
   }
   get _effectiveDisabled() {
     return this.disabled || this.state === "disabled";
@@ -81,6 +81,9 @@ class D extends b {
     if (!this._effectiveDisabled)
       return this.viewModel.toggleTool(e);
   }
+  _handleClearSelection() {
+    this.effectiveSelectionManager?.clear(), this.arcgisClear.emit();
+  }
   _getLabelForSelectionOperationType(e) {
     const { messages: t } = this;
     switch (e) {
@@ -103,28 +106,38 @@ class D extends b {
         return t?.remove;
     }
   }
-  _getTextForChip() {
-    const { effectiveSelectionManager: e, layout: t, messages: i, visualScale: o } = this, s = e?.count ?? 0, l = o === "l" ? 999 : 99;
-    return i.countTruncated && s > l && t === "vertical" ? p(i.countTruncated, {
+  _getTextForChip(e) {
+    const { layout: t, messages: i, visualScale: o } = this, l = o === "l" ? 999 : 99;
+    return i.countTruncated && e > l && t === "vertical" ? h(i.countTruncated, {
       count: l
-    }) : m(s);
+    }) : y(e);
+  }
+  _getTooltipForChip(e) {
+    const { messages: t } = this;
+    return !t?.selectionCount || !t?.clearSelectionCount ? "" : this.hideChipCloseButton || e === 0 ? h(t.selectionCount, { count: e }) : h(t.clearSelectionCount, { count: e });
   }
   #i() {
     if (this.hideProgress)
       return;
     const e = this.messages.processing;
-    return a`<calcite-progress aria-label=${e ?? r} .label=${e} .type=${this._processing ? "indeterminate" : "determinate"}></calcite-progress>`;
+    return s`<calcite-progress aria-label=${e ?? a} .label=${e} .type=${this._processing ? "indeterminate" : "determinate"}></calcite-progress>`;
   }
   #o() {
-    return h("tools-group", a`<calcite-action-group>${this.#s()}${this.#a()}</calcite-action-group>`);
+    return p("tools-group", s`<calcite-action-group>${this.#s()}${this.#l()}</calcite-action-group>`);
   }
   #s() {
-    return [this.#l(), this.#n(), this.#d(), this.#c()];
+    return [
+      this.#a(),
+      this.#r(),
+      this.#c(),
+      this.#d(),
+      this.#h()
+    ];
   }
-  #a() {
+  #l() {
     return this.toolConfigs.map(({ toolName: e, icon: t }) => this.#e(e, t));
   }
-  #l() {
+  #a() {
     if (this.hidePanTool)
       return;
     const e = this.messages.pan ?? "";
@@ -132,24 +145,32 @@ class D extends b {
       active: !this.activeOperation,
       disabled: this._effectiveDisabled,
       icon: "pan",
-      onclick: () => this.cancel(),
+      onclick: () => {
+        this.cancel();
+      },
       text: e,
       title: e
     });
   }
-  #r() {
+  #n() {
     if (this.hideChip)
       return;
-    const { effectiveSelectionManager: e, messages: t } = this, i = e?.count ?? 0, o = this._getTextForChip(), s = t.clearSelectionCount ? p(t.clearSelectionCount, { count: i }) : void 0;
-    return a`<calcite-chip appearance=outline .closable=${i > 0} .disabled=${this._effectiveDisabled || i === 0} .label=${o} .scale=${this.visualScale} title=${s ?? r} @calciteChipClose=${() => e?.clear()}>${o}</calcite-chip>`;
+    const { effectiveSelectionManager: e } = this, t = e?.count ?? 0, i = this._getTextForChip(t), o = !this.hideChipCloseButton && t > 0;
+    return s`<calcite-chip appearance=outline .closable=${o} .disabled=${this._effectiveDisabled || t === 0} .label=${i} .scale=${this.visualScale} title=${this._getTooltipForChip(t) ?? a} @calciteChipClose=${this._handleClearSelection}>${i}</calcite-chip>`;
   }
-  #n() {
+  #r() {
     if (this.hidePointTool)
       return;
     const { messages: e } = this;
     return this.#e("point", "selection-set", e.point, e.selectByPoint);
   }
   #c() {
+    if (this.hidePolygonTool)
+      return;
+    const { messages: e } = this;
+    return this.#e("polygon", "polygon-select", e.polygon, e.selectByPolygon);
+  }
+  #h() {
     if (this.hideLassoTool)
       return;
     const { messages: e } = this;
@@ -161,35 +182,37 @@ class D extends b {
     const { messages: e } = this;
     return this.#e("rectangle", "cursor-marquee", e.rectangle, e.selectByRectangle);
   }
-  #h() {
+  #p() {
     const { availableOperationTypes: e } = this;
     if (this.hideOperationTypeControls || !e.length)
       return;
-    const { _effectiveOperationType: t, showTextLabels: i, visualScale: o } = this, s = u[t], l = this._getTextForSelectionOperationType(t), n = this._getLabelForSelectionOperationType(t);
-    return h("toggle-group", a`<calcite-action-group><calcite-dropdown overlay-positioning=fixed placement=bottom-start .scale=${o}><calcite-action class=tool-button .disabled=${this._effectiveDisabled} .icon=${s} .scale=${o} slot=trigger .text=${l ?? ""} .textEnabled=${i} title=${n ?? r}><calcite-icon icon=chevron-down scale=s></calcite-icon></calcite-action><calcite-dropdown-group>${e.map((c) => this.#p(c))}</calcite-dropdown-group></calcite-dropdown></calcite-action-group>`);
+    const { _effectiveOperationType: t, showTextLabels: i, visualScale: o } = this, l = g[t], n = this._getTextForSelectionOperationType(t), r = this._getLabelForSelectionOperationType(t);
+    return p("toggle-group", s`<calcite-action-group><calcite-dropdown overlay-positioning=fixed placement=bottom-start .scale=${o}><calcite-action class=tool-button .disabled=${this._effectiveDisabled} .icon=${l} .scale=${o} slot=trigger .text=${n ?? ""} .textEnabled=${i} title=${r ?? a}><calcite-icon icon=chevron-down scale=s></calcite-icon></calcite-action><calcite-dropdown-group>${e.map((c) => this.#u(c))}</calcite-dropdown-group></calcite-dropdown></calcite-action-group>`);
   }
-  #p(e) {
-    return a`<calcite-dropdown-item .iconStart=${u[e]} .selected=${this.defaultOperationType === e} @calciteDropdownItemSelect=${() => this.defaultOperationType = e}>${this._getLabelForSelectionOperationType(e)}</calcite-dropdown-item>`;
+  #u(e) {
+    return s`<calcite-dropdown-item .iconStart=${g[e]} .selected=${this.defaultOperationType === e} @calciteDropdownItemSelect=${() => this.defaultOperationType = e}>${this._getLabelForSelectionOperationType(e)}</calcite-dropdown-item>`;
   }
   #e(e, t = "selection", i = e, o = i) {
     return this.#t({
       active: this.activeOperation?.toolName === e,
       disabled: this._effectiveDisabled,
       icon: t,
-      onclick: () => this.toggleTool(e),
+      onclick: () => {
+        this.toggleTool(e);
+      },
       text: i,
       title: o
     });
   }
   #t(e) {
-    const { active: t, disabled: i, icon: o, onclick: s, text: l, title: n } = e, { showTextLabels: c, visualScale: f } = this;
-    return a`<calcite-action .active=${t} class=tool-button .disabled=${i} .icon=${o} @click=${s} .text=${l} .textEnabled=${c} title=${n ?? r} .scale=${f}></calcite-action>`;
+    const { active: t, disabled: i, icon: o, onclick: l, text: n, title: r } = e, { showTextLabels: c, visualScale: f } = this;
+    return s`<calcite-action .active=${t} class=tool-button .disabled=${i} .icon=${o} @click=${l} .text=${n} .textEnabled=${c} title=${r ?? a} .scale=${f}></calcite-action>`;
   }
   render() {
-    return a`<div><calcite-action-bar expand-toggle-disabled .layout=${this.layout} overflow-mode=none .scale=${this.visualScale}>${this.#h()}${this.#o()}${this.#r()}</calcite-action-bar>${this.#i()}</div>`;
+    return s`<div><calcite-action-bar expand-toggle-disabled .layout=${this.layout} overflow-mode=none .scale=${this.visualScale}>${this.#p()}${this.#o()}${this.#n()}</calcite-action-bar>${this.#i()}</div>`;
   }
 }
-g("arcgis-selection-toolbar", D);
+v("arcgis-selection-toolbar", $);
 export {
-  D as ArcgisSelectionToolbar
+  $ as ArcgisSelectionToolbar
 };