@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/instant-apps-language-translator.entry.js

@@ -0,0 +1,286 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, F as Fragment, g as getElement } from './index-bdfaac50.js';
+import { g as getMessages, a as generateUIData, s as store, E as EIcons, b as getLocales, l as languageTranslatorState, c as getUIDataKeys } from './utils-32df4a1e.js';
+import { l as loadModules } from './loadModules-acccbc1c.js';
+import { c as getComponentClosestLanguage } from './locale-4cfbae3e.js';
+import { g as getPortalItemResource, f as fetchResourceData } from './languageSwitcher-2a9037e5.js';
+import './index-91eeaf01.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './languageUtil-71a7a914.js';
+
+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-color-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-color-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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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", { label: "", referenceElement: "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(Fragment, null, h("slot", { name: "primary-custom-action" }), h("slot", { name: "secondary-custom-action" }), 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(), h("slot", { name: "translation-custom-action" })));
+    }
+    renderLanguageSelection() {
+        var _a;
+        return (h("calcite-label", { layout: "inline" }, (_a = this.messages) === null || _a === void 0 ? void 0 :
+            _a.translatedLanguage, h("calcite-select", { label: "", 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;
+        const translatedLanguageLabels = (_b = (_a = this.appSettings) === null || _a === void 0 ? void 0 : _a.translatedLanguageLabels) === null || _b === void 0 ? void 0 : _b[languageTranslatorState.currentLanguage];
+        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, translatedLanguageLabels: translatedLanguageLabels, setting: setting, 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);
+    }
+    /**
+     * Gets translation data for all languages and fields.
+     */
+    async getTranslationData() {
+        return store.get('portalItemResourceT9n');
+    }
+    /**
+     * Updates translation data for all languages and fields.
+     */
+    async setTranslationData(data) {
+        return store.set('portalItemResourceT9n', data);
+    }
+    /**
+     * Gets portal item resource containing the translation data.
+     */
+    async getPortalItemResource() {
+        return store.get('portalItemResource');
+    }
+    /**
+     * Batch write data to associated portal item resource.
+     */
+    async batchWriteToPortalItemResource(data) {
+        store.set('saving', true);
+        try {
+            const resource = await this.getPortalItemResource();
+            const dataStr = JSON.stringify(data);
+            const blobParts = [dataStr];
+            const options = { type: 'application/json' };
+            const blob = new Blob(blobParts, options);
+            await resource.update(blob);
+            setTimeout(() => store.set('saving', false), 1500);
+            this.translatorDataUpdated.emit();
+            return Promise.resolve();
+        }
+        catch (err) {
+            console.error('Error writing to portal item resource: ', err);
+            store.set('saving', false);
+            return Promise.reject();
+        }
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "locales": ["handleLocaleChange"],
+        "appSettings": ["handleAppSettings"]
+    }; }
+};
+InstantAppsLanguageTranslator.style = instantAppsLanguageTranslatorCss;
+
+export { InstantAppsLanguageTranslator as instant_apps_language_translator };

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

@@ -0,0 +1,135 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { l as loadModules } from './loadModules-acccbc1c.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "activeTool": ["_updateToolType"]
+    }; }
+};
+InstantAppsMeasurementTool.style = instantAppsMeasurementToolCss;
+
+export { InstantAppsMeasurementTool as instant_apps_measurement_tool };

package/dist/solutions-components/instant-apps-measurement.entry.js

@@ -0,0 +1,66 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { g as getMessages } from './locale-4cfbae3e.js';
+import './loadModules-acccbc1c.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './languageUtil-71a7a914.js';
+
+const instantAppsMeasurementCss = ".sc-instant-apps-measurement-h .sc-instant-apps-measurement.sc-instant-apps-measurement{background:var(--calcite-color-foreground-1)}.sc-instant-apps-measurement-h .active-tool.sc-instant-apps-measurement{--calcite-color-foreground-1:#c7eaff}";
+
+const CSS = {
+    content: 'instant-apps-measurement__content',
+};
+const InstantAppsMeasurement = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.measureActive = createEvent(this, "measureActive", 7);
+        this.messages = undefined;
+        this.view = undefined;
+        this.areaUnit = undefined;
+        this.linearUnit = undefined;
+        this.coordinateFormat = undefined;
+        this.activeToolType = undefined;
+        this.closable = false;
+    }
+    async componentWillLoad() {
+        getMessages(this);
+    }
+    componentDidLoad() { }
+    render() {
+        var _a;
+        return (h(Host, null, h("calcite-panel", { heading: (_a = this === null || this === void 0 ? void 0 : this.messages) === null || _a === void 0 ? void 0 : _a.label, closable: this.closable }, h("div", null, this.renderActionPad()), this.renderMeasureToolPanel())));
+    }
+    renderMeasureToolPanel() {
+        const { view, coordinateFormat, areaUnit, linearUnit, activeToolType } = this;
+        return (h("calcite-panel", { class: CSS.content }, h("instant-apps-measurement-tool", { ref: el => {
+                this.measureTool = el;
+            }, view: view, measureConfiguration: { coordinateFormat, areaUnit, linearUnit, activeToolType } })));
+    }
+    renderActionPad() {
+        const { messages, activeToolType } = this;
+        return (h("calcite-action-pad", { "expand-disabled": true, layout: "horizontal", position: "end" }, h("calcite-action", { class: activeToolType === 'distance' ? 'active-tool' : '', text: messages === null || messages === void 0 ? void 0 : messages.line, icon: "measure", scale: "m", "data-value": "distance", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.line)), h("calcite-action", { class: activeToolType === 'area' ? 'active-tool' : '', text: messages === null || messages === void 0 ? void 0 : messages.area, scale: "m", icon: "measure-area", "data-value": "area", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.area)), h("calcite-action", { class: activeToolType === 'point' ? 'active-tool' : '', text: messages === null || messages === void 0 ? void 0 : messages.point, scale: "m", icon: "pin-plus", "data-value": "point", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.point)), h("calcite-action", { text: messages === null || messages === void 0 ? void 0 : messages.clear, scale: "m", icon: "trash", "data-value": "clear", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.clear))));
+    }
+    _handleToolClick(e) {
+        var _a, _b, _c, _d;
+        if (!(this === null || this === void 0 ? void 0 : this.measureTool))
+            return;
+        const tool = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.dataset['value'];
+        this.measureTool.activeTool = tool;
+        // clean up active styles
+        const elements = document.getElementsByClassName('active-tool');
+        for (let i = 0; i < (elements === null || elements === void 0 ? void 0 : elements.length); i++) {
+            (_c = (_b = elements[i]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.remove('active-tool');
+        }
+        (_d = e === null || e === void 0 ? void 0 : e.target) === null || _d === void 0 ? void 0 : _d.classList.add('active-tool');
+        this.measureActive.emit(tool === undefined || tool === 'clear' ? false : true);
+    }
+    get el() { return getElement(this); }
+};
+InstantAppsMeasurement.style = instantAppsMeasurementCss;
+
+export { InstantAppsMeasurement as instant_apps_measurement };

package/dist/solutions-components/instant-apps-popover.entry.js

@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, g as getElement } from './index-bdfaac50.js';
+import { g as getMessages } from './locale-4cfbae3e.js';
+import './loadModules-acccbc1c.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './languageUtil-71a7a914.js';
+
+const instantAppsPopoverCss = ":host{display:block}.instant-apps-popover__content{display:flex;flex-direction:column;padding:0 5% 5% 5%;max-width:35vw;font-family:var(--calcite-sans-family);font-size:0.875rem}.instant-apps-popover__content .instant-apps-popover__action{align-self:flex-start;--calcite-color-foreground-2:transparent}.instant-apps-popover__content span{display:inline-block;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);margin:0 0 10px 0;font-family:var(--calcite-sans-family)}.instant-apps-popover__content p{line-height:19.12px;margin:0;margin-bottom:10px;font-family:var(--calcite-sans-family)}.instant-apps-popover__content .instant-apps-popover__footer{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.instant-apps-popover__content .instant-apps-popover__footer span{margin-bottom:0;font-weight:normal;font-size:0.875rem;font-family:var(--calcite-sans-family)}.instant-apps-popover__content .instant-apps-popover__footer calcite-button:first-child{--calcite-color-foreground-3:transparent}.instant-apps-popover__content .instant-apps-popover__footer calcite-button:last-child{margin-left:5px}.instant-apps-popover__content .instant-apps-popover__img{width:100%;margin-bottom:10px}.instant-apps-popover__content.instant-apps-popover--action-disabled{padding:5%}.instant-apps-popover__content.instant-apps-popover--action-disabled #subtitle{margin:0 0 10px 0}";
+
+const CSS = {
+    content: 'instant-apps-popover__content',
+    buttonContainer: 'instant-apps-popover__button-container',
+    action: 'instant-apps-popover__action',
+    actionDisabled: 'instant-apps-popover--action-disabled',
+    img: 'instant-apps-popover__img',
+    footer: 'instant-apps-popover__footer',
+};
+const InstantAppsPopover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.popoverTitle = undefined;
+        this.subtitle = undefined;
+        this.content = undefined;
+        this.imgSrc = undefined;
+        this.imgAlt = undefined;
+        this.mediaSrc = undefined;
+        this.index = undefined;
+        this.referenceElement = undefined;
+        this.parent = undefined;
+        this.placement = 'trailing-start';
+        this.refId = undefined;
+        this.pagination = false;
+        this.disableAction = false;
+        this.popoverAction = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+    }
+    async componentDidLoad() {
+        getMessages(this, this.messageOverrides);
+    }
+    componentDidUpdate() {
+        this.popoverEl.referenceElement = this.referenceElement;
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        return (h("calcite-popover", { ref: (el) => (this.popoverEl = el), heading: this.popoverTitle, "auto-close": true, placement: this.placement, messageOverrides: { close: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close }, "trigger-disabled": true, "ref-id": this.refId, closable: true, referenceElement: this.referenceElement, label: this.popoverTitle }, h("div", { class: `${CSS.content}${this.disableAction ? ` ${CSS.actionDisabled}` : ''}` }, !this.disableAction ? (h("calcite-action", { key: "popover-action", class: CSS.action, onClick: this.popoverAction, icon: document.dir === 'rtl' ? 'chevron-right' : 'chevron-left', compact: true, "text-enabled": true, text: (((_b = this.messageOverrides) === null || _b === void 0 ? void 0 : _b.popoverAction) ? this.messageOverrides.popoverAction : this.messages.back) })) : null, h("section", null, h("span", { id: "subtitle" }, this.subtitle), h("p", null, this.content), this.imgSrc ? h("img", { key: `iac-popover-img-${this.refId}`, class: CSS.img, src: this.imgSrc, alt: this.imgAlt ? this.imgAlt : '' }) : null), this.pagination ? (h("div", { key: `iac-popover-footer-${this.index}`, class: CSS.footer }, h("span", null, this.index + 1, " ", (_c = this.messages) === null || _c === void 0 ? void 0 :
+            _c.of, " ", (_e = (_d = this.parent) === null || _d === void 0 ? void 0 : _d.instantAppsPopovers) === null || _e === void 0 ? void 0 :
+            _e.size), this.renderPagination())) : null)));
+    }
+    renderPagination() {
+        var _a, _b;
+        const { index, messages, parent } = this;
+        const size = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.instantAppsPopovers) === null || _b === void 0 ? void 0 : _b.size;
+        const isFirst = index === 0;
+        const isLast = index === size - 1;
+        return (h("div", { key: "pagination-button-container", class: CSS.buttonContainer }, !isFirst ? (h("calcite-button", { key: "prev", onClick: () => parent === null || parent === void 0 ? void 0 : parent.previous(), appearance: "outline", kind: "neutral" }, messages === null || messages === void 0 ? void 0 : messages.back)) : null, h("calcite-button", { key: "next", onClick: () => {
+                if (isLast) {
+                    parent === null || parent === void 0 ? void 0 : parent.done();
+                }
+                else {
+                    parent === null || parent === void 0 ? void 0 : parent.next();
+                }
+            } }, isLast ? messages === null || messages === void 0 ? void 0 : messages.done : messages === null || messages === void 0 ? void 0 : messages.next)));
+    }
+    get el() { return getElement(this); }
+};
+InstantAppsPopover.style = instantAppsPopoverCss;
+
+export { InstantAppsPopover as instant_apps_popover };

package/dist/solutions-components/instant-apps-popovers.entry.js

@@ -0,0 +1,88 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, a as Host, g as getElement } from './index-bdfaac50.js';
+
+const instantAppsPopoversCss = ":host{display:block}";
+
+const InstantAppsPopovers = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inTour = undefined;
+        this.currentId = undefined;
+        this.instantAppsPopovers = new Map();
+        this.beforeOpen = () => Promise.resolve();
+    }
+    componentWillLoad() {
+        var _a;
+        const popovers = Array.from((_a = this.host.querySelector("[slot='popovers']")) === null || _a === void 0 ? void 0 : _a.children);
+        popovers.forEach((popover, popoverIndex) => {
+            const refId = popover.getAttribute('ref-id');
+            popover.parent = this;
+            popover.index = popoverIndex;
+            this.instantAppsPopovers.set(refId, popover);
+        });
+        this.host.addEventListener('calcitePopoverOpen', e => {
+            const node = e.target;
+            const refId = node.getAttribute('ref-id');
+            this.currentId = refId;
+        });
+    }
+    render() {
+        return (h(Host, null, h("slot", { name: "popovers" })));
+    }
+    next() {
+        const refIds = Array.from(this.instantAppsPopovers.keys());
+        const index = refIds.indexOf(this.currentId) + 1;
+        const nextId = refIds[index];
+        this.close(this.currentId);
+        this.open(nextId);
+    }
+    previous() {
+        const refIds = Array.from(this.instantAppsPopovers.keys());
+        const index = refIds.indexOf(this.currentId) - 1;
+        const previousId = refIds[index];
+        this.close(this.currentId);
+        this.open(previousId);
+    }
+    done() {
+        this.endTour();
+    }
+    handlePopoverProps(config) {
+        var _a;
+        const popovers = Array.from((_a = this.host.querySelector("[slot='popovers']")) === null || _a === void 0 ? void 0 : _a.children);
+        popovers.forEach(popover => {
+            popover.disableAction = config.disableAction;
+            popover.pagination = config.pagination;
+        });
+    }
+    async open(key) {
+        return this.beforeOpen().then(() => {
+            var _a;
+            const popover = (_a = this.instantAppsPopovers.get(key)) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            popover.open = true;
+        });
+    }
+    async close(key) {
+        var _a;
+        const popover = (_a = this.instantAppsPopovers.get(key)) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        popover.open = false;
+    }
+    async beginTour() {
+        this.inTour = true;
+        this.handlePopoverProps({ pagination: true, disableAction: true });
+        const refIds = Array.from(this.instantAppsPopovers.keys());
+        this.open(refIds[0]);
+    }
+    async endTour() {
+        this.close(this.currentId);
+        this.inTour = false;
+        this.handlePopoverProps({ pagination: false, disableAction: false });
+    }
+    get host() { return getElement(this); }
+};
+InstantAppsPopovers.style = instantAppsPopoversCss;
+
+export { InstantAppsPopovers as instant_apps_popovers };