@arcgis/portal-components 5.2.0-next.99 → 6.0.0-next.0

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

@@ -0,0 +1,309 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as P } from "../../chunks/runtime.js";
+import { LitElement as E, createEvent as F, safeClassMap as v, nothing as D } from "@arcgis/lumina";
+import { css as V, html as w } from "lit";
+import { i as O } from "../../chunks/functionalities.js";
+import { a as g, b as S, g as R } from "../../chunks/itemThumbnail.js";
+import { q as x, u as U } from "../../chunks/item2.js";
+import { g as A } from "../../chunks/portal.js";
+import { execute as B } from "@arcgis/core/rest/geoprocessor.js";
+function G(e) {
+  return e ? `${e.xmin},${e.ymin},${e.xmax},${e.ymax}` : "";
+}
+function $(e) {
+  return e && e.xmin >= -180 && e.xmax <= 180 && e.ymin >= -90 && e.ymax <= 90 && e.xmin <= e.xmax && e.ymin <= e.ymax ? [
+    [e.xmin, e.ymin],
+    [e.xmax, e.ymax]
+  ] : [
+    [-180, -90],
+    [180, 90]
+  ];
+}
+const d = document.createElement("div");
+d.style.height = "532px";
+d.style.left = "-10000px";
+d.style.position = "absolute";
+d.style.top = "-10000px";
+d.style.width = "800px";
+async function K({
+  item: e,
+  portal: t,
+  serviceInfo: r
+}) {
+  const i = e.thumbnailUrl, n = e.url ?? "", a = ["Map Service", "Feature Service", "Image Service"];
+  if (i)
+    return i;
+  if (!a.includes(e.type ?? ""))
+    return "";
+  if (e.type === "Map Service" || e.type === "Image Service" || n.includes("/MapServer")) {
+    const l = G(e.extent);
+    return l ? N({ serviceUrl: n, extent: l, size: "800,532", format: "image", serviceInfo: r }) : "";
+  }
+  return e.type === "Feature Service" ? await _(e, t) : "";
+}
+function N({
+  visibleLayers: e,
+  serviceUrl: t,
+  serviceInfo: r,
+  size: i,
+  extent: n,
+  bboxSR: a,
+  imageSR: l,
+  format: c
+}) {
+  if (!r)
+    return "";
+  let s = t, p = s.includes("/MapServer"), m = e;
+  const h = s.indexOf("/MapServer");
+  if (!m && p && h !== -1) {
+    const f = s.indexOf("?");
+    m = f > -1 ? s.substring(h + 11, f) : s.substring(h + 11), s = f > -1 ? s.substring(0, h + 10) + s.substring(f) : s.substring(0, h + 10);
+  }
+  p || (p = !!(r.capabilities?.toLowerCase().includes("map") || r.supportedImageFormatTypes));
+  const u = s.indexOf("?");
+  let o;
+  if (u === -1)
+    if (p)
+      o = `${s}/export?`;
+    else {
+      if ((r.currentVersion ?? 0) >= 10.1)
+        return `${s}/info/thumbnail`;
+      o = `${s}/exportImage?`;
+    }
+  else if (p)
+    o = `${s.substring(0, u)}/export${s.substring(u)}&`;
+  else {
+    if ((r.currentVersion ?? 0) >= 10.1)
+      return `${s.substring(0, u)}/info/thumbnail${s.substring(u)}`;
+    o = `${s.substring(0, u)}/exportImage${s.substring(u)}&`;
+  }
+  return o += `size=${i}&bbox=${n}`, a && (o += `&bboxSR=${a}`), l && (o += `&imageSR=${l}`), p ? (o += r.supportedImageFormatTypes?.includes("PNG32") ? `&format=png32&f=${c}` : `&format=png24&f=${c}`, m && (o += `&layers=show:${m}`)) : o += `&format=jpgpng&f=${c}&interpolation=RSP_NearestNeighbor&bandIds=null`, o;
+}
+async function _(e, t) {
+  if (!t || !e.id)
+    return "";
+  d.isConnected || document.body.append(d);
+  let r, i;
+  try {
+    const [
+      { default: n },
+      { default: a },
+      { default: l },
+      c,
+      { default: s },
+      { default: p },
+      { default: m },
+      { default: h }
+    ] = await Promise.all([
+      import("@arcgis/core/Basemap.js"),
+      import("@arcgis/core/layers/FeatureLayer.js"),
+      import("@arcgis/core/Map.js"),
+      import("@arcgis/core/rest/print.js"),
+      import("@arcgis/core/rest/support/PrintParameters.js"),
+      import("@arcgis/core/rest/support/PrintTemplate.js"),
+      import("@arcgis/core/smartMapping/heuristics/scaleRange.js"),
+      import("@arcgis/core/views/MapView.js")
+    ]), u = new a({ portalItem: { id: e.id, portal: t } }), o = t.defaultBasemap?.id ?? "", f = o.includes("basemap") ? "topo-vector" : new n({ portalItem: { id: o, portal: t } });
+    r = new l({ basemap: f }), i = new h({ map: r, container: d }), await i.when();
+    let y = 0, b = 0;
+    o.includes("basemap") || ({ minScale: y, maxScale: b } = await m({ layer: u, view: i }));
+    const T = await u.queryExtent();
+    if (!T.extent)
+      return "";
+    await i.goTo(T.extent), u.minScale = y, u.maxScale = b, r.add(u), i.scale = b, await new Promise((L) => setTimeout(L, 2e3));
+    const M = t.helperServices?.printTask?.url ?? "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task", I = new p({
+      format: "png32",
+      exportOptions: {
+        dpi: 96,
+        width: 800,
+        height: 532
+      },
+      layout: "map-only",
+      showLabels: !1,
+      attributionVisible: !1
+    });
+    return (await c.execute(M, new s({ view: i, template: I }))).url ?? "";
+  } catch {
+    return "";
+  } finally {
+    i?.destroy(), r?.destroy();
+  }
+}
+async function k({
+  webMap: e,
+  extent: t,
+  portal: r,
+  spatialReference: i
+}) {
+  const a = r?.helperServices?.printTask?.url;
+  if (!a)
+    return "";
+  const l = {
+    Web_Map_as_JSON: JSON.stringify({
+      ...e,
+      mapOptions: {
+        showAttribution: !1,
+        extent: {
+          xmin: t[0][0],
+          ymin: t[0][1],
+          xmax: t[1][0],
+          ymax: t[1][1],
+          spatialReference: { wkid: 4326 }
+        },
+        spatialReference: i
+      },
+      exportOptions: { dpi: 96, outputSize: [600, 400] },
+      layoutOptions: {}
+    }),
+    Format: "PNG32",
+    Layout_Template: "MAP_ONLY"
+  };
+  return (await B(a, l)).results?.find((s) => s.dataType === "data-file")?.value?.url ?? "";
+}
+async function C({
+  item: e,
+  portal: t
+}) {
+  const r = e.url || (t && e.id ? `${x(e.id, t)}/data` : "");
+  if (!r || !t?.defaultBasemap)
+    return "";
+  const i = new URL(r), n = new URL(t.restUrl).hostname, a = A(t);
+  a && i.hostname === n && i.searchParams.set("token", a);
+  const c = {
+    baseMap: { ...t.defaultBasemap.toJSON(), title: "basemap" },
+    operationalLayers: [
+      {
+        url: i.toString(),
+        id: `KML_${e.id}`,
+        opacity: 1,
+        title: e.title,
+        visibility: !0,
+        type: "KML"
+      }
+    ]
+  };
+  return await k({
+    webMap: c,
+    extent: $(e.extent),
+    portal: t,
+    spatialReference: { wkid: 4326 }
+  });
+}
+async function W({
+  item: e,
+  portal: t
+}) {
+  if (!t || !e.id)
+    return "";
+  const r = x(e.id, t), i = {
+    operationalLayers: [],
+    baseMap: {
+      baseMapLayers: [
+        {
+          id: e.id,
+          type: "VectorTileLayer",
+          layerType: "VectorTileLayer",
+          title: e.title,
+          styleUrl: `${r}/resources/styles/root.json`,
+          visibility: !0,
+          opacity: 1
+        }
+      ],
+      title: "Topographic"
+    },
+    spatialReference: { wkid: 102100, latestWkid: 3857 },
+    authoringApp: "WebMapViewer",
+    authoringAppVersion: "5.3",
+    version: "2.10"
+  };
+  return await k({
+    webMap: i,
+    extent: $(e.extent),
+    portal: t,
+    spatialReference: { wkid: 102100 }
+  });
+}
+async function j({
+  item: e,
+  portal: t,
+  serviceInfo: r
+}) {
+  const i = g(e), n = e.type ?? "";
+  let a;
+  try {
+    O(["Image Service", "Map Service", "Feature Service"], n) && (a = await K({ item: e, portal: t, serviceInfo: r }) || i), n === "Vector Tile Service" && (a = await W({ item: e, portal: t }) || i), n === "KML" && (a = await C({ item: e, portal: t }) || i);
+  } catch {
+    return { error: { code: "unhandledError" } };
+  }
+  return { result: a ?? i };
+}
+function q(e, t) {
+  if (!e)
+    return !1;
+  const r = e.includes("thumbnail/ago_downloaded."), i = e.includes("Utilities/PrintingTools");
+  return !e.includes("images/transparent.gif") && (t?.isPortal ? !i : !r);
+}
+function z(e, t) {
+  const r = !!t && U(e, t), i = e.type === "Dashboard";
+  return !S(e) && r && i;
+}
+function J(e, t, r) {
+  const i = S(e), n = q(i, t), a = ["Feature Service", "Vector Tile Service"].includes(e.type) && !n, l = e.type === "Feature Service" && e.typeKeywords?.includes("Location Tracking Service"), c = e.typeKeywords?.includes("Table");
+  if (e.type === "Image" || i && !a || l || c)
+    return !1;
+  const s = e.typeKeywords?.includes("Tiled Imagery"), p = e.type === "Image Service" && !s || e.type === "Map Service", m = !!r && U(e, r);
+  return m && p || m && e.type === "Feature Service" || e.type === "Vector Tile Service" || m && e.type === "KML";
+}
+const H = V`:host{display:block;height:100%;position:relative;width:100%}.outer{position:relative;width:100%;height:100%;aspect-ratio:3 / 2;min-height:0}.inner{position:absolute;inset:0;background-color:var(--calcite-color-background)}.inner--loading{animation:thumbnail-shimmer 1s linear infinite;background-image:linear-gradient(to right,var(--calcite-color-background) 0%,var(--calcite-color-foreground-2),var(--calcite-color-background) 40%,var(--calcite-color-background) 100%);background-repeat:no-repeat;background-size:800px 100%}.thumbnail{display:block;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .3s linear}.thumbnail--loading{opacity:0}.fallback{display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-3)}@keyframes thumbnail-shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}`;
+class Y extends E {
+  constructor() {
+    super(...arguments), this.generating = !1, this.imageError = !1, this.loading = !0, this.thumbnailUri = null, this.useDefaultThumbnail = !1, this.useProduction = !1, this.generate = !1, this.arcgisItemThumbnailGenerated = F();
+  }
+  static {
+    this.properties = { imageError: 16, loading: 16, thumbnailUri: 16, useDefaultThumbnail: 16, item: 0, user: 0, portal: 0, useProduction: 5, generate: 5, serviceInfo: 0, cacheString: 1 };
+  }
+  static {
+    this.styles = H;
+  }
+  async generateThumbnail(t = !1) {
+    const { item: r, portal: i } = this;
+    if (this.loading = !0, this.generating)
+      return this.thumbnailUri ?? "";
+    try {
+      this.generating = !0;
+      const n = t ? g(r) : await j({
+        item: r,
+        portal: i,
+        serviceInfo: this.serviceInfo
+      }), a = typeof n == "string" ? n : n.result ?? g(r);
+      return this.thumbnailUri = a, this.useDefaultThumbnail = !1, this.arcgisItemThumbnailGenerated.emit(a), this.generating = !1, a;
+    } catch {
+      return this.generating = !1, "";
+    }
+  }
+  willUpdate(t) {
+    (t.has("item") || t.has("portal") || t.has("user") || t.has("useProduction") || t.has("cacheString") || t.has("generate")) && this.updateThumbnail();
+  }
+  async updateThumbnail() {
+    const { item: t, portal: r, user: i } = this;
+    this.imageError = !1, this.useDefaultThumbnail = !1;
+    const n = this.generate && J(t, r, i), a = this.generate && z(t, i);
+    n && await this.generateThumbnail() || (this.thumbnailUri = a ? g(t) : R(r, t, !1, this.useProduction, this.cacheString), a && await this.generateThumbnail(!0));
+  }
+  render() {
+    const t = this.thumbnailUri;
+    return this.imageError ? null : w`<div class="outer"><div class=${v({ inner: !0, "inner--loading": this.loading })}>${t ? w`<img class=${v({ thumbnail: !0, "thumbnail--loading": this.loading })} src=${t ?? D} alt @load=${() => {
+      this.loading = !1;
+    }} @error=${() => {
+      if (!this.useDefaultThumbnail && this.item) {
+        this.loading = !0, this.useDefaultThumbnail = !0, this.thumbnailUri = g(this.item);
+        return;
+      }
+      this.imageError = !0, this.loading = !1;
+    }}>` : null}</div></div>`;
+  }
+}
+P("arcgis-portal-item-thumbnail", Y);
+export {
+  Y as ArcgisPortalItemThumbnail
+};

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

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

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

@@ -0,0 +1 @@
+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/groups2.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
 };