@arcgis/coding-components/dist/cdn/XXGN5S2Q.js

ArcGIS Coding Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{b,c as r,d as _}from"./SMAQD57G.js";import{a as v}from"./MX2KP5HW.js";import{a as f}from"./FCL3JVE7.js";import"./JWPKZHE4.js";import"./ER2MKLVA.js";import{a as p}from"./KBTQTCIT.js";import"./PHPFOWGJ.js";import"./GS2ISVXJ.js";import{g as h,h as m}from"./6G5URSC7.js";import"./6C52UOYL.js";import{F as c,G as d,K as u,h as g,j as s,l,n as a}from"./2FGVSLMQ.js";import"./Y3KOWWO5.js";import"./B3UMUBOI.js";import"./CF3TERM3.js";import"./Z5ZZ36DQ.js";import"./LLPQEURF.js";import"./3TTFCHAA.js";function S(o){return!Array.isArray(o)||!o.length?!1:Array.isArray(o[0].suggestions)}var $=g`: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}}}`,n=class extends d{constructor(){super(...arguments),this._beforeBack=async()=>{this._selectedSuggestion=void 0},this.messages=p(),this._colorizeStyle="",this._filterValue="",this.closed=!1,this.arcgisInternalClosePanel=a({bubbles:!1,composed:!1}),this.arcgisInternalItemSelected=a({bubbles:!1,composed:!1})}static{this.properties={_colorizeStyle:16,_filterValue:16,_selectedSuggestion:16,suggestions:0,closed:5}}static{this.styles=$}load(){this._colorizeStyle=r(),this._themeChangedListener=_(()=>this._colorizeStyle=r())}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(()=>{m(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){let 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&&b(e,this._selectedSuggestion.code,"arcade")}renderSuggestionGroups(){return this.suggestions===void 0?null:S(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=f(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??l}><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??l}></calcite-action></calcite-list-item>`):s`<div class="notice-container">${this.messages.noitems}</div>`}renderSuggestionFlowItem(){let 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??l} ${c(h)}>${this.messages.insert}</calcite-button><calcite-block open .heading=${e.label} .description=${e.description}><div .innerHTML=${v(e.documentation)??""}></div><pre><code ${c(this._colorizeCode)}></code></pre></calcite-block></calcite-flow-item>`:null}render(){return this.closed?null:s`<style>${this._colorizeStyle}</style><calcite-flow ${c(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>`}};u("arcgis-arcade-suggestions",n);export{n as ArcgisArcadeSuggestions};