@arcgis/coding-components/dist/docs/web-types.json

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

{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  "name": "@arcgis/coding-components",
  "version": "4.32.14",
  "description-markup": "markdown",
  "contributions": {
    "html": {
      "elements": [
        {
          "name": "arcgis-arcade-editor",
          "description": "[**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).\nLike other expression languages, it can perform mathematical calculations, format text, and evaluate logical statements.\nIt 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.\n\nMap 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/).\nThis was possible thanks to the Arcade editor component, which enabled MV to implement its own Arcade expression builder.\nYou can now also find the editor in ArcGIS Dashboards, ArcGIS Field Maps, and ArcGIS Velocity.\n\nYou can easily get your own dedicated Arcade expression builder with the **Arcade editor** component, which includes:\n\n- 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)\n- An optional minimal layout if you, for example, decide to manually exclude things such as test data, padding, line numbers, and the sidebar\n- A way to execute Arcade expressions in a configurable code editor\n- [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)\n- [WCAG 2.0 compliant code colorization / syntax highlighting](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/accessibility-and-arcade-working-in-color/)\n- Built-in [keyboard shortcuts](https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/discover-the-arcade-editors-powerful-new-features/#keyboard-shortcuts)\n- 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.\n- Support for many [languages and directionality](https://developers.arcgis.com/javascript/latest/localization/)\n--\n\n### Events\n- **arcgisDiagnosticsChange** - Emitted when the diagnostics collection has changed.\n- **arcgisScriptChange** - Emitted when the script string has changed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `getScript(): Promise<string | undefined>` - **Deprecated**: Use `script` property instead.. \n- `getTestResult(): Promise<ArcadeResult>` - Returns the Arcade result for the script for the provided test data.\n- `setFocus(): Promise<void>` - Set the focus on the element.",
          "doc-url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-arcade-editor/",
          "attributes": [
            {
              "name": "hide-documentation-actions",
              "description": "If true, it will hide the documentation action in the side panel",
              "default": "false",
              "value": {
                "type": "boolean"
              }
            },
            {
              "name": "hide-side-bar",
              "description": "If true, it will hide the side actions bar. The editor will be in a minimalistic UX.",
              "default": "false",
              "value": {
                "type": "boolean"
              }
            },
            {
              "name": "script",
              "description": "The arcade script. Use this property to define or update the script.",
              "default": "\"\"",
              "value": {
                "type": "string"
              }
            },
            {
              "name": "side-action-bar-expanded",
              "description": "If true, the side action bar will be exapnded",
              "default": "false",
              "value": {
                "type": "boolean"
              }
            }
          ],
          "events": [
            {
              "name": "arcgisDiagnosticsChange",
              "type": "Array<Diagnostic>",
              "description": "Emitted when the diagnostics collection has changed."
            },
            {
              "name": "arcgisScriptChange",
              "type": "string",
              "description": "Emitted when the script string has changed."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "customPanels",
                "description": "Custom panels to be displayed in the side panel.\nWill be placed below the default panels but above the help panel.",
                "type": "(Array<{\n    id: string;\n    name: string;\n    icon: string;\n    description?: string | undefined;\n    useFlows?: boolean | undefined;\n    renderer: ({ closePanel, insertText, }: {\n        closePanel: (e: Event) => void;\n        insertText: (text: string) => void;\n    }) => JsxNode;\n}>)"
              },
              {
                "name": "editorOptions",
                "description": "Options to update on the editor.\nFor example:\n```json\n{\n  \"fontSize\": 18\n}\n```\n\nTo 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.",
                "type": "(IEditorOptions & IGlobalEditorOptions)"
              },
              {
                "name": "hideDocumentationActions",
                "description": "If true, it will hide the documentation action in the side panel",
                "type": "boolean"
              },
              {
                "name": "hideSideBar",
                "description": "If true, it will hide the side actions bar. The editor will be in a minimalistic UX.",
                "type": "boolean"
              },
              {
                "name": "openedSidePanel",
                "description": "The name of the opened side panel. 'none' means 'no panel opened'.",
                "type": "T extends {\n    customPanels: Array<ICustomPanel>;\n} ? \"none\" | \"variables\" | \"suggestions\" | \"api\" : string"
              },
              {
                "name": "profile",
                "description": "The profile contains metadata used by the editor for editing context and help.\nExample:\n```\n {\n   bundles: [\"core\", \"dataAccess\", \"geometry\", \"portal\"],\n   variables: [\n     {\n       name: \"$feature\",\n       description: \"The feature passed to the script during execution.\",\n       definition: aFeatureLayerInstance\n     }\n   ]\n }\n```",
                "type": "IEditorProfileDefinition | IPredefinedProfile"
              },
              {
                "name": "script",
                "description": "The arcade script. Use this property to define or update the script.",
                "type": "string"
              },
              {
                "name": "sideActionBarExpanded",
                "description": "If true, the side action bar will be exapnded",
                "type": "boolean"
              },
              {
                "name": "snippets",
                "description": "Collection of snippets",
                "type": "Array<ApiSnippet>"
              },
              {
                "name": "suggestions",
                "description": "Collection of suggestions",
                "type": "Array<IEditorCodeSuggestion> | Array<IEditorCodeSuggestionGroup>"
              },
              {
                "name": "testData",
                "description": "Test data used to execute the script in the editor. If undefined the execute script UX will be hidden.",
                "type": "IEditorTestContext"
              }
            ],
            "events": [
              {
                "name": "arcgisDiagnosticsChange",
                "type": "Array<Diagnostic>",
                "description": "Emitted when the diagnostics collection has changed."
              },
              {
                "name": "arcgisScriptChange",
                "type": "string",
                "description": "Emitted when the script string has changed."
              }
            ]
          }
        },
        {
          "name": "arcgis-code-editor",
          "description": "### Events\n- **arcgisSelectionChange** - Emitted when the selection has changed.\n- **arcgisValueChange** - Emitted when the value has changed (script, code, css, json, etc.)\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `getValue(): Promise<string>` - **Deprecated**: Use `value` property instead.. \n- `insertSnippet(text: string | null | undefined): Promise<void>` - Inserts a snippet at the current position in the editor.\n- `insertText(text: string | null | undefined): Promise<void>` - Inserts a text at the current position in the editor.\n- `setFocus(): Promise<void>` - Sets the focus on the editor.\n- `setValue(text: string | null | undefined): Promise<void>` - **Deprecated**: Use `value` property instead.. ",
          "doc-url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-code-editor/",
          "attributes": [
            {
              "name": "language",
              "description": "The language for the editor.\nCurrently supported language: arcade, arcgis-sql-expression, json, css, html, javascript, typescript, and text.",
              "value": {
                "type": "string"
              }
            },
            {
              "name": "model-id",
              "description": "A unique identifier for the model.\nThe unique identifier is sometimes used by language defaults to store model metadata.\nFor example, with arcade, the model id is used to store the arcade profile and other metadata.\nThe unique identifier is especially useful when there are multiple editors on the same page.",
              "value": {
                "type": "string"
              }
            },
            {
              "name": "value",
              "description": "The initial value for the editor.\nThe value is the script, code, css, json, etc.",
              "default": "\"\"",
              "value": {
                "type": "string"
              }
            }
          ],
          "events": [
            {
              "name": "arcgisSelectionChange",
              "type": "{\n    selection: Selection;\n    model: ITextModel | null | undefined;\n}",
              "description": "Emitted when the selection has changed."
            },
            {
              "name": "arcgisValueChange",
              "type": "string",
              "description": "Emitted when the value has changed (script, code, css, json, etc.)"
            }
          ],
          "js": {
            "properties": [
              {
                "name": "editorInstance",
                "description": "The instance of the Monaco Editor after the component has been rendered.\nTo determine when a component is rendered, you can use componentOnReady() method.\nThe method returns a Promise that resolves after the component rendered for the first time.",
                "type": "IStandaloneCodeEditor"
              },
              {
                "name": "editorOptions",
                "description": "Options to update on the editor.\nFor example:\n```json\n{\n  \"fontSize\": 18\n}\n```\n\nTo get the full list of options set on the editor, use the editorInstance property and see Monaco Editor options documentation for more details.",
                "type": "(IEditorOptions & IGlobalEditorOptions)"
              },
              {
                "name": "language",
                "description": "The language for the editor.\nCurrently supported language: arcade, arcgis-sql-expression, json, css, html, javascript, typescript, and text.",
                "type": "string"
              },
              {
                "name": "modelId",
                "description": "A unique identifier for the model.\nThe unique identifier is sometimes used by language defaults to store model metadata.\nFor example, with arcade, the model id is used to store the arcade profile and other metadata.\nThe unique identifier is especially useful when there are multiple editors on the same page.",
                "type": "string"
              },
              {
                "name": "value",
                "description": "The initial value for the editor.\nThe value is the script, code, css, json, etc.",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "arcgisSelectionChange",
                "type": "{\n    selection: Selection;\n    model: ITextModel | null | undefined;\n}",
                "description": "Emitted when the selection has changed."
              },
              {
                "name": "arcgisValueChange",
                "type": "string",
                "description": "Emitted when the value has changed (script, code, css, json, etc.)"
              }
            ]
          }
        },
        {
          "name": "arcgis-sql-expression-editor",
          "description": "### Events\n- **arcgisScriptChange** - Emitted when the script string has changed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",
          "doc-url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-sql-expression-editor/",
          "attributes": [
            {
              "name": "hide-side-bar",
              "description": "If true, it will hide the side actions bar. The editor will be in a minimalistic UX.",
              "default": "false",
              "value": {
                "type": "boolean"
              }
            },
            {
              "name": "script",
              "description": "The sql expression script. Use this property to define or update the script.",
              "default": "\"\"",
              "value": {
                "type": "string"
              }
            }
          ],
          "events": [
            {
              "name": "arcgisScriptChange",
              "type": "string",
              "description": "Emitted when the script string has changed."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "hideSideBar",
                "description": "If true, it will hide the side actions bar. The editor will be in a minimalistic UX.",
                "type": "boolean"
              },
              {
                "name": "profile",
                "description": "The profile to use for the editor. The profile defines the variables and functions that are available to the editor.",
                "type": "IPredefinedProfile"
              },
              {
                "name": "script",
                "description": "The sql expression script. Use this property to define or update the script.",
                "type": "string"
              }
            ],
            "events": [
              {
                "name": "arcgisScriptChange",
                "type": "string",
                "description": "Emitted when the script string has changed."
              }
            ]
          }
        }
      ]
    },
    "css": {
      "properties": [],
      "pseudo-elements": []
    }
  }
}