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

package/dist/chunks/functionalities.js

@@ -1,10 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-const s = (e) => {
+const t = (e) => {
   throw new Error(`Unexpected value: ${e}`);
 }, a = async (e) => {
-  await new Promise((t) => setTimeout(t, e));
-};
+  await new Promise((s) => setTimeout(s, e));
+}, n = (e, s) => e.includes(s);
 export {
-  s as a,
+  t as a,
+  n as i,
   a as t
 };

package/dist/chunks/ui.js

@@ -0,0 +1,10 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+const s = {
+  xxs: 320,
+  xs: 480,
+  sm: 640,
+  md: 768
+};
+export {
+  s as b
+};

package/dist/components/arcgis-portal-browser/customElement.d.ts

@@ -0,0 +1,85 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { SearchResultGroup } from "../../types/group.js";
+import type { SearchResultItem } from "../../types/item.js";
+import type { SearchResult } from "../../types/search.js";
+import type { SearchResultUser } from "../../types/user.js";
+import type { PortalBrowserStore } from "./utils/store.js";
+import type { RangeFormatter } from "./utils/types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+export abstract class ArcgisPortalBrowser extends LitElement {
+  /** @internal */
+  protected _messages: {
+      browser: {
+          refineContent: string;
+          close: string;
+          loading: string;
+      };
+      range: {
+          summary: string;
+          announcement: string;
+      };
+      filterStatus: {
+          filters: string;
+          additional: string;
+          clearAllFilters: string;
+      };
+  } & T9nMeta<{
+      browser: {
+          refineContent: string;
+          close: string;
+          loading: string;
+      };
+      range: {
+          summary: string;
+          announcement: string;
+      };
+      filterStatus: {
+          filters: string;
+          additional: string;
+          clearAllFilters: string;
+      };
+  }>;
+  /** @default false */
+  accessor alwaysShowContent: boolean;
+  /** @default false */
+  accessor alwaysShowPagination: boolean | undefined;
+  /** @default false */
+  accessor alwaysShowSelection: boolean;
+  /** @default "large" */
+  accessor formFactor: "large" | "small";
+  /**
+   * Height sizing strategy for the browser to use
+   * full height will be 100% the height of its parent and scroll internally
+   * auto height will grow with the contents of the browser
+   *
+   * @default "full"
+   */
+  accessor height: "auto" | "full";
+  /** @default false */
+  accessor hideContentTop: boolean;
+  /** @default false */
+  accessor hideFilters: boolean | undefined;
+  /** @default false */
+  accessor hideTopBar: boolean | undefined;
+  /** @default false */
+  accessor loading: boolean;
+  /** @default false */
+  accessor panel: boolean;
+  /** @default false */
+  accessor preview: boolean;
+  accessor rangeFormatter: RangeFormatter | undefined;
+  accessor response: SearchResult<SearchResultGroup | SearchResultItem | SearchResultUser>;
+  /** @default "" */
+  accessor searchTerm: string;
+  accessor selected: SearchResultGroup[] | SearchResultItem[] | SearchResultUser[] | undefined;
+  /** @default false */
+  accessor showPreSearch: boolean | undefined;
+  accessor store: PortalBrowserStore;
+  scrollToTop(): Promise<void>;
+  readonly arcgisAriaUpdate: import("@arcgis/lumina").TargetedEvent<this, string>;
+  readonly "@eventTypes": {
+    arcgisAriaUpdate: ArcgisPortalBrowser["arcgisAriaUpdate"]["detail"];
+  };
+}

package/dist/components/arcgis-portal-browser/customElement.js

@@ -0,0 +1,210 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as x } from "../../chunks/runtime.js";
+import { watch as a } from "@arcgis/core/core/reactiveUtils.js";
+import * as h from "@arcgis/core/intl.js";
+import { LitElement as b, createEvent as _, safeStyleMap as p, safeClassMap as o } from "@arcgis/lumina";
+import { css as y, html as r } from "lit";
+import { createRef as $, ref as F } from "lit/directives/ref.js";
+import { u as S } from "../../chunks/useT9n.js";
+import { c as w } from "../../chunks/dom.js";
+import { i as k } from "../../chunks/functionalities.js";
+import "../arcgis-portal-browser-filter-status/customElement.js";
+import { createStore as P } from "@arcgis/lumina/controllers/accessor";
+const B = y`:host{position:relative;display:flex;height:100%;flex-direction:column;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-color-background);--arcgis-browser-max-width: 100%;--arcgis-browser-pane-width: 18.75rem;--arcgis-browser-pane-z-index: 11}:host([height="auto"]){height:auto;min-height:100%;flex:1 1 100%}.wrapper{display:flex;height:100%;flex-direction:column;overflow:hidden}.wrapper--fixed{overflow:hidden}.wrapper--auto{flex:1 1 100%}.wrapper--full{transform:translate(0)}.panel{display:flex;height:100%;flex-direction:column;overflow:hidden}.panel--fixed{transform:translateZ(0)}.top-bar{position:sticky;top:0;right:0;left:0;z-index:20;flex-shrink:0;flex-grow:0;border-bottom:1px solid var(--calcite-color-border-3)}.scrolling{position:relative;display:flex;min-height:0px;width:100%;flex:1 1 0%;flex-direction:column}.scrolling--panel{overflow-y:scroll}@supports (scrollbar-gutter: stable){.scrolling--panel{scrollbar-gutter:stable;overflow-y:auto}}.scrolling--full{overflow:hidden}.preview-position{position:absolute;inset:0;margin-inline:auto;width:100%;max-width:var(--arcgis-browser-max-width)}.preview-position--with-top-bar{top:3rem}.preview-desktop{width:100%}.two-up{margin-left:auto;margin-right:auto;display:flex;width:100%;flex:1 1 auto;flex-direction:row;max-width:var(--arcgis-browser-max-width)}.two-up.small{margin-top:-1px}.two-up--fullscreen{height:100%;overflow:hidden}.content__start{margin-inline-end:.25rem;padding-inline:1rem}.content{position:relative;display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;overflow:hidden}.content--full{overflow-y:scroll}@supports (scrollbar-gutter: stable){.content--full{scrollbar-gutter:stable;overflow-y:auto}}.content__top{position:relative;display:flex;height:1.5rem;flex-grow:0;align-items:center;justify-content:space-between;padding-top:1.25rem;padding-bottom:.75rem;font-size:1.125rem;color:var(--calcite-color-text-1);z-index:2}.content__top__end{margin-inline-start:auto;display:grid;gap:.5rem;grid-auto-flow:column}.actions,.filter-status{flex:1 1 0%}.content__view{margin-inline-end:.25rem;min-width:0px;flex:1 1 0%;padding-inline:var(--arcgis-browser-content-padding, 1rem)}.content__view--padded-bottom{padding-bottom:1rem}.content__view--no-filters{margin-inline-start:.25rem;padding-inline-start:var(--arcgis-browser-content-padding, 1rem)}.pane{pointer-events:none;visibility:hidden;display:flex;height:100%;background-color:var(--calcite-color-background);opacity:0;transition-duration:var(--calcite-internal-animation-timing-medium);transition-property:transform,visibility,opacity;border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.pane--open{pointer-events:auto;visibility:visible;opacity:1;transform:translate(0);box-shadow:4px 0 16px #0000000f}.preview{width:0px;flex-shrink:0;flex-grow:0;position:absolute;top:0;bottom:0;inset-inline-start:0;transition-duration:var(--calcite-internal-animation-timing-medium);transition-property:width;z-index:var(--arcgis-browser-pane-z-index)}.preview--fixed{position:fixed}.preview--active{overflow:auto;width:var(--arcgis-browser-pane-width);box-shadow:#0000000f 4px 0 16px}.filter-panel,.preview-panel{position:relative;height:100%;background-color:var(--calcite-color-background)}.filter-panel__content{padding:.75rem 1rem 0}.filter-status--mobile{width:100%}.filter-status--active{display:block}.sheet{pointer-events:none;position:fixed;inset:0;z-index:110}.sheet--top-bar{top:3rem;overflow:hidden}.sheet__background{position:absolute;inset:0;opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s;background-color:#0003}.sheet__background--hidden{display:none}.sheet--active .sheet__background{opacity:1}.sheet--active{pointer-events:auto;opacity:1}.sheet__contents{position:absolute;inset:0;opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s;top:3rem;transform:translate3d(0,24px,0)}.sheet__contents--full{top:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-inline-end:auto;width:var(--arcgis-browser-pane-width);border:1px solid var(--calcite-color-border-3);border-inline-start:none;transform:translate3d(-24px,0,0)}.sheet--active .sheet__contents{opacity:1;transform:translateZ(0)}.hide{display:none}.aria-hidden{height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;position:absolute;top:0;bottom:0;width:0px;inset-inline-end:0}.content__view--flex{display:flex;flex-direction:column}.cover{display:flex;flex:1 1 0%;align-items:flex-start;justify-content:center;overflow:auto;padding-bottom:1rem;padding-top:.25rem}.no-results{height:100%;width:100%;flex:1 1 0%;text-align:center;font-size:1.125rem;color:var(--calcite-color-text-2)}::slotted([slot="no-results"]){width:100%}::slotted([slot="no-content"]){width:100%}.results-wrapper{flex:1 1 0%}.results-wrapper--spaced{padding-top:1.5rem}.loader{margin-top:min(8rem,30vh);--calcite-loader-padding: 0}.filters{box-sizing:border-box;flex-grow:0;padding-inline:1.5rem 0;width:var(--arcgis-browser-pane-width)}.filters--sticky{position:sticky;top:0;height:100%}.filters__content{overflow-y:auto;height:100%;padding-top:1.5rem;box-sizing:border-box;scrollbar-gutter:stable}.filters--empty{display:none}.filters--active{opacity:1;transform:translateZ(0)}.filters__title{margin:0 0 1rem;padding:0 0 1rem;font-size:1.125rem;font-weight:500;color:var(--calcite-color-text-1);padding-inline-start:.75rem;border-bottom:1px solid var(--calcite-color-border-3)}.range{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;color:var(--calcite-color-text-1)}.container{display:flex;height:100%;width:100%;flex-direction:column;background-color:var(--calcite-color-background)}.container__header{display:flex;flex:0 1 auto;flex-direction:row;background-color:var(--calcite-color-foreground-1);border-bottom:1px solid var(--calcite-color-border-3)}.container__header__text{margin:0;flex:1 1 0%;padding:.875rem .75rem;font-size:1rem;font-weight:500;color:var(--calcite-color-text-2)}.container__content{flex:1 1 0%;overflow:auto}.container__footer{box-sizing:border-box;width:100%;flex:0 1 auto;background-color:var(--calcite-color-foreground-1);padding:.5rem}.small .filters{padding:0}.small .filters__content{padding-left:1rem;padding-right:1rem}.small .content__view{padding-inline:.5rem;margin-inline:0}.small .content__view--panel{padding-inline:0}.small .content__start{margin-inline:0;padding-inline:.5rem}@media screen and (max-width:640px){:host{--arcgis-browser-pane-width: 100%}}.scrim__find{margin-top:3.5rem;opacity:.6;transition-property:opacity;transition-duration:.15s;--calcite-scrim-background: rgba(0, 0, 0, .6)}`;
+function C(d) {
+  const t = Math.max(d?.total ?? 0, 0), e = d?.results?.length ?? 0;
+  if (!t || !e)
+    return { start: 0, end: 0, total: t };
+  const i = Math.max(d?.start ?? 1, 1), s = Math.min(i + e - 1, t);
+  return { start: i, end: s, total: t };
+}
+const R = ["folder", "group", "contentType"], T = (d) => d.type === "item-browser", E = (d = {}) => P({
+  filters: {},
+  hiddenFilters: [],
+  ...d
+});
+function W(d, t) {
+  const e = a(() => d.preview, t);
+  return () => e.remove();
+}
+const z = 49;
+class U extends b {
+  constructor() {
+    super(...arguments), this._messages = S({ blocking: !0 }), this._previewContainer = $(), this.toggleScrim = (t) => {
+      this.scrimActive = t.detail;
+    }, this.checkFlowItem = () => {
+      this.flowItem = w(this.el, "calcite-flow-item");
+    }, this.handleResize = () => {
+      requestAnimationFrame(this.updatePreviewPosition);
+    }, this.updatePreviewPosition = () => {
+      if (this.formFactor === "small" || this.height !== "auto" || !this._previewContainer)
+        return;
+      this.checkFlowItem();
+      const t = this._previewContainer.value?.getBoundingClientRect();
+      if (!t)
+        return;
+      const { x: e, y: i, height: s, right: n, width: l } = t, m = s + i, c = window.innerWidth - document.body.offsetWidth, v = window.innerWidth < l || window.innerWidth < window.outerWidth && window.innerWidth <= l + c;
+      this.previewBoundingBox = {
+        top: Math.max(i, 0),
+        left: e,
+        right: v ? 0 : window.outerWidth - n - c,
+        bottom: m > window.innerHeight ? 0 : window.innerHeight - m
+      };
+    }, this.pageRangeText = "", this.noResults = !1, this.initialHide = !0, this.scrimActive = !1, this.panel = !1, this.preview = !1, this.loading = !1, this.hideContentTop = !1, this.alwaysShowSelection = !1, this.alwaysShowContent = !1, this.response = {
+      nextStart: -1,
+      num: 0,
+      results: [],
+      start: 1,
+      total: 0
+    }, this.store = E(), this.formFactor = "large", this.searchTerm = "", this.height = "full", this.arcgisAriaUpdate = _();
+  }
+  static {
+    this.properties = { pageRangeText: 16, noResults: 16, previewBoundingBox: 16, initialHide: 16, scrimActive: 16, flowItem: 16, panel: 5, preview: 5, loading: 5, hideContentTop: 5, hideTopBar: 5, selected: 0, alwaysShowSelection: 5, alwaysShowContent: 5, response: 0, store: 0, formFactor: 1, searchTerm: 1, height: 3, hideFilters: 5, showPreSearch: 5, rangeFormatter: 0, alwaysShowPagination: 5 };
+  }
+  static {
+    this.styles = B;
+  }
+  async scrollToTop() {
+    this.renderRoot.querySelector(".top-bar")?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("scroll", this.handleResize), window.addEventListener("resize", this.handleResize), this.el.addEventListener("arcgisItemBrowserScrimToggle", this.toggleScrim), this.checkFlowItem(), this.attachStoreWatchers();
+  }
+  willUpdate(t) {
+    t.has("store") && this.attachStoreWatchers(), t.has("response") && this.updatePage(this.response);
+  }
+  firstUpdated() {
+    requestAnimationFrame(this.updatePreviewPosition);
+  }
+  disconnectedCallback() {
+    this.removePreviewWatcher?.(), this.removeStoreWatcher?.(), window.removeEventListener("resize", this.handleResize), window.removeEventListener("scroll", this.handleResize), this.el.removeEventListener("arcgisItemBrowserScrimToggle", this.toggleScrim), super.disconnectedCallback();
+  }
+  attachStoreWatchers() {
+    if (this.removePreviewWatcher?.(), this.removeStoreWatcher?.(), !this.store)
+      return;
+    this.removePreviewWatcher = W(this.store, this.updatePreviewPosition);
+    const t = [
+      a(() => this.store.type, () => this.requestUpdate()),
+      a(() => this.store.width, () => this.requestUpdate()),
+      a(() => this.store.height, () => this.requestUpdate()),
+      a(() => this.store.filtersEmpty, () => this.requestUpdate()),
+      a(() => this.store.topbarEmpty, () => this.requestUpdate()),
+      a(() => this.store.sortEmpty, () => this.requestUpdate()),
+      a(() => this.store.filtersExpanded, () => this.requestUpdate()),
+      a(() => this.store.panel, () => this.requestUpdate()),
+      a(() => this.store.preview, () => this.requestUpdate()),
+      a(() => this.store.searchTerm, () => this.requestUpdate()),
+      a(() => this.store.hiddenFilters, () => this.requestUpdate()),
+      a(() => this.store.filters, () => this.requestUpdate()),
+      a(() => this.store.recycleBin, () => this.requestUpdate())
+    ];
+    this.removeStoreWatcher = () => {
+      t.forEach((e) => e.remove());
+    };
+  }
+  async updatePage(t) {
+    const [e, i] = await this.updatePageRange(t);
+    this.pageRangeText = e, this.arcgisAriaUpdate.emit(i), this.noResults = T(this.store) && this.store.recycleBin ? t.results.length === 0 : (t?.total ?? 0) === 0, this.initialHide = !1;
+  }
+  async updatePageRange(t) {
+    const { start: e, end: i, total: s } = C(t), n = h.formatNumber(e, { maximumFractionDigits: 0 }), l = h.formatNumber(i, { maximumFractionDigits: 0 }), c = `${h.formatNumber(s, { maximumFractionDigits: 0 })}${s >= 1e4 ? "+" : ""}`, v = h.formatNumber(t.results?.length ?? 0, { maximumFractionDigits: 0 }), g = h.formatNumber(Math.max(Math.ceil(e / Math.max(t.num || 1, 1)), 1), {
+      maximumFractionDigits: 0
+    });
+    if (this.rangeFormatter)
+      return await this.rangeFormatter({
+        start: n,
+        end: l,
+        total: c,
+        results: { items: v, page: g }
+      });
+    const u = (this._messages.range?.summary ?? "${start}-${end} of ${total}").replace("${start}", n).replace("${end}", l).replace("${total}", c), f = (this._messages.range?.announcement ?? "Showing ${start} to ${end} of ${total} results").replace("${start}", n).replace("${end}", l).replace("${total}", c);
+    return [u, f];
+  }
+  hasActiveFilter(t) {
+    return Object.values(t.filters).filter(({ id: e }) => !k(R, e)).some((e) => !!e.value || e.id === "collaborations");
+  }
+  removeFilter(t) {
+    const e = this.store.filters[t];
+    if (!e)
+      return;
+    const i = { ...e, value: void 0 };
+    "additionalParams" in e && (i.additionalParams = void 0);
+    const s = { ...this.store.filters, [t]: i };
+    this.store.filters = s;
+  }
+  clearFilters() {
+    const t = Object.entries(this.store.filters).reduce((e, [i, s]) => this.store.hiddenFilters?.includes(i) || s.id === "folder" || s.id === "group" || s.id === "contentType" ? (e[i] = s, e) : (e[i] = {
+      ...s,
+      value: void 0,
+      ..."additionalParams" in s ? { additionalParams: void 0 } : {}
+    }, e), {});
+    this.store.filters = t;
+  }
+  renderNoResults() {
+    const t = this.noResults && !this.loading && !this.showPreSearch, e = this.hasActiveFilter(this.store) || !!this.searchTerm;
+    return t ? r`<div class="cover"><div class="no-results">${e ? r`<slot name=no-results></slot>` : r`<slot name=no-content></slot>`}</div></div>` : null;
+  }
+  renderPopoverContents(t, e, i) {
+    const s = this.flowItem ? this.flowItem.offsetHeight : this.store.height, n = this.formFactor === "small" && this.hasActiveFilter(this.store) && !this.hideFilters;
+    return r`<div style=${p({
+      width: i ? "100%" : `${this.store.width || 0}px`,
+      height: i ? "100%" : `${s || 0}px`
+    })}><div class=${o({ hide: !e, "preview-panel": !0 })}><slot name=preview></slot></div><div class=${o({ hide: !t, "filter-panel": !0 })}><article class="container"><header class="container__header"><h2 class="container__header__text">${this._messages.browser?.refineContent}</h2><calcite-action .text=${this._messages.browser?.close} scale=m icon=x @click=${() => {
+      this.store.filtersExpanded = !1;
+    }}></calcite-action></header><div class="container__content"><div class="container__content__scroll"><slot name=filters-top></slot>${(this.store.panel || i) && r`<div class="filter-container__content"><slot name=sort></slot></div>` || ""}<slot name=filters></slot></div></div><div class=${o({ "filter-status--mobile": !0, container__footer: !0, hide: !n })}><arcgis-portal-browser-filter-status class="filter-status" .filters=${this.store.filters} .t9n=${this._messages.filterStatus} .hiddenFilterIds=${this.store.hiddenFilters || []} .componentWidth=${this.store.width || this.flowItem?.offsetWidth || window.innerWidth} .browserWidth=${window.innerWidth} @arcgisBrowserFilterClear=${() => this.clearFilters()} @arcgisBrowserFilterRemove=${(l) => this.removeFilter(l.detail)}></arcgis-portal-browser-filter-status></div></article></div></div>`;
+  }
+  renderFlow() {
+    const t = !!this.store.panel, e = !!this.store.filtersExpanded && (!this.store.filtersEmpty || !this.store.sortEmpty && t), i = !!this.store.preview, s = !this.store.panel && document.documentElement.clientWidth > (this.store.width || 0);
+    return r`<div class=${o({ panel: !0, "panel--fixed": s })}>${!this.hideTopBar && r`<div class=${o({ "top-bar": !0, "top-bar--small": this.formFactor === "small" })}><slot name=top-bar></slot></div>` || ""}<div class="scrolling scrolling--panel"><div class=${o({ "two-up": !0, [this.formFactor]: !0 })}><div class="content"><div><slot name=primary-filter></slot></div><div class="content__start"><slot name=content-start></slot></div>${this.loading && !this.alwaysShowContent && r`<div class="content__view content__view--flex"><div class="cover"><calcite-loader class="loader" label></calcite-loader></div></div>` || ""}${this.noResults && !this.loading && r`<div class="content__view content__view--flex"><div class="cover">${this.renderNoResults()}</div></div>` || ""}<div class=${o({
+      hide: this.loading || this.noResults,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      content__view: !0,
+      "content__view--panel": !!this.store.panel,
+      "content__view--flex": !this.loading && !this.noResults
+    })}>${!this.store.panel && !this.hideContentTop && r`<div class="content__top"><span class=${o({ selection: !0, hide: !this.alwaysShowSelection })}><slot name=selection></slot></span>${!this.loading && r`<span class="range">${this.pageRangeText}</span>` || ""}<span class="actions"><slot name=actions></slot></span><div class="content__top__end"><slot name=view></slot>${!t && r`<slot name=sort></slot>` || ""}</div></div>` || ""}<div class="flow-content"><slot name=content></slot></div><slot name=pagination></slot><slot name=content-end></slot></div></div></div><slot name=scroll-end></slot></div>${!this.store.panel || window.innerWidth < (this.store.width || 0) * 2 ? r`<div class=${o({
+      sheet: !0,
+      "sheet--active": e || i,
+      "sheet--top-bar": s
+    })}><div class=${o({ sheet__background: !0, "sheet__background--hidden": s })}></div><div class=${o({ sheet__contents: !0, "sheet__contents--full": s })}>${this.renderPopoverContents(e, i, !0)}</div></div>` : r`<calcite-popover overlay-positioning=fixed .open=${i || e} label=filters .referenceElement=${this.flowItem || this.el} offset-skidding=0 offset-distance=0 trigger-disabled pointer-disabled .placement=${this.store.panel ? "trailing" : "auto"} @calcitePopoverOpen=${(n) => {
+      (!this.store.panel || window.innerWidth < (this.store.width || 0) * 2) && (n.currentTarget.style.transform = "none");
+    }} .focusTrapOptions=${{
+      setReturnFocus: (n) => {
+        if (!(n instanceof HTMLElement))
+          return n;
+        const l = w(n, "arcgis-portal-item-card, arcgis-portal-group-card");
+        return l?.restoreFocus ? (l.restoreFocus(), !1) : n;
+      }
+    }}>${this.renderPopoverContents(e, i)}</calcite-popover>`}</div>`;
+  }
+  render() {
+    const t = this.height === "auto", e = this.height === "full", i = `${(this.store.height || window.innerHeight) - z}px`, s = t ? {} : { maxHeight: i };
+    return this.formFactor === "small" ? this.renderFlow() : r`<div class=${o({
+      wrapper: !0,
+      "wrapper--fixed": !!this.store.filtersExpanded,
+      "wrapper--auto": t,
+      "wrapper--full": e
+    })}>${!this.hideTopBar && r`<div class="top-bar"><slot name=top-bar></slot></div>` || ""}<slot name=top-bar-end></slot><div class=${o({ "preview-position": !0, "preview-position--with-top-bar": !this.store.topbarEmpty })} ${F(this._previewContainer)}><div class=${o({ preview: !0, "preview--active": !!this.store.preview, "preview--fixed": t })} style=${p(t && this.previewBoundingBox ? {
+      top: `${this.previewBoundingBox.top || 0}px`,
+      ...document.dir === "rtl" ? { right: `${this.previewBoundingBox.right || 0}px` } : { left: `${this.previewBoundingBox.left || 0}px` },
+      bottom: `${this.previewBoundingBox.bottom || 0}px`
+    } : {})}><div class=${o({ pane: !0, "pane--open": !!this.store.preview })}><div class="preview-desktop"><slot name=preview></slot></div></div></div></div><div class=${o({ scrolling: !0, "scrolling--full": !t || this.panel })}>${this.scrimActive && r`<calcite-scrim class="scrim__find"></calcite-scrim>` || ""}<div class=${o({ "two-up": !0, "two-up--fullscreen": e, [this.formFactor]: !0 })}><div class=${o({
+      filters: !0,
+      "filters--sticky": !t,
+      "filters--empty": this.store.filtersEmpty && !this.store.preview,
+      "filters--active": !!this.store.filtersExpanded
+    })} style=${p(e ? {} : s)}><div class="filters__content" style=${p(e ? {} : s)}><slot name=filters></slot></div></div><div class=${o({ content: !0, "content--full": e })}><div class="content__start"><slot name=content-start></slot></div><div class=${o({
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      content__view: !0,
+      "content__view--no-filters": this.store.filtersEmpty && !this.store.preview,
+      "content__view--flex": !0
+    })}>${!this.hideContentTop && r`<div class="content__top">${this.showPreSearch ? null : r`<div class="content__top__summary"><span class=${o({ selection: !0, hide: !this.alwaysShowSelection })}><slot name=selection></slot></span>${!this.loading && r`<span class="range">${this.pageRangeText}<slot name=range-end></slot></span>` || ""}</div>`}<span class="actions"><slot name=actions></slot></span><div class="content__top__end"><slot name=view></slot><slot name=sort></slot></div></div>` || ""}${this.loading && (!this.alwaysShowContent || this.initialHide) && r`<div class="cover"><calcite-loader class="loader" .label=${this._messages.browser?.loading ?? ""}></calcite-loader></div>` || ""}${this.renderNoResults()}${!this.loading && this.showPreSearch && r`<div class="cover"><div class="no-results"><slot name=pre-search></slot></div></div>` || ""}<div class=${o({
+      hide: !!this.showPreSearch || this.loading && !this.alwaysShowContent || !this.loading && this.noResults || this.initialHide,
+      "results-wrapper--spaced": this.hideContentTop,
+      "results-wrapper": !0
+    })}><slot name=content></slot></div><div class=${o({ hide: this.loading || this.noResults && !this.alwaysShowPagination })}><slot name=pagination></slot><slot name=content-end></slot></div></div></div></div><slot name=scroll-end></slot></div></div>`;
+  }
+}
+x("arcgis-portal-browser", U);
+export {
+  U as ArcgisPortalBrowser
+};

package/dist/components/arcgis-portal-browser/index.d.ts

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

package/dist/components/arcgis-portal-browser/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-action";
+import "../arcgis-portal-browser-filter-status/index.js";
+import "@esri/calcite-components/components/calcite-loader";
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-scrim";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-browser/utils/store.d.ts

@@ -0,0 +1,29 @@
+import type Accessor from "@arcgis/core/core/Accessor.js";
+
+export type PortalBrowserFilterDetail = {
+  id: string;
+  label: string;
+  value: unknown;
+  additionalParams?: unknown;
+};
+
+export type PortalBrowserStore = ReturnType<typeof createPortalBrowserStore>;
+
+/** @param initialState */
+export function createPortalBrowserStore(initialState?: Partial<PortalBrowserState>): Accessor & PortalBrowserState;
+
+export interface PortalBrowserState {
+  type?: "group-browser" | "item-browser" | "member-browser";
+  width?: number;
+  height?: number;
+  filtersEmpty?: boolean;
+  topbarEmpty?: boolean;
+  sortEmpty?: boolean;
+  filtersExpanded?: boolean;
+  panel?: boolean;
+  preview?: string;
+  searchTerm?: string;
+  hiddenFilters?: string[];
+  filters: Record<string, PortalBrowserFilterDetail>;
+  recycleBin?: boolean;
+}

package/dist/components/arcgis-portal-browser/utils/types.d.ts

@@ -0,0 +1,12 @@
+/** @param input */
+export type RangeFormatter = (input: RangeFormatInput) => Promise<[string, string]>;
+
+export interface RangeFormatInput {
+  start: string;
+  end: string;
+  total: string;
+  results: {
+      items: string;
+      page: string;
+  };
+}

package/dist/components/arcgis-portal-browser-filter-status/customElement.d.ts

@@ -0,0 +1,25 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { PortalBrowserFilterDetail } from "../arcgis-portal-browser/utils/store.js";
+
+export abstract class ArcgisPortalBrowserFilterStatus extends LitElement {
+  /** Pass the width of the browser from state */
+  accessor browserWidth: number | undefined;
+  /** Pass the width of the component container */
+  accessor componentWidth: number | undefined;
+  accessor filters: Record<string, PortalBrowserFilterDetail>;
+  accessor hiddenFilterIds: string[];
+  accessor t9n: FilterStatusT9n;
+  readonly arcgisBrowserFilterClear: import("@arcgis/lumina").TargetedEvent<this, null>;
+  readonly arcgisBrowserFilterRemove: import("@arcgis/lumina").TargetedEvent<this, string>;
+  readonly "@eventTypes": {
+    arcgisBrowserFilterClear: ArcgisPortalBrowserFilterStatus["arcgisBrowserFilterClear"]["detail"];
+    arcgisBrowserFilterRemove: ArcgisPortalBrowserFilterStatus["arcgisBrowserFilterRemove"]["detail"];
+  };
+}
+
+export type FilterStatusT9n = {
+  filters: string;
+  additional: string;
+  clearAllFilters: string;
+};

package/dist/components/arcgis-portal-browser-filter-status/customElement.js

@@ -0,0 +1,55 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as h } from "../../chunks/runtime.js";
+import { keyed as u } from "lit/directives/keyed.js";
+import { LitElement as p, createEvent as c } from "@arcgis/lumina";
+import { css as m, html as s } from "lit";
+import { b } from "../../chunks/ui.js";
+import { g as f } from "../../chunks/dom.js";
+const w = m`:host{display:flex;align-items:center}.status-list{display:flex;align-items:center;max-width:100%}.status-chip{max-width:100%;--calcite-color-foreground-2: var(--calcite-color-foreground-1)}.chip-group{max-width:100%;min-width:0}.status-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-content{max-width:28rem;padding:.75rem}.clear-button{margin-inline-start:.25rem}`;
+class B extends p {
+  constructor() {
+    super(...arguments), this.inBounds = [], this.outOfBounds = [], this.filters = {}, this.hiddenFilterIds = [], this.arcgisBrowserFilterClear = c(), this.arcgisBrowserFilterRemove = c();
+  }
+  static {
+    this.properties = { inBounds: 16, outOfBounds: 16, filters: 0, hiddenFilterIds: 0, t9n: 0, componentWidth: 9, browserWidth: 9 };
+  }
+  static {
+    this.styles = w;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.processValidFilters();
+  }
+  willUpdate(t) {
+    (t.has("filters") || t.has("hiddenFilterIds") || t.has("componentWidth") || t.has("browserWidth")) && this.processValidFilters();
+  }
+  isFilterValid(t) {
+    return this.hiddenFilterIds.includes(t.id) ? !1 : t.id === "collaborations" && "additionalParams" in t ? !!(t.additionalParams && t.label) : !!(t.value && t.label);
+  }
+  processValidFilters() {
+    const t = Object.values(this.filters).filter(this.isFilterValid.bind(this)), i = this.componentWidth ?? 0;
+    if ((this.browserWidth ?? window.innerWidth) < b.sm) {
+      this.inBounds = t, this.outOfBounds = [];
+      return;
+    }
+    const d = Math.max(i - 460, 0);
+    let r = 0;
+    const a = [], l = [];
+    t.forEach((o) => {
+      const n = f({ text: o.label ?? "" });
+      !i || r + n <= d ? (a.push(o), r += n) : l.push(o);
+    }), this.inBounds = a, this.outOfBounds = l;
+  }
+  renderChip(t) {
+    return u(t.id, s`<calcite-chip class="status-chip" scale=s .label=${t.label} .value=${t.id} closable appearance=outline @calciteChipClose=${() => {
+      this.arcgisBrowserFilterRemove.emit(t.id);
+    }}><span class="status-chip__label">${t.label}</span></calcite-chip>`);
+  }
+  render() {
+    const t = this.outOfBounds.length > 0, i = this.inBounds.length + this.outOfBounds.length;
+    return i ? s`<div class="status-list"><calcite-chip-group class="chip-group" .label=${this.t9n.filters} scale=s>${this.inBounds.map((e) => this.renderChip(e))}${t && s`<calcite-button id=popover-button round kind=neutral appearance=outline scale=s>+ ${this.outOfBounds.length}</calcite-button>` || ""}</calcite-chip-group>${t && s`<calcite-popover .label=${this.t9n.additional} reference-element=popover-button placement=bottom-end><div class="popover-content"><calcite-chip-group .label=${this.t9n.additional} scale=s>${this.outOfBounds.map((e) => this.renderChip(e))}</calcite-chip-group></div></calcite-popover>` || ""}${i > 1 && s`<calcite-button class="clear-button" scale=s appearance=transparent kind=brand @click=${() => this.arcgisBrowserFilterClear.emit(null)}>${this.t9n.clearAllFilters}</calcite-button>` || ""}</div>` : null;
+  }
+}
+h("arcgis-portal-browser-filter-status", B);
+export {
+  B as ArcgisPortalBrowserFilterStatus
+};

package/dist/components/arcgis-portal-browser-filter-status/index.d.ts

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

package/dist/components/arcgis-portal-browser-filter-status/index.js

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-chip-group";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-popover";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-group-card/customElement.js

@@ -4,13 +4,9 @@ import { css as y, html as r } from "lit";
 import { LitElement as C, createEvent as w, safeClassMap as g, nothing as l } from "@arcgis/lumina";
 import { createRef as F, ref as $ } from "lit/directives/ref.js";
 import { u as z } from "../../chunks/useT9n.js";
+import { b as o } from "../../chunks/ui.js";
 import { a as E } from "../../chunks/functionalities.js";
-const o = {
-  md: 840,
-  sm: 580,
-  xs: 480,
-  xxs: 360
-}, B = y`:host{display:block;min-width:0}.group-card{position:relative;display:flex;height:100%;flex-direction:column;color:var(--calcite-color-text-1);opacity:0;box-shadow:none;transition-duration:.15s;outline-color:transparent;background-color:var(--calcite-color-foreground-1);transition-property:background-color,outline,outline-offset,opacity;border:1px solid var(--calcite-color-border-3);&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:-2px}}.group-card--loaded{opacity:1}.group-card--selected{border-color:var(--calcite-color-brand)}.group-card--hoverable{cursor:pointer}.group-card--disabled{opacity:.5}.group-card__top{padding:1rem}.group-card__upper{flex:1 1 0%;background-color:var(--calcite-color-foreground-1);transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s}.group-card__upper:hover{background-color:var(--calcite-color-background)}.group-card__upper--compact{display:flex;align-items:center;padding:.5rem .75rem}.group-card__upper--link{color:var(--calcite-color-text-1);text-decoration-line:none;outline-color:transparent;&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:2px}}.group-card__title__span{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s;background-image:linear-gradient(transparent,transparent);background-position-x:0%,100%;background-position-y:min(1.25em,100%);background-repeat:no-repeat,no-repeat;background-size:100% 1px,100% 1px}.group-card--previewed .group-card__title__span{background-image:linear-gradient(var(--calcite-color-text-3),var(--calcite-color-text-3))}.group-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}.group-card__details{display:flex;flex-direction:row;flex-wrap:wrap}.group-card__details--stacked{flex-direction:column}.group-card__detail{font-size:.875rem;color:var(--calcite-color-text-2)}.group-card__detail__icon{margin-inline-end:.5rem}.group-card__footer{margin-top:auto;display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:.5rem 1rem;border-top:1px solid var(--calcite-color-border-3)}.group-card__footer__start{display:flex;min-width:0;flex:1 1 0%;flex-direction:row;align-items:center;overflow:hidden;margin-inline-end:.75rem}.group-card__profile-wrap{max-width:100%;padding:.25rem}.group-card__divider{display:flex;align-items:center;flex:0 0 auto}.group-card__divider:not([empty]):before{content:"";height:1.25rem;width:1px;background-color:var(--calcite-color-border-1);margin-inline:.75rem}.group-card__details--stacked .group-card__divider:before{display:none}.group-card__divider:first-child:before{display:none}.group-card-flex{display:flex}.group-card-flex-1{min-width:0;flex:1 1 0%}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.group-card__input{margin-inline-end:1rem;margin-top:.125rem}.group-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:1rem;font-weight:500;line-height:1.375}.group-card__title--compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-end:1rem}.group-card__summary{margin:.25rem 0;flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-size:.875rem;line-height:1.25}.group-card__thumbnail{margin-inline-end:1rem}.group-card__thumbnail--compact{width:2.75rem;height:2.75rem}.group-card__badges{margin-top:.25rem}.group-card__owner{min-width:0}.group-card--xs,.group-card--xxs{.group-card__top{padding:.75rem}.group-card__title--padded{margin-bottom:.25rem}.group-card__footer{padding:.25rem .75rem}.group-card__detail{margin:.25rem 0;font-size:.75rem;line-height:1.35}.group-card__title{font-size:.875rem}}.group-card--xxs{.group-card__thumbnail{padding-inline-start:.75rem;width:4.25rem}}.group-card--xs{.group-card__thumbnail{padding-inline-start:.5rem;width:5rem}}`;
+const B = y`:host{display:block;min-width:0}.group-card{position:relative;display:flex;height:100%;flex-direction:column;color:var(--calcite-color-text-1);opacity:0;box-shadow:none;transition-duration:.15s;outline-color:transparent;background-color:var(--calcite-color-foreground-1);transition-property:background-color,outline,outline-offset,opacity;border:1px solid var(--calcite-color-border-3);&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:-2px}}.group-card--loaded{opacity:1}.group-card--selected{border-color:var(--calcite-color-brand)}.group-card--hoverable{cursor:pointer}.group-card--disabled{opacity:.5}.group-card__top{padding:1rem}.group-card__upper{flex:1 1 0%;background-color:var(--calcite-color-foreground-1);transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s}.group-card__upper:hover{background-color:var(--calcite-color-background)}.group-card__upper--compact{display:flex;align-items:center;padding:.5rem .75rem}.group-card__upper--link{color:var(--calcite-color-text-1);text-decoration-line:none;outline-color:transparent;&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:2px}}.group-card__title__span{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s;background-image:linear-gradient(transparent,transparent);background-position-x:0%,100%;background-position-y:min(1.25em,100%);background-repeat:no-repeat,no-repeat;background-size:100% 1px,100% 1px}.group-card--previewed .group-card__title__span{background-image:linear-gradient(var(--calcite-color-text-3),var(--calcite-color-text-3))}.group-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}.group-card__details{display:flex;flex-direction:row;flex-wrap:wrap}.group-card__details--stacked{flex-direction:column}.group-card__detail{font-size:.875rem;color:var(--calcite-color-text-2)}.group-card__detail__icon{margin-inline-end:.5rem}.group-card__footer{margin-top:auto;display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:.5rem 1rem;border-top:1px solid var(--calcite-color-border-3)}.group-card__footer__start{display:flex;min-width:0;flex:1 1 0%;flex-direction:row;align-items:center;overflow:hidden;margin-inline-end:.75rem}.group-card__profile-wrap{max-width:100%;padding:.25rem}.group-card__divider{display:flex;align-items:center;flex:0 0 auto}.group-card__divider:not([empty]):before{content:"";height:1.25rem;width:1px;background-color:var(--calcite-color-border-1);margin-inline:.75rem}.group-card__details--stacked .group-card__divider:before{display:none}.group-card__divider:first-child:before{display:none}.group-card-flex{display:flex}.group-card-flex-1{min-width:0;flex:1 1 0%}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.group-card__input{margin-inline-end:1rem;margin-top:.125rem}.group-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:1rem;font-weight:500;line-height:1.375}.group-card__title--compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-end:1rem}.group-card__summary{margin:.25rem 0;flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-size:.875rem;line-height:1.25}.group-card__thumbnail{margin-inline-end:1rem}.group-card__thumbnail--compact{width:2.75rem;height:2.75rem}.group-card__badges{margin-top:.25rem}.group-card__owner{min-width:0}.group-card--xs,.group-card--xxs{.group-card__top{padding:.75rem}.group-card__title--padded{margin-bottom:.25rem}.group-card__footer{padding:.25rem .75rem}.group-card__detail{margin:.25rem 0;font-size:.75rem;line-height:1.35}.group-card__title{font-size:.875rem}}.group-card--xxs{.group-card__thumbnail{padding-inline-start:.75rem;width:4.25rem}}.group-card--xs{.group-card__thumbnail{padding-inline-start:.5rem;width:5rem}}`;
 class D extends C {
   constructor() {
     super(...arguments), this.messages = z({ blocking: !0 }), this.sectionEl = F(), this.resizeObserver = null, this.handleCardClick = (e) => {