@arcgis/portal-components 5.2.0-next.134 → 5.2.0-next.136

package/dist/components/arcgis-portal-item-card/customElement.js

@@ -2,7 +2,7 @@
 import { c as S } from "../../chunks/runtime.js";
 import { css as B, html as t } from "lit";
 import { formatDate as y, substitute as w } from "@arcgis/core/intl.js";
-import { LitElement as U, createEvent as g, safeClassMap as l, nothing as h } from "@arcgis/lumina";
+import { LitElement as U, createEvent as u, safeClassMap as l, nothing as g } from "@arcgis/lumina";
 import { createRef as k, ref as I } from "lit/directives/ref.js";
 import { u as F } from "../../chunks/useT9n.js";
 import { a as z } from "../../chunks/functionalities.js";
@@ -23,7 +23,7 @@ class O extends U {
         }
         this.selection === "multiple" && (this.selected = !this.selected, this.arcgisItemCardSelect.emit({ item: this.item, selected: this.selected }));
       }
-    }, this.isLoaded = !1, this.selected = !1, this.selection = "none", this.view = "list", this.previewed = !1, this.showOwner = !0, this.showDateUpdated = !0, this.showItemType = !0, this.showItemTypeHosted = !1, this.showSummary = !1, this.showBadges = !0, this.showBadgeTooltips = !0, this.showFavorite = !1, this.showFavoriteInActionsMenu = !1, this.showAccess = !1, this.showThumbnail = !0, this.newTab = !1, this.disableSelection = !1, this.disabled = !1, this.actions = [], this.recycleBin = !1, this.arcgisItemBrowserCardPreview = g(), this.arcgisItemCardActionsOpen = g(), this.arcgisItemCardInternalUIAction = g(), this.arcgisItemCardSelect = g();
+    }, this.isLoaded = !1, this.selected = !1, this.selection = "none", this.view = "list", this.previewed = !1, this.showOwner = !0, this.showDateUpdated = !0, this.showItemType = !0, this.showItemTypeHosted = !1, this.showSummary = !1, this.showBadges = !0, this.showBadgeTooltips = !0, this.showFavorite = !1, this.showFavoriteInActionsMenu = !1, this.showAccess = !1, this.showThumbnail = !0, this.newTab = !1, this.disableSelection = !1, this.disabled = !1, this.actions = [], this.recycleBin = !1, this.arcgisItemBrowserCardPreview = u(), this.arcgisItemCardActionsOpen = u(), this.arcgisItemCardInternalUIAction = u(), this.arcgisItemCardSelect = u();
   }
   static {
     this.properties = { isLoaded: 16, item: 0, user: 0, portal: 0, selected: 7, selection: 1, view: 1, preview: 1, previewed: 5, name: 1, showOwner: 5, showDateUpdated: 5, showItemType: 5, showItemTypeHosted: 5, showSummary: 5, showBadges: 5, showBadgeTooltips: 5, showFavorite: 5, showFavoriteInActionsMenu: 5, showAccess: 5, showThumbnail: 5, link: 1, linkHandler: 0, newTab: 5, disableSelection: 5, disabled: 7, userPopupZIndex: 9, actions: 0, recycleBin: 5, hideActionsStart: 5 };
@@ -35,11 +35,11 @@ class O extends U {
     return D(this.item);
   }
   async restoreFocus() {
-    if (this.link && this.linkEl.value) {
+    if (await this.updateComplete, this.link && this.linkEl.value) {
       this.linkEl.value.focus();
       return;
     }
-    this.preview === "top" && this.sectionEl.value && this.sectionEl.value.focus();
+    this.sectionEl.value?.focus();
   }
   firstUpdated() {
     requestAnimationFrame(() => {
@@ -79,19 +79,19 @@ class O extends U {
     })}</span>`;
   }
   renderSelectionInput(e, a = !1) {
-    const { selection: s, disableSelection: _, name: f, messages: v, item: c } = this, d = {
+    const { selection: s, disableSelection: h, name: f, messages: v, item: c } = this, d = {
       "item-card__input": !0,
       "item-card__input--compact": a
     };
     switch (s) {
       case "single":
-        return t`<calcite-radio-button class=${l(d)} .checked=${e} .disabled=${_} .value=${c.title ?? ""} .name=${f} @click=${(i) => {
+        return t`<calcite-radio-button class=${l(d)} .checked=${e} .disabled=${h} .value=${c.title ?? ""} .name=${f} @click=${(i) => {
           i.stopPropagation();
         }} @calciteRadioButtonChange=${() => {
           this.selected = !0, this.arcgisItemCardSelect.emit({ item: c, selected: !0 });
         }}><span class="screen-readers-only">${w(v.select ?? "", { title: c.title ?? "" })}</span></calcite-radio-button>`;
       case "multiple":
-        return t`<calcite-checkbox class=${l(d)} .checked=${e} .disabled=${_} @click=${(i) => {
+        return t`<calcite-checkbox class=${l(d)} .checked=${e} .disabled=${h} @click=${(i) => {
           i.stopPropagation(), i.preventDefault();
         }} @calciteCheckboxChange=${() => {
           this.selected = !e, this.arcgisItemCardSelect.emit({ item: c, selected: !e });
@@ -114,21 +114,21 @@ class O extends U {
     return !this.showBadges || !this.item || !this.portal ? null : this.view === "grid" ? t`<arcgis-portal-item-badges class="item-card__badges item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=narrow></arcgis-portal-item-badges>` : t`<arcgis-portal-item-badges class="item-card__badges item-card__badges--compact item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=narrow></arcgis-portal-item-badges><arcgis-portal-item-badges class="item-card__badges item-card__badges--responsive item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=full></arcgis-portal-item-badges>`;
   }
   render() {
-    const { item: e, portal: a, user: s, selection: _, isLoaded: f, disabled: v, link: c, newTab: d } = this;
+    const { item: e, portal: a, user: s, selection: h, isLoaded: f, disabled: v, link: c, newTab: d } = this;
     if (!e || !a || !this.messages._lang)
       return;
-    const i = this.sourceJSON, u = i.modified || e.modified, T = this.getAccessInfo(i.access), o = this.view === "grid", m = this.selected, b = this.preview === "action" && !this.recycleBin, $ = this.actions.length > 0 || this.showFavoriteInActionsMenu, x = this.showFavorite && !this.showFavoriteInActionsMenu && !!s, A = $ || x || b, C = (this.showAccess || o && this.showOwner) && A, p = this.preview === "top" && !c;
+    const i = this.sourceJSON, _ = i.modified || e.modified, C = this.getAccessInfo(i.access), o = this.view === "grid", m = this.selected, b = this.preview === "action" && !this.recycleBin, $ = this.actions.length > 0 || this.showFavoriteInActionsMenu, x = this.showFavorite && !this.showFavoriteInActionsMenu && !!s, T = $ || x || b, A = (this.showAccess || o && this.showOwner) && T, p = this.preview === "top" && !c;
     return t`<section class=${l({
       "item-card": !0,
       "item-card--grid": o,
-      "item-card--hoverable": _ !== "none",
+      "item-card--hoverable": h !== "none",
       "item-card--selected": m,
       "item-card--disabled": v,
       "item-card--loaded": f,
       "item-card--previewed": this.previewed && p
-    })} @click=${c ? void 0 : this.handleCardClick} tabindex=${(p ? 0 : void 0) ?? h} .role=${p ? "button" : void 0} aria-haspopup=${(p ? "dialog" : void 0) ?? h} @keydown=${(r) => {
+    })} @click=${c ? void 0 : this.handleCardClick} .tabIndex=${p ? 0 : -1} .role=${p ? "button" : void 0} aria-haspopup=${(p ? "dialog" : void 0) ?? g} @keydown=${(r) => {
       p && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this.handleCardClick());
-    }} ${I(this.sectionEl)}><slot name=content-top></slot>${c ? t`<a class="item-card__upper item-card__upper--link" href=${c ?? h} target=${(d ? "_blank" : void 0) ?? h} rel=${(d ? "noopener noreferrer" : void 0) ?? h} @click=${(r) => {
+    }} ${I(this.sectionEl)}><slot name=content-top></slot>${c ? t`<a class="item-card__upper item-card__upper--link" href=${c ?? g} target=${(d ? "_blank" : void 0) ?? g} rel=${(d ? "noopener noreferrer" : void 0) ?? g} @click=${(r) => {
       if (this.linkHandler && !r.ctrlKey && !r.metaKey) {
         r.preventDefault(), this.linkHandler(this.item);
         return;
@@ -140,14 +140,14 @@ class O extends U {
       "item-card__title--grid": o,
       "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
       "item-card-flex-1": !0
-    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!u && this.renderUpdatedDetails(u) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div>`}</a>` : t`<div class="item-card__upper">${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${l({
+    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!_ && this.renderUpdatedDetails(_) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div>`}</a>` : t`<div class="item-card__upper">${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${l({
       "item-card__title": !0,
       "item-card__title--grid": o,
       "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
       "item-card-flex-1": !0
-    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!u && this.renderUpdatedDetails(u) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div></div>`}<div class="item-card__footer"><div class=${l({ "item-card__footer__start": !0, "item-card__footer__start--owner": this.showOwner })}>${!this.hideActionsStart && t`<slot name=actions-start></slot>` || ""}${this.showOwner && !!i.owner && t`<div class="item-card__profile-wrap"><arcgis-portal-user-popup class="item-card__owner" .portal=${a} .username=${i.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${({ detail: r, stopPropagation: n }) => {
+    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!_ && this.renderUpdatedDetails(_) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div></div>`}<div class="item-card__footer"><div class=${l({ "item-card__footer__start": !0, "item-card__footer__start--owner": this.showOwner })}>${!this.hideActionsStart && t`<slot name=actions-start></slot>` || ""}${this.showOwner && !!i.owner && t`<div class="item-card__profile-wrap"><arcgis-portal-user-popup class="item-card__owner" .portal=${a} .username=${i.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${({ detail: r, stopPropagation: n }) => {
       n(), this.arcgisItemCardInternalUIAction.emit(r);
-    }}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess(T)}${C && t`<span class="item-card__footer-divider"></span>` || ""}${x && t`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${a} .user=${s} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${() => {
+    }}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess(C)}${A && t`<span class="item-card__footer-divider"></span>` || ""}${x && t`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${a} .user=${s} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${() => {
       this.arcgisItemCardInternalUIAction.emit({
         category: "card action",
         action: "favorite"

package/dist/components/arcgis-portal-item-favorite/customElement.js

@@ -4,7 +4,7 @@ import { LitElement as c, createEvent as d } from "@arcgis/lumina";
 import { html as r } from "lit";
 import { createRef as v, ref as u } from "lit/directives/ref.js";
 import { u as f } from "../../chunks/useT9n.js";
-import { g as m, t as p, i as F } from "../../chunks/utils.js";
+import { g as m, t as p, i as F } from "../../chunks/utils2.js";
 class g extends c {
   constructor() {
     super(), this.messages = f({ blocking: !0 }), this.buttonRef = v(), this.favoriteRequestId = 0, this.handleFavoriteUpdate = (t) => {

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

@@ -0,0 +1,20 @@
+/// <reference path="../../index.d.ts" />
+import type { PortalEntityPickerSelection } from "../../types/portalEntityPicker.js";
+import type { ArcgisPortalEntityPicker } from "../arcgis-portal-entity-picker/customElement.js";
+
+/**
+ * Search for and select an item from a portal.
+ *
+ * @slot [list-start] - Content displayed before the search results.
+ */
+export abstract class ArcgisPortalItemPicker extends ArcgisPortalEntityPicker {
+  /** The type of entity to search for. */
+  get entityType(): "item";
+  /** The currently selected item. The component does not mutate this property. */
+  accessor selected: PortalItemPickerSelection | null;
+  readonly "@eventTypes": {
+    arcgisSelectionChange: ArcgisPortalItemPicker["arcgisSelectionChange"]["detail"];
+  };
+}
+
+export type PortalItemPickerSelection = Extract<PortalEntityPickerSelection, { entityType: "item"; }>;

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

@@ -0,0 +1,15 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as t } from "../../chunks/runtime.js";
+import { ArcgisPortalEntityPicker as e } from "../arcgis-portal-entity-picker/customElement.js";
+class r extends e {
+  constructor() {
+    super(...arguments), this.entityType = "item", this.selected = null;
+  }
+  static {
+    this.properties = { entityType: 32, selected: 0 };
+  }
+}
+t("arcgis-portal-item-picker", r);
+export {
+  r as ArcgisPortalItemPicker
+};

package/dist/components/arcgis-portal-item-picker/index.d.ts

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

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

@@ -0,0 +1,2 @@
+import "../arcgis-portal-entity-picker/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-item-type/customElement.js

@@ -3,7 +3,7 @@ import { g as d, c as g } from "../../chunks/runtime.js";
 import { css as y, html as c } from "lit";
 import { LitElement as f, nothing as p, safeClassMap as x } from "@arcgis/lumina";
 import { u } from "../../chunks/useT9n.js";
-import { g as w } from "../../chunks/utils2.js";
+import { g as w } from "../../chunks/utils3.js";
 const v = y`:host{display:inline-flex;align-items:center}:host([scale="s"]){--arcgis-portal-item-type-font-size: var(--calcite-font-size--2);--arcgis-portal-item-type-spacing: 1rem}:host([scale="m"]){--arcgis-portal-item-type-font-size: var(--calcite-font-size--1);--arcgis-portal-item-type-spacing: 1rem}:host([scale="l"]){--arcgis-portal-item-type-font-size: var(--calcite-font-size-0);--arcgis-portal-item-type-spacing: 1rem}.icon{display:block;flex-grow:0;flex-shrink:0;width:var(--arcgis-portal-item-type-spacing);height:var(--arcgis-portal-item-type-spacing)}.text{color:var(--calcite-text-color-2);font-size:var(--arcgis-portal-item-type-font-size);line-height:1.25rem}.text--ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.text--spaced{margin-inline-start:calc(var(--arcgis-portal-item-type-spacing) / 2);word-wrap:break-word;word-break:break-word}`;
 class I extends f {
   constructor() {

package/dist/components/arcgis-portal-mentionable-text-area/customElement.js

@@ -1,110 +1,84 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as A } from "../../chunks/runtime.js";
-import { safeClassMap as T, LitElement as S, createEvent as b } from "@arcgis/lumina";
-import { html as u, css as k } from "lit";
-import { ref as M, createRef as E } from "lit/directives/ref.js";
-import { makeGenericController as P } from "@arcgis/lumina/controllers";
-import { debounce as R } from "@arcgis/toolkit/function";
-import { q as L } from "../../chunks/groups.js";
-import { s as U } from "../../chunks/item.js";
-import { b as D } from "../../chunks/user.js";
-import { f as w } from "../../chunks/request.js";
-import { keyed as q } from "lit/directives/keyed.js";
-const v = ["@", "#", "$"], O = 400;
-function _(i, e) {
-  let s = null;
-  for (const n of e) {
-    const a = n.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&"), l = new RegExp(`${a}"([^"\\n]*)"?$`, "u"), t = i.match(l);
-    if (t) {
-      const o = t[0], h = i.length - o.length, m = t[1] ?? "";
-      (!s || h > s.startIndex) && (s = {
-        starter: n,
-        mentionText: o,
-        query: m,
-        startIndex: h
-      });
-    }
-    const r = new RegExp(`${a}[\\p{L}\\p{N}_-]+$`, "u"), c = i.match(r);
-    if (c) {
-      const o = c[0], h = i.length - o.length, m = o.slice(n.length);
-      (!s || h > s.startIndex) && (s = {
-        starter: n,
-        mentionText: o,
-        query: m,
-        startIndex: h
-      });
-    }
-  }
-  return s;
-}
-const y = (i) => v.includes(i) ? i : "@", F = P((i) => {
+import { safeClassMap as T, LitElement as S, createEvent as I } from "@arcgis/lumina";
+import { html as m, css as k } from "lit";
+import { ref as M, createRef as P } from "lit/directives/ref.js";
+import { makeGenericController as E } from "@arcgis/lumina/controllers";
+import { debounce as U } from "@arcgis/toolkit/function";
+import { S as D, M as g, g as L } from "../../chunks/utils.js";
+import { q as O } from "../../chunks/groups.js";
+import { s as R } from "../../chunks/item.js";
+import { b as F } from "../../chunks/user.js";
+import { f as $ } from "../../chunks/request.js";
+import { keyed as _ } from "lit/directives/keyed.js";
+const y = (a) => g.includes(a) ? a : "@", Q = E((a) => {
   let e = [];
-  const s = async (r) => await w({
-    requester: async () => await U(i.portal, r, { num: 3 }),
+  const i = async (s) => await $({
+    requester: async () => await R(a.portal, s, { num: 3 }),
     key: "items",
-    id: r
-  }), n = async (r) => await w({
-    requester: async () => await L(i.portal, { query: `title:${r}`, num: 3 }),
+    id: s
+  }), n = async (s) => await $({
+    requester: async () => await O(a.portal, { query: `title:${s}`, num: 3 }),
     key: "groups",
-    id: r
-  }), a = R(async (r, c) => {
-    i.isFetchingEntities = !0;
-    const o = r.toLowerCase();
+    id: s
+  }), r = U(async (s, c) => {
+    a.isFetchingEntities = !0;
+    const l = s.toLowerCase();
     switch (y(c)) {
       case "@":
-        const p = 10;
-        i.filteredItemsInfo = {
+        const u = 10;
+        a.filteredItemsInfo = {
           type: "user",
           items: e.filter(
-            (f) => f.username?.toLowerCase().includes(o) || f.fullName?.toLowerCase().includes(o)
-          ).slice(0, p)
+            (p) => p.username?.toLowerCase().includes(l) || p.fullName?.toLowerCase().includes(l)
+          ).slice(0, u)
         };
         break;
       case "#":
-        const { result: d } = await s(o);
-        i.filteredItemsInfo = { type: "item", items: d?.results ?? [] };
+        const { result: h } = await i(l);
+        a.filteredItemsInfo = { type: "item", items: h?.results ?? [] };
         break;
       case "$":
-        const { results: I } = await n(o);
-        i.filteredItemsInfo = { type: "group", items: I };
+        const { results: f } = await n(l);
+        a.filteredItemsInfo = { type: "group", items: f };
         break;
     }
-    (i.filteredItemsInfo?.items?.length ?? 0) === 0 && await i.closePopover(), i.isFetchingEntities = !1;
-  }, O);
+    (a.filteredItemsInfo?.items?.length ?? 0) === 0 && await a.closePopover(), a.isFetchingEntities = !1;
+  }, D);
   return { fetchUsers: async () => {
     try {
-      const { users: r } = await D(i.portal);
-      e = r ?? [];
-    } catch (r) {
-      e = [], console.error("error fetching org users:", r);
+      const { users: s } = await F(a.portal);
+      e = s ?? [];
+    } catch (s) {
+      e = [], console.error("error fetching org users:", s);
     }
-  }, filterItems: a, getItemText: (r, c) => {
-    let o = "";
+  }, filterItems: r, getItemText: (s, c) => {
+    let l = "";
     switch (y(c)) {
       case "@":
-        o = r.username;
+        l = s.username;
         break;
       case "#":
-        o = r.title ?? "";
+        l = s.title ?? "";
         break;
       case "$":
-        o = r.title ?? "";
+        l = s.title ?? "";
         break;
     }
-    return o.trim();
+    return l.trim();
   } };
-}), g = ({ id: i, label: e, selected: s, description: n, contentStart: a, onSelect: l }) => q(i, u`<calcite-list-item class=${T({ selected: s })} .label=${e} .description=${n} .selected=${s} @pointerdown=${async (t) => {
-  t.preventDefault(), t.stopPropagation(), await l();
+}), x = ({ id: a, label: e, selected: i, description: n, contentStart: r, onSelect: o }) => _(a, m`<calcite-list-item class=${T({ selected: i })} .label=${e} .description=${n} .selected=${i} @pointerdown=${async (t) => {
+  t.preventDefault(), t.stopPropagation(), await o();
 }} ${M((t) => {
-  s && t && t.scrollIntoView({ block: "nearest", behavior: "smooth" });
-})}>${a}</calcite-list-item>`), N = k`.selected{--calcite-list-background-color: var(--calcite-color-foreground-2)}.mentionable-list{max-height:13rem;overflow-y:auto;padding:.25rem;width:min(100vw,24rem)}.mentionable-list--loading{min-height:10rem}`;
-class Q extends S {
+  i && t && t.scrollIntoView({ block: "nearest", behavior: "smooth" });
+})}>${r}</calcite-list-item>`), N = k`.selected{--calcite-list-background-color: var(--calcite-color-foreground-2)}.mentionable-list{max-height:13rem;overflow-y:auto;padding:.25rem;width:min(100vw,24rem)}.mentionable-list--loading{min-height:10rem}`;
+class K extends S {
   constructor() {
-    super(...arguments), this.calciteTextAreaRef = E(), this.mentionableEntityController = F(this), this.handleInput = (e) => {
-      const { bubbleNewValueChange: s, checkForMention: n } = this, l = e.target.value;
-      this._value = l, s(this._value);
+    super(...arguments), this.calciteTextAreaRef = P(), this.mentionableEntityController = Q(this), this.handleInput = (e) => {
+      const { bubbleNewValueChange: i, checkForMention: n } = this, o = e.target.value;
+      this._value = o, i(this._value);
       const t = this.nativeTextAreaRef?.selectionStart ?? 0;
-      n(l, t);
+      n(o, t);
     }, this.handleKeyDown = (e) => {
       if (!this.popoverOpen) {
         this.arcgisUserMentionableTextAreaKeyDown.emit(e), this.arcgisMentionableTextAreaKeyDown.emit(e);
@@ -128,31 +102,31 @@ class Q extends S {
       this.popoverOpen = !1, this.currentMentionQuery = "", this.selectedItemIndex = 0, this.currentStarter = null;
     }, this.bubbleNewValueChange = (e) => {
       this.arcgisUserMentionableTextAreaChange.emit(e), this.arcgisMentionableTextAreaChange.emit(e);
-    }, this.checkForMention = (e, s) => {
-      const n = e.substring(0, s), a = _(n, this.starters ?? v);
-      if (a) {
-        const { starter: l } = a;
-        this.currentStarter = l, this.filterMentionItems(a), this.popoverOpen = !0;
+    }, this.checkForMention = (e, i) => {
+      const n = e.substring(0, i), r = L(n, this.starters ?? g);
+      if (r) {
+        const { starter: o } = r;
+        this.currentStarter = o, this.filterMentionItems(r), this.popoverOpen = !0;
         return;
       }
       this.handleClosePopover();
     }, this.filterMentionItems = (e) => {
-      const { mentionText: s, query: n, starter: a, startIndex: l } = e;
-      this.currentMentionQuery = s, this.mentionStartPosition = l;
+      const { mentionText: i, query: n, starter: r, startIndex: o } = e;
+      this.currentMentionQuery = i, this.mentionStartPosition = o;
       const t = n.toLowerCase();
-      this.mentionableEntityController.filterItems(t, a), this.selectedItemIndex = 0;
-    }, this.popoverOpen = !1, this.currentMentionQuery = "", this.mentionStartPosition = 0, this.selectedItemIndex = 0, this.currentStarter = null, this._value = "", this.filteredItemsInfo = null, this.isFetchingEntities = !1, this.popoverPlacement = "bottom-start", this.disabled = !1, this.scale = "m", this.rows = 3, this.starters = v, this.readOnly = !1, this.arcgisMentionableSelectedIndexChange = b(), this.arcgisMentionableTextAreaChange = b(), this.arcgisMentionableTextAreaKeyDown = b(), this.arcgisUserMentionableTextAreaChange = b(), this.arcgisUserMentionableTextAreaKeyDown = b(), this.renderItemInfo = () => {
-      const { filteredItemsInfo: e, selectedItemIndex: s, portal: n } = this;
+      this.mentionableEntityController.filterItems(t, r), this.selectedItemIndex = 0;
+    }, this.popoverOpen = !1, this.currentMentionQuery = "", this.mentionStartPosition = 0, this.selectedItemIndex = 0, this.currentStarter = null, this._value = "", this.filteredItemsInfo = null, this.isFetchingEntities = !1, this.popoverPlacement = "bottom-start", this.disabled = !1, this.scale = "m", this.rows = 3, this.starters = g, this.readOnly = !1, this.arcgisMentionableSelectedIndexChange = I(), this.arcgisMentionableTextAreaChange = I(), this.arcgisMentionableTextAreaKeyDown = I(), this.arcgisUserMentionableTextAreaChange = I(), this.arcgisUserMentionableTextAreaKeyDown = I(), this.renderItemInfo = () => {
+      const { filteredItemsInfo: e, selectedItemIndex: i, portal: n } = this;
       if (!e)
         return null;
-      const { items: a, type: l } = e;
-      switch (l) {
+      const { items: r, type: o } = e;
+      switch (o) {
         case "user":
-          return a.map((t, r) => g({ id: t.id, label: `@${t.username}`, description: t.fullName, selected: r === s, contentStart: u`<arcgis-portal-user-avatar slot=content-start .user=${t} .portal=${n} scale=m></arcgis-portal-user-avatar>`, onSelect: async () => await this.selectItem(t) }));
+          return r.map((t, s) => x({ id: t.id, label: `@${t.username}`, description: t.fullName, selected: s === i, contentStart: m`<arcgis-portal-user-avatar slot=content-start .user=${t} .portal=${n} scale=m></arcgis-portal-user-avatar>`, onSelect: async () => await this.selectItem(t) }));
         case "item":
-          return a.map((t, r) => g({ id: t.id ?? `item-${r}`, label: `#${t.title}`, description: t.id ?? void 0, selected: r === s, onSelect: async () => await this.selectItem(t), contentStart: u`<calcite-avatar slot=content-start .fullName=${t.title ?? void 0} .thumbnail=${t.thumbnailUrl ?? void 0} scale=m></calcite-avatar>` }));
+          return r.map((t, s) => x({ id: t.id ?? `item-${s}`, label: `#${t.title}`, description: t.id ?? void 0, selected: s === i, onSelect: async () => await this.selectItem(t), contentStart: m`<calcite-avatar slot=content-start .fullName=${t.title ?? void 0} .thumbnail=${t.thumbnailUrl ?? void 0} scale=m></calcite-avatar>` }));
         case "group":
-          return a.map((t, r) => g({ id: t.id ?? `group-${r}`, label: `${t.title}`, description: t.id ?? void 0, selected: r === s, onSelect: async () => await this.selectItem(t), contentStart: u`<calcite-avatar slot=content-start .fullName=${t.title ?? void 0} .thumbnail=${t.thumbnailUrl ?? void 0} scale=m></calcite-avatar>` }));
+          return r.map((t, s) => x({ id: t.id ?? `group-${s}`, label: `${t.title}`, description: t.id ?? void 0, selected: s === i, onSelect: async () => await this.selectItem(t), contentStart: m`<calcite-avatar slot=content-start .fullName=${t.title ?? void 0} .thumbnail=${t.thumbnailUrl ?? void 0} scale=m></calcite-avatar>` }));
       }
     };
   }
@@ -172,13 +146,13 @@ class Q extends S {
     await this.calciteTextAreaRef.value?.setFocus();
   }
   async selectItem(e) {
-    const { currentStarter: s, _value: n, mentionStartPosition: a, currentMentionQuery: l, handleClosePopover: t, calciteTextAreaRef: r, nativeTextAreaRef: c, bubbleNewValueChange: o } = this;
-    if (!e || !s)
+    const { currentStarter: i, _value: n, mentionStartPosition: r, currentMentionQuery: o, handleClosePopover: t, calciteTextAreaRef: s, nativeTextAreaRef: c, bubbleNewValueChange: l } = this;
+    if (!e || !i)
       return;
-    const m = this.mentionableEntityController.getItemText(e, s).replaceAll('"', "").trim(), p = /\s/u.test(m) ? `${s}"${m}"` : `${s}${m}`, d = (n ?? "").substring(0, a), I = (n ?? "").substring(a + l.length), f = `${d}${p} ${I}`;
-    this._value = f, o(this._value);
-    const x = a + p.length + 1;
-    t(), await this.updateComplete, r.value?.setFocus(), c && (c.selectionEnd = x);
+    const d = this.mentionableEntityController.getItemText(e, i).replaceAll('"', "").trim(), u = /\s/u.test(d) ? `${i}"${d}"` : `${i}${d}`, h = (n ?? "").substring(0, r), f = (n ?? "").substring(r + o.length), p = `${h}${u} ${f}`;
+    this._value = p, l(this._value);
+    const v = r + u.length + 1;
+    t(), await this.updateComplete, s.value?.setFocus(), c && (c.selectionEnd = v);
   }
   willUpdate(e) {
     e.has("value") && (this._value = this.value ?? ""), e.has("selectedItemIndex") && this.arcgisMentionableSelectedIndexChange.emit(this.selectedItemIndex);
@@ -190,11 +164,11 @@ class Q extends S {
     }), this.mentionableEntityController.fetchUsers();
   }
   render() {
-    const { popoverPlacement: e, scale: s, _value: n, maxLength: a, rows: l, placeholder: t, readOnly: r, popoverOpen: c, closePopover: o, handleInput: h, handleKeyDown: m, disabled: p, isFetchingEntities: d, filteredItemsInfo: I, renderItemInfo: f, popoverListLabel: x } = this, $ = this.calciteTextAreaRef.value, C = I?.items ?? [];
-    return u`<calcite-text-area .placeholder=${t} .value=${n} .maxLength=${a} .rows=${l} .scale=${s} .readOnly=${r} .disabled=${p} @blur=${o} @calciteTextAreaInput=${h} @keydown=${m} ${M(this.calciteTextAreaRef)}></calcite-text-area>${$ && u`<calcite-popover .open=${c} .placement=${e} class="mention-popover" .label=${x} .referenceElement=${$} trigger-disabled pointer-disabled focus-trap-disabled><div class=${T({ "mentionable-list": !0, "mentionable-list--loading": d })}>${d && u`<calcite-scrim .loading=${d}></calcite-scrim>` || ""}${C.length > 0 && u`<calcite-list .label=${x}>${f()}</calcite-list>` || ""}</div></calcite-popover>` || ""}`;
+    const { popoverPlacement: e, scale: i, _value: n, maxLength: r, rows: o, placeholder: t, readOnly: s, popoverOpen: c, closePopover: l, handleInput: b, handleKeyDown: d, disabled: u, isFetchingEntities: h, filteredItemsInfo: f, renderItemInfo: p, popoverListLabel: v } = this, w = this.calciteTextAreaRef.value, C = f?.items ?? [];
+    return m`<calcite-text-area .placeholder=${t} .value=${n} .maxLength=${r} .rows=${o} .scale=${i} .readOnly=${s} .disabled=${u} @blur=${l} @calciteTextAreaInput=${b} @keydown=${d} ${M(this.calciteTextAreaRef)}></calcite-text-area>${w && m`<calcite-popover .open=${c} .placement=${e} class="mention-popover" .label=${v} .referenceElement=${w} trigger-disabled pointer-disabled focus-trap-disabled><div class=${T({ "mentionable-list": !0, "mentionable-list--loading": h })}>${h && m`<calcite-scrim .loading=${h}></calcite-scrim>` || ""}${C.length > 0 && m`<calcite-list .label=${v}>${p()}</calcite-list>` || ""}</div></calcite-popover>` || ""}`;
   }
 }
-A("arcgis-portal-mentionable-text-area", Q);
+A("arcgis-portal-mentionable-text-area", K);
 export {
-  Q as ArcgisPortalMentionableTextArea
+  K as ArcgisPortalMentionableTextArea
 };

package/dist/components/arcgis-portal-navigation/customElement.js

@@ -11,7 +11,7 @@ import { m as Nt } from "../../chunks/icons.js";
 import { i as T, c as ge, a as Tt } from "../../chunks/user2.js";
 import { c as Ct, d as Mt, e as Ot, f as Lt, h as Et } from "../../chunks/portal2.js";
 import { c as jt, d as Dt, e as zt } from "../../chunks/user.js";
-import { i as Ne, a as Gt } from "../../chunks/utils2.js";
+import { i as Ne, a as Gt } from "../../chunks/utils3.js";
 import { e as Ut } from "../../chunks/functional.js";
 import { g as Bt } from "../../chunks/request.js";
 import { g as Te } from "../../chunks/item.js";
@@ -22,7 +22,7 @@ import { c as Wt, g as Vt } from "../../chunks/dom.js";
 import { debounce as be } from "@arcgis/toolkit/function";
 import Ht from "@arcgis/core/identity/IdentityManager.js";
 import { t as qt } from "../../chunks/functionalities.js";
-import { c as Jt } from "../../chunks/string.js";
+import { a as Jt } from "../../chunks/string.js";
 function ve({ portal: e, productInfo: t }) {
   const { name: i, glyph: n } = t || {};
   return c`<img alt class="logo__glyph" src=${n ?? M}><span class="logo__text"><span class="logo__title">${i}</span>${e?.name && c`<span class="logo__subtitle">${e.name}</span>` || ""}</span>`;

package/dist/components/arcgis-portal-navigation/index.js

@@ -2,7 +2,6 @@ import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-action";
-import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-list";
@@ -10,6 +9,7 @@ import "../arcgis-portal-item-type/index.js";
 import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-input";
+import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-dropdown";
 import "../arcgis-portal-user-avatar/index.js";
 import "@esri/calcite-components/components/calcite-dropdown-group";

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

@@ -0,0 +1,20 @@
+/// <reference path="../../index.d.ts" />
+import type { PortalEntityPickerSelection } from "../../types/portalEntityPicker.js";
+import type { ArcgisPortalEntityPicker } from "../arcgis-portal-entity-picker/customElement.js";
+
+/**
+ * Search for and select an organization member from a portal.
+ *
+ * @slot [list-start] - Content displayed before the search results.
+ */
+export abstract class ArcgisPortalUserPicker extends ArcgisPortalEntityPicker {
+  /** The type of entity to search for. */
+  get entityType(): "user";
+  /** The currently selected organization member. The component does not mutate this property. */
+  accessor selected: PortalUserPickerSelection | null;
+  readonly "@eventTypes": {
+    arcgisSelectionChange: ArcgisPortalUserPicker["arcgisSelectionChange"]["detail"];
+  };
+}
+
+export type PortalUserPickerSelection = Extract<PortalEntityPickerSelection, { entityType: "user"; }>;

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

@@ -0,0 +1,15 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as t } from "../../chunks/runtime.js";
+import { ArcgisPortalEntityPicker as e } from "../arcgis-portal-entity-picker/customElement.js";
+class r extends e {
+  constructor() {
+    super(...arguments), this.entityType = "user", this.selected = null;
+  }
+  static {
+    this.properties = { entityType: 32, selected: 0 };
+  }
+}
+t("arcgis-portal-user-picker", r);
+export {
+  r as ArcgisPortalUserPicker
+};

package/dist/components/arcgis-portal-user-picker/index.d.ts

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

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

@@ -0,0 +1,2 @@
+import "../arcgis-portal-entity-picker/index.js";
+export * from "./customElement.js";