@esri/solutions-components 0.10.25 → 0.10.26

package/dist/collection/components/layer-table/layer-table.js

@@ -61,6 +61,7 @@ export class LayerTable {
         this._translations = undefined;
         this._fullTextSearchInfo = undefined;
         this._searchPlaceHolder = '';
+        this._size = 0;
     }
     //--------------------------------------------------------------------------
     //
@@ -485,6 +486,12 @@ export class LayerTable {
         this._allIds = [];
         this._clearSelection();
     }
+    /**
+     * Clears the selection from table
+     */
+    clearSelection() {
+        this._clearSelection();
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -509,13 +516,13 @@ export class LayerTable {
     render() {
         const tableNodeClass = this._fetchingData ? "display-none" : "";
         const loadingClass = this._fetchingData ? "" : "display-none";
-        const total = this._allIds.length.toString();
+        const total = this._size.toString();
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: '0e14ca1d140deaad1b6b1c299a29b160c983a84f' }, h("calcite-shell", { key: '6da3feca55877d2ca3ac4df044ece161964c5b30' }, this._getTableControlRow("header"), h("div", { key: '987267204fadb58d10741586adf9c2603a2c782d', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '3d8fb99e75c7456082846a1876460514d3b36cc3', class: "height-full width-full" }, showSearch &&
-            h("calcite-input", { key: '2251920546d0948bd67eb705ea68a4cdf7c735c1', clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" }), h("calcite-loader", { key: '8c9deefa9aef65838e93171505c1b4a5bc34d7d9', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '376ad6c086b24157533054c027a9738738625630', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '46394d7e108068600980efd766fbf5d91243f3c9' }, h("calcite-shell", { key: 'd831121a56070552139386033b02ddc2531c29e9' }, this._getTableControlRow("header"), h("div", { key: '591e0b0bba19f1dbe99049a470b5d3c04253a2c2', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd70244a3c989a5bea8bbbaf33c4ebe9c04fc4515', class: "height-full width-full" }, showSearch &&
+            h("calcite-input", { key: 'b8418eca07a07956f702a09aa642255d05742b14', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" }), h("calcite-loader", { key: '4478be9175933c1b076f7011bd39aaf9adf7faad', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '2a77b11f65188931041d781cde17143c90962931', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal()));
     }
@@ -527,14 +534,15 @@ export class LayerTable {
             this._resizeObserver.observe(this._toolbar);
             this._observerSet = true;
         }
-        document.onclick = (e) => this._handleDocumentClick(e);
-        document.onkeydown = (e) => this._handleKeyDown(e);
-        document.onkeyup = (e) => this._handleKeyUp(e);
     }
     /**
      * Called after the component is rendered
      */
     componentDidRender() {
+        // need to be called after each render to get the clicked mouseEvent 
+        document.onclick = (e) => this._handleDocumentClick(e);
+        document.onkeydown = (e) => this._handleKeyDown(e);
+        document.onkeyup = (e) => this._handleKeyUp(e);
         this._updateToolbar();
     }
     //--------------------------------------------------------------------------
@@ -584,9 +592,12 @@ export class LayerTable {
                 const searchQueryParams = this._layer.createQuery();
                 searchQueryParams.fullText = this._fullTextSearchInfo;
                 const searchedIds = await this._layer.queryObjectIds(searchQueryParams);
-                this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+                await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
             }
         }
+        //Added timeout and table.refresh() to avoid the issue in which we see empty table records after searching in combination to filter/reset filter
+        await new Promise(resolve => setTimeout(resolve, 800));
+        await this._updateAllIds();
     }
     /**
      * Clears the applied search expression on the layer
@@ -610,7 +621,7 @@ export class LayerTable {
      * Update the search expression in layer
      * @param searchedIds Array of objectIds satisfying the full search text
      */
-    _updateSearchDefinitionExpression(searchedIds) {
+    async _updateSearchDefinitionExpression(searchedIds) {
         const defExp = this._layer.definitionExpression;
         if (searchedIds?.length) {
             const searchExp = `objectId in(${searchedIds})`;
@@ -651,7 +662,7 @@ export class LayerTable {
                     const fieldInfo = this._layer.getField(fieldName.trim());
                     fieldAlias.push(fieldInfo.alias);
                 });
-                this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", fieldAlias.join(' | '));
+                this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", fieldAlias.join(', '));
                 this._fullTextSearchInfo.push({
                     'onFields': ['*'],
                     'searchTerm': '',
@@ -715,14 +726,14 @@ export class LayerTable {
     _getFieldlist() {
         return this._columnsInfo ? (h("calcite-dropdown-group", { "selection-mode": "multiple" }, Object.keys(this._columnsInfo).map(k => {
             const selected = this._columnsInfo[k];
-            return (h("calcite-dropdown-item", { id: `layer-table-${k.toLowerCase().replaceAll(" ", "")}`, onClick: (e) => {
+            return (h("calcite-dropdown-item", { id: `layer-table-${k.toLowerCase().replaceAll(" ", "")}`, label: k, onClick: (e) => {
                     const target = e.target;
-                    this._columnsInfo[target.id] = target.selected;
+                    this._columnsInfo[target.label] = target.selected;
                     if (!target.selected) {
-                        this._table.hideColumn(target.id);
+                        this._table.hideColumn(target.label);
                     }
                     else {
-                        this._table.showColumn(target.id);
+                        this._table.showColumn(target.label);
                     }
                 }, selected: selected }, k));
         }))) : undefined;
@@ -778,7 +789,8 @@ export class LayerTable {
      */
     _initToolInfos() {
         const featuresSelected = this._featuresSelected();
-        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
+        // hide multiple edits for R03
+        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate && false;
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
@@ -801,7 +813,7 @@ export class LayerTable {
                     disabled: false,
                     isOverflow: false
                 } : undefined,
-                !this.mapHidden ? {
+                showMultipleEdits ? {
                     active: false,
                     icon: "pencil",
                     indicator: false,
@@ -814,8 +826,8 @@ export class LayerTable {
                     active: undefined,
                     icon: "trash",
                     indicator: undefined,
-                    label: undefined,
-                    func: undefined,
+                    label: this._translations.delete,
+                    func: () => undefined,
                     disabled: !featuresSelected,
                     isDanger: true,
                     isOverflow: false
@@ -1055,7 +1067,7 @@ export class LayerTable {
     _getDropdown(id) {
         const dropdownItems = this._getDropdownItems();
         return dropdownItems.length > 0 ? (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this._layer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
-            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: item.disabled ? "none" : "single" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
+            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
     }
     /**
@@ -1155,7 +1167,7 @@ export class LayerTable {
      */
     _getDangerAction(icon, label, func, disabled) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
+        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Return all currently selected IDs from the table
@@ -1204,6 +1216,11 @@ export class LayerTable {
                 this._table.highlightIds.on("change", (evt) => {
                     void this._handleOnChange(evt);
                 });
+                //Add handle to watch size of the table and update the state to reflect the total count
+                const handle = this.reactiveUtils.watch(() => this._table.size, (size) => {
+                    this._size = size;
+                });
+                this._table.viewModel.addHandles(handle);
             });
         }
     }
@@ -1506,7 +1523,10 @@ export class LayerTable {
      */
     _handleDocumentClick(e) {
         const id = e.target?.id;
-        if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "solutions-subset-list" && id !== "chevron-right") {
+        if (id.startsWith('layer-table-')) {
+            this._moreDropdown.open = true;
+        }
+        else if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "chevron-right") {
             this._closeShowHide();
             if (this._moreDropdown) {
                 this._moreDropdown.open = false;
@@ -1722,7 +1742,7 @@ export class LayerTable {
         });
     }
     /**
-     * Refreshes the table and maintains the curent scroll position
+     * Refreshes the table and maintains the current scroll position
      * @protected
      */
     async _refresh() {
@@ -2227,7 +2247,8 @@ export class LayerTable {
             "_toolInfos": {},
             "_translations": {},
             "_fullTextSearchInfo": {},
-            "_searchPlaceHolder": {}
+            "_searchPlaceHolder": {},
+            "_size": {}
         };
     }
     static get events() {
@@ -2418,6 +2439,12 @@ export class LayerTable {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "clearSelection",
+                "method": "clearSelection",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/layout-manager/layout-manager.js

@@ -76,7 +76,7 @@ export class LayoutManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7c6f114c7869bdcb524db517c95574aeb9f29155' }, h("div", { key: 'f8769f2c6b097a562962006aaa5bfdb81d812edc', class: "display-flex" }, h("div", { key: 'f82915c927a606a5c33dc92e5cf5f635e4decaaf', class: "display-flex action-center" }, h("calcite-icon", { key: '83f787675dbe08bafc3f92726455994ed23a85d9', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: 'b8a8d4b5b1d5ee151800f34d3d47642b51a0a691', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: 'c02afded78e72617bcb38a68fee37715065ac42e', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: '35f9db2d7e71945ab7840fbc698765159988da9b', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+        return (h(Host, { key: '2fe2540a25e70ec6785aa97ade592a93c1112ecf' }, h("div", { key: 'df036d69f984e688c560d60279c463de9393d0f7', class: "display-flex" }, h("div", { key: 'b143b92ebec8a800466cee16e47b60afd768861e', class: "display-flex action-center" }, h("calcite-icon", { key: '5b787b3499c638e1e54eddf8b10448fe782aeb15', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: '372cdbf2f14d7305b0dcb2e398962e39922f287d', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: '4a8cc85bac0524c1dac37df79026bc4ec9ac4588', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: '25da1130e266e7ba24abc1caa9b8a72d858c07a1', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/list-flow-item/list-flow-item.js

@@ -62,7 +62,7 @@ export class ListFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'e46b9c3bd5df9c46f8fb6764909737a81331e505' }, h("slot", { key: 'f9f71fe5d6fc66ba5a700178d4c1ec53adbbabc0' })));
+        return (h(Host, { key: '3e655a71f984bc7619b007ff0c17bf0418d9dbac' }, h("slot", { key: '6dfb3b7a1fd4987a99d7b91a6ce2cc2f99cb7d28' })));
     }
     static get is() { return "list-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/location-flow-item/location-flow-item.js

@@ -62,7 +62,7 @@ export class LocationFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'e5b9dace0b0ca2282860aa62b72224b2d3aab138' }, h("slot", { key: 'e33561c8c4172d7d19560c364a971774d681c577' })));
+        return (h(Host, { key: 'af917a1b598dbf7b9a47d6f8781e352dbf7a5b9b' }, h("slot", { key: 'd38030d3d64ca1da2bbea5edafcf496ec665c0c4' })));
     }
     static get is() { return "location-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-card/map-card.css

@@ -21,13 +21,17 @@
 }
 
 .map-height {
-  height: calc(100% - 51px);
+  height: calc(100% - 53px);
 }
 
 .height-full {
   height: 100%;
 }
 
+.border-bottom-3px {
+  border-bottom: 3px solid var(--calcite-color-border-3);
+}
+
 .height-50-px {
   height: 50px;
 }
@@ -44,4 +48,8 @@
 
 .display-none {
   display: none;
-}
+}
+
+.display-block {
+  display: block;
+}