@arcgis/portal-components 5.2.0-next.15 → 5.2.0-next.151

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

@@ -1,108 +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, s as U } from "../../chunks/item2.js";
-import { a as w, b as D } from "../../chunks/user2.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 r = n.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&"), l = new RegExp(`${r}"([^"\\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 a = new RegExp(`${r}[\\p{L}\\p{N}_-]+$`, "u"), c = i.match(a);
-    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/item2.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 (a) => await w({
-    requester: async () => await U(i.portal, a, { num: 3 }),
+  const i = async (s) => await $({
+    requester: async () => await R(a.portal, s, { num: 3 }),
     key: "items",
-    id: a
-  }), n = async (a) => await w({
-    requester: async () => await L(i.portal, { query: `title:${a}`, num: 3 }),
+    id: s
+  }), n = async (s) => await $({
+    requester: async () => await O(a.portal, { query: `title:${s}`, num: 3 }),
     key: "groups",
-    id: a
-  }), r = R(async (a, c) => {
-    i.isFetchingEntities = !0;
-    const o = a.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: a } = await D(i.portal);
-      e = a ?? [];
-    } catch (a) {
-      e = [], console.error("error fetching org users:", a);
+      const { users: s } = await F(a.portal);
+      e = s ?? [];
+    } catch (s) {
+      e = [], console.error("error fetching org users:", s);
     }
-  }, filterItems: r, getItemText: (a, c) => {
-    let o = "";
+  }, filterItems: r, getItemText: (s, c) => {
+    let l = "";
     switch (y(c)) {
       case "@":
-        o = a.username;
+        l = s.username;
         break;
       case "#":
-        o = a.title ?? "";
+        l = s.title ?? "";
         break;
       case "$":
-        o = a.title ?? "";
+        l = s.title ?? "";
         break;
     }
-    return o.trim();
+    return l.trim();
   } };
-}), g = ({ id: i, label: e, selected: s, description: n, contentStart: r, 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" });
+  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 Q extends S {
+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);
@@ -126,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), r = _(n, this.starters ?? v);
+    }, this.checkForMention = (e, i) => {
+      const n = e.substring(0, i), r = L(n, this.starters ?? g);
       if (r) {
-        const { starter: l } = r;
-        this.currentStarter = l, this.filterMentionItems(r), this.popoverOpen = !0;
+        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: r, 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, 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 = 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.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: r, type: l } = e;
-      switch (l) {
+      const { items: r, type: o } = e;
+      switch (o) {
         case "user":
-          return r.map((t, a) => g({ id: t.id, label: `@${t.username}`, description: t.fullName, selected: a === 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 r.map((t, a) => g({ id: t.id ?? `item-${a}`, label: `#${t.title}`, description: t.id ?? void 0, selected: a === 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 r.map((t, a) => g({ id: t.id ?? `group-${a}`, label: `${t.title}`, description: t.id ?? void 0, selected: a === 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>` }));
       }
     };
   }
@@ -170,13 +146,13 @@ class Q extends S {
     await this.calciteTextAreaRef.value?.setFocus();
   }
   async selectItem(e) {
-    const { currentStarter: s, _value: n, mentionStartPosition: r, currentMentionQuery: l, handleClosePopover: t, calciteTextAreaRef: a, 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, r), I = (n ?? "").substring(r + l.length), f = `${d}${p} ${I}`;
-    this._value = f, o(this._value);
-    const x = r + p.length + 1;
-    t(), await this.updateComplete, a.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);
@@ -188,11 +164,11 @@ class Q extends S {
     }), this.mentionableEntityController.fetchUsers();
   }
   render() {
-    const { popoverPlacement: e, scale: s, _value: n, maxLength: r, rows: l, placeholder: t, readOnly: a, 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=${r} .rows=${l} .scale=${s} .readOnly=${a} .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
 };