@esri/solutions-components 0.10.16 → 0.10.18

package/dist/components/layer-table2.js

@@ -9,26 +9,27 @@ import { g as getLocaleComponentStrings } from './locale.js';
 import { b as goToSelection, c as getFeatureLayerView, g as getLayerOrTable } from './mapViewUtils.js';
 import { b as queryAllIds, c as queryAllOidsWithQueryFeatures, d as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
-import { d as defineCustomElement$D } from './action.js';
-import { d as defineCustomElement$C } from './action-bar.js';
-import { d as defineCustomElement$B } from './action-group.js';
-import { d as defineCustomElement$A } from './action-menu.js';
-import { d as defineCustomElement$z } from './block.js';
-import { d as defineCustomElement$y } from './button.js';
-import { d as defineCustomElement$x } from './checkbox.js';
-import { d as defineCustomElement$w } from './chip.js';
-import { d as defineCustomElement$v } from './combobox.js';
-import { d as defineCustomElement$u } from './combobox-item.js';
-import { d as defineCustomElement$t } from './date-picker.js';
-import { d as defineCustomElement$s } from './date-picker-day.js';
-import { d as defineCustomElement$r } from './date-picker-month.js';
-import { d as defineCustomElement$q } from './date-picker-month-header.js';
-import { d as defineCustomElement$p } from './dropdown.js';
-import { d as defineCustomElement$o } from './dropdown-group.js';
-import { d as defineCustomElement$n } from './dropdown-item.js';
-import { d as defineCustomElement$m } from './graph.js';
-import { d as defineCustomElement$l } from './handle.js';
-import { d as defineCustomElement$k } from './icon.js';
+import { d as defineCustomElement$E } from './action.js';
+import { d as defineCustomElement$D } from './action-bar.js';
+import { d as defineCustomElement$C } from './action-group.js';
+import { d as defineCustomElement$B } from './action-menu.js';
+import { d as defineCustomElement$A } from './block.js';
+import { d as defineCustomElement$z } from './button.js';
+import { d as defineCustomElement$y } from './checkbox.js';
+import { d as defineCustomElement$x } from './chip.js';
+import { d as defineCustomElement$w } from './combobox.js';
+import { d as defineCustomElement$v } from './combobox-item.js';
+import { d as defineCustomElement$u } from './date-picker.js';
+import { d as defineCustomElement$t } from './date-picker-day.js';
+import { d as defineCustomElement$s } from './date-picker-month.js';
+import { d as defineCustomElement$r } from './date-picker-month-header.js';
+import { d as defineCustomElement$q } from './dropdown.js';
+import { d as defineCustomElement$p } from './dropdown-group.js';
+import { d as defineCustomElement$o } from './dropdown-item.js';
+import { d as defineCustomElement$n } from './graph.js';
+import { d as defineCustomElement$m } from './handle.js';
+import { d as defineCustomElement$l } from './icon.js';
+import { d as defineCustomElement$k } from './input.js';
 import { d as defineCustomElement$j } from './input-date-picker.js';
 import { d as defineCustomElement$i } from './input-text.js';
 import { d as defineCustomElement$h } from './label2.js';
@@ -49,7 +50,7 @@ import { d as defineCustomElement$3 } from './instant-apps-filter-list2.js';
 import { d as defineCustomElement$2 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}.esri-feature-table__table-container{height:100%}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}.esri-feature-table__table-container{height:100%}";
 const LayerTableStyle0 = layerTableCss;
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
@@ -90,6 +91,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._showOnlySelected = false;
         this._toolInfos = undefined;
         this._translations = undefined;
+        this._fullTextSearchInfo = undefined;
+        this._searchPlaceHolder = '';
     }
     get el() { return this; }
     //--------------------------------------------------------------------------
@@ -249,6 +252,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * IToolSizeInfo[]: Id and Width for the current tools
      */
     _toolbarSizeInfos;
+    /**
+     * string the current search expression
+     */
+    _searchExpression;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -345,6 +352,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         }
         if (this.mapView) {
             this._floorExpression = undefined;
+            this._searchExpression = undefined;
             this._updateShareUrl();
             this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
                 void this._mapClicked(event);
@@ -391,13 +399,13 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Reset the filter
      */
     async filterReset() {
-        void this._handleFilterListReset();
+        await this._handleFilterListReset();
     }
     /**
      * Updates the filter
      */
     async filterUpdate() {
-        this._handleFilterUpdate();
+        await this._handleFilterUpdate();
     }
     /**
      * Closes the filter
@@ -409,7 +417,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * refresh the feature table
      */
     async refresh() {
-        await this._refresh();
+        if (this._table) {
+            await this._refresh();
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -456,10 +466,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         }
     }
     /**
-   * Handles layer selection change to show new table
-   *
-   * @param evt CustomEvent the id for the current layer
-   */
+     * Handles layer selection change to show new table
+     *
+     * @param evt CustomEvent the id for the current layer
+     */
     async layerSelectionChange(evt) {
         await this._layerSelectionChanged(evt);
     }
@@ -529,10 +539,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const total = this._allIds.length.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: '388b0c1f6fc251361b3e1d93310c5077a8244f1f' }, h("calcite-shell", { key: 'ed4d6f8b884ecba4dbcd6b747528fd2e83a2717d' }, this._getTableControlRow("header"), h("div", { key: '6d86a54602feda5dad9e9d4097c9b8e3fe80227c', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'dc4c986af144111acbd21aee82318c90ee920a42', class: "height-full width-full" }, h("calcite-loader", { key: 'd96bbbfa441f9e968fd04e5d17b80c298b690a49', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'afa9e7dea3b195004ef258745b642c05a77ad62d', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '3bdcab95ec86da387ae93e62a0b87856010c6f8c' }, h("calcite-shell", { key: 'cbf48d44ae4d480e904093e320331bdf714ed1cd' }, this._getTableControlRow("header"), h("div", { key: '96a1806648eb3edaecae575088873d1a8e255e0d', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '085137217d77556344bb47e34279e0f16434e268', class: "height-full width-full" }, showSearch &&
+            h("calcite-input", { key: '5defb981e7a5299e9f9d2a17bb9bf2040c68fdc7', clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" }), h("calcite-loader", { key: '432073ef427c020b822d804b36213fe969f4754c', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '1e987a9ecf5779c901f96abc092ad4944a80a4ab', 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()));
+            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal()));
     }
     /**
      * Called once after the component is loaded
@@ -574,6 +586,107 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.reactiveUtils = reactiveUtils;
         this.TableTemplate = TableTemplate;
     }
+    /**
+     * Search using the fullTextSearch on layer and filter the table
+     *
+     * @param event The input change event
+     */
+    async _searchTextChanged(event) {
+        this._fullTextSearchInfo.forEach(searchInfo => {
+            searchInfo.searchTerm = event.target.value;
+        });
+        void this._searchFullText();
+    }
+    /**
+     * Search using the fullTextSearch on layer and filter the table
+     *
+     */
+    async _searchFullText() {
+        //always clear previous search definition
+        if (this._searchExpression) {
+            this._clearSearchDefinitionExpression();
+        }
+        if (this._fullTextSearchInfo.length) {
+            if (this._fullTextSearchInfo[0].searchTerm) {
+                const searchQueryParams = this._layer.createQuery();
+                searchQueryParams.fullText = this._fullTextSearchInfo;
+                const searchedIds = await this._layer.queryObjectIds(searchQueryParams);
+                this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+            }
+        }
+    }
+    /**
+     * Clears the applied search expression on the layer
+     *
+     */
+    _clearSearchDefinitionExpression() {
+        const defExp = this._layer.definitionExpression;
+        //remove previous search expression first
+        if (this._searchExpression && defExp?.indexOf(this._searchExpression) > -1) {
+            // eslint-disable-next-line unicorn/prefer-ternary
+            if (defExp?.indexOf(' AND (' + this._searchExpression) > -1) {
+                this._layer.definitionExpression = defExp.replace(` AND (${this._searchExpression})`, '');
+            }
+            else {
+                this._layer.definitionExpression = defExp.replace(this._searchExpression, '');
+            }
+        }
+        this._searchExpression = undefined;
+    }
+    /**
+     * Update the search expression in layer
+     * @param searchedIds
+     */
+    _updateSearchDefinitionExpression(searchedIds) {
+        const defExp = this._layer.definitionExpression;
+        if (searchedIds?.length) {
+            const searchExp = `objectId in(${searchedIds})`;
+            this._layer.definitionExpression = defExp?.indexOf(this._searchExpression) > -1 ?
+                defExp.replace(this._searchExpression, searchExp) :
+                defExp ? `${defExp} AND (${searchExp})` : searchExp;
+            this._searchExpression = searchExp;
+        }
+        else {
+            this._clearSearchDefinitionExpression();
+        }
+    }
+    /**
+     * Validates if full text search is enabled and and indexes for fullTextSearch available on the layer
+     */
+    _canShowFullTextSearch() {
+        return ((this._layer?.capabilities)?.query)?.supportsFullTextSearch &&
+            this._layer.indexes.items.filter(i => i.indexType == 'FullText').length > 0;
+    }
+    /**
+     * Create list of full text search info
+     */
+    _getFullTextSearchInfo() {
+        this._fullTextSearchInfo = [];
+        //combine all the fullText index
+        if (((this._layer?.capabilities)?.query)?.supportsFullTextSearch) {
+            const fullTextIndexes = this._layer.indexes?.filter(i => i.indexType == 'FullText');
+            if (fullTextIndexes?.length) {
+                //create the search placeholder text
+                const onFields = [];
+                fullTextIndexes.forEach((index) => {
+                    onFields.push(...index.fields.split(','));
+                });
+                //get field alias for fields
+                const fieldAlias = [];
+                onFields.forEach(fieldName => {
+                    //We splitting the fields array so we get leading/trailing spaces, hence trim the fieldName
+                    const fieldInfo = this._layer.getField(fieldName.trim());
+                    fieldAlias.push(fieldInfo.alias);
+                });
+                this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", fieldAlias.join(' | '));
+                this._fullTextSearchInfo.push({
+                    'onFields': ['*'],
+                    'searchTerm': '',
+                    'searchType': 'prefix'
+                });
+            }
+        }
+    }
     /**
      * Update the toolbar when its size changes
      */
@@ -589,7 +702,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _getTableControlRow(slot) {
         const id = "more-table-options";
-        return (h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), !this.isMobile ? this._getDropdown(id) : undefined, this.enableShare && !this.isMobile ? this._getShare("share") : undefined));
+        return (h("div", { class: "display-flex border-bottom height-51-px", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), !this.isMobile ? this._getDropdown(id) : undefined, this.enableShare && !this.isMobile ? this._getShare("share") : undefined));
     }
     /**
      * Gets a row of controls that can be used for various interactions with the table
@@ -723,7 +836,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                     func: () => alert(this._translations.editMultiple),
                     disabled: !showMultipleEdits,
                     isOverflow: false,
-                    isSublist: false
                 } : undefined,
                 this._deleteEnabled ? {
                     active: undefined,
@@ -1416,6 +1528,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Close show/hide dropdown when the user clicks outside of it
+     * @param e clicked event from mouse
+     * @protected
      */
     _handleDocumentClick(e) {
         const id = e.target?.id;
@@ -1447,21 +1561,25 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Show filter component in modal
      *
      * @returns node to interact with any configured filters for the current layer
+     * @protected
      */
     _filterModal() {
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
+     * @protected
      */
-    _handleFilterListReset() {
+    async _handleFilterListReset() {
         this._filterActive = false;
         this._updateShareUrl();
+        await this._searchFullText();
     }
     /**
      * Check if the layers definitionExpression has been modified
+     * @protected
      */
-    _handleFilterUpdate() {
+    async _handleFilterUpdate() {
         const defExp = this._layer.definitionExpression;
         if (this._floorExpression) {
             const regEx = new RegExp(`${this._floorField} = ['].+[']`, "gm");
@@ -1472,9 +1590,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._filterActive = this._definitionExpression !== this._layer.definitionExpression &&
             (this._floorExpression ? this._layer.definitionExpression !== this._floorExpression : true);
         this._updateShareUrl();
+        await this._searchFullText();
     }
     /**
      * Close the filter modal
+     * @protected
      */
     async _closeFilter() {
         if (this._filterOpen) {
@@ -1487,6 +1607,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Handle map click events to keep table and map click selection in sync
      *
      * @param evt IMapClick map click event details
+     * @protected
      */
     async _mapClicked(evt) {
         const opts = {
@@ -1512,6 +1633,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Select or deselect all rows
+     * @protected
      */
     _selectAll() {
         const ids = this._allIds;
@@ -1525,6 +1647,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     /**
      * Toggle the show only selected flag
      *  When showOnly is true only the selected features will be shown in the table
+     * @protected
      */
     _toggleShowSelected() {
         this._showOnlySelected = !this._showOnlySelected;
@@ -1537,6 +1660,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Clears the selected indexes
+     * @protected
      */
     _clearSelection() {
         this.selectedIds = [];
@@ -1546,6 +1670,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * When true the filter modal will be displayed
+     * @protected
      */
     _toggleFilter() {
         this._filterOpen = !this._filterOpen;
@@ -1553,6 +1678,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     /**
      * Store any filters for the current layer.
      * Should only occur on layer change
+     * @protected
      */
     _initLayerExpressions() {
         const layerExpressions = this.mapInfo?.filterConfig?.layerExpressions;
@@ -1564,6 +1690,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Select all rows that are not currently selectd
+     * @protected
      */
     _switchSelected() {
         const currentIndexes = [...this.selectedIds];
@@ -1583,6 +1710,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Export all selected rows as CSV
      *
      * @returns a promise that will resolve when the operation is complete
+     * @protected
      */
     async _exportToCSV() {
         const exportInfos = {};
@@ -1610,6 +1738,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Set the loading prop in the stored toolInfos
+     * @protected
      */
     _updateToolInfoLoading(name, isLoading) {
         this._toolInfos.some(tool => {
@@ -1621,15 +1750,18 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Refreshes the table and maintains the curent scroll position
+     * @protected
      */
     async _refresh() {
         await this._table.refresh();
+        this._allIds = await queryAllIds(this._layer);
         this.featureSelectionChange.emit(this.selectedIds);
     }
     /**
      * Zoom to all selected features
      *
      * @returns a promise that will resolve when the operation is complete
+     * @protected
      */
     async _zoom() {
         if (this._layer) {
@@ -1643,14 +1775,16 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @param evt CustomEvent the id for the current layer
      *
      * @returns a promise that will resolve when the operation is complete
+     * @protected
      */
     async _layerSelectionChanged(evt) {
         const id = evt.detail[0];
         if (id !== this._layer?.id || this._featuresEmpty()) {
             this._fetchingData = true;
             const layer = await getLayerOrTable(this.mapView, id);
-            await layer.when(() => {
+            layer && await layer.when(() => {
                 this._layer = layer;
+                this._getFullTextSearchInfo();
             });
         }
         this._fetchingData = false;
@@ -1661,6 +1795,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @param id item ID of the current map
      *
      * @returns a list of column templates if they exist
+     * @protected
      */
     _getColumnTemplates(id, fieldInfos) {
         let layerOption;
@@ -1706,6 +1841,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Get the menu config that adds the ability to hide the current column
+     * @protected
      */
     _getMenuConfig(name) {
         return {
@@ -1723,6 +1859,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Hide the table column for the provided name
+     * @protected
      */
     _handleHideClick(name) {
         this._columnsInfo[name] = false;
@@ -1791,6 +1928,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "_showOnlySelected": [32],
         "_toolInfos": [32],
         "_translations": [32],
+        "_fullTextSearchInfo": [32],
+        "_searchPlaceHolder": [32],
         "filterReset": [64],
         "filterUpdate": [64],
         "closeFilter": [64],
@@ -1813,7 +1952,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["layer-table", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input-date-picker", "calcite-input-text", "calcite-label", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-slider", "calcite-tooltip", "delete-button", "instant-apps-filter-list", "instant-apps-social-share", "map-layer-picker"];
+    const components = ["layer-table", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-label", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-slider", "calcite-tooltip", "delete-button", "instant-apps-filter-list", "instant-apps-social-share", "map-layer-picker"];
     components.forEach(tagName => { switch (tagName) {
         case "layer-table":
             if (!customElements.get(tagName)) {
@@ -1822,100 +1961,105 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$E();
             }
             break;
         case "calcite-action-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$D();
             }
             break;
         case "calcite-action-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$C();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "calcite-block":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "calcite-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "calcite-combobox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "calcite-combobox-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "calcite-date-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "calcite-date-picker-day":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "calcite-date-picker-month":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "calcite-date-picker-month-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "calcite-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "calcite-dropdown-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "calcite-dropdown-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "calcite-graph":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "calcite-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }

package/dist/components/layout-manager.js

@@ -69,7 +69,7 @@ const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager ext
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'b21325b44c55b4169b7c14ee8a72d4fb329049c0' }, h("div", { key: '9aa53161553d8daecde88138017758885747d357', class: "display-flex" }, h("div", { key: '4efeebd0ee5b9d288ae37a2f3697049eb71c5d4c', class: "display-flex action-center" }, h("calcite-icon", { key: 'aa2a89bc8b1974c56997478c7a1c4080e2f0e5e1', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: '920120df5f5036770308422dafe6c76201af303b', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: 'ed38dc29dd382563b9c38fd171f7380965b88fef', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: '5d09996c91decfea662e159625ab4c8dd06154ba', 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: 'abb6818ffa37aa0f868270ec6d6b8041d44099b2' }, h("div", { key: '434fdf8ae99c123373df74b36eef28153bde9b06', class: "display-flex" }, h("div", { key: '962fcc67d6b211d264aaae049545770c335a13ee', class: "display-flex action-center" }, h("calcite-icon", { key: '6adbcb918d749c68c2c6071e1ec483324aa0f7d1', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: '5197e76bcfff70f204716489ed67466a0cfed0ef', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: '9af1ed841241eaec81d52d5c586a8e138a3c266b', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: '2b6a46642a794715225d0e49a2b75f0ff1df7079', 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/components/list-flow-item.js

@@ -51,7 +51,7 @@ const ListFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class ListFlowItem exten
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'de2fbee0068872b2eed39cb528169156a4f69615' }, h("slot", { key: '2fe9659669fe24fd4921c64548dcca0ed57111b9' })));
+        return (h(Host, { key: '184c77ba240a38a47fa12fdd7a5fd294ff0cc4e5' }, h("slot", { key: '67984b53c6b441e16f624bff775b83cc56ddbcf2' })));
     }
     static get style() { return ListFlowItemStyle0; }
 }, [1, "list-flow-item"]);

package/dist/components/list.js

@@ -25,7 +25,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     container: "container",

package/dist/components/loadable.js

@@ -9,7 +9,7 @@ import { i as isBrowser } from './browser.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();