@arcgis/portal-components 5.2.0-next.4 → 5.2.0-next.6

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

@@ -0,0 +1,231 @@
+/* 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 { 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 { 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";
+function C(e) {
+  const t = /(https?:\/\/[^\s]+)/gu;
+  return e?.replace(t, (r) => `<a href="${r}" target="_blank">${r}</a>`);
+}
+function M(e) {
+  return e?.replace(/(?:\r)/gu, "&#10;").replace(/(?:\n)/gu, "&#13;");
+}
+function q(e) {
+  return e?.replace(/(?:&#10;)/gu, "\r").replace(/(?:&#13;)/gu, `
+`);
+}
+function S(e) {
+  return e?.replace(/&#10;&#13;|&#10;|&#13;|\r\n|\r|\n/gu, "<br>");
+}
+function E(e) {
+  return S(M(C(q(e))));
+}
+function F(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)
+    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;
+  let d = "", v = "";
+  try {
+    const g = await $({
+      url: `${a}/resources/localizedOrgProperties`,
+      portal: s,
+      params: { start: 1, num: 100 },
+      options: i
+    });
+    if (g) {
+      const b = g[r] || g.default;
+      d = b.name, v = b.description;
+    }
+  } catch {
+  }
+  return {
+    name: d || l.name,
+    description: D(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;
+  return await _({
+    requester: async () => await J(e, o, t, r, s),
+    key: "verified",
+    id: o
+  });
+}
+const N = (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;
+    return {
+      description: a ? O(a) : "",
+      fullName: i,
+      username: o,
+      thumbnail: l,
+      id: e.portal.id,
+      url: m
+    };
+  }
+  return await w(e.owner || "", t, s);
+}
+async function W(e, t, r) {
+  const s = r ? "https://www.arcgis.com/sharing/rest/" : P(t), o = r ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
+  return await _({
+    requester: async () => await $({
+      url: `${s}community/groups`,
+      portal: t,
+      params: {
+        q: `(owner:"${e}")`,
+        num: 100
+      },
+      options: o
+    }),
+    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 } : {};
+  return await _({
+    requester: async () => (await $({
+      url: `${s}search`,
+      portal: t,
+      params: {
+        q: `(owner:"${e}") -typekeywords:"recyclebin"`,
+        num: 1
+      },
+      options: o
+    })).total,
+    key: "userItemsTotal",
+    id: e
+  });
+}
+function x({
+  baseUrl: e,
+  user: t,
+  type: r
+}) {
+  const s = F(e), o = encodeURIComponent(t.username || "");
+  return o ? `${s}/${r}.html?user=${o}` : `${s}/${r}.html`;
+}
+class Q extends B {
+  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();
+  }
+  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 };
+  }
+  static {
+    this.styles = G;
+  }
+  async setFocus() {
+    this.buttonRef.value?.focus();
+  }
+  async openPopup() {
+    this.buttonRef.value?.click();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.init();
+  }
+  updated(t) {
+    t.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);
+        return;
+      }
+      if (r) {
+        const a = await w(r, s, this.checkOnline);
+        !a.fullName && o && (a.fullName = o), this.itemUserInfo = a;
+      }
+    }
+  }
+  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)) {
+      if (!this.groups) {
+        const l = await W(i, o, a);
+        this.groups = l;
+      }
+      this.total = await j(i, o, a);
+    }
+  }
+  setPopoverOpen(t) {
+    requestAnimationFrame(() => {
+      this.popoverRef.value && (this.popoverRef.value.open = t);
+    });
+  }
+  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>`;
+  }
+  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)
+      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;
+    return u`<button class=${k({
+      button: !0,
+      "button--outline": n === "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=${() => {
+      this.arcgisUserPopupInternalUIAction.emit({ category: "profile popup", action: "open profile popup" });
+    }} @calcitePopoverClose=${() => {
+      this.isPopoverOpen = !1, this.arcgisUserPopupClose.emit();
+    }} @keydown=${(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>` || ""}`;
+  }
+}
+A("arcgis-portal-user-popup", Q);
+export {
+  Q as ArcgisPortalUserPopup
+};

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

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

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

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-loader";
+import "../arcgis-portal-user-avatar/index.js";
+import "@esri/calcite-components/components/calcite-popover";
+export * from "./customElement.js";