@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
TypeScript
/// <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 {};