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

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,224 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+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 L } from "../../chunks/useT9n.js";
+import { a as _, r as $, f as w } from "../../chunks/user2.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 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;");
+}
+function q(e) {
+  return e?.replace(/(?:&#10;)/gu, "\r").replace(/(?:&#13;)/gu, `
+`);
+}
+function F(e) {
+  return e?.replace(/&#10;&#13;|&#10;|&#13;|\r\n|\r|\n/gu, "<br>");
+}
+function S(e) {
+  return F(M(C(q(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}`;
+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 = 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: `${n}/resources/localizedOrgProperties`,
+      portal: s,
+      params: { start: 1, num: 100 },
+      options: i
+    });
+    if (g) {
+      const b = g[o] || g.default;
+      d = b.name, v = b.description;
+    }
+  } catch {
+  }
+  return {
+    name: d || l.name,
+    description: T(v || l.description),
+    url: `${f}home/`,
+    thumbnail: h
+  };
+}
+async function J(e, r, o, s) {
+  const t = e.sourceJSON?.orgId ?? e.portal?.id ?? o?.id;
+  return await _({
+    requester: async () => await D(e, t, r, o, s),
+    key: "verified",
+    id: t
+  });
+}
+const O = (e) => (
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  e?.sourceJSON?.contentStatus === "public_authoritative"
+);
+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: n ? z(n) : "",
+      fullName: i,
+      username: t,
+      thumbnail: l,
+      id: e.portal.id,
+      url: m
+    };
+  }
+  return await w(e.owner || "", r, s);
+}
+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: r,
+      params: {
+        q: `(owner:"${e}")`,
+        num: 100
+      },
+      options: t
+    }),
+    key: "userGroups",
+    id: e
+  });
+}
+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: r,
+      params: {
+        q: `(owner:"${e}") -typekeywords:"recyclebin"`,
+        num: 1
+      },
+      options: t
+    })).total,
+    key: "userItemsTotal",
+    id: e
+  });
+}
+function P({
+  baseUrl: e,
+  user: r,
+  type: o
+}) {
+  const s = E(e), t = encodeURIComponent(r.username || "");
+  return t ? `${s}/${o}.html?user=${t}` : `${s}/${o}.html`;
+}
+class j extends A {
+  constructor() {
+    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 };
+  }
+  static {
+    this.styles = G;
+  }
+  async setFocus() {
+    this.buttonRef.value?.focus();
+  }
+  async openPopup() {
+    this.buttonRef.value?.click();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.init();
+  }
+  updated(r) {
+    r.has("isPopoverOpen") && this.isPopoverOpen && this.setPopoverOpen(!0);
+  }
+  get resolvedBaseUrl() {
+    return this.baseUrl || `${this.portal.url}/home`;
+  }
+  async init() {
+    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 (o) {
+        const n = await w(o, s, this.checkOnline);
+        !n.fullName && t && (n.fullName = t), this.itemUserInfo = n;
+      }
+    }
+  }
+  async fetchItemsAndGroups() {
+    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 V(i, t, n);
+        this.groups = l;
+      }
+      this.total = await W(i, t, n);
+    }
+  }
+  setPopoverOpen(r) {
+    requestAnimationFrame(() => {
+      this.popoverRef.value && (this.popoverRef.value.open = r);
+    });
+  }
+  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: 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 = 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": a === "outline"
+    })} @click=${() => {
+      this.isPopoverOpen || (this.isPopoverOpen = !0), this.fetchItemsAndGroups();
+    }} ${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();
+    }} @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=${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>` || ""}`;
+  }
+}
+N("arcgis-portal-user-popup", j);
+export {
+  j 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";

package/dist/components/arcgis-portal-voice-input/customElement.d.ts

@@ -6,7 +6,7 @@ export abstract class ArcgisPortalVoiceInput extends LitElement {
   /**
    * Language for speech recognition (e.g., 'en-US', 'es-ES'). If not provided, the browser's default language will be used.
    *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/lang
+   * @see https://developer.mozilla.org/docs/Web/API/SpeechRecognition/lang
    */
   accessor language: string | undefined;
   clearText(): Promise<void>;