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

package/dist/components/arcgis-portal-ai-assistant-interrupt/customElement.js

@@ -1,18 +1,18 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as l } from "../../chunks/runtime.js";
-import { css as o, html as n } from "lit";
-import { LitElement as u, createEvent as a } from "@arcgis/lumina";
+import { c } from "../../chunks/runtime.js";
+import { css as o, html as a } from "lit";
+import { LitElement as u, createEvent as n } from "@arcgis/lumina";
 import m from "@esri/arcgis-html-sanitizer";
 import { unsafeHTML as p } from "lit/directives/unsafe-html.js";
 import { marked as r } from "marked";
 import { u as g } from "../../chunks/useT9n.js";
 import { a as d } from "../../chunks/functionalities.js";
-const h = o`.interrupt-container{display:flex;flex-direction:column;gap:.75rem}.interrupt-actions{display:flex;justify-content:flex-end;gap:.5rem}.interrupt-message{white-space:normal}// \`:where()\` to reset styles of common elements in the message content without increasing specificity .interrupt-message :where(p){margin:0}// \`:where()\` to reset styles of list elements and add consistent indentation for nested lists without increasing specificity .interrupt-message :where(ul,ol){margin:0;padding-inline-start:1.25rem}`;
+const h = o`.interrupt-container{display:flex;flex-direction:column;gap:.75rem}.interrupt-actions{display:flex;justify-content:flex-end;gap:.5rem}.interrupt-message{white-space:normal}.interrupt-message :where(p){margin:0}.interrupt-message :where(ul,ol){margin:0;padding-inline-start:1.25rem}`;
 r.use({ gfm: !0, breaks: !0, async: !1 });
 const f = new m();
 class b extends u {
   constructor() {
-    super(...arguments), this.#t = [], this._messages = g({ blocking: !0 }), this.arcgisCancel = a(), this.arcgisSubmit = a();
+    super(...arguments), this.#t = [], this._messages = g({ blocking: !0 }), this.arcgisCancel = n(), this.arcgisSubmit = n();
   }
   static {
     this.properties = { type: 1, message: 1, options: 0 };
@@ -29,11 +29,11 @@ class b extends u {
     const { _messages: t, type: i, options: s } = this;
     switch (i) {
       case "single-select":
-        return n`<calcite-list class="interrupt-list" .label=${t.singleSelectLabel} selection-mode=single-persist @calciteListChange=${(e) => this.#t = e.target.selectedItems[0]?.value}>${s?.map((e) => n`<calcite-list-item .label=${e} .value=${e}></calcite-list-item>`)}</calcite-list>`;
+        return a`<calcite-list class="interrupt-list" .label=${t.singleSelectLabel} selection-mode=single-persist @calciteListChange=${(e) => this.#t = e.target.selectedItems[0]?.value}>${s?.map((e) => a`<calcite-list-item .label=${e} .value=${e}></calcite-list-item>`)}</calcite-list>`;
       case "multi-select":
-        return n`<calcite-list class="interrupt-list" .label=${t.multiSelectLabel} selection-mode=multiple @calciteListChange=${(e) => this.#t = e.target.selectedItems.map((c) => c.value)}>${s?.map((e) => n`<calcite-list-item .label=${e} .value=${e}></calcite-list-item>`)}</calcite-list>`;
+        return a`<calcite-list class="interrupt-list" .label=${t.multiSelectLabel} selection-mode=multiple @calciteListChange=${(e) => this.#t = e.target.selectedItems.map((l) => l.value)}>${s?.map((e) => a`<calcite-list-item .label=${e} .value=${e}></calcite-list-item>`)}</calcite-list>`;
       case "text-input":
-        return n`<calcite-input class="interrupt-input" .label=${t.textInputLabel} @calciteInputInput=${(e) => this.#t = e.target.value}></calcite-input>`;
+        return a`<calcite-input class="interrupt-input" .label=${t.textInputLabel} @calciteInputInput=${(e) => this.#t = e.target.value}></calcite-input>`;
       case "boolean-choice":
         return null;
       default:
@@ -42,10 +42,10 @@ class b extends u {
   }
   render() {
     const { _messages: t, type: i } = this, s = i === "boolean-choice";
-    return n`<div class="interrupt-container"><calcite-notice open kind=neutral width=full><div slot=title>${s ? t.titleConfirm : t.titleInput}</div><div slot=message class="interrupt-message">${p(this._renderMessageContent())}</div></calcite-notice>${this._renderInterruptInput()}<div class="interrupt-actions"><calcite-button appearance=outline @click=${() => this.arcgisCancel.emit()}>${s ? t.cancelButton : t.skipButton}</calcite-button><calcite-button appearance=solid @click=${() => this.arcgisSubmit.emit(i === "boolean-choice" ? !0 : this.#t)}>${s ? t.confirmButton : t.submitButton}</calcite-button></div></div>`;
+    return a`<div class="interrupt-container"><calcite-notice open kind=neutral width=full><div slot=title>${s ? t.titleConfirm : t.titleInput}</div><div slot=message class="interrupt-message">${p(this._renderMessageContent())}</div></calcite-notice>${this._renderInterruptInput()}<div class="interrupt-actions"><calcite-button appearance=outline @click=${() => this.arcgisCancel.emit()}>${s ? t.cancelButton : t.skipButton}</calcite-button><calcite-button appearance=solid @click=${() => this.arcgisSubmit.emit(i === "boolean-choice" ? !0 : this.#t)}>${s ? t.confirmButton : t.submitButton}</calcite-button></div></div>`;
   }
 }
-l("arcgis-portal-ai-assistant-interrupt", b);
+c("arcgis-portal-ai-assistant-interrupt", b);
 export {
   b as ArcgisPortalAiAssistantInterrupt
 };

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

@@ -0,0 +1,111 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type PortalItem from "@arcgis/core/portal/PortalItem.js";
+import type PortalUser from "@arcgis/core/portal/PortalUser.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { InternalUIAction } from "../../types/tracking.js";
+import type { Scale } from "../../types/ui.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+export abstract class ArcgisPortalUserPopup extends LitElement {
+  /**
+   * Choose outline for a full-width outlined button.
+   *
+   * @default "transparent"
+   */
+  accessor appearance: "outline" | "transparent";
+  /**
+   * Set to true to hide avatar from screen readers.
+   *
+   * @default false
+   */
+  accessor avatarAriaHidden: boolean | undefined;
+  /** Fully qualified path to portal home root. */
+  accessor baseUrl: string | undefined;
+  /**
+   * @default false
+   * @internal
+   */
+  accessor checkOnline: boolean | undefined;
+  /** Optional full name fallback if user information does not include it. */
+  accessor fullName: string | undefined;
+  /** Passing an item will show org info for publicly verified items, user info for standard items. */
+  accessor item: PortalItem | undefined;
+  /** @internal */
+  protected messages: {
+      expand: string;
+      showLess: string;
+      homepage: string;
+      gallery: string;
+      profile: string;
+      groups: string;
+      items: string;
+      viewAll: string;
+      loadingUserInformation: string;
+      itemManagedBy: string;
+  } & T9nMeta<{
+      expand: string;
+      showLess: string;
+      homepage: string;
+      gallery: string;
+      profile: string;
+      groups: string;
+      items: string;
+      viewAll: string;
+      loadingUserInformation: string;
+      itemManagedBy: string;
+  }>;
+  /** The current portal instance. */
+  accessor portal: Portal;
+  /**
+   * Scale of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Set to false to hide the avatar and show username only.
+   *
+   * @default true
+   */
+  accessor showAvatar: boolean;
+  /**
+   * Set to false to show only the avatar.
+   *
+   * @default true
+   */
+  accessor showName: boolean;
+  /**
+   * Set to true to show username in description.
+   *
+   * @default false
+   */
+  accessor showUsername: boolean;
+  /**
+   * Set to true to underline the name.
+   *
+   * @default false
+   */
+  accessor underline: boolean | undefined;
+  /** Passing a user will always show thumbnail for that user (use either user or item). */
+  accessor user: PortalUser | undefined;
+  /** Passing a username will perform a fetch for the user information on load. */
+  accessor username: string | undefined;
+  /**
+   * Allow the name to wrap lines (max 2).
+   *
+   * @default false
+   */
+  accessor wrap: boolean | undefined;
+  /** The z-index of the popover. */
+  accessor zIndex: number | undefined;
+  openPopup(): Promise<void>;
+  setFocus(): Promise<void>;
+  readonly arcgisUserPopupClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires on internal component interaction - used by telemetry. */
+  readonly arcgisUserPopupInternalUIAction: import("@arcgis/lumina").TargetedEvent<this, InternalUIAction>;
+  readonly "@eventTypes": {
+    arcgisUserPopupClose: ArcgisPortalUserPopup["arcgisUserPopupClose"]["detail"];
+    arcgisUserPopupInternalUIAction: ArcgisPortalUserPopup["arcgisUserPopupInternalUIAction"]["detail"];
+  };
+}

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";