@arcgis/map-components/dist/components/arcgis-search-result-renderer/customElement.js

ArcGIS Map Components

import { c as d } from "../../chunks/runtime.js";
import { html as r } from "lit-html";
import { keyed as c } from "lit-html/directives/keyed.js";
import { LitElement as m, createEvent as p, noShadowRoot as g, safeClassMap as a } from "@arcgis/lumina";
import { classes as _ } from "@arcgis/components-utils";
import { g as R } from "../../chunks/globalCss.js";
import { css as w } from "@lit/reactive-element/css-tag.js";
import { watch as u } from "@arcgis/core/core/reactiveUtils.js";
import { substitute as M } from "@arcgis/core/intl.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const n = "arcgis-search-result-renderer", h = {
  base: n,
  moreResults: `${n}__more-results`
}, f = w`@layer{.arcgis-search-result-renderer calcite-block,.arcgis-search-result-renderer calcite-block[expanded]{margin-block:0;margin-block-start:var(--calcite-spacing-md);border:0}}`;
class $ extends m {
  constructor() {
    super(...arguments), this._resultCount = 0, this._showMoreResultsOpen = !1, this.autoDestroyDisabled = !1, this.arcgisReady = p();
  }
  static {
    this.properties = { _results: 16, _resultCount: 16, _selectedResult: 16, _showMoreResultsOpen: 16, messages: 0, autoDestroyDisabled: 5, viewModel: 0 };
  }
  static {
    this.styles = f;
  }
  static {
    this.shadowRootOptions = g;
  }
  async destroy() {
    await this.manager.destroy();
  }
  loaded() {
    this.manager.onLifecycle(() => [
      u(() => [this.viewModel?.results, this.viewModel?.resultCount], () => {
        this._results = this.viewModel?.results, this._resultCount = this.viewModel?.resultCount ?? 0, this._showMoreResultsOpen = !1;
      }, { initial: !0 }),
      u(() => this.viewModel?.selectedResult, (e) => this._selectedResult = e, { initial: !0 })
    ]);
  }
  _selectResult(e) {
    this._showMoreResultsOpen = !1, this.viewModel?.select(e);
  }
  _getSourceName(e, s) {
    return s === -1 ? this.messages?.all ?? "" : e.name;
  }
  _toggleShowMoreResults(e) {
    this._showMoreResultsOpen = e;
    const s = this.viewModel?.view?.popup;
    s && "reposition" in s && s.reposition();
  }
  render() {
    return r`<div class=${a(_(h.base, R.widget))}>${this._selectedResult?.name ?? ""}${this._renderMoreResults()}</div>`;
  }
  _renderMoreResults() {
    const { _resultCount: e, _results: s } = this;
    return !e || e < 2 || !s ? null : r`<calcite-block class=${a(h.moreResults)} collapsible .expanded=${this._showMoreResultsOpen} .heading=${M(this.messages?.showMoreResults ?? "", { count: e - 1 })} @calciteBlockClose=${() => this._toggleShowMoreResults(!1)} @calciteBlockOpen=${() => this._toggleShowMoreResults(!0)}>${s.map((t) => this._renderMoreResultsList(t, s?.length > 1))}</calcite-block>`;
  }
  _renderMoreResultsList(e, s) {
    const { results: t } = e;
    if (!(t?.length ?? 0) || !t)
      return null;
    const i = this._getSourceName(e.source, e.sourceIndex), o = t.filter((l) => l !== this._selectedResult).map((l) => this._renderListItem(l));
    return r`<calcite-list .label=${i}>${s ? c(`group-${e.sourceIndex}`, r`<calcite-list-item-group .heading=${i}>${o}</calcite-list-item-group>`) : o}</calcite-list>`;
  }
  _renderListItem(e) {
    return c(`result-${e.sourceIndex}-${e.key}`, r`<calcite-list-item .label=${e.name} @calciteListItemSelect=${() => this._selectResult(e)}></calcite-list-item>`);
  }
}
d("arcgis-search-result-renderer", $);
export {
  $ as ArcgisSearchResultRenderer
};