@arcgis/portal-components 6.0.0-next.2 → 6.0.0-next.21

package/dist/components/arcgis-portal-delete-items/index.js

@@ -5,13 +5,12 @@ import "@esri/calcite-components/components/calcite-list-item";
 import "../arcgis-portal-item-type/index.js";
 import "@esri/calcite-components/components/calcite-block";
 import "@esri/calcite-components/components/calcite-icon";
-import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-notice";
 import "../arcgis-portal-review-related-items/index.js";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-scrim";
 import "@esri/calcite-components/components/calcite-panel";
-import "@esri/calcite-components/components/calcite-checkbox";
 import "../arcgis-portal-delete-items-review/index.js";
+import "@esri/calcite-components/components/calcite-checkbox";
 import "@esri/calcite-components/components/calcite-dialog";
 export * from "./customElement.js";

package/dist/components/arcgis-portal-delete-items/types.d.ts

@@ -8,6 +8,7 @@ export interface RecycleStatus extends DeleteCheckResult {
 export interface DeleteCheckResult {
   item: PortalItem;
   usedByItems: PortalItem[];
+  usedByItemsCount: number;
   sourceData: PortalItem | null;
   replacementItemFor: PortalItem[] | null;
   resultData: PortalItem[] | null;

package/dist/components/arcgis-portal-entity-picker/customElement.d.ts

@@ -2,34 +2,52 @@
 import type Portal from "@arcgis/core/portal/Portal.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { PortalEntityPickerEntityType, PortalEntityPickerMode, PortalEntityPickerSelection } from "../../types/portalEntityPicker.js";
+import type { ArcgisPortalItemCard } from "../arcgis-portal-item-card/customElement.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
 
 /**
  * Search for and select an item, group, or organization member from a portal.
+ * Item and group searches initially include all accessible results on the configured portal.
+ * The search bucket can narrow results to the signed-in user's content, group memberships,
+ * or organization, as applicable. Organization-member searches remain organization-only.
+ * The bucket selector is shown only when multiple search scopes are available.
+ * Changes to the signed-in account on an existing portal instance are not observed.
  *
  * @slot [list-start] - Content displayed before the search results.
  */
 export abstract class ArcgisPortalEntityPicker extends LitElement {
   /** @internal */
   protected _messages: {
+      allContent: string;
+      allGroups: string;
       clearSelection: string;
+      myContent: string;
+      myGroups: string;
+      myOrganization: string;
       noGroupsFound: string;
       noItemsFound: string;
       noUsersFound: string;
       searchFailed: string;
       searchGroups: string;
       searchItems: string;
+      searchIn: string;
       searchUsers: string;
       searching: string;
   } & T9nMeta<{
+      allContent: string;
+      allGroups: string;
       clearSelection: string;
+      myContent: string;
+      myGroups: string;
+      myOrganization: string;
       noGroupsFound: string;
       noItemsFound: string;
       noUsersFound: string;
       searchFailed: string;
       searchGroups: string;
       searchItems: string;
+      searchIn: string;
       searchUsers: string;
       searching: string;
   }>;
@@ -41,15 +59,27 @@ export abstract class ArcgisPortalEntityPicker extends LitElement {
   accessor entityType: PortalEntityPickerEntityType;
   /** The icon displayed in the search input. */
   accessor icon: Icon["icon"] | undefined;
+  /**
+   * Initial search text. Changing this value resets the search text and results.
+   *
+   * @default ""
+   */
+  accessor initialSearchTerm: string;
   /** Overrides for search text and other translated messages. */
   accessor messageOverrides: {
+      allContent?: string | undefined;
+      allGroups?: string | undefined;
       clearSelection?: string | undefined;
+      myContent?: string | undefined;
+      myGroups?: string | undefined;
+      myOrganization?: string | undefined;
       noGroupsFound?: string | undefined;
       noItemsFound?: string | undefined;
       noUsersFound?: string | undefined;
       searchFailed?: string | undefined;
       searchGroups?: string | undefined;
       searchItems?: string | undefined;
+      searchIn?: string | undefined;
       searchUsers?: string | undefined;
       searching?: string | undefined;
   };
@@ -71,6 +101,12 @@ export abstract class ArcgisPortalEntityPicker extends LitElement {
   accessor query: string | undefined;
   /** The currently selected entity. The component does not mutate this property. */
   accessor selected: PortalEntityPickerSelection | null;
+  /**
+   * Controls selection indicators for inline results. `none` keeps click and keyboard selection without controls.
+   *
+   * @default "single"
+   */
+  accessor selectionMode: Extract<ArcgisPortalItemCard["selection"], "none" | "single">;
   /** Sets focus on the search input. */
   setFocus(): Promise<void>;
   /**

package/dist/components/arcgis-portal-entity-picker/customElement.js

@@ -1,87 +1,187 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { c as m } from "../../chunks/runtime.js";
-import { css as y, html as n } from "lit";
-import { keyed as h } from "lit/directives/keyed.js";
-import { LitElement as f, createEvent as v, safeStyleMap as g } from "@arcgis/lumina";
-import { createRef as u, ref as d } from "lit/directives/ref.js";
-import { u as $ } from "../../chunks/useT9n.js";
-import { c as b } from "../../chunks/string.js";
-import { s as R } from "../../chunks/dom.js";
-import { a as T } from "../../chunks/portal.js";
-import { r as S } from "../../chunks/request.js";
+import { c as P } from "../../chunks/runtime.js";
+import { css as O, html as p } from "lit";
+import { keyed as y } from "lit/directives/keyed.js";
+import { LitElement as F, createEvent as L, safeStyleMap as E } from "@arcgis/lumina";
+import { createRef as T, ref as b } from "lit/directives/ref.js";
+import { u as x } from "../../chunks/useT9n.js";
+import { isAbortError as k } from "@arcgis/core/core/promiseUtils.js";
+import w from "@arcgis/core/portal/PortalQueryResult.js";
+import { c as G, a as S } from "../../chunks/string.js";
+import { s as M } from "../../chunks/groups2.js";
+import { s as z } from "../../chunks/dom.js";
+import { g as U } from "../../chunks/portal.js";
+import { r as D } from "../../chunks/request.js";
 import "../arcgis-portal-group-card/customElement.js";
 import "../arcgis-portal-item-card/customElement.js";
-import { S as k } from "../../chunks/utils.js";
+import { makeGenericController as q } from "@arcgis/lumina/controllers";
+import { S as N } from "../../chunks/utils.js";
 import "../arcgis-portal-user-avatar/customElement.js";
-const w = [
+const B = [
   "esri_livingatlas",
   "esri_boundaries",
   "esri_demographics",
   "esri_nav",
   "esri_webstyles"
 ];
-function I(o) {
-  return R(o.trim()).replace(/[!*+\-&|()[\]{}^~?:"\\]/gu, "\\$&");
+function W(a) {
+  return z(a.trim()).replace(/[!*+\-&|()[\]{}^~?:"\\]/gu, "\\$&");
 }
-async function _({
-  portal: o,
+async function Q({
+  portal: a,
   searchTerm: e,
   num: t = 100,
-  query: s
+  query: i,
+  signal: o
 }) {
-  const i = I(e), l = `${T(o)}portals/self/users/search`, r = [i ? `(${i})` : void 0, s?.trim() ? `(${s.trim()})` : void 0];
-  o.isPortal && r.push(...w.map((p) => `-username:${p}`));
-  const a = l.includes("www.arcgis.com") && o.isPortal ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
-  return await S({
-    url: l,
-    portal: o,
+  const r = W(e), s = `${U(a)}portals/self/users/search`, c = [r ? `(${r})` : void 0, i?.trim() ? `(${i.trim()})` : void 0];
+  a.isPortal && c.push(...B.map((d) => `-username:${d}`));
+  const u = s.includes("www.arcgis.com") && a.isPortal ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
+  return await D({
+    url: s,
+    portal: a,
     params: {
       num: Math.min(Math.max(t, 1), 100),
-      q: r.filter(Boolean).join(" AND "),
+      q: c.filter(Boolean).join(" AND "),
       sortField: "relevance"
     },
-    options: a
+    options: { ...u, ...o ? { signal: o } : {} }
   });
 }
-function A(...o) {
-  return o.map((e) => e?.trim()).filter((e) => !!e).map((e) => `(${e})`).join(" AND ");
+function R(a, e) {
+  const t = ["all"];
+  return e === "user" || !a.user?.username || (e === "item" && t.push("myContent"), t.push("myGroups"), a.user.orgId && t.push("myOrganization")), t;
 }
-async function P(o, e, t, s = {}) {
-  const i = Math.min(Math.max(s.num ?? 10, 1), 100);
-  if (e === "user")
-    try {
+function v(a) {
+  return `"${a.replace(/[\\"]/gu, "\\$&")}"`;
+}
+async function j(a) {
+  const { portal: e, entityType: t, searchTerm: i, signal: o } = a, r = Math.min(Math.max(a.num ?? 10, 1), 100), s = a.scope ?? "all";
+  try {
+    if (o?.throwIfAborted(), !R(e, t).includes(s))
+      throw new Error(`Search scope "${s}" is unavailable for ${t} searches.`);
+    if (t === "user")
       return {
         result: {
-          entityType: e,
-          result: await _({ portal: o, searchTerm: t, num: i, query: s.query })
+          entityType: t,
+          result: await Q({
+            portal: e,
+            searchTerm: i,
+            num: r,
+            query: a.query,
+            ...o ? { signal: o } : {}
+          })
         }
       };
-    } catch (c) {
-      return console.error(c), { error: { code: "unhandledError" } };
+    const c = G(i);
+    if (!c)
+      return {};
+    let l;
+    const u = e.user;
+    if (s === "myContent" && u)
+      l = `owner:${v(u.username)}`;
+    else if (s === "myOrganization" && u?.orgId)
+      l = `orgid:${v(u.orgId)}`;
+    else if (s === "myGroups" && u) {
+      if (t === "group") {
+        const n = await M(
+          e,
+          {
+            num: r,
+            q: S(c, a.query),
+            searchUserAccess: "groupMember",
+            searchUserName: u.username
+          },
+          { signal: o }
+        );
+        return {
+          result: {
+            entityType: t,
+            result: new w({ results: n.results, total: n.total })
+          }
+        };
+      }
+      const m = await u.fetchGroups();
+      if (o?.throwIfAborted(), !m.length)
+        return {
+          result: { entityType: t, result: new w({ results: [], total: 0 }) }
+        };
+      l = m.map(({ id: n }) => {
+        if (!n)
+          throw new Error("A membership group is missing its ID.");
+        return `group:${v(n)}`;
+      }).join(" OR ");
     }
-  const l = b(t);
-  if (!l)
-    return {};
-  const r = {
-    num: i,
-    query: A(l, s.query)
-  };
-  try {
-    return e === "group" ? { result: { entityType: e, result: await o.queryGroups(r) } } : { result: { entityType: e, result: await o.queryItems(r) } };
+    const d = {
+      num: r,
+      query: S(c, a.query, l)
+    };
+    return t === "group" ? { result: { entityType: t, result: await e.queryGroups(d, { signal: o }) } } : { result: { entityType: t, result: await e.queryItems(d, { signal: o }) } };
   } catch (c) {
+    if (o?.aborted || k(c))
+      throw c;
     return console.error(c), { error: { code: "unhandledError" } };
   }
 }
-const O = y`:host{display:block;inline-size:100%}.entity-picker{display:flex;flex-direction:column;gap:.5rem;min-inline-size:16rem}.entity-picker__results{max-block-size:22rem;overflow-y:auto}.entity-picker__cards{display:flex;flex-direction:column;gap:.5rem}.entity-picker__status{color:var(--calcite-color-text-3);font-size:.875rem;margin:0;padding:.75rem}.entity-picker__selection{align-items:center;display:flex;gap:.5rem}.entity-picker__selection-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entity-picker__input{inline-size:100%}`;
-class F extends f {
+const H = (a) => q((e, t) => {
+  let i = {
+    searchTerm: "",
+    scope: "all",
+    isSearching: !1,
+    searchFailed: !1
+  }, o, r;
+  const s = (n) => {
+    i = { ...i, ...n }, t.exports = { ...i, setSearchTerm: d, setScope: m };
+  }, c = () => {
+    o !== void 0 && (clearTimeout(o), o = void 0), r?.abort(), r = void 0;
+  }, l = async (n, h) => {
+    const { entityType: g, num: C, portal: I, query: _ } = e, { scope: $ } = i;
+    try {
+      const { error: f, result: A } = await j({
+        portal: I,
+        entityType: g,
+        searchTerm: n,
+        num: C,
+        query: _,
+        signal: h,
+        ...$ === "all" ? {} : { scope: $ }
+      });
+      h.aborted || s({ searchFailed: !!f, searchResult: A, isSearching: !1 });
+    } catch (f) {
+      !h.aborted && !k(f) && (console.error(f), s({ searchFailed: !0, searchResult: void 0, isSearching: !1 }));
+    }
+  }, u = (n) => {
+    const h = n.searchTerm.trim();
+    if (c(), s({ ...n, searchFailed: !1, searchResult: void 0, isSearching: !!h }), a(!!h), h) {
+      r = new AbortController();
+      const { signal: g } = r;
+      o = setTimeout(() => {
+        o = void 0, l(h, g);
+      }, N);
+    }
+  }, d = (n) => {
+    u({ searchTerm: n, scope: i.scope });
+  }, m = (n) => {
+    n !== i.scope && u({ searchTerm: i.searchTerm, scope: n });
+  };
+  return t.onUpdate((n) => {
+    (n.has("portal") || n.has("entityType") || n.has("query") || n.has("num") || n.has("initialSearchTerm")) && u({
+      searchTerm: e.initialSearchTerm,
+      scope: n.has("portal") || n.has("entityType") ? "all" : i.scope
+    });
+  }), t.onDisconnected(c), { ...i, setSearchTerm: d, setScope: m };
+}), K = O`:host{display:block;inline-size:100%}.entity-picker{display:flex;flex-direction:column;gap:.5rem;min-inline-size:16rem}.entity-picker__results{max-block-size:var(--arcgis-portal-entity-picker-results-max-block-size, 22rem);overflow-y:auto}.entity-picker__cards{display:flex;flex-direction:column;gap:.5rem}.entity-picker__status{color:var(--calcite-color-text-3);font-size:.875rem;margin:0;padding:.75rem}.entity-picker__selection{align-items:center;display:var(--arcgis-portal-entity-picker-selection-display, flex);gap:.5rem}.entity-picker__selection-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entity-picker__input{inline-size:100%}`;
+class V extends F {
   constructor() {
-    super(...arguments), this._messages = $({ blocking: !0, name: "portal-entity-picker" }), this.inputRef = u(), this.inputContainerRef = u(), this.resizeObserver = null, this.searchId = 0, this.searchTerm = "", this.isSearching = !1, this.searchFailed = !1, this.popoverOpen = !1, this.popoverWidth = 0, this.entityType = "group", this.mode = "inline", this.selected = null, this.num = 10, this.arcgisSelectionChange = v();
+    super(...arguments), this._messages = x({ blocking: !0, name: "portal-entity-picker" }), this.inputRef = T(), this.inputContainerRef = T(), this.resizeObserver = null, this.searchController = H((e) => {
+      (!e || this.mode === "popover") && (this.popoverOpen = e);
+    })(this), this.popoverOpen = !1, this.popoverWidth = 0, this.entityType = "group", this.mode = "inline", this.selectionMode = "single", this.selected = null, this.initialSearchTerm = "", this.num = 10, this.arcgisSelectionChange = L();
   }
   static {
-    this.properties = { searchTerm: 16, isSearching: 16, searchFailed: 16, searchResult: 16, popoverOpen: 16, popoverWidth: 16, portal: 0, entityType: 1, mode: 1, selected: 0, query: 1, num: 9, icon: 1, messageOverrides: 0 };
+    this.properties = { popoverOpen: 16, popoverWidth: 16, portal: 0, entityType: 1, mode: 1, selectionMode: 1, selected: 0, query: 1, initialSearchTerm: 1, num: 9, icon: 1, messageOverrides: 0 };
   }
   static {
-    this.styles = O;
+    this.styles = K;
   }
   get searchLabel() {
     const { entityType: e, _messages: t } = this;
@@ -102,52 +202,21 @@ class F extends f {
     this.updatePopoverWidth(), !(typeof ResizeObserver > "u" || !this.inputContainerRef.value) && (this.resizeObserver = new ResizeObserver(() => this.updatePopoverWidth()), this.resizeObserver.observe(this.inputContainerRef.value));
   }
   willUpdate(e) {
-    (e.has("portal") || e.has("entityType") || e.has("query") || e.has("num")) && this.resetSearch(), e.has("mode") && this.mode === "inline" && (this.popoverOpen = !1);
+    e.has("mode") && this.mode === "inline" && (this.popoverOpen = !1);
   }
   disconnectedCallback() {
-    this.cancelPendingSearch(), this.resizeObserver?.disconnect(), this.resizeObserver = null, super.disconnectedCallback();
+    this.resizeObserver?.disconnect(), this.resizeObserver = null, super.disconnectedCallback();
   }
   updatePopoverWidth() {
     requestAnimationFrame(() => {
       this.popoverWidth = this.inputContainerRef.value?.offsetWidth ?? 0;
     });
   }
-  cancelPendingSearch() {
-    return this.debounceId !== void 0 && (window.clearTimeout(this.debounceId), this.debounceId = void 0), this.searchId += 1, this.searchId;
-  }
-  resetSearch() {
-    this.cancelPendingSearch(), this.searchTerm = "", this.isSearching = !1, this.searchFailed = !1, this.searchResult = void 0, this.popoverOpen = !1;
-  }
-  scheduleSearch(e) {
-    const t = e.trim(), s = this.cancelPendingSearch();
-    if (this.searchFailed = !1, this.searchResult = void 0, !t) {
-      this.isSearching = !1, this.popoverOpen = !1;
-      return;
-    }
-    this.isSearching = !0, this.mode === "popover" && (this.popoverOpen = !0), this.debounceId = window.setTimeout(() => {
-      this.debounceId = void 0, this.search(t, s);
-    }, k);
-  }
-  async search(e, t) {
-    const { entityType: s, num: i, portal: l, query: r } = this;
-    try {
-      const { error: c, result: a } = await P(l, s, e, { num: i, query: r });
-      if (t !== this.searchId)
-        return;
-      this.searchFailed = !!c, this.searchResult = a;
-    } catch {
-      if (t !== this.searchId)
-        return;
-      this.searchFailed = !0, this.searchResult = void 0;
-    } finally {
-      t === this.searchId && (this.isSearching = !1);
-    }
-  }
   emitSelection(e) {
     this.arcgisSelectionChange.emit(e), this.mode === "popover" && this.togglePicker(!1);
   }
   getFocusableResults() {
-    const e = Array.from(this.renderRoot.querySelector('slot[name="list-start"]')?.assignedElements({ flatten: !0 }) ?? []).filter((s) => s instanceof HTMLElement && (s.tagName === "CALCITE-LIST-ITEM" || s.tabIndex >= 0)), t = Array.from(this.renderRoot.querySelectorAll("calcite-list-item, arcgis-portal-group-card, arcgis-portal-item-card"));
+    const e = Array.from(this.renderRoot.querySelector('slot[name="list-start"]')?.assignedElements({ flatten: !0 }) ?? []).filter((i) => i instanceof HTMLElement && (i.tagName === "CALCITE-LIST-ITEM" || i.tabIndex >= 0)), t = Array.from(this.renderRoot.querySelectorAll("calcite-list-item, arcgis-portal-group-card, arcgis-portal-item-card"));
     return [...e, ...t];
   }
   async focusResult(e) {
@@ -169,79 +238,92 @@ class F extends f {
     const t = this.getFocusableResults();
     if (!t.length)
       return;
-    const s = (e + t.length) % t.length;
-    await this.focusResult(t[s]);
+    const i = (e + t.length) % t.length;
+    await this.focusResult(t[i]);
   }
   handleResultsKeyDown(e) {
-    const t = this.getFocusableResults(), s = e.composedPath(), i = t.findIndex((r) => s.includes(r));
-    if (i === -1)
+    if (e.defaultPrevented)
+      return;
+    const t = this.getFocusableResults(), i = e.composedPath(), o = t.findIndex((s) => i.includes(s));
+    if (o === -1)
       return;
     if (this.mode === "inline" && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-      e.preventDefault(), this.focusResultAt(i + (e.key === "ArrowDown" ? 1 : -1));
+      e.preventDefault(), this.focusResultAt(o + (e.key === "ArrowDown" ? 1 : -1));
       return;
     }
-    const l = t[i];
-    if (l.tagName === "ARCGIS-PORTAL-GROUP-CARD" && (e.key === "Enter" || e.key === " ")) {
+    const r = t[o];
+    if (r.tagName === "ARCGIS-PORTAL-GROUP-CARD" && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault();
-      const { group: r } = l;
-      this.emitSelection({ entityType: "group", entity: r });
+      const { group: s } = r;
+      this.emitSelection({ entityType: "group", entity: s });
       return;
     }
-    if (l.tagName === "ARCGIS-PORTAL-ITEM-CARD" && (e.key === "Enter" || e.key === " ")) {
+    if (r.tagName === "ARCGIS-PORTAL-ITEM-CARD" && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault();
-      const { item: r } = l;
-      this.emitSelection({ entityType: "item", entity: r });
+      const { item: s } = r;
+      this.emitSelection({ entityType: "item", entity: s });
     }
   }
+  renderScopeSelector() {
+    const { entityType: e, portal: t, _messages: i } = this, { scope: o } = this.searchController, r = R(t, e);
+    return r.length <= 1 ? null : p`<calcite-select .label=${i.searchIn} scale=m @calciteSelectChange=${(s) => {
+      const c = r.find((l) => l === s.target.value);
+      c && this.searchController.setScope(c);
+    }}>${r.map((s) => p`<calcite-option .selected=${s === o} .value=${s}>${s === "all" ? e === "item" ? i.allContent : i.allGroups : i[s]}</calcite-option>`)}</calcite-select>`;
+  }
   renderGroup(e) {
-    return h(e.id, n`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.owner, e.access].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "group", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
+    return y(e.id, p`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.owner, e.access].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "group", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
   }
   renderInlineGroup(e) {
-    return h(e.id, n`<arcgis-portal-group-card .group=${e} .portal=${this.portal} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} selection=none show-summary .user=${this.portal.user ?? void 0} view=compact></arcgis-portal-group-card>`);
+    return y(e.id, p`<arcgis-portal-group-card .group=${e} .portal=${this.portal} .preview=${this.selectionMode === "none" ? "top" : void 0} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} .selection=${this.selectionMode} @arcgisGroupBrowserCardPreview=${() => this.emitSelection({ entityType: "group", entity: e })} @arcgisGroupCardSelect=${({ detail: t }) => {
+      t.selected && this.emitSelection({ entityType: "group", entity: t.group });
+    }} .user=${this.portal.user ?? void 0} view=compact></arcgis-portal-group-card>`);
   }
   renderItem(e) {
-    return h(e.id, n`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.type, e.owner].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "item", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
+    return y(e.id, p`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.type, e.owner].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "item", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
   }
   renderInlineItem(e) {
-    return h(e.id, n`<arcgis-portal-item-card .item=${e} .portal=${this.portal} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} selection=none show-summary .user=${this.portal.user ?? void 0} view=list></arcgis-portal-item-card>`);
+    return y(e.id, p`<arcgis-portal-item-card .item=${e} .portal=${this.portal} .preview=${this.selectionMode === "none" ? "top" : void 0} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} .selection=${this.selectionMode} @arcgisItemBrowserCardPreview=${() => this.emitSelection({ entityType: "item", entity: e })} @arcgisItemCardSelect=${({ detail: t }) => {
+      t.selected && this.emitSelection({ entityType: "item", entity: t.item });
+    }} .user=${this.portal.user ?? void 0} view=list></arcgis-portal-item-card>`);
   }
   renderUser(e) {
-    return h(e.username, n`<calcite-list-item .label=${e.fullName || e.username} .description=${e.username} .selected=${this.selected?.entityType === "user" && this.selected.entity.username === e.username} @calciteListItemSelect=${() => this.emitSelection({ entityType: "user", entity: e })}><arcgis-portal-user-avatar slot=content-start .portal=${this.portal} .user=${e} scale=m></arcgis-portal-user-avatar></calcite-list-item>`);
+    return y(e.username, p`<calcite-list-item .label=${e.fullName || e.username} .description=${e.username} .selected=${this.selected?.entityType === "user" && this.selected.entity.username === e.username} @calciteListItemSelect=${() => this.emitSelection({ entityType: "user", entity: e })}><arcgis-portal-user-avatar slot=content-start .portal=${this.portal} .user=${e} scale=m></arcgis-portal-user-avatar></calcite-list-item>`);
   }
   renderSearchResults() {
-    const { entityType: e, isSearching: t, searchFailed: s, searchResult: i, searchTerm: l, _messages: r } = this;
-    if (!l.trim())
+    const { entityType: e, _messages: t } = this, { isSearching: i, searchFailed: o, searchResult: r, searchTerm: s } = this.searchController;
+    if (!s.trim())
       return null;
-    if (t)
-      return n`<div role=status><calcite-loader .label=${r.searching} scale=s></calcite-loader></div>`;
-    if (s)
-      return n`<p class="entity-picker__status" role=alert>${r.searchFailed}</p>`;
-    if (!(i?.result.results ?? []).length) {
-      const a = e === "group" ? r.noGroupsFound : e === "item" ? r.noItemsFound : r.noUsersFound;
-      return n`<p class="entity-picker__status" role=status>${a}</p>`;
+    if (i)
+      return p`<div role=status><calcite-loader .label=${t.searching} scale=s></calcite-loader></div>`;
+    if (o)
+      return p`<p class="entity-picker__status" role=alert>${t.searchFailed}</p>`;
+    if (!(r?.result.results ?? []).length) {
+      const l = e === "group" ? t.noGroupsFound : e === "item" ? t.noItemsFound : t.noUsersFound;
+      return p`<p class="entity-picker__status" role=status>${l}</p>`;
     }
-    return this.mode === "inline" && i?.entityType === "group" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineGroup(a))}</div>` : this.mode === "inline" && i?.entityType === "item" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineItem(a))}</div>` : n`<calcite-list interaction-mode=interactive .label=${this.searchLabel} selection-mode=none><slot name=list-start></slot>${i?.entityType === "group" ? i.result.results.map((a) => this.renderGroup(a)) : i?.entityType === "item" ? i.result.results.map((a) => this.renderItem(a)) : i?.result.results.map((a) => this.renderUser(a))}</calcite-list>`;
+    return this.mode === "inline" && r?.entityType === "group" ? p`<div class="entity-picker__cards"><slot name=list-start></slot>${r.result.results.map((l) => this.renderInlineGroup(l))}</div>` : this.mode === "inline" && r?.entityType === "item" ? p`<div class="entity-picker__cards"><slot name=list-start></slot>${r.result.results.map((l) => this.renderInlineItem(l))}</div>` : p`<calcite-list interaction-mode=interactive .label=${this.searchLabel} .selectionMode=${this.mode === "inline" && this.selectionMode === "single" ? "single-persist" : "none"}><slot name=list-start></slot>${r?.entityType === "group" ? r.result.results.map((l) => this.renderGroup(l)) : r?.entityType === "item" ? r.result.results.map((l) => this.renderItem(l)) : r?.result.results.map((l) => this.renderUser(l))}</calcite-list>`;
   }
   renderPicker(e = !0) {
-    return n`<div class="entity-picker">${this.selectedLabel && n`<div class="entity-picker__selection"><span class="entity-picker__selection-label">${this.selectedLabel}</span><calcite-button appearance=transparent icon-start=x kind=neutral .label=${this._messages.clearSelection} @click=${() => this.arcgisSelectionChange.emit(null)} scale=s></calcite-button></div>` || ""}<div class="entity-picker__input" ${d(this.inputContainerRef)}><calcite-input .icon=${this.icon} .label=${this.searchLabel} .placeholder=${this.searchLabel} .value=${this.searchTerm} @click=${() => {
-      this.mode === "popover" && this.searchTerm.trim() && (this.popoverOpen = !0);
+    return p`<div class="entity-picker">${this.selectedLabel && p`<div class="entity-picker__selection"><span class="entity-picker__selection-label">${this.selectedLabel}</span><calcite-button appearance=transparent icon-start=x kind=neutral .label=${this._messages.clearSelection} @click=${() => this.arcgisSelectionChange.emit(null)} scale=s></calcite-button></div>` || ""}${this.renderScopeSelector()}<div class="entity-picker__input" ${b(this.inputContainerRef)}><calcite-input .icon=${this.icon} .clearable=${this.mode === "inline"} .label=${this.searchLabel} .placeholder=${this.searchLabel} .value=${this.searchController.searchTerm} @click=${() => {
+      this.mode === "popover" && this.searchController.searchTerm.trim() && (this.popoverOpen = !0);
     }} @keydown=${(t) => {
-      (t.key === "ArrowDown" || t.key === "ArrowUp") && this.searchResult?.result.results.length && (t.preventDefault(), this.focusResultAt(t.key === "ArrowDown" ? 0 : -1));
+      (t.key === "ArrowDown" || t.key === "ArrowUp") && this.searchController.searchResult?.result.results.length && (t.preventDefault(), this.focusResultAt(t.key === "ArrowDown" ? 0 : -1));
     }} @focus=${() => {
-      this.mode === "popover" && this.searchTerm.trim() && (this.popoverOpen = !0);
+      this.mode === "popover" && this.searchController.searchTerm.trim() && (this.popoverOpen = !0);
     }} @calciteInputInput=${(t) => {
-      this.searchTerm = t.target.value, this.scheduleSearch(this.searchTerm);
-    }} ${d(this.inputRef)}></calcite-input></div>${e && n`<div class="entity-picker__results" @keydown=${this.handleResultsKeyDown}>${this.renderSearchResults()}</div>` || ""}</div>`;
+      this.searchController.setSearchTerm(t.target.value);
+    }} ${b(this.inputRef)}></calcite-input></div>${e && p`<div class="entity-picker__results" @keydown=${this.handleResultsKeyDown}>${this.renderSearchResults()}</div>` || ""}</div>`;
   }
   render() {
-    return this.mode === "inline" ? this.renderPicker() : n`${this.renderPicker(!1)}<calcite-popover .label=${this.searchLabel} .open=${this.popoverOpen} placement=bottom-start .referenceElement=${this.inputContainerRef.value} trigger-disabled @calcitePopoverClose=${(e) => {
+    return this.mode === "inline" ? this.renderPicker() : p`${this.renderPicker(!1)}<calcite-popover .label=${this.searchLabel} .open=${this.popoverOpen} placement=bottom-start .referenceElement=${this.inputContainerRef.value} trigger-disabled @calcitePopoverClose=${(e) => {
       !e.target.open && this.popoverOpen && (this.popoverOpen = !1, requestAnimationFrame(() => {
         this.setFocus();
       }));
-    }}><div class="entity-picker__results" style=${g({ inlineSize: this.popoverWidth ? `${this.popoverWidth}px` : void 0 })}>${this.renderSearchResults()}</div></calcite-popover>`;
+    }}><div class="entity-picker__results" style=${E({ inlineSize: this.popoverWidth ? `${this.popoverWidth}px` : void 0 })}>${this.renderSearchResults()}</div></calcite-popover>`;
   }
 }
-m("arcgis-portal-entity-picker", F);
+P("arcgis-portal-entity-picker", V);
 export {
-  F as ArcgisPortalEntityPicker
+  V as ArcgisPortalEntityPicker
 };

package/dist/components/arcgis-portal-entity-picker/index.js

@@ -1,3 +1,5 @@
+import "@esri/calcite-components/components/calcite-select";
+import "@esri/calcite-components/components/calcite-option";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-avatar";
 import "../arcgis-portal-group-card/index.js";