@esri/solutions-components 0.7.17 → 0.7.18

package/dist/components/info-card2.js

@@ -6,31 +6,38 @@
 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$a } from './action.js';
-import { d as defineCustomElement$9 } from './alert.js';
-import { d as defineCustomElement$8 } from './button.js';
-import { d as defineCustomElement$7 } from './chip.js';
-import { d as defineCustomElement$6 } from './icon.js';
-import { d as defineCustomElement$5 } from './loader.js';
-import { d as defineCustomElement$4 } from './notice.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 { d as defineCustomElement$1 } from './edit-card2.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}";
+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 {
     constructor() {
         super();
         this.__registerHost();
+        this.popupClosed = createEvent(this, "popupClosed", 7);
         this.selectionChanged = createEvent(this, "selectionChanged", 7);
         this.graphics = undefined;
         this.isLoading = false;
+        this.isMobile = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
+        this._mobileTitle = "";
         this._showListView = false;
         this._translations = undefined;
     }
@@ -59,6 +66,14 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
             this._features.close();
         }
     }
+    /**
+     * 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
      */
@@ -112,11 +127,13 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     render() {
         var _a, _b, _c;
         const loadingClass = this.isLoading ? "" : "display-none";
-        const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
+        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;
-        return (h(Host, null, h("calcite-shell", null, 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", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, 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._getCount(), 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 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._getCount(), 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -146,7 +163,8 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * @protected
      */
     async _initFeaturesWidget() {
-        return await this.mapView.when(() => {
+        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,
@@ -154,7 +172,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                     visibleElements: {
                         actionBar: false,
                         closeButton: false,
-                        heading: true
+                        heading: !this.isMobile
                     }
                 });
                 this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
@@ -162,39 +180,39 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                         this._showListView = isOpen;
                     }
                 });
+                this.reactiveUtils.watch(() => this._features.viewModel.title, (title) => {
+                    this._mobileTitle = title;
+                });
                 if (this.zoomAndScrollToSelected) {
                     this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
                         if (i > -1) {
-                            this.selectionChanged.emit(this._features.selectedFeature);
+                            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();
     }
     /**
-     * Set the alertOpen member to false when the alert is closed
-     *
-     * @returns void
+     * Close the popup and emit the selected features
      */
-    _alertClosed() {
-        this._alertOpen = false;
+    _closePopup() {
+        this.popupClosed.emit();
     }
     /**
-     * Close the edit record
-     *
-     * @returns void
+     * Set the alertOpen member to false when the alert is closed
      */
-    _editRecordClosed() {
-        this._editRecordOpen = false;
+    _alertClosed() {
+        this._alertOpen = false;
     }
     /**
      * Open the edit record
-     *
-     * @returns void
      */
     _openEditRecord() {
         if (this._editEnabled) {
@@ -206,8 +224,6 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     }
     /**
      * Go to the previous feature in the features widget
-     *
-     * @returns void
      */
     _back() {
         this._features.previous();
@@ -215,8 +231,6 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     }
     /**
      * Go to the next feature in the features widget
-     *
-     * @returns void
      */
     _next() {
         this._features.next();
@@ -260,29 +274,33 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     get el() { return this; }
     static get watchers() { return {
         "graphics": ["graphicsWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
     static get style() { return infoCardCss; }
 }, [0, "info-card", {
         "graphics": [16],
         "isLoading": [4, "is-loading"],
+        "isMobile": [4, "is-mobile"],
         "mapView": [16],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "_alertOpen": [32],
         "_count": [32],
         "_editRecordOpen": [32],
+        "_mobileTitle": [32],
         "_showListView": [32],
         "_translations": [32],
         "getSelectedFeature": [64]
     }, [[8, "closeEdit", "closeEdit"], [8, "refreshGraphics", "refreshGraphics"]], {
         "graphics": ["graphicsWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["info-card", "calcite-action", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "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-notice", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-shell", "calcite-tooltip", "edit-card"];
     components.forEach(tagName => { switch (tagName) {
         case "info-card":
             if (!customElements.get(tagName)) {
@@ -291,35 +309,55 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$e();
+            }
+            break;
+        case "calcite-action-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
             }
             break;
         case "calcite-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$c();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$b();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$a();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$9();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$8();
             }
             break;
         case "calcite-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-scrim":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }