npm - @esri/solutions-components - Versions diffs - 0.7.0 → 0.7.2 - Mend

@esri/solutions-components 0.7.0 → 0.7.2

Files changed (1480) hide show

package/dist/components/layer-table2.js CHANGED Viewed

@@ -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';
@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0;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-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
+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-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0;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-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}.share-action{position:absolute;right:1}";
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
   constructor() {
@@ -41,10 +41,19 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this.__registerHost();
     this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
     this.openFilterOptions = createEvent(this, "openFilterOptions", 7);
+    this.openShare = createEvent(this, "openShare", 7);
     /**
      * 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,9 +69,14 @@ 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.enableShare = undefined;
     this.enableZoom = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
@@ -75,6 +89,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 +250,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
@@ -279,7 +295,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   _getTableControlRow(slot) {
     const id = "more-table-options";
-    return (h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), this._getDropdown(id), this._getToolTip("", "bottom", id, this._translations.moreOptions)));
+    return (h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), this._getDropdown(id), this.enableShare ? this._getShare("share") : undefined));
   }
   /**
    * Gets a row of controls that can be used for various interactions with the table
@@ -289,7 +305,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 +318,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 +433,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;
   }
   /**
@@ -431,7 +476,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         prev += cur.width;
         return prev;
       }, 0);
-      const skipControls = ["solutions-more", "solutions-map-layer-picker-container"];
+      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) => {
@@ -546,9 +591,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 +613,19 @@ 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 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 height-51 border-bottom", id: this._getId(icon) }, h("calcite-action", { appearance: "solid", class: "height-51", icon: icon, id: icon, onClick: () => this.openShare.emit(true), textEnabled: false }), this._getToolTip("", "bottom", icon, this._translations.share)));
   }
   /**
    * Get a tooltip
@@ -623,6 +678,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 +692,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 +739,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 +812,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,9 +1096,14 @@ 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"],
+    "enableShare": [4, "enable-share"],
     "enableZoom": [4, "enable-zoom"],
     "mapInfo": [16],
     "mapView": [16],
@@ -976,6 +1116,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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 };