@esri/solutions-components 0.7.0 → 0.7.1

package/dist/components/feature-form-flow-item.js

@@ -0,0 +1,75 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const featureFormFlowItemCss = ":host{display:block}";
+
+const FeatureFormFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class FeatureFormFlowItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  State (internal)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return featureFormFlowItemCss; }
+}, [1, "feature-form-flow-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["feature-form-flow-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "feature-form-flow-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FeatureFormFlowItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FeatureFormFlowItem = FeatureFormFlowItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FeatureFormFlowItem, defineCustomElement };

package/dist/components/features-flow-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FeaturesFlowItem extends Components.FeaturesFlowItem, HTMLElement {}
+export const FeaturesFlowItem: {
+  prototype: FeaturesFlowItem;
+  new (): FeaturesFlowItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/features-flow-item.js

@@ -0,0 +1,75 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const featuresFlowItemCss = ":host{display:block}";
+
+const FeaturesFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class FeaturesFlowItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  State (internal)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return featuresFlowItemCss; }
+}, [1, "features-flow-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["features-flow-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "features-flow-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FeaturesFlowItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FeaturesFlowItem = FeaturesFlowItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FeaturesFlowItem, defineCustomElement };

package/dist/components/info-card2.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
+import { d as defineCustomElement$a } from './action.js';
 import { d as defineCustomElement$9 } from './alert.js';
 import { d as defineCustomElement$8 } from './button.js';
 import { d as defineCustomElement$7 } from './chip.js';
@@ -30,6 +31,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     this._alertOpen = false;
     this._count = "";
     this._editRecordOpen = false;
+    this._showListView = false;
     this._translations = undefined;
   }
   //--------------------------------------------------------------------------
@@ -106,9 +108,9 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     const loadingClass = this.isLoading ? "" : "display-none";
     const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
     const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
-    const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
+    const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
     const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
-    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._getCount(), textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -149,6 +151,11 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
             heading: true
           }
         });
+        this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
+          if (!isOpen) {
+            this._showListView = isOpen;
+          }
+        });
         if (this.zoomAndScrollToSelected) {
           this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
             if (i > -1) {
@@ -222,6 +229,18 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
       .replace("{{index}}", index)
       .replace("{{total}}", total);
   }
+  /**
+   * Toggle the visibility of the features list view
+   */
+  _toggleListView() {
+    this._showListView = !this._showListView;
+    const i = this._features.selectedFeatureIndex;
+    this._features.open({
+      features: this.graphics,
+      featureMenuOpen: this._showListView
+    });
+    this._features.selectedFeatureIndex = i;
+  }
   /**
    * Fetches the component's translations
    *
@@ -246,6 +265,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     "_alertOpen": [32],
     "_count": [32],
     "_editRecordOpen": [32],
+    "_showListView": [32],
     "_translations": [32],
     "getSelectedFeature": [64]
   }, [[8, "closeEdit", "closeEdit"]], {
@@ -256,13 +276,18 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["info-card", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "calcite-shell", "calcite-tooltip", "edit-card"];
+  const components = ["info-card", "calcite-action", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "calcite-shell", "calcite-tooltip", "edit-card"];
   components.forEach(tagName => { switch (tagName) {
     case "info-card":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, InfoCard);
       }
       break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
     case "calcite-alert":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();

package/dist/components/layer-table2.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { b as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
-import { b as queryAllIds } from './queryUtils.js';
+import { b as queryAllIds, c as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$n } from './action.js';
 import { d as defineCustomElement$m } from './action-bar.js';
@@ -45,6 +45,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * number[]: A list of all IDs for the current layer
      */
     this._allIds = [];
+    /**
+     * 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;
     /**
      * bool: When true the table is being sorted
      */
@@ -60,7 +68,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
     };
+    this.defaultLayerId = undefined;
+    this.defaultGlobalId = undefined;
+    this.defaultOid = undefined;
     this.enableAutoRefresh = undefined;
+    this.enableColumnReorder = true;
     this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
     this.enableZoom = undefined;
@@ -75,6 +87,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this._isDeleting = false;
     this._layer = undefined;
     this._selectedIndexes = [];
+    this._showHideOpen = false;
     this._showOnlySelected = false;
     this._sortActive = false;
     this._translations = undefined;
@@ -235,6 +248,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   async componentDidLoad() {
     this._resizeObserver.observe(this._toolbar);
+    document.onclick = (e) => this._handleDocumentClick(e);
   }
   /**
    * Called after the component is rendered
@@ -289,7 +303,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * @returns The dom node that contains the controls
    */
   _getActionBar() {
-    return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
+    return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
   }
   /**
    * Get the actions that are used for various interactions with the table
@@ -302,11 +316,33 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
       if (cur && !cur.isOverflow) {
         prev.push(cur.isDanger ?
           this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
-          this._getAction(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(this._showHideOpen ? "chevron-down" : cur.icon, cur.label, cur.func, cur.disabled, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
+            this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
       }
       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
    *
@@ -395,7 +431,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         label: this._translations.exportCSV,
         disabled: featuresEmpty,
         isOverflow: false
-      } : undefined];
+      } : undefined, {
+        icon: this._showHideOpen ? "chevron-down" : "chevron-right",
+        func: () => this._toggleShowHide(),
+        label: this._translations.showHideColumns,
+        disabled: false,
+        isOverflow: false,
+        isSublist: true
+      }];
     this._defaultVisibleToolSizeInfos = undefined;
   }
   /**
@@ -546,9 +589,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   _getDropdown(id) {
     const dropdownItems = this._getDropdownItems();
-    return dropdownItems.length > 0 ? (h("calcite-dropdown", { disabled: this._layer === undefined, id: "solutions-more" }, h("calcite-action", { appearance: "solid", id: id, label: "", 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-item", { iconStart: item.icon, onClick: item.func }, item.label));
-    })))) : undefined;
+    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-item", { iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.icon, id: "solutions-subset-list", onClick: item.func }, item.label));
+    })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
   }
   /**
    * Get a list of toolInfos that should display in the dropdown
@@ -568,9 +611,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    *
    * @returns VNode The node representing the DOM element that will contain the action
    */
-  _getAction(icon, label, func, disabled) {
+  _getAction(icon, label, func, disabled, slot) {
     const _disabled = this._layer === undefined ? true : disabled;
-    return (h("div", { class: "display-flex", id: this._getId(icon) }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
+    return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
   }
   /**
    * Get a tooltip
@@ -623,6 +666,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
           autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
           view: this.mapView,
+          columnReorderingEnabled: this.enableColumnReorder,
           editingEnabled: this._editEnabled && this.enableInlineEdit,
           highlightEnabled: true,
           multiSortEnabled: false,
@@ -636,6 +680,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
           container: node
         });
       });
+      this._initColumnsInfo();
       this._checkEditEnabled();
       await this._table.when(() => {
         this._table.highlightIds.on("change", () => {
@@ -682,14 +727,53 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this._checkEditEnabled();
     this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
     this._initToolInfos();
-    await this._table.when(() => {
+    await this._table.when(async () => {
+      var _a, _b;
       this._table.highlightIds.removeAll();
       this._table.clearSelectionFilter();
+      this._initColumnsInfo();
+      if (!this._defaultOidHonored && ((_a = this.defaultOid) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.defaultOid[0] > -1) {
+        this._selectDefaultFeature(this.defaultOid);
+        this._defaultOidHonored = true;
+      }
+      if (!this._defaultGlobalIdHonored && ((_b = this.defaultGlobalId) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        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) {
+          this._selectDefaultFeature(oids);
+        }
+        this._defaultGlobalIdHonored = true;
+      }
     });
     this._showOnlySelected = false;
     this._sortActive = false;
     await this._sortTable();
   }
+  /**
+   * Store the column names and current hidden status to support show/hide of columns
+   *
+   * @returns void
+   */
+  _initColumnsInfo() {
+    this._columnsInfo = this._table.columns.reduce((prev, cur) => {
+      prev[cur.name] = !cur.hidden;
+      return prev;
+    }, {});
+  }
+  /**
+   * Select the feature that was specified via url params
+   *
+   * @returns void
+   */
+  _selectDefaultFeature(oids) {
+    if (oids.length > 0) {
+      this._table.highlightIds.addMany(oids);
+      void this._table.when(() => {
+        const i = this._table.viewModel.getObjectIdIndex(oids[0]);
+        this._table.viewModel.scrollToIndex(i);
+      });
+    }
+  }
   /**
    * Verify edit capabilities of the layer
    *
@@ -716,6 +800,45 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
       }
     }
   }
+  /**
+   * 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;
+      }
+    }
+  }
   /**
    * Show delete confirmation message
    *
@@ -961,7 +1084,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   }; }
   static get style() { return layerTableCss; }
 }, [0, "layer-table", {
+    "defaultLayerId": [1, "default-layer-id"],
+    "defaultGlobalId": [16],
+    "defaultOid": [16],
     "enableAutoRefresh": [4, "enable-auto-refresh"],
+    "enableColumnReorder": [4, "enable-column-reorder"],
     "enableCSV": [4, "enable-c-s-v"],
     "enableInlineEdit": [4, "enable-inline-edit"],
     "enableZoom": [4, "enable-zoom"],
@@ -976,6 +1103,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     "_isDeleting": [32],
     "_layer": [32],
     "_selectedIndexes": [32],
+    "_showHideOpen": [32],
     "_showOnlySelected": [32],
     "_sortActive": [32],
     "_translations": [32]

package/dist/components/list-flow-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ListFlowItem extends Components.ListFlowItem, HTMLElement {}
+export const ListFlowItem: {
+  prototype: ListFlowItem;
+  new (): ListFlowItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,75 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const listFlowItemCss = ":host{display:block}";
+
+const ListFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class ListFlowItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  State (internal)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return listFlowItemCss; }
+}, [1, "list-flow-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["list-flow-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "list-flow-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ListFlowItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const ListFlowItem = ListFlowItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ListFlowItem, defineCustomElement };