@esri/solutions-components 0.6.7 → 0.6.8

package/dist/cjs/conditionalSlot-85b3a6b3.js

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+const index = require('./index-0e50040c.js');
+const observers = require('./observers-f5fa975b.js');
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
+ */
+const observed = new Set();
+let mutationObserver;
+const observerOptions = { childList: true };
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ *
+ * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ */
+function connectConditionalSlotComponent(component) {
+  if (!mutationObserver) {
+    mutationObserver = observers.createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(component.el, observerOptions);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ *
+ * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ */
+function disconnectConditionalSlotComponent(component) {
+  observed.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element] of observed.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    index.forceUpdate(target);
+  });
+}
+
+exports.connectConditionalSlotComponent = connectConditionalSlotComponent;
+exports.disconnectConditionalSlotComponent = disconnectConditionalSlotComponent;

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -7,266 +7,268 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6654298b.js');
-const locale = require('./locale-b113c6b2.js');
-const interfaces = require('./interfaces-ad03ec39.js');
+const index = require('./index-0e50040c.js');
+const locale = require('./locale-d15cd743.js');
+const interfaces = require('./interfaces-d539e30c.js');
 require('./_commonjsHelpers-384729db.js');
 
 const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem)}.adjusted-height-100{height:calc(100% - 1rem)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}";
 
-const CrowdsourceManager = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.classicGrid = false;
-    this.hideHeader = true;
-    this.hideMap = false;
-    this.mapInfos = [];
-    this.zoomAndScrollToSelected = false;
-    this._translations = undefined;
-    this._layoutMode = interfaces.ELayoutMode.GRID;
-    this._mapView = undefined;
-    this._panelOpen = true;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Properties (protected)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Listen for layoutChanged event to be fired so we can adjust the layout
-   */
-  async layoutChanged(evt) {
-    this._layoutMode = evt.detail;
-  }
-  /**
-   * Listen for mapChanged event to be fired then store the new mapView so components will be updated
-   */
-  async mapChanged(evt) {
-    this._mapView = evt.detail;
-    this._mapView.popupEnabled = false;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    await this._getTranslations();
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("calcite-shell", null, index.h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (index.h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Get the icon name to use for the divider icon based on the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the icon name
-   * @protected
-   */
-  _getDividerIcon(layoutMode, panelOpen) {
-    let icon = "";
-    switch (layoutMode) {
-      case interfaces.ELayoutMode.HORIZONTAL:
-        icon = this.classicGrid ?
-          (panelOpen ? "chevrons-down" : "chevrons-up") :
-          (panelOpen ? "chevrons-up" : "chevrons-down");
-        break;
-      case interfaces.ELayoutMode.VERTICAL:
-        icon = this.classicGrid ?
-          (panelOpen ? "chevrons-right" : "chevrons-left") :
-          (panelOpen ? "chevrons-left" : "chevrons-right");
-        break;
-      case interfaces.ELayoutMode.GRID:
-        icon = this.classicGrid ?
-          (panelOpen ? "chevrons-up" : "chevrons-down") :
-          (panelOpen ? "chevrons-left" : "chevrons-right");
-        break;
-    }
-    return icon;
-  }
-  /**
-   * Get the css selector names to use for the map based on the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the css selectors
-   * @protected
-   */
-  _getMapSizeClass(layoutMode, panelOpen) {
-    let sizeClass = "";
-    switch (layoutMode) {
-      case interfaces.ELayoutMode.HORIZONTAL:
-        sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
-        break;
-      case interfaces.ELayoutMode.GRID:
-        sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
-          `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
-        break;
-      case interfaces.ELayoutMode.VERTICAL:
-        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
-        break;
-    }
-    return sizeClass;
-  }
-  /**
-   * Get the css selector names to use for the table based on the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the css selectors
-   * @protected
-   */
-  _getTableSizeClass(layoutMode, panelOpen) {
-    let sizeClass = "";
-    switch (layoutMode) {
-      case interfaces.ELayoutMode.HORIZONTAL:
-        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
-        break;
-      case interfaces.ELayoutMode.GRID:
-        sizeClass = this.classicGrid ?
-          `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
-          `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
-        break;
-      case interfaces.ELayoutMode.VERTICAL:
-        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
-        break;
-    }
-    return sizeClass;
-  }
-  /**
-   * Get the table and map nodes based for the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the parent node that contains the table and map
-   * @protected
-   */
-  _getBody(layoutMode, panelOpen, hideMap) {
-    const contentClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID && panelOpen ? "display-grid" :
-      layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "" : "display-flex";
-    return this.classicGrid ? (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
-  }
-  /**
-   * Get the map and card nodes based for the current layout options
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the map node
-   * @protected
-   */
-  _getMapAndCard(layoutMode, panelOpen, hideMap) {
-    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    return this.classicGrid ? (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
-  }
-  /**
-   * Get the map node based for the current layout options
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the map node
-   * @protected
-   */
-  _getMapNode(layoutMode, hideMap) {
-    const mapDisplayClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "display-flex height-full width-1-2" :
-      layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "" : "display-none";
-    const mapContainerClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
-    return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
-  }
-  /**
-   * Get the card node based for the current layout options
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param hideMap when true no map is displayed
-   *
-   * @returns the map node
-   * @protected
-   */
-  _getCardNode(layoutMode, hideMap) {
-    const cardManagerHeight = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "" :
-      layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
-    const cardManagerContainer = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ?
-      "width-full adjusted-height-100" : "width-50 height-full";
-    return (index.h("div", { class: `padding-1-2 ${cardManagerContainer}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
-  }
-  /**
-   * Get the table node based for the current layout
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   * @param panelOpen boolean indicates if all panels are open
-   *
-   * @returns the table node
-   * @protected
-   */
-  _getTable(layoutMode, panelOpen) {
-    const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
-    const icon = this._getDividerIcon(layoutMode, panelOpen);
-    const tooltip = panelOpen ? this._translations.close : this._translations.open;
-    const id = "toggle-layout";
-    const toggleLayout = layoutMode === interfaces.ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
-    const toggleSlot = this.classicGrid && layoutMode !== interfaces.ELayoutMode.VERTICAL ? "footer" :
-      this.classicGrid && layoutMode === interfaces.ELayoutMode.VERTICAL ? "panel-end" :
-        layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
-  }
-  /**
-   * Open/Close the appropriate panel.
-   * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
-   *
-   * @returns void
-   * @protected
-   */
-  _toggleLayout() {
-    this._panelOpen = !this._panelOpen;
-  }
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  async _getTranslations() {
-    const messages = await locale.getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  get el() { return index.getElement(this); }
-};
+const CrowdsourceManager = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.classicGrid = false;
+    this.showNewestFirst = false;
+    this.hideHeader = true;
+    this.hideMap = false;
+    this.mapInfos = [];
+    this.searchConfiguration = undefined;
+    this.zoomAndScrollToSelected = false;
+    this._translations = undefined;
+    this._layoutMode = interfaces.ELayoutMode.GRID;
+    this._mapView = undefined;
+    this._panelOpen = true;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Listen for layoutChanged event to be fired so we can adjust the layout
+   */
+  async layoutChanged(evt) {
+    this._layoutMode = evt.detail;
+  }
+  /**
+   * Listen for mapChanged event to be fired then store the new mapView so components will be updated
+   */
+  async mapChanged(evt) {
+    this._mapView = evt.detail;
+    this._mapView.popupEnabled = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("calcite-shell", { class: "position-relative" }, index.h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (index.h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get the icon name to use for the divider icon based on the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the icon name
+   * @protected
+   */
+  _getDividerIcon(layoutMode, panelOpen) {
+    let icon = "";
+    switch (layoutMode) {
+      case interfaces.ELayoutMode.HORIZONTAL:
+        icon = this.classicGrid ?
+          (panelOpen ? "chevrons-down" : "chevrons-up") :
+          (panelOpen ? "chevrons-up" : "chevrons-down");
+        break;
+      case interfaces.ELayoutMode.VERTICAL:
+        icon = this.classicGrid ?
+          (panelOpen ? "chevrons-right" : "chevrons-left") :
+          (panelOpen ? "chevrons-left" : "chevrons-right");
+        break;
+      case interfaces.ELayoutMode.GRID:
+        icon = this.classicGrid ?
+          (panelOpen ? "chevrons-up" : "chevrons-down") :
+          (panelOpen ? "chevrons-left" : "chevrons-right");
+        break;
+    }
+    return icon;
+  }
+  /**
+   * Get the css selector names to use for the map based on the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the css selectors
+   * @protected
+   */
+  _getMapSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case interfaces.ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+        break;
+      case interfaces.ELayoutMode.GRID:
+        sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
+          `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+        break;
+      case interfaces.ELayoutMode.VERTICAL:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
+        break;
+    }
+    return sizeClass;
+  }
+  /**
+   * Get the css selector names to use for the table based on the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the css selectors
+   * @protected
+   */
+  _getTableSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case interfaces.ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
+        break;
+      case interfaces.ELayoutMode.GRID:
+        sizeClass = this.classicGrid ?
+          `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
+          `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+        break;
+      case interfaces.ELayoutMode.VERTICAL:
+        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
+        break;
+    }
+    return sizeClass;
+  }
+  /**
+   * Get the table and map nodes based for the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the parent node that contains the table and map
+   * @protected
+   */
+  _getBody(layoutMode, panelOpen, hideMap) {
+    const contentClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID && panelOpen ? "display-grid" :
+      layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "" : "display-flex";
+    return this.classicGrid ? (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
+  }
+  /**
+   * Get the map and card nodes based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getMapAndCard(layoutMode, panelOpen, hideMap) {
+    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
+    return this.classicGrid ? (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
+  }
+  /**
+   * Get the map node based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getMapNode(layoutMode, hideMap) {
+    const mapDisplayClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "display-flex height-full width-1-2" :
+      layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "" : "display-none";
+    const mapContainerClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
+    return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
+  }
+  /**
+   * Get the card node based for the current layout options
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param hideMap when true no map is displayed
+   *
+   * @returns the map node
+   * @protected
+   */
+  _getCardNode(layoutMode, hideMap) {
+    const cardManagerHeight = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "" :
+      layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
+    const cardManagerContainer = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ?
+      "width-full adjusted-height-100" : "width-50 height-full";
+    return (index.h("div", { class: `padding-1-2 ${cardManagerContainer}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+  }
+  /**
+   * Get the table node based for the current layout
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   * @param panelOpen boolean indicates if all panels are open
+   *
+   * @returns the table node
+   * @protected
+   */
+  _getTable(layoutMode, panelOpen) {
+    const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
+    const icon = this._getDividerIcon(layoutMode, panelOpen);
+    const tooltip = panelOpen ? this._translations.close : this._translations.open;
+    const id = "toggle-layout";
+    const toggleLayout = layoutMode === interfaces.ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
+    const toggleSlot = this.classicGrid && layoutMode !== interfaces.ELayoutMode.VERTICAL ? "footer" :
+      this.classicGrid && layoutMode === interfaces.ELayoutMode.VERTICAL ? "panel-end" :
+        layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "header" : "panel-start";
+    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+  }
+  /**
+   * Open/Close the appropriate panel.
+   * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
+   *
+   * @returns void
+   * @protected
+   */
+  _toggleLayout() {
+    this._panelOpen = !this._panelOpen;
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await locale.getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return index.getElement(this); }
+};
 CrowdsourceManager.style = crowdsourceManagerCss;
 
 exports.crowdsource_manager = CrowdsourceManager;