@arcgis/portal-components 5.2.0-next.99 → 6.0.0-next.0

package/dist/components/arcgis-portal-delete-items-review/customElement.js

@@ -0,0 +1,12 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import "../../chunks/runtime.js";
+import "lit";
+import "@arcgis/lumina";
+import "../../chunks/useT9n.js";
+import "../../chunks/portal-related-items-list-item.js";
+import "../portal-related-items-list-item/customElement.js";
+import { A as l } from "../../chunks/portal-delete-items-review.js";
+import "../../chunks/url.js";
+export {
+  l as ArcgisPortalDeleteItemsReview
+};

package/dist/components/arcgis-portal-delete-items-review/index.d.ts

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

package/dist/components/arcgis-portal-delete-items-review/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-list";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-entity-picker/customElement.d.ts

@@ -0,0 +1,87 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { PortalEntityPickerEntityType, PortalEntityPickerMode, PortalEntityPickerSelection } from "../../types/portalEntityPicker.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
+
+/**
+ * Search for and select an item, group, or organization member from a portal.
+ *
+ * @slot [list-start] - Content displayed before the search results.
+ */
+export abstract class ArcgisPortalEntityPicker extends LitElement {
+  /** @internal */
+  protected _messages: {
+      clearSelection: string;
+      noGroupsFound: string;
+      noItemsFound: string;
+      noUsersFound: string;
+      searchFailed: string;
+      searchGroups: string;
+      searchItems: string;
+      searchUsers: string;
+      searching: string;
+  } & T9nMeta<{
+      clearSelection: string;
+      noGroupsFound: string;
+      noItemsFound: string;
+      noUsersFound: string;
+      searchFailed: string;
+      searchGroups: string;
+      searchItems: string;
+      searchUsers: string;
+      searching: string;
+  }>;
+  /**
+   * The type of entity to search for.
+   *
+   * @default "group"
+   */
+  accessor entityType: PortalEntityPickerEntityType;
+  /** The icon displayed in the search input. */
+  accessor icon: Icon["icon"] | undefined;
+  /** Overrides for search text and other translated messages. */
+  accessor messageOverrides: {
+      clearSelection?: string | undefined;
+      noGroupsFound?: string | undefined;
+      noItemsFound?: string | undefined;
+      noUsersFound?: string | undefined;
+      searchFailed?: string | undefined;
+      searchGroups?: string | undefined;
+      searchItems?: string | undefined;
+      searchUsers?: string | undefined;
+      searching?: string | undefined;
+  };
+  /**
+   * Whether search results render inline or in a popover.
+   *
+   * @default "inline"
+   */
+  accessor mode: PortalEntityPickerMode;
+  /**
+   * The maximum number of results returned by a search.
+   *
+   * @default 10
+   */
+  accessor num: number;
+  /** The portal whose entities are searched. */
+  accessor portal: Portal;
+  /** An additional Portal query clause applied to searches. */
+  accessor query: string | undefined;
+  /** The currently selected entity. The component does not mutate this property. */
+  accessor selected: PortalEntityPickerSelection | null;
+  /** Sets focus on the search input. */
+  setFocus(): Promise<void>;
+  /**
+   * Opens or closes the results popover when `mode` is `popover`.
+   *
+   * @param open
+   */
+  togglePicker(open: boolean): Promise<void>;
+  /** Emitted when the user requests a selection change. */
+  readonly arcgisSelectionChange: import("@arcgis/lumina").TargetedEvent<this, PortalEntityPickerSelection | null>;
+  readonly "@eventTypes": {
+    arcgisSelectionChange: ArcgisPortalEntityPicker["arcgisSelectionChange"]["detail"];
+  };
+}

package/dist/components/arcgis-portal-entity-picker/customElement.js

@@ -0,0 +1,247 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as m } from "../../chunks/runtime.js";
+import { css as y, html as n } from "lit";
+import { keyed as h } from "lit/directives/keyed.js";
+import { LitElement as f, createEvent as v, safeStyleMap as g } from "@arcgis/lumina";
+import { createRef as u, ref as d } from "lit/directives/ref.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import { c as b } from "../../chunks/string.js";
+import { s as R } from "../../chunks/dom.js";
+import { a as T } from "../../chunks/portal.js";
+import { r as S } from "../../chunks/request.js";
+import "../arcgis-portal-group-card/customElement.js";
+import "../arcgis-portal-item-card/customElement.js";
+import { S as k } from "../../chunks/utils.js";
+import "../arcgis-portal-user-avatar/customElement.js";
+const w = [
+  "esri_livingatlas",
+  "esri_boundaries",
+  "esri_demographics",
+  "esri_nav",
+  "esri_webstyles"
+];
+function I(o) {
+  return R(o.trim()).replace(/[!*+\-&|()[\]{}^~?:"\\]/gu, "\\$&");
+}
+async function _({
+  portal: o,
+  searchTerm: e,
+  num: t = 100,
+  query: s
+}) {
+  const i = I(e), l = `${T(o)}portals/self/users/search`, r = [i ? `(${i})` : void 0, s?.trim() ? `(${s.trim()})` : void 0];
+  o.isPortal && r.push(...w.map((p) => `-username:${p}`));
+  const a = l.includes("www.arcgis.com") && o.isPortal ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
+  return await S({
+    url: l,
+    portal: o,
+    params: {
+      num: Math.min(Math.max(t, 1), 100),
+      q: r.filter(Boolean).join(" AND "),
+      sortField: "relevance"
+    },
+    options: a
+  });
+}
+function A(...o) {
+  return o.map((e) => e?.trim()).filter((e) => !!e).map((e) => `(${e})`).join(" AND ");
+}
+async function P(o, e, t, s = {}) {
+  const i = Math.min(Math.max(s.num ?? 10, 1), 100);
+  if (e === "user")
+    try {
+      return {
+        result: {
+          entityType: e,
+          result: await _({ portal: o, searchTerm: t, num: i, query: s.query })
+        }
+      };
+    } catch (c) {
+      return console.error(c), { error: { code: "unhandledError" } };
+    }
+  const l = b(t);
+  if (!l)
+    return {};
+  const r = {
+    num: i,
+    query: A(l, s.query)
+  };
+  try {
+    return e === "group" ? { result: { entityType: e, result: await o.queryGroups(r) } } : { result: { entityType: e, result: await o.queryItems(r) } };
+  } catch (c) {
+    return console.error(c), { error: { code: "unhandledError" } };
+  }
+}
+const O = y`:host{display:block;inline-size:100%}.entity-picker{display:flex;flex-direction:column;gap:.5rem;min-inline-size:16rem}.entity-picker__results{max-block-size:22rem;overflow-y:auto}.entity-picker__cards{display:flex;flex-direction:column;gap:.5rem}.entity-picker__status{color:var(--calcite-color-text-3);font-size:.875rem;margin:0;padding:.75rem}.entity-picker__selection{align-items:center;display:flex;gap:.5rem}.entity-picker__selection-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entity-picker__input{inline-size:100%}`;
+class F extends f {
+  constructor() {
+    super(...arguments), this._messages = $({ blocking: !0, name: "portal-entity-picker" }), this.inputRef = u(), this.inputContainerRef = u(), this.resizeObserver = null, this.searchId = 0, this.searchTerm = "", this.isSearching = !1, this.searchFailed = !1, this.popoverOpen = !1, this.popoverWidth = 0, this.entityType = "group", this.mode = "inline", this.selected = null, this.num = 10, this.arcgisSelectionChange = v();
+  }
+  static {
+    this.properties = { searchTerm: 16, isSearching: 16, searchFailed: 16, searchResult: 16, popoverOpen: 16, popoverWidth: 16, portal: 0, entityType: 1, mode: 1, selected: 0, query: 1, num: 9, icon: 1, messageOverrides: 0 };
+  }
+  static {
+    this.styles = O;
+  }
+  get searchLabel() {
+    const { entityType: e, _messages: t } = this;
+    return e === "group" ? t.searchGroups : e === "item" ? t.searchItems : t.searchUsers;
+  }
+  get selectedLabel() {
+    const { entityType: e, selected: t } = this;
+    if (t?.entityType === e)
+      return t.entityType === "user" ? t.entity.fullName || t.entity.username : t.entity.title || t.entity.id || void 0;
+  }
+  async togglePicker(e) {
+    this.mode === "popover" && (this.popoverOpen = e, await this.updateComplete, await this.setFocus());
+  }
+  async setFocus() {
+    await this.inputRef.value?.setFocus();
+  }
+  firstUpdated() {
+    this.updatePopoverWidth(), !(typeof ResizeObserver > "u" || !this.inputContainerRef.value) && (this.resizeObserver = new ResizeObserver(() => this.updatePopoverWidth()), this.resizeObserver.observe(this.inputContainerRef.value));
+  }
+  willUpdate(e) {
+    (e.has("portal") || e.has("entityType") || e.has("query") || e.has("num")) && this.resetSearch(), e.has("mode") && this.mode === "inline" && (this.popoverOpen = !1);
+  }
+  disconnectedCallback() {
+    this.cancelPendingSearch(), this.resizeObserver?.disconnect(), this.resizeObserver = null, super.disconnectedCallback();
+  }
+  updatePopoverWidth() {
+    requestAnimationFrame(() => {
+      this.popoverWidth = this.inputContainerRef.value?.offsetWidth ?? 0;
+    });
+  }
+  cancelPendingSearch() {
+    return this.debounceId !== void 0 && (window.clearTimeout(this.debounceId), this.debounceId = void 0), this.searchId += 1, this.searchId;
+  }
+  resetSearch() {
+    this.cancelPendingSearch(), this.searchTerm = "", this.isSearching = !1, this.searchFailed = !1, this.searchResult = void 0, this.popoverOpen = !1;
+  }
+  scheduleSearch(e) {
+    const t = e.trim(), s = this.cancelPendingSearch();
+    if (this.searchFailed = !1, this.searchResult = void 0, !t) {
+      this.isSearching = !1, this.popoverOpen = !1;
+      return;
+    }
+    this.isSearching = !0, this.mode === "popover" && (this.popoverOpen = !0), this.debounceId = window.setTimeout(() => {
+      this.debounceId = void 0, this.search(t, s);
+    }, k);
+  }
+  async search(e, t) {
+    const { entityType: s, num: i, portal: l, query: r } = this;
+    try {
+      const { error: c, result: a } = await P(l, s, e, { num: i, query: r });
+      if (t !== this.searchId)
+        return;
+      this.searchFailed = !!c, this.searchResult = a;
+    } catch {
+      if (t !== this.searchId)
+        return;
+      this.searchFailed = !0, this.searchResult = void 0;
+    } finally {
+      t === this.searchId && (this.isSearching = !1);
+    }
+  }
+  emitSelection(e) {
+    this.arcgisSelectionChange.emit(e), this.mode === "popover" && this.togglePicker(!1);
+  }
+  getFocusableResults() {
+    const e = Array.from(this.renderRoot.querySelector('slot[name="list-start"]')?.assignedElements({ flatten: !0 }) ?? []).filter((s) => s instanceof HTMLElement && (s.tagName === "CALCITE-LIST-ITEM" || s.tabIndex >= 0)), t = Array.from(this.renderRoot.querySelectorAll("calcite-list-item, arcgis-portal-group-card, arcgis-portal-item-card"));
+    return [...e, ...t];
+  }
+  async focusResult(e) {
+    if (e.tagName === "CALCITE-LIST-ITEM") {
+      await e.setFocus();
+      return;
+    }
+    if (e.tagName === "ARCGIS-PORTAL-GROUP-CARD") {
+      await e.restoreFocus();
+      return;
+    }
+    if (e.tagName === "ARCGIS-PORTAL-ITEM-CARD") {
+      await e.restoreFocus();
+      return;
+    }
+    e.focus();
+  }
+  async focusResultAt(e) {
+    const t = this.getFocusableResults();
+    if (!t.length)
+      return;
+    const s = (e + t.length) % t.length;
+    await this.focusResult(t[s]);
+  }
+  handleResultsKeyDown(e) {
+    const t = this.getFocusableResults(), s = e.composedPath(), i = t.findIndex((r) => s.includes(r));
+    if (i === -1)
+      return;
+    if (this.mode === "inline" && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      e.preventDefault(), this.focusResultAt(i + (e.key === "ArrowDown" ? 1 : -1));
+      return;
+    }
+    const l = t[i];
+    if (l.tagName === "ARCGIS-PORTAL-GROUP-CARD" && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      const { group: r } = l;
+      this.emitSelection({ entityType: "group", entity: r });
+      return;
+    }
+    if (l.tagName === "ARCGIS-PORTAL-ITEM-CARD" && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      const { item: r } = l;
+      this.emitSelection({ entityType: "item", entity: r });
+    }
+  }
+  renderGroup(e) {
+    return h(e.id, n`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.owner, e.access].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "group", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
+  }
+  renderInlineGroup(e) {
+    return h(e.id, n`<arcgis-portal-group-card .group=${e} .portal=${this.portal} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} selection=none show-summary .user=${this.portal.user ?? void 0} view=compact></arcgis-portal-group-card>`);
+  }
+  renderItem(e) {
+    return h(e.id, n`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.type, e.owner].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "item", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
+  }
+  renderInlineItem(e) {
+    return h(e.id, n`<arcgis-portal-item-card .item=${e} .portal=${this.portal} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} selection=none show-summary .user=${this.portal.user ?? void 0} view=list></arcgis-portal-item-card>`);
+  }
+  renderUser(e) {
+    return h(e.username, n`<calcite-list-item .label=${e.fullName || e.username} .description=${e.username} .selected=${this.selected?.entityType === "user" && this.selected.entity.username === e.username} @calciteListItemSelect=${() => this.emitSelection({ entityType: "user", entity: e })}><arcgis-portal-user-avatar slot=content-start .portal=${this.portal} .user=${e} scale=m></arcgis-portal-user-avatar></calcite-list-item>`);
+  }
+  renderSearchResults() {
+    const { entityType: e, isSearching: t, searchFailed: s, searchResult: i, searchTerm: l, _messages: r } = this;
+    if (!l.trim())
+      return null;
+    if (t)
+      return n`<div role=status><calcite-loader .label=${r.searching} scale=s></calcite-loader></div>`;
+    if (s)
+      return n`<p class="entity-picker__status" role=alert>${r.searchFailed}</p>`;
+    if (!(i?.result.results ?? []).length) {
+      const a = e === "group" ? r.noGroupsFound : e === "item" ? r.noItemsFound : r.noUsersFound;
+      return n`<p class="entity-picker__status" role=status>${a}</p>`;
+    }
+    return this.mode === "inline" && i?.entityType === "group" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineGroup(a))}</div>` : this.mode === "inline" && i?.entityType === "item" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineItem(a))}</div>` : n`<calcite-list interaction-mode=interactive .label=${this.searchLabel} selection-mode=none><slot name=list-start></slot>${i?.entityType === "group" ? i.result.results.map((a) => this.renderGroup(a)) : i?.entityType === "item" ? i.result.results.map((a) => this.renderItem(a)) : i?.result.results.map((a) => this.renderUser(a))}</calcite-list>`;
+  }
+  renderPicker(e = !0) {
+    return n`<div class="entity-picker">${this.selectedLabel && n`<div class="entity-picker__selection"><span class="entity-picker__selection-label">${this.selectedLabel}</span><calcite-button appearance=transparent icon-start=x kind=neutral .label=${this._messages.clearSelection} @click=${() => this.arcgisSelectionChange.emit(null)} scale=s></calcite-button></div>` || ""}<div class="entity-picker__input" ${d(this.inputContainerRef)}><calcite-input .icon=${this.icon} .label=${this.searchLabel} .placeholder=${this.searchLabel} .value=${this.searchTerm} @click=${() => {
+      this.mode === "popover" && this.searchTerm.trim() && (this.popoverOpen = !0);
+    }} @keydown=${(t) => {
+      (t.key === "ArrowDown" || t.key === "ArrowUp") && this.searchResult?.result.results.length && (t.preventDefault(), this.focusResultAt(t.key === "ArrowDown" ? 0 : -1));
+    }} @focus=${() => {
+      this.mode === "popover" && this.searchTerm.trim() && (this.popoverOpen = !0);
+    }} @calciteInputInput=${(t) => {
+      this.searchTerm = t.target.value, this.scheduleSearch(this.searchTerm);
+    }} ${d(this.inputRef)}></calcite-input></div>${e && n`<div class="entity-picker__results" @keydown=${this.handleResultsKeyDown}>${this.renderSearchResults()}</div>` || ""}</div>`;
+  }
+  render() {
+    return this.mode === "inline" ? this.renderPicker() : n`${this.renderPicker(!1)}<calcite-popover .label=${this.searchLabel} .open=${this.popoverOpen} placement=bottom-start .referenceElement=${this.inputContainerRef.value} trigger-disabled @calcitePopoverClose=${(e) => {
+      !e.target.open && this.popoverOpen && (this.popoverOpen = !1, requestAnimationFrame(() => {
+        this.setFocus();
+      }));
+    }}><div class="entity-picker__results" style=${g({ inlineSize: this.popoverWidth ? `${this.popoverWidth}px` : void 0 })}>${this.renderSearchResults()}</div></calcite-popover>`;
+  }
+}
+m("arcgis-portal-entity-picker", F);
+export {
+  F as ArcgisPortalEntityPicker
+};

package/dist/components/arcgis-portal-entity-picker/index.d.ts

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

package/dist/components/arcgis-portal-entity-picker/index.js

@@ -0,0 +1,11 @@
+import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-avatar";
+import "../arcgis-portal-group-card/index.js";
+import "../arcgis-portal-item-card/index.js";
+import "../arcgis-portal-user-avatar/index.js";
+import "@esri/calcite-components/components/calcite-loader";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-input";
+import "@esri/calcite-components/components/calcite-popover";
+export * from "./customElement.js";