@arcgis/coding-components 4.29.0-beta.47 → 4.29.0-beta.49

package/dist/components/arcgis-arcade-results.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ArcgisArcadeResults extends Components.ArcgisArcadeResults, HTMLElement {}
 export const ArcgisArcadeResults: {
-  prototype: ArcgisArcadeResults;
-  new (): ArcgisArcadeResults;
+    prototype: ArcgisArcadeResults;
+    new (): ArcgisArcadeResults;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/arcgis-arcade-suggestions.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ArcgisArcadeSuggestions extends Components.ArcgisArcadeSuggestions, HTMLElement {}
 export const ArcgisArcadeSuggestions: {
-  prototype: ArcgisArcadeSuggestions;
-  new (): ArcgisArcadeSuggestions;
+    prototype: ArcgisArcadeSuggestions;
+    new (): ArcgisArcadeSuggestions;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/arcgis-arcade-variables.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ArcgisArcadeVariables extends Components.ArcgisArcadeVariables, HTMLElement {}
 export const ArcgisArcadeVariables: {
-  prototype: ArcgisArcadeVariables;
-  new (): ArcgisArcadeVariables;
+    prototype: ArcgisArcadeVariables;
+    new (): ArcgisArcadeVariables;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/arcgis-code-editor.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ArcgisCodeEditor extends Components.ArcgisCodeEditor, HTMLElement {}
 export const ArcgisCodeEditor: {
-  prototype: ArcgisCodeEditor;
-  new (): ArcgisCodeEditor;
+    prototype: ArcgisCodeEditor;
+    new (): ArcgisCodeEditor;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/code-editor.js

@@ -7,272 +7,272 @@ const codeEditorCss = "@charset \"UTF-8\";.monaco-action-bar{white-space:nowrap;
 
 // Our default options for the Editor
 const EditorOptionsDefaults = {
-  autoIndent: "advanced",
-  automaticLayout: true,
-  bracketPairColorization: { enabled: true },
-  minimap: { enabled: false },
-  renderLineHighlight: "none",
-  suggest: {
-    snippetsPreventQuickSuggestions: false,
-    showWords: false
-  },
-  tabSize: 2,
-  useShadowDOM: true
+    autoIndent: "advanced",
+    automaticLayout: true,
+    bracketPairColorization: { enabled: true },
+    minimap: { enabled: false },
+    renderLineHighlight: "none",
+    suggest: {
+        snippetsPreventQuickSuggestions: false,
+        showWords: false
+    },
+    tabSize: 2,
+    useShadowDOM: true
 };
 const ArcgisCodeEditor = /*@__PURE__*/ proxyCustomElement(class ArcgisCodeEditor extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.valueChange = createEvent(this, "valueChange", 3);
-    this._componentReadyDefer = new p();
-    this._disposables = [];
-    this.value = undefined;
-    this.language = undefined;
-    this.modelId = "";
-  }
-  valuePropChange(newValue, oldValue) {
-    if (!this._editorInstance || newValue === oldValue) {
-      return;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.valueChange = createEvent(this, "valueChange", 3);
+        this._componentReadyDefer = new p();
+        this._disposables = [];
+        this.value = undefined;
+        this.language = undefined;
+        this.modelId = "";
     }
-    this._editorInstance.setValue(newValue ?? "");
-  }
-  languagePropChange(newValue, oldValue) {
-    if (!this._editorInstance || newValue === oldValue) {
-      return;
+    valuePropChange(newValue, oldValue) {
+        if (!this._editorInstance || newValue === oldValue) {
+            return;
+        }
+        this._editorInstance.setValue(newValue ?? "");
     }
-    this.updateModel();
-  }
-  modelIdPropChange(newValue, oldValue) {
-    if (!this._editorInstance || newValue === oldValue) {
-      return;
+    languagePropChange(newValue, oldValue) {
+        if (!this._editorInstance || newValue === oldValue) {
+            return;
+        }
+        this.updateModel();
     }
-    this.updateModel();
-  }
-  //#endregion
-  // #region Public methods API
-  /**
-   * Gets the current value in the editor.
-   * @returns {Promise<string>}
-   */
-  async getValue() {
-    await this._componentReadyDefer.promise;
-    return this._editorInstance?.getValue() ?? "";
-  }
-  /**
-   * Sets the new value in the editor. Use this method instead of setting the value
-   * on the model to preserve undo/redo stack.
-   * @param text
-   * @returns {Promise<void>}
-   */
-  async setValue(text) {
-    await this._componentReadyDefer.promise;
-    if (!this._editorInstance) {
-      return;
+    modelIdPropChange(newValue, oldValue) {
+        if (!this._editorInstance || newValue === oldValue) {
+            return;
+        }
+        this.updateModel();
     }
-    const model = this._editorInstance.getModel();
-    if (!model) {
-      return;
+    //#endregion
+    // #region Public methods API
+    /**
+     * Gets the current value in the editor.
+     * @returns {Promise<string>}
+     */
+    async getValue() {
+        await this._componentReadyDefer.promise;
+        return this._editorInstance?.getValue() ?? "";
     }
-    const range = model.getFullModelRange();
-    this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
-    this._editorInstance.pushUndoStop();
-  }
-  /**
-   * Inserts a text at the current position in the editor.
-   * @param {string} text - The string to insert
-   * @returns {Promise<void>}
-   */
-  async insertText(text) {
-    await this._componentReadyDefer.promise;
-    if (!this._editorInstance) {
-      return;
+    /**
+     * Sets the new value in the editor. Use this method instead of setting the value
+     * on the model to preserve undo/redo stack.
+     * @param text
+     * @returns {Promise<void>}
+     */
+    async setValue(text) {
+        await this._componentReadyDefer.promise;
+        if (!this._editorInstance) {
+            return;
+        }
+        const model = this._editorInstance.getModel();
+        if (!model) {
+            return;
+        }
+        const range = model.getFullModelRange();
+        this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
+        this._editorInstance.pushUndoStop();
     }
-    const model = this._editorInstance.getModel();
-    if (!model) {
-      return;
+    /**
+     * Inserts a text at the current position in the editor.
+     * @param {string} text - The string to insert
+     * @returns {Promise<void>}
+     */
+    async insertText(text) {
+        await this._componentReadyDefer.promise;
+        if (!this._editorInstance) {
+            return;
+        }
+        const model = this._editorInstance.getModel();
+        if (!model) {
+            return;
+        }
+        const range = this._editorInstance.getSelection() ?? new Range(1, 1, 1, 1);
+        this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
     }
-    const range = this._editorInstance.getSelection() ?? new Range(1, 1, 1, 1);
-    this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
-  }
-  /**
-   * Inserts a snippet at the current position in the editor.
-   * @param {string} text - The string snippet to insert
-   * @returns {Promise<void>}
-   */
-  async insertSnippet(text) {
-    await this._componentReadyDefer.promise;
-    if (!this._editorInstance) {
-      return;
+    /**
+     * Inserts a snippet at the current position in the editor.
+     * @param {string} text - The string snippet to insert
+     * @returns {Promise<void>}
+     */
+    async insertSnippet(text) {
+        await this._componentReadyDefer.promise;
+        if (!this._editorInstance) {
+            return;
+        }
+        const snippetController = this._editorInstance.getContribution("snippetController2");
+        snippetController.insert(text ?? "");
+        this._editorInstance.focus();
     }
-    const snippetController = this._editorInstance.getContribution("snippetController2");
-    snippetController.insert(text ?? "");
-    this._editorInstance.focus();
-  }
-  /**
-   * @internal
-   * Returns the editor instance.
-   * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
-   */
-  async getEditorInstance() {
-    await this._componentReadyDefer.promise;
-    return this._editorInstance;
-  }
-  /**
-   * Sets the focus on the editor.
-   * @returns {Promise<void>}
-   */
-  async setFocus() {
-    await this._componentReadyDefer.promise;
-    this._editorInstance?.focus();
-  }
-  //#endregion
-  //#region Listeners
-  //#endregion
-  // #region Component lifecycle events
-  componentWillLoad() {
-    // Define the Monaco environemt.
-    // Can only do this when assets path has been defined.
-    // If we were placing this logic in connectedCallback, assets path would have not yet been defined.
-    // setupMonacoEnvironment will not redefine if already defined.
-    setupMonacoEnvironment(getAssetPath("./assets"));
-  }
-  componentDidLoad() {
-    // Create and attach and instance of Monaco Editor to the inner element
-    editor.getModel(this.getUri())?.dispose();
-    // Create the model without the value.
-    // Since it's not yet attached to the editor the diagnostic service will not process it.
-    // We will set the value after the editor has been created to trigger the diagnostic again.
-    const model = editor.createModel("", this.language, this.getUri());
-    // Create the editor for the host element.
-    // This will not trigger a diagnostic.
-    this._editorInstance = editor.create(this._hostElt, {
-      model,
-      fixedOverflowWidgets: true,
-      scrollBeyondLastLine: false
-    });
-    this._disposables.push(this._editorInstance);
-    // Set the value now to trigger a diagnostic again
-    model.setValue(this.value ?? "");
-    // Now we can set are component as ready
-    this._componentReadyDefer.resolve();
-    this._editorInstance.updateOptions(EditorOptionsDefaults);
-    // Listen to the Monaco Editor content change event and propagate
-    this._editorInstance.onDidChangeModelContent(() => {
-      const script = this._editorInstance?.getValue() ?? "";
-      this.valueChange.emit(script);
-    });
-    // Detect if the host element or its ancestors got a theme attribute mutation
-    this._themeObserver = T(this._hostElt, ["class"], () => this.updateTheme());
-    // Update the theme of the Monaco Editor
-    this.updateTheme();
-    // Creates a resize observer to re-layout the editor on size changing
-    const resizeObserver = new ResizeObserver(() => this._editorInstance?.layout());
-    resizeObserver.observe(this._hostElt);
-    // Add common actions to the Monaco Editor's context menu and command palette
-    this.addCommonEditorActions();
-  }
-  disconnectedCallback() {
-    while (this._disposables.length) {
-      this._disposables.pop()?.dispose();
+    /**
+     * @internal
+     * Returns the editor instance.
+     * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
+     */
+    async getEditorInstance() {
+        await this._componentReadyDefer.promise;
+        return this._editorInstance;
     }
-    this._themeObserver?.disconnect();
-  }
-  //#endregion
-  // #region Private methods API
-  updateModel() {
-    if (!this._editorInstance) {
-      return;
+    /**
+     * Sets the focus on the editor.
+     * @returns {Promise<void>}
+     */
+    async setFocus() {
+        await this._componentReadyDefer.promise;
+        this._editorInstance?.focus();
     }
-    this._editorInstance.getModel()?.dispose();
-    this._editorInstance.setModel(editor.createModel(this.value ?? "", this.language, this.getUri()));
-  }
-  getUri() {
-    return this.modelId ? Uri.parse(this.modelId) : Uri.parse("");
-  }
-  updateTheme() {
-    // This is called the first time and subsequently by the Mutation Observer
-    // Figure out the theme by walking the ancestor path.
-    // If no theme is found then default to light.
-    const theme = P(this._hostElt) === "light" ? "vs" : "vs-dark";
-    if (theme === this._currentTheme) {
-      return;
+    //#endregion
+    //#region Listeners
+    //#endregion
+    // #region Component lifecycle events
+    componentWillLoad() {
+        // Define the Monaco environemt.
+        // Can only do this when assets path has been defined.
+        // If we were placing this logic in connectedCallback, assets path would have not yet been defined.
+        // setupMonacoEnvironment will not redefine if already defined.
+        setupMonacoEnvironment(getAssetPath("./assets"));
     }
-    this._currentTheme = theme;
-    editor.setTheme(theme);
-  }
-  //#endregion
-  // #region Private methods API
-  addCommonEditorActions() {
-    // Copy zoom in / out command functions
-    const zoomInFn = this._editorInstance?.getAction("editor.action.fontZoomIn");
-    const zoomOutFn = this._editorInstance?.getAction("editor.action.fontZoomOut");
-    // Override the two existing commands so that they appear in the context menu
-    this._editorInstance?.addAction({
-      // Use an existing action's ID to override it
-      id: "editor.action.fontZoomIn",
-      // A label of the action that will be presented to the user.
-      label: "Editor Font Zoom In",
-      // An optional array of keybindings for the action.
-      keybindings: [KeyMod.CtrlCmd | KeyCode.Equal],
-      contextMenuGroupId: "zooming",
-      contextMenuOrder: 1,
-      // Method that will be executed when the action is triggered.
-      // @param editor The editor instance is passed in as a convenience
-      run: () => {
-        zoomInFn?.run();
-      }
-    });
-    this._editorInstance?.addAction({
-      id: "editor.action.fontZoomOut",
-      label: "Editor Font Zoom Out",
-      keybindings: [KeyMod.CtrlCmd | KeyCode.Minus],
-      contextMenuGroupId: "zooming",
-      contextMenuOrder: 2,
-      run: () => {
-        zoomOutFn?.run();
-      }
-    });
-  }
-  //#endregion
-  // #region Rendering
-  render() {
-    return h(Host, null);
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElt() { return this; }
-  static get watchers() { return {
-    "value": ["valuePropChange"],
-    "language": ["languagePropChange"],
-    "modelId": ["modelIdPropChange"]
-  }; }
-  static get style() { return codeEditorCss; }
+    componentDidLoad() {
+        // Create and attach and instance of Monaco Editor to the inner element
+        editor.getModel(this.getUri())?.dispose();
+        // Create the model without the value.
+        // Since it's not yet attached to the editor the diagnostic service will not process it.
+        // We will set the value after the editor has been created to trigger the diagnostic again.
+        const model = editor.createModel("", this.language, this.getUri());
+        // Create the editor for the host element.
+        // This will not trigger a diagnostic.
+        this._editorInstance = editor.create(this._hostElt, {
+            model,
+            fixedOverflowWidgets: true,
+            scrollBeyondLastLine: false
+        });
+        this._disposables.push(this._editorInstance);
+        // Set the value now to trigger a diagnostic again
+        model.setValue(this.value ?? "");
+        // Now we can set are component as ready
+        this._componentReadyDefer.resolve();
+        this._editorInstance.updateOptions(EditorOptionsDefaults);
+        // Listen to the Monaco Editor content change event and propagate
+        this._editorInstance.onDidChangeModelContent(() => {
+            const script = this._editorInstance?.getValue() ?? "";
+            this.valueChange.emit(script);
+        });
+        // Detect if the host element or its ancestors got a theme attribute mutation
+        this._themeObserver = T(this._hostElt, ["class"], () => this.updateTheme());
+        // Update the theme of the Monaco Editor
+        this.updateTheme();
+        // Creates a resize observer to re-layout the editor on size changing
+        const resizeObserver = new ResizeObserver(() => this._editorInstance?.layout());
+        resizeObserver.observe(this._hostElt);
+        // Add common actions to the Monaco Editor's context menu and command palette
+        this.addCommonEditorActions();
+    }
+    disconnectedCallback() {
+        while (this._disposables.length) {
+            this._disposables.pop()?.dispose();
+        }
+        this._themeObserver?.disconnect();
+    }
+    //#endregion
+    // #region Private methods API
+    updateModel() {
+        if (!this._editorInstance) {
+            return;
+        }
+        this._editorInstance.getModel()?.dispose();
+        this._editorInstance.setModel(editor.createModel(this.value ?? "", this.language, this.getUri()));
+    }
+    getUri() {
+        return this.modelId ? Uri.parse(this.modelId) : Uri.parse("");
+    }
+    updateTheme() {
+        // This is called the first time and subsequently by the Mutation Observer
+        // Figure out the theme by walking the ancestor path.
+        // If no theme is found then default to light.
+        const theme = P(this._hostElt) === "light" ? "vs" : "vs-dark";
+        if (theme === this._currentTheme) {
+            return;
+        }
+        this._currentTheme = theme;
+        editor.setTheme(theme);
+    }
+    //#endregion
+    // #region Private methods API
+    addCommonEditorActions() {
+        // Copy zoom in / out command functions
+        const zoomInFn = this._editorInstance?.getAction("editor.action.fontZoomIn");
+        const zoomOutFn = this._editorInstance?.getAction("editor.action.fontZoomOut");
+        // Override the two existing commands so that they appear in the context menu
+        this._editorInstance?.addAction({
+            // Use an existing action's ID to override it
+            id: "editor.action.fontZoomIn",
+            // A label of the action that will be presented to the user.
+            label: "Editor Font Zoom In",
+            // An optional array of keybindings for the action.
+            keybindings: [KeyMod.CtrlCmd | KeyCode.Equal],
+            contextMenuGroupId: "zooming",
+            contextMenuOrder: 1,
+            // Method that will be executed when the action is triggered.
+            // @param editor The editor instance is passed in as a convenience
+            run: () => {
+                zoomInFn?.run();
+            }
+        });
+        this._editorInstance?.addAction({
+            id: "editor.action.fontZoomOut",
+            label: "Editor Font Zoom Out",
+            keybindings: [KeyMod.CtrlCmd | KeyCode.Minus],
+            contextMenuGroupId: "zooming",
+            contextMenuOrder: 2,
+            run: () => {
+                zoomOutFn?.run();
+            }
+        });
+    }
+    //#endregion
+    // #region Rendering
+    render() {
+        return h(Host, null);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElt() { return this; }
+    static get watchers() { return {
+        "value": ["valuePropChange"],
+        "language": ["languagePropChange"],
+        "modelId": ["modelIdPropChange"]
+    }; }
+    static get style() { return codeEditorCss; }
 }, [0, "arcgis-code-editor", {
-    "value": [1],
-    "language": [1],
-    "modelId": [1, "model-id"],
-    "getValue": [64],
-    "setValue": [64],
-    "insertText": [64],
-    "insertSnippet": [64],
-    "getEditorInstance": [64],
-    "setFocus": [64]
-  }, undefined, {
-    "value": ["valuePropChange"],
-    "language": ["languagePropChange"],
-    "modelId": ["modelIdPropChange"]
-  }]);
+        "value": [1],
+        "language": [1],
+        "modelId": [1, "model-id"],
+        "getValue": [64],
+        "setValue": [64],
+        "insertText": [64],
+        "insertSnippet": [64],
+        "getEditorInstance": [64],
+        "setFocus": [64]
+    }, undefined, {
+        "value": ["valuePropChange"],
+        "language": ["languagePropChange"],
+        "modelId": ["modelIdPropChange"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["arcgis-code-editor"];
-  components.forEach(tagName => { switch (tagName) {
-    case "arcgis-code-editor":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ArcgisCodeEditor);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["arcgis-code-editor"];
+    components.forEach(tagName => { switch (tagName) {
+        case "arcgis-code-editor":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ArcgisCodeEditor);
+            }
+            break;
+    } });
 }
 defineCustomElement();