@esri/solutions-components 0.8.2 → 0.8.3

package/dist/cjs/{index.es-22b3d1a2.js → index.es-4af23ecc.js}

@@ -6,7 +6,7 @@
 'use strict';
 
 const _commonjsHelpers = require('./_commonjsHelpers-480c2e77.js');
-const downloadUtils = require('./downloadUtils-c2bd7c80.js');
+const downloadUtils = require('./downloadUtils-1f283d95.js');
 require('./index-105cf2b9.js');
 require('./locale-3d0a4bc2.js');
 require('./esri-loader-ce6c3d3d.js');

package/dist/cjs/info-card.cjs.entry.js

@@ -0,0 +1,320 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const locale = require('./locale-42a9e623.js');
+const loadModules = require('./loadModules-b5f244cd.js');
+const popupUtils = require('./popupUtils-4de17e65.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
+
+const InfoCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.popupClosed = index.createEvent(this, "popupClosed", 7);
+        this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
+        this.graphics = undefined;
+        this.isLoading = false;
+        this.isMobile = undefined;
+        this.mapView = undefined;
+        this.zoomAndScrollToSelected = undefined;
+        this.allowEditing = true;
+        this.highlightEnabled = true;
+        this._alertOpen = false;
+        this._count = "";
+        this._editRecordOpen = false;
+        this._mobileTitle = "";
+        this._showListView = false;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for changes to the graphic and update the feature widget
+     */
+    async graphicsWatchHandler() {
+        await this.setGraphics();
+    }
+    /**
+     * Watch for changes to the isMobile prop then init the Features widget
+     * We need to know if the title should be displayed by the widget (non mobile)
+     * or by us (mobile)
+     */
+    async isMobileWatchHandler() {
+        await this._initFeaturesWidget();
+    }
+    /**
+     * Watch for changes to the mapView and re-init the Feature widget
+     */
+    async mapViewWatchHandler() {
+        return await this._initFeaturesWidget();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Get the current selected feature from the Features widget
+     *
+     * @returns Promise resolving with the current feature
+     */
+    async getSelectedFeature() {
+        return this._features.selectedFeature;
+    }
+    /**
+     * Respond to and close the edit record display
+     *
+     * @returns a promise when the operation has completed
+     */
+    async closeEdit() {
+        this._editRecordOpen = false;
+    }
+    /**
+     * Reset key properties when the layer selection changes
+     */
+    async layerSelectionChange() {
+        var _a;
+        this._showListView = false;
+        if ((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel) {
+            this._features.viewModel.featureMenuOpen = false;
+            this._features.close();
+        }
+    }
+    /**
+     * Refresh the info-card graphics
+     */
+    async refreshGraphics(evt) {
+        this.graphics = [...evt.detail];
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._initModules();
+        await this._getTranslations();
+        this._popupUtils = new popupUtils.PopupUtils();
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     * @returns Promise when complete
+     */
+    async componentDidLoad() {
+        var _a;
+        if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            await this.setGraphics();
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const loadingClass = this.isLoading ? "" : "display-none";
+        const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
+        const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+        const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
+        const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
+        const nextBackClass = this.isMobile ? "display-none" : "";
+        const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
+        const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
+        const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
+        return (index.h(index.Host, null, index.h("calcite-shell", null, this._getHeader(), index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), index.h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), index.h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            index.h("div", { class: "display-flex top-border padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", null, this._translations.edit)), this.isMobile ? (index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, index.h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && index.h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, index.h("div", { class: "min-width-100" }, index.h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, index.h("span", null, this._translations.back))), index.h("div", null, index.h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), index.h("div", { class: "min-width-100" }, index.h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, index.h("span", null, this._translations.next))))), index.h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), index.h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._translations.editDisabled), index.h("div", { slot: "message" }, this._translations.enableEditing)))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Features, reactiveUtils] = await loadModules.loadModules([
+            "esri/widgets/Features",
+            "esri/core/reactiveUtils"
+        ]);
+        this.Features = Features;
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Initializes the features widget if not created and updates the feature widget and other required states
+     *
+     * @protected
+     */
+    async setGraphics() {
+        var _a;
+        if (!this._features) {
+            await this._initFeaturesWidget();
+        }
+        if (this.graphics.length > 0) {
+            this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
+            this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
+            this._features.open({
+                features: this.graphics
+            });
+        }
+        else {
+            this._features.clear();
+            this._features.close();
+        }
+        this._count = this._getCount();
+    }
+    /**
+     * Init the Feature widget so we can display the popup content
+     *
+     * @returns a promise when the operation has completed
+     *
+     * @protected
+     */
+    async _initFeaturesWidget() {
+        var _a;
+        return this.isMobile !== undefined ? await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(() => {
+            if (!this._features) {
+                this._features = new this.Features({
+                    view: this.mapView,
+                    container: "features-node",
+                    visibleElements: {
+                        actionBar: false,
+                        closeButton: false,
+                        heading: !this.isMobile
+                    }
+                });
+                this._features.viewModel.highlightEnabled = this.highlightEnabled;
+                this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
+                    if (!isOpen) {
+                        this._showListView = isOpen;
+                    }
+                });
+                if (this.zoomAndScrollToSelected) {
+                    this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+                        if (i > -1) {
+                            this.selectionChanged.emit([this._features.selectedFeature]);
+                        }
+                    });
+                }
+            }
+            else {
+                this._features.view = this.mapView;
+                this._features.visibleElements.actionBar = false;
+                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.heading = !this.isMobile;
+            }
+        })) : Promise.resolve();
+    }
+    /**
+     * Get the mobile header
+     *
+     * @returns the header node to display when in mobile mode
+     *
+     * @protected
+     */
+    _getHeader() {
+        return this.isMobile && !this._editRecordOpen ? (index.h("calcite-panel", { class: "border-width-0", slot: "header" }, index.h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), index.h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined;
+    }
+    /**
+     * Close the popup and emit the selected features
+     */
+    _closePopup() {
+        this.popupClosed.emit();
+    }
+    /**
+     * Set the alertOpen member to false when the alert is closed
+     */
+    _alertClosed() {
+        this._alertOpen = false;
+    }
+    /**
+     * Open the edit record
+     */
+    _openEditRecord() {
+        if (this._editEnabled) {
+            this._editRecordOpen = true;
+        }
+        else {
+            this._alertOpen = true;
+        }
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    _back() {
+        this._features.previous();
+        this._count = this._getCount();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    _next() {
+        this._features.next();
+        this._count = this._getCount();
+    }
+    /**
+     * Get the current index of total string
+     *
+     * @returns the index of total string
+     */
+    _getCount() {
+        var _a, _b, _c;
+        const index = (((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel.selectedFeatureIndex) + 1).toString();
+        const total = (_c = (_b = this._features) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.length.toString();
+        return this._translations.indexOfTotal
+            .replace("{{index}}", index)
+            .replace("{{total}}", total);
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    _toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await locale.getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "graphics": ["graphicsWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+InfoCard.style = infoCardCss;
+
+exports.info_card = InfoCard;

package/dist/cjs/instant-apps-ckeditor-wrapper.cjs.entry.js

@@ -0,0 +1,125 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+
+const styles = `
+  .ck.ck-reset.ck-editor.ck-rounded-corners {
+    margin-top: 10px !important;
+    margin-left: 55px !important;
+  }
+  .ck-editor__editable {
+    height: 70px !important;
+    font-size: 0.875rem !important;
+    line-height: 	1.375 !important;
+    color: var(--calcite-color-text-1) !important;
+  }
+
+  .ck.ck-editor__editable_inline>:first-child,
+  .ck.ck-editor__editable_inline>:last-child {
+    --ck-spacing-large: 0.5rem !important;
+  }
+
+  .ck.ck-balloon-panel.ck-powered-by-balloon {
+    --ck-z-modal: 700;
+    z-index: 700;
+  }
+
+  .calcite-mode-dark .ck-editor__editable {
+    color: var(--calcite-color-text-inverse) !important;
+  }
+`;
+
+const instantAppsCkeditorWrapperCss = ":host{display:block}";
+
+const CKEDITOR_STYLES_ID = 'instant-apps-components__ckeditor-wrapper';
+const InstantAppsCkeditorWrapper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isFocused = index.createEvent(this, "isFocused", 7);
+        this.dataChanged = index.createEvent(this, "dataChanged", 7);
+        this.value = undefined;
+        this.editorInstance = undefined;
+        this.config = undefined;
+    }
+    updateValue() {
+        if (this.value)
+            this.editorInstance.setData(this.value);
+    }
+    async componentDidLoad() {
+        this.init();
+    }
+    componentDidUpdate() {
+        this.editorInstance.setData(this.value);
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("div", null)));
+    }
+    init() {
+        this.applyStyles();
+        this.initEditor();
+    }
+    applyStyles() {
+        const exists = !!document.getElementById(CKEDITOR_STYLES_ID);
+        if (exists)
+            return;
+        const style = document.createElement('style');
+        style.id = CKEDITOR_STYLES_ID;
+        style.innerHTML = styles;
+        document.head.prepend(style);
+    }
+    async initEditor() {
+        const editor = await this.createEditor();
+        if (editor) {
+            this.editorInstance = editor;
+            if (this.value || this.value === '') {
+                editor.setData(this.value);
+            }
+            editor.editing.view.document.on('change:isFocused', this.getEditorFocusedCallback(editor));
+        }
+    }
+    async createEditor() {
+        try {
+            let editor;
+            if (this.config) {
+                editor = await ClassicEditor.create(this.el, this.config);
+            }
+            else {
+                editor = await ClassicEditor.create(this.el);
+            }
+            this.editorInstance = editor;
+            return Promise.resolve(editor);
+        }
+        catch (err) {
+            console.error(err);
+            return Promise.reject(null);
+        }
+    }
+    getEditorFocusedCallback(editor) {
+        return (_event, _name, _isFocused) => {
+            if (!_isFocused) {
+                const editorData = editor.getData();
+                if (this.value !== editorData) {
+                    this.value = editorData;
+                    this.dataChanged.emit(editorData);
+                }
+            }
+            else {
+                this.isFocused.emit();
+            }
+        };
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["updateValue"]
+    }; }
+};
+InstantAppsCkeditorWrapper.style = instantAppsCkeditorWrapperCss;
+
+exports.instant_apps_ckeditor_wrapper = InstantAppsCkeditorWrapper;

package/dist/cjs/instant-apps-ckeditor-wrapper_3.cjs.entry.js

@@ -8,12 +8,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-105cf2b9.js');
-const utils = require('./utils-ea7a5a63.js');
-require('./locale-3e33f44c.js');
-require('./loadModules-69fc5b98.js');
+const utils = require('./utils-ac836e7a.js');
+require('./locale-4cef466e.js');
+require('./loadModules-01306709.js');
 require('./esri-loader-ce6c3d3d.js');
 require('./_commonjsHelpers-480c2e77.js');
-require('./languageUtil-9bd00bad.js');
+require('./languageUtil-0df39c0c.js');
 require('./index-ae65e42f.js');
 
 const styles = `

package/dist/cjs/instant-apps-control-panel.cjs.entry.js

@@ -7,10 +7,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const loadModules = require('./loadModules-69fc5b98.js');
-require('./esri-loader-ce6c3d3d.js');
-require('./_commonjsHelpers-480c2e77.js');
+const index = require('./index-b53bfd7c.js');
+const loadModules = require('./loadModules-a67b6702.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
 
 const instantAppsControlPanelCss = ":host{display:block}";
 

package/dist/cjs/instant-apps-export.cjs.entry.js

@@ -7,13 +7,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const locale = require('./locale-3e33f44c.js');
-const loadModules = require('./loadModules-69fc5b98.js');
-const mode = require('./mode-d6c12b38.js');
-require('./languageUtil-9bd00bad.js');
-require('./esri-loader-ce6c3d3d.js');
-require('./_commonjsHelpers-480c2e77.js');
+const index = require('./index-b53bfd7c.js');
+const locale = require('./locale-28c7c569.js');
+const loadModules = require('./loadModules-a67b6702.js');
+const mode = require('./mode-a0417ce5.js');
+require('./languageUtil-43c3acdc.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
 
 const printStyling = `
   @media print {
@@ -164,7 +164,7 @@ const printStyling = `
   }
 
   .instant-apps-export-print .esri-legend--card__service-caption-text {
-    padding-bottom: 0;
+    padding-bottom: 4px;
   }
 
   .instant-apps-export-print__compass-container {
@@ -597,8 +597,10 @@ const InstantAppsExport = class {
         }
     }
     handleLegendSetup() {
+        var _a;
         if (this.showIncludeLegend && this.view != null && this.includeMap && this.legendContainerEl != null) {
-            this.legendContainerEl.style.display = this.includeLegend ? 'block' : 'none';
+            const hasActiveLayers = this.legend != null && ((_a = this.legend.activeLayerInfos) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            this.legendContainerEl.style.display = this.includeLegend && hasActiveLayers ? 'block' : 'none';
         }
     }
     handleWidgetCreation() {
@@ -606,11 +608,11 @@ const InstantAppsExport = class {
         this.handleCompassCreation();
     }
     handleLegendCreation() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (this.includeMap && this.view != null && this.showIncludeLegend && this.legendContainerEl != null) {
             const map = this.view.map;
             const legendMap = (_b = (_a = this.legend) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
-            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) === ((_d = legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem) === null || _d === void 0 ? void 0 : _d.id);
+            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) != null && ((_d = map === null || map === void 0 ? void 0 : map.portalItem) === null || _d === void 0 ? void 0 : _d.id) === ((_e = legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem) === null || _e === void 0 ? void 0 : _e.id);
             if (!checkId) {
                 this.updateLegend();
             }
@@ -619,13 +621,17 @@ const InstantAppsExport = class {
     updateLegend() {
         var _a;
         (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
-            var _a;
-            (_a = this.legend) === null || _a === void 0 ? void 0 : _a.destroy();
+            if (this.legend != null) {
+                this.legend.destroy();
+                this.legend = null;
+            }
             if (this.legendContainerEl != null) {
                 this.legendContainerEl.innerHTML = '';
+                const legendCont = document.createElement('div');
+                this.legendContainerEl.append(legendCont);
                 const [Legend] = await loadModules.loadModules(['esri/widgets/Legend']);
                 this.legend = new Legend({
-                    container: this.legendContainerEl,
+                    container: legendCont,
                     view,
                     style: {
                         type: 'card',