@esri/solutions-components 0.8.8 → 0.8.9

package/dist/assets/t9n/crowdsource-reporter/resources.json

@@ -17,5 +17,7 @@
   "featureEditFormInfoMsg": "Please provide the details.",
   "currentLocationMsg": "Use my current location",
   "addLocationMsg": "Please add a location.",
-  "submitMsg": "Thank you! Your report was successfully submitted."
+  "submitMsg": "Thank you! Your report was successfully submitted.",
+  "filterLayerTitle": "Filter: {{title}}",
+  "indexOfTotal": "{{index}} of {{total}}"
 }

package/dist/assets/t9n/crowdsource-reporter/resources_en.json

@@ -17,5 +17,7 @@
   "featureEditFormInfoMsg": "Please provide the details.",
   "currentLocationMsg": "Use my current location",
   "addLocationMsg": "Please add a location.",
-  "submitMsg": "Thank you! Your report was successfully submitted."
+  "submitMsg": "Thank you! Your report was successfully submitted.",
+  "filterLayerTitle": "Filter: {{title}}",
+  "indexOfTotal": "{{index}} of {{total}}"
 }

package/dist/cjs/{calcite-action-menu_2.cjs.entry.js → calcite-action-menu_3.cjs.entry.js}

@@ -307,7 +307,7 @@ ActionMenu.style = actionMenuCss;
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
  * v2.4.0
  */
-const CSS = {
+const CSS$1 = {
     container: "container",
     imageContainer: "image-container",
     closeButtonContainer: "close-button-container",
@@ -650,14 +650,14 @@ const Popover = class {
     // --------------------------------------------------------------------------
     renderCloseButton() {
         const { messages, closable } = this;
-        return closable ? (index.h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, index.h("calcite-action", { appearance: "transparent", class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
+        return closable ? (index.h("div", { class: CSS$1.closeButtonContainer, key: CSS$1.closeButtonContainer }, index.h("calcite-action", { appearance: "transparent", class: CSS$1.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, index.h("calcite-icon", { icon: "x", scale: component.getIconScale(this.scale) })))) : null;
     }
     renderHeader() {
         const { heading, headingLevel } = this;
-        const headingNode = heading ? (index.h(Heading.Heading, { class: CSS.heading, level: headingLevel }, heading)) : null;
-        return headingNode ? (index.h("div", { class: CSS.header, key: CSS.header }, headingNode, this.renderCloseButton())) : null;
+        const headingNode = heading ? (index.h(Heading.Heading, { class: CSS$1.heading, level: headingLevel }, heading)) : null;
+        return headingNode ? (index.h("div", { class: CSS$1.header, key: CSS$1.header }, headingNode, this.renderCloseButton())) : null;
     }
     render() {
         const { effectiveReferenceElement, heading, label, open, pointerDisabled, floatingLayout } = this;
@@ -672,9 +672,9 @@ const Popover = class {
             },
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: this.setTransitionEl }, arrowNode, index.h("div", { class: {
-                [CSS.hasHeader]: !!heading,
-                [CSS.container]: true,
-            } }, this.renderHeader(), index.h("div", { class: CSS.content }, index.h("slot", null)), !heading ? this.renderCloseButton() : null))));
+                [CSS$1.hasHeader]: !!heading,
+                [CSS$1.container]: true,
+            } }, this.renderHeader(), index.h("div", { class: CSS$1.content }, index.h("slot", null)), !heading ? this.renderCloseButton() : null))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -693,5 +693,112 @@ const Popover = class {
 };
 Popover.style = popoverCss;
 
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    scrim: "scrim",
+    content: "content",
+};
+const BREAKPOINTS = {
+    s: 72,
+    // medium is assumed default.
+    l: 480, // Greater than or equal to 480px.
+};
+
+const scrimCss = ":host{--calcite-scrim-background:var(--calcite-color-transparent-scrim);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}.scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-color-transparent-scrim))}.content{padding:1rem}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Scrim = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.resizeObserver = observers.createObserver("resize", () => this.handleResize());
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleDefaultSlotChange = (event) => {
+            this.hasContent = dom.slotChangeHasContent(event);
+        };
+        this.storeLoaderEl = (el) => {
+            this.loaderEl = el;
+            this.handleResize();
+        };
+        this.loading = false;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.loaderScale = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.hasContent = false;
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleChange() {
+        t9n.updateMessages(this, this.effectiveLocale);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        var _a;
+        locale.connectLocalized(this);
+        t9n.connectMessages(this);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+    }
+    async componentWillLoad() {
+        await t9n.setUpMessages(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        locale.disconnectLocalized(this);
+        t9n.disconnectMessages(this);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Method
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const { hasContent, loading, messages } = this;
+        return (index.h("div", { class: CSS.scrim }, loading ? (index.h("calcite-loader", { label: messages.loading, scale: this.loaderScale,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.storeLoaderEl })) : null, index.h("div", { class: CSS.content, hidden: !hasContent }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    }
+    getScale(size) {
+        if (size < BREAKPOINTS.s) {
+            return "s";
+        }
+        else if (size >= BREAKPOINTS.l) {
+            return "l";
+        }
+        else {
+            return "m";
+        }
+    }
+    handleResize() {
+        var _a;
+        const { loaderEl, el } = this;
+        if (!loaderEl) {
+            return;
+        }
+        this.loaderScale = this.getScale((_a = Math.min(el.clientHeight, el.clientWidth)) !== null && _a !== void 0 ? _a : 0);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+Scrim.style = scrimCss;
+
 exports.calcite_action_menu = ActionMenu;
 exports.calcite_popover = Popover;
+exports.calcite_scrim = Scrim;

package/dist/cjs/calcite-alert_4.cjs.entry.js

@@ -16,7 +16,7 @@ const openCloseComponent = require('./openCloseComponent-19a769d0.js');
 const t9n = require('./t9n-993a84de.js');
 const resources = require('./resources-dd8ff1b4.js');
 const locale$1 = require('./locale-3d0a4bc2.js');
-const mapViewUtils = require('./mapViewUtils-3e0fa457.js');
+const mapViewUtils = require('./mapViewUtils-9dc05308.js');
 const popupUtils = require('./popupUtils-6be3588c.js');
 require('./guid-ae73cd27.js');
 require('./resources-9447c777.js');
@@ -668,7 +668,7 @@ const EditCard = class {
 };
 EditCard.style = editCardCss;
 
-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}.feature-node .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 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}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.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}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand)}";
 
 const InfoCard = class {
     constructor(hostRef) {
@@ -682,6 +682,8 @@ const InfoCard = class {
         this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
+        this.paginationEnabled = true;
+        this.position = 'absolute';
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -727,6 +729,45 @@ const InfoCard = class {
     async getSelectedFeature() {
         return this._features.selectedFeature;
     }
+    /**
+     * Get the current selected feature from the Features widget
+     * @returns Promise resolving with the current feature
+     */
+    async refresh() {
+        await this.setGraphics();
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    async back() {
+        this._features.previous();
+        this._count = this._getCount();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    async next() {
+        this._features.next();
+        this._count = this._getCount();
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    async toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
+    }
+    /**
+     * update the current graphics to the features widget
+     */
+    async updateCurrentGraphic(selectedGraphic) {
+        this._features.selectedFeatureWidget.graphic = selectedGraphic;
+    }
     /**
      * Respond to and close the edit record display
      *
@@ -791,8 +832,8 @@ const InfoCard = class {
         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 feature-node " + 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)))));
+        return (index.h(index.Host, null, index.h("calcite-shell", { style: { position: this.position } }, this._getHeader(), index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), index.h("div", { class: "esri-widget feature-node " + 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", { placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", null, this._translations.edit)), this.isMobile ? (index.h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, index.h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && index.h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, index.h("div", null, index.h("calcite-button", { appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), index.h("calcite-tooltip", { placement: "top", "reference-element": "solutions-back" }, index.h("span", null, this._translations.back))), index.h("calcite-action", { class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, index.h("span", { class: "pagination-count" }, this._count)), index.h("div", null, index.h("calcite-button", { appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), index.h("calcite-tooltip", { 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -867,7 +908,7 @@ const InfoCard = class {
                 if (this.zoomAndScrollToSelected) {
                     this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
                         if (i > -1) {
-                            this.selectionChanged.emit([this._features.selectedFeature]);
+                            this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
                         }
                     });
                 }