@arcgis/coding-components
Version:
ArcGIS Coding Components
90 lines (89 loc) • 5.78 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as r } from "../../chunks/runtime.js";
import { ref as a } from "lit/directives/ref.js";
import { css as d, html as l } from "lit";
import { setFocusOnElement as m, focusElement as u } from "@arcgis/toolkit/dom";
import { addLtrMark as c } from "@arcgis/toolkit/string";
import { LitElement as h, createEvent as o } from "@arcgis/lumina";
import { f } from "../../chunks/utilities.js";
import { c as n } from "../../chunks/markdown.js";
import { u as p } from "../../chunks/useT9n.js";
const g = 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)}calcite-flow{height:100%}calcite-block{p:first-of-type{margin-top:0}}calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}calcite-flow{[slot=footer]{word-break:break-word}}.container{block-size:100%;display:grid;grid-template-rows:auto 1fr;overflow:hidden}.scrollable{min-block-size:0;overflow:auto}}`;
class b extends h {
constructor() {
super(...arguments), this.messages = p(), this._unselectItem = async () => {
this._selectedApiItem = void 0;
}, this._filterValue = "", this.languageId = "arcade", this.hideDocumentationActions = !1, this.loading = !1, this.closed = !1, this.arcgisInternalClosePanel = o({ bubbles: !1, composed: !1 }), this.arcgisInternalItemSelected = o({ bubbles: !1, composed: !1 });
}
static {
this.properties = { _filterValue: 16, _selectedApiItem: 16, languageId: 1, apiLibrary: 0, hideDocumentationActions: 5, loading: 5, closed: 5 };
}
static {
this.styles = g;
}
willUpdate(e) {
if (e.has("apiLibrary")) {
if (!this._selectedApiItem)
return;
for (const i of this.apiLibrary ?? [])
for (const t of i.items)
if (t.name === this._selectedApiItem.name) {
this._selectedApiItem = t;
return;
}
this._selectedApiItem = void 0;
}
}
disconnectedCallback() {
super.disconnectedCallback(), this._flowObserver?.disconnect();
}
flowFocusHandler(e) {
if (!e) {
this._flowObserver?.disconnect(), this._flowObserver = void 0;
return;
}
this._flowObserver || (this._flowObserver = new MutationObserver(() => {
m(e.querySelector("calcite-flow-item:last-child"), "calcite-input");
}), this._flowObserver.observe(e, { attributes: !0, attributeFilter: ["id"], childList: !0 }));
}
_emitItemSelected(e, i) {
if (!i)
return;
const t = e;
(!t.key || t.key === "Enter") && (e.preventDefault(), this.arcgisInternalItemSelected.emit(i.completion.insertText ?? ""));
}
_emitClose() {
this.arcgisInternalClosePanel.emit();
}
_emitItemSelectedAndClose(e, i) {
const t = e;
(!t.key || t.key === "Enter") && (e.preventDefault(), this.arcgisInternalItemSelected.emit(i.completion.insertText ?? ""));
}
_selectItem(e, i) {
e.stopPropagation(), this._selectedApiItem = i;
}
_updateFilterValue(e) {
this._filterValue = e.currentTarget.value ?? "";
}
_elementToMarkdown(e) {
e !== void 0 && (e.innerHTML = n(this._selectedApiItem.examples));
}
renderApiCategory(e) {
const i = f(e.items, "name", this._filterValue);
return i.length ? l`<calcite-list-item-group .heading=${e.title}>${i.map((t) => l`<calcite-list-item .label=${c(t.completion.detail)} =${(s) => this._emitItemSelected(s, t)} =${(s) => this._emitItemSelected(s, t)}><calcite-action slot=actions-end .text=${this.messages.expand ?? ""} icon=chevron-right icon-flip-rtl scale=s =${(s) => this._selectItem(s, t)}></calcite-action></calcite-list-item>`)}</calcite-list-item-group>` : null;
}
renderApiItemFlowItem() {
const e = this._selectedApiItem;
return e ? l`<calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} .beforeBack=${this._unselectItem} closable =${this._emitClose} selected>${this.hideDocumentationActions ? null : l`<calcite-button width=half slot=footer appearance=outline kind=brand scale=s .href=${e.link} target=Help icon-start=information>${this.messages.moreinformation}</calcite-button>`}<calcite-button .width=${this.hideDocumentationActions ? "full" : "half"} slot=footer appearance=outline kind=brand icon-start=code scale=s =${(i) => this._emitItemSelectedAndClose(i, e)} ${a(u)}>${this.messages.insert}</calcite-button><calcite-block expanded .heading=${c(e.completion.detail)}><div .innerHTML=${n(e.completion.documentation) ?? ""}></div>${e.examples ? l`<div ${a(this._elementToMarkdown)}></div>` : null}</calcite-block></calcite-flow-item>` : null;
}
render() {
if (this.closed)
return null;
const e = (this.apiLibrary ?? []).map((t) => this.renderApiCategory(t)), i = e.every((t) => !t);
return l`<calcite-flow ${a(this.flowFocusHandler)}><calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} closable =${this._emitClose} .selected=${!this._selectedApiItem}><div class="container"><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable =${this._updateFilterValue} scale=m></calcite-input><div class="scrollable">${this.loading ? l`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "Loading"}></calcite-loader>` : l`<calcite-list .label=${this.messages.api ?? "API"}>${i ? l`<div class="notice-container">${this.messages.noitems}</div>` : e}</calcite-list>`}</div></div></calcite-flow-item>${this.renderApiItemFlowItem()}</calcite-flow>`;
}
}
r("arcgis-language-api-panel", b);
export {
b as ArcgisLanguageApiPanel
};