@arcgis/coding-components
Version:
Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.
5 lines (4 loc) • 4.69 kB
JavaScript
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.14 */
import{b,c as r,d as _,e as v}from"./D7LYJ7AL.js";import{b as l}from"./ZWG62OP5.js";import{a as p}from"./KBSNSGW6.js";import"./FXJMBYDM.js";import{g as f}from"./ESHR3OJV.js";import"./FBTENGUV.js";import{C as m,a as u,b as s,d as c,l as a,y as h}from"./MOODF6RJ.js";import{d as g,e as d}from"./SWSGV34B.js";import"./GMVUIEZO.js";import"./HAP7XW5O.js";function S(o){return!Array.isArray(o)||!o.length?!1:Array.isArray(o[0].suggestions)}var $=u`: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)}}`,n=class extends h{constructor(){super(...arguments),this._beforeBack=async()=>{this._selectedSuggestion=void 0},this.messages=p(),this._colorizeStyle="",this._filterValue="",this.closed=!1,this.arcgisClose=a({bubbles:!1}),this.arcgisItemSelected=a({bubbles:!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(()=>{d(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.arcgisItemSelected.emit(t.code))}_showSuggestionDetail(e,t){e.stopPropagation(),this._selectedSuggestion=t}_emitClose(){this.arcgisClose.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} =${i=>this._emitItemSelected(i,t)} =${i=>this._emitItemSelected(i,t)} data-item=${t??c}><calcite-action slot=actions-end .text=${this.messages.expand??""} scale=s icon=chevron-right icon-flip-rtl =${i=>this._showSuggestionDetail(i,t)} data-item=${t??c}></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=${this.messages.suggestions} closable =${this._emitClose} .beforeBack=${this._beforeBack} selected><calcite-button width=half slot=footer appearance=outline kind=brand icon-start=code scale=s =${t=>this._emitItemSelected(t,e)} data-item=${e??c} ${l(g)}>${this.messages.insert}</calcite-button><calcite-block open .heading=${e.label} .description=${e.description}><div .innerHTML=${v(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=${this.messages.suggestions} closable =${this._emitClose} .selected=${!this._selectedSuggestion}><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable =${this._updateFilterValue} class="sticky" scale=m></calcite-input><calcite-list label=suggestions>${this.renderSuggestionGroups()}</calcite-list></calcite-flow-item>${this.renderSuggestionFlowItem()}</calcite-flow>`}};m("arcgis-arcade-suggestions",n);export{n as ArcgisArcadeSuggestions};