@esri/solutions-components 0.7.23 → 0.7.25

package/dist/{esm/calcite-flow.entry.js → components/flow.js}

@@ -3,9 +3,9 @@
  * 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-7183ce4a.js';
-import { c as createObserver } from './observers-8ce200f2.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as createObserver } from './observers.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -20,9 +20,11 @@ const CSS = {
 
 const flowCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0px}:host ::slotted(calcite-flow-item),:host ::slotted(calcite-panel){block-size:100%}:host ::slotted(.calcite-match-height:last-child){display:flex;flex:1 1 auto;overflow:hidden}:host .frame--advancing{animation:calcite-frame-advance var(--calcite-animation-timing)}:host .frame--retreating{animation:calcite-frame-retreat var(--calcite-animation-timing)}@keyframes calcite-frame-advance{0%{--tw-bg-opacity:0.5;transform:translate3d(50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}[hidden]{display:none}";
 
-const Flow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.itemMutationObserver = createObserver("mutation", () => this.updateFlowProps());
         this.getFlowDirection = (oldFlowItemCount, newFlowItemCount) => {
             const allowRetreatingDirection = oldFlowItemCount > 1;
@@ -142,8 +144,29 @@ const Flow = class {
         };
         return (h("div", { class: frameDirectionClasses }, h("slot", null)));
     }
-    get el() { return getElement(this); }
-};
-Flow.style = flowCss;
+    get el() { return this; }
+    static get style() { return flowCss; }
+}, [1, "calcite-flow", {
+        "customItemSelectors": [1, "custom-item-selectors"],
+        "flowDirection": [32],
+        "itemCount": [32],
+        "items": [32],
+        "back": [64],
+        "setFocus": [64]
+    }, [[0, "calciteFlowItemBack", "handleItemBackClick"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calcite-flow"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calcite-flow":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Flow);
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { Flow as calcite_flow };
+export { Flow as F, defineCustomElement as d };

package/dist/components/info-card2.js

@@ -6,110 +6,24 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
-import { d as defineCustomElement$e } from './action.js';
-import { d as defineCustomElement$d } from './action-menu.js';
-import { d as defineCustomElement$c } from './alert.js';
-import { d as defineCustomElement$b } from './button.js';
-import { d as defineCustomElement$a } from './chip.js';
-import { d as defineCustomElement$9 } from './icon.js';
-import { d as defineCustomElement$8 } from './loader.js';
-import { d as defineCustomElement$7 } from './notice.js';
-import { d as defineCustomElement$6 } from './panel.js';
-import { d as defineCustomElement$5 } from './popover.js';
-import { d as defineCustomElement$4 } from './scrim.js';
-import { d as defineCustomElement$3 } from './shell.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
+import { P as PopupUtils } from './popupUtils.js';
+import { d as defineCustomElement$g } from './action.js';
+import { d as defineCustomElement$f } from './action-menu.js';
+import { d as defineCustomElement$e } from './alert.js';
+import { d as defineCustomElement$d } from './button.js';
+import { d as defineCustomElement$c } from './chip.js';
+import { d as defineCustomElement$b } from './icon.js';
+import { d as defineCustomElement$a } from './loader.js';
+import { d as defineCustomElement$9 } from './modal.js';
+import { d as defineCustomElement$8 } from './notice.js';
+import { d as defineCustomElement$7 } from './panel.js';
+import { d as defineCustomElement$6 } from './popover.js';
+import { d as defineCustomElement$5 } from './scrim.js';
+import { d as defineCustomElement$4 } from './shell.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './delete-button2.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
-/** @license
- * Copyright 2022 Esri
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*    http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-class PopupUtils {
-    /**
-     * Get the popup title that honors arcade expressions
-     *
-     * @returns Promise resolving with the popup title
-     *
-     * @protected
-     */
-    async getPopupTitle(graphic) {
-        var _a, _b, _c;
-        if (!this.arcade) {
-            await this._initModules();
-        }
-        let attributes = {};
-        for (const [key, value] of Object.entries(graphic.attributes)) {
-            attributes = Object.assign(Object.assign({}, attributes), { [`{${key.toUpperCase()}}`]: value });
-        }
-        const layer = graphic.layer;
-        const popupTitle = this._removeTags((_a = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.title);
-        if (popupTitle.includes("{expression/expr") && ((_b = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _b === void 0 ? void 0 : _b.expressionInfos) != null) {
-            for (let i = 0; i < ((_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.expressionInfos.length); i++) {
-                const info = layer.popupTemplate.expressionInfos[i];
-                const profile = {
-                    variables: [
-                        {
-                            name: "$feature",
-                            type: "feature"
-                        }
-                    ]
-                };
-                try {
-                    const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
-                    const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
-                    if (arcadeTitle != null || arcadeTitle !== "") {
-                        attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
-                    }
-                }
-                catch (_d) {
-                    continue;
-                }
-            }
-        }
-        return popupTitle === null || popupTitle === void 0 ? void 0 : popupTitle.replace(/{.*?}/g, (placeholder) => {
-            return attributes[placeholder.toUpperCase()] != null ? attributes[placeholder.toUpperCase()] : "";
-        });
-    }
-    /**
-     * Remove any tags from the title
-     *
-     * @returns title string without tags
-     *
-     * @protected
-     */
-    _removeTags(str) {
-        if (str == null || str === "") {
-            return "";
-        }
-        return str.toString().replace(/(<([^>]+)>)/gi, "");
-    }
-    /**
-     * Load esri javascript api modules
-     *
-     * @returns Promise resolving when function is done
-     *
-     * @protected
-     */
-    async _initModules() {
-        const [arcade] = await loadModules([
-            "esri/arcade"
-        ]);
-        this.arcade = arcade;
-    }
-}
-
 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}.padding-top-46{padding-top:46px}.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}";
 
 const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
@@ -123,6 +37,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         this.isMobile = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.allowEditing = true;
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -139,23 +54,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * Watch for changes to the graphic and update the feature widget
      */
     async graphicsWatchHandler() {
-        var _a;
-        if (!this._features) {
-            await this._initFeaturesWidget();
-        }
-        if (this.graphics.length > 0) {
-            const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
-            this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
-            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
-            this._features.open({
-                features: this.graphics
-            });
-        }
-        else {
-            this._features.clear();
-            this._features.close();
-        }
-        this._count = this._getCount();
+        await this.setGraphics();
     }
     /**
      * Watch for changes to the isMobile prop then init the Features widget
@@ -196,9 +95,12 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * Reset key properties when the layer selection changes
      */
     async layerSelectionChange() {
+        var _a;
         this._showListView = false;
-        this._features.viewModel.featureMenuOpen = false;
-        this._features.close();
+        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
@@ -221,11 +123,21 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         await this._getTranslations();
         this._popupUtils = new 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;
+        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";
@@ -233,7 +145,11 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         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 shellClass = this.isMobile && !this._editRecordOpen ? "padding-top-46" : "";
-        return (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile ? (h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-cancel" }, h("span", null, this._translations.cancel))) : undefined), h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+        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 (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), 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 }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -255,6 +171,30 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         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._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
      *
@@ -381,6 +321,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         "isMobile": [4, "is-mobile"],
         "mapView": [16],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
+        "allowEditing": [4, "allow-editing"],
         "_alertOpen": [32],
         "_count": [32],
         "_editRecordOpen": [32],
@@ -397,7 +338,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["info-card", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-shell", "calcite-tooltip", "edit-card"];
+    const components = ["info-card", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-shell", "calcite-tooltip", "delete-button", "edit-card"];
     components.forEach(tagName => { switch (tagName) {
         case "info-card":
             if (!customElements.get(tagName)) {
@@ -406,65 +347,75 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$g();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$f();
             }
             break;
         case "calcite-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$e();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
+            }
+            break;
+        case "calcite-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "calcite-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "calcite-shell":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "calcite-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "delete-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/instant-apps-export.js

@@ -410,7 +410,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         const options = this.includeMap ? this.renderMapOptions() : null;
         const print = this.renderPrint();
         const panelClass = this.mode === 'inline' ? CSS.inlineContainer : CSS.popoverContainer;
-        return (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, this.includeMap ? (h("calcite-button", { appearance: "transparent", width: "full", onClick: this.setMapAreaOnClick.bind(this), disabled: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.setMapArea)) : null, h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), loading: this.exportIsLoading, disabled: this.exportIsLoading }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.export), print));
+        return (h("div", { class: panelClass }, headerTitle, includeExtraContent, includeMap, options, this.includeMap ? (h("calcite-button", { appearance: "transparent", width: "full", onClick: this.setMapAreaOnClick.bind(this), disabled: this.exportIsLoading }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.setMapArea)) : null, h("calcite-button", { width: "full", onClick: this.exportOnClick.bind(this), disabled: this.exportIsLoading }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.export), print));
     }
     renderTitle() {
         var _a;

package/dist/components/instant-apps-filter-list2.js

@@ -65,7 +65,7 @@ function resetDatePicker(datePicker) {
   }
 }
 
-const instantAppsFilterListCss = ":host{display:block}.instant-apps-filter-list *{box-sizing:border-box}.instant-apps-filter-list__container{height:100%}.instant-apps-filter-list__container calcite-block:last-of-type{margin-bottom:0}.instant-apps-filter-list__footer{padding:12px;display:flex}.instant-apps-filter-list__footer calcite-button:nth-child(2){margin-left:6px}.instant-apps-filter-list__item-container,.instant-apps-filter-list__item-container--user-input{display:flex;justify-content:space-between;align-items:center}.instant-apps-filter-list__item-container:not(:last-child),.instant-apps-filter-list__item-container--user-input:not(:last-child){padding-bottom:20px}.instant-apps-filter-list__item-container--user-input{margin:0;display:flex;flex-direction:column;align-items:flex-start}.instant-apps-filter-list__item-container--user-input>span{margin:0 0 6px;font-size:14px;font-weight:normal}.instant-apps-filter-list__item-container--user-input calcite-combobox{width:100%;font-size:16px}.instant-apps-filter-list__number-input-container{width:100%;display:flex;justify-content:center}.instant-apps-filter-list__number-input-container calcite-slider{width:90%}.instant-apps-filter-list__date-picker-input-container{display:flex;align-items:center;justify-content:unset;width:100%}.instant-apps-filter-list__date-picker-input-container calcite-action{height:48px;border-top:1px solid var(--calcite-color-border-input);border-right:1px solid var(--calcite-color-border-input);border-bottom:1px solid var(--calcite-color-border-input)}.instant-apps-filter-list__title{margin-right:20px}.instant-apps-filter-list__title>p{font-size:14px;font-weight:normal;margin:0}.instant-apps-filter-list__checkbox-container{display:flex}.instant-apps-filter-list__checkbox-container calcite-checkbox{height:18px}.instant-apps-filter-list__operator-description{margin:0;--calcite-font-size--1:12px}.instant-apps-filter-list__zoom-to{display:flex;justify-content:flex-end;margin:8px 0 20px}.instant-apps-filter-list__zoom-to calcite-action{width:-moz-min-content;width:min-content}@media (prefers-reduced-motion){.instant-apps-filter-list calcite-loader{--calcite-internal-duration-factor:2;--calcite-internal-animation-timing-slow:calc(300ms * 2)}}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__header-container{background:#2b2b2b;color:#fff}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__operator-description{background:#353535}";
+const instantAppsFilterListCss = ":host{display:block}.instant-apps-filter-list *{box-sizing:border-box}.instant-apps-filter-list__container{height:100%}.instant-apps-filter-list__container calcite-block:last-of-type{margin-bottom:0}.instant-apps-filter-list__footer{padding:12px;display:flex}.instant-apps-filter-list__footer calcite-button:nth-child(2){margin-left:6px}.instant-apps-filter-list__item-container,.instant-apps-filter-list__item-container--user-input{display:flex;justify-content:space-between;align-items:center}.instant-apps-filter-list__item-container:not(:last-child),.instant-apps-filter-list__item-container--user-input:not(:last-child){padding-bottom:20px}.instant-apps-filter-list__item-container--user-input{margin:0;display:flex;flex-direction:column;align-items:flex-start}.instant-apps-filter-list__item-container--user-input>span{margin:0 0 6px;font-size:14px;font-weight:normal}.instant-apps-filter-list__item-container--user-input calcite-combobox{width:100%}.instant-apps-filter-list__number-input-container{width:100%;display:flex;justify-content:center}.instant-apps-filter-list__number-input-container calcite-slider{width:90%}.instant-apps-filter-list__date-picker-input-container{display:flex;align-items:center;justify-content:unset;width:100%}.instant-apps-filter-list__date-picker-input-container calcite-action{height:48px;border-top:1px solid var(--calcite-color-border-input);border-right:1px solid var(--calcite-color-border-input);border-bottom:1px solid var(--calcite-color-border-input)}.instant-apps-filter-list__title{margin-right:20px}.instant-apps-filter-list__title>p{font-size:14px;font-weight:normal;margin:0}.instant-apps-filter-list__checkbox-container{display:flex}.instant-apps-filter-list__checkbox-container calcite-checkbox{height:18px}.instant-apps-filter-list__operator-description{margin:0;--calcite-font-size--1:12px}.instant-apps-filter-list__zoom-to{display:flex;justify-content:flex-end;margin:8px 0 20px}.instant-apps-filter-list__zoom-to calcite-action{width:-moz-min-content;width:min-content}@media (prefers-reduced-motion){.instant-apps-filter-list calcite-loader{--calcite-internal-duration-factor:2;--calcite-internal-animation-timing-slow:calc(300ms * 2)}}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__header-container{background:#2b2b2b;color:#fff}.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__operator-description{background:#353535}";
 
 const CSS = {
     base: 'instant-apps-filter-list',
@@ -268,12 +268,15 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
             return this.renderCombobox(layerExpression, expression);
         }
         else if (type === 'number' || type == 'range') {
-            if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down') {
+            if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
                 return this.renderCombobox(layerExpression, expression);
             }
             return this.renderNumberSlider(layerExpression, expression);
         }
         else if (type === 'date') {
+            if ((expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
+                return this.renderCombobox(layerExpression, expression);
+            }
             return this.renderDatePicker(layerExpression, expression);
         }
         return;
@@ -308,7 +311,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
                     this.resetDatePicker(expression);
                 }
                 else if (type === 'number' || type === 'range') {
-                    if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down') {
+                    if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
                         this.resetCombobox(expression);
                     }
                     else {
@@ -359,8 +362,9 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         }
     }
     resetAllFilters() {
-        var _a, _b, _c;
-        (_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.allLayers) === null || _c === void 0 ? void 0 : _c.forEach(layer => {
+        var _a, _b, _c, _d, _e;
+        const allLayersAndTables = (_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.allLayers) === null || _c === void 0 ? void 0 : _c.concat((_e = (_d = this.view) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.allTables);
+        allLayersAndTables === null || allLayersAndTables === void 0 ? void 0 : allLayersAndTables.forEach(layer => {
             var _a, _b;
             if (supportedTypes.includes(layer.type)) {
                 const fl = layer;
@@ -397,7 +401,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
             const { field } = expression;
             if (field != null) {
                 this.setExpressionFormat(layer, expression, field);
-                if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down') {
+                if ((expression === null || expression === void 0 ? void 0 : expression.numDisplayOption) === 'drop-down' || (expression === null || expression === void 0 ? void 0 : expression.displayOption) === 'drop-down') {
                     const fields = (await this.getFeatureAttributes(layer, field));
                     fields.sort((a, b) => a - b);
                     expression.fields = fields;
@@ -596,7 +600,12 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
             update = await this.updateNumberExpression(layerExpression, expression);
         }
         else if (type === 'date') {
-            update = await this.updateDateExpression(layerExpression, expression);
+            if (expression.displayOption === 'drop-down') {
+                update = await this.updateStringExpression(layerExpression, expression);
+            }
+            else {
+                update = await this.updateDateExpression(layerExpression, expression);
+            }
         }
         else if (type === 'coded-value') {
             update = this.updateCodedValueExpression(expression, layerField);
@@ -759,7 +768,7 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
     }
     updateFilter(layerExpression, defExpressions, filters) {
         const { id } = layerExpression;
-        const fl = this.view.map.findLayerById(id);
+        const fl = (this.view.map.findLayerById(id) || this.view.map.findTableById(id));
         if (fl != null) {
             if (fl.type === 'point-cloud') {
                 this.updateFilterLayerPCLFilter(fl, filters);
@@ -802,8 +811,9 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         this.initDefExpressions = {};
         this.initPointCloudFilters = {};
         this.initMapImageExpressions = {};
-        for (let i = 0; i < map.allLayers.length; i++) {
-            const layer = map.allLayers.getItemAt(i);
+        const layersAndTables = map.allLayers.concat(map.allTables);
+        for (let i = 0; i < layersAndTables.length; i++) {
+            const layer = layersAndTables.getItemAt(i);
             if (supportedTypes.includes(layer.type)) {
                 const fl = layer;
                 if (fl.type === 'point-cloud') {
@@ -999,7 +1009,8 @@ const InstantAppsFilterList = /*@__PURE__*/ proxyCustomElement(class InstantApps
         return (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) != null ? (_b = (_a = this.initMapImageExpressions) === null || _a === void 0 ? void 0 : _a[layerExpression.id]) === null || _b === void 0 ? void 0 : _b[layerExpression.sublayerId] : (_c = this.initDefExpressions) === null || _c === void 0 ? void 0 : _c[layerExpression.id];
     }
     findFilterLayer(layerExpression) {
-        const layer = this.view.map.allLayers.find(({ id }) => id === layerExpression.id);
+        const allLayersAndTables = this.view.map.allLayers.concat(this.view.map.allTables);
+        const layer = allLayersAndTables.find(({ id }) => id === layerExpression.id);
         if (layer.type === 'map-image') {
             return layer === null || layer === void 0 ? void 0 : layer.findSublayerById(layerExpression.sublayerId);
         }

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

@@ -3,7 +3,7 @@
  * 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 { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } 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';
@@ -214,7 +214,7 @@ const InstantAppsLanguageTranslator = /*@__PURE__*/ proxyCustomElement(class Ins
     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));
+        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;
@@ -294,13 +294,53 @@ const InstantAppsLanguageTranslator = /*@__PURE__*/ proxyCustomElement(class Ins
         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 this; }
     static get watchers() { return {
         "locales": ["handleLocaleChange"],
         "appSettings": ["handleAppSettings"]
     }; }
     static get style() { return instantAppsLanguageTranslatorCss; }
-}, [2, "instant-apps-language-translator", {
+}, [6, "instant-apps-language-translator", {
         "portalItem": [16],
         "appSettings": [16],
         "locales": [16],
@@ -309,7 +349,11 @@ const InstantAppsLanguageTranslator = /*@__PURE__*/ proxyCustomElement(class Ins
         "translatedLocaleInputOnChangeCallback": [16],
         "saving": [32],
         "messages": [32],
-        "isCollapse": [32]
+        "isCollapse": [32],
+        "getTranslationData": [64],
+        "setTranslationData": [64],
+        "getPortalItemResource": [64],
+        "batchWriteToPortalItemResource": [64]
     }, [[8, "translatorItemDataUpdated", "handleT9nItemUpdate"]], {
         "locales": ["handleLocaleChange"],
         "appSettings": ["handleAppSettings"]

package/dist/components/layer-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LayerList extends Components.LayerList, HTMLElement {}
+export const LayerList: {
+    prototype: LayerList;
+    new (): LayerList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/layer-list.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 { L as LayerList$1, d as defineCustomElement$1 } from './layer-list2.js';
+
+const LayerList = LayerList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LayerList, defineCustomElement };