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

package/dist/components/arcade-api.js

@@ -19,177 +19,177 @@ import '@esri/calcite-components/dist/components/calcite-list.js';
 const arcadeApiCss = ":host{background-color:var(--calcite-ui-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-ui-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}:host calcite-block p:first-of-type{margin-top:0}:host calcite-block code{font-family:var(--calcite-code-family)}:host calcite-block pre{direction:ltr;overflow-x:auto;background-color:var(--calcite-ui-foreground-2);padding:var(--calcite-spacing-half)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}";
 
 const ArcgisArcadeApi = /*@__PURE__*/ proxyCustomElement(class ArcgisArcadeApi extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.close = createEvent(this, "close", 3);
-    this.itemSelected = createEvent(this, "itemSelected", 3);
-    this._emitItemSelected = (e) => {
-      // @ts-expect-error
-      const item = e.target?.["data-item"];
-      if (!item) {
-        return;
-      }
-      const keyEvent = e;
-      if (!keyEvent.key || keyEvent.key === "Enter") {
-        e.preventDefault();
-        this.itemSelected.emit(item.completion.insertText);
-      }
-    };
-    this._emitClose = () => this.close.emit();
-    this._emitItemSelectedAndClose = (e) => {
-      if (!e.target) {
-        return;
-      }
-      const keyEvent = e;
-      if (!keyEvent.key || keyEvent.key === "Enter") {
-        e.preventDefault();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.close = createEvent(this, "close", 3);
+        this.itemSelected = createEvent(this, "itemSelected", 3);
+        this._emitItemSelected = (e) => {
+            // @ts-expect-error
+            const item = e.target?.["data-item"];
+            if (!item) {
+                return;
+            }
+            const keyEvent = e;
+            if (!keyEvent.key || keyEvent.key === "Enter") {
+                e.preventDefault();
+                this.itemSelected.emit(item.completion.insertText);
+            }
+        };
+        this._emitClose = () => this.close.emit();
+        this._emitItemSelectedAndClose = (e) => {
+            if (!e.target) {
+                return;
+            }
+            const keyEvent = e;
+            if (!keyEvent.key || keyEvent.key === "Enter") {
+                e.preventDefault();
+                // @ts-expect-error
+                this.itemSelected.emit(e.target["data-item"].completion.insertText);
+            }
+        };
+        this._selectItem = (e) => {
+            if (!e.target) {
+                return;
+            }
+            e.stopPropagation();
+            // @ts-expect-error
+            this._selectedApiItem = e.target["data-item"];
+        };
+        this._unselectItem = async () => {
+            this._selectedApiItem = undefined;
+        };
         // @ts-expect-error
-        this.itemSelected.emit(e.target["data-item"].completion.insertText);
-      }
-    };
-    this._selectItem = (e) => {
-      if (!e.target) {
-        return;
-      }
-      e.stopPropagation();
-      // @ts-expect-error
-      this._selectedApiItem = e.target["data-item"];
-    };
-    this._unselectItem = async () => {
-      this._selectedApiItem = undefined;
-    };
-    // @ts-expect-error
-    this._updateFilterValue = (e) => (this._filterValue = e.target?.["value"] ?? "");
-    this._lang = "";
-    this._t9nLocale = "";
-    this._t9nStrings = undefined;
-    this._selectedApiItem = undefined;
-    this._filterValue = "";
-    this._colorizeStyle = "";
-    this._preparingApi = false;
-    this._apiLibrary = undefined;
-    this.hideDocumentationActions = false;
-    this.modelId = undefined;
-  }
-  //#endregion
-  // #region Component lifecycle events
-  async componentWillLoad() {
-    this._colorizeStyle = generateColorizeStyles();
-    this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
-    await F(this, getAssetPath("./assets"));
-    arcadeDefaults.onModelContextDidChange((key) => {
-      if (!this.modelId || key !== Uri.parse(this.modelId).toString()) {
-        return;
-      }
-      this._updateApiLibrary();
-    });
-    this._updateApiLibrary();
-  }
-  disconnectedCallback() {
-    U(this);
-    this._flowObserver?.disconnect();
-    this._themeChangedListner?.dispose();
-  }
-  // #endregion
-  //#region Private Methods
-  async _updateApiLibrary() {
-    if (!this.modelId) {
-      return;
+        this._updateFilterValue = (e) => (this._filterValue = e.target?.value ?? "");
+        this._lang = "";
+        this._t9nLocale = "";
+        this._t9nStrings = undefined;
+        this._selectedApiItem = undefined;
+        this._filterValue = "";
+        this._colorizeStyle = "";
+        this._preparingApi = false;
+        this._apiLibrary = undefined;
+        this.hideDocumentationActions = false;
+        this.modelId = undefined;
     }
-    this._preparingApi = true;
-    try {
-      const arcadeWorker = await getArcadeWorker(Uri.parse(this.modelId));
-      if (!arcadeWorker) {
-        // Something went wrong
-        throw new Error("Undefined worker");
-      }
-      // Fetch the api definitions from the arcade LS worker.
-      const context = arcadeDefaults.getApiContextForModel(this.modelId);
-      this._apiLibrary = await arcadeWorker.getApiLibrary(context);
+    //#endregion
+    // #region Component lifecycle events
+    async componentWillLoad() {
+        this._colorizeStyle = generateColorizeStyles();
+        this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
+        await F(this, getAssetPath("./assets"));
+        arcadeDefaults.onModelContextDidChange((key) => {
+            if (!this.modelId || key !== Uri.parse(this.modelId).toString()) {
+                return;
+            }
+            this._updateApiLibrary();
+        });
+        this._updateApiLibrary();
     }
-    catch (e) {
-      console.error("Could not load api library", e);
-      console.error(e.stack);
-      this._apiLibrary = undefined;
+    disconnectedCallback() {
+        U(this);
+        this._flowObserver?.disconnect();
+        this._themeChangedListner?.dispose();
     }
-    finally {
-      this._preparingApi = false;
+    // #endregion
+    //#region Private Methods
+    async _updateApiLibrary() {
+        if (!this.modelId) {
+            return;
+        }
+        this._preparingApi = true;
+        try {
+            const arcadeWorker = await getArcadeWorker(Uri.parse(this.modelId));
+            if (!arcadeWorker) {
+                // Something went wrong
+                throw new Error("Undefined worker");
+            }
+            // Fetch the api definitions from the arcade LS worker.
+            const context = arcadeDefaults.getApiContextForModel(this.modelId);
+            this._apiLibrary = await arcadeWorker.getApiLibrary(context);
+        }
+        catch (e) {
+            console.error("Could not load api library", e);
+            console.error(e.stack);
+            this._apiLibrary = undefined;
+        }
+        finally {
+            this._preparingApi = false;
+        }
     }
-  }
-  flowFocusHandler(ref) {
-    // When a flow is removed from the document then a null ref will be passed in
-    if (!ref) {
-      this._flowObserver?.disconnect();
-      this._flowObserver = undefined;
-      return;
+    flowFocusHandler(ref) {
+        // When a flow is removed from the document then a null ref will be passed in
+        if (!ref) {
+            this._flowObserver?.disconnect();
+            this._flowObserver = undefined;
+            return;
+        }
+        if (this._flowObserver) {
+            return;
+        }
+        // Observer panel added/removed and also observe the flow id
+        // When switching between flow the same reference is reused
+        this._flowObserver = new MutationObserver(() => {
+            // Get the last panel and try to set focus on the input element
+            O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+        });
+        this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
-    if (this._flowObserver) {
-      return;
+    //#endregion
+    //#region Renderers
+    renderApiCategory(category) {
+        const filteredApiItems = filterCollection(category.items, "name", this._filterValue);
+        if (!filteredApiItems.length) {
+            return null;
+        }
+        return (h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (h("calcite-list-item", { label: q(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
     }
-    // Observer panel added/removed and also observe the flow id
-    // When switching between flow the same reference is reused
-    this._flowObserver = new MutationObserver(() => {
-      // Get the last panel and try to set focus on the input element
-      O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
-    });
-    this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
-  }
-  //#endregion
-  //#region Renderers
-  renderApiCategory(category) {
-    const filteredApiItems = filterCollection(category.items, "name", this._filterValue);
-    if (!filteredApiItems.length) {
-      return null;
+    renderApiItemFlowItem() {
+        const apiItem = this._selectedApiItem;
+        if (!apiItem) {
+            return null;
+        }
+        return (h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this._t9nStrings?.moreinformation)), h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => e?.setFocus() }, this._t9nStrings?.insert ?? "Insert"), h("calcite-block", { open: true, heading: q(apiItem.completion.detail) }, h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (h("div", { ref: (e) => {
+                if (!e) {
+                    return;
+                }
+                e.innerHTML = convertMarkdownString(apiItem.examples);
+                colorizedAllCodeElements(e);
+            } })) : null)));
     }
-    return (h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (h("calcite-list-item", { label: q(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
-  }
-  renderApiItemFlowItem() {
-    const apiItem = this._selectedApiItem;
-    if (!apiItem) {
-      return null;
+    render() {
+        const categories = (this._apiLibrary ?? []).map((apiCategory) => this.renderApiCategory(apiCategory));
+        const empty = categories.every((g) => !g);
+        return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), this._preparingApi ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, empty ? h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
     }
-    return (h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this._t9nStrings?.moreinformation)), h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => e?.setFocus() }, this._t9nStrings?.insert ?? "Insert"), h("calcite-block", { open: true, heading: q(apiItem.completion.detail) }, h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (h("div", { ref: (e) => {
-        if (!e) {
-          return;
-        }
-        e.innerHTML = convertMarkdownString(apiItem.examples);
-        colorizedAllCodeElements(e);
-      } })) : null)));
-  }
-  render() {
-    const categories = (this._apiLibrary ?? []).map((apiCategory) => this.renderApiCategory(apiCategory));
-    const empty = categories.every((g) => !g);
-    return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), this._preparingApi ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, empty ? h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElement() { return this; }
-  static get style() { return arcadeApiCss; }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElement() { return this; }
+    static get style() { return arcadeApiCss; }
 }, [1, "arcgis-arcade-api", {
-    "hideDocumentationActions": [4, "hide-documentation-actions"],
-    "modelId": [1, "model-id"],
-    "_lang": [32],
-    "_t9nLocale": [32],
-    "_t9nStrings": [32],
-    "_selectedApiItem": [32],
-    "_filterValue": [32],
-    "_colorizeStyle": [32],
-    "_preparingApi": [32],
-    "_apiLibrary": [32]
-  }]);
+        "hideDocumentationActions": [4, "hide-documentation-actions"],
+        "modelId": [1, "model-id"],
+        "_lang": [32],
+        "_t9nLocale": [32],
+        "_t9nStrings": [32],
+        "_selectedApiItem": [32],
+        "_filterValue": [32],
+        "_colorizeStyle": [32],
+        "_preparingApi": [32],
+        "_apiLibrary": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["arcgis-arcade-api"];
-  components.forEach(tagName => { switch (tagName) {
-    case "arcgis-arcade-api":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ArcgisArcadeApi);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["arcgis-arcade-api"];
+    components.forEach(tagName => { switch (tagName) {
+        case "arcgis-arcade-api":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ArcgisArcadeApi);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/arcade-contribution.js

@@ -4,57 +4,57 @@ import { c as importRequest } from './fields.js';
 import { X, V } from './index2.js';
 
 function isMonacoEnvironmentSetup() {
-  return !!self.MonacoEnvironment?.getWorkerUrl;
+    return !!globalThis.MonacoEnvironment?.getWorkerUrl;
 }
 const additionalLanguageWorkersMap = new Map();
 function getAssetsPath() {
-  return self.MonacoEnvironment?.assetsPath;
+    return globalThis.MonacoEnvironment?.assetsPath;
 }
 function setupMonacoEnvironment(assetsPath) {
-  //
-  // Check if the worker loading logic has already been defined.
-  if (isMonacoEnvironmentSetup()) {
-    return;
-  }
-  // Since we are using workers, monaco needs to find them.
-  // Using the global MonacoEnvironment.
-  self.MonacoEnvironment = {
-    assetsPath,
-    getWorker: async (_, languageId) => {
-      // Manufacture the url for the web worker
-      let url = additionalLanguageWorkersMap.get(languageId) ?? `${assetsPath}/code-editor/editor.worker.js`;
-      switch (languageId) {
-        case "json":
-          url = `${assetsPath}/code-editor/json.worker.js`;
-          break;
-        case "css":
-          url = `${assetsPath}/code-editor/css.worker.js`;
-          break;
-        case "html":
-          url = `${assetsPath}/code-editor/html.worker.js`;
-          break;
-        case "typescript":
-        case "javascript":
-          url = `${assetsPath}/code-editor/ts.worker.js`;
-          break;
-        case "arcade":
-          url = `${assetsPath}/code-editor/arcade.worker.js`;
-          break;
-      }
-      // If we have a relative path or we are on same orgin, we can use the default js implementation
-      if (!X(url) || V(url, location.href, true)) {
-        return new Worker(url, { name: languageId });
-      }
-      // For cross orgin, we will load the worker code as a string and manufacture a blob
-      const esriRequest = await importRequest();
-      const response = await esriRequest(url, {
-        responseType: "text"
-      });
-      return new Worker(URL.createObjectURL(new Blob([response.data], {
-        type: "text/javascript"
-      })));
+    //
+    // Check if the worker loading logic has already been defined.
+    if (isMonacoEnvironmentSetup()) {
+        return;
     }
-  };
+    // Since we are using workers, monaco needs to find them.
+    // Using the global MonacoEnvironment.
+    globalThis.MonacoEnvironment = {
+        assetsPath,
+        getWorker: async (_, languageId) => {
+            // Manufacture the url for the web worker
+            let url = additionalLanguageWorkersMap.get(languageId) ?? `${assetsPath}/code-editor/editor.worker.js`;
+            switch (languageId) {
+                case "json":
+                    url = `${assetsPath}/code-editor/json.worker.js`;
+                    break;
+                case "css":
+                    url = `${assetsPath}/code-editor/css.worker.js`;
+                    break;
+                case "html":
+                    url = `${assetsPath}/code-editor/html.worker.js`;
+                    break;
+                case "typescript":
+                case "javascript":
+                    url = `${assetsPath}/code-editor/ts.worker.js`;
+                    break;
+                case "arcade":
+                    url = `${assetsPath}/code-editor/arcade.worker.js`;
+                    break;
+            }
+            // If we have a relative path or we are on same orgin, we can use the default js implementation
+            if (!X(url) || V(url, globalThis.location.href, true)) {
+                return new Worker(url, { name: languageId });
+            }
+            // For cross orgin, we will load the worker code as a string and manufacture a blob
+            const esriRequest = await importRequest();
+            const response = await esriRequest(url, {
+                responseType: "text"
+            });
+            return new Worker(URL.createObjectURL(new Blob([response.data], {
+                type: "text/javascript"
+            })));
+        }
+    };
 }
 
 /**
@@ -69,8 +69,8 @@ function setupMonacoEnvironment(assetsPath) {
  * ```
  */
 async function getArcadeDiagnosticService() {
-  const mode = await getMode();
-  return mode.getArcadeDiagnosticService();
+    const mode = await getMode();
+    return mode.getArcadeDiagnosticService();
 }
 /**
  * Returns the arcade worker for the model.
@@ -81,31 +81,31 @@ async function getArcadeDiagnosticService() {
  * @returns arcade worker
  */
 async function getArcadeWorker(uri) {
-  const mode = await getMode();
-  return mode.getArcadeWorker(uri);
+    const mode = await getMode();
+    return mode.getArcadeWorker(uri);
 }
 /**
  * Request the arcade mode
  * @returns mode for arcade
  */
 function getMode() {
-  return import('./arcade-mode.js');
+    return import('./arcade-mode.js');
 }
 // Register the language in Monaco
 languages.register({
-  id: arcadeDefaults.languageId,
-  aliases: ["Arcade", "arcade"],
-  extensions: [".arc"],
-  mimetypes: ["application/arcade"]
+    id: arcadeDefaults.languageId,
+    aliases: ["Arcade", "arcade"],
+    extensions: [".arc"],
+    mimetypes: ["application/arcade"]
 });
 // An event emitted when a language is first time needed
 languages.onLanguage(arcadeDefaults.languageId, async () => {
-  // Setup the assets path on the arcadeDefaults
-  arcadeDefaults.setLanguageOptions({ assetsPath: `${getAssetsPath() ?? "."}/arcade-language` });
-  // Async import the language mode
-  const mode = await getMode();
-  // Setup the language mode
-  mode.setupMode(arcadeDefaults);
+    // Setup the assets path on the arcadeDefaults
+    arcadeDefaults.setLanguageOptions({ assetsPath: `${getAssetsPath() ?? "."}/arcade-language` });
+    // Async import the language mode
+    const mode = await getMode();
+    // Setup the language mode
+    mode.setupMode(arcadeDefaults);
 });
 
 export { getArcadeDiagnosticService as a, getArcadeWorker as g, setupMonacoEnvironment as s };