@arcgis/portal-components 5.2.0-next.21 → 5.2.0-next.23

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

@@ -1,16 +1,16 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as A } from "../../chunks/runtime.js";
-import { LitElement as B, createEvent as y, safeClassMap as k, safeStyleMap as L } from "@arcgis/lumina";
+import { c as N } from "../../chunks/runtime.js";
+import { LitElement as A, createEvent as y, safeClassMap as k, safeStyleMap as B } from "@arcgis/lumina";
 import { css as R, html as u } from "lit";
 import { createRef as U, ref as I } from "lit/directives/ref.js";
-import { u as z } from "../../chunks/useT9n.js";
+import { u as L } from "../../chunks/useT9n.js";
 import { a as _, r as $, f as w } from "../../chunks/user2.js";
-import { g as T } from "../../chunks/user.js";
-import { Sanitizer as H } from "@esri/arcgis-html-sanitizer";
-import { g as P } from "../../chunks/portal.js";
+import { g as H } from "../../chunks/user.js";
+import { s as T, a as z } from "../../chunks/dom.js";
+import { g as x } from "../../chunks/portal.js";
 function C(e) {
-  const t = /(https?:\/\/[^\s]+)/gu;
-  return e?.replace(t, (r) => `<a href="${r}" target="_blank">${r}</a>`);
+  const r = /(https?:\/\/[^\s]+)/gu;
+  return e?.replace(r, (o) => `<a href="${o}" target="_blank">${o}</a>`);
 }
 function M(e) {
   return e?.replace(/(?:\r)/gu, "&#10;").replace(/(?:\n)/gu, "&#13;");
@@ -19,121 +19,114 @@ function q(e) {
   return e?.replace(/(?:&#10;)/gu, "\r").replace(/(?:&#13;)/gu, `
 `);
 }
-function S(e) {
+function F(e) {
   return e?.replace(/&#10;&#13;|&#10;|&#13;|\r\n|\r|\n/gu, "<br>");
 }
-function E(e) {
-  return S(M(C(q(e))));
+function S(e) {
+  return F(M(C(q(e))));
 }
-function F(e) {
+function E(e) {
   return e?.endsWith("/") ? e.slice(0, e.length - 1) : e;
 }
 const G = R`:host{display:flex}.button{display:flex;align-items:center;max-width:100%;cursor:pointer;white-space:normal;border-style:none;padding:0;font-size:.75rem;color:var(--calcite-color-text-2);outline:2px solid transparent;outline-offset:2px;transition-property:all;outline-color:transparent;background:transparent;font-family:inherit;line-height:1.5;&:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}}.button--outline{box-sizing:border-box;width:100%;padding:.5rem .75rem;transition-property:all;border:1px solid var(--calcite-color-border-3);&:hover{box-shadow:inset 0 0 0 1px var(--calcite-color-foreground-3)}}.name{overflow:hidden;white-space:nowrap;margin-inline-start:.5rem;text-overflow:ellipsis}.popover__wrapper{background-color:var(--calcite-color-foreground-1);width:min(32rem,80vw)}.popover__header{padding:1.25rem 1rem}.popover__avatar{max-width:100%}.popover__content{padding:.5rem 1rem 1.25rem}.popover__description{margin:0;overflow:auto;padding:0;padding-bottom:1rem;font-size:.875rem;color:var(--calcite-color-text-2);max-height:21.25rem}.popover__fade{position:relative;z-index:10;margin-bottom:.25rem;display:block;height:1rem;width:100%;background:linear-gradient(to bottom,transparent,var(--calcite-color-foreground-1) 100%);margin-top:-1rem}.popover__buttons{display:grid;grid-auto-flow:column;grid-gap:.5rem}.popover__buttons--no-description{padding-top:1rem}.popover__button{min-width:0px}.popover__loader{--calcite-loader-padding: 0}`;
-function O(e) {
-  return new H().sanitize(e);
-}
-function D(e) {
-  const t = O(e), r = document.createElement("div");
-  return r.innerHTML = t, r.textContent || r.innerText || "";
-}
-async function J(e, t, r, s, o) {
-  const n = e.portal?.portalHostname || s?.portalHostname || s?.restUrl?.replace("/sharing/rest", ""), a = o ? `https://www.arcgis.com/sharing/rest/portals/${t}` : `https://${n}/sharing/rest/portals/${t}`;
-  if (!n && !o)
+async function D(e, r, o, s, t) {
+  const a = e.portal?.portalHostname || s?.portalHostname || s?.restUrl?.replace("/sharing/rest", ""), n = t ? `https://www.arcgis.com/sharing/rest/portals/${r}` : `https://${a}/sharing/rest/portals/${r}`;
+  if (!a && !t)
     return null;
-  const i = o ? { disableIdentityLookup: !0, addTokenManually: !1 } : {}, l = await $({ url: a, portal: s, options: i }), { urlKey: m, thumbnail: c, customBaseUrl: p } = l, f = `https://${m}.${p}/`, h = c ? `${f}sharing/rest/portals/self/resources/${c}` : null;
+  const i = t ? { disableIdentityLookup: !0, addTokenManually: !1 } : {}, l = await $({ url: n, portal: s, options: i }), { urlKey: m, thumbnail: p, customBaseUrl: c } = l, f = `https://${m}.${c}/`, h = p ? `${f}sharing/rest/portals/self/resources/${p}` : null;
   let d = "", v = "";
   try {
     const g = await $({
-      url: `${a}/resources/localizedOrgProperties`,
+      url: `${n}/resources/localizedOrgProperties`,
       portal: s,
       params: { start: 1, num: 100 },
       options: i
     });
     if (g) {
-      const b = g[r] || g.default;
+      const b = g[o] || g.default;
       d = b.name, v = b.description;
     }
   } catch {
   }
   return {
     name: d || l.name,
-    description: D(v || l.description),
+    description: T(v || l.description),
     url: `${f}home/`,
     thumbnail: h
   };
 }
-async function K(e, t, r, s) {
-  const o = e.sourceJSON?.orgId ?? e.portal?.id ?? r?.id;
+async function J(e, r, o, s) {
+  const t = e.sourceJSON?.orgId ?? e.portal?.id ?? o?.id;
   return await _({
-    requester: async () => await J(e, o, t, r, s),
+    requester: async () => await D(e, t, r, o, s),
     key: "verified",
-    id: o
+    id: t
   });
 }
-const N = (e) => (
+const O = (e) => (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   e?.sourceJSON?.contentStatus === "public_authoritative"
 );
-async function V(e, t, r, s) {
-  if (N(e)) {
-    const o = e.owner || "", n = await K(e, r, t, s);
-    if (!n)
-      return await w(o, t, s);
-    const { description: a, name: i, thumbnail: l, url: m } = n;
+async function K(e, r, o, s) {
+  if (O(e)) {
+    const t = e.owner || "", a = await J(e, o, r, s);
+    if (!a)
+      return await w(t, r, s);
+    const { description: n, name: i, thumbnail: l, url: m } = a;
     return {
-      description: a ? O(a) : "",
+      description: n ? z(n) : "",
       fullName: i,
-      username: o,
+      username: t,
       thumbnail: l,
       id: e.portal.id,
       url: m
     };
   }
-  return await w(e.owner || "", t, s);
+  return await w(e.owner || "", r, s);
 }
-async function W(e, t, r) {
-  const s = r ? "https://www.arcgis.com/sharing/rest/" : P(t), o = r ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
+async function V(e, r, o) {
+  const s = o ? "https://www.arcgis.com/sharing/rest/" : x(r), t = o ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
   return await _({
     requester: async () => await $({
       url: `${s}community/groups`,
-      portal: t,
+      portal: r,
       params: {
         q: `(owner:"${e}")`,
         num: 100
       },
-      options: o
+      options: t
     }),
     key: "userGroups",
     id: e
   });
 }
-async function j(e, t, r) {
-  const s = r ? "https://www.arcgis.com/sharing/rest/" : P(t), o = r ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
+async function W(e, r, o) {
+  const s = o ? "https://www.arcgis.com/sharing/rest/" : x(r), t = o ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
   return await _({
     requester: async () => (await $({
       url: `${s}search`,
-      portal: t,
+      portal: r,
       params: {
         q: `(owner:"${e}") -typekeywords:"recyclebin"`,
         num: 1
       },
-      options: o
+      options: t
     })).total,
     key: "userItemsTotal",
     id: e
   });
 }
-function x({
+function P({
   baseUrl: e,
-  user: t,
-  type: r
+  user: r,
+  type: o
 }) {
-  const s = F(e), o = encodeURIComponent(t.username || "");
-  return o ? `${s}/${r}.html?user=${o}` : `${s}/${r}.html`;
+  const s = E(e), t = encodeURIComponent(r.username || "");
+  return t ? `${s}/${o}.html?user=${t}` : `${s}/${o}.html`;
 }
-class Q extends B {
+class j extends A {
   constructor() {
-    super(...arguments), this.messages = z({ blocking: !0 }), this.buttonRef = U(), this.popoverRef = U(), this.isPopoverOpen = !1, this.scale = "m", this.showAvatar = !0, this.showName = !0, this.showUsername = !1, this.appearance = "transparent", this.arcgisUserPopupInternalUIAction = y(), this.arcgisUserPopupClose = y();
+    super(...arguments), this.messages = L({ blocking: !0 }), this.buttonRef = U(), this.popoverRef = U(), this.isPopoverOpen = !1, this.scale = "m", this.showAvatar = !0, this.showName = !0, this.showUsername = !1, this.appearance = "transparent", this.arcgisUserPopupInternalUIAction = y(), this.arcgisUserPopupClose = y();
   }
   static {
     this.properties = { itemUserInfo: 16, groups: 16, total: 16, isPopoverOpen: 16, user: 0, username: 1, fullName: 1, item: 0, scale: 3, portal: 0, baseUrl: 1, underline: 5, showAvatar: 5, showName: 5, showUsername: 5, wrap: 5, appearance: 1, zIndex: 9, avatarAriaHidden: 5, checkOnline: 5 };
@@ -150,71 +143,71 @@ class Q extends B {
   connectedCallback() {
     super.connectedCallback(), this.init();
   }
-  updated(t) {
-    t.has("isPopoverOpen") && this.isPopoverOpen && this.setPopoverOpen(!0);
+  updated(r) {
+    r.has("isPopoverOpen") && this.isPopoverOpen && this.setPopoverOpen(!0);
   }
   get resolvedBaseUrl() {
     return this.baseUrl || `${this.portal.url}/home`;
   }
   async init() {
-    const { item: t, username: r, portal: s, fullName: o, messages: n } = this;
-    if (!(!n._lang || !s)) {
-      if (t) {
-        this.itemUserInfo = await V(t, s, n._lang, this.checkOnline);
+    const { item: r, username: o, portal: s, fullName: t, messages: a } = this;
+    if (!(!a._lang || !s)) {
+      if (r) {
+        this.itemUserInfo = await K(r, s, a._lang, this.checkOnline);
         return;
       }
-      if (r) {
-        const a = await w(r, s, this.checkOnline);
-        !a.fullName && o && (a.fullName = o), this.itemUserInfo = a;
+      if (o) {
+        const n = await w(o, s, this.checkOnline);
+        !n.fullName && t && (n.fullName = t), this.itemUserInfo = n;
       }
     }
   }
   async fetchItemsAndGroups() {
-    const { user: t, itemUserInfo: r, item: s, portal: o, username: n, checkOnline: a } = this, i = n || t?.username || s?.owner || r?.username;
-    if (!(!i || !o)) {
+    const { user: r, itemUserInfo: o, item: s, portal: t, username: a, checkOnline: n } = this, i = a || r?.username || s?.owner || o?.username;
+    if (!(!i || !t)) {
       if (!this.groups) {
-        const l = await W(i, o, a);
+        const l = await V(i, t, n);
         this.groups = l;
       }
-      this.total = await j(i, o, a);
+      this.total = await W(i, t, n);
     }
   }
-  setPopoverOpen(t) {
+  setPopoverOpen(r) {
     requestAnimationFrame(() => {
-      this.popoverRef.value && (this.popoverRef.value.open = t);
+      this.popoverRef.value && (this.popoverRef.value.open = r);
     });
   }
-  openLink(t, r) {
-    t.preventDefault(), window.open(r, "_blank");
-  }
-  renderOrgButtons(t) {
-    const { messages: r } = this, o = (t.url || this.resolvedBaseUrl).replace(/\/$/u, "");
-    return u`<calcite-button appearance=outline-fill kind=neutral .href=${o} target=_blank @click=${(n) => this.openLink(n, o)}>${r.homepage}</calcite-button><calcite-button appearance=outline-fill kind=neutral .href=${`${o}/gallery.html`} target=_blank @click=${(n) => this.openLink(n, `${o}/gallery.html`)}>${r.gallery}</calcite-button>`;
-  }
-  renderUserButtons(t) {
-    const { total: r, groups: s, messages: o } = this, n = t.username || "";
-    if (typeof r != "number" || !s)
-      return u`<calcite-loader .label=${o.loadingUserInformation} scale=s class="popover__loader"></calcite-loader>`;
-    const i = x({ baseUrl: this.resolvedBaseUrl, user: { username: n }, type: "groups" }), l = x({ baseUrl: this.resolvedBaseUrl, user: { username: n }, type: "content" }), m = `${this.resolvedBaseUrl.replace(/\/$/u, "")}/user.html?user=${encodeURIComponent(n)}`;
-    return u`${!!s.total && u`<calcite-button class="popover__button" appearance=outline-fill kind=neutral .href=${i} target=_blank @click=${(c) => {
-      this.openLink(c, i), this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "view all groups" });
-    }}>${o.groups.replace("${number}", new Intl.NumberFormat(o._lang).format(s.total))}</calcite-button>` || ""}${!!r && u`<calcite-button class="popover__button" appearance=outline-fill kind=neutral .href=${l} target=_blank @click=${(c) => {
-      this.openLink(c, l), this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "view all content" });
-    }}>${o.items.replace("${number}", new Intl.NumberFormat(o._lang).format(r))}</calcite-button>` || ""}<calcite-button class="popover__button" appearance=outline-fill kind=neutral .href=${m} target=_blank @click=${(c) => {
-      this.openLink(c, m), this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "view profile" });
-    }}>${o.profile}</calcite-button>`;
+  openLink(r, o) {
+    r.preventDefault(), window.open(o, "_blank");
+  }
+  renderOrgButtons(r) {
+    const { messages: o } = this, t = (r.url || this.resolvedBaseUrl).replace(/\/$/u, "");
+    return u`<calcite-button appearance=outline-fill kind=neutral .href=${t} target=_blank @click=${(a) => this.openLink(a, t)}>${o.homepage}</calcite-button><calcite-button appearance=outline-fill kind=neutral .href=${`${t}/gallery.html`} target=_blank @click=${(a) => this.openLink(a, `${t}/gallery.html`)}>${o.gallery}</calcite-button>`;
+  }
+  renderUserButtons(r) {
+    const { total: o, groups: s, messages: t } = this, a = r.username || "";
+    if (typeof o != "number" || !s)
+      return u`<calcite-loader .label=${t.loadingUserInformation} scale=s class="popover__loader"></calcite-loader>`;
+    const i = P({ baseUrl: this.resolvedBaseUrl, user: { username: a }, type: "groups" }), l = P({ baseUrl: this.resolvedBaseUrl, user: { username: a }, type: "content" }), m = `${this.resolvedBaseUrl.replace(/\/$/u, "")}/user.html?user=${encodeURIComponent(a)}`;
+    return u`${!!s.total && u`<calcite-button class="popover__button" appearance=outline-fill kind=neutral .href=${i} target=_blank @click=${(p) => {
+      this.openLink(p, i), this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "view all groups" });
+    }}>${t.groups.replace("${number}", new Intl.NumberFormat(t._lang).format(s.total))}</calcite-button>` || ""}${!!o && u`<calcite-button class="popover__button" appearance=outline-fill kind=neutral .href=${l} target=_blank @click=${(p) => {
+      this.openLink(p, l), this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "view all content" });
+    }}>${t.items.replace("${number}", new Intl.NumberFormat(t._lang).format(o))}</calcite-button>` || ""}<calcite-button class="popover__button" appearance=outline-fill kind=neutral .href=${m} target=_blank @click=${(p) => {
+      this.openLink(p, m), this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "view profile" });
+    }}>${t.profile}</calcite-button>`;
   }
   render() {
-    const { user: t, itemUserInfo: r, portal: s, item: o, appearance: n, scale: a, isPopoverOpen: i, showName: l, showUsername: m, messages: c } = this, p = t || r;
-    if (!c._lang || !p)
+    const { user: r, itemUserInfo: o, portal: s, item: t, appearance: a, scale: n, isPopoverOpen: i, showName: l, showUsername: m, messages: p } = this, c = r || o;
+    if (!p._lang || !c)
       return u`<arcgis-portal-user-avatar scale=s show-name .checkOnline=${this.checkOnline}></arcgis-portal-user-avatar>`;
-    const f = N(o), h = p.username || "", d = E(p.description || "") || "", v = T(p, c._lang), g = f ? c.itemManagedBy.replace("${username}", h) : h;
+    const f = O(t), h = c.username || "", d = S(c.description || "") || "", v = H(c, p._lang), g = f ? p.itemManagedBy.replace("${username}", h) : h;
     return u`<button class=${k({
       button: !0,
-      "button--outline": n === "outline"
+      "button--outline": a === "outline"
     })} @click=${() => {
       this.isPopoverOpen || (this.isPopoverOpen = !0), this.fetchItemsAndGroups();
-    }} ${I(this.buttonRef)}><slot><arcgis-portal-user-avatar .user=${p} .scale=${a} .portal=${s} .showName=${l} .description=${m ? h : ""} .hideAvatar=${!this.showAvatar} .underline=${this.underline} .checkOnline=${this.checkOnline} .wrap=${this.wrap}></arcgis-portal-user-avatar></slot></button>${i && this.buttonRef.value && p && u`<calcite-popover class="popover" .label=${v} pointer-disabled .referenceElement=${this.buttonRef.value} placement=auto .id=${`${h}-popover`} auto-close style=${L({ "--calcite-popover-z-index": this.zIndex?.toString() || "12" })} @calcitePopoverOpen=${() => {
+    }} ${I(this.buttonRef)}><slot><arcgis-portal-user-avatar .user=${c} .scale=${n} .portal=${s} .showName=${l} .description=${m ? h : ""} .hideAvatar=${!this.showAvatar} .underline=${this.underline} .checkOnline=${this.checkOnline} .wrap=${this.wrap}></arcgis-portal-user-avatar></slot></button>${i && this.buttonRef.value && c && u`<calcite-popover class="popover" .label=${v} pointer-disabled .referenceElement=${this.buttonRef.value} placement=auto .id=${`${h}-popover`} auto-close style=${B({ "--calcite-popover-z-index": this.zIndex?.toString() || "12" })} @calcitePopoverOpen=${() => {
       this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "open profile popup" });
     }} @calcitePopoverClose=${() => {
       this.isPopoverOpen = !1, this.arcgisUserPopupClose.emit();
@@ -222,10 +215,10 @@ class Q extends B {
       b.key === "Escape" && setTimeout(() => {
         this.buttonRef.value?.focus();
       }, 200);
-    }} ${I(this.popoverRef)}><div class="popover__wrapper"><div class="popover__header"><arcgis-portal-user-avatar class="popover__avatar" .user=${p} scale=l .portal=${s} show-name .description=${g} .checkOnline=${this.checkOnline}></arcgis-portal-user-avatar></div><div class="popover__content">${!!d && u`<p class="popover__description">${d}</p>` || ""}${!!d && u`<div class="popover__fade"></div>` || ""}<div class=${k({ popover__buttons: !0, "popover__buttons--no-description": !d })}>${f ? this.renderOrgButtons(p) : this.renderUserButtons(p)}</div></div></div></calcite-popover>` || ""}`;
+    }} ${I(this.popoverRef)}><div class="popover__wrapper"><div class="popover__header"><arcgis-portal-user-avatar class="popover__avatar" .user=${c} scale=l .portal=${s} show-name .description=${g} .checkOnline=${this.checkOnline}></arcgis-portal-user-avatar></div><div class="popover__content">${!!d && u`<p class="popover__description">${d}</p>` || ""}${!!d && u`<div class="popover__fade"></div>` || ""}<div class=${k({ popover__buttons: !0, "popover__buttons--no-description": !d })}>${f ? this.renderOrgButtons(c) : this.renderUserButtons(c)}</div></div></div></calcite-popover>` || ""}`;
   }
 }
-A("arcgis-portal-user-popup", Q);
+N("arcgis-portal-user-popup", j);
 export {
-  Q as ArcgisPortalUserPopup
+  j as ArcgisPortalUserPopup
 };