@arcgis/map-components 5.2.0-next.1 → 5.2.0-next.100

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

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

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

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

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

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

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

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