UNPKG

@arcgis/coding-components

Version:

Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.

102 lines (97 loc) 6.3 kB
/// <reference types="../../index.d.ts" /> import { PropertyValues } from 'lit'; import { editor as Editor } from 'monaco-editor'; import { Diagnostic } from '@arcgis/arcade-languageservice'; import { ApiCategory, ApiSnippet } from '@arcgis/languages-api-utils'; import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina'; import { IEditorCodeSuggestion, IEditorCodeSuggestionGroup } from '../../utils/editor-suggestions'; import { IEditorProfileDefinition, IPredefinedProfile } from '../../utils/profile/types'; import { EditorProfile } from '../../utils/profile/editor-profile'; import { ArcadeResult, IEditorTestContext } from '../../utils/arcade-executor'; import { ResultPanelName } from '../arcgis-arcade-results/customElement.js'; import { ICustomPanel } from '../../utils/custom-panel'; type SidePanelName = "api" | "none" | "suggestions" | "variables"; type WithCustomPanels = { customPanels?: ICustomPanel[]; }; /** * [**Arcade**](https://developers.arcgis.com/arcade/) is a portable, and lightweight expression language used to create custom content throughout the [ArcGIS system](https://www.esri.com/en-us/arcgis/products/index). * Like other expression languages, it can perform mathematical calculations, format text, and evaluate logical statements. * It also supports multi-statement expressions, variables, and flow control statements. Arcade is unique when compared to other expression and scripting languages due to its inclusion of [feature](https://developers.arcgis.com/arcade/guide/types/#feature) and [geometry](https://developers.arcgis.com/arcade/guide/types/#geometry) data types. * Map Viewer (MV) was the first ArcGIS Online product to incorporate the new Arcade editor after [the editor's introduction in the November 2022 ArcGIS Online release](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/introducing-the-new-arcade-editor-in-arcgis-online/). * This was possible thanks to the Arcade editor component, which enabled MV to implement its own Arcade expression builder. * You can now also find the editor in ArcGIS Dashboards, ArcGIS Field Maps, and ArcGIS Velocity. * You can easily get your own dedicated Arcade expression builder with the **Arcade editor** component, which includes: * - An easy to use [layout](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/discover-the-arcade-editors-powerful-new-features/#the-new-layout) * - An optional minimal layout if you, for example, decide to manually exclude things such as test data, padding, line numbers, and the sidebar * - A way to execute Arcade expressions in a configurable code editor * - [Suggestions and code completion](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/discover-the-arcade-editors-powerful-new-features/#suggestions-and-code-completion) * - [WCAG 2.0 compliant code colorization / syntax highlighting](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/accessibility-and-arcade-working-in-color/) * - Built-in [keyboard shortcuts](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/discover-the-arcade-editors-powerful-new-features/#keyboard-shortcuts) * - In-editor help for finding information about profile variables relevant to your profile, documentation for constants and functions, a link to the official Arcade documentation, and, in some case, suggestions. * - Support for many [languages and directionality](https://developers.arcgis.com/javascript/latest/localization/) */ export declare class ArcgisArcadeEditor<T extends WithCustomPanels = object> extends LitElement { /** * Options to update on the editor. * For example: * ```json * { * "fontSize": 18 * } * ``` * * To get the full list of available options, see the Monaco Editor options [documentation](https://microsoft.github.io/monaco-editor/typedoc/variables/editor.EditorOptions.html) for more details. */ editorOptions: (Editor.IEditorOptions & Editor.IGlobalEditorOptions) | undefined; /** If true, it will hide the documentation action in the side panel */ hideDocumentationActions: boolean; /** If true, it will hide the side actions bar. The editor will be in a minimalistic UX. */ hideSideBar: boolean; /** The name of the opened side panel. 'none' means 'no panel opened'. */ openedSidePanel: T extends Required<WithCustomPanels> ? SidePanelName : string; /** * The profile contains metadata used by the editor for editing context and help. * Example: * ``` * { * bundles: ["core", "dataAccess", "geometry", "portal"], * variables: [ * { * name: "$feature", * description: "The feature passed to the script during execution.", * definition: aFeatureLayerInstance * } * ] * } * ``` */ profile: IEditorProfileDefinition | IPredefinedProfile | undefined; /** The arcade script. Use this property to define or update the script. */ script: string; /** If true, the side action bar will be exapnded */ sideActionBarExpanded: boolean; /** Collection of snippets */ snippets: ApiSnippet[] | undefined; /** Collection of suggestions */ suggestions: IEditorCodeSuggestion[] | IEditorCodeSuggestionGroup[] | undefined; /** Test data used to execute the script in the editor. If undefined the execute script UX will be hidden. */ testData: IEditorTestContext | undefined; /** * Custom panels to be displayed in the side panel. * Will be placed below the default panels but above the help panel. * @internal */ customPanels: ICustomPanel[] | undefined; /** @deprecated Use `script` property instead. */ getScript(): Promise<string | undefined>; /** Returns the Arcade result for the script for the provided test data. */ getTestResult(): Promise<ArcadeResult>; /** Set the focus on the element. */ setFocus(): Promise<void>; /** Emitted when the diagnostics collection has changed. */ readonly arcgisDiagnosticsChange: TargetedEvent<this, Diagnostic[]>; /** Emitted when the script string has changed. */ readonly arcgisScriptChange: TargetedEvent<this, string>; } export {};