@arcgis/coding-components/dist/components/arcgis-arcade-suggestions/customElement.js

ArcGIS Coding Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as n } from "../../chunks/runtime.js";
import { ref as l } from "lit/directives/ref.js";
import { css as d, html as s, nothing as r } from "lit";
import { setFocusOnElement as g, focusElement as u } from "@arcgis/toolkit/dom";
import { LitElement as h, createEvent as c } from "@arcgis/lumina";
import { g as a, o as m, a as f } from "../../chunks/colorize.js";
import { f as p } from "../../chunks/utilities.js";
import { c as b } from "../../chunks/markdown.js";
import { u as _ } from "../../chunks/useT9n.js";
function v(o) {
  return !Array.isArray(o) || !o.length ? !1 : Array.isArray(o[0].suggestions);
}
const S = d`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-block{p:first-of-type{margin-top:0}code{font-family:var(--calcite-code-family)}pre{direction:ltr;overflow-x:auto;background-color:var(--calcite-color-foreground-2);padding:var(--calcite-spacing-sm);code{font-size:var(--calcite-font-size--2)}}}calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}calcite-flow{[slot=footer]{word-break:break-word}}}`;
class $ extends h {
  constructor() {
    super(...arguments), this._beforeBack = async () => {
      this._selectedSuggestion = void 0;
    }, this.messages = _(), this._colorizeStyle = "", this._filterValue = "", this.closed = !1, this.arcgisInternalClosePanel = c({ bubbles: !1, composed: !1 }), this.arcgisInternalItemSelected = c({ bubbles: !1, composed: !1 });
  }
  static {
    this.properties = { _colorizeStyle: 16, _filterValue: 16, _selectedSuggestion: 16, suggestions: 0, closed: 5 };
  }
  static {
    this.styles = S;
  }
  load() {
    this._colorizeStyle = a(), this._themeChangedListener = m(() => this._colorizeStyle = a());
  }
  willUpdate(e) {
    e.has("suggestions") && this.suggestionsPropChanged();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this._flowObserver?.disconnect(), this._themeChangedListener?.dispose();
  }
  suggestionsPropChanged() {
    this._selectedSuggestion = void 0;
  }
  flowFocusHandler(e) {
    if (!e) {
      this._flowObserver?.disconnect(), this._flowObserver = void 0;
      return;
    }
    this._flowObserver || (this._flowObserver = new MutationObserver(() => {
      g(e.querySelector("calcite-flow-item:last-child"), "calcite-input");
    }), this._flowObserver.observe(e, { attributes: !0, attributeFilter: ["id"], childList: !0 }));
  }
  _updateFilterValue(e) {
    this._filterValue = e.currentTarget?.value ?? "";
  }
  _emitItemSelected(e, t) {
    const i = e;
    (!i.key || i.key === "Enter") && (e.preventDefault(), this.arcgisInternalItemSelected.emit(t.code));
  }
  _showSuggestionDetail(e, t) {
    e.stopPropagation(), this._selectedSuggestion = t;
  }
  _emitClose() {
    this.arcgisInternalClosePanel.emit();
  }
  _colorizeCode(e) {
    e !== void 0 && f(e, this._selectedSuggestion.code, "arcade");
  }
  renderSuggestionGroups() {
    return this.suggestions === void 0 ? null : v(this.suggestions) ? this.suggestions.map((e) => s`<calcite-list-item-group .heading=${e.label}>${this.renderSuggestionListItems(e.suggestions)}</calcite-list-item-group>`) : this.renderSuggestionListItems(this.suggestions);
  }
  renderSuggestionListItems(e) {
    return e = p(e, "label", this._filterValue), e.length ? e.map((t) => s`<calcite-list-item .label=${t.label} .description=${t.description} @calciteListItemSelect=${(i) => this._emitItemSelected(i, t)} @keydown=${(i) => this._emitItemSelected(i, t)} data-item=${t ?? r}><calcite-action slot=actions-end .text=${this.messages.expand ?? ""} scale=s icon=chevron-right icon-flip-rtl @click=${(i) => this._showSuggestionDetail(i, t)} data-item=${t ?? r}></calcite-action></calcite-list-item>`) : s`<div class="notice-container">${this.messages.noitems}</div>`;
  }
  renderSuggestionFlowItem() {
    const e = this._selectedSuggestion;
    return e ? s`<calcite-flow-item heading-level=2 .heading=${this.messages.suggestions} closable @calciteFlowItemClose=${this._emitClose} .beforeBack=${this._beforeBack} selected><calcite-button width=half slot=footer appearance=outline kind=brand icon-start=code scale=s @click=${(t) => this._emitItemSelected(t, e)} data-item=${e ?? r} ${l(u)}>${this.messages.insert}</calcite-button><calcite-block open .heading=${e.label} .description=${e.description}><div .innerHTML=${b(e.documentation) ?? ""}></div><pre><code ${l(this._colorizeCode)}></code></pre></calcite-block></calcite-flow-item>` : null;
  }
  render() {
    return this.closed ? null : s`<style>${this._colorizeStyle}</style><calcite-flow ${l(this.flowFocusHandler)}><calcite-flow-item heading-level=2 .heading=${this.messages.suggestions} closable @calciteFlowItemClose=${this._emitClose} .selected=${!this._selectedSuggestion}><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m></calcite-input><calcite-list .label=${this.messages.suggestions ?? "Suggestions"}>${this.renderSuggestionGroups()}</calcite-list></calcite-flow-item>${this.renderSuggestionFlowItem()}</calcite-flow>`;
  }
}
n("arcgis-arcade-suggestions", $);
export {
  $ as ArcgisArcadeSuggestions
};