@esri/solutions-components 0.8.2 → 0.8.3

package/dist/esm/layer-table.entry.js

@@ -0,0 +1,1483 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { l as loadModules } from './loadModules-827c5581.js';
+import { g as getLocaleComponentStrings } from './locale-d9463a95.js';
+import { c as goToSelection, g as getLayerOrTable } from './mapViewUtils-436a516e.js';
+import { b as queryAllIds, c as queryFeatureIds, d as queryFeaturesByGlobalID } from './queryUtils-2529c537.js';
+import { d as downloadCSV } from './downloadUtils-b3220f86.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './interfaces-586e863c.js';
+import './index-7fc1cba9.js';
+import './index-a1e91462.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}";
+
+const LayerTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
+        /**
+         * boolean: When true the ctrl key is currently pressed
+         */
+        this._ctrlIsPressed = false;
+        /**
+         * boolean: When true the default filter provided via url param has been honored and should now be ignored
+         */
+        this._defaultFilterHonored = false;
+        /**
+         * boolean: When true the default global id provided via url param has been honored and should now be ignored
+         */
+        this._defaultGlobalIdHonored = false;
+        /**
+         * boolean: When true the default OID provided via url param has been honored and should now be ignored
+         */
+        this._defaultOidHonored = false;
+        /**
+         * boolean: When true the observer has been set and we don't need to set it again
+         */
+        this._observerSet = false;
+        /**
+         * boolean: When true the shift key is currently pressed
+         */
+        this._shiftIsPressed = false;
+        /**
+         * boolean: When true any onChange handeling will be skipped
+         */
+        this._skipOnChange = false;
+        /**
+         * Store a reference to the table node after it's first created
+         * and initializes the FeatureTable
+         *
+         * @param node HTMLDivElement The node representing the DOM element that will contain the widget.
+         */
+        this.onTableNodeCreate = (node) => {
+            this._tableNode = node;
+        };
+        this.defaultGlobalId = undefined;
+        this.defaultLayerId = undefined;
+        this.defaultOid = undefined;
+        this.enableAutoRefresh = undefined;
+        this.enableColumnReorder = true;
+        this.enableCSV = undefined;
+        this.enableInlineEdit = undefined;
+        this.enableShare = undefined;
+        this.isMobile = undefined;
+        this.mapInfo = undefined;
+        this.mapView = undefined;
+        this.onlyShowUpdatableLayers = undefined;
+        this.selectedIds = [];
+        this.shareIncludeEmbed = undefined;
+        this.shareIncludeSocial = undefined;
+        this.showNewestFirst = undefined;
+        this.zoomAndScrollToSelected = undefined;
+        this._allIds = [];
+        this._controlsThatFit = undefined;
+        this._csvExporting = false;
+        this._fetchingData = false;
+        this._filterActive = false;
+        this._filterOpen = false;
+        this._layer = undefined;
+        this._selectAllActive = false;
+        this._showHideOpen = false;
+        this._showOnlySelected = false;
+        this._toolInfos = undefined;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Handle url defaults when defaultOid is set
+     */
+    async defaultOidWatchHandler() {
+        await this._handleDefaults();
+    }
+    /**
+     * Handle url defaults when defaultGlobalId is set
+     */
+    async defaultGlobalIdWatchHandler() {
+        await this._handleDefaults();
+    }
+    /**
+     * Reset the toolInfos when export csv is enabled/disabled
+     */
+    enableCSVWatchHandler() {
+        var _a;
+        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this._initToolInfos();
+        }
+    }
+    /**
+     * Update the table when enableInlineEdit is enabled/disabled
+     */
+    enableInlineEditWatchHandler() {
+        if (this._table) {
+            this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+        }
+    }
+    /**
+     * Update the toolbar when the share button is enabled/disabled
+     */
+    enableShareWatchHandler() {
+        // this should be caught by component did render and is when I test locally
+        // however have had reported case where it is not somehow on devext so adding explicit check here
+        if (this._toolbar) {
+            this._updateToolbar();
+        }
+    }
+    /**
+     * watch for changes to the list of controls that will currently fit in the display
+     */
+    _controlsThatFitWatchHandler() {
+        var _a;
+        const ids = this._controlsThatFit ? this._controlsThatFit.reduce((prev, cur) => {
+            prev.push(cur.id);
+            return prev;
+        }, []) : [];
+        this._toolInfos = (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.map(ti => {
+            if (ti && this._controlsThatFit) {
+                const id = this._getId(ti.icon);
+                ti.isOverflow = ids.indexOf(id) < 0;
+                return ti;
+            }
+        });
+    }
+    /**
+     * When isMobile is false we need to init the tool infos for the dynamic toolbar
+     */
+    isMobileWatchHandler() {
+        if (!this._toolInfos && !this.isMobile) {
+            this._initToolInfos();
+        }
+    }
+    /**
+     * watch for changes in map info and update the toolbar
+     */
+    async mapInfoWatchHandler() {
+        this._resetColumnTemplates();
+        this._initLayerExpressions();
+        this._initToolInfos();
+        this._updateToolbar();
+    }
+    /**
+     * watch for changes in map view and get the first layer
+     */
+    async mapViewWatchHandler() {
+        if (this._mapClickHandle) {
+            this._mapClickHandle.remove();
+        }
+        if (this.mapView) {
+            this._floorExpression = undefined;
+            this._updateShareUrl();
+            this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+                void this._mapClicked(event);
+            });
+        }
+    }
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async _layerWatchHandler() {
+        var _a;
+        this._fetchingData = true;
+        await ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.when(async () => {
+            var _a;
+            this._definitionExpression = this._layer.definitionExpression;
+            this._floorField = (_a = this._layer.floorInfo) === null || _a === void 0 ? void 0 : _a.floorField;
+            this._updateFloorDefinitionExpression();
+            await this._resetTable();
+            this._initLayerExpressions();
+            this._updateShareUrl();
+            this._fetchingData = false;
+        }));
+    }
+    /**
+     * watch for selection changes
+     */
+    async selectedIdsWatchHandler() {
+        this._updateShareUrl();
+        this._validateEnabledActions();
+        if (this._selectAllActive && this.selectedIds.length !== this._allIds.length) {
+            this._selectAllActive = false;
+        }
+    }
+    /**
+     * Scroll and zoom to the selected feature from the Features widget.
+     *
+     * @param evt CustomEvent the graphic for the current selection
+     */
+    async selectionChanged(evt) {
+        const g = evt.detail[0];
+        const oid = g.getObjectId();
+        if (this.zoomAndScrollToSelected) {
+            const i = this._table.viewModel.getObjectIdIndex(oid);
+            this._table.scrollToIndex(i);
+            const layer = g.layer;
+            const layerViews = this.mapView.allLayerViews.toArray();
+            let layerView;
+            layerViews.some(lv => {
+                if (lv.layer.title === layer.title && lv.layer.type === 'feature') {
+                    layerView = lv;
+                    return true;
+                }
+            });
+            if (layerView) {
+                await goToSelection([oid], layerView, this.mapView, true);
+            }
+        }
+    }
+    /**
+     * Refresh the table when edits are completed
+     */
+    async editsComplete(evt) {
+        const editType = evt.detail;
+        if (editType === "delete" || editType === "add") {
+            this._allIds = await queryAllIds(this._layer);
+        }
+        await this._refresh();
+    }
+    /**
+     * Refresh the table when floor filter facility is changed
+     */
+    async facilityChanged(evt) {
+        this._floorFacility = evt.detail;
+        this._updateFloorDefinitionExpression();
+    }
+    /**
+     * Refresh the table when floor filter level is changed
+     */
+    async levelChanged(evt) {
+        this._floorLevel = evt.detail;
+        this._updateFloorDefinitionExpression();
+    }
+    /**
+     * Refresh the table when floor filter site is changed
+     */
+    async siteChanged(evt) {
+        this._floorSite = evt.detail;
+        this._updateFloorDefinitionExpression();
+    }
+    /**
+     * Refresh the table when
+     */
+    noLayersFound() {
+        this._layer = undefined;
+        this._allIds = [];
+        this._clearSelection();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+        await this._initModules();
+        this._initToolInfos();
+        if (!this._resizeObserver) {
+            this._resizeObserver = new ResizeObserver(() => this._onResize());
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        const tableNodeClass = this._fetchingData ? "display-none" : "";
+        const loadingClass = this._fetchingData ? "" : "display-none";
+        const total = this._allIds.length.toString();
+        const selected = this.selectedIds.length.toString();
+        const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
+        this._validateActiveActions();
+        return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: `width-full ${tableHeightClass}` }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { 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._filterModal()));
+    }
+    /**
+     * Called once after the component is loaded
+     */
+    async componentDidLoad() {
+        if (!this.isMobile && !this._observerSet) {
+            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() {
+        this._updateToolbar();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [FeatureTable, reactiveUtils, TableTemplate] = await loadModules([
+            "esri/widgets/FeatureTable",
+            "esri/core/reactiveUtils",
+            "esri/widgets/FeatureTable/support/TableTemplate"
+        ]);
+        this.FeatureTable = FeatureTable;
+        this.reactiveUtils = reactiveUtils;
+        this.TableTemplate = TableTemplate;
+    }
+    /**
+     * Update the toolbar when its size changes
+     */
+    _onResize() {
+        this._updateToolbar();
+    }
+    /**
+     * Gets a row of controls that can be used for various interactions with the table
+     *
+     * @param slot string optional slot to display the control within
+     *
+     * @returns The dom node that contains the controls
+     */
+    _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));
+    }
+    /**
+     * Gets a row of controls that can be used for various interactions with the table
+     *
+     * @param slot string optional slot to display the control within
+     *
+     * @returns The dom node that contains the controls
+     */
+    _getActionBar() {
+        const containerClass = this.isMobile ? "width-full" : "";
+        const mobileClass = this.isMobile ? "border-top" : "";
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+    }
+    /**
+     * Get the actions that are used for various interactions with the table
+     *
+     * @returns VNode[] the action nodes
+     */
+    _getActions() {
+        const actions = this._getActionItems();
+        return actions === null || actions === void 0 ? void 0 : actions.reduce((prev, cur) => {
+            if (cur && !cur.isOverflow) {
+                prev.push(cur.isDanger ?
+                    this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
+                    cur.isSublist ? (h("calcite-dropdown", { closeOnSelectDisabled: true, id: this._getId(cur.icon), onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._showHideDropdown = el }, this._getAction(cur.active, this._showHideOpen ? "chevron-down" : cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, cur.loading, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
+                        this._getAction(cur.active, cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, cur.loading));
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Get the list of fields as dropdown items and store the current selected state so
+     * we can show/hide the appropriate fields
+     *
+     * @returns Node with the fields as dropdown items
+     */
+    _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: k, onClick: (e) => {
+                    const target = e.target;
+                    this._columnsInfo[target.id] = target.selected;
+                    if (!target.selected) {
+                        this._table.hideColumn(target.id);
+                    }
+                    else {
+                        this._table.showColumn(target.id);
+                    }
+                }, selected: selected }, k));
+        }))) : undefined;
+    }
+    /**
+     * Update actions enabled prop based on number of selected indexes
+     */
+    _validateEnabledActions() {
+        var _a;
+        const featuresSelected = this._featuresSelected();
+        const selectionDependant = [
+            "zoom-to-object",
+            "trash",
+            "erase",
+            "selected-items-filter"
+        ];
+        (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.forEach(ti => {
+            if (ti && selectionDependant.indexOf(ti.icon) > -1) {
+                ti.disabled = !featuresSelected;
+            }
+        });
+    }
+    /**
+     * Update actions active prop based on a stored value
+     */
+    _validateActiveActions() {
+        var _a;
+        const activeDependant = [
+            "filter",
+            "list-check-all",
+            "selected-items-filter"
+        ];
+        (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.forEach(ti => {
+            if (ti && activeDependant.indexOf(ti.icon) > -1) {
+                if (ti.icon === "filter") {
+                    ti.indicator = this._filterActive;
+                }
+                if (ti.icon === "list-check-all") {
+                    ti.active = this._selectAllActive;
+                }
+                if (ti.icon === "selected-items-filter") {
+                    ti.active = this._showOnlySelected;
+                }
+            }
+        });
+    }
+    /**
+     * Get the full list of toolInfos.
+     * Order is important. They should be listed in the order they should display in the UI from
+     * Left to Right for the action bar and Top to Bottom for the dropdown.
+     */
+    _initToolInfos() {
+        const featuresSelected = this._featuresSelected();
+        const featuresEmpty = this._featuresEmpty();
+        const hasFilterExpressions = this._hasFilterExpressions();
+        if (this._translations) {
+            this._toolInfos = [{
+                    active: false,
+                    icon: "zoom-to-object",
+                    indicator: false,
+                    label: this._translations.zoom,
+                    func: () => this._zoom(),
+                    disabled: !featuresSelected,
+                    isOverflow: false
+                },
+                hasFilterExpressions ? {
+                    active: false,
+                    icon: "filter",
+                    indicator: false,
+                    label: this._translations.filters,
+                    func: () => this._toggleFilter(),
+                    disabled: false,
+                    isOverflow: false
+                } : undefined,
+                this._deleteEnabled ? {
+                    active: undefined,
+                    icon: "trash",
+                    indicator: undefined,
+                    label: undefined,
+                    func: undefined,
+                    disabled: !featuresSelected,
+                    isDanger: true,
+                    isOverflow: false
+                } : undefined, {
+                    active: false,
+                    icon: "erase",
+                    indicator: false,
+                    label: this._translations.clearSelection,
+                    func: () => this._clearSelection(),
+                    disabled: !featuresSelected,
+                    isOverflow: false
+                }, {
+                    active: false,
+                    icon: "selected-items-filter",
+                    indicator: false,
+                    label: this._showOnlySelected ? this._translations.showAll : this._translations.showSelected,
+                    func: () => this._toggleShowSelected(),
+                    disabled: !featuresSelected,
+                    isOverflow: false
+                }, {
+                    active: false,
+                    icon: "list-check-all",
+                    indicator: false,
+                    func: () => this._selectAll(),
+                    label: this._translations.selectAll,
+                    disabled: featuresEmpty,
+                    isOverflow: false
+                }, {
+                    active: false,
+                    icon: "compare",
+                    indicator: false,
+                    func: () => this._switchSelected(),
+                    label: this._translations.switchSelected,
+                    disabled: featuresEmpty,
+                    isOverflow: false
+                }, {
+                    active: false,
+                    icon: "refresh",
+                    indicator: false,
+                    func: () => this._refresh(),
+                    label: this._translations.refresh,
+                    disabled: false,
+                    isOverflow: false
+                },
+                this.enableCSV ? {
+                    active: false,
+                    icon: "export",
+                    indicator: false,
+                    func: () => void this._exportToCSV(),
+                    label: this._translations.exportCSV,
+                    loading: this._csvExporting,
+                    disabled: featuresEmpty,
+                    isOverflow: false
+                } : undefined, {
+                    active: false,
+                    icon: this._showHideOpen ? "chevron-down" : "chevron-right",
+                    indicator: false,
+                    func: () => this._toggleShowHide(),
+                    label: this._translations.showHideColumns,
+                    disabled: false,
+                    isOverflow: false,
+                    isSublist: true
+                }];
+            this._defaultVisibleToolSizeInfos = undefined;
+        }
+    }
+    /**
+     * Applies a definition expression when floor field and level are available
+     *
+     * @returns boolean
+     */
+    _updateFloorDefinitionExpression() {
+        if (this._floorField && this._floorLevel) {
+            const floorExp = `${this._floorField} = '${this._floorLevel}'`;
+            const defExp = this._layer.definitionExpression;
+            this._layer.definitionExpression = (defExp === null || defExp === void 0 ? void 0 : defExp.indexOf(this._floorExpression)) > -1 ?
+                defExp.replace(this._floorExpression, floorExp) :
+                defExp ? `${defExp} AND (${floorExp})` : floorExp;
+            this._floorExpression = floorExp;
+        }
+    }
+    /**
+     * Returns true when one ore more features are selected
+     *
+     * @returns boolean
+     */
+    _featuresSelected() {
+        return this.selectedIds.length > 0;
+    }
+    /**
+     * Return true when we have no features
+     *
+     * @returns boolean
+     */
+    _featuresEmpty() {
+        return this._allIds.length === 0;
+    }
+    /**
+     * Return true when we have at least 1 layer expression for the current layer
+     *
+     * @returns boolean
+     */
+    _hasFilterExpressions() {
+        var _a, _b, _c;
+        let layerExpressions;
+        if (((_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions) && ((_c = this._layer) === null || _c === void 0 ? void 0 : _c.id)) {
+            layerExpressions = this.mapInfo.filterConfig.layerExpressions.filter((exp) => exp.id === this._layer.id);
+        }
+        return (layerExpressions === null || layerExpressions === void 0 ? void 0 : layerExpressions.length) > 0;
+    }
+    /**
+     * Add/Remove tools from the action bar and dropdown based on available size
+     */
+    _updateToolbar() {
+        if (this._timeout) {
+            clearTimeout(this._timeout);
+        }
+        if (!this.isMobile && this._toolbar && this._toolInfos) {
+            this._timeout = setTimeout(() => {
+                clearTimeout(this._timeout);
+                this._setToolbarSizeInfos();
+                const toolbarWidth = this._toolbar.offsetWidth;
+                let controlsWidth = this._toolbarSizeInfos.reduce((prev, cur) => {
+                    prev += cur.width;
+                    return prev;
+                }, 0);
+                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "solutions-action-share"];
+                if (controlsWidth > toolbarWidth) {
+                    if (this._toolbarSizeInfos.length > 0) {
+                        const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
+                            if (skipControls.indexOf(cur.id) < 0) {
+                                if (controlsWidth > toolbarWidth) {
+                                    controlsWidth -= cur.width;
+                                }
+                                else {
+                                    prev.push(cur);
+                                }
+                            }
+                            return prev;
+                        }, []).reverse();
+                        this._setControlsThatFit(controlsThatFit, skipControls);
+                    }
+                }
+                else {
+                    if (this._defaultVisibleToolSizeInfos) {
+                        const currentTools = this._toolbarSizeInfos.reduce((prev, cur) => {
+                            prev.push(cur.id);
+                            return prev;
+                        }, []);
+                        let forceFinish = false;
+                        const controlsThatFit = [...this._defaultVisibleToolSizeInfos].reduce((prev, cur) => {
+                            if (!forceFinish && skipControls.indexOf(cur.id) < 0 &&
+                                (currentTools.indexOf(cur.id) > -1 || (controlsWidth + cur.width) <= toolbarWidth)) {
+                                if (currentTools.indexOf(cur.id) < 0) {
+                                    controlsWidth += cur.width;
+                                }
+                                prev.push(cur);
+                            }
+                            else if (skipControls.indexOf(cur.id) < 0 && (controlsWidth + cur.width) > toolbarWidth) {
+                                // exit the first time we evalute this as true...otherwise it will add the next control that will fit
+                                // and not preserve the overall order of controls
+                                forceFinish = true;
+                            }
+                            return prev;
+                        }, []);
+                        this._setControlsThatFit(controlsThatFit, skipControls);
+                    }
+                }
+            }, 250);
+        }
+    }
+    /**
+     * Validate if controls that fit the current display has changed or
+     * is different from what is currently displayed
+     */
+    _setControlsThatFit(controlsThatFit, skipControls) {
+        let update = JSON.stringify(controlsThatFit) !== JSON.stringify(this._controlsThatFit);
+        const actionbar = document.getElementById("solutions-action-bar");
+        actionbar.childNodes.forEach((n) => {
+            if (skipControls.indexOf(n.id) < 0 && !update) {
+                update = this._controlsThatFit.map(c => c.id).indexOf(n.id) < 0;
+            }
+        });
+        if (update) {
+            this._controlsThatFit = [...controlsThatFit];
+        }
+    }
+    /**
+     * Get the id and size for the toolbars current items
+     */
+    _setToolbarSizeInfos() {
+        let hasWidth = false;
+        this._toolbarSizeInfos = [];
+        this._toolbar.childNodes.forEach((c, i) => {
+            // handle the action bar
+            if (i === 0) {
+                c.childNodes.forEach((actionbarChild) => {
+                    this._toolbarSizeInfos.push({
+                        id: actionbarChild.id,
+                        width: actionbarChild.offsetWidth
+                    });
+                    if (!hasWidth) {
+                        hasWidth = actionbarChild.offsetWidth > 0;
+                    }
+                });
+            }
+            else if (!c.referenceElement) {
+                // skip tooltips
+                this._toolbarSizeInfos.push({
+                    id: c.id,
+                    width: c.offsetWidth
+                });
+                if (!hasWidth) {
+                    hasWidth = c.offsetWidth > 0;
+                }
+            }
+        });
+        if (hasWidth && !this._defaultVisibleToolSizeInfos) {
+            this._defaultVisibleToolSizeInfos = [...this._toolbarSizeInfos];
+        }
+    }
+    /**
+     * Get a list of toolInfos that should display outside of the dropdown
+     *
+     * @returns IToolInfo[] the list of toolInfos that should not display in the overflow dropdown
+     */
+    _getActionItems() {
+        var _a;
+        return (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.filter(toolInfo => toolInfo && !toolInfo.isOverflow);
+    }
+    /**
+     * Get a list of toolInfos that should display in the dropdown
+     *
+     * @param id string the id for the dropdown and its tooltip
+     *
+     * @returns VNode the dropdown node
+     */
+    _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: "solutions-subset-list", 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;
+    }
+    /**
+     * Get a list of toolInfos that should display in the dropdown
+     *
+     * @returns IToolInfo[] the list of toolInfos that should display in the dropdown
+     */
+    _getDropdownItems() {
+        var _a;
+        return (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.filter(toolInfo => toolInfo && toolInfo.isOverflow);
+    }
+    /**
+     * Get an action and tooltip
+     *
+     * @param icon string the name of the icon to display, will also be used as the id
+     * @param label string the text to display and label the action
+     * @param func any the function to execute
+     * @param disabled boolean when true the user will not be able to interact with the action
+     *
+     * @returns VNode The node representing the DOM element that will contain the action
+     */
+    _getAction(active, icon, indicator, label, func, disabled, loading, slot) {
+        const _disabled = this._layer === undefined ? true : disabled;
+        return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { active: active, appearance: "solid", disabled: _disabled, icon: icon, id: icon, indicator: indicator, label: label, loading: loading, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
+    }
+    /**
+     * Get an action and tooltip for share
+     *
+     * @param icon string the name of the icon to display, will also be used in its id
+     *
+     * @returns VNode The node representing the DOM element that will contain the action
+     */
+    _getShare(icon) {
+        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", embed: this.shareIncludeEmbed, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", socialMedia: this.shareIncludeSocial, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
+    }
+    /**
+     * Called each time the values that are used for custom url params change
+     */
+    _updateShareUrl() {
+        var _a, _b, _c, _d;
+        const url = (_a = this._shareNode) === null || _a === void 0 ? void 0 : _a.shareUrl;
+        if (!url) {
+            return;
+        }
+        const urlObj = new URL(url);
+        //set the additional search params
+        if ((_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.id) {
+            urlObj.searchParams.set("webmap", this.mapInfo.id);
+        }
+        else {
+            urlObj.searchParams.delete("webmap");
+        }
+        if ((_c = this._layer) === null || _c === void 0 ? void 0 : _c.id) {
+            urlObj.searchParams.set("layer", this._layer.id);
+        }
+        else {
+            urlObj.searchParams.delete("layer");
+        }
+        if (((_d = this.selectedIds) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+            urlObj.searchParams.set("oid", this.selectedIds.join(","));
+        }
+        else {
+            urlObj.searchParams.delete("oid");
+        }
+        this._shareNode.shareUrl = urlObj.href;
+    }
+    /**
+     * Get a tooltip
+     *
+     * @param label string accessible name for the component
+     * @param placement string where the tooltip should display
+     * @param referenceElement string the element the tooltip will be associated with
+     * @param text string the text to display in the tooltip
+     *
+     * @returns VNode The tooltip node
+     */
+    _getToolTip(placement, referenceElement, text) {
+        return document.getElementById(referenceElement) ? (h("calcite-tooltip", { placement: placement, "reference-element": referenceElement }, h("span", null, text))) : undefined;
+    }
+    /**
+     * Get an id with a prefix to the user supplied value
+     *
+     * @param id the unique value for the id
+     *
+     * @returns the new id with the prefix value
+     */
+    _getId(id) {
+        return `solutions-action-${id}`;
+    }
+    /**
+     * Get an action with danger color icon and text
+     *
+     * @param icon string the name of the icon to display, will also be used as the id
+     * @param label string the text to display and label the action
+     * @param func any the function to execute
+     * @param disabled boolean when true the user will not be able to interact with the action
+     *
+     * @returns VNode The node representing the DOM element that will contain the action
+     */
+    _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 all currently selected IDs from the table
+     *
+     * @param number[] the selected ids
+     */
+    _getIds() {
+        return this._table.highlightIds.toArray();
+    }
+    /**
+     * Initialize the FeatureTable
+     *
+     * @param node HTMLDivElement The node representing the DOM element that will contain the widget.
+     */
+    async _getTable(node, columnTemplates) {
+        if (this._layer) {
+            await this._layer.when(() => {
+                this._table = new this.FeatureTable({
+                    autoRefreshEnabled: this.enableAutoRefresh,
+                    layer: this._layer,
+                    view: this.mapView,
+                    columnReorderingEnabled: this.enableColumnReorder,
+                    editingEnabled: this._editEnabled && this.enableInlineEdit,
+                    highlightEnabled: true,
+                    multiSortEnabled: false,
+                    visibleElements: {
+                        header: false,
+                        menu: false
+                    },
+                    tableTemplate: {
+                        columnTemplates
+                    },
+                    container: node
+                });
+            });
+            await this._table.when(() => {
+                this._table.highlightIds.on("change", (evt) => {
+                    void this._handleOnChange(evt);
+                });
+            });
+        }
+    }
+    async _handleOnChange(evt) {
+        const ids = [...this._table.highlightIds.toArray()];
+        if (!this._skipOnChange) {
+            if (!this._ctrlIsPressed && !this._shiftIsPressed) {
+                if (this.selectedIds.length > 0) {
+                    this._skipOnChange = true;
+                    // only readd in specific case where we have multiple selected and then click one of the currently selected
+                    const reAdd = this.selectedIds.length > 1 && evt.removed.length === 1;
+                    const newIds = reAdd ? evt.removed : ids.filter(id => this.selectedIds.indexOf(id) < 0);
+                    this._clearSelection();
+                    this.selectedIds = [...newIds];
+                    if (newIds.length > 0) {
+                        this._table.highlightIds.add(newIds[0]);
+                    }
+                    else {
+                        this._skipOnChange = false;
+                    }
+                }
+                else {
+                    // https://github.com/Esri/solutions-components/issues/365
+                    this.selectedIds = ids.reverse();
+                }
+            }
+            else if (this._ctrlIsPressed) {
+                this.selectedIds = ids.reverse();
+            }
+            else if (this._shiftIsPressed) {
+                this._skipOnChange = true;
+                this._previousCurrentId = this._currentId;
+                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+                if (this._previousCurrentId !== this._currentId) {
+                    // query the layer based on current sort and filters then grab between the current id and previous id
+                    const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
+                        prev.push(`${cur.fieldName} ${cur.direction}`);
+                        return prev;
+                    }, []);
+                    const oids = await queryFeatureIds(this._layer, this._layer.definitionExpression, orderBy);
+                    let isBetween = false;
+                    const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
+                    const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
+                    const startIndex = _start < _end ? _start : _end;
+                    const endIndex = _end > _start ? _end : _start;
+                    this._skipOnChange = startIndex + 1 !== endIndex;
+                    const selectedIds = oids.reduce((prev, cur) => {
+                        const id = cur;
+                        const index = this._table.viewModel.getObjectIdIndex(id);
+                        if ((id === this._currentId || id === this._previousCurrentId)) {
+                            isBetween = !isBetween;
+                            if (prev.indexOf(id) < 0) {
+                                prev.push(id);
+                            }
+                        }
+                        // The oids are sorted so after we have reached the start or end oid add all ids even if the index is -1.
+                        // Index of -1 will occur for features between the start and and oid if
+                        // you select a row then scroll faster than the FeatureTable loads the data to select the next id
+                        if (isBetween && prev.indexOf(id) < 0) {
+                            prev.push(id);
+                        }
+                        // Also add index based check.
+                        // In some cases the FeatureTable and Layer query will have differences in how null/undefined field values are sorted
+                        if ((this.selectedIds.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                            prev.push(id);
+                        }
+                        return prev;
+                    }, []);
+                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
+                    this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
+                }
+            }
+            this._finishOnChange();
+        }
+        else {
+            this._skipOnChange = false;
+        }
+        this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+    }
+    /**
+     * Handle any updates after a selection change has occured and emit the results
+     */
+    _finishOnChange() {
+        if (this._showOnlySelected) {
+            if (this._featuresSelected()) {
+                this._table.filterBySelection();
+            }
+            else {
+                this._toggleShowSelected();
+            }
+        }
+        this.featureSelectionChange.emit(this.selectedIds);
+    }
+    /**
+     * Reset the tables column templates when we get new column config
+     */
+    _resetColumnTemplates() {
+        var _a, _b;
+        const columnTemplates = this._getColumnTemplates((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id, (_b = this._layer) === null || _b === void 0 ? void 0 : _b.fields);
+        const hasChange = columnTemplates === null || columnTemplates === void 0 ? void 0 : columnTemplates.some((ct, i) => {
+            var _a;
+            return JSON.stringify((_a = this._table) === null || _a === void 0 ? void 0 : _a.tableTemplate.columnTemplates[i]) !== JSON.stringify(ct);
+        });
+        if (this._table && columnTemplates && (hasChange || !this._columnsInfo)) {
+            this._table.tableTemplate = new this.TableTemplate({
+                columnTemplates
+            });
+            const fieldNames = columnTemplates.map(f => f.fieldName);
+            this._initColumnsInfo(fieldNames);
+        }
+    }
+    /**
+     * Reset basic table props
+     */
+    async _resetTable() {
+        var _a;
+        this._clearSelection();
+        this._allIds = await queryAllIds(this._layer);
+        if (!this._table) {
+            const columnTemplates = this._getColumnTemplates(this._layer.id, (_a = this._layer) === null || _a === void 0 ? void 0 : _a.fields);
+            await this._getTable(this._tableNode, columnTemplates);
+        }
+        else {
+            this._table.view = this.mapView;
+            this._table.layer = this._layer;
+        }
+        await this._initLayerRefresh();
+        this._checkEditEnabled();
+        this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+        await this.reactiveUtils.once(() => this._table.state === "loaded")
+            .then(async () => {
+            this._table.highlightIds.removeAll();
+            this._table.clearSelectionFilter();
+            this._resetColumnTemplates();
+            this._showOnlySelected = false;
+            await this._handleDefaults();
+            await this._sortTable();
+            this._initToolInfos();
+            this._updateToolbar();
+        });
+    }
+    /**
+     * Update the current IDs when that layers data is modified
+     */
+    async _initLayerRefresh() {
+        if (this._refreshHandle) {
+            this._refreshHandle.remove();
+        }
+        this._refreshHandle = this._layer.on("refresh", (evt) => {
+            if (evt.dataChanged) {
+                this._skipOnChange = true;
+                void this._updateAllIds();
+            }
+        });
+    }
+    /**
+     * Reset _allIds when the layers data has changed and refresh the selection ids and table
+     */
+    async _updateAllIds() {
+        this._allIds = await queryAllIds(this._layer);
+        this.selectedIds = this.selectedIds.filter(id => this._allIds.indexOf(id) > -1);
+        await this._refresh();
+    }
+    /**
+     * Handle default OID or GlobalID from url parameters
+     */
+    async _handleDefaults() {
+        var _a, _b;
+        if (!this._defaultOidHonored && ((_a = this.defaultOid) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.defaultOid[0] > -1 && this._table) {
+            await this._selectDefaultFeature(this.defaultOid);
+            this._defaultOidHonored = true;
+            this.defaultOid = undefined;
+            this._showOnlySelected = false;
+            this._toggleShowSelected();
+        }
+        if (!this._defaultGlobalIdHonored && ((_b = this.defaultGlobalId) === null || _b === void 0 ? void 0 : _b.length) > 0 && this._table) {
+            const features = await queryFeaturesByGlobalID(this.defaultGlobalId, this._layer);
+            const oids = (features === null || features === void 0 ? void 0 : features.length) > 0 ? features.map(f => f.getObjectId()) : undefined;
+            if (oids) {
+                await this._selectDefaultFeature(oids);
+            }
+            this._defaultGlobalIdHonored = true;
+            this.defaultGlobalId = undefined;
+            this._showOnlySelected = false;
+            this._toggleShowSelected();
+        }
+    }
+    /**
+     * Store the column names and current hidden status to support show/hide of columns
+     * @param fieldNames optional list of names from new config options
+     */
+    _initColumnsInfo(fieldNames) {
+        var _a, _b;
+        // this._table.columns is not reflecting correct list when new
+        // tableTemplate.columnTemplates have been defined on an existing FeatureTable
+        // TODO review for better solution post 2024 R01 release
+        const columnsInfo = (_a = this._table) === null || _a === void 0 ? void 0 : _a.columns.reduce((prev, cur) => {
+            if (!fieldNames || ((fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.indexOf(cur.name)) > -1)) {
+                prev[cur.name] = !cur.hidden;
+            }
+            return prev;
+        }, {});
+        const oldColumnNames = (_b = this._table) === null || _b === void 0 ? void 0 : _b.columns.map((c) => c.name);
+        const newColumnNames = fieldNames ? fieldNames.filter(n => oldColumnNames.indexOf(n) < 0) : [];
+        newColumnNames.forEach(c => {
+            columnsInfo[c] = true;
+        });
+        this._columnsInfo = fieldNames ? fieldNames.reduce((prev, cur) => {
+            prev[cur] = columnsInfo[cur];
+            return prev;
+        }, {}) : columnsInfo;
+    }
+    /**
+     * Select the feature that was specified via url params
+     */
+    async _selectDefaultFeature(oids) {
+        if (oids.length > 0) {
+            this._table.highlightIds.addMany(oids);
+            // This is messed up and only make this worse
+            //const i = this._table.viewModel.getObjectIdIndex(oids[0]);
+            //this._table.viewModel.scrollToIndex(i);
+        }
+    }
+    /**
+     * Verify edit capabilities of the layer
+     */
+    _checkEditEnabled() {
+        this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+        this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
+    }
+    /**
+     * Sort the objectid field in descending order
+     */
+    async _sortTable() {
+        if (this._table && this._layer && this.showNewestFirst) {
+            await this._table.when();
+            await this._layer.when(() => {
+                this._table.sortColumn(this._layer.objectIdField, "desc");
+            });
+        }
+    }
+    /**
+     * Open show/hide dropdown
+     */
+    _forceShowHide() {
+        if (this._showHideDropdown) {
+            this._showHideDropdown.open = this._showHideOpen;
+        }
+        if (this._moreDropdown) {
+            this._moreDropdown.open = this._showHideOpen;
+        }
+    }
+    /**
+     * Toggle show/hide dropdown
+     */
+    _toggleShowHide() {
+        this._showHideOpen = !this._showHideOpen;
+    }
+    /**
+     * Open show/hide dropdown
+     */
+    _closeShowHide() {
+        this._showHideOpen = false;
+    }
+    /**
+     * Close show/hide dropdown when the user clicks outside of it
+     */
+    _handleDocumentClick(e) {
+        var _a;
+        const id = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id;
+        if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "solutions-subset-list" && id !== "chevron-right") {
+            this._closeShowHide();
+            if (this._moreDropdown) {
+                this._moreDropdown.open = false;
+            }
+            if (this._showHideDropdown) {
+                this._showHideDropdown.open = false;
+            }
+        }
+    }
+    /**
+     * Keep track of key down for ctrl and shift
+     */
+    _handleKeyDown(e) {
+        this._ctrlIsPressed = e.ctrlKey;
+        this._shiftIsPressed = e.shiftKey;
+    }
+    /**
+     * Keep track of key up for ctrl and shift
+     */
+    _handleKeyUp(e) {
+        this._ctrlIsPressed = e.ctrlKey;
+        this._shiftIsPressed = e.shiftKey;
+    }
+    /**
+     * Show filter component in modal
+     *
+     * @returns node to interact with any configured filters for the current layer
+     */
+    _filterModal() {
+        var _a, _b, _c;
+        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" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.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 }))));
+    }
+    /**
+     * Reset the filter active prop
+     */
+    _handleFilterListReset() {
+        this._filterActive = false;
+        this._updateShareUrl();
+    }
+    /**
+     * Check if the layers definitionExpression has been modified
+     */
+    _handleFilterUpdate() {
+        const defExp = this._layer.definitionExpression;
+        if (this._floorExpression) {
+            const regEx = new RegExp(`${this._floorField} = ['].+[']`, "gm");
+            this._layer.definitionExpression = defExp && this._floorField && defExp.indexOf(`${this._floorField} = '`) > -1 ?
+                defExp.replace(regEx, this._floorExpression) : defExp ?
+                `${defExp} AND (${this._floorExpression})` : this._floorExpression;
+        }
+        this._filterActive = this._definitionExpression !== this._layer.definitionExpression &&
+            (this._floorExpression ? this._layer.definitionExpression !== this._floorExpression : true);
+        this._updateShareUrl();
+    }
+    /**
+     * Close the filter modal
+     */
+    async _closeFilter() {
+        if (this._filterOpen) {
+            // reset allIds
+            this._allIds = await queryAllIds(this._layer);
+            this._filterOpen = false;
+        }
+    }
+    /**
+     * Handle map click events to keep table and map click selection in sync
+     *
+     * @param evt IMapClick map click event details
+     */
+    async _mapClicked(evt) {
+        const opts = {
+            include: this._layer
+        };
+        const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
+        if (hitTestResult.results.length > 0) {
+            hitTestResult.results.forEach((result) => {
+                const id = result.graphic.getObjectId();
+                const index = this._table.highlightIds.indexOf(id);
+                if (index < 0) {
+                    this._table.highlightIds.add(id);
+                }
+            });
+            if (this._showOnlySelected) {
+                this._table.filterBySelection();
+            }
+        }
+        else {
+            this._clearSelection();
+        }
+    }
+    /**
+     * Select or deselect all rows
+     */
+    _selectAll() {
+        const ids = this._allIds;
+        this._table.highlightIds.removeAll();
+        this._skipOnChange = true;
+        this._table.highlightIds.addMany(ids);
+        this.selectedIds = ids;
+        this._finishOnChange();
+        this._selectAllActive = true;
+    }
+    /**
+     * Toggle the show only selected flag
+     *  When showOnly is true only the selected features will be shown in the table
+     */
+    _toggleShowSelected() {
+        this._showOnlySelected = !this._showOnlySelected;
+        if (this._showOnlySelected) {
+            this._table.filterBySelection();
+        }
+        else {
+            this._table.clearSelectionFilter();
+        }
+    }
+    /**
+     * Clears the selected indexes
+     */
+    _clearSelection() {
+        var _a;
+        this.selectedIds = [];
+        (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        this._finishOnChange();
+    }
+    /**
+     * When true the filter modal will be displayed
+     */
+    _toggleFilter() {
+        this._filterOpen = !this._filterOpen;
+    }
+    /**
+     * Store any filters for the current layer.
+     * Should only occur on layer change
+     */
+    _initLayerExpressions() {
+        var _a, _b;
+        const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
+        this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => { var _a; return exp.id === ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id); }) : [];
+        this._filterList.layerExpressions = this._layerExpressions;
+        this._filterActive = this._layerExpressions.filter(lyrExp => {
+            return lyrExp.expressions.filter(exp => exp.active).length > 0;
+        }).length > 0;
+    }
+    /**
+     * Select all rows that are not currently selectd
+     */
+    _switchSelected() {
+        const currentIndexes = [...this.selectedIds];
+        this._table.highlightIds.removeAll();
+        const ids = this._allIds.reduce((prev, _cur) => {
+            if (currentIndexes.indexOf(_cur) < 0) {
+                prev.push(_cur);
+            }
+            return prev;
+        }, []).sort((a, b) => a - b);
+        this._skipOnChange = true;
+        this._table.highlightIds.addMany(ids);
+        this.selectedIds = ids;
+        this._finishOnChange();
+    }
+    /**
+     * Export all selected rows as CSV
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
+    async _exportToCSV() {
+        const exportInfos = {};
+        const ids = this._table.highlightIds.toArray();
+        exportInfos[this._layer.id] = {
+            selectionSetNames: [this._layer.title],
+            ids,
+            layer: this._layer
+        };
+        const fields = this._table.columns.toArray().reduce((prev, cur) => {
+            if (!cur.hidden) {
+                prev.push(cur.name.toLocaleLowerCase());
+            }
+            return prev;
+        }, []);
+        this._updateToolInfoLoading("export", true);
+        this._csvExporting = true;
+        await downloadCSV(null, //???
+        exportInfos, false, // formatUsingLayerPopup
+        false, // removeDuplicates
+        true, // addColumnTitle
+        fields, true, true);
+        this._updateToolInfoLoading("export", false);
+        this._csvExporting = false;
+    }
+    /**
+     * Set the loading prop in the stored toolInfos
+     */
+    _updateToolInfoLoading(name, isLoading) {
+        this._toolInfos.some(tool => {
+            if ((tool === null || tool === void 0 ? void 0 : tool.icon) === name) {
+                tool.loading = isLoading;
+                return true;
+            }
+        });
+    }
+    /**
+     * Refreshes the table and maintains the curent scroll position
+     */
+    async _refresh() {
+        await this._table.refresh();
+        this.featureSelectionChange.emit(this.selectedIds);
+    }
+    /**
+     * Zoom to all selected features
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
+    _zoom() {
+        this._table.zoomToSelection();
+    }
+    /**
+     * Handles layer selection change to show new table
+     *
+     * @param evt CustomEvent the id for the current layer
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
+    async _layerSelectionChanged(evt) {
+        var _a;
+        const id = evt.detail[0];
+        if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._featuresEmpty()) {
+            this._fetchingData = true;
+            const layer = await getLayerOrTable(this.mapView, id);
+            await layer.when(() => {
+                this._layer = layer;
+            });
+        }
+        this._fetchingData = false;
+    }
+    /**
+     * Get any columnt templates for the current map
+     *
+     * @param id item ID of the current map
+     *
+     * @returns a list of column templates if they exist
+     */
+    _getColumnTemplates(id, fieldInfos) {
+        var _a, _b;
+        let layerOption;
+        (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers.some(l => {
+            if (l.id === id) {
+                layerOption = l;
+                return true;
+            }
+        });
+        const fieldOrder = (layerOption === null || layerOption === void 0 ? void 0 : layerOption.fields) && (layerOption === null || layerOption === void 0 ? void 0 : layerOption.fieldOrder) ?
+            layerOption.fieldOrder.filter(f => layerOption.fields.indexOf(f) > -1) :
+            undefined;
+        let columnTemplates;
+        if (fieldInfos) {
+            columnTemplates = layerOption && (layerOption === null || layerOption === void 0 ? void 0 : layerOption.fields)
+                ? fieldInfos.reduce((prev, cur) => {
+                    if (layerOption.fields.indexOf(cur.name) > -1) {
+                        const template = {
+                            type: "field",
+                            fieldName: cur.name,
+                            label: cur.alias,
+                            menuConfig: this._getMenuConfig(cur.name)
+                        };
+                        prev.push(template);
+                    }
+                    return prev;
+                }, []).sort(this._sortFields.bind(this, layerOption === null || layerOption === void 0 ? void 0 : layerOption.fieldOrder))
+                : fieldInfos.map(fieldInfo => {
+                    return {
+                        type: "field",
+                        fieldName: fieldInfo.name,
+                        label: fieldInfo.alias,
+                        menuConfig: this._getMenuConfig(fieldInfo.name)
+                    };
+                });
+        }
+        return fieldOrder ?
+            columnTemplates === null || columnTemplates === void 0 ? void 0 : columnTemplates.sort(this._sortFields.bind(this, fieldOrder)) :
+            columnTemplates;
+    }
+    _sortFields(sorter, a, b) {
+        return (sorter === null || sorter === void 0 ? void 0 : sorter.indexOf(a.fieldName)) - sorter.indexOf(b.fieldName);
+    }
+    /**
+     * Get the menu config that adds the ability to hide the current column
+     */
+    _getMenuConfig(name) {
+        return {
+            items: [
+                {
+                    label: this._translations.hideField,
+                    iconClass: "esri-icon-non-visible",
+                    autoCloseMenu: true,
+                    clickFunction: () => {
+                        this._handleHideClick(name);
+                    }
+                }
+            ]
+        };
+    }
+    /**
+     * Hide the table column for the provided name
+     */
+    _handleHideClick(name) {
+        this._columnsInfo[name] = false;
+        this._table.hideColumn(name);
+        this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
+            if (columnTemplate.fieldName === name) {
+                columnTemplate.visible = false;
+            }
+        });
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "defaultOid": ["defaultOidWatchHandler"],
+        "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
+        "enableCSV": ["enableCSVWatchHandler"],
+        "enableInlineEdit": ["enableInlineEditWatchHandler"],
+        "enableShare": ["enableShareWatchHandler"],
+        "_controlsThatFit": ["_controlsThatFitWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
+        "mapInfo": ["mapInfoWatchHandler"],
+        "mapView": ["mapViewWatchHandler"],
+        "_layer": ["_layerWatchHandler"],
+        "selectedIds": ["selectedIdsWatchHandler"]
+    }; }
+};
+LayerTable.style = layerTableCss;
+
+export { LayerTable as layer_table };