@arcgis/portal-components 5.2.0-next.8 → 5.2.0-next.85

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

@@ -5,14 +5,16 @@ 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/groups.js";
-import { a as w, b as D } from "../../chunks/user2.js";
+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 r = n.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&"), l = new RegExp(`${r}"([^"\\n]*)"?$`, "u"), t = i.match(l);
+    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 = {
@@ -22,7 +24,7 @@ function _(i, e) {
         startIndex: h
       });
     }
-    const a = new RegExp(`${r}[\\p{L}\\p{N}_-]+$`, "u"), c = i.match(a);
+    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 = {
@@ -37,17 +39,17 @@ function _(i, e) {
 }
 const y = (i) => v.includes(i) ? i : "@", F = P((i) => {
   let e = [];
-  const s = async (a) => await w({
-    requester: async () => await U(i.portal, a, { num: 3 }),
+  const s = async (r) => await w({
+    requester: async () => await U(i.portal, r, { num: 3 }),
     key: "items",
-    id: a
-  }), n = async (a) => await w({
-    requester: async () => await L(i.portal, { query: `title:${a}`, num: 3 }),
+    id: r
+  }), n = async (r) => await w({
+    requester: async () => await L(i.portal, { query: `title:${r}`, num: 3 }),
     key: "groups",
-    id: a
-  }), r = R(async (a, c) => {
+    id: r
+  }), a = R(async (r, c) => {
     i.isFetchingEntities = !0;
-    const o = a.toLowerCase();
+    const o = r.toLowerCase();
     switch (y(c)) {
       case "@":
         const p = 10;
@@ -71,31 +73,31 @@ const y = (i) => v.includes(i) ? i : "@", F = P((i) => {
   }, O);
   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: r } = await D(i.portal);
+      e = r ?? [];
+    } catch (r) {
+      e = [], console.error("error fetching org users:", r);
     }
-  }, filterItems: r, getItemText: (a, c) => {
+  }, filterItems: a, getItemText: (r, c) => {
     let o = "";
     switch (y(c)) {
       case "@":
-        o = a.username;
+        o = r.username;
         break;
       case "#":
-        o = a.title ?? "";
+        o = r.title ?? "";
         break;
       case "$":
-        o = a.title ?? "";
+        o = r.title ?? "";
         break;
     }
     return o.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) => {
+}), 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();
 }} ${M((t) => {
   s && 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}`;
+})}>${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 {
   constructor() {
     super(...arguments), this.calciteTextAreaRef = E(), this.mentionableEntityController = F(this), this.handleInput = (e) => {
@@ -127,30 +129,30 @@ class Q extends S {
     }, 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);
-      if (r) {
-        const { starter: l } = r;
-        this.currentStarter = l, this.filterMentionItems(r), this.popoverOpen = !0;
+      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;
         return;
       }
       this.handleClosePopover();
     }, this.filterMentionItems = (e) => {
-      const { mentionText: s, query: n, starter: r, startIndex: l } = e;
+      const { mentionText: s, query: n, starter: a, startIndex: l } = e;
       this.currentMentionQuery = s, this.mentionStartPosition = l;
       const t = n.toLowerCase();
-      this.mentionableEntityController.filterItems(t, r), this.selectedItemIndex = 0;
+      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;
       if (!e)
         return null;
-      const { items: r, type: l } = e;
+      const { items: a, type: l } = e;
       switch (l) {
         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 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) }));
         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 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>` }));
         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 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>` }));
       }
     };
   }
@@ -170,13 +172,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;
+    const { currentStarter: s, _value: n, mentionStartPosition: a, currentMentionQuery: l, handleClosePopover: t, calciteTextAreaRef: r, nativeTextAreaRef: c, bubbleNewValueChange: o } = this;
     if (!e || !s)
       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}`;
+    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 = r + p.length + 1;
-    t(), await this.updateComplete, a.value?.setFocus(), c && (c.selectionEnd = x);
+    const x = a + p.length + 1;
+    t(), await this.updateComplete, r.value?.setFocus(), c && (c.selectionEnd = x);
   }
   willUpdate(e) {
     e.has("value") && (this._value = this.value ?? ""), e.has("selectedItemIndex") && this.arcgisMentionableSelectedIndexChange.emit(this.selectedItemIndex);
@@ -188,8 +190,8 @@ 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: 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>` || ""}`;
   }
 }
 A("arcgis-portal-mentionable-text-area", Q);