@arcgis/portal-components 5.2.0-next.12 → 5.2.0-next.121

package/dist/chunks/portal-browser.js

@@ -0,0 +1,220 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as F } from "./runtime.js";
+import { watch as l } from "@arcgis/core/core/reactiveUtils.js";
+import * as p from "@arcgis/core/intl.js";
+import { substitute as g } from "@arcgis/core/intl.js";
+import { LitElement as S, createEvent as m, safeClassMap as s, safeStyleMap as w } from "@arcgis/lumina";
+import { css as B, html as o } from "lit";
+import { createRef as P, ref as k } from "lit/directives/ref.js";
+import { u as R } from "./useT9n.js";
+import { c as u } from "./dom.js";
+import { i as C } from "./functionalities.js";
+import "../components/arcgis-portal-browser-filter-status/customElement.js";
+import { c as E, o as T, a as W, i as z } from "./store.js";
+const I = B`: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;container-type:inline-size;container-name:portal-browser}: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}.popover-contents{width:var(--arcgis-browser-popover-width);height:var(--arcgis-browser-popover-height)}.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:0;width:100%;border:1px solid var(--calcite-color-border-3);border-inline-start:1px solid var(--calcite-color-border-3);transform:translate3d(0,24px,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:.875rem;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}@container portal-browser (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 f(c) {
+  return {
+    ...c,
+    value: void 0,
+    ..."additionalParams" in c ? { additionalParams: void 0 } : {}
+  };
+}
+function U(c, t = {}) {
+  const { hiddenFilterIds: e, preservedFilterIds: i } = t, n = /* @__PURE__ */ new Set([...e || [], ...i || []]);
+  return Object.entries(c).reduce(
+    (r, [a, d]) => n.has(a) ? (r[a] = d, r) : (r[a] = f(d), r),
+    {}
+  );
+}
+function q(c) {
+  const t = Math.max(c?.total ?? 0, 0), e = c?.results?.length ?? 0;
+  if (!t || !e)
+    return { start: 0, end: 0, total: t };
+  const i = Math.max(c?.start ?? 1, 1), n = Math.min(i + e - 1, t);
+  return { start: i, end: n, total: t };
+}
+const A = 49;
+class H extends S {
+  constructor() {
+    super(...arguments), this._messages = R({ blocking: !0 }), this._previewContainer = P(), this.toggleScrim = (t) => {
+      this.scrimActive = t.detail;
+    }, this.checkFlowItem = () => {
+      this.flowItem = u(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: n, right: r, width: a } = t, d = n + i, h = window.innerWidth - document.body.offsetWidth, v = window.innerWidth < a || window.innerWidth < window.outerWidth && window.innerWidth <= a + h;
+      this.previewBoundingBox = {
+        top: Math.max(i, 0),
+        left: e,
+        right: v ? 0 : window.outerWidth - r - h,
+        bottom: d > window.innerHeight ? 0 : window.innerHeight - d
+      };
+    }, 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 = m(), this.arcgisBrowserFilterClear = m(), this.arcgisBrowserFilterRemove = m(), this.ariaUpdate = m();
+  }
+  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 = I;
+  }
+  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 = T(this.store, this.updatePreviewPosition);
+    const t = [
+      l(() => this.store.type, () => this.requestUpdate()),
+      l(() => this.store.width, () => this.requestUpdate()),
+      l(() => this.store.height, () => this.requestUpdate()),
+      l(() => this.store.filtersEmpty, () => this.requestUpdate()),
+      l(() => this.store.topbarEmpty, () => this.requestUpdate()),
+      l(() => this.store.sortEmpty, () => this.requestUpdate()),
+      l(() => this.store.filtersExpanded, () => this.requestUpdate()),
+      l(() => this.store.panel, () => this.requestUpdate()),
+      l(() => this.store.preview, () => this.requestUpdate()),
+      l(() => this.store.searchTerm, () => this.requestUpdate()),
+      l(() => this.store.hiddenFilters, () => this.requestUpdate()),
+      l(() => this.store.filters, () => this.requestUpdate()),
+      l(() => 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.el.dispatchEvent(new CustomEvent("ariaUpdate", { detail: i })), this.noResults = W(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: n } = q(t), r = p.formatNumber(e, { maximumFractionDigits: 0 }), a = p.formatNumber(i, { maximumFractionDigits: 0 }), h = `${p.formatNumber(n, { maximumFractionDigits: 0 })}${n >= 1e4 ? "+" : ""}`, v = p.formatNumber(t.results?.length ?? 0, { maximumFractionDigits: 0 }), x = p.formatNumber(Math.max(Math.ceil(e / Math.max(t.num || 1, 1)), 1), {
+      maximumFractionDigits: 0
+    });
+    if (this.rangeFormatter)
+      return await this.rangeFormatter({
+        start: r,
+        end: a,
+        total: h,
+        results: { items: v, page: x }
+      });
+    const b = this._messages.browser.pageRange, _ = this._messages.browser.pageRangeAria, y = g(b, {
+      start: r,
+      end: a,
+      total: h
+    }), $ = g(_, {
+      start: r,
+      end: a,
+      total: h
+    });
+    return [y, $];
+  }
+  hasActiveFilter(t) {
+    return Object.values(t.filters).filter(({ id: e }) => !C(z, e)).some((e) => !!e.value || e.id === "collaborations");
+  }
+  removeFilter(t) {
+    const e = this.store.filters[t];
+    if (!e)
+      return;
+    const i = f(e), n = { ...this.store.filters, [t]: i };
+    this.store.filters = n, this.arcgisBrowserFilterRemove.emit(t);
+  }
+  clearFilters() {
+    const t = U(this.store.filters, {
+      hiddenFilterIds: this.store.hiddenFilters,
+      preservedFilterIds: ["folder", "group", "contentType"]
+    });
+    this.store.filters = t, this.arcgisBrowserFilterClear.emit(null);
+  }
+  renderNoResults() {
+    const t = this.noResults && !this.loading && !this.showPreSearch, e = this.hasActiveFilter(this.store) || !!this.searchTerm;
+    return t ? o`<div class="cover"><div class="no-results">${e ? o`<slot name=no-results></slot>` : o`<slot name=no-content></slot>`}</div></div>` : null;
+  }
+  renderPopoverContents(t, e, i) {
+    const n = this.flowItem ? this.flowItem.offsetHeight : this.store.height, r = this.formFactor === "small" && this.hasActiveFilter(this.store) && !this.hideFilters;
+    return this.el.style.setProperty("--arcgis-browser-popover-width", i ? "100%" : `${this.store.width || 0}px`), this.el.style.setProperty("--arcgis-browser-popover-height", i ? "100%" : `${n || 0}px`), o`<div class="popover-contents"><div class=${s({ hide: !e, "preview-panel": !0 })}><slot name=preview></slot></div><div class=${s({ 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) && o`<div class="filter-container__content"><slot name=sort></slot></div>` || ""}<slot name=filters></slot></div></div><div class=${s({ "filter-status--mobile": !0, container__footer: !0, hide: !r })}><arcgis-portal-browser-filter-status class="filter-status" .filters=${this.store.filters} .hiddenFilterIds=${this.store.hiddenFilters || []} .componentWidth=${this.store.width || this.flowItem?.offsetWidth || window.innerWidth} .browserWidth=${window.innerWidth} @arcgisBrowserFilterClear=${() => this.clearFilters()} @arcgisBrowserFilterRemove=${(a) => this.removeFilter(a.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, n = !this.store.panel && document.documentElement.clientWidth > (this.store.width || 0);
+    return o`<div class=${s({ panel: !0, "panel--fixed": n })}>${!this.hideTopBar && o`<div class=${s({ "top-bar": !0, "top-bar--small": this.formFactor === "small" })}><slot name=top-bar></slot></div>` || ""}<div class="scrolling scrolling--panel"><div class=${s({ "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 && o`<div class="content__view content__view--flex"><div class="cover"><calcite-loader class="loader" label></calcite-loader></div></div>` || ""}${this.noResults && !this.loading && o`<div class="content__view content__view--flex"><div class="cover">${this.renderNoResults()}</div></div>` || ""}<div class=${s({
+      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 && o`<div class="content__top"><span class=${s({ selection: !0, hide: !this.alwaysShowSelection })}><slot name=selection></slot></span>${!this.loading && o`<span class="range">${this.pageRangeText}</span>` || ""}<span class="actions"><slot name=actions></slot></span><div class="content__top__end"><slot name=view></slot>${!t && o`<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 ? o`<div class=${s({
+      sheet: !0,
+      "sheet--active": e || i,
+      "sheet--top-bar": n
+    })}><div class=${s({ sheet__background: !0, "sheet__background--hidden": n })}></div><div class=${s({ sheet__contents: !0, "sheet__contents--full": n })}>${this.renderPopoverContents(e, i, !0)}</div></div>` : o`<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=${(r) => {
+      (!this.store.panel || window.innerWidth < (this.store.width || 0) * 2) && (r.currentTarget.style.transform = "none");
+    }} .focusTrapOptions=${{
+      setReturnFocus: (r) => {
+        if (!(r instanceof HTMLElement))
+          return r;
+        const a = u(r, "arcgis-portal-item-card, arcgis-portal-group-card");
+        return a?.restoreFocus ? (a.restoreFocus(), !1) : r;
+      }
+    }}>${this.renderPopoverContents(e, i)}</calcite-popover>`}</div>`;
+  }
+  render() {
+    const t = this.height === "auto", e = this.height === "full", i = !!this.store.preview, n = `${(this.store.height || window.innerHeight) - A}px`, r = t ? {} : { maxHeight: n };
+    return this.formFactor === "small" ? this.renderFlow() : o`<div class=${s({
+      wrapper: !0,
+      "wrapper--fixed": !!this.store.filtersExpanded,
+      "wrapper--auto": t,
+      "wrapper--full": e
+    })}>${!this.hideTopBar && o`<div class="top-bar"><slot name=top-bar></slot></div>` || ""}<slot name=top-bar-end></slot><div class=${s({ "preview-position": !0, "preview-position--with-top-bar": !this.store.topbarEmpty })} ${k(this._previewContainer)}><div class=${s({ preview: !0, "preview--active": i, "preview--fixed": t })} style=${w(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=${s({ pane: !0, "pane--open": i })}><div class="preview-desktop"><slot name=preview></slot></div></div></div></div><div class=${s({ scrolling: !0, "scrolling--full": !t || this.panel })}>${this.scrimActive && o`<calcite-scrim class="scrim__find"></calcite-scrim>` || ""}<div class=${s({ "two-up": !0, "two-up--fullscreen": e, [this.formFactor]: !0 })}><div class=${s({
+      filters: !0,
+      "filters--sticky": !t,
+      "filters--empty": this.store.filtersEmpty && !this.store.preview,
+      "filters--active": !!this.store.filtersExpanded
+    })} style=${w(e ? {} : r)}><div class="filters__content" style=${w(e ? {} : r)}><slot name=filters></slot></div></div><div class=${s({ content: !0, "content--full": e })}><div class="content__start"><slot name=content-start></slot></div><div class=${s({
+      // 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 && o`<div class="content__top">${this.showPreSearch ? null : o`<div class="content__top__summary"><span class=${s({ selection: !0, hide: !this.alwaysShowSelection })}><slot name=selection></slot></span>${!this.loading && o`<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) && o`<div class="cover"><calcite-loader class="loader" .label=${this._messages.browser?.loading ?? ""}></calcite-loader></div>` || ""}${this.renderNoResults()}${!this.loading && this.showPreSearch && o`<div class="cover"><div class="no-results"><slot name=pre-search></slot></div></div>` || ""}<div class=${s({
+      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=${s({ 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>`;
+  }
+}
+F("arcgis-portal-browser", H);
+export {
+  H as A,
+  U as a,
+  f as c
+};

package/dist/chunks/portal-item-badge.js

@@ -0,0 +1,352 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as v } from "./runtime.js";
+import { LitElement as R, nothing as D, safeClassMap as B } from "@arcgis/lumina";
+import { css as C, html as g } from "lit";
+import { u as M } from "./useT9n.js";
+import { substitute as h } from "@arcgis/core/intl.js";
+import { f as W } from "./user.js";
+import { a as x, b as u, i as $, c as E, d as f, g as b, e as K, f as L, h as O } from "./items.js";
+import { i as _ } from "./users.js";
+import { g as U } from "./user2.js";
+import { f as H } from "./verified.js";
+import { a as w, i as m } from "./info.js";
+const q = C`.badge{--calcite-color-foreground-2: var(--arcgis-item-badge-info-background, #dfeffa);--calcite-color-text-1: var(--arcgis-item-badge-info-foreground, #00619b);--arcgis-item-badge-color: var(--arcgis-item-badge-info-foreground, #00619b);--calcite-chip-background-color: var(--arcgis-item-badge-info-background, #dfeffa);border:0}.badge--colored{--calcite-chip-icon-color: var(--calcite-color-brand)}.authoritative{--calcite-color-foreground-2: var(--arcgis-item-badge-success-background, #e4f0e4);--calcite-color-text-1: var(--arcgis-item-badge-success-foreground, #1a6324);--arcgis-item-badge-color: var(--arcgis-item-badge-success-foreground, #1a6324);--calcite-chip-background-color: var(--arcgis-item-badge-success-background, #e4f0e4)}.deprecated{--calcite-color-foreground-2: var(--arcgis-item-badge-danger-background, #fadfdc);--calcite-color-text-1: var(--arcgis-item-badge-danger-foreground, #a82b1e);--arcgis-item-badge-color: var(--arcgis-item-badge-danger-foreground, #a82b1e);--calcite-chip-background-color: var(--arcgis-item-badge-danger-background, #fadfdc)}.beta{border:0}.narrow{box-sizing:border-box;width:2rem;--calcite-chip-spacing-unit-l: 0}.narrow--s{width:1.5rem}.narrow--l{width:2.75rem}.tooltip-title{font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-1);margin:0 0 .25rem;padding:0}.tooltip-text{font-size:var(--calcite-font-size--2);color:var(--calcite-color-text-1);margin:0;padding:0}:host-context(.calcite-mode-dark) .badge{--calcite-color-foreground-2: var(--arcgis-item-badge-info-background, #214155);--calcite-color-text-1: var(--arcgis-item-badge-info-foreground, #9fd4f3);--arcgis-item-badge-color: var(--arcgis-item-badge-info-foreground, #9fd4f3);--calcite-chip-background-color: var(--arcgis-item-badge-info-background, #214155)}:host-context(.calcite-mode-dark) .authoritative{--calcite-color-foreground-2: var(--arcgis-item-badge-success-background, #2b472a);--calcite-color-text-1: var(--arcgis-item-badge-success-foreground, #a2e4ab);--arcgis-item-badge-color: var(--arcgis-item-badge-success-foreground, #a2e4ab);--calcite-chip-background-color: var(--arcgis-item-badge-success-background, #2b472a)}:host-context(.calcite-mode-dark) .deprecated{--calcite-color-foreground-2: var(--arcgis-item-badge-danger-background, #5e241e);--calcite-color-text-1: var(--arcgis-item-badge-danger-foreground, #ffaaa1);--arcgis-item-badge-color: var(--arcgis-item-badge-danger-foreground, #ffaaa1);--calcite-chip-background-color: var(--arcgis-item-badge-danger-background, #5e241e)}`, G = [
+  "Operations Dashboard Add In",
+  "Operations Dashboard Extension",
+  "Operation View",
+  "CityEngine Web Scene",
+  "Big Data File Share",
+  "Globe Document",
+  "Map Document",
+  "Published Map",
+  "Scene Document",
+  "Map Template",
+  "Mobile Basemap Package",
+  "Desktop Add In"
+], N = [
+  "Cascade",
+  "MapTour",
+  "MapJournal",
+  "MapSeries",
+  "Shortlist",
+  "StoryMapCrowdsource",
+  "StorytellingSwipe"
+], z = {
+  "Geoprocessing Package": ".gpk",
+  Layer: ".lyr",
+  "Layer Package": ".lpk",
+  "Map Package": ".mpk",
+  "Scene Package": ".spk"
+}, k = "", F = "template_name";
+function J(e) {
+  const t = decodeURIComponent(e.url || b(e).url || "");
+  return N.find((i) => t.includes(`/apps/${i}/index.html`));
+}
+function V(e) {
+  return O(e);
+}
+function j(e) {
+  return E(e);
+}
+function Q(e) {
+  return $(e);
+}
+function T(e) {
+  return e.type === "Web Mapping Application" && d(e, ["Web AppBuilder", "AppBuilder Extension"]);
+}
+function y(e, t) {
+  return (t?.isPortal ?? !1) && u(e).includes("AppBuilder Extension");
+}
+function d(e, t) {
+  return e.typeKeywords?.some((i) => t.includes(i));
+}
+function X(e, t) {
+  return I(e, t) && !P(e, t);
+}
+function I(e, t) {
+  const i = ["HTML3D/HTML", "App Builder", "Widget"], r = ["HTML3D/HTML", "Web AppBuilder", "Widget"], a = e.type === "Web Mapping Application", o = a && d(e, ["Web AppBuilder"]), c = a && d(e, ["WABTemplate"]), l = e.type === "AppBuilder Widget Package" && d(e, i), s = e.type === "Web AppBuilder Widget" && d(e, r), n = !!e?.owner?.startsWith("esri_") && a && d(e, ["Web AppBuilder for ArcGIS"]);
+  return o || c || l || s || y(e, t) || n;
+}
+function Y(e, t) {
+  return t?.isPortal && [
+    "Insights Workbook",
+    "Insights Page",
+    "Insights Model",
+    "Insights Theme",
+    "Insights Workbook Package",
+    "Kernel Gateway Connection",
+    "Insights Script",
+    "Insights Data Engineering Workbook",
+    "Insights Data Engineering Model",
+    "Relational Database Connection"
+  ].includes(e.type || "");
+}
+const P = (e, t) => (t?.isPortal ?? !1) && (T(e) || y(e, t) || m(e) || Y(e, t));
+function Z(e, t, i) {
+  return e.type === t && (b(e).name?.endsWith(i) ?? !1);
+}
+function ee(e) {
+  return Object.entries(z).some(
+    ([t, i]) => Z(e, t, i)
+  );
+}
+function te(e, t) {
+  return G.includes(e.type) || ee(e) || w(e) || V(e) || m(e) || P(e, t);
+}
+function ie(e) {
+  return (e.owner || "").toLowerCase().includes("esri") && u(e).includes("Requires Credits");
+}
+function re(e) {
+  return (e.owner || "").toLowerCase().includes("esri") && u(e).includes("Requires Subscription");
+}
+function ae(e) {
+  return f(e) === "org_authoritative";
+}
+function S(e) {
+  return f(e) === "public_authoritative";
+}
+function se(e, t) {
+  return t === "Registered API Key Credentials (Standard)" || t === "Registered OAuth 2.0 Credentials (Standard)" ? k : e[t].title || k;
+}
+function Pe(e, t, i) {
+  const r = [], a = u(e), o = b(e), c = K(e);
+  if ((ae(e) || S(e)) && r.push("Authoritative"), f(e) === "deprecated" && r.push("Deprecated"), X(e, t) && r.push("DeprecatedItemType"), L(e) && r.push("Beta"), e.type === "Solution" && a.includes("ArcGIS Solution") && r.push("Solution"), a.includes("Public Data Collection") && i && r.push("Public Data Collection"), te(e, t) && r.push("Retired"), c.includes("livingatlas") && r.push("Living Atlas"), c.includes("opendata") && r.push("Open Data"), ie(e) && r.push("Premium"), re(e) && r.push("Subscriber"), o.origin && r.push("Collaboration"), e.owner !== "esri_apps" && o.listed && !t?.isPortal && r.push("Marketplace"), a.includes("Registered App")) {
+    const l = t?.isPortal ?? !1;
+    if (e.type !== "API Key" && (!l || e.owner !== "esri_apps")) {
+      const s = a.includes("APIToken"), n = a.includes("Personal API Token") && !l;
+      s ? r.push(
+        n ? "Registered API Key Credentials (Personal)" : "Registered API Key Credentials (Standard)"
+      ) : r.push(
+        n ? "Registered OAuth 2.0 Credentials (Personal)" : "Registered OAuth 2.0 Credentials (Standard)"
+      );
+    }
+  }
+  return a.includes("hasReplacementItem") && r.push("Has Replacement"), r;
+}
+function oe({
+  badgeType: e,
+  i18n: t,
+  portal: i
+}) {
+  const r = i?.isPortal ?? !1;
+  if (e === "Registered API Key Credentials (Standard)") {
+    const a = t[e].title;
+    return r ? a.enterprise : a.online;
+  }
+  if (e === "Registered OAuth 2.0 Credentials (Standard)") {
+    const a = t[e].title;
+    return r ? a.enterprise : a.online;
+  }
+  return se(t, e);
+}
+function ne(e) {
+  const t = {
+    MapSeries: "Series",
+    MapJournal: "Journal",
+    SwipeSpyglass: "Swipe & Spyglass",
+    Shortlist: "Shortlist",
+    Cascade: "Cascade",
+    MapTour: "Tour",
+    StoryMapCrowdsource: "Crowdsource",
+    StorytellingSwipe: "Swipe & Spyglass"
+  }, r = u(e).find((o) => o in t);
+  if (r)
+    return t[r];
+  const a = J(e);
+  return a && t[a] || !1;
+}
+async function ce({
+  badgeType: e,
+  i18n: t,
+  item: i,
+  locale: r,
+  portal: a,
+  user: o,
+  useProduction: c
+}) {
+  const l = !o || _(o);
+  switch (e) {
+    case "Authoritative": {
+      if (S(i)) {
+        const s = await H(i, r, a, c), n = t.Authoritative.tooltip, p = a?.isPortal && !c ? a?.name : s?.name || a?.name || i.owner;
+        return h(n.public, { name: p || "" });
+      }
+      return t.Authoritative.tooltip.org;
+    }
+    case "Deprecated": {
+      const s = i.owner || "", n = await W(s, a, c), p = U(n, r);
+      return h(t.Deprecated.tooltip, { owner: p });
+    }
+    case "DeprecatedItemType": {
+      const s = t.DeprecatedItemType.tooltip;
+      return I(i, a) ? s.webAppBuilder : s.general;
+    }
+    case "Retired": {
+      const s = t.Retired.tooltip;
+      if (w(i)) {
+        const n = ne(i);
+        if (n) {
+          const p = { [F]: n };
+          return h(s.classicStoryMap, p);
+        }
+        return s.classicStoryMapGeneric;
+      }
+      return Q(i) ? s.cityEngine : T(i) || y(i, a) ? s.webAppBuilder : m(i) ? s.app : j(i) ? s.bdfs : s.general;
+    }
+    case "Subscriber": {
+      const s = t.Subscriber.tooltip;
+      return l ? s.public : s.org;
+    }
+    case "Premium": {
+      const s = t.Premium.tooltip;
+      return l ? s.public : s.org;
+    }
+    case "Registered": {
+      const s = t.Registered.tooltip;
+      return a?.isPortal ? s.enterprise : s.online;
+    }
+    case "Personal credential":
+      return t["Personal credential"].tooltip;
+    case "Has Replacement": {
+      const s = t["Has Replacement"];
+      return a.isPortal ? (globalThis.location?.href || "").includes("item.html") ? s.itemPageTooltip : s.tooltip : s.itemPageTooltip;
+    }
+    default:
+      return t[e].tooltip;
+  }
+}
+function le({
+  badgeType: e,
+  i18n: t,
+  item: i,
+  portal: r
+}) {
+  if (e !== "Has Replacement" || r.isPortal)
+    return null;
+  const a = x(i);
+  return a ? {
+    title: t["Has Replacement"].link,
+    href: de({ portal: r, itemId: a })
+  } : null;
+}
+function de({ itemId: e, portal: t }) {
+  return t?.restUrl ? `${t.restUrl.replace("sharing/rest", "home")}/item.html?id=${e}` : "";
+}
+function A() {
+  return {
+    loading: !1,
+    title: "",
+    tooltip: "",
+    tooltipLink: null
+  };
+}
+class pe extends R {
+  constructor() {
+    super(...arguments), this._messages = M({ name: "portal-item-badges", blocking: !0 }), this.tooltipRequestId = 0, this.tooltipId = `portal-item-badge-${Math.random().toString(36).slice(2, 10)}`, this.details = A(), this.width = "full", this.scale = "m", this.showTooltip = !1;
+  }
+  static {
+    this.properties = { details: 16, item: 0, portal: 0, user: 0, badgeType: 1, width: 1, appearance: 1, scale: 1, showTooltip: 5, useProduction: 5 };
+  }
+  static {
+    this.styles = q;
+  }
+  willUpdate(t) {
+    (t.has("badgeType") || t.has("item") || t.has("portal") || t.has("user") || t.has("showTooltip") || t.has("useProduction")) && this.loadDetails();
+  }
+  loadDetails() {
+    if (!this.badgeType || !this.portal) {
+      this.details = A();
+      return;
+    }
+    const t = oe({
+      badgeType: this.badgeType,
+      i18n: this._messages,
+      portal: this.portal
+    }), i = this.item && this.portal ? le({
+      badgeType: this.badgeType,
+      i18n: this._messages,
+      item: this.item,
+      portal: this.portal
+    }) : null;
+    if (!this.showTooltip || !this.item) {
+      this.details = {
+        loading: !1,
+        title: t,
+        tooltip: "",
+        tooltipLink: i
+      };
+      return;
+    }
+    const r = ++this.tooltipRequestId;
+    this.details = {
+      loading: !0,
+      title: t,
+      tooltip: "",
+      tooltipLink: i
+    }, ce({
+      badgeType: this.badgeType,
+      i18n: this._messages,
+      item: this.item,
+      locale: this._messages._lang || "en",
+      portal: this.portal,
+      user: this.user,
+      useProduction: this.useProduction
+    }).then((a) => {
+      r === this.tooltipRequestId && (this.details = {
+        loading: !1,
+        title: t,
+        tooltip: a,
+        tooltipLink: i
+      });
+    }).catch(() => {
+      r === this.tooltipRequestId && (this.details = {
+        loading: !1,
+        title: t,
+        tooltip: "",
+        tooltipLink: i
+      });
+    });
+  }
+  render() {
+    if (!this.badgeType)
+      return null;
+    const t = ue[this.badgeType], i = this.width === "narrow", r = this.showTooltip && (this.details.loading || !!this.details.tooltip || !!this.details.tooltipLink), a = {
+      badge: this.badgeType !== "Beta",
+      "badge--colored": this.badgeType === "Living Atlas" || this.badgeType === "Open Data" || this.badgeType === "Solution",
+      beta: this.badgeType === "Beta",
+      authoritative: this.badgeType === "Authoritative",
+      deprecated: this.badgeType === "Deprecated" || this.badgeType === "DeprecatedItemType",
+      narrow: i,
+      [`narrow--${this.scale}`]: i
+    };
+    return g`<calcite-chip id=${this.tooltipId ?? D} class=${B(a)} .value=${this.badgeType} .tabIndex=${this.showTooltip ? 0 : -1} .scale=${this.scale} .appearance=${this.appearance} .label=${this.details.title} .icon=${t}>${i ? null : this.details.title}</calcite-chip>${r ? g`<calcite-tooltip .referenceElement=${this.tooltipId} close-on-click placement=bottom-start overlay-positioning=fixed offset-distance=6 offset-skidding=0>${i ? g`<h3 class="tooltip-title">${this.details.title}</h3>` : null}<p class="tooltip-text"><calcite-loader .hidden=${!this.details.loading} .label=${this._messages.loading} inline scale=s></calcite-loader>${this.details.loading ? this._messages.loading : this.details.tooltip}</p>${this.details.tooltipLink ? g`<calcite-link @click=${(o) => o.stopPropagation()} icon-end=launch .href=${this.details.tooltipLink.href} target=_blank>${this.details.tooltipLink.title}</calcite-link>` : null}</calcite-tooltip>` : null}`;
+  }
+}
+const ue = {
+  Authoritative: "check-circle",
+  Beta: "beaker",
+  Collaboration: "collaboration-distributed",
+  Deprecated: "circle-disallowed",
+  DeprecatedItemType: "exclamation-mark-triangle",
+  "Has Replacement": "arrow-right-left",
+  "Living Atlas": "arcgis-living-atlas",
+  Marketplace: "marketplace",
+  "Open Data": "open-data",
+  "Personal credential": "user-key",
+  Premium: "shield-coin",
+  "Public Data Collection": "pencil",
+  Registered: "key",
+  "Registered API Key Credentials (Personal)": "key",
+  "Registered API Key Credentials (Standard)": "key",
+  "Registered Application": "app-gear",
+  "Registered OAuth 2.0 Credentials (Personal)": "app-gear",
+  "Registered OAuth 2.0 Credentials (Standard)": "app-gear",
+  Retired: "exclamation-mark-triangle",
+  Solution: "arcgis-solutions",
+  Subscriber: "security"
+};
+v("arcgis-portal-item-badge", pe);
+export {
+  pe as A,
+  Pe as g
+};