@esri/solutions-components 0.6.20 → 0.6.22

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

@@ -1708,7 +1708,7 @@ const MapLayerPicker = class {
     this.placeholderIcon = "";
     this.selectedIds = [];
     this.scale = "m";
-    this.showTables = true;
+    this.showTables = undefined;
     this.type = "select";
     this._hasValidLayers = true;
     this.ids = [];

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

@@ -102,7 +102,7 @@ const CardManager = class {
 };
 CardManager.style = cardManagerCss;
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}.esri-field-column__header-content{background-color:var(--calcite-ui-foreground-3)}";
 
 const LayerTable = class {
   constructor(hostRef) {
@@ -290,7 +290,7 @@ const LayerTable = class {
     var _a;
     const featuresSelected = this._selectedIndexes.length > 0;
     const id = "more-table-options";
-    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), index.h("calcite-dropdown", { disabled: this._layer === undefined }, index.h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), index.h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), index.h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV))), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, index.h("span", null, this._translations.moreOptions))));
+    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), index.h("calcite-dropdown", { disabled: this._layer === undefined }, index.h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), index.h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), index.h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV))), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, index.h("span", null, this._translations.moreOptions))));
   }
   /**
    * Get an action and tooltip

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -227,7 +227,7 @@ const CrowdsourceManager = class {
    */
   _getMapAndCard(layoutMode, panelOpen, hideMap) {
     const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    return this.classicGrid ? (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode(layoutMode, hideMap)));
+    return this.classicGrid ? (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(), this._getMapNode(layoutMode, hideMap))) : (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode()));
   }
   /**
    * Get the map node based for the current layout options
@@ -251,12 +251,12 @@ const CrowdsourceManager = class {
    * @returns the expand node
    * @protected
    */
-  _getPopupExpandNode(layoutMode, hideMap) {
+  _getPopupExpandNode() {
     const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
     const id = "expand-popup";
     const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
     const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return (index.h("div", { class: "calcite-mode-dark" }, index.h("calcite-panel", null, index.h("div", { class: "display-flex align-items-center", slot: "header-content" }, index.h("calcite-icon", { icon: "information", scale: "s" }), index.h("div", { class: "padding-inline-start-75" }, this._translations.information)), index.h("calcite-action", { class: "height-49-px", icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), index.h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)), this._getCardNode(layoutMode, hideMap))));
+    return (index.h("div", { class: "calcite-mode-dark height-full" }, index.h("calcite-panel", null, index.h("div", { class: "display-flex align-items-center", slot: "header-content" }, index.h("calcite-icon", { icon: "information", scale: "s" }), index.h("div", { class: "padding-inline-start-75" }, this._translations.information)), index.h("calcite-action", { class: "height-49-px", icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), index.h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)), this._getCardNode())));
   }
   /**
    * Toggle the popup information
@@ -275,11 +275,9 @@ const CrowdsourceManager = class {
    * @returns the map node
    * @protected
    */
-  _getCardNode(layoutMode, hideMap) {
-    const cardManagerHeight = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "" :
-      layoutMode === interfaces.ELayoutMode.GRID && !this._expandPopup && !hideMap ? "height-50" : "";
-    const cardManagerContainer = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ?
-      "width-full adjusted-height-100" : this._expandPopup ? "width-50 adjusted-height-100-50" : "width-50 height-full";
+  _getCardNode() {
+    const cardManagerHeight = !this._expandPopup ? "height-50" : "height-full";
+    const cardManagerContainer = this._expandPopup ? "width-50 adjusted-height-100-50" : "width-50 height-full";
     const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
     return (index.h("div", { class: `${cardManagerContainer} ${themeClass}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }

package/dist/cjs/edit-card_2.cjs.entry.js

@@ -27,6 +27,7 @@ const EditCard = class {
     this.mapView = undefined;
     this.open = false;
     this.graphicIndex = 0;
+    this._editorLoading = false;
     this._translations = undefined;
   }
   //--------------------------------------------------------------------------
@@ -46,11 +47,13 @@ const EditCard = class {
   async openWatchHandler(v) {
     var _a;
     if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
+      this._editorLoading = true;
       this._initEditorWidget();
       if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
         await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
         this._shouldClose = true;
       }
+      this._editorLoading = false;
     }
     if (!v) {
       this._shouldClose = false;
@@ -90,11 +93,13 @@ const EditCard = class {
         this._layerEditHandle.remove();
       }
       this._layerEditHandle = this._layer.on("edits", () => {
+        this._editorLoading = true;
         this.editsComplete.emit();
         this._shouldClose = false;
         this._initEditorWidget();
         void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
         this._shouldClose = true;
+        this._editorLoading = false;
       });
     }
   }
@@ -107,7 +112,9 @@ const EditCard = class {
     // when you use MULTI edit mode...is fine in SINGLE
     const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
       !this.graphics[0].layer.editingEnabled : true;
-    return (index.h(index.Host, null, index.h("div", { class: "position-relative" }, editDisabled ? (index.h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, index.h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, index.h("div", { slot: "content" }, index.h("div", { id: "feature-form", ref: (el) => this._editContainer = el })))));
+    const tableNodeClass = this._editorLoading ? "display-none" : "";
+    const loadingClass = this._editorLoading ? "" : "display-none";
+    return (index.h(index.Host, null, index.h("div", { class: "position-relative" }, editDisabled ? (index.h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, index.h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, index.h("div", { slot: "content" }, index.h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), index.h("calcite-loader", { class: loadingClass, scale: "s" })))));
   }
   //--------------------------------------------------------------------------
   //
@@ -193,7 +200,7 @@ const EditCard = class {
 };
 EditCard.style = editCardCss;
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.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-ui-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-ui-foreground-1) !important;height:100% !important}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.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-ui-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-ui-foreground-1) !important;height:100% !important}";
 
 const InfoCard = class {
   constructor(hostRef) {