@esri/solutions-components 0.7.3 → 0.7.4

package/dist/components/instant-apps-language-translator2.js

@@ -0,0 +1,412 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getMessages, a as generateUIData, s as store, E as EIcons, b as getLocales, l as languageTranslatorState, c as getUIDataKeys } from './utils4.js';
+import { l as loadModules } from './loadModules2.js';
+import { c as getComponentClosestLanguage } from './locale3.js';
+import { d as defineCustomElement$g } from './action.js';
+import { d as defineCustomElement$f } from './button.js';
+import { d as defineCustomElement$e } from './icon.js';
+import { d as defineCustomElement$d } from './input.js';
+import { d as defineCustomElement$c } from './label2.js';
+import { d as defineCustomElement$b } from './loader.js';
+import { d as defineCustomElement$a } from './modal.js';
+import { d as defineCustomElement$9 } from './notice.js';
+import { d as defineCustomElement$8 } from './option.js';
+import { d as defineCustomElement$7 } from './popover.js';
+import { d as defineCustomElement$6 } from './progress.js';
+import { d as defineCustomElement$5 } from './scrim.js';
+import { d as defineCustomElement$4 } from './select.js';
+import { d as defineCustomElement$3 } from './instant-apps-ckeditor-wrapper2.js';
+import { d as defineCustomElement$2 } from './instant-apps-language-translator-item2.js';
+import { d as defineCustomElement$1 } from './instant-apps-language-translator-search2.js';
+
+async function fetchResourceData(request, resource) {
+  var _a, _b, _c;
+  try {
+    const token = (_c = (_b = (_a = resource === null || resource === void 0 ? void 0 : resource.portalItem) === null || _a === void 0 ? void 0 : _a.portal) === null || _b === void 0 ? void 0 : _b['credential']) === null || _c === void 0 ? void 0 : _c['token'];
+    const reqConfig = { responseType: 'json' };
+    if (token)
+      reqConfig.query = { token };
+    var cacheBuster = 'cacheBuster=' + Date.now();
+    const url = `${resource.url}?${cacheBuster}`;
+    const reqRes = await request(url, reqConfig);
+    const t9nData = reqRes.data;
+    return Promise.resolve(t9nData);
+  }
+  catch (err) {
+    console.error('Unable to get resource t9n data.');
+  }
+}
+async function getPortalItemResource(portalItem) {
+  if (!portalItem)
+    return null;
+  const [PortalItemResource] = await loadModules(['esri/portal/PortalItemResource']);
+  const existingResourcesRes = await portalItem.fetchResources();
+  const path = `t9n/${portalItem === null || portalItem === void 0 ? void 0 : portalItem.id}.json`;
+  const resource = new PortalItemResource({ path, portalItem });
+  const existingResourceArr = existingResourcesRes.resources.filter(resourceItem => resourceItem.resource.path === path);
+  if (existingResourceArr.length === 0) {
+    const type = 'application/json';
+    const content = new Blob([JSON.stringify({})], { type });
+    try {
+      await portalItem.addResource(resource, content);
+      const existingResourcesRes = await portalItem.fetchResources();
+      const path = `t9n/${portalItem === null || portalItem === void 0 ? void 0 : portalItem.id}.json`;
+      const existingResourceArr = existingResourcesRes.resources.filter(resourceItem => resourceItem.resource.path === path);
+      const existingResource = existingResourceArr[0].resource;
+      return Promise.resolve(existingResource);
+    }
+    catch (err) {
+      console.error('ERROR: ', err);
+      return Promise.reject(null);
+    }
+  }
+  else {
+    const existingResource = existingResourceArr[0].resource;
+    return Promise.resolve(existingResource);
+  }
+}
+
+const instantAppsLanguageTranslatorCss = ".sc-instant-apps-language-translator-h{display:block}.sc-instant-apps-language-translator-h calcite-modal.sc-instant-apps-language-translator{--calcite-modal-content-padding:0}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header.sc-instant-apps-language-translator{display:flex;justify-content:space-between;width:100%}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header-text.sc-instant-apps-language-translator{font-size:18px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__saving-indicator.sc-instant-apps-language-translator{display:flex;align-items:center;font-size:14.5px;color:var(--calcite-ui-brand)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__writing-icon.sc-instant-apps-language-translator{display:flex;justify-content:center;align-items:center;margin-right:5px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__close-button.sc-instant-apps-language-translator{width:175px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__header-tip.sc-instant-apps-language-translator{padding:20px;max-width:45vw}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar.sc-instant-apps-language-translator{display:flex;width:100%;position:sticky;top:0;background:var(--calcite-ui-foreground-1);z-index:1}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar.sc-instant-apps-language-translator calcite-label.sc-instant-apps-language-translator{--calcite-label-margin-bottom:0;font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator{box-sizing:border-box;display:flex;align-items:center;width:50%;padding:0.5%}.sc-instant-apps-language-translator-h .instant-apps-language-translator__user-lang-text.sc-instant-apps-language-translator{font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator:first-child{display:flex;justify-content:space-between}.sc-instant-apps-language-translator-h .instant-apps-language-translator__top-bar-section.sc-instant-apps-language-translator:nth-child(2) calcite-select.sc-instant-apps-language-translator{width:255px}.sc-instant-apps-language-translator-h .instant-apps-language-translator__collapse-search-container.sc-instant-apps-language-translator{display:flex;justify-content:space-between}.sc-instant-apps-language-translator-h .instant-apps-language-translator__collapse-search-container.sc-instant-apps-language-translator calcite-input.sc-instant-apps-language-translator{width:300px;margin-left:30px}.ck.ck-reset.ck-editor.ck-rounded-corners.sc-instant-apps-language-translator{margin-top:10px !important;margin-left:55px !important}.ck-editor__editable.sc-instant-apps-language-translator{height:70px !important;font-size:0.875rem !important;line-height:1.375 !important}.ck.ck-editor__editable_inline.sc-instant-apps-language-translator>.sc-instant-apps-language-translator:first-child,.ck.ck-editor__editable_inline.sc-instant-apps-language-translator>.sc-instant-apps-language-translator:last-child{--ck-spacing-large:0.5rem !important}";
+
+const BASE = 'instant-apps-language-translator';
+const CSS = {
+    BASE,
+    header: `${BASE}__header`,
+    headerText: `${BASE}__header-text`,
+    savingIndicator: `${BASE}__saving-indicator`,
+    closeButton: `${BASE}__close-button`,
+    headerTip: `${BASE}__header-tip`,
+    topBar: `${BASE}__top-bar`,
+    topBarSection: `${BASE}__top-bar-section`,
+    collapseSearchContainer: `${BASE}__collapse-search-container`,
+    userLangText: `${BASE}__user-lang-text`,
+    lastItem: `${BASE}--last-item`,
+    writingIcon: `${BASE}__writing-icon`,
+};
+const InstantAppsLanguageTranslator = /*@__PURE__*/ proxyCustomElement(class InstantAppsLanguageTranslator extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.translatorDataUpdated = createEvent(this, "translatorDataUpdated", 7);
+        this.portalItem = undefined;
+        this.appSettings = undefined;
+        this.locales = undefined;
+        this.open = false;
+        this.userLocaleInputOnChangeCallback = undefined;
+        this.translatedLocaleInputOnChangeCallback = undefined;
+        this.saving = false;
+        this.messages = undefined;
+        this.isCollapse = true;
+    }
+    handleT9nItemUpdate() {
+        this.translatorDataUpdated.emit();
+    }
+    handleLocaleChange() {
+        this.initUIData();
+        this.initSelectLanguage();
+    }
+    handleAppSettings() {
+        this.initUIData();
+        this.initSelectLanguage();
+    }
+    async componentDidLoad() {
+        this.initialize();
+    }
+    async initialize() {
+        const [intl, request] = await loadModules(['esri/intl', 'esri/request']);
+        this.intl = intl;
+        this.request = request;
+        await this.initMessages();
+        this.initUIData();
+        this.initPortalItemResourceT9nData();
+        this.initSelectLanguage();
+    }
+    // Init t9n files
+    async initMessages() {
+        try {
+            const { el } = this;
+            const messages = await getMessages(el);
+            this.messages = messages;
+            return Promise.resolve();
+        }
+        catch (_a) {
+            return Promise.reject();
+        }
+    }
+    initUIData() {
+        // Initialize store with UI Data (for translator-item rendering)
+        const { appSettings, locales } = this;
+        const uiData = generateUIData(appSettings, locales);
+        store.set('uiData', uiData);
+    }
+    // Initialize selected language
+    initSelectLanguage() {
+        var _a, _b;
+        if (!this.intl)
+            return;
+        const { locales } = this;
+        const initialLanguage = (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[0]) === null || _a === void 0 ? void 0 : _a.locale) !== null && _b !== void 0 ? _b : this.intl.getLocale();
+        const currentLanguage = store.get('currentLanguage');
+        const reselectLanguage = this.locales.filter(locale => locale.locale === currentLanguage).length === 0;
+        if (reselectLanguage) {
+            store.set('currentLanguage', initialLanguage);
+        }
+    }
+    // Fetch portal item resource associated with portal item. Fetch and store t9n data
+    async initPortalItemResourceT9nData() {
+        try {
+            const portalItemResource = (await getPortalItemResource(this.portalItem));
+            store.set('portalItemResource', portalItemResource);
+            const t9nData = await fetchResourceData(this.request, portalItemResource);
+            store.set('portalItemResourceT9n', t9nData !== null && t9nData !== void 0 ? t9nData : {});
+        }
+        catch (_a) { }
+    }
+    render() {
+        return (h(Host, null, this.renderModal(), this.renderPopoverTip()));
+    }
+    renderModal() {
+        return (h("calcite-modal", { open: this.open, scale: "l", fullscreen: true, onCalciteModalClose: this.close.bind(this) }, this.renderHeader(), this.renderContent(), this.renderPrimaryButton()));
+    }
+    renderPopoverTip() {
+        var _a;
+        return (h("calcite-popover", { "reference-element": "headerTip", placement: "trailing", "auto-close": true, closable: true }, h("div", { class: CSS.headerTip }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.headerTip)));
+    }
+    renderHeader() {
+        const saving = store.get('saving');
+        return (h("header", { class: CSS.header, slot: "header" }, this.renderHeaderText(), saving ? this.renderSavingIndicator() : null));
+    }
+    renderHeaderText() {
+        const { messages } = this;
+        return (h("div", { class: CSS.headerText }, h("span", null, messages === null || messages === void 0 ? void 0 : messages.header), h("calcite-button", { id: "headerTip", appearance: "transparent" }, h("calcite-icon", { icon: EIcons.Popover, scale: "s" }))));
+    }
+    renderSavingIndicator() {
+        var _a;
+        const saving = store.get('saving');
+        const t9n = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.saving;
+        return (h("div", { class: CSS.savingIndicator }, saving ? h("calcite-loader", { label: t9n, inline: true }) : null, h("span", null, t9n)));
+    }
+    renderContent() {
+        const localeItems = getLocales(this.locales);
+        return (h("div", { slot: "content" }, this.renderTopBar(), (localeItems === null || localeItems === void 0 ? void 0 : localeItems.length) > 0 ? this.renderUIData() : this.renderNotice()));
+    }
+    renderTopBar() {
+        return (h("div", { class: CSS.topBar }, this.renderLeadingTopBarSection(), this.renderTrailingTopBarSection()));
+    }
+    renderLeadingTopBarSection() {
+        return (h("div", { class: CSS.topBarSection }, this.renderUserLocale(), this.renderCollapseSearchContainer()));
+    }
+    renderUserLocale() {
+        var _a;
+        const languages = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.languages;
+        const localeFlag = getComponentClosestLanguage(this.el);
+        const langText = languages === null || languages === void 0 ? void 0 : languages[localeFlag];
+        return h("div", { class: CSS.userLangText }, langText);
+    }
+    renderCollapseSearchContainer() {
+        return (h("div", { class: CSS.collapseSearchContainer }, this.renderExpandCollapseButton(), this.renderSearch()));
+    }
+    renderExpandCollapseButton() {
+        const { isCollapse, messages } = this;
+        const text = isCollapse ? messages === null || messages === void 0 ? void 0 : messages.collapseAll : messages === null || messages === void 0 ? void 0 : messages.expandAll;
+        return (h("calcite-button", { onClick: this.handleExpandCollapseAll.bind(this), appearance: "transparent", "icon-start": EIcons.ExpandCollapse }, text));
+    }
+    renderSearch() {
+        var _a;
+        return (h("instant-apps-language-translator-search", { onSuggestionSelected: this.onSuggestionSelect.bind(this), t9nPlaceholder: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.searchPlaceholder }));
+    }
+    renderTrailingTopBarSection() {
+        return h("div", { class: CSS.topBarSection }, this.renderLanguageSelection());
+    }
+    renderLanguageSelection() {
+        var _a;
+        return (h("calcite-label", { layout: "inline" }, (_a = this.messages) === null || _a === void 0 ? void 0 :
+            _a.translatedLanguage, h("calcite-select", { onCalciteSelectChange: this.handleLanguageSelection.bind(this) }, this.renderTranslatedLangOptions())));
+    }
+    renderTranslatedLangOptions() {
+        const uiData = store.get('uiData');
+        const locales = uiData === null || uiData === void 0 ? void 0 : uiData.get('locales');
+        const localeFlags = getLocales(locales);
+        return localeFlags === null || localeFlags === void 0 ? void 0 : localeFlags.map(locale => {
+            const { messages } = this;
+            const translatedLanguageNames = messages === null || messages === void 0 ? void 0 : messages.translatedLanguageNames;
+            const enLanguageNames = messages === null || messages === void 0 ? void 0 : messages.languages;
+            const translatedLanguageName = translatedLanguageNames === null || translatedLanguageNames === void 0 ? void 0 : translatedLanguageNames[locale];
+            const enLanguageName = enLanguageNames === null || enLanguageNames === void 0 ? void 0 : enLanguageNames[locale];
+            const text = `${translatedLanguageName} - ${enLanguageName}`;
+            return (h("calcite-option", { key: `translated-lang-option-${locale}`, value: locale }, text));
+        });
+    }
+    renderUIData() {
+        if (!(languageTranslatorState === null || languageTranslatorState === void 0 ? void 0 : languageTranslatorState.uiData))
+            return;
+        const uiDataKeys = getUIDataKeys();
+        return h("div", null, uiDataKeys === null || uiDataKeys === void 0 ? void 0 : uiDataKeys.map((key, keyIndex) => this.renderUIDataItem(key, keyIndex, uiDataKeys.length)));
+    }
+    renderNotice() {
+        var _a;
+        const noLanguage = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.noLanguage;
+        return (h("calcite-notice", { open: true, icon: "exclamation-mark-triangle", kind: "warning" }, h("div", { slot: "title" }, noLanguage === null || noLanguage === void 0 ? void 0 : noLanguage.title), h("div", { slot: "message" }, noLanguage === null || noLanguage === void 0 ? void 0 : noLanguage.message)));
+    }
+    renderUIDataItem(key, keyIndex, uiDataKeysLen) {
+        var _a, _b, _c;
+        const translatedLabel = (_c = (_b = (_a = this.appSettings) === null || _a === void 0 ? void 0 : _a.translatedLanguageLabels) === null || _b === void 0 ? void 0 : _b[languageTranslatorState.currentLanguage]) === null || _c === void 0 ? void 0 : _c[key];
+        const isLast = `${keyIndex === uiDataKeysLen - 1 ? CSS.lastItem : ''}`;
+        const setting = this.appSettings.content.filter(contentItem => contentItem.id === key)[0];
+        return (h("instant-apps-language-translator-item", { key: `${key}-${keyIndex}`, class: isLast, fieldName: key, translatedLanguageLabel: translatedLabel, type: setting.type, userLocaleInputOnChangeCallback: this.userLocaleInputOnChangeCallback, translatedLocaleInputOnChangeCallback: this.translatedLocaleInputOnChangeCallback }));
+    }
+    renderPrimaryButton() {
+        var _a;
+        return (h("calcite-button", { onClick: () => (this.open = false), slot: "primary", class: CSS.closeButton }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close));
+    }
+    handleExpandCollapseAll() {
+        this.isCollapse = !this.isCollapse;
+        const uiData = new Map(languageTranslatorState.uiData);
+        const uiDataKeys = getUIDataKeys();
+        uiDataKeys.forEach(key => (uiData.get(key).expanded = this.isCollapse));
+        store.set('uiData', uiData);
+    }
+    onSuggestionSelect(e) {
+        const fieldName = e.detail;
+        const uiData = new Map(languageTranslatorState.uiData);
+        const uiDataKeys = getUIDataKeys();
+        const handleSelection = (key) => {
+            const setting = uiData.get(key);
+            if (key === fieldName) {
+                setting.selected = true;
+                return;
+            }
+            setting.selected = false;
+        };
+        uiDataKeys.forEach(handleSelection);
+        store.set('uiData', uiData);
+    }
+    close() {
+        this.open = false;
+    }
+    handleLanguageSelection(e) {
+        const node = e.target;
+        const value = node.value;
+        store.set('currentLanguage', value);
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "locales": ["handleLocaleChange"],
+        "appSettings": ["handleAppSettings"]
+    }; }
+    static get style() { return instantAppsLanguageTranslatorCss; }
+}, [2, "instant-apps-language-translator", {
+        "portalItem": [16],
+        "appSettings": [16],
+        "locales": [16],
+        "open": [1028],
+        "userLocaleInputOnChangeCallback": [16],
+        "translatedLocaleInputOnChangeCallback": [16],
+        "saving": [32],
+        "messages": [32],
+        "isCollapse": [32]
+    }, [[8, "translatorItemDataUpdated", "handleT9nItemUpdate"]], {
+        "locales": ["handleLocaleChange"],
+        "appSettings": ["handleAppSettings"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["instant-apps-language-translator", "calcite-action", "calcite-button", "calcite-icon", "calcite-input", "calcite-label", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-option", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "instant-apps-ckeditor-wrapper", "instant-apps-language-translator-item", "instant-apps-language-translator-search"];
+    components.forEach(tagName => { switch (tagName) {
+        case "instant-apps-language-translator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InstantAppsLanguageTranslator);
+            }
+            break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "calcite-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "calcite-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "calcite-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "calcite-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "calcite-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "calcite-option":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-progress":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "instant-apps-ckeditor-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "instant-apps-language-translator-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "instant-apps-language-translator-search":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { InstantAppsLanguageTranslator as I, defineCustomElement as d, fetchResourceData as f, getPortalItemResource as g };

package/dist/components/instant-apps-measurement-tool.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { I as InstantAppsMeasurementTool$1, d as defineCustomElement$1 } from './instant-apps-measurement-tool2.js';
+
+const InstantAppsMeasurementTool = InstantAppsMeasurementTool$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { InstantAppsMeasurementTool, defineCustomElement };

package/dist/components/instant-apps-measurement-tool2.js

@@ -0,0 +1,154 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules2.js';
+
+const instantAppsMeasurementToolCss = ".sc-instant-apps-measurement-tool-h .esri-measurement.sc-instant-apps-measurement-tool,.sc-instant-apps-measurement-tool-h .esri-coordinate-conversion.sc-instant-apps-measurement-tool{width:300px}.sc-instant-apps-measurement-tool-h .instant-apps-measurement-tool__hide.sc-instant-apps-measurement-tool{display:none}";
+
+const base = 'instant-apps-measurement-tool';
+const CSS = {
+    base,
+    hide: `${base}__hide`,
+};
+const InstantAppsMeasurementTool = /*@__PURE__*/ proxyCustomElement(class InstantAppsMeasurementTool extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.view = undefined;
+        this.measureConfiguration = undefined;
+        this.activeTool = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    async componentWillLoad() {
+        await this._initModules();
+    }
+    componentDidLoad() {
+        this._init();
+    }
+    render() {
+        return (h(Host, null, h("div", { class: CSS.base }, h("div", { ref: el => {
+                this._measureElement = el;
+            } }), h("div", { class: CSS.hide, ref: el => {
+                this._coordinateElement = el;
+            } }))));
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this._measureWidget) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this._coordinateWidget) === null || _b === void 0 ? void 0 : _b.destroy();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Measurement, CoordinateConversion, Conversion] = await loadModules([
+            'esri/widgets/Measurement',
+            'esri/widgets/CoordinateConversion',
+            'esri/widgets/CoordinateConversion/support/Conversion',
+        ]);
+        this.Measurement = Measurement;
+        this.CoordinateConversion = CoordinateConversion;
+        this.Conversion = Conversion;
+    }
+    /**
+     * Initialize the measurement widget
+     *
+     */
+    _init() {
+        this._initMeasurementWidget();
+        this._initCoordinateWidget();
+    }
+    _updateToolType(tool) {
+        this._setActiveTool(tool);
+    }
+    /**
+     * Initialize the measurement widget and listen to key events
+     *
+     * @protected
+     */
+    _initMeasurementWidget() {
+        if (this.view && this._measureElement && !this._measureWidget) {
+            this._measureWidget = new this.Measurement(Object.assign({ view: this.view, container: this._measureElement }, this.measureConfiguration));
+            if (this.measureConfiguration.activeToolType)
+                this._setActiveTool(this.measureConfiguration.activeToolType);
+        }
+    }
+    _setActiveTool(tool) {
+        var _a, _b, _c;
+        const viewType = this.view.type;
+        this._measureWidget.clear();
+        (_a = this._coordinateElement) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.hide);
+        if (tool === 'distance') {
+            this._measureWidget.activeTool = viewType === '2d' ? 'distance' : 'direct-line';
+        }
+        else if (tool === 'area') {
+            this._measureWidget.activeTool = 'area';
+        }
+        else if (tool === 'point') {
+            (_c = (_b = this._coordinateElement) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.remove(CSS.hide);
+        }
+    }
+    _initCoordinateWidget() {
+        var _a, _b;
+        const { activeToolType, coordinateFormat } = this.measureConfiguration;
+        if ((this === null || this === void 0 ? void 0 : this.view) && this._coordinateElement && !this._coordinateWidget) {
+            this._coordinateWidget = new this.CoordinateConversion({ view: this.view, storageEnabled: false, container: this._coordinateElement });
+            if (coordinateFormat != null) {
+                const format = this._coordinateWidget.formats.find(f => {
+                    return f.name === coordinateFormat;
+                });
+                (_b = (_a = this._coordinateWidget) === null || _a === void 0 ? void 0 : _a.conversions) === null || _b === void 0 ? void 0 : _b.splice(0, 0, new this.Conversion({ format }));
+            }
+        }
+        if (activeToolType != null)
+            this._setActiveTool(activeToolType);
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "activeTool": ["_updateToolType"]
+    }; }
+    static get style() { return instantAppsMeasurementToolCss; }
+}, [2, "instant-apps-measurement-tool", {
+        "view": [16],
+        "measureConfiguration": [16],
+        "activeTool": [1, "active-tool"]
+    }, undefined, {
+        "activeTool": ["_updateToolType"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["instant-apps-measurement-tool"];
+    components.forEach(tagName => { switch (tagName) {
+        case "instant-apps-measurement-tool":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InstantAppsMeasurementTool);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { InstantAppsMeasurementTool as I, defineCustomElement as d };